1.2 网页UI设计要点

随着互联网技术的进一步发展与普及，网页界面更注重审美的要求和个性化的视觉表达，对设计师也提出了更高层次的要求。一般来说，平面设计中的审美观点都可以套用到网页UI设计上来，并利用各种色彩的搭配营造出不同的氛围、不同形式的美。

1.2.1 设计与技术的结合

在这里，我们所说的设计并不仅仅是网页界面表现上的一些装饰，而是需要将企业形象、文化内涵等元素都体现在网页界面设计中。网页界面是整个网站的“脸”，网页能否吸引消费者，是否能够引起消费者的兴趣，是否还能够吸引消费者再次光临，其界面设计是至关重要的。如图1-7所示为精美的网页UI设计。

人们在接受外界信息时，视觉占绝大部分，而听觉只占很少一部分，也可以说网页界面的UI设计是否新颖、是否独特，决定了大多数浏览者对该网页内容和信息的关注，在该基础上，网页才能够更好地为企业服务，将产品、服务等推销给浏览者。

1．鲜明的主题

不同的网页所针对的消费群体或者服务对象也不相同，所以就需要采用不同的形式。有些网页只提供简洁的文本信息；有些采用多媒体的表现手法，使用华丽的图像、欢乐的动画，甚至是精彩的视频和动人的声音。好的网页把图形表现手法和有效的布局与通信结合起来。为了做到网页主题鲜明突出、要点明确，设计者需要按照客户的要求，以简单明确的画面来体现出网页的主题，使用一切方法和技巧充分表现出网页的个性，从而使网页主题鲜明、特点突出。如图1-8所示为知名化妆品CHANEL的官方网站的网页界面，采用了极其简约的设计风格，只突出了两个元素：一是品牌，二是主打产品。

2．明确的目标

网页界面设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计网站的目的和用户需求，从而做出切实可行的网页UI设计计划。要根据受众群体的需求、市场的状况、企业自身的情况等进行综合分析，明确企业整体视觉形象，以用户为中心、艺术设计为辅进行设计规划。在设计规划时，需要考虑：设计此网页界面的目的是什么？受众群体有哪些？该网页所属网站用户有哪些特点？该网站提供什么样的服务和产品？产品和服务适合什么样的风格？等等，从而做出符合网站整体形象的网页UI规划。

如图1-9所示为上海通用旗下不同品牌汽车官方网站的网页界面设计，根据所针对的用户群体的不同和汽车定位的不同，在网页UI设计风格上也稍有差别，但都是使用黑、白、灰3种颜色为主色调，秉承了企业的品牌形象，并且在每个网页中都可以明确感受到企业高品质工业化目标及对用户精益求精的服务。

3．精彩的版式设计

网页UI设计作为一种视觉语言，特别讲究排版和布局，虽然网页的设计不等于平面设计，但它们有许多共通之处。版式设计通过文字和图形的结合，表达出了和谐之美。网页界面的版式设计要把网站中各页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，设计者需要反复尝试各种不同的页面排版和布局，找到最佳的方案，给浏览者带来一个流畅、轻松的视觉体验。

如图1-10所示为必胜客中国官方网站页面，运用不规则的页面布局展现网站内容，给人眼前一亮的感觉。运用不规则、大小不等的小方块来展现产品，操作方便、直观，并且突破了传统的网页布局形式，给人留下了深刻的印象。

4．合理的配色

色彩是艺术表现的要素之一。在网页UI设计中，设计师根据和谐、均衡和突出重点的原则，将不同的色彩进行组合、搭配来构成美丽的界面。根据色彩对人们心理的影响，合理地加以运用，或者也可以根据企业VI（企业视觉识别系统）来选用标准色，使企业整体形象统一。

如图1-11所示为百事可乐活动网站页面，运用该品牌视觉形象中的蓝色和红色进行网页界面的配色处理，既体现了品牌形象的统一性，又可以加深消费者对该品牌的认知度。

5．内容与形式的完美统一

为了将丰富的内容和多样化的形式统一在页面结构中，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡及留白等方法，通过空间、文字、图形之间的相互关系，建立整体的均衡状态，产生和谐的美感。例如，在界面设计中应用对称原则时，太过均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图形，或采用夸张的手法来表现内容，往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托，构成最佳的页面效果，充分表达完美的设计意境。

如图1-12所示为一家茶品网站的网页界面，因为网站中的内容并不多，所以整个网站运用Flash动画的形式，将精美的茶品广告画面作为背景，配合半透明的底色和文字内容介绍，使得整个网页给人一种舒适、静心的感觉，达到了内容与形式的完美统一。

1.2.2 立体空间节奏感

网页界面中的立体空间是一个想象空间，这种空间关系需要借助动静变化、图像的比例关系等空间因素表现出来。在界面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果各不相同。根据浏览器的特点，网页界面设计适合采用比较规范、简明的版式。

网络中常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时让人产生轻松或紧迫的心理感受，如图1-13所示。

现在，人们已不满足于二维空间的网页界面效果，三维空间开始吸引更多的人，于是出现了使用特殊的网页语言实现的三维网页界面，如图1-14所示。

1.2.3 视觉导向性

浏览者在浏览网页界面时，界面中的文字、图像、颜色、图标等都是作为信息特征和视觉导向来进行视觉引导的。对于一个网站而言，网页的清晰性、逻辑性是用户通行的保障。

进行整体网站视觉导向性设计，使浏览者既可以方便快速地到达其需要的页面，又可以清晰地知道自己的位置，并能通过网页上的超链接迅速地引导浏览者浏览到相应的网站内容，如图1-15所示。

1．树状链接导航

树状链接导航就是一级连着一级，首页链接指向一级页面，一级页面链接指向二级页面，这种页面的浏览是逐级进入的。优点是网站的条理清晰，访问者不会迷路，明确地知道自己的位置；不足的是浏览效率低，这种导向性适合类型较小、信息单一化的网站页面，如图1-16所示。

2．星状链接导航

星状链接导航以一个共同的链接为枢纽，使所有页面都可以通过枢纽保持连接。这种导航方式适合于内容较多、信息量大的网站。优点是浏览方便，随时可以切换到自己所要关注的内容，通常门户类网站都采用这种导向方式，如图1-17所示。

1.2.4 视觉服务

在进行网页界面设计的过程中，一定要注意控制网页的容量，这将决定浏览者在浏览该网页时所需要等待的时间，任何一个浏览者不愿意等待几分钟才看到网页的内容，这样浏览者早就对网页失去了兴趣。所以，我们在网页界面设计过程中，尽量避免使用过多的图像和体积过大的图像。如图1-18所示的网页界面很好地向浏览者展示了页面的信息内容。