文档介绍：ui设计指南-布局篇
2009年11月11日，星期三|目录：转载|标签：，设计指南
说到Ui设计就不得不提一个重要的因素-，一个恰到好处的的布局能使页面内容变得工整，提高用户的视觉感受，也可以帮助用户快速的找到他ui设计指南-布局篇
2009年11月11日，星期三|目录：转载|标签：，设计指南
说到Ui设计就不得不提一个重要的因素-，一个恰到好处的的布局能使页面内容变得工整，提高用户的视觉感受，也可以帮助用户快速的找到他们想要得到的内容，提高工作效率.
什么是布局？
“布局”是指页面内容的尺寸、间距及位置。有效的布局对于帮助用户快速找到他们想要的内容至关重要，并可以在结构外观上令用户感到舒服。
如何设计有效的布局？
。布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使用下列属性来实现视觉层次：
•焦点：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。
•视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览****惯来设计恰当的视觉流。好的视觉流应该清晰、合理、顺畅、自然。
•关联：在逻辑上相关的UI元素应具有清晰的视觉关系。
错误：
逻辑上相关的UI元素在空间上被分隔，且没有明显的视觉关联。
•对齐：使页面工整，信息呈现有序，便于用户扫视。
错误：
业设备加工
工
钢材加工
102660
朋怖加工
100012
交通工具
98663
农业加工
96524
女装加工
92566
in工市场热点
分类
•进入
专柜品£春装热寻
产品类目》更參
匸/服怖/女装/男装F童装F鞋/没有对齐影响了页面效果且不便于用户扫视。不要因为功能需要和对极限情况的顾虑而轻易牺牲掉页面的视觉展现。
强调：可以根据UI元素间的相对重要程度进行强调。
针对用户的阅读模式来设计布局。
大部分人的阅读****惯是从左向右，至上而下。
阅读分为沉浸式阅读(immersivereading)和扫视(scanning)，前者的目的在于理解，后者在于定位。
•浏览网站时，用户不会沉浸在UI本身，而是沉浸在他们的目标任务中，因此扫视是最常使用的阅读模式。用户只在确信必要时才仔细阅读大量文本。
•针对扫视的布局设计可以适当强调主要的UI元素，弱化次要的。包括：
1）将主UI元素放在扫视路径上。
2）避免将重要信息放在左下角或者页面底端或者需要滚动很多的控件上。
3）考虑使用渐进展开方式来隐藏次要的UI元素。
4）将任务相关的重要信息要直接表现在控件上。用户更倾向于关注交互控件上的标签，而不是辅助型的静态文本。
错误：
用户必须阅读辅助型文本后才能明确“确定”按钮的作用。
正确：
直接将按钮的作用描述作为控件标签，便于用户理解。
5）不要展示大段文本，去除不必要的文本。多文本时格式化展示。
注：常规模式也存在例外。眼动议实验指出，真实用户的行为很没有规律。此模式的目的在于帮助你做出更好的决定，而不是精准的描述用户行为。
合理利用页面空间。
•保持页面的视觉平衡。避免拥挤和对空间的浪费。
•确保关键数据没有被截断，除非数据特别长。
错误：
所在