《Microsoft交互设计规范》由会员分享，可在线阅读，更多相关《Microsoft交互设计规范（26页珍藏版）》请在金锄头文库上搜索。
1、Windows用户体验交互设计规范此官方也Win dows用户体验交互设计规范（简称“ UX规范”）的目标在于:为所有基于Windows的应用程序划定高品质与一致性的基准。 回答关于用户体验的问题。使你的工作更为轻松！设计原则?Win dows用户体验设计原则?最容易犯的错误?如何设计优秀的用户体验?简约而又强大（20.3%）?使用WPF进行设计（29.4%）控件控件列表气球状提示复选框命令按钮命令按钮vs链接命令链接下拉列表框与组合框分组框链接列表框列表视图进度条渐进展开控件选项按钮搜索框 滑块 微调控件 状态栏 选项卡 文本框工具提示与信息提示 树形视图命令o设计规范(40.8%)o? o
2、 o o o o o? o o o o o o菜单设计理念(34%)工具栏设计理念使用模式设计规范推荐尺寸与间距 标签 文档编写功能区(Ribbon)设计理念(35.7%)设计规范(8.7%) 标签(25.1%) 文档编写功能区设计流程(15.2%) 程序命令模式(42.9%)文本用户界面文本风格与语气消息设计理念使用模式设计规范(31.3%)o o o o o错误信息文本(11.7%)文档编写警告信息设计理念(25.9%)使用模式 设计规范 文本 文档编写确认信息设计理念(50.3%)使用模式o文本o文档编写? 通知交互键盘键盘快捷键(0%) 鼠标与指针触摸(11.6%)手写笔(19.3%)
3、无障碍访问(辅助特性)(3.5%)窗口窗口管理对话框(51.8%)对话框设计理念(19.5%)对话框使用模式(27.1%) 通用对话框向导属性窗口 (5.3%)属性窗口设计理念(13.4%)属性窗口使用模式(35.3%) 控制面板(10.0%)控制面板使用模式(49.8%)视觉布局布局度量单位窗口边框字体(Segoe UI)颜色图标标准图标(26.5%)动画与过渡NEWo o o o设计理念(11.2%)使用模式(33.5%)设计规范(13.1%) 文档编写(0%) 图形元素(18.7%)声音(13.2%)体验软件品牌宣传安装 NEW(0%)首次体验(47.3%) 打印(31.4%)Win d
4、ows 环境桌面(72.3%)开始菜单(16.7%)任务栏(49.5%)通知区域(33.5%)Windows桌面小工具(10.5%)帮助(8.4%)用户帐户控制(11.5%)其他文档特点及翻译风格指南Win dows User Experie nee In teracti on Guideli nes原文注释与引用1. A这里“官方”是原文的直接翻译，并不表示此中文译本经过微软官方任何形式 的授权或认证。布局 Layout目录隐藏1设计理念1.1视觉层次1.2阅读设计模型1.3为扫视进行设计o1.4有效利用屏幕空间o1.5控件尺寸o1.6间距o1.7可缩放窗口o1.8隹占八、八、o1.9流程o
5、1.10分组o1.11对齐o1.12水平对齐?1.12.1 左对齐?1.12.2 右对齐?1.12.3 居中对齐o1.13垂直居中?1.13.1元素顶端?1.13.2文本基线o1.14标签对齐?1.14.1标签在控件上方左对齐?1.14.2标签在控件左侧左对齐?1.14.3标签在控件左侧左对齐，控件的左侧错开排列?1.14.4标签在控件左侧右对齐o1.15平衡o1.16网格o1.17视觉简洁?2设计规范o2.1屏幕分辨率及DPIo2.2窗口尺寸o2.3控件尺寸o2.4控件间距o2.5位置o2.6隹占八、八、o2.7对齐o2.8无障碍访问特性?3推荐尺寸与间距“布局”是指窗口或页面内各内容的尺寸
6、、间距及位置。有效的布局对于帮助用户快速找到他们想要的东西至关重要,并可产生具有吸引力的视觉外观。有效的布局可以使有的设计用户立即就可以理解，而有的设计却使用户觉得困惑而 不知所措。注：与窗口管理相关的设计规范请参考各自相应的章节。特定控件的推荐尺寸与间距则请参考相应的设计规范章节。设计理念视觉层次当窗口或页面的外观能够表明各个元素之间的关系和重要性时, 用户就得靠他们自己来分辨它们之间的关系与重要性。即可认为是具有清晰的视觉层次。如果缺少视觉层次,视觉层次是通过巧妙结合下列属性来实现的:?焦点。该布局指岀用户首先要看的位置。流。当目光顺畅自然地沿着清晰的路径在界面上移动时，看到的用户界面（U
7、I）元素即是适合其使用的顺序排列的。?分组。在逻辑上相关的UI元素之间具有清晰的视觉关系。相关的项被组合在一起，不相关的项则被分开。强调。根据UI元素的相对重要程度进行强调。对齐。UI元素并列排放，使其便于扫视并依次呈现。另外，有效的布局还具有下列特性:?设备无关性。布局的呈现应当与字型、字体大小、分辨率（DPI）、显示器或显卡无关。?易于扫视。用户可以只扫一眼就找到他们要的内容。?高效性。那些尺寸较大的UI元素就应该这么大，而小的元素也能照样很好地使用。?尺寸可缩放性。如果有用的话，窗口尺寸可以缩放，而无论界面的尺寸多大或者多小，其内容的布局都能够保持有效。?平衡。内容匀称地分布在界面上。?
8、视觉简洁性。这是说布局不要比它所应有的更复杂。用户不会觉得布局的外观复杂得让人头晕。?一致性。类似的窗口或页面应当使用类似的布局，这样用户总能熟悉自己所处的环境。虽然尺寸、间距和位置等概念非常简单，但在布局中正确混合使用这些属性却不是一件容易的事情。在Microsoft? Windows?中，布局是用对话框单位（DLL）这样的设备无关度量单位和相对像素来描述的。关于布局度量单位、测量及换算的更多信息，请参考布局度量单位。阅读设计模型用户是通过内容的外观和组织形式来选择要阅读的内容的。要创建有效的布局，你需要理解什么是用户经常阅读的以及为什么如此。你可以在决定如何布局时参考阅读设计模型：?人们以
9、从左向右、自上而下的顺序阅读的（在西方文化中） 。?阅读分为两种模式：沉浸式阅读（immersive reading ）和浏览（scanning ）。沉浸式阅读的目的在于理解该图所示的是沉浸式阅读模式。相反，浏览的目标则是定位。一般的浏览路径看起来像是：该图所示的是浏览模式。如果文本排列在页面的左侧，则用户会先浏览左侧。?使用软件时，用户不会沉浸于UI本身，而是沉浸于他们的工作中。因此，用户不会真正阅读界面上的文本他们只会浏览。他们只会在确信必要的时候才会仔细阅读大量文本。用户通常会跳过页面左侧或右侧的导航部分。用户能够认岀它们在那里，但仅当他们想进行导航时才去看导航部分。?用户通常会跳过大块
10、无格式的文本而完全不去阅读。用户在浏览时通常会跳过大块文本及导航部分。?一切都等价时，用户首先从窗口的左上角看起，扫过整个页面，到右下角结束。他们通常会忽略左下角。一切都等价时，用户会以 1、2、4、3的顺序阅读这些数字。?但在交互式UI中，并非所有的一切都是等价的，因此不同的UI元素所受到的关注程度也是不同的。用户通常会首先看交互式控件一一尤其是岀现在窗口左上角和中间的控件一一以及显着的文本。用户关注于主要的交互式控件及显着的主标题说明，其他东西只有在他们需要的时候才会去看。?用户倾向于阅读交互式控件标签，尤其是那些看起来和完成手头任务相关的。相反，用户仅在他们认为需要的时候才有可能去阅读静
11、态文本。?看上去不同的内容容易吸引注意力。粗体文本和大号文本能够从普通文本中突显岀来。彩色的或者是位于彩色背景上的用户界面元素较为突岀。有图标比没有图标更加突岀。?除非确实需要，否则用户不会进行滚动。如果没有理由来滚动倒金字塔结构 的内容，用户则不会。?一旦用户决定要做什么，他们会立即停止扫视文本转而做事。?由于用户会在他们认为结束的时候停止扫视，因此他们可能会忽略所有在完成点之后出现的东西。用户会在他们认为结束的时候停止扫视。当然，常规模式也存在例外。眼动仪实验指岀，真实用户的行为很没有规律。 此模式的目的在于帮助你做岀好的决定， 而不是精确地描述用户的行为。但既然你已经阅读了该列表，希望你
12、也能辩别出许多你自己的阅读模式。为扫视进行设计用户并不阅读，他们只是扫视一一因此你应当为视扫来设计用户界面。不要假设用户会像书写那样从左至右、从上到下地阅读文本，事实上他们会看那些吸引他们注意的UI元素。要为扫视进行设计：?假设用户先是会快速地扫一眼整个窗口，然后大致会按下面的顺序来阅读UI文本：1.中间的交互控件2.提交按钮3.其他地方的交互控件4.主标题说明5.补充解释6.带有警告图标的文本7.窗口标题8.正文区域的其他静态文本9.脚注?将用于触发任务的 UI元素放在左上角或上方中间。?将用于完成任务的 UI元素放在右下角。?尽可能将重要的文本放在交互性控件上，而非使用静态文本。?避免将重
13、要信息放在左下角或是需要滚动很多的控件或页面底端。?不要展示大段文本。去除不必要的文本。使用倒金字塔的呈现方式。?如果想吸引用户的注意，确保其理由充分。尽可能使用这个模式而不要进行改变，但有时你可能需要强调或弱化某些UI要强调主要的UI元素：元素。将主UI元素放在扫视路径上。将任何触发任务的 UI放在左上角或上方中间。将提交按钮放在右下角。将其他主要的UI放在中间。使用控件来引起注意，比如命令按钮、命令链接和图标。使用显着的文本，包括大字体和粗体。将用户必须阅读的文本放在交互式控件上，或者附加图标，或者放在 使用位于浅色背景上的深色文本。在元素周围留有足够的空白。不需要任何操作就应当可以看到你要强调的元素，比如指向或悬停。横幅上该示例显示了强调主要 UI元素的多种方式。要弱化次要的UI元素：?将次要的UI元素放在扫视路径之外。?将任何用户并不经常需要看到的内容放在窗口左下角或底部。?使用不会吸引注意力的控件，比如用任务链接代替命令按钮。?使用正常或灰色的文本。?使用位于深色背景上的浅色文本。深灰或蓝色背景上的白色文本也可以。?在元素周围使用最小间距。?考虑使用渐进展开方式来隐藏次要的 UI元素。该示例显示了多种弱化次要UI元素的方式。有效利用屏幕空间要有效利用屏幕空间，需要对多种因素进行平衡：占用太多空间使窗口显得臃肿且浪费，以及基于 会难以使用。费茨法则来说甚至
