4. 手机WEB

苹果

  1. 手机分辨率
  • iphone1-3: 3.5英寸 320*480
  • iphone4/s:640*960 UI发展的里程碑
  • iphone5/s:640*1136 土豪金
  • iphone6/s/7/8: 750*1334 苹果最常用的开发尺寸
  • iphone6p/7p/8p:11252001开发尺寸,12422208 真实尺寸
  • iphoneX:齐刘海 1125*2436
  1. 布局
  • 常用布局
    • 状态栏:最顶部 手机等当前状态 40px
    • 导航栏:此顶部 产品等当前页面 88px
    • 标签栏:最底部 产品核心功能排列 98px

image.png

image.png

image.png

image.png

通常左右边距最小为20px,这样的距离可以展示更多的内容,不建议比20还小,否则就会使界面内容过于拥挤,给用户的浏览带来视觉负担。30px是非常舒服的距离,是绝大多数应用的首选边距。

image.png

image.png

卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式,至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定,通常最小不低于16px,过小的间距会造成用户的紧张情绪,使用最多的间距是20px、24px、30px、40px,当然间距也不宜过大,过大的间距会使界面变得松散,间距的颜色设置可以与分割线一致,也可以更浅一些。

以iOS(750*1334px)为例,设置页面不需要承载太多的信息,因此采用了较大的70px作为卡片间距,有利于减轻用户的阅读负担,而通知中心承载了大量的信息,过大的间距会让浏览变得不连贯和界面视觉松散,因此采用了较小的16px作为卡片的间距。

image.png

image.png

image.png

  1. 设计规范