Microsoft交互设计规范
Windows 用户体验交互设计规范
此官方 Windows 用户体验交互设计规范（简称“UX 规范”）的目标在于：?为所有基于 Windows 的应用程序划定高品质与一致性的基准。
?回答关于用户体验的问题。
?使你的工作更为轻松！
设计原则
?
?
?
? %)
? %)
控件
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
命令
?
o (34%) ?
o
o
o
o
o
o
?
o %)
o %)
o %)
o
o %)
o %)
文本
?
?
消息
?
o
o
o %)
o %)
o
?
o %)
o
o
o
o
?
o %)
o
o %)
o
o
?
交互
?
o (0%) ?
? %) ? %) ? %)
窗口
?
? %)
o %) o %) ?
?
? %)
o %) o %) ? %)
o %) 视觉
?
o
?
?
?
?
? %)
?NEW
o %) o %) o %) o (0%) ? %)
? %)
体验
?
?NEW (0%)
? %)
? %)
Windows 环境
? %)
? %)
? %)
? %)
? %)
? %)
? %)
其他
?
?
注释与引用
1.这里“官方”是原文的直接翻译，并不表示此中文译本经过微软官方任何形式的授权或认证。
布局Layout
目录
[]
?
o
o
o
o
o
o
o
o
o
o
o
o
?
?
?
o
?
?
o
?
?
?
?
o
o
o
?
o
o
o
o
o
o
o
o
?
“布局”是指窗口或页面内各内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的东西至关重要，并可产生具有吸引力的视觉外观。有效的布局可以使有的设计用户立即就可以理解，而有的设计却使用户觉得困惑而不知所措。
注：与相关的设计规范请参考各自相应的章节。特定控件的推荐尺寸与间距则请参考相应的设计规范章节。设计理念
视觉层次
当窗口或页面的外观能够表明各个元素之间的关系和重要性时，即可认为是具有清晰的视觉层次。如果缺少视觉层次，用户就得靠他们自己来分辨它们之间的关系与重要性。
视觉层次是通过巧妙结合下列属性来实现的：
?焦点。该布局指出用户首先要看的位置。
?流。当目光顺畅自然地沿着清晰的路径在界面上移动时，看到的用户界面（UI）元素即是适合其使用的顺序排列的。
?分组。在逻辑上相关的 UI 元素之间具有清晰的视觉关系。相关的项被组合在一起，不相关的项则被分开。
?强调。根据 UI 元素的相对重要程度进行强调。
?对齐。UI 元素并列排放，使其便于扫视并依次呈现。
另外，有效的布局还具有下列特性：
?设备无关性。布局的呈现应当与字型、字体大小、分辨率（DPI）、显示器或显卡无关。
?易于扫视。用户可以只扫一眼就找到他们要的内容。
?高效性。那些尺寸较大的 UI 元素就应该这么大，而小的元素也能照样很好地使用。
?尺寸可缩放性。如果有用的话，窗口尺寸可以缩放，而无论界面的尺寸多大或者多小，其内容的布局都能够保持有效。
?平衡。内容匀称地分布在界面上。
?视觉简洁性。这是说布局不要比它所应有的更复杂。用户不会觉得布局的外观复杂得让人头晕。
?一致性。类似的窗口或页面应当使用类似的布局，这样用户总能熟悉自己所处的环境。
虽然尺寸、间距和位置等概念非常简单，但在布局中正确混合使用这些属性却不是一件容易的事情。
在 Microsoft? Windows? 中，布局是用对话框单位（DLU）这样的设备无关度量单位和相对像素来描述的。关于布局度量单位、测量及换算的更多信息，请参考。
阅读设计模型
用户是通过内容的外观和组织形式来选择要阅读的内容的。要创建有效的布局，你需要理解什么是用户经常阅读的以及为什么如此。
你可以在决定如何布局时参考阅读设计模型：
?人们以从左向右、自上而下的顺序阅读的（在西方文化中）。
?阅读分为两种模式：沉浸式阅读（immersive reading）和浏览（scanning）。沉浸式阅读的目的在于理解。
该图所示的是沉浸式阅读模式。
相反，浏览的目标则是定位。一般的浏览路径看起来像是：
该图所示的是浏览模式。
如果文本排列在页面的左侧，则用户会先浏览左侧。
?使用软件时，用户不会沉浸于 UI 本身，而是沉浸于他们的工作中。因此，用户不会真正阅读界面上的文本——他们只会浏览。他们只会在确信必要的时候才会仔细阅读大量文本。
?用户通常会跳过页面左侧或右侧的导航部分。用户能够认出它们在那里，但仅当他们想进行导航时才去看导航部分。
?用户通常会跳过大块无格式的文本而完全不去阅读。
用户在浏览时通常会跳过大块文本及导航部分。
?一切都等价时，用户首先从窗口的左上角看起，扫过整个页面，到右下角结束。他们通常会忽略左下角。一切都等价时，用户会以 1、2、4、3 的顺序阅读这些数字。
?但在交互式 UI 中，并非所有的一切都是等价的，因此不同的 UI 元素所受到的关注程度也是不同的。用户通常会首先看交互式控件——尤其是出现在窗口左上角和中间的控件——以及显着的文本。
用户关注于主要的交互式控件及显着的主标题说明，其他东西只有在他们需要的时候才会去看。
?用户倾向于阅读交互式控件标签，尤其是那些看起来和完成手头任务相关的。相反，用户仅在他们认为需要的时候才有可能去阅读静态文本。
?看上去不同的内容容易吸引注意力。粗体文本和大号文本能够从普通文本中突显出来。彩色的或者是位于彩色背景上的用户界面元素较为突出。有图标比没有图标更加突出。
?除非确实需要，否则用户不会进行滚动。如果没有理由来滚动的内容，用户则不会。
?一旦用户决定要做什么，他们会立即停止扫视文本转而做事。
?由于用户会在他们认为结束的时候停止扫视，因此他们可能会忽略所有在完成点之后出现的东西。
用户会在他们认为结束的时候停止扫视。
当然，常规模式也存在例外。眼动仪实验指出，真实用户的行为很没有规律。此模式的目的在于帮助你做出好的决定，而不是精确地描述用户的行为。但既然你已经阅读了该列表，希望你也能辩别出许多你自己的阅读模式。
为扫视进行设计
用户并不阅读，他们只是扫视——因此你应当为视扫来设计用户界面。不要假设用户会像书写那样从左至右、从上到下地阅读文本，事实上他们会看那些吸引他们注意的 UI 元素。
要为扫视进行设计：
?假设用户先是会快速地扫一眼整个窗口，然后大致会按下面的顺序来阅读 UI 文本：
1.中间的交互控件
2.提交按钮
3.其他地方的交互控件
4.主标题说明
5.补充解释
6.带有警告图标的文本
7.窗口标题
8.正文区域的其他静态文本
9.脚注
?将用于触发任务的 UI 元素放在左上角或上方中间。
?将用于完成任务的 UI 元素放在右下角。
?尽可能将重要的文本放在交互性控件上，而非使用静态文本。
?避免将重要信息放在左下角或是需要滚动很多的控件或页面底端。
?不要展示大段文本。去除不必要的文本。使用的呈现方式。
?如果想吸引用户的注意，确保其理由充分。
尽可能使用这个模式而不要进行改变，但有时你可能需要强调或弱化某些 UI 元素。要强调主要的 UI 元素：
?将主 UI 元素放在上。
?将任何触发任务的 UI 放在左上角或上方中间。
?将提交按钮放在右下角。
?将其他主要的 UI 放在中间。
?使用控件来引起注意，比如命令按钮、命令链接和图标。
?使用显着的文本，包括大字体和粗体。
?将用户必须阅读的文本放在交互式控件上，或者附加图标，或者放在上。?使用位于浅色背景上的深色文本。
?在元素周围留有足够的空白。
?不需要任何操作就应当可以看到你要强调的元素，比如指向或悬停。
该示例显示了强调主要 UI 元素的多种方式。
要弱化次要的 UI 元素：
?将次要的 UI 元素放在扫视路径之外。
?将任何用户并不经常需要看到的内容放在窗口左下角或底部。
?使用不会吸引注意力的控件，比如用任务链接代替命令按钮。
?使用正常或灰色的文本。
?使用位于深色背景上的浅色文本。深灰或蓝色背景上的白色文本也可以。?在元素周围使用最小间距。
?考虑使用方式来隐藏次要的 UI 元素。
该示例显示了多种弱化次要 UI 元素的方式。
有效利用屏幕空间
要有效利用屏幕空间，需要对多种因素进行平衡：占用太多空间使窗口显得臃肿且浪费，以及基于来说甚至会难以使用。
错误：
在这个示例中，窗口相对于其内容来说太大了。
另一方面，使用太少空间会使窗口显得狭小、不适、有压迫感，而且难以使用——如果需要滚动或其他操作才能使用的话。
错误：
在这个示例中，窗口相对于其内容来说太小了。
虽然关键 UI 必须适合最小支持的屏幕分辨率，但不要认为有效利用屏幕空间就意味着窗口应该越小越好——事实上不是这样。高效的布局也顾及空白，并不是说把所有东西都塞到尽可能小的空间中去。现代显示器拥有足够的屏幕空间，应当尽可能有效地加以利用。因此，宁可占用过多屏幕空间，也不要使用太少。这么做可以使你的窗口感到更加轻便好用。
下列情况可以表明某布局确实有效地利用了屏幕空间：
?不必调整窗口、面板及控件的尺寸即可使用。如果用户首先做的事就是调整窗口、面板及控件的尺寸的话，该尺寸则是错误的。
?数据没有被截断。列表视图和树形视图中的大部分数据应当没有省略号，且其他控件中的数据不会被截断，除非数据特别的长。完成任务所必须阅读的数据则不应当被截断。
?窗口和控件的尺寸恰当，没有不必要的滚动。仅有很少的水平滚动条，没有不必要的垂直滚动条。?控件基本使用其标准尺寸。尽可能减少控件不同尺寸的数量，比如，在某个界面上只使用一两种按钮宽度。
?该用户界面平衡良好，没有大量未使用的屏幕空间。
选择恰好能够很好地适合其用途的窗口尺寸。（如果窗口是可缩放的，该条则应用于其默认尺寸。）被截断的数据或滚动条与大量可用屏幕空间的情况同时存在则是布局不当的明显标志。
控件尺寸
充分利用屏幕空间的第一步往往是决定各种 UI 元素的合适尺寸。参见及各控件设计规范中的推荐尺寸部分。
费茨法则指出，目标越小，鼠标指向其所需的时间就越长。因此，对于那些使用 Windows Tablet 及触摸技术的计算机来说，这里所谓的“鼠标”事实上可能是手写笔或是用户的手指，因此你在为小控件确定尺寸的时候需要考虑其他输入设备。16x16 像素对于任何输入设备来说都是合适的最小控件尺寸。相反，15x9 像素的标准微调控件按钮对于手写笔来说则太小了一些。
间距
留出充足（但不过分）的间距会使布局看起来更加舒服并易于理解。有效的空间并不只是未被使用的空间——它扮演了非常重要的角色，使用户更容易进行扫视、且给你的设计增添了视觉吸引力。关于设计规范，参见。
再次说明，对于使用 Windows Tablet 和触摸技术的计算机来说，“鼠标”事实上可能是手写笔或是用户的手指。当使用手写笔或手指作为定点设备时，定位会较为困难，以导致用户会点触到目标位置之外。当交互控件彼此靠得很近但并没有直接接触的话，用户可能会点击在控件之间的非交互区域。由于在非交互区域内点击不会产生任何结果或视觉反馈，用户往往无法确定哪里出了问题。如果小控件靠得过近，用户则需要非常精确地点触以避免误按其他对象。要解决这类问题，交互控件的目标区域要么彼此相接，要么之间留有至少 3 DLU（5 像素）。
具有良好间距的布局是指：
?整体上来说，用户界面看起来舒适，没有束缚感。
?间距均匀且平衡。
?相关元素彼此靠近，无关元素则分开。
?对于如何可以称为靠近是没有固定的值的，比如工具栏按钮。
可缩放窗口
可缩放窗口也是有效使用屏幕空间的一个因素。虽然这对于那些由固定内容组成的窗口来说没有什么帮助，但包含可缩放内容的窗口应当也是可缩放的。显然，用户缩放窗口的原因是可以利用额外的屏幕空间，因此窗口内容也应当相应地扩展，为需要的 UI 元素提供更多空间。可缩放窗口最适用于那些包含动态内容、文档、图像、列表及树的窗口。
在这个示例中，缩放窗口的同时会缩放列表视图控件。
这也意味着窗口可能被拉得太宽。例如，许多控制面板页在宽度超过 600 相对像素时会显得笨拙。在这种情况下，最好不要将内容区域缩放到超过最大宽度，或者是随着窗口的扩大而改变内容的原点位置。相反，应当保持宽度的最大值并固定左上角的原点位置。
当行宽不断增加时，文本会变得难以阅读。对于文本文档来说，考虑每行不超过 80 个字符以易于阅读。（字符包括字母、标点和空格。）
错误：
在这个示例中，文本太宽难以阅读。
最后，可缩放窗口在缩小时也需要有效使用屏幕空间，比如通过缩小可缩放的内容或是移除那些即使不存在也可以有效使用的 UI 元素。有时，窗口或其 UI 元素可能会太小而无法使用，则应指定最小尺寸或者有些元素应当完全移去。
在这个示例中，该面板具有最小尺寸。
对于有些程序来说，更好的方法是使用完全不同的呈现方式以使其内容在较小尺寸下仍保持可用。
在这个示例中，Windows Media Player? 在其窗口太小，无法使用其标准模式时，进行了改变。
焦点
当某种布局中存在一个明显会被最先看到的地方时即称为具有“焦点（focus）”。焦点非常重要，它告诉用户从何处开始扫视你的窗口或页面。如果没有清晰的焦点，用户的目光则会漫无目的地游荡。焦点应当位于那些用户需要快速找到并理解的重要内容处，且应当在视觉上予以强调。左上角是大多数窗口的自然焦点。
应当只存在一个焦点。在真实生活中，人眼一次只能聚焦在一件物体上，用户无法同时聚焦至多个位置。
要使某个 UI 元素成为焦点，可通过下列方式进行视觉加强：
?置于界面上部的左侧或居中位置。
?使用重要且易于理解的交互控件。
?使用显着的文本，如主标题说明。
?默认选中该控件并赋予输入焦点。
?将控件置于不同的背景颜色上。
考虑一下 Windows 搜索。Windows 搜索的焦点应当在搜索框上，因为这是任务的起点。然而，为了与标准搜索框的位置保持一致，它被放在了右上角。虽然搜索框具有输入焦点，但是鉴于其在扫视路径上的位置，单单这样线索是不够的。
为了解决这个问题，窗口上方中部用一个显着的说明文字将用户引导至正确的位置。
可以接受：
在这个示例中，窗口上方中部的显着说明文字将用户引导至搜索框。
如果没有说明文字，该窗口将没有明显的焦点。
错误：
这个示例没有明显的焦点。用户不知道应当从何处开始。
如果你对某个 UI 元素进行了视觉加强，应当确保这种注意力是合适的。在之前那则错误的 Windows 搜索示示例中，高亮的 All 按钮位于左上角且是最为醒目的，然而它却并不是所期望的焦点。用户可能会停在这个按钮处，试图弄清应该怎么做。
错误：
失去了显着的说明作为焦点，高亮的 All 按钮意外地成了焦点。
流程
当用户能够顺着界面上清晰的路径而流畅自然地按合适的顺序找到他们想要的 UI 元素时，该布局即称为具有好的“流程（flow）”。一旦用户认出了焦点，他们就需要确定如何完成任务。UI 元素的位置传达了它们之间的关系，且应当反映出完成任务的步骤。通常来说，这意味着任务的各个步骤应当自然地从左至右、从上至下（在西方文化中）排列。
具有好的流程的布局应满足下列条件：
?UI 元素的位置反映出用户完成该任务需要的步骤。
?触发任务的 UI 元素位于左上角或上方中部。
?完成任务的 UI 元素位于右下角。
?相关的 UI 元素相互靠近，无关的元素则分离。
?必须步骤应在主流程中。
?可选步骤应在主流程之外，可以使用合适的背景或渐进展开的方式进行弱化。
?经常使用的元素比不常使用的元素出现在扫视路径上的位置更靠前。
?用户始终知道下一步要做什么。任务流程中不存在出人意料的跳转或停止。
错误：
在这个示例中，用户不知道下一步该做什么。任务流程中存在出人意料的跳转和停止。
正确：
在这个示例中，UI 元素的呈现方式反映了完成任务所需的步骤。
分组
当那些在逻辑上相关的 UI 元素具有清晰地视觉联系时，该布局即可称为具有好的“分组（grouping）”。分组非常重要，因为这使得用户能够更加容易地理解并专注于一组相关而非单独的条目。分组可使布局显得更加简洁、易于理解。
你可以以下列方式进行分组（按分组程度由低到高排列）：
?布局。你可以将相关的控件相互靠拢，并在无关的控件之间保留较大的间距。
在这个示例中，仅仅使用布局显示控件之间的关系。
?分隔符。分隔符是用于划分控件分组的水平或垂直线条。分隔符提供了更加简洁的外观。不过，与分组框不同，它们在横跨整个界面时最为合适。
在这个示例中，带标签的分隔符用于显示控件之间的关系。
?聚合器。聚合器是在强烈相关的控件间建立视觉联系的图形。
在这个示例中，边界聚合器用于强调控件之间的关系，使其看起来像是单个控件，而不是八个。
?分组框。分组框是环绕在一组相关控件外的带标签的矩形框。
在这个示例中，分组框用于圈出并标注一组相关的控件。
?背景。你可以使用背景来强调或弱化不同的内容。
在这个示例中，控制面板任务窗格用于对相关的任务和控制面板项进行分组。
要避免视觉混乱，能够达到效果的最轻量级的分组方式即是最好的选择。更多信息，参见、、及。
无论使用何种分组方式，你都可以用缩进的方式在分组内部展示控件的关系。互相平行的控件应当垂直对齐，相互依赖的控件则应当缩进 12 DLU 或 18 像素。
有依赖关系的控件缩进了 12 DLU 或 18 像素，在设计上，这是复选框及单选按钮到其标签之间的距离。
分组良好的布局满足以下条件：
?窗口或页面中最多包含 7 个分组。
?每个分组的用途很明显。
?各组控件之间的关系显而易见，尤其是控件间的依赖关系。
?分组是对内容的简化，而不是使其更为复杂。
对齐
对齐是 UI 元素按照基准而排列的方式。对齐非常重要，因为这使内容更加易于扫视，并会降低用户所感受到的视觉复杂度。
当决定如何对齐时应当考虑下列目标：
?易于水平扫视。用户能够水平阅读并依次找到相关的条目，没有任何不适当的间隙。
?易于垂直扫视。用户可以扫视成列的相关条目并立即找到需要的内容，且只需最小的水平目光移动。?最小的视觉复杂度。如果某个布局在垂直方向上存在不必要的对齐网格线的话，用户会觉得它在视觉上较为复杂。
水平对齐
左对齐
由于从左至右的阅读顺序，使得左对齐适用于绝大部分内容。左对齐使得列数据易于垂直扫视。
右对齐
右对齐最适用于数值数据，尤其是。右对齐也适用于以及与窗口右边缘对齐的控件。
在这个示例中，高级搜索渐进展开控件是向右对齐的，因为它是对着窗口右边侧而放置的。
居中对齐
居中对齐最适用于那些左对齐和右对齐都不合适或显得不平衡的情况。
在这个示例中，媒体播放器控件是居中的，以保持外观平衡。
不要仅仅为了填充空间而将窗口内容居中。
错误：
在这个示例中，内容为了填充空间而错误地在可缩放窗口中居中。
垂直居中
元素顶端
由于自上而下的阅读顺序，使得顶端对齐适用于绝大部分内容。顶端对齐使得 UI 元素易于水平扫视。
文本基线
当控件与文本垂直对齐时，应当按照文本基线对齐以保持水平阅读流畅。
正确：
错误：
在正确的示例中，控件和其标签是按照各自的文本基线垂直对齐的。
对齐良好的布局应当满足下列条件：
?水平和垂直方向都易于扫视。
?简洁的视觉外观。
标签对齐
常规对齐规则适用于控件标签，但这也是值得特别注意的常见问题。标签对齐包含以下目的：
?易于垂直扫视以找到相应控件。
?易于水平扫视以将标签及其控件联系起来。
?易于本地化，处理在不同语言中长度不同的标签。
?适用于不同标签长度混合的情况。
?避免截断文本的同时，尽可能有效利用可用空间。
总体目标在于当寻找用户可能需要的内容时减少必须的视线移动，但控件的特性以及用户需要的内容则取决于上下文环境。
以下是四种常见的标签摆放和对齐样式，以及各自的特点：
?标签在控件上方左对齐
?标签在控件左侧左对齐
?标签在控件左侧左对齐，控件的左侧错开排列
?标签在控件左侧右对齐
标签在控件上方左对齐
该样式最易于本地化，因为该布局不依赖于标签的长度，但这是在垂直方向最占空间的样式。
该样式在垂直方向最占空间但易于本地化。适用于标注绝大部分交互控件。
适用情形：
?要标注的控件是可交互的（不仅仅是文本）。
?该 UI 需要本地化。该样式通常有足够的空间来容纳双倍甚至三倍长度的标签。
?该 UI 使用固定布局技术（比如 Win32）。
?控件数量不超过 10 个。当控件数量更多时，扫视标签将变得困难。
?垂直方向上有足够的空间放置标签。
?布局需要是自由表单，而不仅仅是按列排列。
标签在控件左侧左对齐
该样式是纵向扫视时最为方便的，且当标签长度不一时也能够适用，但在将标签与控件关联起来方面较为困难。如果需要，该样式也可使用多行标签。
该样式很好用。不过，这里的两列看上去像是四列——数据看起来更加复杂。
适用情形：
?用户需要纵向扫视以寻找特定的标签。
?用户不太需要以从左至右、从上至下的方式阅读标签和控件。
?水平方向上有足够的空间放置标签。
?标签在长度上有巨大差别。
?控件很多，比如在表单中。
?列数较少。在视觉上，标签和控件像是两个独立的列。
标签在控件左侧左对齐，控件的左侧错开排列
该样式使得在纵向扫视标签以及横时同时扫视标签和控件时较为方便，而且空间利用率很高，但纵向扫视控件较为困难。控件右侧对齐以充分利用空间。
该样式布局紧凑，易于阅读，但对控件的纵向扫视较为困难。
适用情形：
?该 UI 使用可变布局技术（比如 Windows Presentation Foundation）。
?用户需要纵向扫视以寻找特定标签。
?用户需要以从左至右，从上至下的方式阅读标签和控件。
?用户不太可能需要纵向扫视控件。
?控件文本的长度差别很大，如果使用其他样式可能会被截断。
?控件是只读的，比如只读文本框。对于其他控件，这种对齐方式看起来有些糟糕。不过，控件可以在单击时变为可编辑状态。
?列数较多，但每列中的控件较少。
标签在控件左侧右对齐
该样式是最易于横向阅读并将标签与其控件联系在一起的，但是在纵向扫视标签时较为困难且当标签长度差距很大时不太适用。
该样式易于阅读以及纵向扫视，但扫视标签而较为困难。
适用情形：
?用户需要以从左至右、从上至下的方式阅读标签和控件。
?用户不太会纵向扫视以寻找特定标签，可能是因为：
o控件数量较少。
o标签被人们熟知。
o控件几乎都是自描述的，且极少出现空白内容（也许具有默认值以防止出现内容为空的控件）。?水平方向上有足够的空间放置标签。
?标签的长度差别不大。
?列数很多。在视觉上标签和控件像是单独的一列。
然而，在决定使用上述任一样式之前，还应当考虑下列两个因素：
?最好使用能够在你的程序各处一致使用的样式。
?在控件上方或者左侧的左对齐标签是最常见的样式，应当优先考虑。
平衡
当窗口或页面的内容在整个界面上分布均匀时，即可称其为“平衡”。如果界面实际的复杂度与看起来相一致的话，平衡的布局则不会倒向一边。
最常见的问题是窗口或页面的左侧包含太多内容。你可以通过下列方法来取得平衡：
?在左侧比右侧留出更大的边距。
?将用于完成任务的 UI 元素放在右侧。
?将贯穿用于整个任务的 UI 元素居中放置。
?加长可缩放或多行控件。
?适当使用居中对齐。
这个平衡良好的向导页布局通过在左侧比右侧留有更多的边距来取得平衡。
如果上述方法无法取得平衡，考虑减少窗口或页面的宽度以更好地适应其内容。
对于可缩放界面来说，不要仅仅为了取得平衡而将内容居中。相反，应当将其固定在左上角，定义最大界面区域，并在可用空间内对内容进行平衡。
网格
网格是不可见的底层对齐系统。网格可以是对称的，但非对称网格也同样适用。当用于单个窗口或页面时，网格有助于在界面上组织内容。当重用时，网格可以在各个界面之间建立统一的布局。
网格线的数量会影响视觉复杂程度。网格线数量较少的布局比网格线数量较多的布局显得简单。
看起来复杂：
看起来简单：
不必要的网格线增加了视觉复杂度。
一个有效使用网格的布局应当满足下列情况：
?具有相似内容或功能的窗口或页面具有相似的布局。
?在各窗口或页面上重复出现的设计元素位于类似的位置。
?没有不必要的垂直或水平对齐网格线。
视觉简洁
视觉简洁（visual simplicity）是指，在感觉上某种布局的复杂度不比它实际需要的更高。
视觉简洁的布局应当满足下列情况：
?去除了不必要的窗口层次。
?展示内容时使用最多不超过七个分组，且应当易于识别。
?使用轻量级的分组方式，比如用布局或分隔符来代替分组框。
?使用轻量级的控件，比如将链接代替命令按钮用于辅助命令，以及将下拉列表代替列表用于多个选项。?减少垂直和水平的对齐网格线数量。
?减少控件不同尺寸的数量，例如，在界面上只使用一两种按钮宽度。
?使用渐进展开的方式隐藏 UI 元素，直至需要时再显示。
?使用充足的空间，以使窗口或页面不会让人感到拥挤。
?适当调整窗口和控件的尺寸以消除不必要的屏幕滚动。
?使用一种字体，以及少数不同的尺寸和文本颜色。
作为一条通用法则，如果某个布局元素可以被去掉而不影响 UI 的有效性，则应当将其去除。
设计规范
屏幕分辨率及 DPI
?支持 800x600 像素的最小 Windows 屏幕分辨率。对于那些必须可以工作在安全模式下或用于
Ultra-mobile PC（UMPC）及 Windows Media Center PC 的关键用户界面，应当支持 640 x 480 像素的屏幕分辨率。确保在垂直方向上为任务栏预留了 30 个像素的空间，以便在任务栏的情况下显示窗口。
?要支持这些环境，即使当前屏幕分辨率低于你程序最小支持的分辨率，也仍然应当显示部分用户界面。该用户界面的功能可能受到限制。
?为 1024x768 像素的屏幕分辨率优化可调整大小的窗口布局。自动调整窗口尺寸以适应较低的屏幕分辨率。
?确保在 96 dpi 和 120 dpi 模式下测试你的窗口。检查布局问题、控件和窗口裁剪、以及图标和位图
拉伸情况。
?对于用于移动使用的程序，应为 120 dpi 进行优化。目前 Mobile PC 上普遍采用高 dpi 屏幕。
窗口尺寸
?选择适合其内容的默认窗口尺寸。不要怕使用较大的初始窗口尺寸，只要你能够有效地利用空间即可。?使用平衡的长宽比。最好是 3:5 到 5:3 之间，尽管消息对话框可以使用 1:3 的长宽比（比如错误信息和警告等）。
?尽可能使用可缩放窗口以避免出现滚动条或数据截断。可缩放窗口最适合于包含动态内容和列表的情况。?对于文本文档，考虑每行最多不超过 65 个字符以使文本易于阅读。（字符包括字母、标点和空格。）?对于固定大小的窗口：
o必须完全可见，且其尺寸应当适合其。
?对于可缩放窗口：
o可以为较高的分辨率进行优化，但在显示时应当根据需要按照实际屏幕分辨率进行调整。
o当窗口逐渐增大时应当也逐渐显示更多的信息。确保窗口中至少有一部分或一个控件具有可缩放的内容。
o在缩放窗口时，内容左上角原点的位置应保持不变。不要在窗口尺寸改变时通过移动原点来保持内容的平衡。
o如果内容可以被拉得很宽的话，应当设置最大内容尺寸。如果内容太宽而显得笨拙，则不要将内容区域缩放到超过最大宽度，或者随着窗口放大而改变内容的原点位置。相反，应当保持最大宽度以及固定的左上角位置。
o如果当窗口小于特定尺寸后内容不再可用，则应当设置最小窗口尺寸。对于可缩放控件，应当根据其最小的可用尺寸设计最小可缩放元素尺寸，例如列表视图中的最小可用列宽。可选的用户界面元素应当完全移去。
o考虑更改呈现方式以保存内容可以用于更小的尺寸。
在这个示例中，Windows Media Player? 在因窗口太小而标准形式不再适用时，改变了它的形式。
控件尺寸
?所有可交互控件应当至少有 16x16 像素大。这样可以适用于所有输入设备，包括 Windows Tablet and Touch Technology。
?调整控件尺寸以避免数据被截断。不要截断那些为了完成任务必须阅读的数据。调整列表视图的列宽以避免数据被截断。
?调整控件尺寸以消除不必要的屏幕滚动。如果将控件稍稍调大即能消除滚动条的话，则应当这么做。应当仅有个别的垂直滚动条，没有不必要的水平滚动条。
在这个示例中，下拉列表的尺寸进行了调整以消除滚动条。
?减少单个界面上的控件尺寸数量。尽可能使用，使用少数尺寸统一较大或较小的控件。尽量为所有的列表框和树形视图使用相同的宽度，命令按钮和下拉列表不要使用超过三种宽度。不过，文本框和组合框的宽度应当暗示其输入内容的最大长度或预期长度。
在这个示例中，统一使用了一种列表框和命令按钮尺寸。
?应当额外空出 30% 的长度（对于较短的文本来说，最多 200%）用于需要被本地化的任何文本（但不包括数字）。此条准则基于采用英文文本进行布局设计的假设。还需注意的是，此条准则所指的是被本地化的文本，而不是数字。
?将静态文本控件、复选框及单选按钮扩展至贴合该布局的最大宽度。这将避免截断长度未知的以及本地化的文本。
错误：
在这个示例中，对控件文本进行了不必要的截断。
控件间距
?如果控件之间并不直接相连的话，应当留出至少 3 DLU（5 个像素）的间距。否则，用户可能会点击在控件之间的非交互区域。由于在非交互区域内点击不会产生任何结果或视觉反馈，用户往往无法确定哪里出了问题。
位置
?将 UI 元素在界面中按从左自右、从上自下的顺序（在西方文化中）自然地排列。UI 元素的位置将反映它们之间的关系，以及完成任务所需的步骤。
系统界面设计规范
B/S 系统界面设计规范 1.引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受，提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛的，当然也不利于规模化的团队合作。 1.3. 定义 术语定义： 效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的风格，它规定了页面布局上的每个细节。 容器：即HTML 标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为单元格是放置图片的容器。 样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种
UI界面设计规范要点
UI设计(流程/界面)规范 一：UI设计基本概念与流程 1.1 目的 规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人
用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。B、分析设计阶段 通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发： 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩，文字，图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来，直观科学。
Microsoft Surface 交互设计规范
第1.0节： 简介 微软的Surface使开发人员和设计人员，为他们的客户提供惊人的，社交的，具有很强的互动体验。来自四面八方的人们可以使用360°接口面对面的协作，合作和建立信任。 开发引人注目的Serface体验需要不同的方法来设计接口。本文提出的设计原则和指导方针，以解决关键方面，包括：互动，视觉，声音，文字，和更多的应用程序界面设计。使用这些原则和惯例为出发点，得到最有效的界面软件和硬件平台的独特功能。 第4.0节： Serface 硬件 本节讨论具体涉及到serface的硬件设计注意事项和指导方针。 第4.1节： 输入法 1.基于视觉的触摸 与serface互动的主要方式是触摸。Serface从一开始就在为触摸设计，它是Surface 应用程序中互动的关键动力。 手指和blobs ：serface自动识别区分手指和blobs。当有人将手指放在屏幕上，手指会被识别。他们指出的方向，视觉输入系统会自动检测到手指数目、位置和方向。当其它不认定为手指或者标签的物品被放置在屏幕上时，被列为blobs。提供基本大小的信息并分配一个任意方向。方向值在blobs中通常是没有可靠的手指或者标签。 触摸交互- 表面SDK操作处理器识别三个离散的操作：移动，旋转和调整大小。 事实上，Surface SDK中只有三个操作手势是一个技术性的事实，但是从交互的角度看，有许多不同的触摸交互，一个人可以使用这些操作。下面的插图显示了如何使用一个手指或者几个手指，在各种触摸交互中执行虚拟对象。
点击- 按，然后释放 保持-然后按住 滑动或推- 使用你的手指滑动或推来移动对象
轻击-轻按，迅速滑落，然后释放 触摸并开启- 将你的手指，靠近物体外侧边缘的一块内容，并围绕其中心旋转 自旋- 扭转迅速用两个手指旋转对象
交互设计方案衡量标准的五层总结
用户目标需要有真实的用户信息输入，输入途径可以是和用研合作进行调研分析、向熟悉用户的业务方请教、现场观察和访谈等，忌讳设计师自行脑补。将用户画像与故事板建立起来并传达给大家，也可以在评审时更好地帮助与会者代入真实用户、理解感受他们的核心痛点与诉求，进而对设计方案给出更准确的判断，而不是纯粹站在自己的角度上提不接地气的建议。 基于业务和用户背景提炼出具体的设计目标后，设计方案需要紧密围绕目标展开，而不是在被别人问到你的设计方案如何体现出这一目标时，才发现目标和方案实际上基本不相干甚至南辕北辙，这也是一些初级设计师（包括我自己）会犯的错误。 2、流程完整性 有些外人对交互设计的理解可能就是简单的「画画线框图」，但实际上前期的这些流程才是耗费时间与精力最多的，虽然并不是每一个项目都需要完全覆盖到（没有必要，特别是日常迭代的小 需求）。 在交互设计文档里完整展示这些阶段产出物还是很有价值的，它们能更好地体现出你的专业态度和充分的思考推导过程，给设计提案的说服力提升（见上一篇文章）增加筹码。 3、整体美观性 要以设计师的态度去认真对待工作中的每一件事情，虽然有专业的视觉设计师存在，但交互设计师同样需要懂得和追求基础的美感，这点在设计文档、线框图等关键交付物中都可以体现出来。 第二层：易理解性、易操作性、技术可行性、分支与边界状态 这一部分仍然属于「基础」，主要体现在对细节的推敲程度上，也是交互设计师体现自身「专业性」的重要环节。 1、易理解性
这一部分内容比较基础，我就不多加说明了，在打磨的过程中多思考、多尝试、多推敲、多做用户测试，有时候对业务太过熟悉会让我们意识不到一些比如文案理解困难的问题，而身边不那么了解业务的同事要更容易一眼发现问题所在，所以，多用开放的心态听取大家的反馈吧。 2、易操作性 同样是一些很基础的知识，主要参考尼尔森十大可用性原则（http://online- https://www.360docs.net/doc/be7711250.html,/testing/usability-principles-jakob-nielsen），不再赘述。 3、技术可行性 这一部分因为我是根据自己的业务场景梳理的，不具备通用性，所以就不分享具体内容了。 交互设计师不一定非要懂技术，但一次次技术评审下来，对于「什么能做、什么不能做」（对于一些优秀技术同学，还可以加一条「有挑战但技术乐意做」，哈哈）要逐渐形成清晰的概念并进行总结，必要时也可以体现在自己的设计文档上（让大家理解你有时做出一些看上去略古怪的设计方案的苦衷）。设计过程中也要及时找技术同学沟通确认可行性、倾听他们的建议和反馈，而不是次次都是等方案设计完成、正式评审了才发现技术上实现成本过高，进而被迫放弃。 4、分支与边界状态
产品设计交互规范
产品设计交互规范 常州广传网络技术有限公司 编写：王英 2013年11月
目录
1概述 规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的 ●在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利 有效地进行，以保证产品界面的最终规范化实现； ●从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担， 改善产品的用户体验，提升产品的市场竞争力； ●使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。 1.2规范适用的范围 广传项目部内的所有产品。 1.3规范适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。
2基本原则 以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。 2.1一致性 ●视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视 觉上应该保持一致；否则，界面外观要予以区分； ●操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时 要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别； ●外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同； 视觉元素的外观及其操作结果，必须与用户的心理认知相符。 2.2简洁性 ●减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息； ●简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆； ●操作简单：减少冗余的操作步骤。 2.3避免干扰和打断 ●避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪 声和其它干扰。 ●避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框） 打断用户的工作。 2.4减轻用户记忆负担 ●认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要 及时准确； ●系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索 取信息； ●合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法， 为用户的任务提供直观易用的界面； ●有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说 明自身可以如何使用的外观属性）。 2.5及时有效的反馈
【精品报告】常用中后台交互设计控件使用场景与规范总结
常用中后台交互设计控件使用场景与规范总结 最近刚完成平台安畅云 2.0 的改版设计，平台模块很多，经常存在很多类似的页面和组件，若不制定统一的规范和控件，则会导致很多重复的工作，大大降低产品的设计效率； 同时，平台的一致性也得不到保障。 所以，我们视觉、交互、前端的小伙伴们针对我们踩过的坑，大家认真总结和提炼出一个 符合公司定位的设计规范，统一公司项目的前端 UI 设计，规避不必要的设计差异和实现 成本，实现设计和前端资源的效率最大化。 此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。 字体 概述 字体是界面设计中最基本的构成元素之一，用户通过文字来理解内容和完成任务，合适的 字体将大大提升用户的阅读体验及工作效率。在安畅云项目的字体使用中，为了使页面的 视觉层次更加清晰，我们从以下三方面来使平台的字体符合易阅读和美观的要求。 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息； 尽量使用单种字体，使用多种字体会让界面看起来零散和杂乱无章； 遵循 WCAG 2.0 标准（标准详情见 https://https://www.360docs.net/doc/be7711250.html,/Translations/WCAG20- zh/#visual-audio-contrast），字体在使用时与背景颜色的对比值满足无障碍阅读的最 低标准。 字体使用建议 中文字体优先级：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平台使用字体）英文字体优先级：Helvetica Neue、Helvetica、Arial（平台使用字体）
字号使用建议 行高使用建议 行高也是影响用户阅读体验的重要因素之一，我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右，而中文因为字符复杂，所以中文行高需要更大。现在公认1.5em 至1.8em 之间会有一个比较好的视觉阅读效果。 安畅云项目行高计算公式：行高值=字号 x 1.5，例如：12 号字体的行高为 18px，14 号字体的行高为 21px。
交互设计评估标准-w
交互设计评估标准-1 1. 优先级 a. 用户优先级 b. 功能优先级 c. 内容/信息优先级 d. 交互优先级 e. 视觉优先级 2 一致性 a. 交互逻辑的一致性 b. 元素的一致性 c. 语词的一致性 d. 信息架构的一致性 3. 感觉 a. 快的感觉 b. 安全的感觉 c. 其他感觉 1. 优先级 当你把所有重要的东西都摆上桌面，就没有重要的东西了。用户的认知空间和认知能力有限，当他们面前有1条路可以选择时，事情会变的很简单，但是当他们面临3条路时，往往会踌躇不前。尽管我们难以量化的说用户有多少精力在这种抉择中损耗掉了，但这种损失是显而易见的。看看Android原生系统的设计，用户想要运行一个应用时，有几条路？ 设计中对优先级的把握就是要让我们能够将真正重要的功能/内容/元素放到突
出的位置，以最多的界面资源去展示它们，而将次要的部分，弱化、隐藏起来，再次的部分，则索性砍掉。 a. 用户优先级 把握核心用户，为产品自己真正的用户群做设计，不要天真的认为你的设计可以满足所有用户。 b. 功能优先级 把握核心需求，亮点功能往往两三个就足够多了。功能航母往往容易沉没（看看为何现代战争中巨型战列舰都逐渐被淘汰了），Nokia VS Apple也是这样。有一次Tina（创新工场的CEO）的一句话很受教，她说她以前在（微软或IBM）做Marketing时，给客户讲产品，往往一次只讲三个Feature，即使这个产品或版本有再多的亮点。设计或者开发产品时我们总是想尽可能的将好东西放进去，但是打动客户/用户的点却往往只在三个之内。 c. 内容/信息优先级 将内容分成不同的层次，核心内容需要明显的突出出来。报纸上的标题、摘要、征文等层次清晰、泾渭分明也是这个原因。 d. 交互优先级 主要的交互路径需要让用户以最小的精神代价就能走的通，尽量减少这条路上的分支。为此，一些时候不得不将一些次要的交互路径更含蓄的隐藏起来。最常用的可能是“高级设置”这样的形式。 e. 视觉优先级 视觉更需要层次，重点的视觉元素需要让用户一眼扫过去就能看到，而次要的信息则要拉开距离，通过留白、颜色对比等等手段。一个例子是做PPT，当我们看到好的PPT时，总发现里面有大量的空间、有灰色的文字，这样将重点突出出来，而很多人在做PPT时则会直接COPY大段文字，直接用粗体、黑色，满屏幕只见到黑色的一片。和优先级这个原则互通的概念还有简化（简化的目的实际上就是突出重点）、减法原则等等。 2 一致性 一致性可以让界面更容易被预知，可以降低用户的学习成本等等。一致性几乎是
完整交互设计的基本原则
完整交互设计的基本原则： 1.美学 1)美术设计应该留给那些受过正规训练的有足够技术能力的图形或视觉设计师 2)设计潮流应该先考虑可用性 3)像测试交互设计一样也要对视觉设计进行测试 4)保持一致性 5) 2.预知需求 1）在用户达成目标的每一步都把所有必要的信息和工具带给用户 3.用户自主 1）不管是硬件环境还是软件环境都应该属于用户，但是这不是说用户自主控制就意味着我们要放任这个规则 2）让人们自主做出决定，尽管有些用户没有好的审美或者行为并不高效 3）一步步实践来提供给用户恰当的控制 4） 4.链接的触发机制 1）设备状态让用户可知 2）让状态信息保持及时更新并且容易看到 3）确保状态信息是精确的 4） 5.颜色 1)在用户界面设计中你想通过颜色传达信息时，你应该也要使用第二个线索来给那些不能 准确看清楚颜色的用户传达清楚信息。 2)测试一下你的网站去看一看色盲用户眼中你的网站是什么样子 3)不要因为不是每个用户都能看清楚每个颜色而避免在界面中使用颜色 4)在用户界面中不要因为一时的时尚潮流完全不用颜色或者使用大量的颜色线索 6.一致性 1)按照等级的不同维持严格的一致性 2)平台一致性和内部产品的一致性 3)系列产品的一致性 4)应用的欢迎屏、首页等设计元素的总体的视觉一致性 5)小的可见的结构元素一致性 6)不可见的产品元素的一致性 7)用户行为的响应 7.不一致性 1)就像当元素行为一样时视觉一致一样当元素行为不同时保持视觉不一致也是极其重要 的 2) 8.连续性 1)经过一段时间，追求连续性而不是一致性 2) 9.用户期待的一致性 10.默认 1)输入框中字段的默认行为
交互设计规范
中国体育彩票销售终端系统 交互设计规范 交互设计的定义 交互设计(Interaction Design, 缩写IxD 或者IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面(Wikipedia)。通过对界面和行为进行交互设计，从而可以让使用者使用人造物来完成目标，这就是交互设计的目的。进一步讲，交互设计，应当是创造承接人类与计算机之间的界面即人机界面。
交互设计的两方面 交互设计的出发点在于研究用户和计算机交流(dialog)的时候，人的心智模型和行为模型，并在此研究基础上，设计界面信息及其交互方式，用人机界面将用户的行为翻译给计算机，将计算机的行为翻译给用户，来满足人对软件使用的需求。所以，交互设计一方面，是面向用户的，这时交互设计所追求的既是可用性(Usability)，这也是交互设计的目的所在；交互设计的另一个方面是面向计算机实现的，这时我们关注于“软件工程化”。 交互设计的核心要素 机器／系统，人，界面 精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形 式表达出来。
交互设计的目标 目标是行动的驱动力，产品的功能和行为必须通过任务来解决目标产品成功的关键是目标，而不是特性 成功的交互设计师应该对目标高度敏感 用户目标：生活目标体验目标最终目标 产品目标：利润市场 交互设计的原则 可视性：功能可视性越好，越方便用户发现和了解使用方法
Microsoft 交互设计规范
Windows 用户体验交互设计规范 此官方[1] Windows 用户体验交互设计规范（简称“UX 规范”）的目标在于：?为所有基于 Windows 的应用程序划定高品质与一致性的基准。 ?回答关于用户体验的问题。 ?使你的工作更为轻松！ 设计原则 ?Windows 用户体验设计原则 ?最容易犯的错误 ?如何设计优秀的用户体验 ?简约而又强大 (20.3%) ?使用 WPF 进行设计 (29.4%) 控件 控件列表 ?气球状提示 ?复选框 ?命令按钮 ?命令按钮 vs 链接 ?命令链接 ?下拉列表框与组合框 ?分组框 ?链接 ?列表框 ?列表视图 ?进度条 ?渐进展开控件 ?选项按钮 ?搜索框 ?滑块 ?微调控件 ?状态栏 ?选项卡
?文本框 ?工具提示与信息提示 ?树形视图 命令 ?菜单 o设计理念 (34%) ?工具栏 o设计理念 o使用模式 o设计规范 o推荐尺寸与间距 o标签 o文档编写 ?功能区（Ribbon） o设计理念 (35.7%) o设计规范 (8.7%) o标签 (25.1%) o文档编写 o功能区设计流程 (15.2%) o程序命令模式 (42.9%) 文本 ?用户界面文本 ?风格与语气 消息 ?错误信息 o设计理念 o使用模式 o设计规范 (31.3%) o文本 (11.7%) o文档编写 ?警告信息 o设计理念 (25.9%) o使用模式 o设计规范 o文本 o文档编写
?确认信息 o设计理念 (50.3%) o使用模式 o设计规范 (40.8%) o文本 o文档编写 ?通知 交互 ?键盘 o键盘快捷键 (0%) ?鼠标与指针 ?触摸 (11.6%) ?手写笔 (19.3%) ?无障碍访问（辅助特性） (3.5%) 窗口 ?窗口管理 ?对话框 (51.8%) o对话框设计理念 (19.5%) o对话框使用模式 (27.1%) ?通用对话框 ?向导 ?属性窗口 (5.3%) o属性窗口设计理念 (13.4%) o属性窗口使用模式 (35.3%) ?控制面板 (10.0%) o控制面板使用模式 (49.8%) 视觉 ?布局 o布局度量单位 ?窗口边框 ?字体（Segoe UI） ?颜色 ?图标 ?标准图标 (26.5%) ?动画与过渡NEW o设计理念 (11.2%)
(产品管理)产品设计交互规范最全版
（产品管理）产品设计交互规范
产品设计交互规范 常州广传网络技术有限公司 编写：王英 2013年11月
目录目录2 1概述3 1.1规范的目的4 1.2规范适用的范围4 1.3规范适用的人群4 2基本原则5 2.1一致性5 2.2简洁性5 2.3避免干扰和打断5 2.4减轻用户记忆负担5 2.5及时有效的反馈5 2.6让用户放松心态，不怕犯错6 3产品交互通用规范7 3.1受范性指示7 3.2操作不可用状态7 4组件规范9 4.1表格9 4.2单元格数据14 4.2.1单元格数据展示14
4.2.2通讯录15 4.3信息列表17 4.4编号和序号19 4.4.1编号19 4.4.2序号20 4.5注册表单22 4.6联系方式28 4.7图片裁切32 4.7.1固定尺寸32 4.7.2自定义尺寸34 4.8翻页35 4.9日期输入39 4.9.1通过日历选择日期39 4.9.2年份跨度较大时的日期选择43 4.9.3等量条目分隔线45 4.10高级加密48 4.11进度条51 4.12图形化面包屑53 4.13星级评分54 4.14保留图标57 4.15弹出层59
4.1 5.1非独占焦点层59 4.1 5.2独占焦点层60 4.1 5.3局部独占焦点层62 4.16搜索63 4.16.1模糊搜索63 4.16.2精确搜索65 4.17数据添加68 4.17.1添加单个文件68 4.17.2添加多个文件69 4.17.3添加行73 4.18排序73 1概述 规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。 设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。 该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。 1.1规范的目的
(完整版)BS系统界面设计规范
B/S 系统界面设计规范 1. 引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产 品科学的开发方法，将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受，提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外，交互性的设计，及人体工程学方面的研究。本规范制订的依据从广义概念出发，总结以往项目的成败经验，目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心，将类似项目成功的经 验继承和积累下来，将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层 面。 新的开发方式强调分层，规范出界面设计人员做什么，服务器编程人员做什么，这样就 把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点，在公司产品线中占 越来越大的比重，.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工 程方法统一起来，突出服务器端技术，这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作，团队的合作方式甚至决定了一个系统开发的成败。 目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式，表现为前台 页面仍然与服务器代码高度的关联，带来的后果是重复建设、高昂的维护成本或失去控制的项目，没有充分的发挥出集成开发工具的优势。 在以往的开发方式下界面设计侧重在静态页面的建设上，每个页面作为一个独立的模 块来处理，在页面交互中则是程序员根据自己的习惯来控制，程序对个人的编程风格的依赖很强，这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的，甚至是背道而弛 的，当然也不利于规模化的团队合作。 1.3. 定义 术语定义： 效果图：由界面设计人员设计的页面效果图，综合了概要设计的业务需要和整个站点的 风格，它规定了页面布局上的每个细节。 容器：即HTML 标记的嵌套结构，如在表格->行->单元格内放置图片，那么可以认为 单元格是放置图片的容器。 样式表：即级联式样式表CSS，它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件：是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封 装的控件，或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。2. 界面设计规范细则 总体目标 以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统
100个交互设计原则
1. 用户界面应该基于用户的心理模型交互设计精髓中的设计原则 ，而不能基于实现模型；（需求，而不是 制作） 2. 用户不理解布尔逻辑．（用户更喜 欢图形化的东西，而不是数字） 3. 不要全盘复制机械时代产品的用户界面，而一定要按照信息时代的客观情况进行改良 ．（主次表现） 4. 重大改变必须是非常好的改变． 5. 没有人愿意停留在新手级别． 6. 为中间用户优化．（正态分布图） 7. 将用户想像成非常聪明但非常忙的人．（新手教程不能拖沓） 8. 每一个界面的设计关注点在于一个单独的首要人物角色．（每个界面对应一个当前使 用目标） 9. 在设计产品的＂如何＂行为之前，要先定义产品做＂什么＂．（目标需求决定） 10. 在设计的早期阶段，假设界面有魔术效应．（跳出框架去设计界面） 11. 绝对不要向利益关系人展现你不满意的设计方案，可能那正是他们喜欢的．（设计 的技巧，减少错误选项） 12. 用户体验只有一个，即形式和行为的设计必须相互和谐．（形式必须服从于功能） 13. 选择技术平台时，一定要与交互设计工作和谐一致．（不同平台，的交互支持） 14. 全屏幕使用独占应用，让它发挥最优效果． 15. 独占界面应该采用保守的视觉风格．（一般为常用界面，色彩不能以平和为主） 16. 独占式应用程序可使用丰富的输入． 17. 在独占应用中让文档视图最大化． 18. 暂时应用必须简单，清晰并且意思明确．（比如：新手帮助） 19. 暂时式应用程序只使用一个窗口和视图．（简单，清晰为主，不异有太多操作） 20. 运行暂时应用时，它应该处于上一次的位置和配置状态下．（记得用户的选择， 习惯） 21. 信息亭应该针对首次使用进行优化．（让用户知道自己在某个过程中的什么位置） 22. 不论你的界面多酷，越少越好． 23. 协调的用户界面是透明的．（界面上的内容协作） 24. 遵循用户的心理模型． 25. 少就是多．（焦点，关注点，使用度，实用性，如GOOGLE主页，每一个界面元 素都直观而有意义）； 26. 让用户直接操作产品，而不是强迫用户与产品讨论．（使用者而不是评论家）；
windows,用户体验交互设计规范
竭诚为您提供优质文档/双击可除windows,用户体验交互设计规范 篇一：用户体验和交互设计的重要性 用户体验和交互设计的重要性用户体验 (ue/ux--userexperience)的概念:是一种纯主观在用户使用产品过程中建立起来的感受，用户体验是围绕产品的一整套体验，包括跟其相关的设计、制作、生产、营销、售后以及技术支持等各个环节。知识说后来it行业迅猛发展，主要也是被这个群体当口号挂在嘴边，所以很多人简单的认为他就是it行业的一门学科。（针对我们it行业来说ui（视觉）和ue（人机交互）。 历史：用户体验这个词最早被广泛认知是在上世纪90年代，是由曾任苹果计算机公司先进技术部副总裁的唐纳德诺曼提出。其实至人类诞生以来人类都在为用户体验做着努力。有些东西一直都存在只是你没有去发现和关注和研究。（就像牛顿大哥发现的万有引力）。 交互设计（ue--userexperience)：指的是人机交互（狭隘的理解：人与带屏幕设备的的交流互动）就像你看到好多公司打出来的招聘信息一样“招聘
明白交互设计使整个用户体验设计的一部分。 ue/交互设计师”。 交互设计的重要性： 要了解交互设计的重要性我们先来了解一下交互设计 师都有些个什么工作的内容？ 产品需求：整理产品需求，整理需求（通常在这个环节你只是个配角或者杂工，等当了项目经理再轮得到）该文档是产品项目由“概念化”阶段进入到“图纸化”阶段的最主要的一个文档，其作用就是“对mRd中的内容进行指标化和技术化”，这个文档的质量好坏直接影响到研发部门是否能够明确产品的功能和性能。 产品需求文档(productRequirementdocument，pRd)的英文简称。是将商业需求文档（bRd）和市场需求文档（mRd）用更加专业的语言进行描述。 包含的内容大致有：产品概述（行业背景、通俗点说就是为什么要做这个产品）、用户调研/目标用户（给谁用他们为什么会用他们基于什么情况来用）、详细功能框架/流程（用户怎么用、有什么给他用）、产品目标（用了之后达到什么效果、能得到什么结果）、功能的特点/商业特点（这些功能都有什么特点怎么去达到我的商业目的）、硬件评估（基于什么硬件平台来用手持设备pad/手机又或者是pc和其它终端设备、这些设备有什么特点是否能满足相关条件，如成
交互设计规范
浅谈交互设计-交互设计规范 当产品规模大了之后就需要多个产品设计师协作完成整个产品，由于不同产品设计师之间的设计理念、设计方法、设计习惯的不同，协作完成的产品往往会导致产品一致性差，质量参差不齐。 这个时候会需要一份交互设计规范来规范和指导产品设计，从而保证产品设计的一致性，提升整体产品质量。 本文就来说一说交互设计规范应该包含的一些内容： 一、页面信息规范 页面信息规范主要指页面的静态信息应该遵循的规则，包括： 1.标题规范 用于规定整个产品中所有不同层级不同功能的页面应该使用的标题的规则。 2.新窗口链接规范 用于规定页面链接是采用新窗口打开还是本窗口打开的规则。 3.图片规范 用于规定图片信息是否带有alt title值，这些值又取自那里。 二、交互信息规范 交互提示规范主要用于规定在交互过程中交互的方式及其信息提示，包括： 1.预先信息提示 所有交互进行前需要提供充分给用户的预先应该知道的提示信息。 a.表单提交类 表单提交的步骤，每个表单项的要求需要给出提示信息。（如密码要多少多少位。搜索框鼓励输入什么内容。） b.谨慎类操作 一个操作对用户来说需要慎重操作的。如扣除金币等。需要预先提示。（如：扣除金币的操作需要预先提示扣除金币数目，以及当前金币是否足够。等等。） c.差异化规则 当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示。或者给出帮助链接。 2、操作信息提示 所有交互进行中需要提供操作相关的提示。
a.操作确认提示 一个操作涉及数据删除，等需要谨慎操作的操作需要给出删除确认提示框。 b.操作错误提示 当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入内容时提交） 3、结果信息提示 交互进行后给出结果反馈是应该给出适当的提示 a.查询类结果 任何信息列表、查询结果，当对应信息无结果的时候需要给出有无结果状态提示。 b.保存类结果 一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。 c.附加类结果 一个表单是对其他数据进行附加的，如评论等。提交成功后应直接跳转到操作产生的结果展示部分。（如提交评论后应该直接展示给用户他提交的评论） 三、通用控件规范 当有一些功能会被多个模块复用的时候（如标准评论框、标准好友选择器等），需要把这些功能提炼出来设计成通 用控件被多个模块共用。 有了页面信息规范、交互信息规范、通用控件规范就能保证页面信息的一致、交互方式及提示的一致、通用功能模块一致。从而保证产品的一致性，并提高产品质量。