个性化网页设计实用指南

暑期特刊

  提起当今数字化信息时代什么是最显著的标志?那一定是互联网,形成互联网一派繁荣景象的却是那些大大小小的网站。如今制作网页已经不是什么新鲜话题了,懂得运用网页三剑客的人越来越多,然而这其中又有多少人懂得如何设计呢?

  个性化等于特色、独特创新,不仅是个人主页,商业站点更应该设计得具有个性化。本文从相关网页设计的方方面面着手,掌握设计网页所需知识,进而帮助大家展开思维,设计出个性化的网页来!

  一、网站定位与信息结构空间架构

  要做网站,不能盲目的开始。首先明确了网站目的,之后才能整理相关资料,开始进行设计的创作。

  网站的目的是多种多样的,个人站点不外乎满足个人非盈利需求和欲做商业模式两种情况。商业站点的意义直接与提高经济效益、扩大知名度、便于传播信息相关联。与目的不同,定位是要确立“做成什么样的站点”的概念。比如:要做国内最大的小说阅读网、资料齐全的电器类行业引擎、娱乐信息门户、XXX个人心情日记等。那么围绕这个定位,可以了解到站点的用途与设计的方向。但此时还不是进行设计的时候,我们要先创建信息结构。

  所谓信息结构空间的创建,就是把所有应该放置到网站中的资料备齐,并且有机的组织分层管理。听起来似乎有些难度,但是作为设计师的你不需要了解很深层次的网络编辑的工作,只要能够掌握要领并加以运用即可。

  1.给网站起个好名字

  首先网站需要一个名字,名字是网站给人留下的第一印象。不论从搜索引擎还是友情链接到某个站点,直观上都是从名字开始的。同时,它将配合标志作为重要的视觉元素反复地出现在网站广告、相关网站,以及产品图片和文章正文中。

  简单地说,网站的名字要简单易记,同时要有特点。

  2.域名要容易记忆

  域名的重要性不用多说了,域名需要具有吸引力、内涵和商业价值。现今简练的英文组合大多已经被注册掉,加入数字是一个较时尚、便捷的方法。域名同网站的名字一样,会大量的出现在广告、图片、文字中,是主要识别对象之一,简练为佳!

  设计时,网站名字和域名以及网站标志,一般会同时出现。为了便于识别,最好设计出二、三种组合图标,反复使用,加强印象。

  3.网站内容整合分类、分层

  一个只有空壳设计的站点,是不会有很高的客流量、持久的美誉度、品牌发展的可能性。网站持久生存的关键是信息库,它也是建立品牌、走向辉煌的起点和基础。其内容的分类分层主要表现在栏目的划分,更新量,信息的易找、易查、易用性上。

  即使个人的小型站点也要有目的的、计划性的组织内容。内容要分主次、分类合理,一级二级层层深入。周边资料齐全,即使不储备周边资料,也应该设有推荐链接。

  不管信息创建是不是自己的工作,在做设计之前也要深层了解所要设计的网站的信息储存方式和信息资料。网站没有信息内容,设计也无法进行,没有根据和目的的设计绝对不是符合要求的设计。

  4.栏目的名称也很重要

  个性化的栏目名称直接会影响设计的风格。试想一下,一个具有诗词韵味的栏目名称的网站,其设计风格自然应是具有古典色彩的。研究一下同类网站的栏目名称,最好字数相同,符合信息要点,便于浏览者辨认。如名称过于有特点,设计网页也要把它作为设计要点考虑进去。

  5.信息的互补性、连续性

  信息互补是信息资料的补充与完善,一旦信息数据库十分完整且便于查阅,将是一笔很大的财富。互补就好比卖笔的地方也会卖笔芯一样,下载MP3的站点也可以找到歌词下载。连续性要贯穿网站发展始终,信息要即时更新,不能懈怠,以保证回头客和信息储备的积累。

  6.专题栏目

  专题栏目是阶段性或持久性网站主打、推荐的信息分类。值得注意的一点:它会影响首页的设计,可能会给它设计不同的导航样式或制作特殊的风格页面。

  7.预留空间

  从网站的整体角度考虑,有些栏目和信息会在以后加入。那么现在设计的站点如果不考虑将来放入的信息,以及信息分类分层,那么设计也是失败的。从这一点完全可以检测设计师或网站策划编辑人员的预测能力和远见。

  从某种意义上说,网页设计实际上是信息空间的包装设计。没有信息的网站是不存在任何实际意义的。信息空间架构完毕,我们才能进行页面布局,选择网页框架的样式,进而分配页面的区域信息。

  二、网页框架和页面布局

  简单地说,网页结构可以比拟房屋地基,“地基”打得不好,网站很难做到出色与完美。有了完整的信息内容,我们就可以针对它进行分配布局,选择合理的框架结构,把信息放置到相应的“格子”里去。框架设计是设计网页的第一步骤,是联系信息部署与设计制作的主要环节之一。

  根据目前网络上能呈现的设计条件,把网页框架分为三大类:分栏结构、区域排版和非规律的页面排版。

  1.分栏式结构

  分栏式结构是最常见的网页框架,类似于新浪网(www.sina.com.cn)的页面骨架设计,以超过一屏半为准,把页面从上到下分割为几列构架的设计结构。

  分栏结构是一种开放式结构设计,它的用途很广。通常适合于流量较大、更新较快、信息储备很大的站点,如门户站、资讯类站点。三分栏最为常见,除此以外还有二分栏、四分栏、五分栏等情况,超过五分栏以上的结构几乎没有。通栏(也就是一栏)是最特殊的结构框架。典型网站代表如下:

  二分栏:http://www.sophoto.cn

  三分栏:http://www.microsoft.com

  四分栏:http://www.tnt.tv

  五分栏:http://www.relen.com/oldweb/2

  通栏:http://www.relen.com/olddesgin

  2.区域排版

  利用辅助线、图形、色彩将网页平面分为几个区域,这些区域可以分为规则或不规则两类。由区域所形成的网页框架叫做区域排版,也可称之为分栏结构的变异,它可以适应更多的信息结构布局。典型网站代表如下:

  http://www.playdo.com

  http://www.zogg.com

  http://www.roadrunnerrecords.com

  为了满足更多情况的信息分类与信息布局,可以在分栏式结构中套嵌区域排版结构,韩国网站大多选用这种方式。这样的结构设计变化莫测,可以很好地适用于商业类型的站点,同时也能满足个人网站的信息类型(如图1)。

  3.非规律框架

  分栏式结构和区域编排以外的网页框架归属为一类,即非规律框架。所谓非规律骨架设计,就是没有规律的么?也不尽然。

  静态效果的网页有以下三种情况:

  无框架式的整张图片设计,这种情况类似大海报,虽然是很漂亮,但是占用图片多,页面下载速度慢(如图2)。

  页面横向很长,需要滚动条的网页。这种情况也不少,但是仅适用于个人主页。

  整个信息区很小的袖珍型网站。精制小巧,适合信息量少的个人主页(如图3)。

  动态网页主要是则以Flash形式为主的新媒体设计。通常可归纳为两种形式:一种是类似于分栏式或区域编排结构。第二种则是根本无任何规律可寻,类似于静态网页第一类情况。

  精彩的网页一定是从结构设计开始。三种框架结构各有特色,把这三种框架揉合运用,框架的特点突出,也是网站的特色之一。

  4.信息布局与网页结构

  检验框架设计合理的条件是:框架符合信息空间储备要求。也就是说信息空间结构决定框架设计,信息层次分类分层决定页面布局。信息的放置与信息的推荐依赖于网站的目的和定位。

  在进行网站设计时,最需要进行结构分析的是首页、栏目首页和信息浏览内页模板。针对首页设计,应根据信息由主到次依次从上到下排列。同行列的应根据信息由主到次由右到左排列。根据信息跳转原则,把个别主要推荐的栏目,利用站内推荐广告放置在合理位置,选择一些推荐信息条目放置于首页。针对栏目首页设计,应把栏目主打内容放置在主要位置,把相关信息放置在次要位置或侧栏。针对信息内页设计,主要是信息显示页面中文本排版的设计,相关文章或相关栏目放次要位置。

  分栏式结构中存在侧栏概念,侧栏就是居左或居右的分栏,可以放置不重要的信息以及功能模块。如邮件、搜索、天气等。

  5.易用性原则

  网站功能信息易用性是设计网页从头到尾贯彻始终的要点。在设计导航、背景图片、超级链接和文字编排时,应优先考虑易用性。

  标注页面位置方便用户确认自己的位置,考虑用户机器分辨率问题,弹出窗口的大小。窗口尽量不要使用全屏。

  考虑到过长文章,是否需要锚点。抓住能传达主要信息的字眼当作超链接的锚点,可有效地控制住超链接的字串长度,避免字串过长或过短,而不利于读者的阅读或点取。

  框架设计时使页面长度以不超过3、4个荧幕页面为佳。但是如果基于某些特殊理由,页面一定要做得很长,那么不要忘了在此长篇页面最上头,提供一个目录表,页面的内容也标上大小标题,便于清楚阅读。

  将篇幅过长的文件分隔成数篇较小的网页大大地增加了界面的亲和性,但在导航按钮与超链接的配置上,设计时则要更细心周全地安排,使读者不论身处站内的信息层中,依然能够快速便捷地通往其他任何一个信息分层。

  三、导航

  不用多说,导航作为网页设计的最重要组成部分,一定要放置在最明显的位置。浏览者进入网站第一时间就可以看到它,同时做出判断进入他们想要搜索信息的栏目。导航不完全等于栏目分类,根据信息要求,一个页面中可能出现多种信息类别的导航条,但是在同一页面中,导航也要分出主次。

  导航样式分类如下:横排导航、竖排导航、多排导航、图片式导航、Jump Menu下拉菜单、隐藏式导航等。为了适应不同信息的分类,有时候一个页面中还会有多种样式的导航。导航样式如此多,选用哪类导航更加适合网页风格的先决条件有两个:首先的要符合信息类别要求;然后是要保持页面的统一风格。

  1.横排导航

  导航不超过6个,通常为一排,横竖都可以。导航非常多的情况可以选择多排,如:http://www.flashkit.com。横排导航比竖排导航占用页面空间较少,适合信息量大的门户站点。现在的网站很多页面广告较大,导航位置可以在广告之上也可以在广告之下。

  2.竖排导航

  竖排导航按照人们的习惯通常放置到左侧,导航放置在右侧也是不错的选择,虽然不能作为主流设计,只要符合页面布局,效果也不错。

  3.图片导航

  图片导航用处很广,是美化页面的主力军。风格要与页面风格统一。图片导航最大的优点在于:当页面内容较少,画面较空时,可以利用图片导航占用面积大的特点弥补它(如图4)。

  4.JS隐藏导航

  从实现的角度来说,JS也是一种不错的选择。虽然可以把一些下级菜单隐藏在主导航下,优化了信息分层,但是由于其中一部分JS导航制作的不精准,点击效果不好。浏览者对导航的动态效果很敏感,所以制作尽量完美些,把握不好的技巧尽量不要用,否则会得到相反结果。

  5.Jump Menu下拉菜单

  Jump Menu下拉菜单经常用在跳转网站链接上,也就是首页友情链接的位置。Jump Menu下拉菜单可以节省页面占用的空间,但并非一切链接都可以放在Jump Menu里。一般情况字数较少的栏目名称链接、其他网站的友情链接、特别期刊的数字链接等,十分受用。

  6.Flash导航

  不管导航样式的选择、页面设计风格如何,实现导航制作的方法越来越趋向于Flash技术。导航是最吸引浏览者注意力,是任何一个浏览者不得不去寻找的页面重要元素。全Flash的网站设计较少运用到客流量大的站点,缓解这个难题,可以选择Flash导航。把导航设计成Flash的,一来可以增加趣味性,二来可以给访问者留下深刻的印象。但是切忌不要过于复杂,突出美感的动画效果即可。动画搭配声音效果,那就更完美了。

  四、页面设计元素要点分析

  网页中除了导航外还有很多极为重要的元素,如标志、图片、文字、链接、以及广告。它们的存在组成了网页页面。图片和文字是信息类型的主要两种形式,其次还有音乐和流媒体。各种尺寸的网络广告一直是页面中最吸引眼球的地方,也是最具有商业价值的元素。链接是组成互联网的必要条件,链接的方式也是多种多样的,不要过多的弹出窗口,同时要留意放置back、home等功能键。

  页面设计要有统一性,同时加强细节美化。有细节的页面会给人感觉精致许多。除了风格统一之外,网站给人的感受和气氛也很重要。烘托气氛是靠所有的元素协调产生。既然每种元素都有特点,我们来逐个看看。

  1.标志的应用

  标志的位置通常在左上,但不绝对。标志要有威严,切忌是动态的。标志不可以模糊,变形,它是网页的“神眼”。为了保障交换链接时标志可以十分清晰,标志设计不要复杂,色彩不要超过三种。

  2.图片的设计

  应用在网页中的图片分为:背景图片、网页插图、产品图片三种类型。图片的含义、类型、大小,直接影响页面给浏览者的感受。网页插图主要是绘画类图片、摄影类图片、经过创意设计的抽象型图片以及图表类统计图片。针对不同传播信息的含义选择相应类型的图片。

  图片要清晰,太大图片要进行分割,图片的主体含义简单明了,图片的文字清晰易辩。被选择的图片颜色也要符合网页整体色彩。

  缩略图大小适中,可以进行边角修饰。大量图片排版时,分散排版组合(图片并非齐齐挨着摆放,可旋转,可无序)可以产生轻快自由的感觉;块状排版组合(与分散排版组合相反)具有明显的理性感。视信息表达需要选择排版组合方式。

  背景图片活用可以节省大量图片占用的K数,利用背景图形的重复功效还可以解决分辨率大小的问题,渐变图片的背景效果很不错。

  3.文字排版

  文字是信息的主要载体方式,当然是页面中最不可少的元素之一。字体较多的网站里,文字的设计变得十分重要,特殊字体需要用图片形式表现,所以字体的选择也需要谨慎考虑。

  进行字体设计时,尽量不要使字体变形,被变形的字体通常不会美观的。大标题,小内文;粗标题,细内文;字体少,字形少;字体与网站内容相协调,于图片文字向协调,保持统一风格。色彩与背景有一定差异,保持可见性、易读性。全文排版,最忌讳不分段,一堆文字积在一起。字体大小要适中,保持页面整洁,阅读舒适。这些都是要运用得当的要点,文字的舒适程度直接关系到浏览者的心理感受,是十分重要的。

  4.超级链接

  文本超级链接通常要经过CSS样式的加工,鼠标置上时和鼠标移开时产生的色彩变化和字体大小变化,可以产生动感,色彩一定要与页面其他元素相呼应,如果满页都是链接的信息类型的站点,链接的颜色直接影响页面效果。

  文本超级链接通常是浏览者容易记忆,并且反复点击的元素之一,文本链接设计太花哨,也容易让人厌烦,选择超级联机的特殊效果要适度。使用JS效果的链接彩条,要与页面色彩相应。

  不要在一篇短文里提供太多的超级链接,那会损害了行文的流畅与可亲性。适当、有效率地使用超链接,是一个优良的导览系统不可或缺的要件之一。

  图片中加链接注意区域要准确,过小的区域不适合点击时相应的扩大一些。如果一个图片中有多个同向链接热点是很失败的。不仅混淆视听,使得访问者迷惑,到底是链接中那些是不同的?

  5.统一设计

  仅了解单一元素的重要性及其特点,这是远远不够的。把元素与元素之间的关系处理好,把握好各元素的统一风格,才能设计出好的网页。

  网站是由多个页面组成的,上级下级页面之间,同级页面之间,都需要有计划性的组织编排。网站设计要有整体规划,其内的页面要有一致性。不能只重视首页设计,而忽略内页。即使单一的页面设计非常好,也不能说明什么,网站需要的是完整性和整体风格的统一。

  五、色彩搭配解决方案

  经常上网的朋友都有这样的体会:经过很多网站,然而除了网站的内容会使人很容易记住它以外,其次就是突出色彩搭配。拥有成功色彩搭配的网站令人过目不忘,色彩的情感与内涵也会影响浏览者从感官到理性思维对网站的理解,网页设计中色彩的选取与搭配是一个系统的知识体系。色彩搭配不能依靠“感觉”,也不能仅依赖色彩理论。想要做好色彩搭配,真正依靠的是自身的鉴赏能力、丰富的实践、观察生活的积累、对色彩的执着体会。

  这里,我总结几条最实用的色彩搭配方法,可以帮助对色彩设计缺乏灵感的朋友解决色彩搭配的问题。

  1.主题色的确立

  无论针对整个网站还是单独页面,进行色彩设计的第一步是确立主体色。主体色可以是一种也可以是几种,它是浏览者对色彩的印象总述,如新浪是黄色的,榕树下是绿色的,MSN.COM是蓝色的,Google是白色的。如果打算在同一页面中运用多种颜色,那必须在几种色彩中确立主从关系,以免色彩混乱无章。

  辅助色分主要辅助色和次要辅助色,它们配合主题色彩在页面中的分配位置与占用面积大小是有差异的。

  建议:没有把握时,只确立一种颜色为主题色。

  2.色彩心理感受

  看到红色可以联想到火焰和热情;看到橙色可以联想到水果和健康;看到黄色可以联想到金子和快乐;看到绿色可以联想到草地和生命;看到蓝色可以联想到海洋与科技;看到黑色可以联想到夜晚和死亡;看到白色可以联想到雪山与纯洁;看到灰色可以联想到水泥与中庸。不论是实物联想还是抽象情感,色彩的意象和象征意义可以影响到浏览者对网站所产生的深层心理感受。

  色彩分冷暖色系,开放式信息站点不适合选用冷色系。色彩的冷暖感觉是相对的,不是绝对的,是比较而言的。如比橙色冷的绿、黄绿,与青色相比又觉得暖些。门户类、儿童类、医疗类站点要选择暖色调的配色,或者会给人不受欢迎的感觉。

  红、橙、黄等暖色系列的纯色给人以兴奋感,易表现快乐的情绪。蓝、蓝绿等冷色系的纯色给人以沉静感。常常使人联想到和平、安静、休息和生机盎然。它还是一种使人镇静的颜色。黑白对比强烈的色彩给人以紧张感,灰色及彩度低的色彩给人和谐而舒适的感受。政府、一部分企业站点应该选择沉静一些的配色,而娱乐、体育等站点则应该倾向于兴奋一些的配色。

  色彩的轻重基本上是由明度决定的。明度越低越显重,明度越高越显轻。明亮的色彩如黄色、淡蓝等给人以轻快的感觉,而黑色、深蓝色等明度低的色彩使人感到较重。感觉轻的色彩给人以轻快感,也使人感到不够安定。在网页设计时,应注意轻重搭配。女性类的站点宜采用明度高的色调为主进行配色,以渲染女性温柔、妩媚的个性特征。为了突出男性坚实粗扩的气质,在男性类网站中,色彩的配置应选择凝重明度的色彩。

  建议:掌握色彩心理,即使无法搭配出很具特色的色彩设计,也不能让你的浏览者对网站的色彩感到厌烦,这是至关重要配色原则。

  3.同色系的配色

  同色系的配色是最为保险的色彩搭配法则。明度、色相、彩度三种数值,其中两种不变变换其中一种的配色方法:

  同色相不同明度的色彩搭配。如主题色为深蓝色,选择深浅不一的其他两种蓝色作为它的辅助色彩进行配比设计。这种方式很保险,只要把握明度不同(即颜色的深浅不同)就可以了。

  同彩度不同色相的色彩搭配。如红色为主题,搭配同样彩度的绿色、黄色、紫色等进行设计,色彩的彩度相同的不同颜色(色相)的设计,也是比较好把握的。

  同明度不同色相的色彩搭配。情况同上。

  建议:明度或彩度不变,色相变化的这两种情况,要根据站点需要进行搭配,它比较容易变成页面全盘灰或全盘亮。调节这个的办法很简单,利用黑白灰,进行融合搭配,提炼视觉设计的重心。

  4.以“商品色”为依据的配色

  根据商品色进行配色是最常用和稳妥的一种配色方法。如咖啡的褐色调子、食品的暖调子、新鲜食品的绿调子,几乎成了配色设计中的主流。为了使整体网站具有较强的识别特征,有控制的略加变化的色彩配制,突出重点信息的色彩特征,才是以商品色为基础的配色的关键。

  建议:有些产品色是不定向的,如服装品牌多件衣服;有的产品是虚拟的、抽象的,如音乐MP3、图书。出现类似的情况,可以根据行业色彩、包装品设计的色彩来确定主体色。例如:海产品选择蓝色,农业类型的站选择橙色。

  5.跳跃式的色彩关系

  明度、色相、彩度三种数值均不同的色彩搭配是较有难度的,这样跳跃式的色彩关系不好把握。配色时要多尝试,多做几套来对比选择。

  建议:如果你对这样的色彩搭配原则没有把握,那么不管三种数值如何变化选择,把主题色保持在一到两种之间。

  6.渐变色彩也不错

  色彩的渐变是指一个色相向另一个色相逐渐过渡,或在同一色相的基础上,由一种明度向高或向低的明度逐渐推移,由一种彩度向高或向低的彩度逐渐推移。通过渐变得到的色彩往往比较温和,易与其他色彩调和。

  渐变的方式也有很多种,以以上原则为准选择色彩渐变的点。背景渐变是流行之一。

  建议:如果没有把握的情况下,不要选择多个渐变点。

  7.黑白灰是宝贝

  黑、白、灰有明度的差别,没有彩度的差别。做为调节、隔离等因素在色彩搭配时经常使用,它们也叫做无彩色。

  建议:白色一直不被人注意,可以称为隐藏色,然而白色却是最好用的颜色之一了。主体色彩较多时,使其色彩面积小一些,然后选白色为背景缓解色彩冲突、色彩激化的心理感受。黑色作为主体色不适用于商业类型的站点。灰色应用在时尚、女性、阅读类网站十分合适,但尽量不要使用到商业类型的站点中,会降低企业形象的气势。相反装饰、艺术、文学类用到灰色、紫色反而显得高雅,有韵味。

  8.注意网页插图的色彩影响

  大家都知道框架色彩、导航色彩、装饰色彩、文字色彩、链接色彩变化等会影响到页面整体色彩关系,但最重要的还是网页中图片的色彩影响。图片大的情况是配色时重点考虑对象,如果图片不定,也就是色彩不定,那么其他颜色尽量选择白色及淡雅素气的颜色,以适应不同情况的图片。

  建议:在图片色彩不定的情况下,选择很浅颜色作为背景色和页面主要色彩,以保证烘托主体信息。

  9.页面中色彩的分布

  有了主体色、辅助色、次要辅助色之后,我们首先必须考虑页面信息布局中的每一部分对用户的重要程度。依据信息主次关系放置色彩。吸引视线的导航、菜单按钮处、划分页面框架的界限处要加深色彩,而文字背景色、网页背景色颜色较浅。

  建议:配色时,要做细致调整,以最完美效果为目标。以上介绍的多种色彩配制方法,不是设计时的教条,要注意灵活搭配和结合使用。

  六、风格创意展开的切入点

  网站的整体风格及其创意设计是专业设计师和个人主页最难把握的。它没有一个固定的模式可以参照和模仿。即使有根可寻,如果拿他人为己用,会变成抄袭,变得平庸化。一个主题,给你固定的信息内容,任何两人都不可能设计出完全一样的网站。

  解析现有金属风格、像素风格、报纸风格、包装盒风格、三维风格、卡通插画风格等几种特有风格。典型代表如下:

  金属风格 http://www.eyeball-design.com

  像素风格 http://www.iconcn.com

  报纸风格 http://www.theblot.com

  大字报 http://www.koreawebart.org

  包装盒风格 http://www.musikkbibioteket.no

  三维风格 http://www.milla.de

  插图风格 http://www.tokidoki.it

  卡通风格 http://www.preschoolprotocops.com

  根据上列网站的信息内容以及创意风格相比,我们可以发现很多站点是根据它的信息类型确立的风格设计,如好莱坞娱乐报纸http://www.theblot.com,选用的就是过去油印报纸的设计风格,不但效果特别,在网络上也是鹤立鸡群。卡通与插画风格的站点就更不用说了,站点主人要不就是插画家,要不就是Flash站点。

  虽然说上列网站均拥有特殊风格,但一般化的网站就没有办法做出特别的风格吗?肯定不是,那么该如何展开呢?

  其实,只要把页面上任何元素激化,均可以形成独特的网站风格。简单地说:想要形成网站的特殊风格,需要先确立突破点,利用其他页面元素配合,营造出某种特殊情感和网页氛围,这样就可以达到目的了。上面所提及的网页风格,只是开阔思路的方向。除了那些一眼便可以让人们确认的特征外,还有很多小的物件也可以影响网站的整个风格要素。

  1.以导航作为切入点

  (如图5)古雅装饰(http://www.relen.com/clent/guya)是我的一个客户单,进行创作时,我把网站的导航扩大化,配合没有多少内容的企业信息结构,同时利用VIS色彩体系,强化标志色彩,利用辅助图形调节插图背景。这样形成了特殊的网站风格,受到客户的青睐。

  特殊导航所形成独特风格的网站很多,用我自己的作品抛砖引玉,你可以自己试着揉和信息结构来展开创意。

  2.以信息特点作为切入点

  (如图6)台湾作家染香群的作品大胆、神秘、动感、维美,从女性的角度深入感觉生活的秘密,像诗歌,像电影,同时她的另一个名字叫蝴蝶。这些都是我创作她的个人主页时最主要的切入点。我用了鲜亮的色彩渐变,同时选择了神秘的黑色压住过强的色彩感受,正巧她起的栏目名称中均含有蝴蝶二字,配合我选用的具有蝴蝶加女性的插图效果,还使用白色横条加强对比。这一切形成了如其作品给人的视觉、触觉感受(http://www.iseba.net)。

  以信息特点作为切入点的网站也不少,其形成的网站类型通常气氛烘托十分到位,一看便知道是怎么回事。可以学习一下美国韩国推出的经典影片的官方站点,那些站点通常是信息与个性揉和的非常完美的Flash大站啊。

  3.以网页框架作为切入点

  (如图7)打开Glro的站点,惊叹它的网页框架设计非常特别。网页框架的划分是为了符合信息结构,但是人们往往忽略了划分区域的装饰。其实就是看你用什么来划分区域了。

  4.以装饰边角作为切入点

  (如图8)funkworks早期有个版本(http://funkworks.com),整个页面很空,唯有页面上的角修饰、点修饰十分突出,由这些装饰边角形成了这个版本网页的特殊风格设计。看来绝对不能忽略了细节设计,往往小物体,达到一定的数量,就可以形成强烈的视觉感觉。

  5.以栏目名字作为切入点

  记得某个网站在其注意的每个菜单按钮前都加上中文大写数字:壹、贰、叁、肆等,配有特殊的按钮设计风格,进而升级为网站风格。所以大到框架、小到边角按钮都是创意展开的切入点,全部不能忽略它。

  6.以色彩搭配作为切入点

  色彩风格出众的网站太多了,并不是说色彩选择都是不常用的搭配,有些甚至把常用的色彩关系用的十分出色,做出了独特的特点。

  7.以Flash技术作为切入点

  以很酷的Flash技术震住浏览者的网站太多了,这里随便给大家介绍几个网站。

  http://www.relevare.com/site

  http://www.xururu.org

  http://www.haroldsplanet.com

  http://www.dform1shiftfunc.net

  还有很多可以展开创意设计的“点”,这些就是上述讨论的激化它们得到风格的方法。其实关注由日常生活,到风土人情,到宗教信仰,这些都可以改观浏览者对网站的感觉。凡是当你做设计时能想得到的,做得出来的,统统可以搬到网页上来。不论是钢管水泥,游戏场景,机器仪表,外星球探险等。这些天马行空的想象,都可以创作出具有个性化特色的网页设计,虽然不一定适用于商业类型的站点。但个人主页是网络大家族不可缺少的重要成员。

  七、设计师要关注的网页技术

  网络技术,只是一个很笼统的名词。它包含了很多类别,不论是前台页面效果、后台编程技术、网络基层建设、流媒体视频、motion动画编程、虚拟现实、宽带三维应用等等,只要属于电脑技术和网络环境实现可实现的技术。在今天的网路上,应用的深度和广度各有不同。网络技术虽然包含很多,大型网站建设也并非是一个很简单的工程,分工合作,设计师和程序员各司其职,共同完成。

  现阶段,从网页设计师角度来说需要关注的问题主要是一下2个:

  1.动态(Dhtml)网页

  在制作动态网页的过程中,要特别注意两大主流浏览器对动态HTML对持的程度是不同的,要使网页适应不同的浏览器,在程序中的一些具体操作上要分别设计。

  考虑到网页“负担”太重,网络不能保证等等多种问题,在页面设计的时候,尽量不要放置过多的动态技术。使用的时候,也要考虑到同等效果的页面,是否可以用不同的解决方案制作,哪种相对简洁和方便,不用牺牲太多的下载时间。

  现在网络上动态dhtml运用较多且效果较为美观的是:无边框窗口、dhtml式的导航条、以及一些特殊的动态效果。这里我推荐你去看看groinger博物馆 (http://www.groninger-museum.nl/)。全屏方式的网站完全没有窗口边框的限制,整个站点洒脱极了,整个站点运用多种颜色,搭配合理,页面排版分配适当,窗口叠加、定位,制作精致,各个方面都设计得当,是使用动态网页的典范。

  2.Flash技术(多媒体)

  Flash建站这里专门进行介绍,QuickTime加Flash技术的网站也为数不多。

  八、VIS让网站设计更上一层

  网页设计中加入VI的企业理念,会加强网站品牌化发展,帮助企业树立形象。网站VI方便了网站推广工作从网上转移到网下,例如以网络寻呼起家的腾讯公司,品牌代言企鹅的毛公仔,如今已经遍布大街小巷了。

  但是网站VIS可以说是神秘客,只闻其声,不见其影,很多人摸不着头脑,不知道如何把它们加入到网页设计中来。

  首先了解必要的概念知识,VI是以标志、标准字、标准色为核心展开的完整的、系统的视觉表达体系。将企业理念、企业文化、服务内容、企业规范等抽象概念转换为具体符号,塑造出独特的企业形象。视觉识别设计最具传播力和感染力,最容易被公众接受,具有重要意义。把VI设计这一理论应用到网站整体形象规划与设计开发上来,无疑是把网页设计推向正规化、品牌化发展。它可以起到更好的视觉效果和企业形象特征,便以宣传和识别。

  概念不多说了,从视觉设计上,首先要做到以下几点:

  (1)设计几套标志、网站名称、网址的组合,重复应用于本网站中,应用于相关网站交换链接中,长时间的使用这种视觉识别符号。不允许随意更改、变形、保持清晰,可以加强网站的视别力度。

  (2)网站色彩改版后也不要更换。这点很多网站根本做不到,觉得改版还不换颜色那改的是什么?问题就在这里!改版改变的不是网站设计,而应该是信息结构优化、信息布局的优化。

  (3)网站的整体风格设计要统一,主页、内页风格一致。这点可是最起码要做到的。整体风格的形成是由具体元素形成的,也就是说,每个页面中要使用同样风格的按钮、导航、文字大小、插图风格、色彩系。