数字电视交互设计规范分册暂定样本.doc

南京有线中间件平台系统技术规范
数字电视交互设计规范分册(暂定)

编号

版本
V1.0
密级
内部公开
公布日期
-2-14

江苏省广播电视信息网络股份
南京分企业中间件工作小组
目录
一、 引言 6
1.1 文档目标 6
1.2 适用范围 6
1.3 参考资料 6
二、 设计标准 7
2.1 用户体验设计标准 7
2.1.1 反馈和交互 7
2.1.2 一致性 7
2.1.3 容错性 7
2.1.4 整体美学 7
2.2 最轻易犯错误 8
2.2.1 窗口 8
2.2.2 布局 8
2.2.3 文本 8
2.2.4 控件 9
2.3 怎样设计优异用户体验 11
2.3.1 抓住基础功效 11
2.3.2 把某方面做出色 11
2.3.3 无须强求每个人全部满意 11
2.3.4 做出艰苦决定 11
2.3.5 给人体验就像是在进行友好对话 11
2.3.6 默认实施正确操作 12
2.3.7 让它得以工作 12
2.3.8 小心提问 12
2.3.9 使其用起来很棒 12
2.3.10 使其看起来很棒 12
2.3.11 使其响应立即 12
2.3.12 使其保持简单 13
2.3.13 避免糟糕体验 13
2.3.14 为常见问题设计 13
2.3.15 不要使人厌烦 13
2.3.16 降低精力、知识和思索 13
2.3.17 测试你用户界面 14
2.4 简约而又强大 14
2.4.1 强大 14
2.4.2 简约 14
三、 界面 16
3.1 高清 16
3.2 标清 17
四、 控件 18
4.1 列表视图 18
4.1.1 它用在这里适宜吗？ 18
4.1.2 标准列表视图展示 19
4.1.3 推荐尺寸和间距 21
4.1.4 文档编写 22
4.2 列表链接 22
4.2.1 使链接明确、相关且能够被预知 23
4.2.2 使用模式 23
4.2.3 设计规范 25
4.2.4 文档编写 27
4.3 按钮 28
4.3.1 它用在这里适宜吗？ 28
4.3.2 使用模式 29
4.3.3 设计规范 30
4.3.4 推荐尺寸和间距 31
4.3.5 文档编写 32
4.4 复选框 32
4.4.1 它用在这里适宜吗？ 32
4.4.2 使用模式 34
4.4.3 设计规范 35
4.4.4 推荐尺寸和间距 36
4.4.5 复选框标签 37
4.4.6 文档编写 38
4.5 单选框 38
4.5.1 它用在这里适宜吗？ 39
4.5.2 设计规范 40
4.5.3 推荐尺寸和间距 42
4.5.4 文档编写 42
4.6 进度条 43
4.6.1 它用在这里适宜吗？ 43
4.6.2 设计理念 44
4.6.3 使用模式 44
4.6.4 设计规范 46
4.6.5 推荐尺寸和间距 50
4.6.6 标签 50
4.7 文本框 51
4.7.1 它用在这里适宜吗？ 52
4.7.2 设计理念 52
4.7.3 使用模式 52
4.7.4 设计规范 54
4.7.5 输入验证及错误处理 58
4.7.6 提醒 58
4.7.7 推荐尺寸和间距 59
4.7.8 文档编写 59
4.8 对话框 60
4.8.1 它用在这里适宜吗？ 60
4.8.2 设计理念 61
4.8.3 对话框特征 61
4.8.4 使用模式 62
4.8.5 设计规范 64
4.8.6 推荐尺寸和间距 66
4.8.7 文本 67
4.8.8 文档编写 72
4.9 信息提醒 72
4.9.1 它用在这里适宜吗？ 73
4.9.2 设计理念 73
4.9.3 设计规范 74
4.9.4 文档编写 74
五、 菜单 75
5.1 设计理念 75
5.2 使用模式 75
5.2.1 主页菜单 75
5.2.2 分级页面菜单 76
5.3 设计规范 77
5.3.1 菜单项组织和次序 77
5.3.2 菜单分类命名 77
5.3.3 视觉展现 77
六、 文本 79
6.1 用户界面文本 79
6.1.1 使用模式 79
6.1.2 设计理念 80
6.1.3 UI文本设计模型 81
6.1.4 去除反复 81
6.1.5 避免过分沟通 81
6.1.6 使用倒金字塔结构 82
6.1.7 设计规范 83
6.2 风格和语气 83
6.2.1 设计理念 84
6.2.2 设计规范 84

