1.4　深刻理解网页UI设计原则

网页UI是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。设计师在设计之前首先要明确设计页面的目的和用户需求，从而设计出切实可行的方案。成功的网页UI设计应该与消费者的需求、市场的状况和企业自身的情况相符，以“消费者”为中心，而不是以“美术”为中心。下面介绍网页UI的设计原则。

1.4.1　视觉美观

视觉美观是网页UI设计最基本的原则，这是很容易理解的。如果一个网页内容杂乱无章，配色、版式毫无美感可言，不仅无法给浏览者留下好的印象，甚至还会使其产生厌恶，那么这个网页UI的设计就是失败的。美观的网页UI如图1-17所示。

这是某零食品牌的活动页面，该页面将品牌的卡通形象与万圣节活动主题相结合，使用卡通元素来吸引喜欢零食的年轻消费者，并且为页面搭配万圣节的主题颜色，为浏览者带来全方位的视觉感受。页面中心的商品内容以简洁大气为主，通过使用强烈的对比色（绿色和红色）突出商品价格。

网页设计师应该合理安排页面内容，并按照大众的审美要求处理页面色彩和版式，这样才能设计出符合大众预期的网页UI，如图1-18所示。

用户可以从网页标志和配色上判断出这是一款餐饮品牌的网页UI。虽然页面设计得比较简单，但不管是黄色的背景、黑色的导航，还是红色的突出表达，都体现了页面的美观性。

1.4.2　主题明确

网页设计的另一个比较重要的原则就是主题明确。网页设计的目的就是传递信息，设计师应该将所要传达的信息进行分类，并将同类信息放置到一个页面中，这样可以相对简化页面主题，而一个明确的主题往往有利于信息快速、有效地传播。图1-19所示为主题鲜明的网页作品。

此网页采用了极其简约的设计风格，只为突出两个元素，一个是商品，另一个是产品介绍。

网页左上角的网页标志，代表了企业形象。绿色的网页背景与网页图片和网页内容相辅相成。

根据认知心理学，大多数人在短期记忆中只能同时记住4～7条短小的分类信息，而对于超出7条的分类信息或者不分类的信息，则容易产生记忆上的模糊或遗忘，概括起来就是较短且分类明确的信息要比较长且不分类的信息更为有效和容易浏览。

这个规律蕴含在大众寻找信息和使用信息的实际操作中，设计师在设计网页UI时，必须自觉地掌握和遵守这个规律。图1-20所示为有分类信息的网页UI。

在该网页UI中，左面是清晰且明了的商品大图，图片与背景色进行了非常恰当的融合，可以轻松吸引浏览者的注意力。

网页UI中的分类信息短小且只有3条，容易给浏览者留下较好的印象。同时分类信息上方的文字既简洁又清楚，可以很好地突出内容主题。

1.4.3　内容与形式相统一

任何设计都有一定的内容和形式，内容是指网页的主题、形象、题材等要素的综合，形式就是网页的布局结构和设计风格等表现方式。优秀的网页必定是内容与形式相统一的产物，如图1-21所示。

这是某模板网站的某个网页，页面采用了比较简洁的设计方式，通过满屏的大幅宣传广告来突出展示最新的产品，可以给浏览者带来直观的产品印象。在产品上方有集合的导航，在产品图片展示上有鼠标悬停效果，展示产品采用了图文结合的方式，使浏览者更容易浏览。

网页UI设计追求的形式美必须切合中心主题，这是网页UI设计的前提。如果设计师只追求华丽的表现形式以及过于强调“独特的风格设计”而脱离主题内容，或者只追求内容质量而忽视网页艺术外观的表现，那么网页UI将会显得苍白而又空洞。

设计师只有将内容与形式有机地统一，并深入领会主题内容的精髓，再融合自己的思想感情，找到完美的表现形式，才能体现出网页UI设计的独特分量和特有价值，如图1-22所示。

网页具有多屏、分页和嵌套等特性，设计师可以适当变化其形式，以达到多变的处理效果，丰富整个网页的形式美。这就要求设计师在注意单个页面内容与形式统一的同时，注意同一主题下由多个分页组成的整体网站的形式与整体内容的统一。因此，在网页设计中，设计师必须注意内容与形式的高度统一。

设计师要确保网页上的每一个元素都有其存在的必要性，不需要为了网页的美观而使用多余的技术或添加多余的元素，那样得到的效果可能会适得其反。只有认真设计和充分考虑，才能实现内容与形式的统一，如图1-23所示。

该宣传网站的设计充分体现了内容与形式的统一，网站中的网页都采用了相同的版式和主色调，导航和主页内容出现在每个网页的相同位置，并且采用了相同的设计方式。在界面设计中较高的一致性表现，能够有效提升产品的可用性，使用户快速掌握该网站的操作。

1.4.4　整体性

网页的整体性原则主要包括内容和形式上的整体性，这里只讨论形式上的整体性。网页的整体效果是至关重要的，设计师在设计时切勿孤立分散各个组成部分，那样会使整个页面呈现枝蔓分散的效果。

在设计网页时，各个组成部分在内容上应有内在联系，表现形式上宜相互呼应，并注意整个页面在风格上要保持一致，使页面的各个部分连贯融洽，一气呵成，如图1-24所示。

网页是由各种视觉元素组成的，在设计网页时，强调页面各组成部分的共性因素或者使各个部分共同含有某种形式特征，是体现整体性的常用方法。

体现网页的整体性主要从版式、色彩和风格等方面入手。

1.4.5　快速加载

快速加载也是在网页设计中需要考虑的一个原则。就现在网页的发展趋势而言，比重最大的当属图片元素，为了加快网页的加载速度，需要从页面切图和优化图片存储方面入手，能通过代码实现的部分尽量不要切图，能用1px平铺出来的就不切成2px，能用32色存储的就不用64色，如图1-25所示。

如果浏览者要进入一个网站购买商品或浏览网页，但进入网页30秒后还是只能看到文字，而无法查看全部的网页内容，那么任何人都没有耐心再继续看下去。

加快网页加载速度的方法有很多种。例如，可以选择纯色的网页背景、直线、没有图层样式的普通文字等，也不要过分切图。

1.4.6　为用户考虑

真真切切从用户的角度出发，想用户所想，做用户所做。用户可以按照他们自己的方法理解和使用网站或者App，设计师可以通过比较两个不同世界（真实与虚拟）的事物，完成更符合用户要求的UI设计，如图1-26所示。

为用户考虑的中心思想是以用户为中心，实际上就是要求设计师时刻站在用户的角度来考虑问题。

1. 用户优先观念

设计网页的目的就是吸引用户使用，所以无论什么时候都应该谨记以用户为中心的观念。用户需要什么，设计师就应该去做什么。一个网页设计得再具有艺术感，若非用户所需，那也是失败的。

2. 简化操作流程

依靠美观界面可以吸引用户，但是否能够留住用户靠的是网站中的各种功能及操作流程。此处需要遵循3次单击原则，任何操作不应该超过3次单击，如果违背则会使用户失去耐心，如图1-27所示。

简化操作流程后，用户可以节省很多时间和精力，这是设计师应该为用户考虑的。

3. 考虑用户的网速

设计师在制作网页时需要考虑用户的网速，如图1-28所示。在当前网络高度发达的时代，设计师可以在网页中加入一些动画、音频、视频和插件等多媒体元素，借此塑造立体丰富的网页效果。

在设计网页时必须考虑用户的网速，不要放置一些文件量很大，下载时间很长的内容。网页设计完成之后，设计师要亲自测试。