网页界面设计研究

2017-01-31吴晓阳

山西青年 2017年8期

关键词：界面设计菜单网页

吴晓阳赵熙

浙江树人大学艺术学院，浙江杭州 310053

网页界面设计研究

吴晓阳*赵熙*

浙江树人大学艺术学院，浙江杭州 310053

一、网页界面设计风格定位

网页界面是指网页静止下来的页面样式。也是在视觉设计之初，最先考虑的部分。网站界面设计的优劣将直接影响访客对该网站的整体印象。只有动画的网页是不够的，毕竟图文的编排效果、网站的整体视觉效果，才是重点。只有对静态的页面效果有所把握，精心设计，结合了相应的动态后，才能使网站动静皆宜。网页界面设计首先需要对网站的风格进行定位。

(一)影像风格

影像风格是一种利用摄影图像进行加工处理的手法，有很强写实效果，直观而简明。[1]这一类风格的网站有很多。特别是需要强调突出产品特点的网站，如服饰类、家居类的网站等多采用这种风格。

(二)三维风格

三维风格是指利用三维技术来制作网站场景和网站动画，页面所呈现的效果是三维立体的风格。这种风格形式新颖独特，是当下比较创新的网页设计形式。

(三)矢量插图风格

矢量插图设计风格是近年来比较流行的，主要是运用矢量绘图软件来设计矢量图形，再编排页面。由于矢量软件如Illustrator、Fireworks等制作出来的图形能够与网页制作软件Flash很便捷地结合，从而生成动画，因此在网页设计中应用非常广泛。矢量图形的图案装饰效果强，可以设计得很抽象，也可以很具象。[2]这类网页通常有轻盈精巧的效果。

(四)复古风格

这种风格古典而怀旧。很多影片推广网站采用这种设计风格，来配合影片的怀旧基调。在设计界面时，多应用Photoshop、Illustrator等软件来绘制细节，力求达到仿真写实的效果。

二、网页界面中的编排设计

网页设计中的编排方法基本遵循平面设计中的编排原理，网页编排效果的好坏将直接影响整体网站的视觉效果，所以掌握平面设计中的编排方法是十分重要的。在进行网页设计编排时有以下几种规律：

(一)网格式

网格式的编排形式，是遵循网格分割的原理，来分割页面，区分内容的。这种形式的编排使页面内容清晰、有条理，特别适用于官方门户类网站等页面信息内容较多的网站。

其中网格式又包含：以水平分割为主的网格、以垂直分割为主的网格。

1.以水平分割为主的网格

采用水平分割形式，是按照水平方向来编排图文内容，这网页编排中常见的形式，十分直观。

2.以垂直分割为主的网格

采用垂直分割形式，是按照垂直方向来编排图文内容，这也是网页编排中常见的形式，具有简洁、大方的视觉效果。

(二)自由式

自由式的编排形式，比较自由、灵活、随意。与flash动态效果配合能够生成有趣的动画。

(三)综合式

综合式的编排设计，综合了以上两种形式，版面均衡而又随意。

三、动态效果设计

(一)导航条的交互设计

导航条是由网站中一系列的栏目按钮组成的菜单组，用户通过点击导航条来到达所要浏览的页面。在进行设计时，既要考虑到其静态的视觉效果也要充分考虑其动态的交互效果。

1.对称式导航条设计

对称式导航条是将其中的按钮组进行有序的对称排列，这种设计具有清晰、易辨的优点。可以很好地融合进后台模版中，考虑效率优先。特别是针对众多复杂信息而进行设计，对称式导航条设计可以使之条理清楚。这种设计形式虽然保守，但却十分适用于中型、大型网站、电子读物等。

目前，由于结合了Flash技术、Java编程技术等交互技术，对称式按钮的动态更加丰富了，有下拉式菜单、上浮菜单、游标菜单、展开式菜单等。同时，在设计对称式导航条时，应注意避免呆板、单调、以及过于对称。应多动态效果的细节设计。

2.不对称导航条设计

不对称导航条设计是将按钮组进行不对称编排。这类设计具有灵活、有趣、富有吸引力等优点。在目前的技术条件下，这类按钮设计很难套用统一的模版。一般多适用于小型网站、互动装置等。以影片《幽灵公主》的网站导航为例，结合影片中的角色来进行设计，将按钮设计成片中的角色，当鼠标经过时，角色会随之互动。名为comentrigo的服装网站，采用轻盈的矢量花朵来作为网站的导航条，与清新的摄影图片相映成趣。点击每一个花朵按钮时，由花朵中抽出条条细丝，牵引着每一个栏目页面的出现。Insearch网站的导航菜单设计为一扇扇门，富有创意。当鼠标经过门前，门就会开启，引导浏览者进入下一个页面。

3.按钮的互动设计

对于构成导航条的重要元素——按钮，我们在设计其互动效果时要充分考虑，按钮的形态、样式，按钮的动画等等。

(二)页面间链接的交互设计

当用户点击按钮时，网站的页面之间或软件界面的不同窗口之间会出现转跳，这个过程可以加入丰富的动态效果。这种动态效果是导航菜单设计不可分割的一部分，也是特殊的一部分，它发生在点击按钮之后，下一页面呈现静态之前。在网站设计中，设计师通过对页面间链接效果的精心设计，能够与访客形成更好的互动，增强网站的交互功能。如网站设计作品：Dunun公司的网站，当浏览者依次点击导航按钮时，页面也呈现出仿如电影镜头般向前推进的动画，设计师很巧妙地将影视中的镜头语言应用于网站页面中，是一种创新之举。