Chapter 21 设计细节:控件和对话框

此文仅为《About Face 4:交互设计精髓》的读书笔记,有学习需要请支持正版。

控件 Control

Control is also named as widget/gadget/gizmos.

避免布满控件的对话框

设计原则
大多数布满控件的对话框并不是好的用户界面设计

1.命令控件 Imperative Controls

在人机交互中,语言包括名字(or 对象)、动词、形容词和副词。当发起命令时,便指定了动词——动作的声明;当描述动作会影响到什么时,指定组成句子的名词。与动词相对应的控件类型叫做“命令控件”。

按钮 Buttons

命令习惯用法的精华例子是按钮,虽然存在多种不同的外表,但它是唯一一种。单击按钮及其相关的动作,将会立即执行。
在对话框中通常有一个默认按钮,常常被突出显示来指示用户可以选择的最合理操作。
按钮的部分启示是视觉受范性,显示它的“可按压特性”。当用户指向并单击,屏幕上的按钮视觉上会发生改变。

图标按钮(Butcons)当按钮引入到工具栏中,显著地扩展了它的功能、作用和视觉特征,展现出图标的形式。

设计原则
链接用于浏览导航,按钮/图标按钮用于操作

2.选择控件 Selection Controls

用于选择名字的控件。

2.1 复选框 Check Box

应避免使用滚翻按钮(Flip-flop buttons)

单选按钮

组合图标按钮

2.2 列表控件 List Controls

也称列表框 List Box选择列表(picklist)或列表视图(listviews)。

下拉列表 (Drop-Down List)是列表控件的一个变体。默认仅仅显示被选中的条目。

设计原则
用图标来区分重要的文本项
绝不要水平滚动文本

组合框 Combo boxes

是列表框和编辑字段的组合,提供了一个确定的方法在列表控件中输入数据。

树形控件 Tree controls

表达层级关系数据的列表视图。

3.输入控件 Entry Controls

设计原则
对于有界输入要使用有界控件

3.1 有界输入控件 Bounded entry controls

微调控制项 Spinners

刻度盘和滑块 Dials and Sliders

拇指轮 Thumbwheels

3.2 无界输入控件 Unbounded entry

文本编辑控件 Text edit controls:最主要的无界输入控件。

设计原则
仅供输出的文本用非编辑控件(显示控件)显示

4.显示控件 Display Controls

用于显示和管理屏幕上信息的视觉呈现方式。

文本控件 Text controls:最简单的显示控件。

滚动条 Scrollbars:用于窗口内容和文本导航器是合适的。

分割线 Splitters:将独占的应用程序分为多个相关窗格的有用工具,可移动的分割线应该借助光标暗示显示其受范性。

抽屉和拉动杆 Drawers and levers:它们具有类似的行为,一般可以通过旋转来指示打开和关闭两种状态。

对话框


对话框是叠加在应用主窗口上的弹出式窗口,在对话中它给出消息或要求输入。对话框是配角,虽然推动情节发展,但不是故事主线。

设计原则
把主要的交互操作放在主窗口中

合理运用对话框

任何可能会让人困惑的、置人于危险之地的、很少使用的功能,放在对话框里可能都会比较合理,特别适用对应用状态产生立即改变或重大改变的行为。(同时也可相应提供坚实可靠的撤销功能。)

设计原则
对话框适合:主交互流程之外的功能;整理单一主题或应用功能的信息

对话框的基本交互

每个对话框都必须有一个标题来标示它的用途。

设计原则
在功能对话框的标题中使用动词;
在属性对话框的标题中使用对象名

模态和非模态对话框

模态对话框:目前为止最常见的类型,打开一个模态对话框后,它所属的程序不能继续进行,直到对话框关闭为止。目的和使用范围对用户和设计者而言通常很清晰。

非模态对话框:相对使用得较少,打开一个非模态对话框后,可以不用打断父应用程序,无需停止进度。操作范围不确定,更难使用和理解。

设计原则
区别对待模态对话框和非模态对话框:
模态对话框一定要包含终止命令,并放在较大的按钮上
非模态对话框一定不要使用终止命令按钮,而应在窗口标题栏上使用“关闭”控件
不要在模态对话框上使用“关闭”按钮

