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

时间:2024-03-23 19:28:46

1.布局数值

(1)字体

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

(2)图片适配

  • ios:宽750px
  • 安卓:宽720px
  • 适配问题:以瓷片区域为例,保证两边的留白以及图片之间的间距不变,仅仅缩放图片的比列
  • 另外呼吸感的数据:两边留白12px,中间间距6px
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

2. 基础组件

  • 安卓的最小点击区域:48px
  • ios的最小点击区域:44px
  • 适配为题:在设计图标的时候,统一成48px,仅仅需要在44px的基础上,在周围加上4px的空白像素
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

3.系统用色

  • ios的用色比较灵活,可以多去参考优秀的App,或者ios系统自带的颜色,建立自己的色卡
  • 安卓的用色,则是参考手册。
  • 注意:这里的用色指的是状态栏、属性栏等
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

4.图标

  • ios的图标以线性为主,特点是简洁、纤细
  • 安卓的图标以面性为主,特点是实体隐喻、参考实际生活
  • 适配问题:比如未选中的时候使线性,选中为面性
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

5.组件

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

  • 安卓:file - new from - moterial
  • ios:左上角 - ios选项
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

6. 设计样式

(1)抽屉式(比如点击个人中心)

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

(2)平铺式

  • tab栏展示,功能突出
  • 方便点击
  • 业务分类较多、信息量较大
    UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配

7.小结

做到一稿适配原则,多和产品沟通
UI设计课EDC研究所1期 Part 16/17 - 安卓和ios的比较和适配