APP弹窗如何做到统一又有特色

上一篇文章《APP弹窗的分类及设计技巧》汇总了APP弹窗的分类，今天主要针对如何在一个项目中进行APP弹窗设计。

每个公司或许都有自己的设计流程，本文只是根据日常使用的方式进行叙述，大家可以根据项目情况进行使用。

弹窗的设计原则大致包括以下方面：

【视觉方面】

1. 弹窗文案简洁，表意清晰无歧义

比如，弹窗提醒文字为“是否要删除该项？”，操作为“是”和“否”会让用户犹豫不清是删除还是不是删除，若换成“删除”和“取消”就不会有歧义了。

2. 设计风格尽量简约

避免视觉设计过度复杂影响弹窗阅读情况。

3. 弹窗的设计风格可以根据应用设计风格进行重塑

比如，微博Toast弹窗就根据微博整体风格进行设计。

4. 可进行诱导性设计

常见的如希望用户点击的按钮放在右边，放大点击按钮弱化关闭按钮等。

5. 危险操作需警示

如删除时需要将“删除”操作警示。

【交互方面】

1. 弹窗的出现尽量不干扰用户使用

2. 具有同种层级的弹窗使用相同的样式

3. 同种Toast弹窗位置保持相同

4. 注意弹窗频率

#小黑板划重点#以下是本文重点

那，一个项目中弹窗那么多，又如何做到即统一又有特色？

首先，根据弹窗强调程度对整个应用的弹窗进行划分，分出哪些是需要重点强调的弹窗，哪些是弱化的弹窗（具体可看上篇文章）；

其次，对于同种强调程度的弹窗进行框架样式设计（下文会详细介绍Dialog的框架样式）；

最后，针对不同页面进行视觉设计。

A 最常见的就是Dialog了，针对功能的不同对弹窗做了框架样式，方便分辨。

（自己做的图忘记写名字了）

这样的设计难免会有些单调，也无法体现应用的特色。今天搜罗了大量弹窗的视觉，针对每一种框架样式看看都可以做哪些设计？

1. 无按钮

无按钮框架样式

无框架的样式多为信息展示，因此文字一般较多。可以通过信息用场景化的方式呈现，但需要注意文字的层次。

2. 单项按钮+无取消

单项按钮+无取消

这种一般想要用户必须点击才可进行下一步操作，设计需要引导点击按钮操作，因此在设计的时候将按钮的样式进行重化处理或特殊样式处理，增加视觉。

3. 单项按钮+取消

单项按钮+取消

这种类型和2类似，添加的取消按钮也会弱化处理。

4. 双项按钮+无取消

双项按钮+无取消

双向按钮中有优先和辅助按钮，优先按钮会引导性设计。若作为两个并列的button设计的化，通常会将优先按钮放于右侧。

5. 双向按钮+取消

双向按钮+取消

应用最多的样式，同4的样式添加了取消，用户友好度高。

B 然后来看看Actionbar的样式

1. 应用内部功能

应用内部功能

根据页面视觉进行设计的同时，将取消按钮进行变换增加其他按钮点击率，毛玻璃的样式仍是经常使用的样式，但是纯色及大背景的样式也可以给页面增加一些特色。

2. 其他应用功能

其他应用功能

经常使用在社交应用的分享，一般会用社交应用的icon表示按钮（降低用户学习成本），同时也会增加一些引导性的文案诱导分享。

C 再接下来是Popover的样式

Popover

随着3D touch的发展，现在越来越多的应用使用Popover的机会越来越多，清晰简洁的Popover可以添加很多常用功能。

D 最后是Toast/HUD

Toast/HUD

除了常用的毛玻璃样式，也可以使用全屏的样式进行设计，这样的视觉感会增强。

视觉可以对弹窗进行整体设计、添加icon、融入插画、异型设计等方式进行设计，具体的设计技巧可以参考之前的文章《APP走心设计的小思考》