1、网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇讲师：余兰亭视觉表现篇视听元素网页视觉设计要点网页视觉风格7.网页视觉设计要点7.1 视觉的有效性7.2 视觉的层次性7.3 视觉的一致性7.4 视觉的创意性7.5 案例早教机构网站界面 设计7 网页视觉设计要点 网页的视觉设计属于用户体验中的表现层，它是联合内容、功能和美学汇集到一起来产生一个最终设计，这将满足其他四个层面的所有目标。本章介绍了网页视觉设计的四个要点，即有效性、层次性、一致性、创意性。通过要点的学习指导大家在界面布局大的框架下如何进一步确定界面版式与各个视觉元素的设计。初学网页界面者最容易走进的误区就是认为版面
2、越满越好，但实际上有时候“多即是少”，视觉元素越多，就越容易分散用户的注意力。网页中视觉的有效性是视觉设计要点的最基础的特性。由于不同的视觉语言往往会打破自然的视觉流程，因此在整个版式上必须力求要点突出，主要的解决方法有简化版式、适当留白等。7.1 视觉的有效性7.1.1 简化版式 简化版式是尽量以简单明确的语言和画面告诉大家本站点的主题。简化并非为了版式的简洁而删除信息，而是应当遵循网站的信息结构及框架的基础上，寻找界面版式最佳的表现方法。一方面，在每个界面内仔细斟酌信息间的结构联系，对于过于繁冗或者毫无联系的内容，进行必要的转移或删除。尤其是在电子商务网站中，把控好信息层级结构、矩形结构、
3、自然结构的版式表现，不仅有利于用户理解网站的主题内容，还能为网站本身带来更多的商业价值。如窝窝团网站的原版设计重点内容就不够突出，其界面在1366*768px的屏幕分辨率下文字、图片信息都未能显示完整。把控界面内图形图片与文字的比例。图与文的搭配可以降低阅读的疲劳感，但要注意各自所占的比例。同一个信息内容可以设计成炫酷的图片还可以是简单的文字，首先需要参考信息的优先级来决定其视觉表现形式，其次要考虑界面中图文比例，若图过多面积过大可能会造成视觉繁杂，若字过多会显得界面过于空洞。如同为招聘网站，智联招聘网站的图多，显得杂乱，用户需要在图片中找到自己需要的信息。而58同城招聘页面大量的文字配以少量
4、的文字，反而显得大气而不失精致，有利于用户理解网站的信息逻辑，建立良好的印象。7.1.2 适当留白 留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色，甚至包含微妙的纹理。不管你习惯称之为负空间还是留白，它都非常聪明地引导你关注网页的重要内容，同时它也是极简风格的典型特征。越来越多的网站开始使用这种设计，设计师们逐渐意识到这种设计是多么有用。在很多艺术家设计师的个人网站中也会大胆地运用留白，如艺术指导junlu的个人网站，进入首页就是简单的几个作品的布局，每个作品间的间距大自然分割出每个作品的空间，没有其他的修饰元素进行干扰，却能有力的告诉用户，别想其他的，请
5、静静欣赏我的作品吧。7.2 视觉的层次性7.2.1 视觉流程 视觉流程是各种视觉信息作用于人们的视觉器官，引起视线的移动和变化，而视线会随着注意物的方向、形态、色彩、声音等的心理暗示的影响遵循着一定的方向和秩序有规律的进行。人们的视觉流程总会受生活习惯、地域文化等因素影响形成一定的视觉流程。如国内人们文字是从左向右、从上至下的书写，因此人眼对信息的观察也是从左到右、从上至下。在网页界面设计中最常见的视觉流程有“F”模式、“Z”模式、纵向模式三种。F模式Z模式纵向模式 F模式是指用户通常会沿着左侧垂直浏览而下，先去寻找文章中每个段落开头的兴趣点，这时，如果用户发现了他喜欢的，他就会从这里开始水平
6、线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。这种模式在一些以文字为主的网站较常出现，例如新闻资讯类的网站、博客等。F模式Z模式纵向模式 Z模式是基于用户从左到右自上而下的阅读习惯，指用户首先关注的页头水平方向上的内容，依照从头部左到头部右，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。这种较常出现于网页内容不是以大量文字为信息内容的页面。如印象笔记网站首页布局上Z模式，第一屏为注册登录框，将用户的视线牢牢地锁定在该领域。接下来对该产品的卖点展示，第一行左文字右图，第二行右图左文字，第三行左文字右图如此重复，图片与文字顺序的更换一方面遵循了用户是视觉流程，也是有效
7、引导用户向下浏览，在页面底部又为注册登录框，给用户唯一的操作选择，以达到该页面的功能诉求。Z模式纵向模式F模式Z模式纵向模式 纵向模式是用户习惯自上而下滚动来浏览更多信息。当用户还处于确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。除了大图，用户会选择数栏的其中一列纵向浏览直到找到某一目标信息后，横向浏览细节。7.2.2 视觉层级关系 视觉表现手法主要有位置、大小、距离、内容形式、色彩五种元素组成，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果。位置大小内容形式距离颜色 位置是在设计开始就会考虑的元素，网页界面设计上若遵循人们“从左向右，从上向下”阅
8、读的视觉规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。界面中优先级依次为左上，左下，而右下最差。因此很多网站都将自己的logo、商品名、主题等重要信息放在顶部靠左或顶部中间最佳视域内。以设计癖网站为例，在原稿中，焦点讯息左图是第一优先级的信息，笔者将焦点新闻与右侧的其他列表新闻位置对调后对比原稿与修改稿：虽然焦点新闻依然是大图的形式，占的面积也够大，但由于位置不在最佳视域，会被其新闻分散一部分视线。位置大小内容形式距离颜色 在确定了内容板块的位置后，设计师还需要考虑给这模块多大的空间，大小会很直观反映信息的重要等级。重要的元素相对于一般元素要大一些，甚至会比例失调也不为过。以The B
9、oston Globe网站为例，原稿有左右两张图片，左侧的新闻图片面积约为右侧广告图的2倍，轻而易举地立刻吸引了用户的注意。笔者将左图面积缩小为右图均等后，对比发现：即便左图位置仍在用户会第一时间关注的左侧，但用户看到左图的时候也会不自觉地看到右图，于是网站的新闻重点会被广告所打扰，造成不良的心理感受。位置大小内容形式距离颜色 距离可以分为二维的距离效果与三维的距离效果。二维的距离是保证信息可被理解的前提下，视觉元素尺寸不变，细节被放大，人眼会感受到元素更清晰，离眼睛更近而容易先去关注。还可以通过视觉手段能体现出三维距离的效果。具体方法有模糊元素、调整透明度、增添投影等。位置大小内容形式距离颜
10、色 确定了内容板块的位置、大小和距离关系后，我们会继续考虑内容的形式包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字；相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆，从视觉层级上，人眼一般会先关注图后关注文字。但仅仅这点还不够，通过图片抓取用户眼球后引导视线到下一个关注点，是设计上更多会考虑的点，概括有以下表现手法：1）方向性引导图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动方向、光照方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。2）符号引导除了图片，一些符号本身带有顺序和方向性，也
11、能有效引导视线根据符号来浏览，包括阿拉伯数字、字母顺序、时间顺序（时间轴）、箭头等。如极客学院网（见图7.19）课程视频学习页面，课程就是以数字来标识排序。位置大小内容形式距离颜色 色彩是影响用户对界面第一印象的重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点这种反差包括色彩色相、饱和度和明度反差。7.3 视觉的一致性 很多大型的研究院及设计开发部门都会对产品的视觉交互整理出一套界面交互规范，以帮助团队更好的协同工作。因为产品的一致性设计会极大的改善我们的设计流程，缩短设计周期，有章可循自然设计起来得心应手。7.3.1 与企业形象一致 网
12、站最终是为企业品牌服务，所以网页必须能够起到承载品牌信息的作用，这样即便用户没有浏览过该品牌的网站，看了你的设计后也会联想到网站背后的产品品牌。网页界面视觉设计需要与企业的VI系统保持一致，主要是VI基础应用部分的logo、配色方案、视觉图形、标准字等。尤其是对于老牌的产品，网站必须保证线上的效果与线下传统媒体（如海报、宣传手册等）以及店面的视觉风格的一致。7.3.2 页面及各元素间的共识 论是主页还是列表页或是详细页面，尽管层级不一、功能不同，但是要大体上保持不同页面之间视觉风格的一致。一致性主要体现在三个方面：一是各个视觉元素布局上井然有序，主页面、子页面视觉表现上有章可循，如logo和导
13、航的位置相对固定；二是相同级别的板块内的文字字体、大小、色彩、样式一致，图标图形大小一致、各元素间的比例、间距一致；三是配色方案上自成体系，哪些颜色占用比例大，哪些颜色用于强调等。7.4 视觉的创意性 尽管网页设计需要遵循很多的秩序规范，但是在某些特定的页面视觉创意加以新兴的计算机手段，却能让网页富有自己独特的艺术风格及特征，增强网页信息的传达性、趣味性。7.4.1 秩序内的创新 秩序内的创新依然遵循网站布局规范，在某些特定的页面，在保证功能正常运作的前提下，界面设计表现得灵动、幽默、大胆。这种特定的页面主要包括错误或不存在的页面，及不得以加载等待页面。等待上的幽默等待更有乐趣。如acfun网
14、视频加载页面，每次都会出现一则小笑话，缓解用户焦急心里。7.4.新媒体下的出其不意 随着CSS 3和HTML 5技术的成熟，许多惊艳的效果都能应用在网站设计中了，比如视差滚动，故事游戏等。波兰某动物保护组织网就非常有创意,它选取了十只动物与它的所有者或相关者,将动物的半张脸同相应的人的半张脸结合在一起,作为一幅页面的核心内容，折射出滑动鼠标滚轴，实现各自脸部左上右下的切换，而点击页面两侧的“”、“”会展示出他们详细介绍和心里感受。Colony TV网是为一个美国科幻剧所创建的，当你打开网页的时候，会被其中的地图和剧情所吸引，它利用js技术将网站设计成了一个游戏在不断完成任务的过程中解锁成就，了解故事走向，直到欲罢不能。7.5 案例早教机构网站界面设计详情请参考微课视频。
