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