版本和修订
版号
公布日期
编制人
审核
同意
修订摘要
V1.0
-1-14
中间件工作小组

一、 引言
1.1 文档目标
依据交互设计学和数字电视机顶盒界面特点，制订一套用于数字电视界面交互设计标准，期望UCD部门以这套标准为依据进行各项目标交互设计，以确保企业各系列产品在交互方法上一致性。
1.2 适用范围
企业数字电视界面设计。
1.3 参考资料
[1]《Windows 用户体验交互设计规范》。
[2]《Apple 人机接口设计指南》。
[3]《iPhone 人机界面设计规范》。
[4]《Windows-Phone-7-UI设计及人机交互指南》，pdf版。
[5]《About Face 3交互设计精髓》
二、 设计标准
2.1 用户体验设计标准
2.1.1 反馈和交互
反馈和交互意味着经过适宜反馈和和程序之间交互从而让用户时刻知道现在发生了什么，而不仅仅是当事情犯错时显示一个警告。
2.1.2 一致性
标签和功效是否使用了一致术语？图标是否总是代表一个意思？全部模块中概念全部是以一样方法展现吗？类似控件和用户接口元素是否显示在窗口和对话框类似位置？
2.1.3 容错性
提供充足容错性以激励用户操作电视时─致，用户应该认为能够尝试多种功效而无需担心破坏系统或损坏数据。提供如返回，后退等操作，从而让用户放心地使用多种业务。
2.1.4 整体美学
整体美学意味着信息经过良好组织而且和视图设计一致。在长时间使用情况下，您产品应该仍然令人愉快。
不要在窗口和对话框中塞满图标或按钮。不要随心所欲使用符号来表示部分概念，因为她们可能对用户组成困扰或分散用户注意力。窗口布局和用户接口元素设计应该反应用户心智模型。
比如：
使用高质量图标。
使用抗锯齿字体。
一个窗口中字体大小和类型应该一致。
在一个窗口内控件大小应该一致─比如，不要将小号控件和标准控件混用。
界面元素行为应该和用户期望一致，不要试图更改标准控件行为。
比如：
复选框应该只用来多项选择，而不是单一选择。
按钮只应被用来表示部分立即实施东西，如“打开”。
避免使用按钮来显示弹出菜单或将按钮用作标签。
避免将圆角按钮用作标签页。
尽可能让用户在任何时候全部能做她们想做事情。避免使用模式对话框来将用户锁定在某个操作中，以至于在目前操作完成前用户不能做别事情。
2.2 最轻易犯错误
2.2.1 窗口
确保在 640x526和1280 x720模式下分别测试标清和高清页面。检验布局问题、控件和窗口裁剪、和图标和位图拉伸情况。
假如窗口是子窗口，首次显示时应将其“居中”显示在父窗口上方。不要显示在下方。以后显示时候，假如更为方便，应考虑将其显示在最终一次出现位置（相对于父窗口）。
假如窗口是上下文相关，应该总是将其显示在靠近触发它对象旁边。不过，应该把它放在靠旁边位置（最好是向右下方部分），以免挡住对象。
2.2.2 布局
将窗口中控件和面板尺寸调整为适合经典内容大小。
控件尺寸。控件尺寸应该适合于其经典内容，将控件变得更宽、更高、必需时使用多行编辑。调整控件尺寸，以避免或降低在那些有大量空间窗口中进行滚动。
空间窗口中存在任何被截断标签或文本。
列宽。确保列表视图含有适宜默认、最小及最大列宽。为列表视图使用不会引发文本截断默认列宽，尤其当列表视图中还有足够空间时。
布局平衡。窗口布局应该让人感到大致平衡。假如认为布局左侧偏重，应该考虑增加控件宽度，并将部分控件移到右侧。
2.2.3 文本
尽可能使用一般、口语化用语。关注于用户目标，而非技术。
有礼貌、给支持和激励。用户绝不应感到被牵就、被责备或被胁迫。
删去反复多出文字。在窗口标题、主标题说明、补充说明、内容区域、命令链接及提交按钮中寻求反复多出文字。通常，完全保留说明文本和交互性控件中文字，删去其它地方反复内容。
不要为不是链接文本使用蓝色，因为用户会把它当成链接。在你想使用彩色文当地方使用粗体或某种灰色。
谨慎使用粗体来吸引用户注意那些必需阅读文本。
使用主标题说明来简明地解释一个页面或对话框用来做什么。好主标题说明传达是用户目标，而不只是关注于操作用户界面。
以祈使句式指导或明确疑问句形式表述主标题说明。
不要在控件标签或主标题说明末尾添加句点。
在句子之间使用一个空格。而不是两个。
2.2.4 控件
常规
为每个控件或控件组添加标签。例外： 文本框和下拉列表能够经过提醒文原来标注。
对于全部控件，应该将最可靠（避免丢失数据或无法访问系统）、最安全值作为单选框。假如可靠性和安全性不是需要考虑原因，那么就选择最有可能或最方便值。
最好使用带约束控件。尽可能使用像列表和滑块这么带约束控件来降低文本输入需要，而不是像文本框这么无约束控件。
重新考虑禁用控件。禁用控件可能极难使用，因为用户需要推断其被禁用原因。
命令按钮
尽可能使用明确标签，而很规标签。理想情况下，用户应该不需要为了了解标签而阅读其它任何内容。用户更愿意阅读命令按钮标签，而不是静态文本。
例外：假如“取消”有歧义话，不要修改“取消”按钮名称。用户不应该需要阅读全部按钮来确定到底哪个按钮能够取消该操作。不过，假如不清楚要取消是哪个操作，比如有多个立即进行操作时，能够重命名“取消”。
当提问时，使用和问题相对应标签文字。比如，为那些是/否问题提供“是”和“否”选择。
假如取消后退回之前状态（没有任何副作用），则将按钮命名为“取消”；不然，应该命名为“关闭”（假如操作已经完成）或“停止”（假如操作还在进行中）来表示会完整保留目前更改过状态。
命令链接
应该总是同时展现两个或更多命令链接。从逻辑上来说，没必需问只有一个答案问题。
提供明确“取消”按钮。不要将命令链接作此用途。很可能用户意识到她并不想进行这项任务。使用命令链接来取消会使用户必需仔细阅读全部命令链接并确定哪个表示取消。使用明确“取消”按钮能够让用户很快速地取消任务。
假如提供明确“取消”按钮使得只剩下单独一个命令链接话，能够同时提供用于取消命令链接和“取消”按钮。这么做能够明确表示用户能够进行选择。以它和第一个选择有什么不一样角度来描述这个命令链接，而不仅仅是“取消”或类似变体。
链接
不要为链接分配访问键。
不要为链接文本添加“单击”或“单击此处”字样。这是不需要，因为链接暗示了单击动作。
渐进展开
将“更多/更少”渐进展开按钮用于隐藏高级或极少使用选项、命令及用户通常不需要细节内容。不要隐藏常见内容，因为用户可能找不到它们。确保这种隐藏是有价值。
假如界面上一直显示了部分选项、命令或细节，则使用下列标签组合：
更多/更少选项。用于选项或是选项、命令和细节内容混合。
更多/更少命令。仅用于命令。
更多/更少细节。仅用于信息。
更多/更少 <对象名称>。用于其它对象类型，如文件夹。
不然：
显示/隐藏选项。用于选项或是选项、命令和细节内容混合。
显示/隐藏命令。仅用于命令。
显示/隐藏细节。仅用于信息。
显示/隐藏 <对象名称>。用于其它对象类型，如文件夹。
进度条
应该将确定模式进度条用于那些有确定时间界限操作，即使其中大部分时间全部无法进行正确估计时也一样如此。不确定模式进度条即使表示正在进行中，但无法提供任何其它信息。不要仅仅因为不够正确，就选择不确定模式进度条。
假如能够正确计算话，应该提供估量剩下时间。正确估量剩下时间是有用，而那些差得离谱或猛烈改变估量值是没用。你可能需要在给出正确估量值之前优异行部分操作。这么话，不要在初始阶段显示可能不正确估量值。
不要重新开启进度。假如它重新开启（可能因为操作中一个步骤完成），进度条就丧失了它意义，因为用户无法了解整个操作什么时候会完成。相反，该操作中各个步骤应该分别只占整个进程一部分，整个进度条只完成一次。
提供有用进度细节。仅当用户能够依此做些什么时候，才有必需提供额外进度信息。确保文本显示足够长以使用户能够阅读。
提醒
当屏幕空间担心，使用标签或说明文字不适宜时，能够使用提醒文本。
提醒文字关键用于以紧凑方法标识文本框目标。它绝不应该是用户在使用文本框时需要看到关键信息。
提醒文本不得和真实文本相混淆。需要做有：
以灰色斜体方法显示提醒文本，而以黑色正体方法显示实际输入文本。
提醒文本应该不可编辑，且当用户跳转到该文本框内时应立即消失。
例外：假如文本框含有默认输入焦点，则显示提醒文本，并当用户开始输入时消失。
不要使用句末标点或省略号。
2.3 怎样设计优异用户体验
2.3.1 抓住基础功效
关键使用情境远远关键于那些边边角角情境——大家可能会做可能不会做事情。牢牢抓住基础东西！
2.3.2 把某方面做出色
想想“真实”用户（而不是市场部或公关部人）会怎样描述你程序。找出你目标用户，确保她们会说“我很喜爱这个程序！它 A、B、C 真是太棒了！”假如用户不会这么说你程序，说明什么？现在，“刚刚好”已经不再够好了——要让用户爱上你产品。
2.3.3 无须强求每个人全部满意
让你目标用户满意会使你产品愈加成功，而不是试图去满足每一个人。
2.3.4 做出艰苦决定
这些功效、命令或选项确实有必需吗？假如有，就将其做好。假如没有，就干脆去掉！不要为了躲避这种艰苦选择就把每样东西全部做成可选或能够配置。
2.3.5 给人体验就像是在进行友好对话
把你 UI 想成是你和你目标用户之间对话。假设你就在用户身边，然后她问你说“我现在应该怎么做？”想想你会怎样解释：哪些步骤、怎样次序、你会怎么说和怎样来解释等等。也想想那些你“不会”说东西。这就是你 UI 应该样子——仿佛好友之间对话一样——而不是什么用户难以了解高深莫测东西。
2.3.6 默认实施正确操作
当然，你能够列出一排选项让用户来选择，不过何须这么？应该选择可靠、安全、方便默认项。而且，要将正确体验作为你目标用户默认体验。不要假设用户会把不好初始体验配置成自己期望方法，她们不会这么做。
2.3.7 让它得以工作
大家是想使用你产品，而不是进行一堆设置或学习一堆东西。做好初始配置，让最常使用及最关键任务一目了然，并使你程序能够立即开始工作。
2.3.8 小心提问
避免使用模式对话框来问那些并不是非问不可问题——应该使用无模式对话框。假如你必需在 UI 中提问，那么表示方法应该基于用户目标和任务，而不是技术。提供用户能够了解（再次强调，基于用户目标和任务来措辞，而不是技术）、相互区分清楚选项。确保提供足够信息以使用户做出选择。
2.3.9 使其用起来很棒
确保你设计能很好地达成它目标，包含适宜功效且把这些功效放在适宜地方。注意细节。
2.3.10 使其看起来很棒
统一1套风格，包含标准窗口边框、字体、系统颜色、通用控件和对话框及标准布局。避免自定义 UI 及使用受到限制品牌形象。
不要假设提供皮肤能够对那些通常化外观起到赔偿作用。大多数用户不会操心那些，而且含有一个很棒外观比有一堆通常化外观给人印象更深。
2.3.11 使其响应立即
你程序响应对于整体用户体验来说至关关键——用户会发觉无须要迟缓和没有响应程序不可用。对于每一个性能会成为问题功效特征来说，应该首先了解你用户目标和期望，然后选择能够达成其目标最轻量级设计。通常说来，超出 10 秒任务需要更多信息反馈，并应该能够被取消。记住用户对于速度感知和实际速度一样关键，而且速度感知关键决定于程序多快能够响应。
2.3.12 使其保持简单
努力争取在能够很好地完整任务前提下做出最简单设计。将设计扩展到仅仅是“必需”。假如一个方法能够把事情做好，就不要使用三种方法。避免或降低那些没用东西！
2.3.13 避免糟糕体验
说起来轻易做起来难，但用户对你产品总体印象更多是来自于那些不好体验质量，而非好体验。
2.3.14 为常见问题设计
你设计是不是很棒——除非用户犯了错误或网络连接中止？估计那些常见问题、用户失误及其它错误并为基进行设计。考虑像网络速度很慢或不可用、设备没有安装或不可用、和用户进行了错误输入或跳过了部分步骤等情况。在你程序每一步，问问自己：最坏情况下会发生什么？然后再看看当这些确实发生时你程序行为是不是够好。确保全部错误信息对问题进行了清楚地解释并给出可行处理方案。
2.3.15 不要使人厌烦
通常，任何用户会直接忽略而不采取任何行动东西全部应该被重新设计或删除。这对于用户会反复看到东西来说更是如此，如错误信息、警告信息、确定信息和通知。应该很谨慎使用声音。和安全性和法律问题（比如授权或许可条款）相关 UI 能够例外。
2.3.16 降低精力、知识和思索
要想降低使用你程序所需精力、知识和思索：
l 显式比隐式要好。把用户需要知道信息直接放在屏幕上。仔细推敲窗口或页面上主标题说明以清楚表示界面目标。
l 简明比罗嗦要好。把信息放在屏幕上，不过要简明。抓住关键点！为浏览设计文本，而非沉醉式阅读。为有帮助、补充性质、但并非基础信息使用帮助链接。
l 有约束比无约束要好。当选择控件时，能够约束有效输入控件通常是最好选择。
l 可用比禁用好。禁用控件往往让人迷惑，所以仅当用户能够很轻易地推断出为何控件被禁用时才可使用。不然，应该移去不适用控件或保持其可用并提供有帮助反馈信息。
有反馈比没反应好。提供清楚反馈以表明一个任务是否正在实施或失败。不要让用户猜测。
2.3.17 测试你用户界面
在你使用真实目标用户进行可用性研究之前，你不会知道你做是否正确。你很可能会（沮丧地）对结果表示惊讶。愉快地接收对你用户界面批评吧——这对于你把工作做到最好是必需。另外确保在你程序公布后搜集反馈。
2.4 简约而又强大
2.4.1 强大
强大意味着具体以下部分特征：
A. 可用。该产品或设计能够满足目标用户需要，让她们能够完成那些无法以其它方法完成任务，有效地达成目标。
B. 高效。该产品或设计能够使用户以前所未有工作效率和规模水平来完成任务。
C. 通用。该产品或设计能够使用户在多变环境下高效地完成较大范围内任务。
D. 直接。该产品或设计像是能够直接帮助用户达成她们目标，而不是碍手碍脚或是有没有须要步骤。
E. 灵活。该产品或设计能够让用户完全、细致地控制她们工作。
F. 集成。该产品或设计能够和其它应用程序交换数据。
G. 高级。该产品或设计含有很尤其、创新性、在其竞争产品中没有功效。
最关键一件事：
了解目标用户目标，并挑选那些能够高效实现她们目标功效特征。
归纳出结论：
当一个应用程序使其目标用户能够充足有效地发挥她们潜力时，即称为强大。
2.4.2 简约
简约设计技巧：
A. 使任务显现并可视。
B. 使用用户易懂文本。
C. 使用安全默认项。
D. 使用约束条件。
三、 界面
3.1 高清
720
640
1280
1200

