本设计规范基于Android Design设计准则、Material Design设计准则、iOS 7以及iOS 8官方人机交互界面准则
APP设计规范随着系统的不断变更而变更，两大平台的设计规范也在不断地借鉴参考，在很多方面越来越接近彼此，但是并不意味着所有的平台都沿用一套设计。
所有平台沿用一套设计容易造成和原平视觉风格不符的缺点(iOS中出现Android的样式，Android中出现WindowsPhone的样式，都是不合适的)，并且可能使开发成本大大(为了达到另一个平台风格的样式效果需要去调用第三方插件，会破坏原来的框架，造成性能的下降和开发时间增长)
这里仅讨论Android和iOS系统，其他平台APP、WebAPP、混合式APP均不列入讨论范围，但可以借鉴
Android
基础单位
- 图形--DP(开发中使用)：
| Screen | DPI | Exchange |
|---|---|---|
| 360x640 | MDPI | 1DP=1PX |
| 480x960 | HDPI | 1DP=1.5PX |
| 720x1280 | XHDPI | 1DP=2PX |
| 1080x1920 | XXHDPI | 1DP=3PX |
| 1440x2560 | XXXDPI | 1DP=4PX |
- 字体--SP（开发中使用）：
与DP相似，1DP=1SP
- PX(设计稿中使用)
字体
- 中文:Droid sans / 思源黑体
- 英文:Roboto系列
- 字体排版见附录
屏幕尺寸（PX）
android设备太多，具体尺寸不细列，只列标准dpi尺寸
| Screen | DPI | Number |
|---|---|---|
| 360x640 | MDPI | 160 |
| 480x960 | HDPI | 240 |
| 720x1280 | XHDPI | 320 |
| 1080x1920 | XXHDPI | 480 |
| 1440x2560 | XXXDPI | 640 |
界面元素
在新的Matearial Design中，Google重新定义了Android的设计和交互，不再是4.0之前那个混乱的时代，相继推出了Android Design 和Matearial Design 。
图标与图像
- Play Store应用图标：512x512px，PNG
- 应用图标：48x48dp
-
操作栏图标：大小32x32dp，类似黑体字体的风格，尽量使用Android内置图标
- 通知栏图标： 大小24x24dp，使用黑白的简单平面样式
- 启动画面：根据不同分辨率制作启动画面在不同分辨率下屏幕尺寸也不一致，因此我们一般都是保证启动画面的边缘都是纯色，根据上述提供的不同分辨率下的标准尺寸来制作启动画面，然后通过设置背景色的方法使得背景与启动画面相契合，实现了无失真（相关解决方法）
边框与边距
-
设计时采用间隔为8dp的基准网格，所有的组件都与8dp网格对齐；
文字则是与间隔为4dp的网格对齐。工具条中的图标与间隔为4dp的基准网格对齐。
- **状态栏：
**高度24dp - **导航栏：
**高度56dp,标题文字居左 -
**列表页：
**带有多行信息的单个列表最小高度72dp不可交互的当行信息单个列表最小高度48dp
-
垂直边框和水品外边距：
左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。
- 基本界面元素之间的间距为8dp
- 页面最小触摸目标最小尺寸为48x48dp，当为图标（24dp）或者头像（40dp）时，触摸触发区域不与触摸目标重叠
悬浮响应按钮FAB
在新的Matearial Design中，FAB按钮是一个新推出的元素，主要有两种尺寸：56dp和40dp ####
切图规则（切图工具：Cutterman）
- 所有尺寸数值必须为偶数
- 尺寸标注必须要清楚，尽量用dp标注，方便开发 (标注工具：马克鳗Markman / PS动作插件)
- 非可平铺变形图：
按照web切图进行 - 可平铺变形图(按钮等)：
点9图切图，PNG格式，后缀名.9.png >点9切图教程--ISUX
iOS
基础单位
- PT(开发中使用)-----------普通屏1pt=1px，retina屏1pt=2px
- PX(设计稿中使用)
字体
- 中文:华文细黑/华文黑体
- 英文:Helvetica
屏幕尺寸（PX）
实际iPhone app设计中一般以5S或者6为模板
- 320x480(1/3G/3GS)
- 640x960(4/4S)----------------Retina
- 640x1136(5/5S)--------------Retina
- 750x1334(6)-------------------Retina
- 1242x2208(6+)----------------Retina
- 768x1024（1/2/3/mini）
- 1536x2048(new/4/mini2)-----Retina
界面元素
在APP开发中，因为存在不同屏幕不同尺寸，所以除了banner以及某些我们需要限定的界面元素外，宽度一般是自适应的，设计的时候重点在于元素与整个页面的边距、元素与元素的边距
图标与图像
-
App Store应用图标：
1024x1024px，圆角180px，PNG -
应用图标：
iPhone-120x120px
ipad-152x152pxpx -
操作和工具图标：
尽量使用iOS内置图标，具体尺寸见具体运用位置 -
启动画面：
根据目标设备的不同尺寸制作不同的启动画面
条栏
-
状态栏：
高度40px，高度始终不变
位置最顶部
颜色:#fff、#000或者全透明
-
导航栏：
高度88px，高度在屏幕旋转时可自动调整
位置顶部，半透明
栏内字体：字号34pt，加粗效果，标题居中
栏内图标：44x44px
-
标签栏：
高度98px
位置底部
栏内图标：44x44px
-
工具栏：
高度88px,高度在屏幕旋转时可自动调整，iPhone上在底部出现，iPad上在顶部出现
栏内图标：50x50px(最大96x64px)
-
内容视图:
标题文字加粗效果，正文一般使用34px字号，每一档文字大小行间距差异为2pt； - 可交互性文字采用颜色表示高亮，不可交互性文字除非是十分重要的强调式文字否则不予颜色
- 页面可交互元素最小尺寸为44x44px
- 最小文字不应小于22px
切图规则（切图工具：Cutterman）
-
所有尺寸数值必须为偶数
-
尺寸标注必须要清楚，尽量用pt标注，方便开发 (标注工具：马克鳗Markman / PS动作插件)
-
非可平铺变形图：
PNG或者JPG格式，针对Retina屏幕，需要切成@1X和@2X，2x图需要在文件名后面加@2x。如iPhone5S，一个640x300px的banner图，需要切成banner.png(320x150)和banner@2x.png(640x300)。
如果你还需要支持iPhone6+，则需要再导出一张图片，后缀为@3X。 -
可平铺变形图(按钮等)：
遵循上述切图规则的同时，有以下特殊:
注意事项
- 尤其注意考虑到设备旋转以及手机平板切换时候的app界面布局情况，若无需要可以关闭旋转的需求；
工具汇总
切图命名事项
-
切图分层级命名
命名尽量不要太多，一般是 「页面+定位＋类型+标题＋属性」
例子：
home_tabbar_icon_home_s@2x.png
account_list_icon_arrow_left@3x.png -
分文件夹管理
按照页面>项目>版本的文件夹分类
例子：
主页>Mobile-Web>1.0版本
内容页>Reading-APP-iOS>2.1版本 -
做好命名的目的
方便自己检索
方便开发检索
附录
-
Android L常用字体边距规格对照表
网友评论