设计规范-导航、弹窗、视图

常见导航样式：

1. 根据产品的特性，导航可以混合使用，体现形式多样化。

2. 不能为了追求多样化，滥用导航类型。

扁平式导航：

在一级页面提供导航栏，一般处于顶部/底部，适合频繁切换的模块，方便用户在不同的模块间操作。

例：微信的底部导航栏、小红书的顶部/底部导航栏

分层式导航：

在每个页面都只做一次选择，直到到达目标页面，要想到达另外的目标页面， 你必须重回之前的步骤或是从头开始重新选择。适合目的性强，但使用频率不高的模块。

例：手机设置、messenger

舵式导航：

在扁平式导航的基础上增加一个更扁平的入口，是一种标签导航数过多时的拓展方式，一般以+号呈现。

例：闲鱼的发布、百度知道的问答、早期的微博

抽屉式导航：

一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后再使用相同的按钮隐藏起来。

例：QQ、keep、小红书

沉浸式导航：

沉浸式导航又叫内容驱动式导航 或体验驱动式导航，是沉浸式设计的一种表现。在内容中自由地转换，或是内容本身定义导航。

例：阅读类app、游戏类app、视频类app

弹窗：

弹窗分为模态弹窗和非模态弹窗，区别是：

模态弹窗：必须点击弹窗上的按钮或关闭才能回到主任务

非模态弹窗：弹窗不会对主任务有影响，如toast提示

视图：

视图就是APP内信息主要的展现形式

列表视图：

列表视图是用分割线将内容进行区分。利用紧密、对比、重复、对齐”的原则设计每条列表的信息，使信息清晰有力地传达给用户。列表视图分为两种样式: 一种是平铺型，另一种是分组型，如下图所示。

卡片视图：

卡片视图是将同类信息归纳到一一个矩形或者圆角矩形当中，在占用较少屏幕空间的情况下将信息有组织地划分到不同的区域中。卡片可以被堆叠、覆盖、移动，这样极大地扩展了一个内容块的视觉深度和可操作性。卡片在设计形式上还可以增加边缘、阴影，使得卡片具有立体感。

集合视图：

集合视图是将同类信息用平铺的形式展现，一般以图片为主题，文字为辅助信息。集合视图用于管理一系列有序的项，并以一种自定义的布局来呈现它们。例如，系统照片将图片集合在一起，以相同大小的正方形进行展示，用户通过点击图片放大查看。

图文视图：

资讯类使用较多

网络视图：

目前绝大部分的网络视图是指直接在内容区域嵌入HTML5页面，其优点是可以在服务端直接快速发布、更新内容，而不需要在应用平台进行版本更新。

临时视图：

让用户只有在完成当前的任务或关闭一个信息或页面之后，才能去做其它的事情，降低了交互层级。当屏幕上出现临时视图时，用户必须通过点击按钮或是其它特殊方式才能退出。

模态视图：

模态视图与子页面的主要区别在于：

1. 子页面是从主任务下分支的另一任务。
2. 模态视图是浮于主任务之上，暂停了主任务进程，且服务于当前主任务的。

用模态视图有以下几个特点：

1. 占据父视图的部分区域且有明确的完成/关闭按钮。
2. 包含完成当前任务所需的文字和控件。

警告视图：

用户在操作APP时，涉及到敏感操作或获取用户的位置、相册、相机等就需要一个视图弹框来确认操作是否继续进行，这时候用到的临时框就是由标题、正文、按钮等组成的警告视图。

1. 当需求不明显时，向用户解释为什么你的 App 需要这些信息，好像是21年新规定。
2. 不要随便获取权限，对运行 App 至关重要的信息在 App 一启动时就请求授权，比如网络、位置、麦克风…

操作列表：

比如点击分享按钮后弹出的选项就是操作列表，由于操作项过多以列表形式展示。

吐司提示：

Toast不需要用户操作，一般维持的时间是2秒到3秒后自动消失。时间太短用户没办法感知，时间过长又没有必要。

如：由于移动端的使用场景很复杂，用户执行了某一个操作时，很多时候APP并不能立即反馈给用户操作结果，这个时候弹出一个Toast提示用户已经执行了该操作，会显得很人性化，这就是用户体验。

数据键入：

手动输入信息都是一个乏味的过程。大量的手动键入会导致用户没有耐心放弃产品。

数据键入注意点：

1. 能选择就不填，降低操作频次与复杂度
2. 有已知的数据可以分析最好不要用户重新输入
3. 有默认值可用最好也不要用户重新输入
4. 要键入一次搞定不要反复操作
5. —能实时校验时不要等到最后再告诉用户错了