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

1、界面设计中的页面元素的布局博客设计组：非非界面设计中的页面元素的布局博客设计组：非非界面设计中页面元素的布局视觉层次：视觉流：分组和对齐：重要程度区分接下来做什么？谁和谁在一起界面设计中页面元素的布局视觉层次：视觉流：分组和对齐：重要程视觉层次:重要程度区分解释：重要程度区分，用户能从页面的布局推导出它的信息结构。重要的内容应该最突出,不重要的次之。 标题、二级内容、注释等看起来就是他们本身，不为用户带来任何疑问。视觉层次:重要程度区分解释：重要程度区分，用户能从页面的布局案例：没有视觉层次案例：没有视觉层次界面设计中页面元素的布局课件案例：带空白的文本案例：带空白的文本案例：排版和对齐方式案

2、例：排版和对齐方式界面设计中页面元素的布局课件关于视觉结构层次的小结左上角优先：空白：字体对比：前景色和背景色的对比：位置、对齐、缩进：图形轮廓：其他（标题、列表、导航条、动作按钮等）我们的语言习惯是，从左到右，从上到下。条理清晰，组的形式来呈现内容。大小粗细颜色等的对比，表达信息的重要程度。颜色对比可以进一步的突出内容。从属关系更清晰，结构明白。整体感增强。关于视觉结构层次的小结左上角优先：空白：字体对比：前景色和背界面设计中页面元素的布局课件界面设计中页面元素的布局课件设计中我们遇到的问题视线首先落在什么地方？那个设计元素在第一时间吸引了用户的注意力？用户第一时间注意到的东西与它们的（或你

3、的）目标是背盗而驰？它对于战略目标上来讲是很重要的东西吗？设计中我们遇到的问题视线首先落在什么地方？那个设计元素在第一好的视觉引导是一条流畅的路径，设计能顺利地引导用户在页面上移动能“干扰”用户的视线，为用户提供有效选择的、某种可能的“引导”，支持用户试图去完成它们的目标和任务。我们需要。好的视觉引导是一条流畅的路径，设计能顺利地引导用户在页面上移视觉流：接下来我该看什么解释：在读者扫描页面的时候跟踪读者的视线。建立流：视觉流的牵制因素：. 阅读习惯。 . 用户的页面目的。在页面上通过焦点引导用户。焦点：眼睛不能地址的地方。视觉流：接下来我该看什么解释：在读者扫描页面的时候跟踪读者的案例：焦点

4、和视觉流案例：焦点和视觉流案例：焦点和视觉流案例：焦点和视觉流如何建立焦点对比：颜色、高度、字体的粗细等。如何建立焦点对比：颜色、高度、字体的粗细等。如何建立焦点带有指示性的图片：箭头、清晰的轮廓、表情和动作、汇聚的线条等。如何建立焦点带有指示性的图片：箭头、清晰的轮廓、表情和动作、视觉层次结构和视觉流视觉层次结构和视觉流关于视觉流的小结从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是那些次之的。对页面内容的理解会随着用户选择看哪一部分而改变。关于视觉流的小结从上到下，从左到右是默认的视觉流方向。强烈的分组和对齐：谁和谁一起解释：对于形成清晰的视觉层次结构是很必要的，分

5、组和对齐意味着页面元素之间互相关联。作用：通过分组和对齐把用户的视线从一组元素引到另外一组，从而来完成引导，帮助形成视觉流。牵制因素：.视觉习惯，放在一起的东西，我们就会觉得有关联。.空白，足够的空间距离，让元素在逻辑上不相关。如何建立：轮廓和线条、间隔（空白）、对比等。分组和对齐：谁和谁一起解释：对于形成清晰的视觉层次结构是很必关于分组和对齐的小结分组和对齐描述的是布局属性；相邻性:小贴士：层级变多之后，分组的难度会加大，单纯依靠分住是不能满足需求，分组和对齐同时使用便于表达复杂的层级关系。 相似性: 连续性: 封闭性:摆在一起的东西，用户就会把他们联系起来。两个元素属性向同，比如颜色大小形

6、状方向等。有规律的重复，对齐或者小的元素组。闭合的区域，大块的留白。关于分组和对齐的小结分组和对齐描述的是布局属性；相邻性:小贴界面设计中页面元素的布局课件界面设计中页面元素的布局课件整合起来：1.视觉层次机构整合起来：1.视觉层次机构整合起来：2.视觉流对页面内容的理解会随着用户选择看哪一部分而改变。强烈的焦点会首先吸引眼球，然后才是那些次之的。整合起来：2.视觉流对页面内容的理解会随着用户选择看哪一部分整合起来：3.分组合对齐整合起来：3.分组合对齐总结视觉层次结构、视觉流、焦点、分组合对齐，这些都是页面布局的基本手段。设计师可以通过这些有效的视觉手段，来吸引或分散用户的注意力，形成视觉引导，支持用户试图去完成它