Microsoft交互设计规范.docx

页眉内容Windows用户体验交互设计规范此官方叱Windows用户体验交互设计规范(简称“ UX规范”)的目标在于:? 为所有基于Windows的应用程序划定高品质与一致性的基准 回答关于用户体验的问题 使你的工作更为轻松！设计原则? Windows用户体验设计原则? 最容易犯的错忒? 如何设计优秀的用户体验? 简约而又强大(20.3%)? 使用 WPF进行设计(29.4%)控件控件列表气球状提示复选框命令按钮命令按钮vs锌接命令链接下拉列表框与组合框分组框链接 列表框 列表视图 进度条渐进展开控件 选项按钮 搜索框 滑块微调控件状态栏选项卡文本框工具提示与信息提示 树形视佟命令o ?o o o o o o ?o o o o o oo o o o o ?o o o o菜单设计理念(34%)工具栏设计理念使用模式设计规范推荐尺寸与间距标签文档编写功能区(Ribbon)设计理念(35.7%)设计规范(8.7%)标签(25.1%)文档编写功能区设计流程(15.2%)程序命令模式(42.9%)文本? 用户界面文本? 风格与语气消息错误信息设计理念使用模式设计规范(31.3%)文本(11.7%)文档编写警告信息设计理念(25.9%)使用模式设计规范文本o 文档编写? 确认信息o 设计理念(50.3%)o 使用模式o 设计规范(40.8%)oo? 通知文本文档编写交互窗口键盘键盘快捷键(0%)鼠标与指针触摸(11.6%)手写笔(19.3%)无障碍访问(辅助特性)(3.5%)窗口管理对话框(51.8%)对话框设计理念(19.5%)对话框使用模式(27.1%)通用对话框向导属性窗口 (5.3%)属性窗口设计理念(13.4%)属性窗口使用模式(35.3%)控制面板(10.0%)控制面板使用模式(49.8%)视觉布局布局度量单位窗口边框字体(Segoe UI)颜色标准图标(26.5%)动画与过渡 NEWoooo设计理念(11.2%)使用模式(33.5%)设计规范(13.1%) 文档编写(0%) 图形元素(18.7%)? 3 (13.2%)体验? 软件品牌宣传? " NEW(0%)? 首次体验(47.3%)? (31.4%)Windows 环境? (72.3%)? 开始菜单(16.7%)? 任务栏(49.5%)? 通知区域(33.5%)? Windows桌面小工具(10.5%)? 都助.(8.4%)? 用户帐户控制(11.5%)其他? 文档特点及翻译风格指南? 《Windows User Experience Interaction Guidelines 》原文注释与引用1. 立这里“官方”是原文的直接翻译，并不表示此中文译本经过微软官方任何形 式的授权或认证。

布局 Layout目录［隐藏］? 1设计理念o 1.1视觉层次o 1.2阅读设计模型o 1.3为扫视进行设计o o o o oo oo o1.4 有效利用屏幕空间1.5 控件尺寸1.6 间距1.7 可缩放窗口1.8 焦点1.9 流程1.10 分组1.11 对齐1.12 水平对齐1.12.1 左对齐1.12.2 右对齐1.12.3 居中对齐1.13 垂直居中1.13.1 元素顶端1.13.2 文本基线1.14 标签对齐1.14.1 标签在控件上方左对齐1.14.2 标签在控件左侧左对齐1.14.3 标签在控件左侧左对齐，控件的左侧错开排列1.14.4 标签在控件左侧右对齐1.15 平衡1.16 网格1.17 视觉简洁2设计规范o 2.1屏幕分到^率及 DPIo 2.2窗口尺寸o 2.3控件尺寸o 2.4控件间距o 2.5位置o 2.6焦点o 2.7对齐o 2.8无障碍访问特性3推荐尺寸与间距“布局”是指窗口或页面内各内容的尺寸、间距及位置有效的布局对于帮助用户快速找到他们想要的东西至关 重要，并可产生具有吸引力的视觉外观有效的布局可以使有的设计用户立即就可以理解，而有的设计却使用户 觉得困惑而不知所措。

注：与窗口管理相关的设计规范请参考各自相应的章节特定控件的推荐尺寸与间距则请参考相应的设计规范章 节设计理念视觉层次当窗口或页面的外观能够表明各个元素之间的关系和重要性时，即可认为是具有清晰的视觉层次如果缺少视觉 层次，用户就得靠他们自己来分辨它们之间的关系与重要性视觉层次是通过巧妙结合下列属性来实现的：? 焦点该布局指出用户首先要看的位置当目光顺畅自然地沿着清晰的路径在界面上移动时，看到的用户界面（ UI）元素即是适合其使用的顺序排列的在逻辑上相关的 UI元素之间具有清晰的视觉关系相关的项被组合在一起，不相关的项则被分开根据UI元素的相对重要程度进行强调UI元素并列排放，使其便于扫视并依次呈现另外，有效的布局还具有下列特性：? 设备无关性布局的呈现应当与字型、字体大小、分辨率（ DPD、显示器或显卡无关 易于扫视用户可以只扫一眼就找到他们要的内容 高效性那些尺寸较大的 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元素的方式有效利用屏幕空间要有效利用屏幕空间，需要对多种因素进行平衡：占用太多空间使窗口显得臃肿且浪费，以及基于 费茨法则来说甚至会难以使用。

错误:在这个示例中，窗口相对于其内容来说太大了另一方面，使用太少空间会使窗口显得狭小、不适、有压迫感，而且难以使用一一如果需要滚动或其他。