发布时间 : 星期四 文章Microsoft 交互设计规范更新完毕开始阅读969b386c66ec102de2bd960590c69ec3d4bbdb71
布局 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
1 设计理念
1.1 视觉层次 1.2 阅读设计模型 1.3 为扫视进行设计 1.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 设计规范
2.1 屏幕分辨率及 DPI 2.2 窗口尺寸 2.3 控件尺寸 2.4 控件间距 2.5 位置 2.6 焦点 2.7 对齐
2.8 无障碍访问特性
? 3 推荐尺寸与间距
“布局”是指窗口或页面内各内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的东西至关重要，并可产生具有吸引力的视觉外观。有效的布局可以使有的设计用户立即就可以理解，而有的设计却使用户觉得困惑而不知所措。
注：与窗口管理相关的设计规范请参考各自相应的章节。特定控件的推荐尺寸与间距则请参考相应的设计规范章节。
设计理念
视觉层次
当窗口或页面的外观能够表明各个元素之间的关系和重要性时，即可认为是具有清晰的视觉层次。如果缺少视觉层次，用户就得靠他们自己来分辨它们之间的关系与重要性。 视觉层次是通过巧妙结合下列属性来实现的：
? ? ?
开。
焦点。该布局指出用户首先要看的位置。
流。当目光顺畅自然地沿着清晰的路径在界面上移动时，看到的用户界面（UI）元素即是适合其使用的分组。在逻辑上相关的 UI 元素之间具有清晰的视觉关系。相关的项被组合在一起，不相关的项则被分强调。根据 UI 元素的相对重要程度进行强调。 对齐。UI 元素并列排放，使其便于扫视并依次呈现。
顺序排列的。
? ?
另外，有效的布局还具有下列特性：
? ? ? ? ? ? ?
设备无关性。布局的呈现应当与字型、字体大小、分辨率（DPI）、显示器或显卡无关。 易于扫视。用户可以只扫一眼就找到他们要的内容。
高效性。那些尺寸较大的 UI 元素就应该这么大，而小的元素也能照样很好地使用。
尺寸可缩放性。如果有用的话，窗口尺寸可以缩放，而无论界面的尺寸多大或者多小，其内容的布局都平衡。内容匀称地分布在界面上。
视觉简洁性。这是说布局不要比它所应有的更复杂。用户不会觉得布局的外观复杂得让人头晕。 一致性。类似的窗口或页面应当使用类似的布局，这样用户总能熟悉自己所处的环境。
能够保持有效。
虽然尺寸、间距和位置等概念非常简单，但在布局中正确混合使用这些属性却不是一件容易的事情。
在 Microsoft? Windows? 中，布局是用对话框单位（DLU）这样的设备无关度量单位和相对像素来描述的。关于布局度量单位、测量及换算的更多信息，请参考布局度量单位。
阅读设计模型
用户是通过内容的外观和组织形式来选择要阅读的内容的。要创建有效的布局，你需要理解什么是用户经常阅读的以及为什么如此。
你可以在决定如何布局时参考阅读设计模型：
? ?
人们以从左向右、自上而下的顺序阅读的（在西方文化中）。
阅读分为两种模式：沉浸式阅读（immersive reading）和浏览（scanning）。沉浸式阅读的目的在于理解。
该图所示的是沉浸式阅读模式。
相反，浏览的目标则是定位。一般的浏览路径看起来像是：
该图所示的是浏览模式。
如果文本排列在页面的左侧，则用户会先浏览左侧。
? ? ?
使用软件时，用户不会沉浸于 UI 本身，而是沉浸于他们的工作中。因此，用户不会真正阅读界面上的用户通常会跳过页面左侧或右侧的导航部分。用户能够认出它们在那里，但仅当他们想进行导航时才去用户通常会跳过大块无格式的文本而完全不去阅读。
文本——他们只会浏览。他们只会在确信必要的时候才会仔细阅读大量文本。 看导航部分。
用户在浏览时通常会跳过大块文本及导航部分。
? 一切都等价时，用户首先从窗口的左上角看起，扫过整个页面，到右下角结束。他们通常会忽略左下角。
一切都等价时，用户会以 1、2、4、3 的顺序阅读这些数字。
? 但在交互式 UI 中，并非所有的一切都是等价的，因此不同的 UI 元素所受到的关注程度也是不同的。
用户通常会首先看交互式控件——尤其是出现在窗口左上角和中间的控件——以及显著的文本。