网页UI设计干货，网站界面视觉体系设计技巧

用户在网站中的行为具有高度的目标驱动性。人们总是有目标要去完成，无论是购物结算、寻找问题的解决方法还是单纯的浏览内容信息。因此，用户体验设计及UI设计的一个重要使命，就是通过合理的设计元素，帮助和引导用户完成特定的行为。下面品索教育分享网页UI设计干货，网站界面视觉体系设计技巧，跟大家谈谈UI设计中与视觉体系设计相关的干货和技巧。

当我们谈论UI设计时，其实我的知识贡献范围也只能是WEB端，当然WEB端和软件端大同小异。但不管是设计网页界面还是软件界面，作为设计师，那就绝对不会否认这一点：比例、颜色、大小等微妙的元素间的平衡不是一项轻松的工作。

网页UI设计也是一样，一个网站就像和其他传统的艺术创作一样遵循同样的规律，最终达到视觉的艺术效果。这是美学的范畴，同时隐含着现代商业的法则。一个优秀的网页设计必定是让人轻松又足够吸引的。

视觉的创作组合

让我们先谈谈，网站界面的三个功能。

引导用户——网站对用户的引导，就像暗中一只无形的手，会指引用户通过点击等操作按钮浏览网站，了解信息，而不会带给用户压迫感。比如square这个网站，当你不断下拉的时候，会出现相应的文字提示你接下来继续到哪里。

呈现内容间的关系——按照一定的布局去展示网站的主次内容优先级，比如abduzeedo这个网站，就将主推的内容放在了最大的顶部三个卡片展示上，其他的普通内容则在下方以列表的方式展示，底部则是一些标签分类的链接。

建立情感联系——人们去餐厅用餐，其实不会只把餐厅当做一个解决食欲的地方。他们会关注到餐厅的场地、氛围、菜式甚至是其中的一些特别的情调，他们在这里交谈、交易。同样道理，用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。

浏览模式：人眼焦点预测

就像你的眼睛会更快关注到快速移动的物体，或当你在街边被高冷美好的模特吸引一样。人眼会在看这一行为中自动启发对眼界中出现的某个物体的特别注意力，我们这里可以称之为焦点。大部分的人都会被页面中的焦点所吸引。

例如一篇文章的展示，也会遵循相同的浏览模式。99Designs的设计作者Alex就提到了两种主要的浏览模式。

F模式

这主要在一些以文字为主的网站出现，例如博客。F模式就是指，用户通常会沿着左侧垂直浏览而下，先去寻找文章中每个段落开头的兴趣点，这时，如果用户发现了他喜欢的，他就会从这里开始水平线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。

The Nielsen Norman机构曾对232名用户对上千个网站的浏览习惯进行观察，总结出F模式的特点：

• 用户极少逐字阅读文字。

• 每个段落的开始两个字最为重要，这将决定内容是否能留住用户。

• 初始段落，副标题和要点都要保持醒目。

下图里的页面可以看到，重要的内容很清晰的展示出来，并且不会让用户花很多时间去浏览，而次要的内容也能快速尽收眼底。F模式对于那些嵌入广告的网站也是极为有用的，即使有了广告，也不会影响到内容。只要记住，内容为王，导航可以让用户更深入地浏览下去。

在所有浏览模式中，F模式就是一个引导路线图，而不仅仅是一个页面。因为，F模式的网站除了顶部展示区外，其他的内容会显得更平淡。就像下图所示，顶部1000像素后，网站就在水平方向加入了一些卡片式的内容组件，让网页内容更有趣。

Z模式

Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏，还是就仅仅因为从左到右自上而下的阅读习惯，用户首先关注的页头水平方向上的内容。当视线抵达底部时，又遵循着从左到右的习惯模式，重复再水平扫视页尾的最底部的内容。

Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。当Z模式简化布局，就可以增加转化率，下面这些是可以去简化的地方:

• 背景——运用独立的背景能将用户的视线范围锁定在你的框架内容里。

• 要点1——你的LOGO放置的首要位置。

• 要点2——增加一个颜色鲜明的辅助操作指令，帮助用户遵循Z路线浏览模式。

• 页面中心——页面的中心独立于页头和页尾的部分，引导用户Z路线浏览视线。

• 要点3——增加可以从正在浏览的位置移动去到底部的图标，也就是可以随时抵达最终目标。

• 要点4——Z模式最底部的水平线上的内容，这将是提供给用户首要操作的最佳位置。

预测用户的视线将会占有极大的优势。在布局你的页面元素时前，你就可以知道优先的该摆放在什么位置。一旦你知道你想要用户先看到什么，你就能可以通过视线的规律，将你的重点内容放在用户的“热点”里。

