第6章网页界面设计.ppt

哈工大软件学院 例6：橘红色如果运用得当是一种非常适用于网页上的颜色 第6章 网页用户界面设计 6.4 网页界面色彩搭配（10个例子） 特点：感觉较为前卫，色彩热烈，给人的震慑力较强 主色调 辅色调 菜单 字体 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 视线在页面中随构成要素形成的 单一方向顺序运动。 规律：由大到小；有主到次； 由左到右；由上到下。 分类： 横向视觉流程； 纵向视觉流程； 斜向视觉流程。 第6章 网页用户界面设计 第6章 网页用户界面设计 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 曲线视觉流程是各构成要素沿着曲线而 运动变化的视线流动过程。 它比单向视觉流程更具节奏、韵律和曲 线美。 曲线视觉流程例 第6章 网页用户界面设计 顺时针弧线导航 第6章 网页用户界面设计 背景大图→小图（上）→小图（下）逆时针弧线 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 导向视觉流程是通过诱导元素，主动 引导浏览者的视线按照一定的方向 顺序运动，将页面各构成元素依序 串连起来，形成一个有机的整体。 依据诱导元素的不同可分为： 线形导向、形象导向、指示导向。 以线或文字等线形元素作为诱导元素 第6章 网页用户界面设计 第6章 网页用户界面设计 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 导向视觉流程是通过诱导元素，主动 引导浏览者的视线按照一定的方向 顺序运动，将页面各构成元素依序 串连起来，形成一个有机的整体。 依据诱导元素的不同可分为： 线形导向、形象导向、指示导向。 巧妙运用图片中人、动物或物品的朝向作为诱导 第6章 网页用户界面设计 第6章 网页用户界面设计 第6章 网页用户界面设计 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 导向视觉流程是通过诱导元素，主动 引导浏览者的视线按照一定的方向 顺序运动，将页面各构成元素依序 串连起来，形成一个有机的整体。 依据诱导元素的不同可分为： 线形导向、形象导向、指示导向。 通过指示性的箭头、手指或具有透视感的线条作为诱导元素 第6章 网页用户界面设计 第6章 网页用户界面设计 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 重心指页面的视觉心理重心， 并不是几何中心。 第6章 网页用户界面设计 由视觉重心自然下移到文字 第6章 网页用户界面设计 视线首先会落在有重量感的喷漆桶上，然后向右移到文字上 6.3.4 安排合理的视觉流程 第6章 网页用户界面设计 6.3 网页界面中版式设计 1. 单向视觉流程 2. 曲线视觉流程 3. 导向视觉流程 4. 重心视觉流程 5. 反复视觉流程 6. 散点视觉流程 视线沿着页面中相同或相似的视觉要素作规律性的、富于秩序和节奏的逐次运动。 第6章 网页用户界面设计 第6章 网页用户界面设计 6.3.4 安排