中台移动端设计规范

规范 移动端

中台移动端规范基于苹果和谷歌的官方文档，结合公司内部产品需求，同时根据行业应用的通行样式，制定了通用APP和移动网页页面的设计元素规范和典型页面样式。

由于国内推行Google Material Design的app较少，主流安卓应用都采用了和IOS近乎一致的视觉效果和交互方式，所以此规范以IOS规范为基准，适用于ios和android界面设计。

设计目的：

• 帮助设计团队提高设计质量，工作效率
• 减低各方沟通成本，统一设计标准及工作方法
• 支持模块化设计，减低开发成本，加快产品开发迭代的生产速度。
• 逐步提高交互体验，更好的服务于用户体验工作。

设计标准原则：

1. 高效设计，优质的阅读体验，保持专注，简约流程。
2. 快速认知，快速记忆，降低认知成本。
3. 标准的基础设计规范。
4. 进阶标准，情感化设计体现，产品品牌形象传播。

规范使用者：中台前台移动端页面设计师

1.设计标准尺寸

使用750*1334px 作为设计稿尺寸。

2.布局标准

在间距和文字布局时，尽量使用双数整数，可以保证开发在适配不同大小时可以被整除。
间距使用8的倍数来做调整。

移动端8px原理由来（见下图）
1.由于IOS技术开发是以320*480px为标准开发的，所以设定此尺寸为1，算出各个尺寸的比例。
2.各个尺寸比例的值乘以4时，各个尺寸都能够满足是整数，且保证开发时不会模糊。
3.@2x切图设计稿尺寸为640*960，所以我们选择该比例下的8为最小尺寸单位。

3.文字标准

设计稿字体：苹果使用苹方字体，安卓使用思源字体。
表达文字重要程度时，不要使用PS加粗，使用字体提供的字重，如regular,light,bold

iOS开发字号=PS设计字号/2，所以字号用双数，段落行间距与字号的比例保持在1.5-1.6之间

单独的文字与其它设计元素的常用间距：
紧密距离8px
中等距离16px
较大距离24px

4.标准色

• android开发使用的颜色值是alpha+HEX, 如 #CC000000 代表80%黑色 ，前两位是alpha,后六位是HEX色值。

  alpha值的对应表
  100% — FF
  95% — F2
  90% — E6
  85% — D9
  80% — CC
  75% — BF
  70% — B3
  65% — A6
  60% — 99
  55% — 8C
  50% — 80
  45% — 73
  40% — 66
  35% — 59
  30% — 4D
  25% — 40
  20% — 33
  15% — 26
  10% — 1A
  5% — 0D
  0% — 00

• ios开发使用的颜色值是RGB+A,alpha值在0~1之间，0代表完全透明，1代表完全不透明。也可以是0.55（55%）或者0.54（54%）。如（0,0,0,0.5）代表50%的黑色。

以下是APP常用标准色

5.按钮

6.图标

应用内图标尺寸大小

图标栅格黄金比例

苹果开发出的图标栅格标准，可以此作为图标设计的方向，也可以突破这个规则自行调整。
以64px为一个单位，即a=64px。那么大正方形的边长的一半=8a，大圆半径=7a，中圆半径=4.25a，小圆半径=3a。
8a/(8a-3a)=1.6 小圆与大正方形接近黄金比
7a/4.25a≈1.647 中圆与大圆接近黄金比
4.25a/3a≈1.417 中圆与小圆比例接近√2

简而言之，图标的视觉内容区域不要超过大圆

图标制作时的圆角半径，根据图标的大小半径不同，可下载官网图标模板。
苹果官方图标模板下载：Apple icon Template

7.公共控件

控件为手机系统自带的样式，一般情况下无需另作设计，可以下载官方的UI组件模板直接使用。这里列出可直接调用的控件。
UI kit 下载：
iOS9 ui组件
安卓5.0 ui组件

8.典型页面

根据行业主流APP总结了一些典型页面的通用样式模板，设计是可在此样式基础上，根据需求进行修改。

8.1登录注册页面

8.2首页

8.3消息列表页

8.4个人信息页

8.5设置页

8.6下拉菜单的页面

8.7输入文本页面（包含添加图片页面）

8.8聊天对话页

聊天气泡中，一行最多13个字

8.9信息流（帖子列表）

8.10帖子详情，文章正文，评论列表

8.11空白页

9.闪屏/启动页

IOS 根据1242*2208设计尺寸制作闪屏 ，然后分别导出以下尺寸闪屏图
1242*2208
750*1334
640*1136
640*960

安卓根据1920*1080设计尺寸制作闪屏，然后分别导出以下尺寸闪屏图
1080*1920
720*1280
480*800

附录

1.安卓开发单位转换

• ppi,dp,sp,px单位转换

ppi (pixels per inch):图像分辨率，在图像中每英寸包含的像素数
计算公式

• dp:安卓专用长度单位

px = dp * (ppi / 160)
例：以720*1280px (320ppi)为例计算 1dp*320ppi/160=2px
所以此分辨率下 1dp=2px

• sp:安卓专用字体 单位

px=sp*(ppi/160)
以720*1280px (320ppi)为例计算 1sp*320ppi/160=2px
所以此分辨率下1sp=2px

2.安卓个尺寸下 px,dp,sp的关系

注：蓝色为开发基准尺寸，红色为设计基准尺寸。