一、合理使用渐变
0 r, T0 ?; q3 r/ B) I: J/ ~& q# ^( j) h' ^4 H5 _& j* }
渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。' r% e6 v& s* b7 S! g
6 ^8 f/ s; R% Z- ?6 w# o
渐变、散景结合使用
( V [7 U& ~$ |8 e8 h6 C0 i4 o; S, M6 E
Newism网站色彩丰富，但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果，可以去Abduzeedo’s tutorial网站上面学习一下。7 K- }8 i' ~9 {* T
8 ?; I) z1 e [+ r
渐变、投影、纹理结合使用。9 Y/ q2 O: E7 e& ^" K
: a* L* M ?1 R0 T
OnWired网站应用了这些设计技巧，显而易见，他的设计作品效果是很棒的！自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。" k/ c9 u7 U0 A5 R6 V3 z k
# k) v6 I5 j& j8 F# h6 Y+ x3 k
二、留白
" q* B/ @) G2 k3 A2 ~; m
0 |, o% S; l7 z4 h: Q 留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。
1 [0 H8 N8 k" n A( O }% d% n2 C' T/ v. \& |
“留白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满 的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。0 U! Y$ l) t8 `7 @
2 L4 _% j" T$ X W8 q' Y- ^ 优秀的留白与巧妙的分割线" n/ J& C) a# M# h4 O
3 i7 b$ C, Y) s$ T( B& i2 L2 g Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下，网站里面的虚线将各个板块区分开了，这样我们在浏览网站的时候就一目了然了。
! d) l* q! w& U# o0 z
4 H; u5 A5 C5 }- k% u 抽象图形- P% y1 K) n: a; K* i2 `0 e& O
+ J# f4 q2 ^' J8 I 沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像，给浏览者的空间 是流畅、舒服的。
4 j% K5 F) E6 O" @# d8 p: z; a1 I0 v: m: C, h- a4 Y
三、网格布局
$ ?, B0 Y0 U8 z5 U$ V/ ]0 L5 z4 p% }& z: S1 t% \& S! `
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。
- q8 K/ ^8 m9 X) I
5 S4 Q( c% O; s9 p3 M 960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局，它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里 面添加任何模块内容时候都不用考虑其他的模块内容。" @4 L/ H+ O' B+ x1 F9 V
' s9 H5 d2 v* d
综合使用网格布局% e$ q+ n6 y+ a2 Y1 ~
- z! l+ E6 V3 u8 Q
Poccuo网站综合使用了网格布局，它 采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。! u$ C/ z" W& L( [- \
/ o: A; b! i4 J3 B- o7 H1 l0 ^* r
博客采用列布局6 H8 O _( A- j* n+ ^
# u% ~; Z2 ?6 s9 Z 我比较喜欢Web Design Ledger首页最上面的展现方式，他把最新的公告内容放大同时放到页面最顶部，其他的以3列的方式排列。+ X8 w. ^4 R8 Q4 M
4 \ A: u0 U& Q% | 大量使用相等的列布局
: W/ B8 {1 g5 v
9 p% Z# j9 I K. }3 B7 V+ n- J5 ~ Ecoki漂亮的网页布局显而易见采用的是4列、2行布局，同时幻灯片、缩略图、最新的审 查也是采用相同的方式。
: B2 d3 s( b( s9 j, j8 q3 @0 c3 N# f4 D; @8 {/ J& ^2 ~, g
四、改善字体应用
8 R4 C+ O+ e9 _
6 o# n" l3 Z5 ]& m$ n 字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的 氛围。4 m$ a7 x5 W0 Y$ {: P) o# V% {
" H t7 i7 ?0 t' W9 Y3 @7 n 用对比字体引起关注
' k5 J4 j- w. {9 p5 ]0 C0 ], G4 \2 {/ N- D& N
SimpleBits网站在应用各种对比 字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。
% i, q6 S4 [* Y1 _* o; G: X; L* d" M/ t+ F4 Q
不要认为字体就像标志
# h6 X+ U: U( j4 j' l' |3 f- X
5 z0 g8 b) T3 T9 ^" o$ e 这个网站看齐来就非常的漂亮、舒服，但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的，我就被他的logo 字体应用迷住了。
' U( t" J# H0 I, ^; N S
7 F1 l3 C- \ Z/ }; Y. P9 L3 @ 五、明确而有效的导航! i" m1 Y! [+ C
% b _& i* l& w6 ~. G
良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道 MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。0 B! b' x* c6 A% q# u$ I3 {
8 K0 ~. N9 O' @6 q$ B$ F0 q3 F
博客导航下面显示分类导航5 d; g+ o, r, I m* R7 f- L
A# g$ |' u, O2 \! |. }- n 在大多数情况下，博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做 了一件了不起的事情，他把浏览者关心的photoshop资源以生动的方式展现出来了，并且在鼠标经过二级导航的时候有一个高亮效果。
, e1 F2 S* Z' ~' ~$ h3 }$ Z1 u# D U1 A7 I9 U0 A3 E
切换不同的图标效果
3 ^- p1 d9 O1 J" `' `0 `/ `" Z( `$ i6 s) W# W
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用，并且成为一种趋势。并不是所有的都是不好的，web2.0里用的不好的原因是过 度使用、业余使用造成的。在大多数情况下，适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果， 并且于他的网站整体感觉想吻合。6 T, d2 j- {7 S
! q9 {$ v' d2 p d$ m0 g1 V3 z" Q
六、使用漂亮实用的页脚
# z& o9 [ Y6 f7 M
, l# Q8 b# Q( C& {. q) q; x 一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来 越重要了，千万别错过好的页脚完成你设计。
v' r* c6 {1 ]; Z% ]' y5 b# ]( e2 t, a* Y7 J9 d- q
展示大量的信息和证书
* W8 A+ U7 i: Y ]6 L% Z$ B1 j! ~ E3 e/ `$ s& e
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。' k+ _6 m% y E' f2 o) D4 X \1 B
7 N7 r Z% e+ c% |$ M |
