UI设计实战课程 网页版式设计.ppt

5.反复视觉流程 视线沿着页面中相同或相似的视觉要素作规律性的、富于秩序和节奏的逐次运动。 6.散点视觉流程 没有固定的视线流动路线，页面中各构成要素呈现自由分散的状态，体现自由性、随意性。但并非杂乱无章，有着一定的结构性和统一性。 感谢听讲 ! 麦子学院---在线职业教育 未来 我来 开讲啦！ 网页版式设计 版式设计的目的就是要合理布局和设计网页版面，高效地传递视觉信息，充分吸引浏览者。 1.版面设计需要符合人的视觉习惯 2.避免使浏览者产生疲劳感 3.强化页面的主从关系 4.安排合理的视觉流程 网页版面设计原则： 1.版面设计需要符合人的视觉习惯 视线移动规律： 规律1：人眼的视线沿着水平方向运动比沿着垂直方向运动快而且不易疲劳； 规律2：视线的变化习惯于从左到右，从上到下和顺时针方向运动； 规律3：当视线沿着既不水平也不垂直的斜线方向移动时，在水平方向上下约 45°的范围内，视线从左到右移动；在垂直方向左右约45°范围内，视线从上到下移动。 视域分部： 调查显示： 上部比下部注目程度高；左侧比右侧注目程度高 。 最佳视域：（1）左上部；（2）中上部 视域部位给人的心理感受： 上部：轻快、上升、积极、愉悦 下部：沉重、稳定、压抑、消沉 左侧：轻松、舒展、自由、主动 右侧：庄重、局限、拘谨、被动 滚动图片最好从右向左 线状布局应水平方向宽些 导航栏最好放在左侧或上部,要重点突出的内容最好放在左上部 2.避免使浏览者产生疲劳感 (1)固定页宽，一般不限定长度，但不宜过长。 (2)对于文字，以下情况会产生疲劳。 字号过小、行间距过密，不易辨认；高亮度文字、背景极暗。 (3)挥之不去的跟踪动效，会令人生厌。 3.强化页面的主从关系 页面中的构成元素不能同等对待，必须以点带面，让焦点先抓住浏览者， 引发继续浏览的愿望，然后再扩展开来。 强化页面的主从关系就是将主要对象与次要对象区分开来，重点突出。 采取的方式有： （1） 主从对象的大小对比 （2） 弱化主体对象周围的内容 （3） 主从对象的色彩对比 （4） 重复主体对象 （5） 加强主从对象在形态上的对比 1. 主从对象的大小对比 2.弱化主体对象周围的内容 3.主从对象的色彩对比 4.重复主体对象 5. 加强主从对象在形态上的对比 4 安排合理的视觉流程 视觉流程：视线随页面各构成元素在空间上沿一定轨迹运动的过程。 浏览者的视觉流程是有一定规律的。 视觉流程分类： （1）单向视觉流程 （2）曲线视觉流程 （3）导向视觉流程 （4）重心视觉流程 （5）反复视觉流程（6）散点视觉流程 1. 单向视觉流程 视线在页面中随构成要素形成的单一方向顺序运动。 规律：由大到小；由主到次； 由左到右；由上到下。 分类： 横向视觉流程； 纵向视觉流程； 斜向视觉流程。 2. 曲线视觉流程 曲线视觉流程是各构成要素沿着曲线而运动变化的视线流动过程。它比单向视觉流程更具节奏、韵律和曲线美。 3. 导向视觉流程 导向视觉流程是通过诱导元素，主动引导浏览者的视线按照一定的方向顺序运动，将页面各构成元素依序串连起来，形成一个有机的整体。 依据诱导元素的不同可分为：线形导向、形象导向、指示导向。 以线或文字等线形元素作为诱导元素 巧妙运用图片中人、动物或物品的朝向作为诱导 通过指示性的箭头、手指或具有透视感的线条作为诱导元素 4.重心视觉流程 重心指页面的视觉心理重心，并不是几何中心。