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

界面设计中的页面元素的布局,博客设计组：非非,界面设计中页面元素的布局,视觉层次：,视觉流：,分组和对齐：,重要程度区分,接下来做什么？,谁和谁在一起,视觉层次:重要程度区分,解释：重要程度区分，用户能从页面的布局推导出它的信息结构。,重要的内容应该最突出,不重要的次之。,标题、二级内容、注释等看起来就是他们本身，不为用户带来任何疑问。,案例：没有视觉层次,案例：带空白的文本,案例：排版和对齐方式,关于视觉结构层次的小结,左上角优先：,空白：,字体对比：,前景色和背景色的对比：,位置、对齐、缩进：,图形轮廓：,其他（标题、列表、导航条、动作按钮等）,我们的语言习惯是，从左到右，从上到下。,条理清晰，组的形式来呈现内容。,大小粗细颜色等的对比，表达信息的重要程度。,颜色对比可以进一步的突出内容。,从属关系更清晰，结构明白。,整体感增强。,设计中我们遇到的问题,视线首先落在什么地方？,那个设计元素在第一时间吸引了用户的注意力？,用户第一时间注意到的东西与它们的（或你的）目标是背盗而驰？,它对于战略目标上来讲是很重要的东西吗？,好的视觉引导,是一条流畅的路径，设计能顺利地引导用户在页面上移动,能“干扰”用户的视线，为用户提供有效选择的、某种可能的“引导”，支持用户试图去完成它们的目标和任务。,我们需要。,视觉流：接下来我该看什么,解释：在读者扫描页面的时候跟踪读者的视线。,建立流：,视觉流的牵制因素：.阅读习惯。,.用户的页面目的。,在页面上通过焦点引导用户。,焦点：,眼睛不能地址的地方。,案例：焦点和视觉流,案例：焦点和视觉流,如何建立焦点,对比：颜色、高度、字体的粗细等。,如何建立焦点,带有指示性的图片：箭头、清晰的轮廓、表情和动作、汇聚的线条等。,视觉层次结构和视觉流,关于视觉流的小结,从上到下，从左到右是默认的视觉流方向。,强烈的焦点会首先吸引眼球，然后才是那些次之的。,对页面内容的理解会随着用户选择看哪一部分而改变。,分组和对齐：谁和谁一起,解释：对于形成清晰的视觉层次结构是很必要的，分组和对齐意味着页面元素之间互相关联。,作用：通过分组和对齐把用户的视线从一组元素引到另外一组，从而来完成引导，帮助形成视觉流。,牵制因素：.视觉习惯，放在一起的东西，我们就会觉得有关联。,.空白，足够的空间距离，让元素在逻辑上不相关。,如何建立：轮廓和线条、间隔（空白）、对比等。,关于分组和对齐的小结,分组和对齐描述的是布局属性；,相邻性:,小贴士：层级变多之后，分组的难度会加大，单纯依靠分住是不能满足需求，分组和对齐同时使用便于表达复杂的层级关系。,相似性:,连续性:,封闭性:,摆在一起的东西，用户就会把他们联系起来。,两个元素属性向同，比如颜色大小形状方向等。,有规律的重复，对齐或者小的元素组。,闭合的区域，大块的留白。,整合起来：,1.视觉层次机构,整合起来：2.视觉流,对页面内容的理解会随着用户选择看哪一部分而改变。,强烈的焦点会首先吸引眼球，然后才是那些次之的。,整合起来：3.分组合对齐,总结,视觉层次结构、视觉流、焦点、分组合对齐，这些都是页面布局的基本手段。设计师可以通过这些有效的视觉手段，来吸引或分散用户的注意力，形成