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

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

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

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

　　產(chǎn)品上線，無(wú)論好壞，就已持有自身固有的特色呈現(xiàn)給大家。我們看搜索類網(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ì)手的圈圈，做出差異化，拉開距離。

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

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

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

　　QQ校友和城市達(dá)人在產(chǎn)品規(guī)劃初期就保持了視覺的統(tǒng)一性，強(qiáng)化騰訊SNS類產(chǎn)品的品牌特征，在今后不斷的優(yōu)化過程中，更注重用戶體驗(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)用戶，又吸引潛在用戶，讓他們?cè)隗w驗(yàn)的過程中不失樂趣?這是對(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)用：
　　常見于導(dǎo)航或者頁(yè)頭和頁(yè)尾，及banner效果等

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

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

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

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

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

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

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

　　范例：microsoft產(chǎn)品

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

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

　　范例：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í)候要吸引用戶關(guān)注頁(yè)面上的重點(diǎn)內(nèi)容，高亮出這些模塊或點(diǎn)綴，采用色塊對(duì)比不僅僅是豐富頁(yè)面視覺效果，更重要的是增加頁(yè)面的導(dǎo)讀性：

　　范例：wordpress

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

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

　　排版技術(shù)

　　網(wǎng)頁(yè)設(shè)計(jì)中越來越多的采用傳統(tǒng)工藝（印刷技術(shù)），從模塊排列到圖文搭配，甚至到文字的對(duì)齊方式都與傳統(tǒng)印刷技術(shù)形似。柵格化設(shè)計(jì)日益普及，尤其對(duì)于多欄布局，柵格用來保證結(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é)很有很多，諸如此類的驚喜不斷，比如

　　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

　　原文：http://cdc.tencent.com/?p=1466