界面设计中页面元素的布局课件.ppt

1、界面设计中的页面元素的布局博客设计组：非非界面设计中页面元素的布局l视觉层次：视觉流：分组和对齐：重要程度区分接下来做什么？谁和谁在一起视觉层次:重要程度区分l解释：重要程度区分，用户能从页面的布局推导出它的信息结构。重要的内容应该最突出,不重要的次之。标题、二级内容、注释等看起来就是他们本身，不为用户带来任何疑问。案例：没有视觉层次案例：带空白的文本案例：排版和对齐方式关于视觉结构层次的小结l左上角优先：空白：字体对比：前景色和背景色的对比：位置、对齐、缩进：图形轮廓：其他（标题、列表、导航条、动作按钮等）我们的语言习惯是，从左到右，从上到下。条理清晰，组的形式来呈现内容。大小粗细颜色等的对

2、比，表达信息的重要程度。颜色对比可以进一步的突出内容。从属关系更清晰，结构明白。整体感增强。设计中我们遇到的问题l视线首先落在什么地方？那个设计元素在第一时间吸引了用户的注意力？用户第一时间注意到的东西与它们的（或你的）目标是背盗而驰？它对于战略目标上来讲是很重要的东西吗？好的视觉引导l是一条流畅的路径，设计能顺利地引导用户在页面上移动 能“干扰”用户的视线，为用户提供有效选择的、某种可能的“引导”，支持用户试图去完成它们的目标和任务。我们需要。视觉流：接下来我该看什么l解释：在读者扫描页面的时候跟踪读者的视线。建立流：视觉流的牵制因素：.阅读习惯。.用户的页面目的。在页面上通过焦点引导用户。

3、焦点：眼睛不能地址的地方。案例：焦点和视觉流案例：焦点和视觉流如何建立焦点 对比：颜色、高度、字体的粗细等。如何建立焦点 带有指示性的图片：箭头、清晰的轮廓、表情和动作、汇聚的线条等。视觉层次结构和视觉流关于视觉流的小结 从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是那些次之的。对页面内容的理解会随着用户选择看哪一部分而改变。分组和对齐：谁和谁一起 解释：对于形成清晰的视觉层次结构是很必要的，分组和对齐意味着页面元素之间互相关联。作用：通过分组和对齐把用户的视线从一组元素引到另外一组，从而来完成引导，帮助形成视觉流。牵制因素：.视觉习惯，放在一起的东西，我们就会觉得有

4、关联。.空白，足够的空间距离，让元素在逻辑上不相关。如何建立：轮廓和线条、间隔（空白）、对比等。关于分组和对齐的小结 分组和对齐描述的是布局属性；相邻性:小贴士：层级变多之后，分组的难度会加大，单纯依靠分住是不能满足需求，分组和对齐同时使用便于表达复杂的层级关系。相似性:连续性:封闭性:摆在一起的东西，用户就会把他们联系起来。两个元素属性向同，比如颜色大小形状方向等。有规律的重复，对齐或者小的元素组。闭合的区域，大块的留白。整合起来：1.视觉层次机构整合起来：2.视觉流 对页面内容的理解会随着用户选择看哪一部分而改变。强烈的焦点会首先吸引眼球，然后才是那些次之的。整合起来：3.分组合对齐总结 视觉层次结构、视觉流、焦点、分组合对齐，这些都是页面布局的基本手段。设计师可以通过这些有效的视觉手段，来吸引或分散用户的注意力，形成视觉引导，支持用户试图去完成它们的目标和任务。利用用户的心智和习惯，以及我们掌握的视觉手段，更好的完成界面设计。分享结束，感谢大家支持！