数字电视交互设计规范分册.doc

南京有线中间件平台系统技术规范数字电视交互设计规范分册(暂定)编号版本V1.0密级内部公开发布日期2011-2-14江苏省广播电视信息网络股份有限公司南京分公司中间件工作小组目录一、引言61.1文档目的61.2适用范围61.3参考资料6二、设计原则72.1用户体验设计原则72.1.1反馈和交互72.1.2一致性72.1.3容错性72.1.4整体美学72.2最容易犯的错误82.2.1窗口82.2.2布局82.2.3文本82.2.4控件92.3如何设计优秀的用户体验112.3.1抓住基本功能112.3.2把某方面做出色112.3.3不必强求每个人都满意112.3.4做出艰难的决定112.3.5给人的体验就像是在进行友好的对话112.3.6默认执行正确的操作122.3.7让它得以工作122.3.8小心提问122.3.9使其用起来很棒122.3.10使其看起来很棒122.3.11使其响应及时122.3.12使其保持简单132.3.13避免糟糕的体验132.3.14为常见问题设计132.3.15不要使人厌烦132.3.16减少精力、知识和思考132.3.17测试你的用户界面142.4简约而又强大142.4.1强大142.4.2简约14三、界面163.1高清163.2标清17四、控件184.1列表视图184.1.1它用在这里合适吗？184.1.2标准列表视图展示194.1.3推荐尺寸与间距214.1.4文档编写224.2列表链接224.2.1使链接明确、相关且能够被预知234.2.2使用模式234.2.3设计规范254.2.4文档编写274.3按钮284.3.1它用在这里合适吗？284.3.2使用模式294.3.3设计规范304.3.4推荐尺寸与间距314.3.5文档编写324.4复选框324.4.1它用在这里合适吗？324.4.2使用模式344.4.3设计规范354.4.4推荐尺寸与间距364.4.5复选框标签374.4.6文档编写384.5单选框384.5.1它用在这里合适吗？394.5.2设计规范404.5.3推荐尺寸与间距424.5.4文档编写424.6进度条434.6.1它用在这里合适吗？434.6.2设计理念444.6.3使用模式444.6.4设计规范464.6.5推荐尺寸与间距504.6.6标签504.7文本框514.7.1它用在这里合适吗？524.7.2设计理念524.7.3使用模式524.7.4设计规范544.7.5输入验证及错误处理584.7.6提示584.7.7推荐尺寸与间距594.7.8文档编写594.8对话框604.8.1它用在这里合适吗？604.8.2设计理念614.8.3对话框的特性614.8.4使用模式624.8.5设计规范644.8.6推荐尺寸与间距664.8.7文本674.8.8文档编写724.9信息提示724.9.1它用在这里合适吗？734.9.2设计理念734.9.3设计规范744.9.4文档编写74五、菜单755.1设计理念755.2使用模式755.2.1主页菜单755.2.2分级页面菜单765.3设计规范775.3.1菜单项的组织与顺序775.3.2菜单的分类命名775.3.3视觉呈现77六、文本796.1用户界面文本796.1.1使用模式796.1.2设计理念806.1.3UI文本的设计模型816.1.4去除重复816.1.5避免过度沟通816.1.6使用倒金字塔结构826.1.7设计规范836.2风格与语气836.2.1设计理念846.2.2设计规范84版本与修订版号发布日期编制人审核批准修订摘要V1.02011-1-14中间件工作小组一、 引言1.1 文档目的根据交互设计学以及数字电视机顶盒界面特点，制定一套用于数字电视界面的交互设计标准，希望UCD部门以这套标准为依据进行各项目的交互设计，以保证公司各系列产品在交互方式上的一致性。1.2 适用范围公司数字电视的界面设计。1.3 参考资料1Windows 用户体验交互设计规范。2Apple 人机接口设计指南。3iPhone 人机界面设计规范。4Windows-Phone-7-UI设计及人机交互指南，pdf版。5About 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 高清72064012801200标准尺寸：1280*720安全尺寸：1280(-80) 720 (-80)= 1200 640，内容超过安全尺寸部分内容可能会显示不出来6406003.2 标清486526l 应用类业务界面：标准尺寸：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 如果单击命令按钮不会立即产生结果的话，应当显示忙碌鼠标指针。如果没有反馈，用户可能会认为没有单击并会再次单击。 l 如果同样的命令按钮出现在多个窗口中，试着使用相同的标签文本、访问键及窗口位置。 l 对于有文本标签的命令按钮来说，应当使用最小按钮宽度和标准按钮高度。 l 在每个窗口中保持按钮宽度相等。如果这么做不切实际的话，应当将有文本标签的命令按钮不同宽度的数量限制为两种。 l 当其他控件和一个命令按钮存在互操作时，如带有“浏览”按钮的文本框，应当将该命令按钮以下列三种方式中的一种进行摆放以表示它们之间的关系： 位于其他控件右侧，顶端对齐。 位于其他控件下侧，左对齐。 在互操作的控件之间垂直居中（如两个相关的列表框中间的“添加”和“删除”按钮）。l 如果多个命令按钮与同一个控件存在互操作时，在其他控件右侧纵向排列并顶端对齐，或在控件下方横向排列并左对齐。 l 当命令按钮附属于其他控件时，应当使用上述位置，并在上级控件被选中之前禁用附属的命令按钮。 l 不要使用过窄、过短或过高的带有文本标签的命令按钮，因为其看起来显得不专业。尽量使用默认的宽度和高度。正确：在这个示例中，按钮使用了标准尺寸，看起来很专业。错误：在这个示例中，按钮太小。错误：在这个示例中，按钮上标签四周的空间太多。l 避免在命令按钮上同时使用文本标签和图形。同时使用文本和图标往往会增加不必要的视觉混乱，且无法帮助用户更好地理解。仅当图形用于增进理解的时候才考虑同时使用文本和图形，例如当用于命令的是标准符号或它能够帮助用户形象地了解该命令的结果等等。否则，首先考虑文本，或者单独使用图形。 l 不要将命令按钮用于设置状态。应当改用选项按钮或复选框。命令按钮仅用于启动操作。4.3.4 推荐尺寸与间距用于命令按钮的推荐尺寸与间距。图中标有3、5、7个字按钮的宽度，3个字以下的按钮用3个字按钮的宽度；4-5个字用5个字按钮的宽度；6-7个字用7个字按钮的宽度。4.3.5 文档编写当提及按钮时： l 原样引用标签文本，包括其大小写，但无须包含访问键下划线和省略号。不要包含“（按钮）”字样。 l 用“（单击）”一词描述用户的交互行为。 应尽可能为标签文本应用粗体样式。对于英文格式来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。4.4 复选框目录 3.4.1 它用在这里合适吗？ 3.4.2 使用模式 3.4.3 设计规范 3.4.4 推荐尺寸与间距 3.4.5 标签 3.4.6 文档编写复选框（Check Box）用于在两个或两个以上有清晰差别的选项中进行选择。复选框的标签是对选中状态的描述，而清除状态的含义必须与选中状态明确相反。因此，复选框应当仅用于切换选项的开关状态，或者是选择/取消选择一个项目。 典型的复选框4.4.1 它用在这里合适吗？ 考虑下列问题以进行判断： l 该复选框是用于切换选项的开关状态，或者是选择/取消选择一个项目吗？如果不是，则改用其他控件。 l 选中与清除状态的含义是否清晰并明确相反？如果不是，应使用单选框（radio buttons）或下拉列表（drop-down list），以分别标注每种状态。 l 当组合使用时，它们是否是相互独立的，且用户能够选择零个或多个？如果不是，考虑使用那些用于依赖关系的控件，比如单选框和带有复选框的树形视图（check box tree views）。 l 当组合使用时，它们是否是相互独立的，且用户必须至少选择其中一个？如果是，应使用一组复选框，并当一个选项也没有选中时进行错误处理。 l 选项的数量是否在 10 个以内？屏幕空间的使用会随着选项的数量而成比例增长，因此应当将复选框的数量控制在 10 个以下。如果选项多于 10 个，应使用带复选框的列表框（check box list）。 l 单选框会不会更合适？复选项只适合用于打开或关闭一个选项，而单选框则可用于完全不同的选项。如果出现两种解决方案都可行的话，而复选框被清除时的含义不是非常明显的话，应使用单选框。 例如：错误： 在这个示例中，纸张横向（Landscape）选项的对立面并不明确，因此复选框在这里并不是好的选择。 正确： 在这个示例中，选项并非完全对立的，因此单选框更加合适。 在向导中，使用单选框会使可选项更为清晰，即使复选框本身是可行的。 如果屏幕空间足够，且这些选项之重要值得占用那么多屏幕空间的话，就可以使用单选框。否则，应使用复选框或者下拉列表。 错误： 在这个示例中，这些选项并不值得去使用单选框。 正确： 在这个示例中，复选框对屏幕空间的占用对于这个并不重要的选项来说非常经济。 如果窗口中存在其他复选框，则也可以使用复选框。 该选项展示的是程序选项，而非数据吗？选项值不应当基于上下文或其它数据。对于数据，应当使用带复选框的列表框，或是多选列表框（multiple-selection list）. 4.4.2 使用模式 复选框具有下列使用模式： 单个选项 用于选择单个选项的单个复选框。 用于单个选项的单个复选框 独立选项（不选或多选） 用于选择零个或多个选项的一组复选框。 与单选按钮这样的单选控件不同，用户可以从一组复选框中选择任意的组合。 用于选择独立选项的一组复选框 关联选项（一项或多项） 也可用于选择一个或多个选项的一组复选框。 你可能需要呈现一个或多个相关联的选项。当没有直接支持这种输入类型的控件，最好的办法就是使用一组复选框，并当没有选择任何选项时手工处理错误。 用于必须选择至少一种协议的一组复选框 混合选项 除了选中和清除状态外，复选框还有用于多选的混合状态，以指示该选项是对部分对象有效，而非所有对象。 混合状态的复选框 4.4.3 设计规范 将相关的复选框合并成组。将相关的选项合并，不相关的选项分开，成为10或1