移动UI设计规范1.0

公司移动UI设计规范

说明书

修改记录

1、前言

本文档主要为UI设计师和前端工程师提供设计参考和最佳实践，避免相互之间出现技术衔接脱节的问题。文档将由设计尺寸、界面元素、设计细节、切图细节四个部分组成，分别说明如下。

2、设计尺寸

本节主要阐明目前主流浏览设备和软件中的界面尺寸，相关设备和软件分别为iPhone、iPad、Android、Web。详细说明如下

2.1 iPhone

2.2 iPad

2.3 Android

屏幕尺寸

指实际的屏幕物理尺寸，以屏幕对角线来测量。为方便起见，Android把屏幕大小分为广义的四类：小、正常、大、特大。

像素

代表屏幕上一个物理的像素点。

屏幕密度

为解决Android设备中屏幕的碎片化，Android厂商引入了DP的概念。即一定尺寸屏幕显示像素的数量，因此有了四类屏幕密度：低（120dpi）,中（160dpi）,高（240dpi），超高（320dpi），而像素= DP*(dpi/160)。

例如一个240dpi的屏幕里，1DP = （240/160）=1.5px。

因此，设计尺寸确认后，以图标为例，需向上或向下做小、正常、大、特大，以及低、中、高、超高的图标尺寸与密度来适配不同的机型。

典型的设计尺寸

320dp：一个普通的手机屏幕（240x320,320x480,480x800）

480dp：一个普通的平板（480x800）

600dp：7寸平板（600x1024）

720dp：10寸平板（720x1280,800x1280）

安卓设计尺寸建议为720x1280或是480x800

2.4 Web

Windows XP的任务栏高度为30px，Windows7任务栏的高度为40px

系统分辨率统计

最安全的分辨率为1024x768，建议分辨率1280x800

分辨率统计

网页宽度与首屏高度

安全宽度为1002px，建议宽度为1258px

高度：Windows xp下首屏为580px，Windows 7下为710px

3界面元素

3.1iPhone

iPhone的界面元素一般由状态栏、导航栏、标签栏、内容区域四部分组成。如下表。

3.2Android

安卓的界面区域与iPhone的界面区域相同。因为安卓中各区域的高度都由用户自定义，所以并没有严格的尺寸要求。以下给出一个分辨率下的标准参考，其它分辨率可按比例进行调整或自定义。

4、设计细节

4.1字体

iPhone上的字体英文为：HelveticaNeue，中文为黑体；

安卓上的字体英文为同iPhone，中文为微软雅黑或华文黑体、方正黑简体；

字体大小没有严格的限制，最简单的方法是找到你觉得好用的APP并截屏，然后放进PS自己对比调节字体大小。

下图供设计人员参考

4.2图形

状态栏

部件

所有部件的边长必须是偶数值

按钮

每个按钮有4种状态：默认、按下、选中、不可点。设计时至少需考虑默认和选中两种状态。

图片

除了广告图片，其它部件最好都用形状工具绘制。

边距

部件和四周和屏幕边框至少保持20-30px的空间

交互

站在使用者角度出发，譬如什么时候需要标签栏，什么时候在导航栏放返回按钮。

5、切图细节

5.1 切图适配

iPhone

iPhone的切图素材转换关系：

非Retial：@2x：@1x = 1：2：3。比例1适配mini及非视网膜屏的3代iPhone，

比例2适配4、4S、5、5S、6，比例3适配6Plus。

Android的屏幕尺寸较多，只能根据项目要求来适应主流屏幕尺寸。常见尺寸如下。

480x800、720x1280、1080x1920（具体参见2.3节Android模拟机尺寸）5.2 切图文件

需要提供的文件需包括图片，如下图所示。

5.3 切图要点

1）以每个模块名字来创建文件夹，并分开存放切图文件，如下图所示。

2）一般情况下切图图片为png24格式

3）底部标签栏有默认和选中两张图片

4）图片命名规则

建议采用“模块_类别_功能_状态.png”的格式来命名如：searchbg.png 应为home_btn_search_selected.png