在網(wǎng)頁(yè)設(shè)計(jì)初期，我們會(huì)先收集大家對(duì)設(shè)計(jì)方向的期許，我們經(jīng)常收集到這樣的建議：

產(chǎn)品經(jīng)理：要易用，要簡(jiǎn)潔
設(shè)計(jì)總監(jiān)：要特色，要亮點(diǎn)
部門(mén)經(jīng)理：要大氣，要統(tǒng)一
……

設(shè)計(jì)師要三頭六臂，左右逢源，顧此又顧彼。

首先，對(duì)網(wǎng)站而言，視覺(jué)和體驗(yàn)是一體的，相輔相成攜手共贏。視覺(jué)上的統(tǒng)一要求體驗(yàn)上的一致，體驗(yàn)上的創(chuàng)新也要求視覺(jué)上的突破，然而某些需求的字眼本身就是自相矛盾或難以捉摸的，如何又簡(jiǎn)潔又特色又兼顧統(tǒng)一？對(duì)工具類(lèi)網(wǎng)站的設(shè)計(jì)，大方向是力求簡(jiǎn)潔精煉的，作為輔助手段引導(dǎo)用戶(hù)操作，在易用性和美觀性之間拿捏火候，恰到好處的展現(xiàn)出來(lái)。

產(chǎn)品上線(xiàn)，無(wú)論好壞，就已持有自身固有的特色呈現(xiàn)給大家。我們看搜索類(lèi)網(wǎng)站：google、baidu、soso、yahoo、包括設(shè)計(jì)感十足的bing，雖然各雷同產(chǎn)品的雷同設(shè)計(jì)比比皆是，可圈可點(diǎn)，但每個(gè)產(chǎn)品仍努力不懈的追求標(biāo)新立異，無(wú)論是從體驗(yàn)還是設(shè)計(jì)都希望跳出競(jìng)爭(zhēng)對(duì)手的圈圈，做出差異化，拉開(kāi)距離。

再看SNS類(lèi)網(wǎng)站：

對(duì)于信息量大，實(shí)用性強(qiáng)的此類(lèi)網(wǎng)站要求輕松入門(mén)，低成本高效率的滿(mǎn)足用戶(hù)需求。可各個(gè)產(chǎn)品的屬性雷同，怎么更吸引用戶(hù)停駐呢？一方面是功能的完善和拓展，像客戶(hù)端的體驗(yàn)一樣便捷（facebook以此聞名）；一方面是設(shè)計(jì)的趣味性，在細(xì)節(jié)體驗(yàn)上呵護(hù)用戶(hù)的感受（白社會(huì)乃后起之秀）。

每個(gè)產(chǎn)品要持有自身的特色，才能脫穎而出。

QQ校友和城市達(dá)人在產(chǎn)品規(guī)劃初期就保持了視覺(jué)的統(tǒng)一性，強(qiáng)化騰訊SNS類(lèi)產(chǎn)品的品牌特征，在今后不斷的優(yōu)化過(guò)程中，更注重用戶(hù)體驗(yàn)細(xì)節(jié)上的趨于統(tǒng)一。

回想一下5年前的設(shè)計(jì)，我們大多接觸的是產(chǎn)品海報(bào)式的宣傳網(wǎng)站，將傳統(tǒng)技法和網(wǎng)頁(yè)設(shè)計(jì)結(jié)合，光效,水墨、紙藝等等，如今更是發(fā)揮的爐火純青

可今天的產(chǎn)品官網(wǎng)往往不允許這樣大張旗鼓的設(shè)計(jì)，這其中考慮的因素很多，統(tǒng)一性、易用性、流量、廣告收入等等等等。。。在種種束縛的條件下如何展示個(gè)性化，既留住目標(biāo)用戶(hù)，又吸引潛在用戶(hù)，讓他們?cè)隗w驗(yàn)的過(guò)程中不失樂(lè)趣?這是對(duì)網(wǎng)頁(yè)設(shè)計(jì)師最大的挑戰(zhàn)。

smashingmagazine上有很多流行趨勢(shì)分析的文章，包括很多設(shè)計(jì)原理的追溯，不得不佩服老外的歸納總結(jié)能力和有板有眼的理論化探討，結(jié)合不同的實(shí)際案例，我們的設(shè)計(jì)師都在有意無(wú)意的在嘗試一些能夠使頁(yè)面舞動(dòng)的小技巧：

頁(yè)面細(xì)節(jié)修飾

