用户视觉体验设计-布局.docx

用户视觉体验设计-布局“布局”是指窗口或页面内各内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的东西至关重要，并可产生具有吸引力的视觉外观。有效的布局可以使有的设计用户立即就可以理解，而有的设计却使用户觉得困惑而不知所措。设计理念视觉层次当窗口或页面的外观能够表明各个元素之间的关系和重要性时，即可认为是具有清晰的视觉层次。如果缺少视觉层次，用户就得靠他们自己来分辨它们之间的关系与重要性。 视觉层次是通过巧妙结合下列属性来实现的： 焦点。该布局指出用户首先要看的位置。流。当目光顺畅自然地沿着清晰的路径在界面上移动时，看到的用户界面（UI）元素即是适合其使用的顺序排列的。分组。在逻辑上相关的 UI 元素之间具有清晰的视觉关系。相关的项被组合在一起，不相关的项则被分开。强调。根据 UI 元素的相对重要程度进行强调。对齐。UI 元素并列排放，使其便于扫视并依次呈现。另外，有效的布局还具有下列特性： 设备无关性。布局的呈现应当与字型、字体大小、分辨率（DPI）、显示器或显卡无关。易于扫视。用户可以只扫一眼就找到他们要的内容。高效性。那些尺寸较大的 UI 元素就应该这么大，而小的元素也能照样很好地使用。尺寸可缩放性。如果有用的话，窗口尺寸可以缩放，而无论界面的尺寸多大或者多小，其内容的布局都能够保持有效。平衡。内容匀称地分布在界面上。视觉简洁性。这是说布局不要比它所应有的更复杂。用户不会觉得布局的外观复杂得让人头晕。一致性。类似的窗口或页面应当使用类似的布局，这样用户总能熟悉自己所处的环境。虽然尺寸、间距和位置等概念非常简单，但在布局中正确混合使用这些属性却不是一件容易的事情。 布局是用对话框单位（DLU）这样的设备无关度量单位和相对像素来描述的。关于布局度量单位、测量及换算的更多信息，请参考布局度量单位。 阅读设计模型用户是通过内容的外观和组织形式来选择要阅读的内容的。要创建有效的布局，你需要理解什么是用户经常阅读的以及为什么如此。 你可以在决定如何布局时参考阅读设计模型： 人们以从左向右、自上而下的顺序阅读的（在西方文化中）。阅读分为两种模式：沉浸式阅读（immersive reading）和浏览（scanning）。沉浸式阅读的目的在于理解。该图所示的是沉浸式阅读模式。相反，浏览的目标则是定位。一般的浏览路径看起来像是：该图所示的是浏览模式。如果文本排列在页面的左侧，则用户会先浏览左侧。使用软件时，用户不会沉浸于 UI 本身，而是沉浸于他们的工作中。因此，用户不会真正阅读界面上的文本——他们只会浏览。他们只会在确信必要的时候才会仔细阅读大量文本。用户通常会跳过页面左侧或右侧的导航部分。用户能够认出它们在那里，但仅当他们想进行导航时才去看导航部分。用户通常会跳过大块无格式的文本而完全不去阅读。用户在浏览时通常会跳过大块文本及导航部分。一切都等价时，用户首先从窗口的左上角看起，扫过整个页面，到右下角结束。他们通常会忽略左下角。一切都等价时，用户会以 1、2、4、3 的顺序阅读这些数字。但在交互式 UI 中，并非所有的一切都是等价的，因此不同的 UI 元素所受到的关注程度也是不同的。用户通常会首先看交互式控件——尤其是出现在窗口左上角和中间的控件——以及显著的文本。用户关注于主要的交互式控件及显著的主标题说明，其他东西只有在他们需要的时候才会去看。用户倾向于阅读交互式控件标签，尤其是那些看起来和完成手头任务相关的。相反，用户仅在他们认为需要的时候才有可能去阅读静态文本。看上去不同的内容容易吸引注意力。粗体文本和大号文本能够从普通文本中突显出来。彩色的或者是位于彩色背景上的用户界面元素较为突出。有图标比没有图标更加突出。除非确实需要，否则用户不会进行滚动。如果没有理由来滚动倒金字塔结构的内容，用户则不会。一旦用户决定要做什么，他们会立即停止扫视文本转而做事。由于用户会在他们认为结束的时候停止扫视，因此他们可能会忽略所有在完成点之后出现的东西。用户会在他们认为结束的时候停止扫视。当然，常规模式也存在例外。眼动仪实验指出，真实用户的行为很没有规律。此模式的目的在于帮助你做出好的决定，而不是精确地描述用户的行为。但既然你已经阅读了该列表，希望你也能辩别出许多你自己的阅读模式。为扫视进行设计用户并不阅读，他们只是扫视——因此你应当为视扫来设计用户界面。不要假设用户会像书写那样从左至右、从上到下地阅读文本，事实上他们会看那些吸引他们注意的 UI 元素。 要为扫视进行设计： 假设用户先是会快速地扫一眼整个窗口，然后大致会按下面的顺序来阅读 UI 文本：中间的交互控件提交按钮其他地方的交互控件主标题说明补充解释带有警告图标的文本窗口标题正文区域的其他静态文本脚注将用于触发任务的 UI 元素放在左上角或上方中间。将用于完成任务的 UI 元素