UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

1.布局数值

（1）字体

• ios：苹方、Helevatica
• 安卓：思源黑体、roboto

（2）图片适配

• ios：宽750px
• 安卓：宽720px
• 适配问题：以瓷片区域为例，保证两边的留白以及图片之间的间距不变，仅仅缩放图片的比列
• 另外呼吸感的数据：两边留白12px，中间间距6px。
  

2. 基础组件

• 安卓的最小点击区域：48px
• ios的最小点击区域：44px
• 适配为题：在设计图标的时候，统一成48px，仅仅需要在44px的基础上，在周围加上4px的空白像素。
  

3.系统用色

• ios的用色比较灵活，可以多去参考优秀的App，或者ios系统自带的颜色，建立自己的色卡
• 安卓的用色，则是参考手册。
• 注意：这里的用色指的是状态栏、属性栏等
  

4.图标

• ios的图标以线性为主，特点是简洁、纤细
• 安卓的图标以面性为主，特点是实体隐喻、参考实际生活
• 适配问题：比如未选中的时候使线性，选中为面性。
  

5.组件

这些组件都可以在sketch里找到

• 安卓：file - new from - moterial
• ios：左上角 - ios选项
  
  
  

6. 设计样式

（1）抽屉式（比如点击个人中心）

• 突出首页核心功能
• 弱化个人中心板块
• 业务分类少

（2）平铺式

• tab栏展示，功能突出
• 方便点击
• 业务分类较多、信息量较大
  

7.小结

做到一稿适配原则，多和产品沟通