【设计资讯】移动端UI设计规范

海淘科技为你带来的：【设计资讯】移动端UI设计规范

前言

设计目的设计

1. 帮助设计端对提高设计质量、工作效率。当然我们在做一个移动UI时肯定是我们要有所需求的
2. 减低各方沟通成本， 统一设计标准及工作方法
3. 支持模块化设计，减低开发成本、加快产品开发代的制作速度。
4. 逐步提高交互体验，更好的服务与用户体验工作

标准原则

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

界面设计构成

图标层、图文排版层、布局层

设计标准尺寸

不同的手机型号都有他不同的分辨率和尺寸。

布局标准原理

以为移动端有着不同的像素，所以我们在设计布局是要一定的标准。

布局标准控件

移动端页面的控件是少不了的，但是我们对移动的界面布局也有着规则，下图所示。

布局标准案例

字体大小标准

移动端界面设计，移动端设备，桌面的尺寸大小不一，阅览时要提升舒适度，给出了字体大小的标准。

字体使用规则标准

在用户浏览时更加的舒适，推出了字体使用规则标准，1.设计稿标准文字；2.文字搭配；3.详情页标题文字与详情文字间距；4.行间距设定；5.对齐原则。

字体搭配标准

文字大小的搭配也是给出了标准，用于详情页的标题文字和详情文字，分别采用36px和30px；文字大小用于索引列表标题和详情简介，分别是32px和26px，或者30px和24px；字体大小用于带头列表标题和辅助信息，分别是30px和22px。

文字案例-（导航栏标题、二级导航文字、菜单栏文字、内容信息文字）

文字案例-(带头像列表文字搭配)

文字案例-（设置列表文字、设置列表辅助信息文字、未读信息文字）

文字案例-(内辅助信息)

文字案例-（文字大小）

按钮大小、带头像文字搭配文字、内文标题文字、内文详情文字、小标题文字、提示文字

桌面图标栅格系统

桌面图标案例1

桌面图标案例2

系统图标栅格系统

系统图标视觉比例栅格

系统图标案例1

系统图标案例2

附录一安卓开发单位转换Appendix android development unit conversion

安卓开发单位转换1

安卓开发单位转换2

安卓开发单位转换3

以上海淘科技为你提供的，设计资讯中移动端UI设计规范。不仅有设计资讯，还有网站建设方案资讯。文章下载，点击：【设计资讯】移动端UI设计规范。