当前位置:首页 > 建站百科

网站设计

网页设计是网页制作过程中的一部分,也是网页的主题思想,优秀的网页设计不单单要考虑到审美的优势,还要考虑到网页的实用性和宣传性以及用户体验的考虑。通常网页设计是直观的色彩和布局构成初步印象,在此基础上实现价值营销的二次升级。单纯为“设计而设计”的网页是不合格的。通常网页设计由设计师通过设计软件(Adobe 公司提供的photoshop或CorelDraw软件)设计出效果图,然后使用adobe dreamweaver软件实现为符合w3c标准的html格式。

网页设计注重色彩的搭配,一般网页主色调不超过3种(相近色算一种),不同色彩搭配给人不同的行业气息,网页设计效果是先从直觉的感官到理想的思考,浏览者能从网页设计布局中以最快的方式获取对自己最有价值的内容信息,通常一个网页的设计决定一个浏览者的浏览时间,拒绝在获取有用的信息同时让浏览者审美疲劳。这样网站前端的交互效果也必不可少。

网站设计概述

网页设计包括了网页前端和后台程序两个部分的,一个设计师如果不了解后台程序,那么他就不算是一个合格的网页设计师,他也不可能做的出好的设计作品,所以学网页设计的都是前端美工和后台程序结合学习的。网页设计是一个整体,从首页设计到二级到最终内容页面都是紧密相关,网页设计需要定位一个主题也需要网页设计师统筹整个网页的连贯性,这是有区别与平面设计最关键的地方,通常网页设计并不是一种真正的网页实体,而是一种设计结构或者设计效果图,与因特网上的可浏览网页有很大区别,就如同建筑设计图纸和建筑之间的关系。网站设计是网站建设的第一步也是关键的一步,好的设计稿能很好的定位网站达到预期效果。


草稿和设计图.jpg    设计图.jpg
 
 

网页设计中色彩的影响

设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择。颜色是很有力的工具,所有设计师在设计网页时就应该明白这一点。
 

一、颜色术语

你们当中很多人可能已经在学校学过一些色彩基础知识,让我们快速回顾一些术语,来更好的把握色彩和运用色彩。所有的色彩能在一个色轮中呈现。在这个色轮中,我们能把颜色分成3大块:原色,辅助色和第三颜色。三原色分别是红色,蓝色和黄色。这些色彩是基础色,他们组成了色轮上的所有其他颜色。把原色混合在一起,你就能得到辅助色,它们是橙色、绿色和紫色。A Look into Color Theory in Web Design

 

二、颜色的关系

描述颜色有大量的术语,了解这些术语将有助于我们讨论的色彩和色彩的情感含义。互补色是互补互调的色彩,它们坐落在色轮上对立的位置。这些互补色有蓝色和橙色、紫色和黄色、以及红色和绿色。邻色是色轮上相毗邻的色彩,所以当邻色一起用时,可以是很好的搭配,但不会有明显的对比。第三颜色是由中间色组成的,例如黄绿色和蓝绿色,即由一个原色和一个辅助色混合组成。

 

三、基于情感的色彩群体

一些色彩群体是和情感联系在一起的,比如温暖、冷静和中立的情感。暖色能让人感觉到温暖,例如红色、黄色和橙色。冷色让人联想到凉爽和寒冷,例如蓝色,绿色和紫色。中性色,顾名思义,并不创造怎样的情感。像灰色和棕色就是中性色。了解色彩这些方面的知识可以用帮助一个设计师在设计网页时不用文字就能表达特定含义和特定情感,并彰显优势。

 

四、设计中颜色的类型

这里有两种不同的颜色系统,两者的运用取决于你设计什么。RGB是这个色彩系统中三个基本色“红、绿、蓝”的英文缩写,这三种基本色是光的三原色。RGB运用在电视电脑屏幕和任何类型的屏幕上。CMYK是“青色、洋红、黄色、黑色”的英文缩写,这些颜色是颜料的原色,CMYK被运用于印刷。网页上的设计是建立在RGB色彩系统上的。

 

五、明智地选择色彩、传达意义

