UI设计规范

一、ios篇

1、尺寸及分辨率

• iPhone界面尺寸
  320x480 640x960 640x1136 750x1334 1080x1920
• iPad界面尺寸
  1024x768 2048x1536
  单位都是px（像素，网页UI与一定段UI分辨率一般都只要72）
  设计的时候不是每个尺寸都要做一套，一般采用750x1334的尺寸进行设计。

2、界面基本组成元素

• iPhone的APP界面一般都是由4个元素组成：状态栏、导航栏、主菜单栏、内容区域。

• 尺寸
  状态栏：我们经常说的信号、运营商、电量等显示手机状态的区域，高度：40px
  导航栏：显示我们当前界面的名称，包含想要的功能或者页面跳转按钮，高度：88px
  主菜单栏：提供整个应用的分类内容的快速跳转，高度：98px
  内容区域：展示应用提供个的相应内容，布局变更非常频繁，高度：910px

• iPhone plus尺寸
  状态栏高度：54px（40px）
  导航栏高度：132px（88px）
  标签栏高度：146px（98px）

3、字体大小

• iphone上的字体英文为Helvetica Nenu，一种纤细简单的文字，中文微一种比较细黑体（常用华文细黑或者黑体简，不是微软雅黑）

• 导航栏标题：medium 34px；
  按钮和表头：light 34px；
  表格标签：Regular 28px；
  Tab页面标签：Regular 20px；
  用的最多的是24px和20px，最小18px；

• 用户体验

	可接受下线	见小值	舒适值
长文本	26px	30px	32-34px
短文本	28px	30px	32px
注释	24px	24px	28px

4、图标尺寸大小

• 图标都是按照最大1024x1024进行设计的，之后按照比例缩小调整，高光部分与圆角不需要做，ios系统自动生成，一般图标最大做256x256，最小44x44。
  程序应用 120x120px

• 主屏幕 114x114px
  Spotlight搜索 87x87px
  标签栏 75x75px
  工具栏和导航栏 44*44px

5、UI布局概念

• 可点击对象的区域：尺寸不要小于44x44px；
• 将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从左到右的用户来说，更贴近屏幕左侧位置容易引起关注；
• 利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来说，更能吸引目光，看上去更加重要；

二、Android篇

1、尺寸及分辨率

• Android界面尺寸
  462x800 720x1280 1080x1920

• Android的尺寸要比IOS要多很多套，建议采用720x1280这个尺寸进行设计
  Android的APP界面与IOS基本相同：状态栏、导航栏、主菜单栏以及中间的内容。

• 状态栏高度：50px
  导航栏高度：96px
  主菜单栏高度：96px
  内容区域高度：1038px
  Android的规范没有IOS标准，很多 Android系统手机去掉了实体键，把功能键也放在屏幕上，高度与菜单栏高度一样：96px