【解构ui】对话框
今天要进入正题了~ ，咱们继续解构UI，今天主要讨论的是模态对话框。
什么是对话框
对话框一般分为两种，模态对话框和非模态对话框。模态对话框(modal dialog boxes)是最常见的。 模态对话框是屏幕上的一层遮罩，当打开一个模态对话框后，它所属的应用程序不能继续进行，需要用户为之交互，并且引导用户给出回复。对话告知用户重要的信息，要求用户做出决定，或者操作多项任务。 不管是在网页端还是在移动app上，对话都是很常见的一个控件，帮助用户完成任务而不离开当前页面。当打开一个模态对话框后，它所属的应用程序不能继续进行。
非模态对话框（modeless dialog)使用得较少，打开一个非模态对话框后，可以不用打断父应用程序，无需停止进度，应用也不会冻结。非模态对话框适用于作为工具板或对象板。
任何可能会让人困惑的，致人于危险之地的，或者很少使用的功能，放在对话框里可能都会比较合理。 通常对话框被用于提示错误消息，警告消息，以及确认消息（error,alert,confirmation).如何正确的设计对话框是我们需要重视的，良好的对话框能帮助用户更好的完成任务，但当用户做错的时候，对话框则会让用户感到沮丧。
对话框的基本结构
大多数的对话框都包含有信息文本，交互控件，以及有关的文本标签
每个对话框都必须有一个标题来表示其用途，如果某个对话框是一个功能对话，那么这个标题就应该包含这个功能的动作，一般来说是动词。
如果对话框是用来定义某个对象的属性的，那么它的标题就应该包含该对象的名字或者描述。
对话框的五个类型
属性对话框 (Property dialog)
属性对话框用于桌面端，向用户呈现或让用户改变所选对象的属性或者设置，用户可以直接设置应用的属性。我们可以把属性对话框当做是针对所选对象的控制面板。
当然这种对属性进行修改的操作，最好还是在放在任务栏或者边栏里，因为对话框仅适合那些不必频繁操作的或者仅需要设置一次的属性。
功能对话框（Function dialog)
功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能（例如打印，插入对象）
私以为，在移动端，较为复杂的功能就不适合使用模态对话框的显示方式，可以以模态视图的方式表现。
比如在Gmail的inbox，用户在点击右上角的三点后直接进入了“移到”的模态试图界面，选择将该邮件移动到想要的分类。 可以想象的是，如该功能采用对话框的界面显示的话，则会非常拥挤。而且在“移到”功能里有一个用户可自己添加分类的功能，只要点击右上角的加号就能给新分类起名添加，因此如果放在对话框里，则对话框的层级就会显得很深。
进度对话框(Process dialog)
这种对话框在桌面端以及手机端都很常见，进度对话框在手机端通常是一个小的旋转菊花表示的。
当应用程序无响应的时候，进度对户框是一个很好的给到用户反馈的提示。 每个进度对话框都应该清晰的向用户呈现如下信息：
- 一个耗时的进程正在进行
- 现在一切正常
- 该进程还需要多长时间才能完成(可用进度表progress meter 表示）
- 还有杜少事情或项目没有做完（如果还在进行的话）
- 用户如何才能取消该操作，或重获控制权
进度对话框使用动画效果会最好，用户会意识到计算机真的在做某事，这种一切正常的感觉是本能的(visceral),而不是理性的(cerebral),用户会感到安心。
当然在一些小按键上，如果弹出一个对话框来告知用户进展就没有很大意义了，我们可以尝试使用进度指示器，比如在YouTube的“关注”按键上，点击“关注”后，会短暂的“正在关注”，”正在关注“的前面会有一个进度展示器，很快，”正在关注“就会变成“已关注。
再比如在Chrome上， 每次加载页面的时候，当网页没有全部展示出来的时候，标签栏前显示一个进度指示器。从而让用户更容易的了解当前的进度，而加载的页面也不会被遮住。
通知对话框 (Notification dialog)
通知对话框将一些重要的信息报告给用户。通常以很小的弹出式窗口或抽屉的形式出现。通知对话框在移动端被大量的使用，通常移动设备都有通知中心来收集和展示各种通知，帮助用户之后几种处理
公告对话框(Bulleting dialog)
公告对话框有三种：错误，警告，确认。
公告对话框一般都是应用程序级模态的(application modal),他们会停止应用程序当前正在执行的工作，知道用户给出终止该规划框的命令。 这种情况称为阻塞型公告，因为知道用户回应，应用程序才能运行
还有一种出现以下就自动消失的公告对话框称为临时型公告，如果只闪现以下，很多时候用户都没有看清，存在可用性问题。
属性，功能，通知对话框，都是用户主动请求的，他们为客户服务，但是进度对话框，以及公告对话框都是应用程序发起的，他们为程序服务，常常会牺牲用户的利益。
对话框设计的最佳实践
减少干扰
尽量不要频繁使用对话界面，因为他们容易打扰用户。他们的突然出现容易中断用户完成当前任务，而将注意力转移到对话框页面。 用户必须在继续处理任务前处理对话框，而且不能接触到更多的页面。有时候当用户需要确认重要操作的时候，这是好事，但是大多数时候这是没有必要的，而且很招人厌。
- 不是每一个选择，设置或细节都需要中断，跳出对话框
- 可以用菜单或内置扩展来代替对话框，这两个控件都帮助用户维持在当前页面
- 不要突然弹出对话框，确保对话框的出现对于用户来说是可预测的
要求声明
当用户犯错的风险比较大的时候，有对话框是很重要的。比如说确认购买以及一些有破坏性的动作（比如删除，或者告知用户有问题产生。 对话框偶尔弹出能让用户引起重视。 确保他们能认真看到对话框上的内容，并作出正确的选择。
我们需要通过对话框，来告知用户发生了什么
不要毫无征兆的打开对话框
对话框应该是基于用户操作之后出发的，不管是用户触发的还是系统触发，都不应该在用户什么都没有操作的时候，就跳出来。
最常见的就是当用户打开一个网站的时候，就跳出一个模态对话框，让用户订阅。
这种在用户尚未了结网站的情况下，就弹出对话框让用户订阅的方式显然比较唐突。
将对话框同真实世界里的场景链接起来
对话框应当使用用户语言，也就是说使用的语言，概念应该都是用户熟悉的。而不是什么技术术语。
- 在对话框中使用清晰的问题和文本标签
- 对话框中只提供重要的信息
- 在用户完成后给予反馈
清晰的问题和选项
在内容区域，你应该使用清晰的问题和描述，比如”确定删除账户？“。应当避免道歉或者模糊性的语言，比如”你确定么？“，
对话框上的文本应该越少越好。试着不要在对话框上的标题添加其他不必要的信息。 由于单个单词的标题基本上不会提供什么有用的信息，因此考虑使用问题或者一句短句。只要可能，尽量确保标题只有一行。
避免使用带有职责性的，批评性，或者侮辱性的语言。 用户知道有些警告是通知他们遇到了一些问题以及紧急的情况。只要你使用友好的语气，使用较为直接或者小计的语气也比积极的间接的用词要好。不要使用“你”,”我”这种词，有时候会这些用词会给人感觉略有侵犯性，太过于私人化。
左图中的问题就很模糊。用户不知要确定什么，右图的问题就很准确，告知了用户具体的内容，以及给出了清晰的动作。
为了避免给到用户模糊不清的选项，应该只使用清晰的选项。在大多数情况下，用户应该在只看到标题和按钮文本的情况下就能理解选项并作出正确选择。
现在改选择文本没有告诉用户选择后会发生什么，直接就用了，yes, no,的文本标签，较为模糊。
而好的文本标签应该告知用户采取某个操作后会发生什么
再来看一下下面的这个例子，左边的OK，Cancel选项显然比右边的Yes，no选项更加模糊， OK，指代的是确认取消还是Cancel指代的是取消，还是说这个Cancel是取消对话框，这一切都很让人模糊，而右边的Yes，no的文本显然要好很多。
提供重要信息。
在对话框上要写清重要的信息，比如当询问用户是否确认要删除某样东西的时候，必须告知删除的内容。
不要在对话框上使用”更多“这个标签，让用户点击查看更多文档，应该将所有的问题在对话框内解释清楚，如果需要更多的信息，应该在进入对话框前就提供。
提供有效的回复
当流程完成后，可以展示一个通知，给到用户一个反馈，告知用户他已经完成了。
简化对话框
在设计对话框的时候也要跟随KISS原则，所有信息都要有价值并且有相关性。
- 当你试着将很多元素塞到对话框里的时候，那就意味着这个功能并不适合使用对话框
- 将不需要的元素或不支持完成任务的元素去掉，精简你的对话框
- 避免有多步骤的对话框
选项和元素的数量
对话框最好不要下拉，只在屏幕上显示一部分。
Barclays Bank的付款对话框就有很多选项和元素，有些选项只有在下啦的时候才能看到（特别是在手机端有着更小的屏幕的时候就更麻烦）
Stripe就使用了简单明了的对话框，只有这必要的信息，不管是在桌面端还是手机端看上去都很好。
在Material Design中我们可以看到有下拉的对话框设计：
下图是手机铃声的选项设计。在下拉菜单选项中，对话框的标题是固定在最上端的。这能确保用户想要选中的选项同标题是始终可见的，不会被列表位置的移动影响。
操作的次数
对话框不应该有超过两个的动作，第三个动作比如“Learn more”就将用户带离了当前页面，使得用户没有完成当前任务。
不要在对话框中加入多步骤
将复杂的任务切分成几步完成是个很好想法。但是这些步骤要让用户在对话框里完成，就给人感觉很复杂
如果一个交互复杂的需要多个步骤，那么他就需要一个独立的页面。
选择合适的对话类型
正如先前提到的，对话有两个类型。 第一种是模态对话框， 要求用户必须在继续之前同其交互。模态对话框通常用于以下几种情况
- 与上下文无关的，需要确定的操作* 需要确定或者取消才能采取操作，即便点击对话框外围，对话框也不会被关掉
- 当用户完成一半的时候，不允许继续
第二种是非模态对话框，允许用户点击或者点击对话框之外来取消。
视觉连续性
对话框背景
当打开一个对话框的时候，一般对话框的背景会变深透明。 这可以将用户的视觉聚焦，让用户知道当前页面不可用
清晰的关闭选项
在对话框上通常有一个关闭按钮，然后通常这个关闭按钮没有看起来那么好用，需要花更大力气去点击。因此我们应该允许用户在点击对话框外围的时候也能退出。
避免有一个对话框后再发起一个
对话框自身应不能再发起一个新的对话框，这样会让用户感到层级很深。
这种对话框常常称为级联对话框Cascading Dialog，是一种很糟糕的用法。
放你发现需要使用这种对话框的时候，就需要全面审查一下界面的整体设计了，可以试着重新调整结构。
对话框上按钮的视觉重量
如果要区分两个按钮之间的权重，则可以考虑通过颜色来传递。
主要动作按钮
主要动作按钮需要有较强的视觉提示。 次级按钮的视觉表现要弱一点，防止误操作。
消息含义主按钮
消极含义的主按钮（替代， 删除）
给最危险的按钮较弱的视觉提示，以避免发生错误。
你也可以将这种差异表现的更加明显一点， 而不仅仅是从颜色上
如果是某个非常重要的操作按钮的话， 那就可以考虑让用户输入删除两字来最后删除。
不可用按钮
不可用按钮有时候是很有用的，因为用户会通过这些按钮知道还有那些功能。
你也可以添加一些对于这些不可用按钮的说明 。
另外一个使用场景就是作为紧急出口（emergency exit）， 比如用户想要回到之前的一版本。 比如undo. 撤销按键
按钮上OK和Cancel应该放置于哪边
在设计对话框的时候， 连贯性是十分重要的。 这里我们单独将按键的OK和Cancel也就是肯定和否定的逻辑性按钮拿出来单独讨论一下。
不同平台上的规定也不尽相同，根据不同平台上的规范设计按钮的位置，能够很好的保持在不同平台的连贯性，问题就是当我作为用户在不同平台之间切换的时候，每次都要重适应一番。
Microsoft
Cancel放置于OK的左边
Apple
Material Design
网页
如果你是基于网页的应用可能很难同所有的平台一致，因此这时候就要通过可用性的角度出发。
OK-Cancel的角度符合正常阅读的流程。 积极的回答在前。 如果人们更加需要OK而不是Cancel， 那么先放ok会比较方便用户选择。
另外，Cancel-ok也有逻辑， 他符合对话的结束流程。
用户的视线方向。
不过我们还是鼓励要多做用户测试才知道哪个比价好。
参考文章
iOS Human Interface Guidelines-Alerts
Primary & Secondary Action buttons
5 Essential UX Rules for Dialog Design
对话框还有一种常见的使用的情况是在请求允许的时候， 这个下次再来讨论。
国庆假期，注定腐烂，还好觉得有点事要做，把HTML和CSS又拿出来准备刷，三刷了，每次都没刷完过，希望这次能写出点什么，代码真好看。 用平常心对待吧。
Lantern翻墙上不了YouTube，上Google的速度却杠杠的。。。好忧愁。
长城上的小破事，耳聋了就错过了啊。罢了罢了，泡沫嘛~
有几件事始终还是想不大开，依赖性越大可能离开的欲望也就被拖拽着，每个人都在这里或多或少的有着自己依赖的东西。
害怕的依然存在，突然没有什么破釜沉舟的勇气，希望吧。 都拖了快一年了。
Anyway，每个人都只能陪你走一段路啊~~~~~~
诶哟。节日快乐
All the best.