标准尺寸：1280*720
安全尺寸：1280(-80) ×720 (-80)= 1200 × 640，内容超出安全尺寸部分内容可能会显示不出来
640
600
3.2 标清
486
526

l 应用类业务界面：
标准尺寸：640*526
安全尺寸：640(-40) ×526(-40)= 600 × 486，内容超出安全尺寸部分内容可能会显示不出来
l 盒子类业务界面：
标准尺寸：720*576
安全尺寸：640(-40) ×526(-40)= 600 × 486，内容超出安全尺寸部分内容可能会显示不出来
四、 控件
4.1 列表视图
目录
· 3.1.1 它用在这里适宜吗？
· 3.1.2 标准列表试图展示
· 3.1.3 推荐尺寸和间距
· 3.1.4 文档编写

列表视图（List View）用于经过单选或多选方法，查看并操作一个数据对象集合。

经典列表视图：
列表视图灵活性和功效性全部比列表框要强。和列表框区分在于，列表视图支持视图切换、分组标题多个列、按列排序、更改列宽度和次序、作为拖放源或目标、和进行复制粘贴。
4.1.1 它用在这里适宜吗？
列表视图并非只是一个愈加灵活而强大列表框，其额外功效已经使其用途发生了改变。下表对二者进行了比较：

列表框
列表视图
数据类型
数据和程序选项
仅数据
内容
仅标签
标签和附加数据，可能含有多列
交互
用于进行选择
可用于进行选择，但更多地用于显示和操作数据。也可用作拖放源或目标。
展现
固定不变
用户能够更改视图、分组、按列排序、和改变列宽度和次序。
考虑下列问题，以判定该控件是否适宜：
l 该列表展现是否是数据，而非程序选项？假如不是，则应改用列表框。
l 用户需要更改视图、分组、按列排序、和改变列宽度和次序吗？假如不需要，则应改用列表框。
l 该控件需要作为全屏展开源或目标吗？假如需要，则应使用列表视图。
4.1.2 标准列表视图展示
列表视图控件支持四种标准视图:平铺、大缩略图、列表、具体信息。
平铺
各条目显示为右侧带有标签和可选具体信息中等尺寸图标。

