找回密码
 加入怎通
查看: 406|回复: 1

[站长八卦] 浅谈网站更卓越的设计细节

[复制链接]
猥琐大叔 发表于 2013-01-16 15:54:42 | 显示全部楼层 |阅读模式
  一、合理使用渐变
$ S' ~1 e% V% d
  h8 j2 u: _( |& w7 D  渐变不要滥用,更不要把渐变弄的跟彩虹似的,否则你的网页作品看起来比较外行。总而言之,合理的使用渐变对于优秀网站设计是有帮助的。0 Z" T3 B( w8 m: Z6 g: b8 l, O/ q( \
9 N4 e) G8 o0 Z) n! w1 F  E, X# G
  渐变、散景结合使用5 l' O% a# T7 J+ X* x& o

+ k1 B7 ]6 V. y9 Y* b) y7 {  Newism网站色彩丰富,但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果,可以去Abduzeedo’s tutorial网站上面学习一下。# T) X' u& r1 N& P5 G1 w( A9 L
' k7 @0 U- H$ O& q5 v$ ?
  渐变、投影、纹理结合使用。( H8 p! B5 x3 I+ R( S
2 B( D) t. T2 Y* q+ M
  OnWired网站应用了这些设计技巧,显而易见,他的设计作品效果是很棒的!自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。
2 V) Q& W$ S: t+ R! k* E2 X/ [
# ^. r* g% }! Z, h' l# b0 [. p& m  二、留白* k4 i/ p% h4 o  Y! Q! q2 `$ s

5 M5 E( ~6 _. I* M2 M  `; b: P  留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。% b! n7 K" `! R( Z
3 |. h6 ?) s/ S' B* a/ Z1 e8 a+ x1 C
  “留白”对于网页设计是很重要的,留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题,他们在做设计的时候将整个页面放的满满 的,没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题,如果内容放不下的话,他们可以借助浏览器的滚条来扩大页面的空间。
% [8 ?- j* f' u/ q! X  _0 L; l. @2 S* e8 R2 n
  优秀的留白与巧妙的分割线9 [. P) L" X: W: m* ~! _
3 `7 {* v& h/ X
  Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下,网站里面的虚线将各个板块区分开了,这样我们在浏览网站的时候就一目了然了。
: C1 {. `9 E* K* o1 K/ Q! d! U8 g6 ]$ p
  抽象图形
/ {# w5 m( Y1 L* s4 n# C. ~8 J5 _7 T; t6 k
  沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像,给浏览者的空间 是流畅、舒服的。
6 F6 C; ]7 i* y+ J. V( @" `& M$ |$ J
  三、网格布局) C) R( i4 i& A  b* U! g

  T9 l; e2 m9 v7 m7 `0 Q  网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象,从好的设计到生活中的交通网。
# f6 j& N1 s$ N4 b9 Z+ Y. r7 T
6 [2 [; }; u8 F+ G  O4 c7 @& ]  960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局,它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素,对齐在设计一个复杂的页面时,能使你的网站看起来比较精致、井然有序,并且你在网页布局里 面添加任何模块内容时候都不用考虑其他的模块内容。. G2 R, U9 n- b, ^
& b3 R; A6 U$ q
  综合使用网格布局; n8 y2 c% I% z$ x* S0 _
7 U8 e; g. b6 G5 c: X; B
  Poccuo网站综合使用了网格布局,它 采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。8 F5 H+ h- A  T& l( U" o$ S4 H

6 @$ M, F7 c3 R0 ~% ?  博客采用列布局
/ Q4 p% q/ b$ a4 J8 [5 Y1 [) p
$ b9 F( @- m& R  我比较喜欢Web Design Ledger首页最上面的展现方式,他把最新的公告内容放大同时放到页面最顶部,其他的以3列的方式排列。
# ]' W% k$ V( L+ F0 }4 y5 P' Z" A3 q9 j4 }9 y9 A( m: h
  大量使用相等的列布局" J3 u5 a; D6 q
8 S4 p, ]( E+ r0 b+ V* M! ^
  Ecoki漂亮的网页布局显而易见采用的是4列、2行布局,同时幻灯片、缩略图、最新的审 查也是采用相同的方式。. s6 Q4 `; R$ M/ i0 t; q% a' T6 y
/ g  w) m3 h( v' d4 k
  四、改善字体应用
' |( i3 `' s* |4 |& n8 K+ ~
8 A1 K6 ?0 j. Z# c  字体应用困扰着大多数的设计师。如果要想提高你的设计水平,字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色,同时还可以增加设计作品的 氛围。
% B& M) i4 J8 P# j& U
& a4 e# }4 M0 r, p& z5 P" [) y6 l  用对比字体引起关注) a; ~& J4 ^8 T" O9 ?

- J5 }1 L! V& h5 X  T; l0 W  SimpleBits网站在应用各种对比 字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。
6 U: Z2 U0 O( k  l) T" Z0 a6 N) I1 k1 Q
  不要认为字体就像标志
" H1 N+ p+ A* O8 `4 C  ~- R6 k$ f% D7 u: l1 a, B, y
  这个网站看齐来就非常的漂亮、舒服,但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的,我就被他的logo 字体应用迷住了。% |" U/ N/ i8 K9 C0 t" S# ]2 r5 i

) w6 u" H4 ~" f9 V1 g' |# b. ?  五、明确而有效的导航
7 i& `. \, a$ O5 Y- F2 M% K6 t% A$ P: p- f0 O
  良好的导航对于网页设计来说很重要,如果浏览者不能快速、便捷的找到它,他们就很有可能去别的网站了。这是我们所不愿意看到的,同时我知道 MyInkBlog进行了一些改进,并将在以后重新设计中进行彻底的改进。
4 I  w) j6 n+ o" Z/ P, t/ H. ?0 j  t7 J3 _( X( c- e7 p
  博客导航下面显示分类导航8 ^8 \( J! g' \; [/ N# u

+ u2 p2 M! m0 X! ~# N9 V, o  在大多数情况下,博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做 了一件了不起的事情,他把浏览者关心的photoshop资源以生动的方式展现出来了,并且在鼠标经过二级导航的时候有一个高亮效果。
4 U0 ?; {! x) q  E) C; ~
0 E5 h! J* s; }: V3 s  切换不同的图标效果
) r. i% Y: c% s+ V. _3 ^5 N' x- ]2 a9 ~$ F  ^, W
  图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用,并且成为一种趋势。并不是所有的都是不好的,web2.0里用的不好的原因是过 度使用、业余使用造成的。在大多数情况下,适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果, 并且于他的网站整体感觉想吻合。
0 g: H+ Q( C4 G& q" Z6 L
% D# }8 h" b1 V) U* z7 j  六、使用漂亮实用的页脚
/ X5 `6 J7 L( F6 Z3 T( e/ S+ ?
$ z9 o1 m. Y# y$ ]7 O' D1 e4 x  一开始我们就将页脚作为次要的内容,在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来 越重要了,千万别错过好的页脚完成你设计。
, G. L+ f. |9 B" P  H
5 P6 r/ o* N' D* f& o8 Y) @- s0 ?$ Q  展示大量的信息和证书
, ~. R4 m8 o: ?( g8 z% O! P4 w! ?6 R# D8 [  `
  这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。! H! k/ b9 [/ P1 d0 b/ P

/ C: F& B, Y- F5 c: Y
回复

使用道具 举报

心愿 发表于 2026-06-04 12:34:16 | 显示全部楼层
蹲了这么久,终于看到有价值的讨论,支持一下!
回复 支持 反对

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-6-14 10:39 , Processed in 0.041514 second(s), 24 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表