色彩理论是运用颜色背后的意义给用户带来感官体验的实践所得。这种实践经验再加上一些知识和想法可以运用到网页的设计中去。人们往往不会同意一些特定色彩的含义以及设计师们应该用哪些颜色来加强特定的情感。但无需争论的是,客户对颜色是有情感的反应的。当为你的设计品选择颜色时要慎重,不要无目的地使用颜色。你所选择的颜色要适合你的目标受众、能表达客户希望你传达的信息,能符合你对用户在你的网站所获得的整体感受的期望。暖色能带来阳光明媚的情绪,用在希望带来幸福快乐感觉的网站上是明智的。举一个例子,在2009年全球经济不太好的时候,黄色变成了网页设计中非常流行的色彩,因为公司希望顾客在他们网站上有到阳光和舒适的感受。冷色最好是用在想要表达出专业或整洁感觉的网站上,以呈现出一个冷静的企业形象。冷色表达出权威、明确和信任的感觉。例如,冷静的蓝色用在许多银行的网站上,比如大通银行。冷色运用在以乐观为主题的网站上是不明智的,因为用户会得到错误的印象。六、颜色对于用户的意义大多数颜色能表达积极或消极的情绪,这取决于它是怎样被运用的,以及周围其他的颜色,还有网站本身的内涵。

颜色轮.jpg   颜色轮.jpg

红色
红色象征着火和力量,还与激情和重要性联系在一起。它还有助于激发能量和提起兴趣。红色的负面内涵是愤怒、危急和生气,紧急情况下,和愤怒,这也源于红色本身里的热情和进取。

橙色
橙色是色轮上红、黄两个邻色的组合色。橙色象征着幸福,快乐和阳光。这是一个欢快的色彩,唤起孩子般的生机。橙色没有红色那么积极,但是它也有一部分这样的特质,刺激着心理活动。但它也象征着愚昧和欺骗。

黄色
明亮的黄色是一种幸福的颜色,代表着积极黄色特质:喜悦,智慧,光明,能量,乐观,和幸福。一个昏暗的黄色则带来负面的感受:警告,批评,懒惰,和嫉妒。

绿色
绿色象征着自然,并且有一种治愈性的特质。它可以用来象征成长与和谐。绿色让人感到安全。医院经常使用绿色。另一方面,绿色的是金钱的象征,表达着贪婪或嫉妒。它也可以被用来象征缺乏经验或初学者需要成长(“没有经验的绿色”)。

蓝色
蓝色是一个和平、平静的颜色,散发着稳定和专业性,因此它普遍运用于企业网站。蓝也可以象征着信任和可靠性。一个冷调的阴影能带来蓝色消极的一面,象征着抑郁,冷漠和被动。

紫色
紫色是皇室和有教养的颜色,代表着财富和奢侈品。它也赋予了灵性的感觉,并鼓舞创造力。较浅的紫色可以散发出一种神奇的感觉。它能很好地提升创造力和表达女性特质。较深的紫色可以呈现出沮丧和悲伤的情绪。

黑色
虽然黑色是不是色轮的一部分,它仍然可以被用来暗示感觉和意义。它往往是与权力,优雅,精致,和深度联系在一起。据说在面试时穿黑色服装可以表现出应聘者是一个有力量的个体,网站也是同样的道理。黑色也可以被看作是负面的,因为它与死亡,神秘和未知联系在一起。这是悲伤、悼念和悲哀的颜色,因此在运用时必须明智选择。

白色
白色,也不是色轮的一部分,象征纯洁和天真。它还传达着干净和安全。相反,白色还可以被认为是寒冷和遥远的象征,代表着冬天的严酷和痛苦的特质。

不需要描述性的文字,颜色就能赋予网站以意义。无论你是否打算为他们加上某种意义,颜色本身就有许多特定的印象。用户浏览网页时,颜色帮助转移用户的视线,指引用户怎么去浏览一个页面。在许多企业的网站中可以看出,颜色表达了情感和价值观,向用户展示着他们的公司是怎样的、他们所售卖的产品是怎样的。仔细挑选补色能让你更好地运用颜色,一旦选定后你想要表达的意义也就显示出来了。配对色的运用能改变一个网站的意义。给以柔和的蓝色为色调的、表达出平静网站配上明亮的橙色,就能让它变成让人更多感受到兴奋和趣味的网站。也许你的客户认为你所设计的网站深灰色过多、太过严肃,加上柔和的蓝色能让你的网站有平静、平和的基调。

 