平铺视图显示右侧带有标签和可选具体信息中等尺寸图标。
大图标
各条目显示为下方带有标签超大、大或中等尺寸图标。

大图标视图将各条目显示为下方带有标签大图标。
列表
各条目显示为右侧带有标签小图标。
在列表模式下，该视图按列排列各项，并使用翻页。相反，图标视图模式则按行排列并使用上下翻页。

列表模式将各条目显示为右侧带有标签小图标。
具体信息
各条目显示为表格格式中一行。最左侧列包含条目标可选图标及标签，后续列则包含其它附加信息，如条目属性等。
另外，各列能够添加或删除，也能够重新排序或改变列宽。各行能够进行分组，也能够按列排序。
具体信息视图将各条目显示为表格格式中一行。
4.1.3 推荐尺寸和间距

列表、信息提醒（尺寸单位为像素，字体单位为像素）：

l 调整列表视图高度以能够显示整数个列表项。避免纵向截断列表项。
l 调整列表视图尺寸以在全部支持视图中消除无须要垂直和水平滑动。列表视图应该显示 3 至 10个项。假如把列表视图稍稍加大能够消除翻页或滚动条话，能够考虑调整列表视图尺寸。可能包含大量条目标列表应该最少显示3项，使其同时能够显示更多条目以使滑动愈加轻易，也能够使得左右滑动更易于定位。
l 假如增大列表视图对用户来说有好处话，应该使列表视图及其父窗口能够缩放。这么做使用户能够依据需要调整列表视图尺寸。不过，可缩放列表视图应该是最少出现三次。
4.1.4 文档编写
当提及列表视图时：
l 原样引用标签文本，包含其大小写及“（列表）”字样，但无须包含访问键下划线和冒号。不要将视图列表称为“（列表框）”、“（列表视图）”或“（字段/域）”。
l 对于列表数据，应原样引用数据文本，包含其大小写。
l 仅在编程和其它技术文档中将列表视图称为“（列表视图）”，其它地方全部称为“（列表）”。
l 当描述用户交互行为时，对于数据应使用“（选择）”，而对于列标题则应使用“（单击）”。
应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于汉字来说，则应总是使用引号。
4.2 列表链接
目录
· 3.2.1 使连接明确、相关且能够被预知
· 3.2.2 使用模式
· 3.2.3 设计规范
o 3.2.3.1 交互
o 3.2.3.2 颜色
o 3.2.3.3 下划线
o 3.2.3.4 纯图形连接
o 3.2.3.5 导航链接
o 3.2.3.6 任务链接
· 3.2.4 文档编写