首先是透明效果的應(yīng)用：
常見(jiàn)于導(dǎo)航或者頁(yè)頭和頁(yè)尾，及banner效果等

范例：QQ秀導(dǎo)航區(qū)

范例：microsoft產(chǎn)品展示區(qū)

除此之外還有漸變、光效、模糊等等技巧：

模糊效果常結(jié)合透明一起使用，營(yíng)造一種縱深的感覺(jué)。
色彩光譜的漸變，更吸進(jìn)人們的注意，方法簡(jiǎn)單并且具有很強(qiáng)的視覺(jué)沖擊力。

范例：http://www.realmacsoftware.com/

產(chǎn)品展示區(qū)域

首先介紹多媒體的應(yīng)用
隨著寬帶的發(fā)展，越來(lái)越多的豐富內(nèi)容在線(xiàn)上展示，很多產(chǎn)品借助多媒體方式來(lái)展示他們的產(chǎn)品特性，全方位快捷有效的傳達(dá)內(nèi)容,這應(yīng)該是產(chǎn)品欣賞和功能演示的最佳方式啦

范例：microsoft產(chǎn)品

可惜目前國(guó)內(nèi)還比較少見(jiàn)，畢竟寬帶的普及有限，另外也不是所有人都喜歡觀看視頻。但多媒體展示確實(shí)開(kāi)啟了一片新天地。

除此之外，我們還可以在網(wǎng)頁(yè)中內(nèi)嵌全flash的效果展示，對(duì)圖文動(dòng)畫(huà)的配合要求很高。

范例：http://www.bkwld.com

如果你的產(chǎn)品經(jīng)理全部斃掉了這些酷炫的表現(xiàn)手法，要求網(wǎng)速第一。那么還可以將展示圖片做到淋漓盡致的精美，讓它成為烘托整個(gè)網(wǎng)站的點(diǎn)睛之筆。

范例：CDC內(nèi)部資源網(wǎng)

增強(qiáng)對(duì)比

有時(shí)候要吸引用戶(hù)關(guān)注頁(yè)面上的重點(diǎn)內(nèi)容，高亮出這些模塊或點(diǎn)綴，采用色塊對(duì)比不僅僅是豐富頁(yè)面視覺(jué)效果，更重要的是增加頁(yè)面的導(dǎo)讀性：

范例：wordpress

范例：CDC內(nèi)部期刊

類(lèi)似的細(xì)節(jié)修飾，還有其他的表現(xiàn)方式，比如打破傳統(tǒng)的手寫(xiě)體，字體藝術(shù)博大精深，不同的字形帶來(lái)不一樣的感受，增加一些有趣的細(xì)節(jié)，強(qiáng)化對(duì)比：

排版技術(shù)

網(wǎng)頁(yè)設(shè)計(jì)中越來(lái)越多的采用傳統(tǒng)工藝（印刷技術(shù)），從模塊排列到圖文搭配，甚至到文字的對(duì)齊方式都與傳統(tǒng)印刷技術(shù)形似。柵格化設(shè)計(jì)日益普及，尤其對(duì)于多欄布局，柵格用來(lái)保證結(jié)構(gòu)的平衡和層級(jí)的劃分。

基礎(chǔ)網(wǎng)格的簡(jiǎn)單示意：

范例：

每一個(gè)新的idear總伴隨著對(duì)固有模式的挑戰(zhàn)，打破原有的束縛，折衷考慮創(chuàng)意與可用性之間的平衡。我們的設(shè)計(jì)師在不斷的探索和學(xué)習(xí)，研究每一款產(chǎn)品的特色，吸納他們的亮點(diǎn)，提升對(duì)細(xì)節(jié)的把控能力。

頁(yè)面上能夠舞動(dòng)的小細(xì)節(jié)很有很多，諸如此類(lèi)的驚喜不斷，比如

moko的卡通人物（http://www.moko.cc）
designmind的圖片倒角處理（http://designmind.frogdesign.com）
yoho上超cool的大頭像（http://www.yoho.cn）

等等等等，結(jié)合自身的網(wǎng)站特點(diǎn)，挖掘出更精彩的亮麗。設(shè)計(jì)師應(yīng)該不斷提升敏銳度和想象力，用心體會(huì)每一個(gè)優(yōu)秀網(wǎng)站的細(xì)小設(shè)計(jì)。就不會(huì)苦于無(wú)從下手從哪里完善細(xì)節(jié)啦！

參考網(wǎng)站：www.smashingmagazine.com

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請(qǐng)注明出處)