六、网页色彩专业术语

色调(hue)是最最基本的颜色术语、通常用来表示物体的颜色。当我们说红、蓝、绿时,我们说的就是色调。设计的色调可用来给网站的访问者传递重要信息。
色度(chroma)是指颜色的纯度
饱和度(saturation)是指某一色调在特定的光照条件下是如何呈现的。可以把饱和度看成是色调的强与弱、浊与清。
明度(value)也被称作亮度,它是指颜色的暗与明。

网页设计需要考虑布局

一个网站是由许许多多网页组成的,网页前端框架是网站的主心骨。一个精美的网页不仅仅是依靠图文并茂的视觉展示,更重要的是网页的架构和布局,合理的布局才能让网页易于用户接受。 对于网页设计的初学者来说,网页如何布局是一大难题。其实,要了解其中的技巧并不难,只要明白了主推产品的特点和用户的需求,根据这个来设计网页,保准错不了。下面,达内数字艺术学院深圳网页设计培训部的老师介绍一下网页布局的几种类型,大部分网页设计都不离不开这几种类型。网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。
 

1、“国”字型: 也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

2、拐角型: 这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。

3、标题正文型: 这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。

4、左右框架型: 这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。

5、上下框架型: 与上面类似,区别仅仅在于是一种上下分为两页的框架。

6、综合框架型: 上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。

7、封面型: 这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。

8、Flash型: 其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

9、变化型: 即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。

