UED 用户体验设计规范 全局设定——布局 什么是布局? “布局”是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的内容至关重要,并可以在结构外观上令用户感到舒服。 如何设计有效的布局? • 具有清晰的视觉层次:布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使用下列属性来实现视觉层次 焦点:指用户首先关注的区域。形式上被赋予焦点属性的U I 元素一定要表达重要的内容。 视觉流:指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。 关联:在逻辑上相关的U I 元素应具有清晰的视觉关系。 错误: 逻辑上相关的U I 元素在空间上被分隔,且没有明显的视觉关联。 对齐:使页面工整,信息呈现有序,便于用户扫视。 错误: 没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。 强调:可以根据 UI 元素间的相对重要程度进行强调。 • 针对用户的阅读模式来设计布局:大部分人的阅读习惯是从左向右,至上而下。阅读分为沉浸式阅读(immers iv e reading)和扫视(s canning),前者的目的在于理解,后者在于定位。 浏览网站时,用户不会沉浸在 UI 本身,而是沉浸在他们的目标任务中,因此扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。 针对扫视的布局设计可以适当强调主要的 UI 元素,弱化次要的。包括: 1. 将主 UI 元素放在扫视路径上。 2. 避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。 3. 考虑使用渐进展开方式来隐藏次要的 UI 元素。 4. 将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签,而不是辅助型的静态文本。 错误: 用户必须阅读辅助型文本后才能明确“确定”按钮的作用。 正确: 直接将按钮的作用描述作为控件标签,便于用户理解。 不要展示大段文本,去除不必要的文本。多文本时格式化展示。 注:常规模式也存在例外。眼动议实验指出,真实用户的行为很没有规律。此模式的目的在于帮助你做出更好的决定,而不是精准的描述用户行为。 • 合理利用页面空间 1. 保持页面的视觉平衡。避免拥挤和对空间的浪费。 2. 确保关键数据没有被截断,除非数据特别长。 错误: 有效空间没有被充分利用,从而导致多条关键数据被截断。 3. 控...