链接（Link）用于导航至其它页面、窗口或帮助专题，也可用于显示定义、开启命令或设置选项。链接可能是文本或图像，通常见已访问或未访问系统链接颜色来显示，以表明它是能够被单击。传统上，链接是带有下划线，但这往往并无须要，而且也能够降低视觉上杂乱。
当用户将鼠标指向某个链接时，该链接文本应该显示下划线（假如原先没有话），且鼠标指针变为手形。
文本链接是最轻量级可单击控件，往往用于降低设计视觉复杂度。
4.2.1 使链接明确、相关且能够被预知
链接文本应该指出单击链接会产生结果。
对于用户来说，明确链接比一般链接更含有强迫性，所以应该在链接标签中给出相关单击该链接会产生结果明确描述信息。不过，要确保你链接文本不会过于尤其，以至于产生误导及妨碍正常使用。
相比那些冗长链接，大家更愿意阅读简明链接。去掉无须要文字和细节。链接标签无须那么全方面。
评定你链接文本：
l 确保链接文本反应了链接支持情形。
l 确保链接作用是能够被预知。用户不会对结果感到惊讶。
最关键两件事：
l 使仅凭视觉观察即能发觉链接。用户无须经过和你程序交互来查找链接。
l 在链接中给出相关单击该链接会产生结果明确描述信息，哪怕使用很多文字。经过链接文本和可选信息提醒，用户应该能够正确地预知链接会产生结果。
4.2.2 使用模式
链接含有多个功效模式：
导航链接
用于链接至其它页面或窗口链接。
单击链接会原地导航至其它页面——比如在浏览器窗口或向导中，也可能打开新窗口。和任务链接不一样，导航链接并不开启任务，只是简单地导航至其它地方或是处理正在进行任务。导航暗示着安全，因为用户总是能够返回。
今日头条
在这个示例中，单击该链接将导航至头条新闻页。
任务链接
用于开启新命令链接。
单击链接要么直接实施命令，要么显示对话框或页面以搜集更多信息。和导航链接不一样，任务链接开启一个新任务，而不是继续进行已经有任务。任务并不暗视安全性——用户无法经过后退命令恢复到先前状态。任务链接之所以称为任务链接，是为了避免和命令链接混淆。
登录
在这个示例中，单击该链接将开启登录命令。
帮助链接
用于显示帮助专题文字链接。
单击链接将在另外窗口显示帮助文章。
什么是强密码？
在这个示例中，单击该链接将显示指定专题帮助窗口。
菜单链接
用于创建菜单一组任务链接。
因为菜单所处情况通常使用一组链接，其文本通常不加下划线（除非悬停）而且可能没有使用系统链接颜色。