你可以在整个页面不断重复Z模式的规律，就像你在下图中看到的那样，一开始这个页面就有一个注册按钮，通过水平位置的浏览，用户已经获悉了这一信息，下拉会出现产品的卖点，这些卖点的展示就是遵循重复着Z模式的最佳例子，直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。

对比：引发兴趣

为了更好地理解对比在网页设计中的作用，我们先解释下什么是对比。对比就是在一个相对封闭的环境里发生的某种元素间的一种关系。这些元素可以是颜色、纹理、形状、方向和大小。

只是稍稍对字号大小进行调整，或对色彩进行更改，就会马上改变整个界面的视觉效果。例如，当你看到下面这个网页时，把浅色的背景换为深色，首页引人注目的“try it free”的首要按钮马上在视觉重要性上降级，而最下方的“call us”就会升级为首要的按钮。

再来看看下图中，颜色和大小是怎样影响我们的界面视觉的。例如，很多人在第一眼扫视而过时，不会仅仅就看到了两个圆。事实上，他们在看这两个圆时，已经获得了这样的信号“一个黑色的大圆和一个红色的小圆”。也就是说，对比关系已经可以在第一时间就进入人们的大脑中，形成强烈的印象。

商业工具：颜色，大小和形状

当我们刚开始设计一个页面的时候，一定不要忘记了运用这几个强大的视觉工具：颜色，大小和空间。设计师Alex Bigman就相信颜色和大小在管理着我们的视觉注意，而空间则帮助管理视觉元素间的关系。

颜色

简单说，亮色可以在柔和的色彩中凸显出来。这是显而易见的，而更为重要的是，在设计中，你就可以运用这一关系去吸引用户的注意。另外，特定的色彩也能帮助营造网站的整体氛围（例如，蓝色代表宁静，红色显得张扬和富有攻击性等）。

上面这个网站采用的是视觉体系中的Z模式，Z模式的详细情况已经讲过了。在此模式下，他们运用色彩的技巧是非常巧妙的。水蓝色的背景立刻将首要目标按钮凸显在了顶部，这些目标按钮的色彩可以与“get active”的色彩搭配，暗示这一系列的按钮的相关性。而下方的两个大的矩形区域由于形状的相似又相连，因此也暗示着它们之间的相似性。

大小

说到大小，我们通常在说的其实也就是网页字体的大小。在传统的从左到右自上而下的阅读模式中，这就已经是个很强大的元素了。这意味着，大号字体或段落的右下角通常是读者最先阅读的地方。因此，字号大一点发挥的就是一种强调作用。

讲到这一点，不得不提到，著名的网页设计名博Smashing Magazine对50个流行的网页界面进行调查，他们发现这些网站通常都是采用标题字号18~29px，与此匹配的文章主体字号采用12~14px，只是这项调查针对的是英文字体，而中文字体相对来说应该字号会大一些易于辨认。当然，这也只是一个大概的调查，并无绝对。但是，你可以从中获悉更多关于字号比例的排版设计的知识。

留白

网页设计的目标什么？简单讲，就是创作一个漂亮的页面。那么，你将所有的漂亮的元素全部堆叠在网页中就漂亮吗？无节制的增加吸引的元素是快速毁掉自己的设计方法之一。一个网页中有可以呼吸的空间是非常重要的，也就是我们总是爱说的留白。减少“视觉噪音”会让页面显得更有重点。

Usaura的创始人Dmitry就已经指出，适当的留白能增强对网页内容的理解。2004年，一些研究小组就调查过，适当的留白能让人们对网站内容理解程度增长20%。虽然用户并不会直接对留白的页面做些什么，但它却能影响到用户的满足和体验。大家可以看看下图的页面设计。在每一个主体内容，都保留大量留白，用户的视线流得到了保护，让观者专注内容，才是最好的体验。

网页设计视觉体系的测试：模糊法

就我所知，有人曾提出这样一个方法来检测自己的网站。尤其是当你的网站有特别要强调的内容时，非常适用。将自己的网站首页，放在PS里模糊5~10个像素，这样来判断那些你想强调的内容是否仍然能吸引到注意。

上图的网站经过模糊法测试后，我们会发现那些注册按钮和产品特性仍然是很抢眼。这样的元素安排对我们来说就是合理的。

当你在实际项目中去执行时，也许会发现做这些工作所需要的时间和精力是超出你想象的；但这些是值得付出努力的，它们是成功的UI设计的重要组成部分。最重要的一点，我们可以让用户感觉到，我们是真正关心他们的。