APP设计规范

2015-06-08 本文已影响18096人 LeapDeXign

本设计规范基于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(设计稿中使用)