看看设计师是如何思考ui对话设计的

资料来源：网络整理时间：2023/3/21 5:56:49 共计：3574 浏览

　　何谓对话框

　　" 对话框 " 是一种以文字与使用者对话的使用者介面。其中，「警告对话框」（Alerts，以下简称警告框）通常用于通知使用者发生了错误或警告，并询问接下来的操作（同意、不同意等等）。使用警告框时必须十分注意，因为使用者并不希望正在进行中的工作受到打扰。

　　「确定 " 执行取消 “」和「取消 " 执行取消 “」

　　首先请看以下的图片：

　　对话框

　　这是一个警告框的例子，首先以说明文字询问使用者是否要中断目前的操作，接着给了「取消」和「好」两个作为行动的选项。看了这个例子之后有没有觉得哪里怪怪的？

　　文字内容意思

　　问句确定要取消编辑中的内容吗？确认是否要舍弃编辑中的内容（两个选项）

　　同意好舍弃编辑中的内容

　　不同意取消保留编辑中的内容

　　在这个语境中，系统向使用者确认是否同意执行「取消编辑中的内容」。大部分同意执行的使用者，可能会直觉地按下相同文字的「取消」按钮。可是这样的话并不会取消编辑。

　　因为这个取消按钮指的是「取消『取消编辑中的内容』」。也就是说，若想要如使用者所想的舍弃编辑中的内容的话，必须选择另外一边的按钮。像是「取消执行取消」这种具有双重否定意思的对话框，会让文字的意思变得复杂，应该要避免使用。

　　那么我们试着改变按钮的用词来避免「取消执行取消」。

　　这样应该就不会造成混乱了吧……？

　　但这样的修正方式并不好。只从「是」、「否」的文字，很难想像按下按钮后的结果，用在对话框的按钮并不适当。

　　接着我们来试试看大家一定都看过的警告框。为了防止被大家吐槽说明不够清楚，我们加长说明文字，如同以下的图片：

　　是！咦，等等，否？

　　因为这个警告框在最后说了「建议您事先储存」，想要这么做的使用者想必会直觉地按下「是」。然而，若是选了「是」的话，就会执行原本询问的问题「取消编辑中的内容」，这样不要说储存了，编辑中的内容反而会被删除，对使用者来说是最糟的情况。

　　设计简短、有逻辑且适当的文案

　　刚才的例子可以说是因不适当的文案而造成的：「文字bug」。在 UI 设计的过程中，往往容易忽视文案的设计，若是能够注意几个重点，「文字bug」是能够避免的。

　　我们再看一次最初的警告框：

　　这个警告框的说明文字并不恰当，并且选项的按钮用语也是错误的。

　　为什么都不对呢？首先，在说明文字中直接使用「取消」这样的字眼并不好，因为「取消」这个词经常用于表示否定意思的按钮上，应该避免使用在问句中，以免造成混乱。另外，按钮的文字应该要能对应说明文字要求的动词。在前面的例子中使用的「是」、「否」不是动词，使用者很难想像按下按钮后的结果是什么。为了理解意思所需的时间会比以直接以动词表示（例如「删除」、「舍弃」）的按钮还要久。

　　将「是」、「否」这种没有逻辑性的文字用于按钮并不适当。具有否定意思的动作名称，请尽可能地统一称作「取消」。在各作业系统中（iOS、macOS等），「取消」也是用来表示否定意思的统一用词。至于具有同意意涵的按钮，若是使用「好」这个字在语境上读起来不会觉得奇怪的话，则可以放心使用；需要更具体地传达意思的话，将「能够对应说明文字内容的动词」直接用于按钮的文字是最好的。

　　简洁地叙述说明文字

　　在说明文字中，尽量不要频繁地使用太过礼貌但不直接的句子。例如刚才的例子中「确定要～吗？」的问句，从使用情境来看，决定要舍弃编辑中的内容的是使用者自己，因此我们可把说明文字再缩短成「要～吗？」的形式。

　　使用者并不是想要阅读文章，而是想要尽快地获得自己想要的内容，太拐弯抹角的说明只会让使用者跟内容之间的距离变得更远。

　　看过上面这些讨论，我们可将这个警告框的说明文字中的「确定要取消编辑中的内容吗？」改写成「要舍弃编辑中的内容吗？」

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：电子邮件营销内容如何规划 | ·下一条：网站搬家、页面换网址，会对 SEO有影响吗