模态对话框的问题

在某些模块对话框的变体中,终止命令“取消”变成了“应用”或“关闭”,这些动态变化会给用户带来困惑,应避免。模块对话框的认知力量在于严格一致的“Ok”和“Cancel”按钮。

设计原则
不要动态地改变终止命令按钮的标签

非模态对话框的问题

大多数非模态对话框的行为很不一致,令人十分困惑。
非模态对话框经常会有几个按钮,可以立即激活不同的功能,应设置撤销(Undo)功能。单击任何一个功能按钮,对话框都不应该关闭;同时也须特别节约像素。

对话框的五个目的

属性对话框

向用户呈现或让用户改变所选对象的属性或设置。通常是非模态。

功能对话框

通常从菜单中打开,最常见的模态对话框,只控制单一功能,如打印。

进度对话框

由应用程度启动而不是用户。最好的进度显示方式是在对话框中使用动画。

设计原则
应用程序无响应状态,必须通知用户

通知对话框

将一些重要信息报告给用户。这些重要信息或者来自于一些被触发的时间,或来自其他用户的通知信息。在移动设备上大量使用。

公告对话框

由应用程序直接启动,有三种:错误、警告、确认。

设计原则
绝不要用临时型对话框作为错误对话框或确认对话框

管理属性对话框和功能对话框

选项卡对话框

很多应用程序的对象具有丰富的属性,用一个同样丰富的属性对话框,通过多个选项卡的方式来管理。

设计原则
不要堆叠选项卡

扩展对话框

对话框有一个“更多”或“扩展”的功能,在扩展后会显示更多控件。

级联对话框

一种很糟糕的习惯用法。级联对话框中的第一级对话框里,通常有一个按钮控件,点击它可以调出另一个对话框,即二级对话框,有时二级对话框还可以继续调出三级对话框。幸好级联对话框已经失宠。

消除错误、警告和确认


公告对话框被用于提示错误消息、警告消息和确认消息,完全称得上“臭名昭著”。

错误对话框

首先要尽全力在应用程序中合适的时间和地方中找到根源,并将它们清楚掉。

错误对话框的问题

用户犯了错误时,需要的是帮助;应用程序应该告诉用户如何去避免错误,以及犯错误的可能后果。这里的技巧在于通知用户而不要停止整个过程。

设计原则
错误对话框愚蠢地停止进度,应该避免

错误消息不管用

错误对话框的终极讽刺是:无法阻止用户犯错误,无法发挥它的作用。

如何消除错误消息

我们必须重新编程使程序不再容易出问题。不能认为错误消息是正常的,我们必须把它当做最后一招。

让错误不可能发生

这是消除错误信息的最好方法。比如为所有的数据输入使用有界控件。

设计原则
让错误不可能发生

正面反馈

软件应当给用户正面反馈。

设计原则
当软件告诉用户他们失败时,用户会觉得丢脸

最后一招:改进错误消息

绝大部分的错误消息都是必须要删除的,如果真的不可能重新设计应用去消除不必要的错误对话框,则应改进。
错误对话框应始终有礼貌、表达清楚,还要助人为乐;必须要用户说明问题,提供一个解决问题所需要的信息,澄清问题的范围,可选的方法等。

警告和确认

警告的原理在于告知用户,这是令人满意的目标,但不能以打断流程的交互流作为代价。

如何消除警告

设计师必须精确地指出在应用界面上哪个位置用消息工具。

确认:喊“狼来了”的对话框

当应用对自己的行为不自信时,经常用对话框询问用户来征求许可;或应用软件让用户确认,再考虑一下即将做出的行为。
当关闭确认对话框成为例行公事,当真正有危险的时候,确认对话框将不能起作用。

如何消除确认对话框

设计原则
做,不要问
让所有的动作都可以撤销
给用户提供非模态反馈,避免用户犯错

魔鬼在细节里

须始终牢记这句话。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,264评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,549评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,389评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,616评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,461评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,351评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,776评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,414评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,722评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,381评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,787评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2 336

推荐阅读更多精彩内容