关于第一屏
所谓第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲,在800*600的屏幕显示模式(这也是最常用的)下,在IE安装后默认的状态(即工具栏地址栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。 说了那么多,无非是一个标准的问题,其实接下来不用我说大家也能想到,第一屏当然要放最主要的内容,关键要知道的是,我们要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。 

有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会小于上面所说的435px,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多。

什么样的布局是最好的
这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。还没有提到的就是变化型了,我只是想把这个留给读者了,因为,只有不断的变化才会提高,才会不断丰富我们的网页。 所谓万变不离其宗,掌握了这几种类型的网页布局,可以尝试简单制作一下,这对于初学者来说是一个很好的锻炼。了解用户的需求和产品需要展现的特性是网页设计的关键,这对网页整体布局也很重要。网页布局是否适宜也是关系到产品的营销,所以,网页设计呀考虑综合因素,不能单凭自己洗好来设计。

不同的设计理念

 

设计经验

一、网页细节:
简约不简单,可以说将网站大气的得要特点表现的淋漓尽致。简单的色调,简单的框架,这些可以都说是简约。那么如果做到不简单,这就要体现在网站的细节之上了。很多时候都是一些地方的细节刻画得不够,才导致整个网页的整体失调。可以说:在网页设计中,细节决定成败, 愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计。网站的细节表现于网站页面中的各个地方,如一个小阴影都能给人很多不同的感受。
二、留白:
大量留白会使页面有空间感,不会因为页面内容密密麻麻而产生厌恶。
三、色彩简洁:
太多颜色控制不好会容易失去整体平衡,主要在制作前确定一个主色,一个辅助色,一个点缀色。
四、素材的选取:
在选取素材的时候,可以首先考虑:山河湖海,全景图,或者有代表性的建筑或者标识;再者可以挑选带有积极向上性质的元素,如“鸽子,绸带,马路,教堂,屋顶、太阳”等;再就是中国风元素:水墨风格、书写体、古代物品(瓷器,鼎之类)。
把握好全局,才能控制你的风格。在耐心听取客户需求的同时,设计师也要适时表达自己的想法和建议。在修改设计稿的时候,对方所想要的“大气”可能只是某个元素问题,但他也确定不了是哪部分有问题,所以会用含糊的概念去告诉你。但作为设计师本人也要仔细思考,先尝试关键部分的内容修改,比如尝试换新的字体,去掉多余元素等等。

 

扁平化设计

扁平化的概念最核心的地方就是:去掉冗余的装饰效果,意思是去掉多余的透视,纹理,渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。

优点

1.降低移动设备的硬件需求,延长待机时间;
2.可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生;
3.随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。扁平化更易于网站前端工作

在扁平化设计目前最有力的典范是微软的Windows以及Windows Phone和Windows RT的Metro界面,不得不说Microsoft不愧为扁平化用户体验开拓者,如此大胆的尝试与实现,不得不让人佩服。与扁平化设计相比,在目前也可以说之前最为流行的是skeuomorphic设计,最为典型的就是苹果iOS系统中拟物化的设计,让我们感觉到虚拟物与实物的接近程度,iOS、安卓也已在向扁平化改变。

缺点

扁平化反对者认为:
1.降低用户体验,在非移动设备上令人反感;
2.缺乏直观,需要一定的学习成本;
3.传达的感情不丰富,甚至过于冰冷。
 
 

网页设计技巧


下面详细介绍各页面的设计技巧:

一、首页设计技巧

网站首页是企业网上的虚拟门面,在此,提醒上网的企业注意自己门面的设计,决不能敷衍了事、马马虎虎。我们会经常看到印刷精美的产品目录或广告,当您屡屡看到那些印有产品目录或广告的精美印刷制品的时候,相信您或多或少会对有关的产品形成一种好感,即使您不会购买,也必然对这些产品形成一定程度的认同。而对于设计毛糙的宣传品,您肯定会怀疑其内容的真实性,从而对其产品或服务产生质疑。好,现在说说网站的设计,相信您会同意这种说法:网站的页面就好比是“无纸的印刷品”。既然如此,我们会因此而得出一个结论:精良和专业网站的设计,如同制作精美的印刷品,会大大刺激消费者(访问者)的购买欲望,反之,您公司所提供的产品或服务将不会给消费者(访问者)留下较好的印象。值得一提的是,除非您的企业有专业的网站规划、设计人员,否则您最好找专业公司或专业人员为您设计制作,一个优秀的专业设计人员会很快明白您的意图,并根据您的建站目的提出建设性的意见。

一般来说,网站首页的形式不外乎有两种,一种是纯粹的形象展示型,这种类型文字信息较少,图像信息较多,通过艺术造型和设计布局,利用一系列与公司形象和产品、服务有关的图像、文字信息,组成一幅生动的画面,向浏览者展示一种形象、一个氛围,从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力,能够努力挖掘企业深层的内涵,展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导,通过色彩、布局给访问者留下深刻的印象,当然,我们不能为了设计而设计,我们的目的是营销,在设计过程中一定要牢记这一点!

另一种是信息罗列型,一般的大、中型企业网站和门户网站常用的方式,即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等,也就是我们上面谈到的框架页,这种风格比较适合网站信息量大,内容丰富的网站,因为是以展示信息为主,这是的设计就要在细微之处体现企业形象,建议设计人员最好仔细阅读企业的CI手册,熟悉企业标志、吉祥物、字体及用色标准,在网站的局部体现出来,往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象,从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。

二、风格保持一致——内页设计技巧

如何保持网站风格的一致,是进行内页设计过程中考虑的重要方面,根据我的经验,您可以尝试以下几种设计方式:

1、结构的一致性:我们知道,网站的统一性在网站营销中占重要地位,而网站结构是网站风格统一的重要手段,包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等,到国外著名的电子商务网站浏览,你会发现这些网站结构惊奇的一致性,所不同的是色彩或内容,在结构的一致性中,我们要强调网站标志性元素的一致性,即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等,这种方式是目前网站普遍采用的结构,一方面减少设计、开发的工作量,同时更有利于以后的网站维护与更新。

网页设计应该注意

第一、要具有特色
不管是新闻网站还是商业网站,具有一定的特色可以把网站的宗旨和理念有力地予以诠释,力求简单易记、形象生动、冲击力强、彰显力量。例如,一个设计精巧的LOGO,就能给用户带来惊喜,能够迅速地吸引用户的眼球,能在用户的心中留下深深的印记,最终提升网站影响力。

第二、整体设计简洁
文章发布的网站主要形成和性竞争力的功能就是提供海量切高价值的文章信息。用户访问的首要目的就是为了满足文章信息需求,目标明确切行为直接,就要做到表现形式与文章内容的和谐统一。在设计首页的时候,要力求整体简洁、朴素,色彩搭配顺畅、均衡、和谐;页面布局大方,过度协调、合理,字间距、行间距适度。同时,要强化文章信息本身的功能,切不可让广告太过眩,因此要屏弃杂乱无章的广告、友情链接等,让用户在消化文章信息时不会受到过多的干扰,高效、舒心的享受文章信息大餐。让目标受众畅轻松的网上信息之旅,应为网站所孜孜以求的重要目标之一。

第三、栏目分类清晰
网站首页是对所提供的文章及特色服务精心设计与组合的载体,能有效地引导用户快速查找到所需新闻或服务,并实施单击浏览行为。为了页面整体上的美观以及用户查找访问的方便,有必要对文章信息及相关服务进行必要的分类,形成清晰、合理、可行的栏目规划,进而设计成网站地图,网站整体架构一览无余。首页就像饭店的菜单一样,可以引导用户轻松、快捷的按需要“点菜”,如果栏目分类不清晰,会让用户有不严肃的感觉,也会让他们陷入信息迷潭,不知道自己需要的新闻信息或服务应该在哪里查找,某种程度上降低了访问效率,有可能导致用户流失,甚至经由用户的口口相传导致更多的用户的流失。所以,网站首页设计,最怕的是“首页是个框,文章全部往里装”,这是一种极不负责任的行为。如果同一篇文章在多个地方同时出现,用户就会无所适从。

第四、局部创新
网络无定规,创新无止境。网站要在各方面保持持续创新的态度,尤其是直接与广大用户面对面的首页。因此,网站首页的内容布局和总替风格,可以在保持相对的基础上在局部位置大胆求新求变,以改变呆板、落伍形象,适应广大用户求新、求变、求奇、求特的心理,保持用户的持续兴趣。尤其是首屏,可谓寸土寸金,应根据阶段性工作部署,有针对性地做出部分调整,给用户不拘一格的创新形象。在这点上,可以借鉴传统平面媒体的经验,在字体、字号、颜色、排向、图片构图等方面根据文章内容以及文章引导的需要做出相应的调整。例如,对LOGO、Banner,以及文章图片等的位置,可以做出更加大胆的设计。淡然,用户满意与否,是决定的依据,闭门造车、一厢情愿的升级改版,只会吃力不讨好

原型图对网页设计的帮助

网页设计师天天和产品打交道,不时要做一些页面原型、离不开各种工具,工欲善其事必先利其器,好的工具软件可以大大提高工作效率,工具各有优劣,大家按需取之。Web应用原型设计工具及软件应用原型设计工具!

网页设计是一中“体力活”,这不为过,如何提高效率?很多时候我们需要定位布局,然后找到主题色彩,还有风格定位,创意附加等等,如果一下子实现在网页设计图上将是一件很难的事情,随之我们出现了网站设计前先设计网站原型图。网站原型图是提高网站设计效率的一种方法。

网站原型图优点不言而喻,但是缺点是,网站原型图也需要开发时间。

axure.jpg                                          思维导图.jpg

原型图软件axure                                                                                                      思维导图

关于网页设计师

网页设计师是指精通Photoshop,Coreldraw,Frontpage,Dreamweaver等多项网页设计工具的网页设计人员。网页设计师可以将平面设计中的审美观点套用到网站设计上面来(其区别是动态网页的制作是平面设计不能达到的,它是一种审美方式的延伸)。 网页如门面,小到个人主页,大到大公司、大的政府部门以及国际组织等在网络上无不以网页作为自己的门面。当点击到网站时,首先映入眼帘的是该网页的界面设计,如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。这一切都是网页设计的范畴,都是网页设计师的工作。

网页设计师就是为网站页面进行设计并制作的工作人员,他们既是专业的设计师,又是静态网站的开发工程师;总的来说网页设计师是最辛苦的行业,不仅要懂页面的设计、规化、排版、HTML代码、FLASH动画甚至还要多懂一些代码,必须是个全能人才,特别是在2008年之后,W3C的推进,对网页设计师的标准也是越来越高,越来越精确;网页设计师预计将有意识的可用性,如果他们的作用,需要创建标记,那么他们也有望成为最新的网页易读性指引。

网页设计应该有更多的思索在里面,每一个元素都是思索的产儿,而不是随意的点缀。当然,感性的爆发也必不可少,因为她是艺术,是商业化了的艺术、技术化了的艺术。如果有客户认定网页设计是一件简单的不能再简单的排版,那让他们去找打印部一分钟能敲出200个字的小女孩去做吧。因为,我们--要为网页设计师正名!

网页设计的主次关系

良好的网页设计一定主次分明,比如:网站布局为主,设计创意为辅助,网站主要内容在首页,次要内容点击查看,主要内容重点突出,次要内容要略微承托。

网页设计也是有“头”,“身体”,“脚”等“肢体结构”。这些结构主次分明,这也是国内网页设计的一些主流观点,但是也有左右布局或者其它类型的布局,百变不离其宗,都是主次分明,给浏览者一种顺序感,相对平面设计来说,网页设计师更需要把握和运用这些,通常区分主次关系的技巧有:
1.颜色色彩的“轻重”
2.网站布局的先后或者上下
3.图片表现强度
4.视觉差效果
 

用户体验的提升


什么样的网页才是好的网页?对此,任何简单的定论都是不负责任的,但我还是想从我的角度谈谈网页编写时一些涉及到用户体验的地方。

  (1)是否遵循逐步退化理论?

  在设计网站的时候,我同时在IE和FIREFOX上做测试,一来是考虑到浏览器的兼容性(IE与FireFox采用不同的解释器),二来则是由于火狐关闭JavaScript非常容易,我可以方便地测试网站在没有JS支持情况下的运转情况,因为在某些地方,JS确实是禁止打开的。根据退化理论,你的网页要在没有JS或VB脚本支持的情况下能够正常运转,只是用户在一些体验方便会不可避免地受到些损失。如果某些功能确实依赖于脚本,我并不反对使用noscript>标签,虽然它并不包括在W3C标准里面,但我觉得,至少应该告诉用户哪些功能是不能使用的。这其实也正是DHTML所犯的一个错误,为了一种动态技术而去牺牲掉那些不能使用脚本的用户。

  另一点需要清楚的是,不但JAVA脚本可能不被支持,CSS也可能不被支持。对此我们该如何呢?首先,我并不赞成回到标签布局的时代,其缺点不再赘述,那么下一点就被引出来了。

  (2)是否充分使用语义化标签?

  语义化标签是现代HTML作为网页结构描述的一个显著特征,其代表性标签包括<h1>到<-h6>、<p>、<ul>、<li>、<address>等等,这些标签被称作语义化标签,因为他们指明了特定文字在网页中的作用于地位,让网页富有层次感,更重要的是,在没有CSS的时候,他们的默认格式依然可以告诉用户网站的层次关系,虽然也许并不美观,但这符合退化理论,要比一层层的DIV嵌套好多了。事实上,屏幕阅读器也喜欢这样的网页。

  (3)网页是否足够简洁

  这一点上也许不同的人会有不同的意见,但可以去看一看西方的网页设计等等,都是以文字内容为主体的。当然,也会有一些比较花哨的网站,但我觉得,心理要时刻记住,用户来到网站的目的是获取信息,而不是欣赏你的前端技术,好的前端技术应该让用户感觉不到它的存在却帮助用户更好地处理信息。所以,检测你的页面是否有过多的不必要的装饰图片与JAVA脚本,最后,尽量少用FLASH,因为并不是所有浏览器都支持FLASH。这样对网页加载速度也是有好处的。当然,如果图片确实太多,那么,是不是可以考虑CSS-SPRITE等技术。

常用设计工具

Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件,它具有可视化编辑界面,用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页.Dreamweaver的网页动态效果与网页排版功Dreamweaver支持动态HTML,设计复杂的交互式网页,产生动态效果
Photoshop是由Adobe公司开发的图形处理软件,它是目前公认的PC机上最好的通用平面美术设计软件,它功能完善、性能稳定、使用方便,在几乎所有的广告、出版、软件公司,Photoshop都是首选的平面制作工具。
其它还有Fireworks 和 Flash 等工具,但是随着用户使用过程中逐渐褪去,新型网站html5代码开发工具有很多,其中优秀的工具HBuilder就很不错。
dreamweaver.jpg                       Adobe Photoshop.jpg
 Adobe Dreamweaver                                         Adobe Photoshop 

网页设计和平面设计的区别和优势

1、网页设计与平面设计的目的是不同的。

  a.网页设计是为了什么?答:是为了把你所要表达的几个内容按照你所想表达的主次顺序去实现出来,让浏览者知道并了解。在这个基础上,视觉表现力、冲击感、创意等等都是后话,一定是建立在这个前提之下的。

  b.平面设计是为了什么?答:是为了在万千个平面、杂志、报纸广告中突现出自己的设计,并让人记忆深刻。从而颜色的冲击度、创意感是第一位的。

  这两者有何区别?区别很大。

  网页设计是要人家长时间浏览内容的,并且都希望浏览者能够频繁访问的,而平面设计基本上是单画面传递,而且基本上不太会看第二次。那么你的平面广告做得金碧辉煌,五颜六色狠抓眼球,这是对的。那你的网页也是五颜六色,人家盯着你的网站,看10秒钟以后就会觉得视觉疲劳,眼睛酸疼,那么你的网站还会有多少回头客?

2、网页设计和平面设计有各自的主流风格和默认的规则。

  也许大家也注意到了,有的时候网页上很舒服的字体做成平面就怪怪的,平面上绚丽的颜色放在网页上又闹心的不得了,这就是各自的默认规则在作怪。抛开印刷字体和RGB、CMYK的这些技术区别,人的思维定式是最重要的。因为人在看网页的时候,那么他的潜意识就告诉他,你在看的是一个网页,而不是平面,反之亦然。那么每个人心中的对平面和网页都有一个自我默认的风格和规则,即大部分网页是这么做的,大部分平面是那么做的。我们每个设计人员可能不会认为有区别,但事实是大多数浏览者是认为有区别的,那么你不遵守这些所谓的规则就会让别人觉得怪怪的。

  虽然这么说,但不管是主流风格还是默认规则也是可以互通的,当然这就是设计师的水平问题了,前提条件是这个设计师要做过平面也做过网页。否则不要想当然的认为这样的网页人家也很容易接受。

3、制作问题(切图)

  首先,你的网页设计制作成任何样子都是可以切图的,不存在水平与能力的问题,只存在于复杂与不复杂的问题。复杂所带来的问题就是代码拥挤、图片过多、加载很慢、客户体验很差。当然对于追求不同目的的网站取舍也很重要。但不是所有的网站都必须以设计为导向,制作为辅助的,很多网站其实换一种型式或是舍去一些效果,可以带来更高的性价比。

  在我的理解,除了一些全flash站点外的网站都要考虑实施与设计之间的契合点。尤其是无法循坏的背景、扩出边界的设计等等问题是所有实施人员的心魔。

  说到最后,网页近似于平面,但我认为只存在于少数设计中。平面设计可以是自由的、充满创意的,但网页设计则并不是一个自由的设计,需要考虑的东西很多。但是现在中国的大部分开发公司的模式注定了设计师们思维和对网页的高度感还有所欠缺。大部分网页设计师根本不懂切图,也不懂程序,更不懂SEO,但事实是,这些东西对于大多数网站比设计本身要重要的多。但现在的中国都是买方市场,一个单子N多公司去争,都来拼搞。对客户来说,自然会在一大堆稿子中选择比较突出的,比较有冲击感的,这和在看平面广告有什么区别?所以设计师大多数都是美术专业,稿子也都是按照平面的路数去做,这也是没办法的事情。

  所以我的理解,网页并不等于平面。