一、顶部导航栏（Navigation Bars)
1. 利用场景
用于在层级信息中的导航，也可以用来管理屏幕信息。
2. 外不雅观
导航栏项目分为左中右三个区域，左侧一样平常放置返回按钮或左按钮，右侧放置右按钮，中间则是提示信息。
3. 通栏显示
iOS：在iPhone上，导航是整屏通栏显示的。在iPad上，导航栏可能会嵌在分栏中的某一栏里，不会横贯整屏。
Android：通栏显示，当设备尺寸发生变革时需进行自适展示，展示的信息功能需根据尺寸大小对一些次要功能进行隐蔽或露出。
4. 标题展示
iOS：利用当前视图的标题作为导航栏的标题；标题左侧涌现返回按钮，写着前一级的标题。
Android：标题信息可以根据高下文信息实时转换。
5. 原生规范【iOS Human Interface Guidelines】
考虑在程序的最顶一级的工具栏放置分段控件。 避免用过多的控件填满导航栏，纵然看起来空间足够。 可以定义导航栏的颜色和透明度。 避免改变返回按钮的外不雅观和行为。 不要创建分段的返回按钮（比如面包屑按钮）。 iPhone上需考虑由于设备方向变革导致的导航栏自动改变。6. 原生规范【Google Material Guidelines】
可定义上滑时隐蔽顶部导航栏，下拉时展示顶部导航栏。 可定义导航栏的颜色，标题文案可根据高下文信息实时转换。 导航栏上的操作按钮可以根据高下文需求进行转换。二、搜索栏（Search Bars)
1. 利用场景
用于帮助用户查找内容或快速定位。
2. 外不雅观
不要增加额外的“搜索”按钮，利用手机供应的键盘的自带“搜索”按钮。 放在页面顶部位置，而不是页面中部，更符合用户的认知习气。3. 交互解释【搜索过程】
默认状态：默认展示搜索提示词； 获取焦点：跳转到搜索页，并展示热门候选词，最近搜索记录； 输入中：根据输入的内容展示遐想结果，如果候选词包含在多个分类中，还须要供应分类展示页面。 结果展示：用界面或者笔墨描述按照何种排序规则展示结果，如何展示。4. 交互解释【呈现搜索结果】
给用户想要的预期结果，最吻合的结果排在最靠前； 保留用户输入的内容； 自动纠正用户输入的缺点拼音，给出和缺点拼音最贴切的（精确）结果。搜索结果同理。 须要提示用户输入的内容无结果，比“无结果”更好的办法是“给用户推举其他内容”。三、状态栏（Status Bars)1. 利用场景
用于展示设备和当前环境干系的主要信息。
2. 外不雅观
总涌如今屏幕顶部，包含网络连接、韶光、电量等用户须要的信息。
3. 网络提示
iOS：在网络访问的时候会显示Loading的Indicator。
Android：会在开放用户权限或连接共享做事时显示小箭头。
4. 交互解释【返回顶部】
iOS：点击顶部状态栏后会返回页面顶部。
Android：安卓不支持该交互。
5.交互解释【何时隐蔽】
当用户全屏不雅观看媒体或嬉戏游戏时，要将状态栏隐蔽；否则最好不要隐蔽。
四、底部导航栏（Tab/Bottom Bars)
1. 利用场景
用于切换子任务、视图和模式。
2. 原生规范【iOS Human Interface Guidelines】
如果底部导航栏中的某个选项暂时不可用，不要将该选项置灰。在不可用而又点击了的情形下，页面只要展示这个页面为什么没有内容就可以了。 避免利用过多的选项。当然，如果选项过少也会有问题。一样平常在iPhone上，3到5个选项比较得当。在iPad上可以适量增加。 支持配置红点或数字进行信息提示。3. 原生规范【Google Material Guidelines】
底部导航栏紧张是为手机的导航设计的。如果是在较大的显示屏上，比如桌面，则可以利用侧边导航。 仅展示最主要的3-5个功能。若低于3个，则利用标签导航，不可超过5个，否则用户会难以辨认选项。 底部导航是固定的，避免利用可横滑的交互办法。4. 交互解释【按钮状态】
按钮分为默认态与选中态两种状态。
5. 交互解释【TAB点击】
当用户选择点击某个选项时，则该当直接展现相应的页面，或者刷新当前的页面；把稳不要在点击后展示菜单或者弹出框，如果点击系统返回键，不会切换到底部导航栏上一次点击的页面。 点击当前页按钮时，弹回当页第一屏位置。 点击不同选项按钮时，不须要横滑切换动效。6. 交互解释【是否固定】
如果涉及的APP层级大略，不存在操作路径和界面层级的路径冲突，且下级界面不存在底部固定工具栏，那么推举利用固定处理。 如果涉及的APP界面信息层级繁芜，那么推举利用不固定方案。五、工具栏（Tool Bars)
利用场景
用于操作/切换当前屏幕上的信息。
外不雅观
工具栏一样平常放置于屏幕的底部，在iPad上也可能涌如今顶部。工具栏上的控件等宽放置。
外不雅观1：图标+笔墨外不雅观2：纯图标外不雅观3：纯笔墨原生规范【iOS Human Interface Guidelines】
工具栏上要放那些用户能对当前内容所做的操作，不要用它来切换程序模式。 在工具栏上放置当前情景下用户最常用的功能。 只管即便避免在同一个工具栏上稠浊利用有边框和无边框的控件。 支持定义工具栏的颜色和透明度。 iPhone上需考虑由于设备方向变革导致的工具栏高度变革。原生规范【Google Material Guidelines】
Google Material Guidelines中将Tool Bars作为WEB元件进行解释，而将上方的底部导航栏Bottom Bars作为移动真个元件利用，功能和场景同等于iOS的Tool Bars。
感谢阅读，敬请期待后续Views篇和Controls篇。
文由 @愚者秦 原创发布于大家都是产品经理，未经容许，禁止转载
题图来自Unsplash，基于CC0协议