上海美食
玩在上海
购物天堂
公交信息
火车查询
航班查询

在这个示例中，一组链接组成了菜单。
选项链接
一个已选定选项或占位符，单击该链接将引发命令以更改该选项。
和常规文字链接不一样，该链接会更改其文字内容以反应该前选定选项，且总是用未访问链接颜色显示。
如：互动娱乐推出中秋佳节特惠礼包答谢广大用户厚爱。其中全家唱为互动娱乐用户提供无偿三个月优惠活动，请老用户于10月20日前往营业厅办理。
纯文本链接
仅由文本组成。
这种形态最为灵活，能够被用在任何地方，包含嵌于文本中。
如：电视交友和芒果卫视我们聚会吧在12月15日于中兴广场举行大型交友联谊。
在这个示例中，文本颜色清楚地标识了嵌入文本链接。
带图标文字链接
前面带有图标文本，该图标能够表明其功效。
图形为链接提供了额外视觉象征，这使得链接比不带下划线纯文本链接更易于识别。
· 上海美食
· 玩在上海
· 购物天堂
· 公交信息
· 火车查询
· 航班查询
在这个示例中，图标为链接提供了额外视觉象征。
播放
在这个示例中，标准三角形播放符号表明该文本是一个命令
4.2.3 设计规范
4.2.3.1 交互
l 假如单击链接不会立即产生结果话，应该显示忙碌鼠标指针。假如没有反馈，用户可能会认为没有单击并会再次单击。
4.2.3.2 颜色
l 为已访问和未访问链接使用专题或系统链接颜色。这些颜色含义在全部程序中全部是一致。假如用户因为某种原因不喜爱这些颜色（可能是无障碍方面原因），她们能够自己更改。
l 对于导航链接来说，为已访问和未访问链接使用不一样颜色。应该仅在目前途序实例中保留访问链接历史统计。已访问过颜色对于表明用户去过哪里很关键，能够预防她们无意中反复访问那些已经访问过页面。
l 对于其它类型链接，不要使用已访问过链接颜色。比如，没有什么必需来标明那些“已访问过”命令。
l 不要为不是链接文本添加颜色，因为用户可能把它当成链接。在你想使用彩色文当地方使用粗体或某种灰色。
例外：假如全部链接全部带有下划线或在标准导航或命令区域话，则你能够使用彩色文本。
l 使用和链接颜色形成显著对比背景色。系统窗口颜色一直是好选择。
错误：

