在上一篇《是时候整理设计规范了 (上) 》中提到了为什么要做设计规范、什么时候做、做给谁用以及Web端的设计规范怎么做，本篇接着讨论移动端的设计规范。

一、设计准则

在《iOS人机交互指南》列出了3条Design Themes和6条Design Principles分别是：

Clarity 清晰：文字、图标、图像清晰易懂，巧妙地突出重点并传达可交互性

Deference 遵从：干净美观的界面、清晰流畅的动态效果

Depth 深度：页面内视觉层级、页面间交互层级

Aesthetic Integrity 美学完整性

Consistency 一致性

Direct Manipulation 直接操作

Feedback 反馈

Metaphors 隐喻

User Control 用户控制

二、设计风格

设计风格主要包含颜色、文字和图标三部分内容，与上篇Web端通用，不在重复描述。

三、框架布局

同Web一样，移动端的框架布局也涉及到栅格和间距的应用，关于栅格和间距以后单独做讨论。

四、组件

iOS将页面分成了三大基本元素：Bars 栏、Views 视图、Controls 控件。

1、Bars 栏

栏的作用是告知用户所在位置、提供导航、可包含按钮或其他触发功能、交流的元素。

（1）导航栏 Navigation Bars

（2）搜索栏 Search Bars 

（3）范围栏 Scope Bars（对搜索结果进行分类）

（4）状态栏 Status Bars

（5）标签栏 Tab Bars

（6）工具栏 Toolbars

标签栏与工具栏从表现层面来讲基本没有什么差别，但本质是不同的。标签栏是同级页面之间的切换，比如从“首页”切换到“我的”页面；工具栏则是对当前页面进行操作，比如复制、分享、编辑、删除等等。

2、Views 视图

视图用于内容展示，如文本、图形、动画和交互元素等，可包含滑动、插入、删除、排行等。

（1）相册 Collections：上传图片时“从相册选取”

（2）图片视图 Image Views：点击查看大图

（3）文稿阅读 Pages：阅读文稿

（4）滚动视图 Scroll Views：上下或者左右滑动

（5）分列视图 Split Views：一般用于iPad 

（6）列表 Tables

（7）文本视图 Text Views：文本输入的样式

（8）网页视图 Web Views：HTML内容的展示

（9）操作列表 Action Sheets

（10）活动视图Activity Views：一般在分享时出现

（11）警告弹框 Alerts

（12）气泡浮层 Popovers

（13）toast：是安卓Material Design的一种提示样式，与Alerts相比，更轻量级。

3、Controls 控件

控件用于触发功能、传递信息，如按钮、开关、输入框、进度条等。

（1）按钮 Buttons：状态和分类可参见上篇

（2）编辑菜单 Edit Menus：长按时出现、一般包含文字的复制、粘贴等功能

（3）标签 Labels：iOS将标题和小段的文字定义为Labels

（4）页面控制 Page Controls：如天气App切换城市

（5）筛选框 Pickers：常见的有日期选择、城市选择

（6）进度指示器 Progress Indicators：即通常讲的加载Loading

（7）刷新控件 Refresh Content Controls

（8）分段控件 Segmented Controls

（9）滑动条 Sliders

（10）调数器 Steppers

（11）开关 Switches

（12）文本输入框 Text Fields

小结

本文主要以iOS为例，介绍了移动端的设计规范大概涉及的内容，安卓与之大体相似，建议对平台规范还不是很熟悉的人先阅读相关内容。

iOS人机交互指南：https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

安卓Material Design：https://material.io

最后，欢迎关注我的微信公众号“兔宅菌”

Powered by Froala Editor