本设计规范基于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常用字体边距规格对照表