在这个示例中，背景色和链接颜色之间产生对比度很低。
4.2.3.3 下划线
l 对于完成关键任务必不可少那些链接来说，应该提供视觉线索使用户能够仅经过视觉观察即可识别链接。这些线索包含下划线、图形或项目符号、和标准链接位置。用户无须悬停于对象上或尝试单击来确定其是否是链接。假如链接在上下文中不那么显著话，应该使用带下划线文本。
l 不要为不是链接文本添加下划线，因为用户可能把它当成链接。在你想使用带下划线文当地方使用斜体。将下划线仅用于链接。
l 打印时，不要打印下划线或链接颜色。打印出来链接没有任何价值，还可能会引发混淆。
l 带图标文字链接
l 箭头图标应该仅用于命令链接。
l 将图标放在文本左侧。图标应该在视觉上引出文本。
正确：
玩在上海
错误：
玩在上海
在错误示例中，图标没有引出文本。
l 单击图标和单击文本效果应该相同。不然会造成非预期或令人费解结果。
4.2.3.4 纯图形链接
l 不要使用纯图形链接。用户在链接识别上会感到困难，且图形中任何文字（用于在单击后表明其操作）会造成当地化问题。
4.2.3.5 导航链接
l 确保导航链接不需要进行提交。用户应该一直能够回到初始状态，要么是使用“后退”进行就地导航，要么是经过“取消”关闭新窗口。
l 链接到特定内容，而不是通常性内容。比如，链接到文档相关段落比直接链接到开始位置要好。
l 仅当链接资料相关、有用、不是冗余反复时候才使用链接。应该有节制地使用导航链接——不要仅仅因为能够使用而使用。
l 假如链接导航至外部站点，应该将其 URL 显示在工具提醒中，使用户能够确定链接目标。
l 只在相关文本第一次出现时提供链接。反复链接没有必需，而且会使文本难于阅读。
l 假如操作说明文字中包含链接内容，则将链接放置在操作说明文字内。
l 假如相关文本在离首次出现很远位置出现话，也应该使用链接。比如，你能够在不一样段落中反复链接至同一个帮助专题。
4.2.3.6 任务链接
l 应将任务链接用于那些没有破坏性或能够轻易恢复命令。因为用户会将链接和导航（能够回退）联络在一起，链接不适适用于含有严重后果命令。那些显示对话框或确定消息命令则是好选择。
正确：
开始
停止
错误：
删除文件
在错误示例中，该命令含有破坏性。
4.2.4 文档编写
当提及链接时：
l 原样引用链接文本，包含其大小写，但无须包含省略号。
l 用“（单击）”一词描述用户交互行为。
应尽可能为标签文本应用粗体样式。对于英文链接来说，仅当需要避免歧义时才在其两侧添加引号；对于汉字来说，则应总是使用引号。
4.3 按钮
目录
· 3.3.1 它用在这里适宜吗？
· 3.3.2 使用模式
· 3.3.3 设计规范
· 3.3.4 推荐尺寸和间距
· 3.3.4 文档编写

