移动端页面信息规范

1、结构

1.1、页面结构

顶栏导航根据固定高度x1.2.3适配即可；内容区域根据不同手机分辨率进行等比缩放。

---

2、导航

2.1、抽屉导航（应用主导航）

抽屉导航为应用主导航，方便扩展导航选项；隐藏式处理可以为内容区域留有更多的展示空间；其它场景下不建议使用。

2.2、分段导航

分段导航用于比较高的层级来组织信息，是两个或多个标签的集合；每个标签间互斥，通常用于显示不同视图之间的切换。

分段导航一般出现页面的顶部或者页面中，让用户可以在页面内的不同内容之间快速切换。

突出显示当前选项，让用户知道所处的位置。

最多设置 5 个选项，超出的选项可以滑动展示。

2.2.1、固定分段导航

适用于标签的数目2-5个的情况，每个标签位置固定，有利于用户的记忆：

2.2.2、非固定分段导航

适用于标签数量比较多（大于5个）或标签数量不固定的情况。

---

3、应用区域分割

在应用使用过程中，出现最多的就是页面之间的相互切换；切换页面后，通常有一个数据请求的过程，为降低这一过程中用户等待的混淆和沮丧感；需要进行加载页面的动态效果设计；以下我们针对原生应用及H5页面分别进行了区分。

3.1、状态栏

状态栏与导航栏为组合使用方式，背景不可存在差异化（特定手机除外），包括自定义颜色、图片等沉浸式用法。

3.2、导航栏

导航栏与状态栏为组合使用方式，背景不可存在差异化（特定手机除外），包括自定义颜色、图片等沉浸式用法。

导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。

导航区： 通常只有一个操作，即返回上一级界面。当用户进入H5页面以后，同时显示“返回”和“关闭”按钮，关闭则离开H5页面，回到发起页；

标题区： 可以为每个页面定义标题，标题的文字展示区域固定，超出长度则会被省略。

操作区： 操作区可根据具体需求选择有无。

3.3、内容区

内容区分展示类和操作类两部分；

3.4、工具栏

用于操作当前页面的置底功能，通常最多不超过5个功能；可根据页面需求配置是否需要工具栏。

工具栏在设计过程中可根据具体需求逐步设计并归类入库。

总结

以上为本次针对“移动端界面信息规范”做出的归类和总结；

在整理公司移动端交互规范指南时，突发奇想发篇文章与大家进行交流；如有不足，还请各位看官加以指正；

后续小编将持续更新关于，交互设计指南用户交互章节的相关设计要点。

注：图片资源来源于网络，设计资料内容来自于个人的相关看法及一些相关资料的总结。