迷失的亲 2007-11-7 17:10
网页文字界面设计与穿衣搭配经验
网页设计中的文字设计很重要。俗话说“没有丑女人,只有懒女人”,女人只要舍得花时间琢磨怎么保养打扮,总能够找到方法展现自己美丽的一面。界面设计也是如此,让我们来看看聪明女人的穿衣之道里有哪些做网页界面设计可以借鉴的经验。 }2o{,I:}:\j
,}QYP|
原则一:主色不要超过三种
?%[7o\B2s
hK {WS3f
不管什么样的衣着都应该有一个主色调,代表穿衣者想彰显的气质,她不可能样样都强调——也许她有安静的一面,犹如蓝色;也可能有调皮的一面,犹如橙色:知性的一面,犹如白色:可爱的一面,犹如粉色……但是她如果把这些颜色同时穿出来,那她除了像只花蝴蝶外将一无是处。这就好比一个页面,它的主要字体和颜色搭配不应该超过三种,他们分别用做:最重要的,比较重要的,一般的。别试图什么都强调,你会到头来什么都抓不到。
;|"a.x c-rq j-eY
L
a]2W%t!q(W5O
下面举例说明。'F8?r.T [y6G
/iW"W'G7q'r/I1b
我很喜欢这个网站,可我不得不承认,这个页面看上去的确像只花蝴蝶。
{$u)l Dg[6t
)I Xqio3TR3e
[img]http://design.yesky.com/imagelist/2007/311/imsb4xw7tuys.jpg[/img]W&z8FMe:\
/G
G Q9Bz5r+sB'_a
还有这个,光是首页它已经大量使用至少五种字体,也许设计者觉得字体库里字体那么多,不用很浪费。
.aB/|:t,L N/K%NX
n:^/c'}/p e9N(@
~/C
[img]http://design.yesky.com/imagelist/2007/311/2h9e21081ca9s.jpg[/img]
迷失的亲 2007-11-7 17:10
原则二:配饰风格要统一,相互呼应v0m"i%TV&i0amN
0d#ZQ
g*p:K7Q
如果一位女孩今天应邀参加某时尚晚会,她选了件贴身晚礼服,打算来个华丽丽的登场,你觉得她除了配一双高跟鞋外还有其他什么选择吗?恐怕没了。哪怕她有一双超炫的飞人亲笔签名的绝版耐克气垫鞋很想穿出来秀一下那也好歹要忍住。两件单品风格完全不同,即便都是顶级货,搭在一起也往往是场灾难。K']"KI |){`V-I
3o:A|9k'jYv%\
也许我们会比较注意网页中文本文字的统一性,但是却经常忽略页面的图片中文字的统一性,看看下面的例子,同样是销售折扣商品,当当的商品图片里价格张张标注在不同位置,这实在是很容易扰乱视觉效果,降低信息传达的效率。而亚马逊的则把所有商品折扣标注在统一位置,只用背景色变化来区分折扣高低。把每一个差异化设计都用在有需要的地方。FW-O0S)c!s
[img]http://design.yesky.com/imagelist/2007/311/92oa4k8791pus.jpg[/img]
迷失的亲 2007-11-7 17:12
原则三:细节决定成败
s!B,HC3C8m
5ze?'b
Ao[V0r?
发现没有,一些女孩的打扮看上去很自然随意,感觉像是不经意就穿出来了,但又很是耐看。我敢保证,这样的女孩十有八九是在家做足功课才会出门的,哪件衣服配哪条项链,哪个发型配哪个耳环,甚至是袖子的边是否该卷上,卷上去几分人家都是花心思琢磨过的。这样才能保证把每个细节都做得完美无缺。
Hkj]
A4t?-d1E
QF-~sU T
其实很多设计乍一看都还不错,可是细看却感觉糙了些,就像漂亮衣服上扯出毛边一样,等到真正用起来会发现——天!!@¥@#%#¥…%¥&
;Xf6W
mDFc2i
N7~"}{)\3N*P
只要再多花5个像素留给文字和边框,这个豆腐块就能看起来舒服很多,干嘛不慷慨一点呢?
(w/U DLA"M$j
[img]http://design.yesky.com/imagelist/2007/311/080uw9j830wns.jpg[/img]6`'o
Nc{az`(Z#|6Q
\$R"oM_L3J+CdZx
如果你胖,那就减肥,可别把自己硬塞进紧身黑裤里。如果文字多空间少,那就删文字,可别把他们堆到狭小的空间。原本只能放下四行字(看左边框内)的空间硬被塞进了五行字,看着真叫一个憋屈啊。
/i(q,p;o7C
o,]q
[img]http://design.yesky.com/imagelist/2007/311/vm61qvx80uf8s.jpg[/img]
$J\ua3L1x
"N0W
RF S\*N k
大多数网站都把宋体设为主要文字显示字体,可是我发现很少有网站注意到宋体用来显示英文是非常不易于阅读的,虽然我们是中文网站,但是随着越来越多的英文单词进入我们的页面内容中,我们为何不多花那一点点力气考虑给英文单独定义一个字体呢?Q D*I.QnV
3Zg@'dss1D"b
z
[img]http://design.yesky.com/imagelist/2007/311/9x854d4c5m0us.jpg[/img]