网站设计的技巧 配色, 网站设计, 分析, 技巧, 布局

admin

　　首先我们需要了解一下网站的页面组成，网站一般包括以下几部分： 6 M* a$ v5 _, I7 Q  m, U
　　首页：网站的门面，如同公司的形象，特别注重设计和规划。
4 v0 P4 Y6 _! M+ |$ q! R, Z+ l　　框架页：网站的主要结构页面，又称次首页、内页，大型网站往往框架页即首页，如一些门户网站。框架页主要是网站内部主要栏目的首页，讲究风格的一致性，并于主页呼应。 3 y# v& d+ k. [0 V0 |: \
　　普通页：网站主要的承载信息的页面，设计要求不高，但要求链接准确、文字无误、图文并茂，并沿袭网页的风格。
2 D; y7 D. {1 ]5 M( _　　弹出页：一般用于广告、新闻、消息、到其他网站的链接等等，一般用的很少。
6 m1 @( Y( R& E8 p: y& p" j& d$ t* f1 [( |
　　通过上面的分析，我们可以看出： # [9 M! \! e, ?
　　从功能上来看，首页主要承担着树立企业形象（当然不仅仅是首页）的作用，框架页在导航方面起着重要的作用，比如各栏目内部主要内容的介绍，都可以在框架页中体现再进入普通页，让浏览者能够迅速了解网站各栏目的主要内容，择其需要而浏览，而普通页则是主要的信息页面，也是网站的最终页面，对于大型网站，这种结构非常重要，而对于中小型企业，网站规模较小、页面数量不多，有时框架页就起着普通页的作用，至于弹出页，建议您不是必要，最好不要用。下面详细介绍各页面的设计技巧：
% L( |- ?5 m) F; q; P1 a% n& l1 T2 O/ v/ E/ p. ~
　　一、首页设计技巧 6 O% t: J2 a1 U7 h0 ^; t
　　网站首页是企业网上的虚拟门面，在此，提醒上网的企业注意自己门面的设计，决不能敷衍了事、马马虎虎。我们会经常看到印刷精美的产品目录或广告，当您屡屡看到那些印有产品目录或广告的精美印刷制品的时候，相信您或多或少会对有关的产品形成一种好感，即使您不会购买，也必然对这些产品形成一定程度的认同。而对于设计毛糙的宣传品，您肯定会怀疑其内容的真实性，从而对其产品或服务产生质疑。好，现在说说网站的设计，相信您会同意这种说法：网站的页面就好比是“无纸的印刷品”。既然如此，我们会因此而得出一个结论：精良和专业网站的设计，如同制作精美的印刷品，会大大刺激消费者（访问者）的购买欲望，反之，您公司所提供的产品或服务将不会给消费者（访问者）留下较好的印象。值得一提的是，除非您的企业有专业的网站规划、设计人员，否则您最好找专业公司或专业人员为您设计制作，一个优秀的专业设计人员会很快明白您的意图，并根据您的建站目的提出建设性的意见。
$ v8 ?6 E+ `" N4 u6 n　　 一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像、文字信息，组成一幅生动的画面，向浏览者展示一种形象、一个氛围，从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导，通过色彩、布局给访问者留下深刻的印象，当然，我们不能为了设计而设计，我们的目的是营销，在设计过程中一定要牢记这一点！
) v) J8 w' R) V, J2 @% _* w) |　　 另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等，也就是我们上面谈到的框架页，这种风格比较适合网站信息量大，内容丰富的网站，因为是以展示信息为主，这是的设计就要在细微之处体现企业形象，建议设计人员最好仔细阅读企业的ＣＩ手册，熟悉企业标志、吉祥物、字体及用色标准，在网站的局部体现出来，往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象，从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。
& P. v1 t; M0 z/ B  L$ x' f. `1 k; S* v( ]# e, h
　　二、风格保持一致—内页设计技巧
; G1 Q7 v; q+ p0 K7 C6 \4 G　　如何保持网站风格的一致，是进行内页设计过程中考虑的重要方面，根据我的经验，您可以尝试以下几种设计方式：
! x# s2 ?8 Q' u! `# I　　1、结构的一致性：我们知道，网站的统一性在网站营销中占重要地位，而网站结构是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，到国外著名的电子商务网站浏览，你会发现这些网站结构惊奇的一致性，所不同的是色彩或内容，在结构的一致性中，我们要强调网站标志性元素的一致性，即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新。- o: j- K5 ^7 t5 b- W" O9 p/ T$ q
　　 2、色彩的一致性：方式是保持站点主体色彩的一致，只改变局部色块，优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。在色彩的一致性中，我们强调的是如果企业有自身的CI形象，最好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有利于企业形象的树立。一个建议是选取一两种主要色彩，几种辅助色彩。+ _" m% J1 C9 I0 C) P# q
　　 3、利用导航取得统一：导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象，比如将标志的形态寓于导航之中，或将导航设计在整个网站布局之中等等不一而足，花点力气在导航上，也会设计出一个出色的站点。& ]: {$ d- X  r
　　  4、特别元素的一致性：在网站设计中，个别具有特色的元素（如标志、象征图形、局部设计等）重复出现，也会给访问者留下深刻印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。
& A9 @. p& }4 M; H* S　　 5、利用图像取得统一： 网页中的图像在使用上一定要甚之又甚，尤其是一些动画，网页中充斥着各种可有可无的动画，而这些动画根本与本企业内容无关！认真检查网页中的动画，将没用的删掉！这里我们所说的利用图像取得统一，决不是在每页中放置几个动画！而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成页面的连续性。 4 {* ~( f8 v) H; r
　　 6、利用背景取得统一：从技术上而言，网页背景包括背景色和背景图像两种，一般来说，我们并不提倡使用背景图像，而使用背景色或色块。原因很明显，第一，下载速度，背景色的下载速度忽略不计，而背景图像就得根据图像字节大小下载了，这里需要说明的是，如果你的背景图像比较深，那么最好将背景色置为深色调（默认的背景色是白色），这样在等待浏览器下载背景图片的时候前面的浅色文字可以很容易阅读，因为如果有背景色，浏览器先将其下载，然后下载背景图片；第二，显示效果，经常看到国内一些网站设有背景图像，或者是公司的厂房、办公大楼，或者是产品图片，甚至是某某人物的照片，使得前面的文字很难辨认！给人一种很不舒服的感觉，让人无法停留。在此，提醒您注意：有效利用背景取得网站统一和专业化的方法有以下几种：
9 b1 k- V9 j4 h/ y1 k第一，认识到并不是所有的图片都可以作为背景，在考虑设置网站背景图像的时请您注意；9 C- b6 A) s# r8 t. w7 L2 ^
第二，加强与前景的明暗对比，即要么淡化背景，隐隐约约可以看到即可，要么加深背景，而将前面的文字亮化。, B% o. U" @& u
　　 那么什么适合网页背景呢？一个好的建议是将公司的标志、象征性的简单图片作为背景，并将其淡化，使浏览者在阅读网站内容的同时不经意记下公司的标志。曾经一个网站的背景设计给我留下深刻的印象：单色背景中一个网站标志的居中放大淡化，前面元素中也不断重复这个标志：如提交按纽形状刻意设计成标志的形式等等，在整个页面中形成特有元素在大小、明暗及位置的呼应，很好地塑造了网站的特有形象。0 v* E# j7 k6 O; n
+ m+ p* b6 [' ]- W; E, A1 \
　　三、色彩搭配
! ^2 }$ S3 a6 \2 ~0 \$ p4 _  q　　网页中最难处理的也就是色彩搭配的问题了。如何运用最简单的色彩表达最丰富的含义，体现企业形象是网页设计人员需要不断学习、探索的课题。如何进行色彩搭配是一门学问，下面的一些方法是我在实践过程中的体会，希望能够为您起到一定的参考作用。8 V4 @8 F. r3 V' w' T+ W& x6 }3 s
　　1、运用相同色系色彩：所谓相同色系，是指几种色彩在360°色相环上位置十分相近，大约在45°左右或同一色彩不同明度的几种色彩，如：，这种搭配的优点是易于使网页色彩趋于一致，对于网页设计新手有很好的借鉴作用，这种用色方式容易塑造网页和谐统一的氛围，缺点是容易造成页面的单调，因此往往利用局部加入对比色来增加变化，如局部对比色彩的图片等。这种方法不失为一种设计的好方法。6 w1 w+ V# b: x( j8 b& a/ z
　　2、运用对比色或互补色：所谓对比色，是指色相环相距较远，大约在100°左右，视觉效果鲜亮、强烈，而互补色则是色相环上相距最远的连种色彩，即相距180°，其对比关系最强烈、最富有刺激性，往往使画面十分突出，如：，这种用色方式容易塑造活泼、韵动的网页效果，特别适合体现轻松、积极的素材的网站，缺点是容易造成色彩的花，使用中注意色彩使用的度。
6 Q  C3 h) N: P; G5 y3 K( t/ y　　值得注意的是，以上两种用色方式在实际应用中要注意主体色彩的运用，即以一种或两种色彩为主，其它色彩为辅，不要几种色彩等量使用，以免造成色彩的混乱。3 f3 P  Z) A* ~7 H9 t% H% q5 Y
　　3、使用过渡色：过渡色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用过渡色能够使你的色彩搭配技术更上一层楼。过渡色包括几种形式：两种色彩的中间色调、单色中混入黑、白、灰进行调和以及单色中混入相同色彩进行调和等等，您可以自己尝试调配，在以后的更新中，我会专题介绍如何使用过渡色。* k6 z$ T4 \/ }' K  k( X' r# I

" d; t. e0 {' y: C) ?$ `7 E( l　　四、版面布局
3 R! h  r" n& n; c2 a: v7 p, U: ~' O, B　　一般来说，企业网站首页的布局比较灵活，着重设计，这里我所说的布局主要是指内页的版面布局。中、小型企业网站的内页布局一般比较简单，即内页的一栏式版面布局，从排版布局的角度而言，我们还可以设计成等分两栏式、三栏式、多栏式，不等分两栏式、三栏式、多栏式等等，但因为浏览器宽幅有限，一般不宜设计成三栏以上的布局。
# K0 f1 `$ t" N/ p: ]　　在版面布局中主要是考虑导航、必要信息与正文之间的布局关系。比较多的情况是采用顶部放置必要的信息，如公司名称、标志、广告条以及导航条，或将导航条放在左侧而右侧是正文等等，这样的布局结构清晰、易于使用。当然，您也可以尝试这些布局的变化形式，如：左右两栏式布局，一半是正文，另一半是形象的图片、导航；或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等等。在设计中注意多吸取好的网站设计的精髓。