按钮用于开始一个即时操作。
经典命令按钮。当用户按下 Enter 键时会实施“默认命令按钮”。它是由开发人员指定，但对于任何一个按钮，只要用户将焦点切换到其上，它全部会变成默认按钮。
4.3.1 它用在这里适宜吗？
考虑下列问题以进行判定：
l 该命令按钮是用来开始一个即时操作吗？假如不是，则改用其它控件。
l 链接会不会更适宜？假如符合下列情况，则应该使用链接：
l 该操作是导航至另外页面、窗口或帮助专题。
例外：向导中使用“后退”和“下一步”按钮进行导航。
² 按钮被嵌入在文本中间。
² 该命令实际上是次要。也就是说，它和该窗口关键目标没相关系。在这种情况下，轻量级命令按钮或链接则更为适宜。
² 该命令属于相关链接菜单或组。
² 标签太长，包含五个或五个以上单词，这会造成命令按钮看上去显得拙笨。
l 使用选项按钮和常规命令按钮组合是不是更适宜？当下列条件符合时，往往会用选项按钮和常规命令按钮（确定、取消）组合来替换一组独立命令按钮：
² 存在三个或更多可能操作。
² 用户需要在决定前查看附加信息。
² 用户需要在决定前和选项进行交互（可能是要查看附加信息）。
² 用户将其视为选项，而非不一样命令。
正确：

在这个示例中，选项按钮和确定、取消按钮一起使用，为选项提供附加信息。
4.3.2 使用模式
命令按钮含有下列使用模式：
标准命令按钮
你能够使用标准命令按钮来开启一个立即操作。

标准命令按钮
默认命令按钮
窗口中默认命令按钮表示当用户按下 Enter 键时会被激活。

默认命令按钮
用户经过 Tab 键切换到任何按钮全部会变为默认按钮。假如输入焦点在不是按钮控件上，那么原本含有默认按钮属性按钮则会恢复为默认按钮。每个窗口中只能有一个按钮成为默认按钮。
轻量级命令按钮
轻量级命令按钮和标准命令按钮很像，唯一不一样在于其边框仅当鼠标悬停时候才会显示。

在这个示例中，只有当用户将鼠标悬停在命令上方时，它才会含有很轻量级外观（类似于链接），显示出按钮边框。
当你想使用标准命令按钮，但又不期望总是显示按钮边框时，则能够使用轻量级命令按钮。对于你想弱化某个命令按钮，链接又不太适宜情况，轻量级命令按钮是理想选择。
浏览按钮
可使用浏览按钮来显示对话框以帮助用户选择有效值。
浏览按钮（Browse Button）弹出对话框可帮助用户选择文件、文件夹、计算机、用户、颜色等等。它们通常和一个不受限制控制一起使用，如文本框。其标签通常为“浏览”、“其它”或“更多”，且总是带有省略号以表示需要更多信息。

带有浏览按钮文本框
对于包含多个浏览按钮窗口，能够使用它简化版本：

简化浏览按钮
渐进展开按钮
可使用渐进展开按钮显示或隐藏不常使用选项。
将不常使用选项隐藏，直到需要时才显示做法称为“渐进展开（Progressive Disclosure）”。双 V 形（双箭头形）表明了渐进展开方法使用，其箭头即指向信息显示或隐藏位置：

4.3.3 设计规范
l 假如单击命令按钮不会立即产生结果话，应该显示忙碌鼠标指针。