原載于 《程序員》雜志2010年第7期。 作者：西喬

19年前，世界上第一個(gè)網(wǎng)頁(yè)誕生，它沒(méi)有設(shè)計(jì)可言，由文本和url組成，樣式只有最基本的<h1><p>。而如今，Web設(shè)計(jì)已經(jīng)成長(zhǎng)為獨(dú)立而龐大的設(shè)計(jì)門(mén)類(lèi)，一個(gè)網(wǎng)頁(yè)的創(chuàng)造需要多個(gè)工種、多種技術(shù)的參與，其流程的復(fù)雜和挑戰(zhàn)性已經(jīng)超過(guò)任何傳統(tǒng)設(shè)計(jì)類(lèi)別。

這19年間，網(wǎng)站的擁有者越來(lái)越清楚自己的目標(biāo)，而設(shè)計(jì)師們也越來(lái)越理性和專注，人們?cè)诓煌で?strong>商業(yè)訴求、用戶、審美和技術(shù)上的平衡點(diǎn)。每一年過(guò)去，都有無(wú)數(shù)過(guò)時(shí)的風(fēng)格、特征元素以及實(shí)現(xiàn)技術(shù)被拋于身后。

設(shè)計(jì)風(fēng)潮體現(xiàn)著一個(gè)時(shí)期內(nèi)人們對(duì)特定的風(fēng)格、趣味、審美、技術(shù)乃至理念等各種模型或特征的追隨。新技術(shù)的發(fā)展、媒介載體的占有量的變化、新網(wǎng)站類(lèi)型的誕生、全球的設(shè)計(jì)思潮的影響、行業(yè)領(lǐng)軍者的轉(zhuǎn)變、明星設(shè)計(jì)師個(gè)體的亮點(diǎn)，這些因素都在推動(dòng)潮流的變化。 你可以回想一下那些曾經(jīng)風(fēng)靡一時(shí)的模式：復(fù)古的像素樣式；Google的樸素之風(fēng)；韓式清新插畫(huà)風(fēng)；Flashsite的興起帶來(lái)的不規(guī)則布局和動(dòng)畫(huà)的濫用；Apple引發(fā)的對(duì)質(zhì)感的追求；用戶和情境意識(shí)的覺(jué)醒；對(duì)細(xì)節(jié)的關(guān)注——圓角和陰影的廣泛運(yùn)用； Web2.0設(shè)計(jì)風(fēng)潮中典型的配色和特征元素；空間與層次感的魔術(shù)……

09年流行的半透明風(fēng)格：

空間和層次感的魔術(shù)：

潮流的涌現(xiàn)，是社會(huì)一致化與個(gè)體差異化的碰撞，每一次碰撞都推動(dòng)著這個(gè)行業(yè)的進(jìn)步。

讓我們來(lái)看看這些發(fā)生中的變化：

簡(jiǎn)潔，精簡(jiǎn)，極簡(jiǎn)

極簡(jiǎn)主義（Minimalism ）在這一年大熱。原因有4點(diǎn)：

1， 手持便攜設(shè)備的占有量逐步上升，人們的訪問(wèn)方式發(fā)生了改變，小尺寸屏幕所需的精簡(jiǎn)之道反過(guò)來(lái)影響了整體的設(shè)計(jì)趨勢(shì)。

2， Apple簡(jiǎn)潔、專注、充滿誘惑力設(shè)計(jì)哲學(xué)重領(lǐng)潮流，效仿者眾多。

3， 來(lái)自全球設(shè)計(jì)思潮的影響：極簡(jiǎn)、禪意、人文、空間感的“日式風(fēng)格”這兩年在出版界、時(shí)裝設(shè)計(jì)、包裝設(shè)計(jì)、工業(yè)設(shè)計(jì)界都頗受追捧。

4， 網(wǎng)站的專業(yè)性和針對(duì)性在進(jìn)一步加強(qiáng)，人們選擇一個(gè)網(wǎng)站一次把一件事做好、做到極致，而非盲目擴(kuò)張。這也使“精簡(jiǎn)”擁有更大的實(shí)現(xiàn)空間。

極簡(jiǎn)主義體現(xiàn)設(shè)計(jì)師對(duì)意圖、受眾、情境的強(qiáng)大控制力。不是簡(jiǎn)單的做減法就可以了，如果不能很好地把握取舍的宗旨與理由，一個(gè)為了極簡(jiǎn)效果而精簡(jiǎn)的頁(yè)面可能看起來(lái)庸俗不堪，是為“做作”的留白 。

操刀這一風(fēng)格需要對(duì)作品有充分的自信和理解力，更重視細(xì)節(jié)和布局，把握恰當(dāng)?shù)膶?duì)比、強(qiáng)調(diào)。

來(lái)自版式和留白的均衡美感

極簡(jiǎn)主義風(fēng)格非常適用于以圖片為表現(xiàn)主體的網(wǎng)站

極簡(jiǎn)主義的風(fēng)潮中，還涌現(xiàn)了許多單頁(yè)網(wǎng)站。所有內(nèi)容都放在一個(gè)頁(yè)面上呈現(xiàn)，通過(guò)分屏來(lái)巧妙地布置格局，不再有跳轉(zhuǎn)和復(fù)雜的站點(diǎn)結(jié)構(gòu)，一目了然。

更有人情味與趣味的設(shè)計(jì)

運(yùn)營(yíng)上的專注使得設(shè)計(jì)師們可以在設(shè)計(jì)中投入更多的感情，更有針對(duì)性地取悅受眾。從保守、冷漠、功利的陳舊風(fēng)貌中，涌現(xiàn)出更多富有生命力和趣味的產(chǎn)品。

Twitter取得了巨大成功，可愛(ài)的小鳥(niǎo)形象深入人心。以動(dòng)物為主題的logo和網(wǎng)站吉祥物也隨之風(fēng)行起來(lái)。

這一變化出現(xiàn)的原因：
1是具有針對(duì)性的中小型服務(wù)和應(yīng)用類(lèi)網(wǎng)站大批涌現(xiàn)。
2是來(lái)自示范者的力量。
3是多元化的必然趨向。
4是在功能性、規(guī)范性和用戶體驗(yàn)之外，設(shè)計(jì)師開(kāi)始尋找那些從未出現(xiàn)過(guò)的、能更深層次打動(dòng)用戶的東西——“一種在感情上贏得人們喜愛(ài)的東西”。

親和、活潑、富有感染力、配色清新、使用自然元素作為裝飾物。

曾經(jīng)很不常見(jiàn)的高飽和度的配色，這種充滿動(dòng)感和生命力高調(diào)設(shè)計(jì)讓人充滿驚喜。

精致有趣的細(xì)節(jié)

原文鏈接:?http://blog.xiqiao.info/2010/07/19/719

對(duì)傳統(tǒng)設(shè)計(jì)的借鑒

Web設(shè)計(jì)這個(gè)年輕的分支在自我生長(zhǎng)的同時(shí)也在不停向傳統(tǒng)設(shè)計(jì)汲取營(yíng)養(yǎng)。在布局與版式方面，設(shè)計(jì)師們一直在探尋更好的表現(xiàn)手法，所以嘗試從傳統(tǒng)的設(shè)計(jì)媒介中尋求靈感，雜志版式布局（ Magazine-style Layouts）的從09年就開(kāi)始大熱，不光大型新聞網(wǎng)紛紛求變，雜志版式布局的Wordpress Themes 也炙手可熱。 這一變化對(duì)傳統(tǒng)設(shè)計(jì)不僅僅是形式上的追隨，更重要的是嘗試去借鑒與融合的態(tài)度。

Times 和 Financial Times 都是國(guó)外老牌媒體，他們的網(wǎng)站布局結(jié)合傳統(tǒng)紙媒版式有許多新潮的亮點(diǎn)，比如 豎式的流體布局，圖文混排，頭條強(qiáng)調(diào)，由標(biāo)題字號(hào)變化帶來(lái)的層級(jí)差別。

而國(guó)內(nèi)的此類(lèi)網(wǎng)站絕大多數(shù)采用的還是非常傳統(tǒng)的橫向區(qū)塊布局，信息密度高，版式缺乏節(jié)奏和韻律。

由比較可見(jiàn)，國(guó)外的大容量信息網(wǎng)站的趨勢(shì)是 降低首頁(yè)的信息密度，把內(nèi)容分?jǐn)偟蕉?jí)頻道；版式上更具引導(dǎo)性、更適于閱讀，瀏覽方式像讀報(bào)一樣更流暢隨意。
由于廣告盈利價(jià)值的差別，國(guó)內(nèi)這類(lèi)網(wǎng)站還是使用信息密度極高的索引模式，所以看起來(lái)更像說(shuō)一份導(dǎo)流量的“黃頁(yè)”而非可隨心閱讀的媒體。在信息呈現(xiàn)密度與模式無(wú)法改變的情況下，照搬國(guó)外的版式布局是非常危險(xiǎn)的。

除了在樣式上的借鑒，傳統(tǒng)版式設(shè)計(jì)上的許多經(jīng)典的實(shí)現(xiàn)手法也移植了過(guò)來(lái)，最著名的就是黃金比例和柵格系統(tǒng)（Grid System)。柵格系統(tǒng)的歷史有300多年，運(yùn)用嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格來(lái)指導(dǎo)和規(guī)范元件的分布排列。將傳統(tǒng)柵格移植為適合網(wǎng)頁(yè)設(shè)計(jì)的系統(tǒng)，不光是創(chuàng)造了一種工具，也產(chǎn)生了一種普遍的審美規(guī)范與傾向。無(wú)論你是選擇遵循規(guī)范還是打破規(guī)范，都是對(duì)它的推動(dòng)。

960px寬的網(wǎng)頁(yè)柵格系統(tǒng) 960 Grid System：

個(gè)體風(fēng)格帶來(lái)的變化

誰(shuí)才代表著趨勢(shì)？有人認(rèn)為設(shè)計(jì)師們所追捧的變化代表了潮流， 有人認(rèn)為top100的大站才是大勢(shì)所趨。狡猾一點(diǎn)說(shuō)，兩個(gè)說(shuō)法都不確切，網(wǎng)站運(yùn)營(yíng)的Top100并不代表設(shè)計(jì)上的Top100，出于多種原因，很可能它們是最保守的陣營(yíng)。但你無(wú)法忽略他們對(duì)用戶/客戶的審美及視覺(jué)習(xí)慣造成的影響。而設(shè)計(jì)師們雖然愿意挑戰(zhàn)和嘗試變化，但在面對(duì)個(gè)人化設(shè)計(jì)和商業(yè)設(shè)計(jì)時(shí)，他們的取舍卻往往不盡相同。

巨頭和個(gè)體們?cè)谠O(shè)計(jì)風(fēng)格一直在互相影響和滲透。所以你永遠(yuǎn)不應(yīng)該輕視那些看起來(lái)“個(gè)人化”和“小眾”的創(chuàng)新設(shè)計(jì)。觀察它們的最好舞臺(tái)就是設(shè)計(jì)師的Blog和Profile站。

下面這幾點(diǎn)都是從現(xiàn)在小眾網(wǎng)站上流行，慢慢被許多普通大眾網(wǎng)站設(shè)計(jì)所趨向的特征。。

更大header區(qū)，更醒目的logo和標(biāo)識(shí)，字號(hào)更大的標(biāo)題。

內(nèi)容放得再多再好，但用戶記不住“你是誰(shuí)？”也是白費(fèi)。 更大header區(qū)強(qiáng)化了用戶對(duì)品牌和風(fēng)格的記憶，讓你有更多的發(fā)揮余地去表現(xiàn)。

在背景中使用恰當(dāng)?shù)丶y理。

十幾年前，在美化手法貧乏的年代，人們也喜歡在背景中使用紋理，但大多只取得了浮華嘈雜的效果。現(xiàn)在的設(shè)計(jì)師們學(xué)會(huì)了理性而低調(diào)的使用紋理來(lái)制造風(fēng)格、提升品質(zhì)和烘

戶外服裝的電子商城。使用了粗礪的水泥紋理：

嬰幼兒用品的電子商城，使用了清潔柔和的圓點(diǎn)紋理：

把Footer區(qū)利用起來(lái)

這是典型的受Blog設(shè)計(jì)影響的潮流，在footer區(qū)放上更多的信息、標(biāo)志與快捷入口。

更注重品質(zhì)，更能抓住用戶眼睛的設(shè)計(jì)

這點(diǎn)變化在和消費(fèi)掛鉤的網(wǎng)站上非常明顯。設(shè)計(jì)師們注重對(duì)設(shè)計(jì)心理學(xué)和視覺(jué)傳達(dá)的技巧的運(yùn)用，使用強(qiáng)調(diào)和對(duì)比的策略來(lái)引導(dǎo)用戶的視覺(jué)焦點(diǎn)。更醒目的標(biāo)題，高質(zhì)量的圖片，使用slideshow來(lái)創(chuàng)造更多展現(xiàn)空間空間，這些手法都在強(qiáng)調(diào)那些希望得到用戶關(guān)注的地方。

Apple網(wǎng)站的專業(yè)、直接、有效的界面設(shè)計(jì)，不光打動(dòng)了消費(fèi)者的心，也吸引了眾多開(kāi)發(fā)者的效仿，大量App應(yīng)用網(wǎng)站都以使用Apple風(fēng)格為榮。

iPhone 4 發(fā)布時(shí)的Apple.com 首頁(yè)：一切無(wú)關(guān)的都被省略了，表現(xiàn)主體被無(wú)限強(qiáng)調(diào)，它牢牢抓住人們的目光，傳達(dá)出最直接的誘惑：

Slideshow的使用風(fēng)頭正勁。用于在有限的空間內(nèi)展示更多的信息（通常是為了放下更多大圖片）， 增加頁(yè)面的動(dòng)感和觀賞的流暢性。

在頁(yè)面里運(yùn)用可視化圖表也是一個(gè)潮流，一些表單操作也被加工為可交互的圖表。將信息或數(shù)據(jù)可視化，助讀者更深入直觀地理解其含義。

更有效但低調(diào)的交互。

交互在Web設(shè)計(jì)中是如此重要，為了讓用戶與界面更好地溝通，許多設(shè)計(jì)師過(guò)度地重視了交互，特別是只關(guān)注細(xì)節(jié)而失敗于全局。大量交互行為被過(guò)度設(shè)計(jì)，變成了用戶的負(fù)擔(dān)。如果信息能夠被更好的匹配或呈現(xiàn)，許多交互是可以避免的。未來(lái)，設(shè)計(jì)師們力求通過(guò)優(yōu)化信息架構(gòu)和使用流程去減少交互，更成熟地運(yùn)用情境菜單（上下文菜單），將操作反饋處理得更為隱形和自然。

交互的設(shè)計(jì)會(huì)向著直接有效、更低調(diào)、提升使用樂(lè)趣的方向發(fā)展。

coda.co.za 這個(gè)網(wǎng)站的交互反饋，非常簡(jiǎn)潔優(yōu)雅，效果自然。

當(dāng)鼠標(biāo)移到某張CD上的時(shí)候，它信息會(huì)通過(guò)隱藏右邊的CD顯示出來(lái)。這種反饋比懸浮框更自然。

與物理世界操作經(jīng)驗(yàn)吻合的交互體驗(yàn)

越來(lái)越多的Web操作允許快捷鍵的參與。允許快捷鍵可以提升高級(jí)用戶操作效率，增加使用樂(lè)趣，同時(shí)也是為了更好的向無(wú)障礙訪問(wèn)的方面進(jìn)步，照顧視力不好或無(wú)法鼠標(biāo)的用戶。

原文鏈接:?http://blog.xiqiao.info/2010/07/19/719

結(jié)語(yǔ)：去哪里捕捉和觀察趨勢(shì)。

相較于國(guó)外的這一波波風(fēng)潮，國(guó)內(nèi)的設(shè)計(jì)師的行動(dòng)并不多，許多原因使他們面對(duì)這些變化，或保守或滯后。同時(shí)，許多生硬的抄襲和模仿也正在傷害國(guó)內(nèi)的設(shè)計(jì)行業(yè)，從Templates (許多是過(guò)時(shí)且侵權(quán)的) 開(kāi)工、抄捷徑的“拿來(lái)主義”不光在腐蝕一個(gè)設(shè)計(jì)師的創(chuàng)造力，也在折損著整個(gè)行業(yè)從業(yè)者的價(jià)值。

我希望年輕的設(shè)計(jì)師盡可能多得去關(guān)注國(guó)外的專業(yè)Blog和作品畫(huà)廊站（Gallery），低頭干活的同時(shí)，抬頭看路。這樣才能在團(tuán)隊(duì)中提供自己的專業(yè)判斷，而不只是一個(gè)被動(dòng)的“美工”。

專業(yè)Blog：

• www.smashingmagazine.com 可以說(shuō)是如今全球內(nèi)容質(zhì)量最高的Web設(shè)計(jì)專業(yè)Blog。訂閱量接近20萬(wàn)。設(shè)計(jì)師們一定不可以錯(cuò)過(guò)。
• sixrevisions.com 為首的多名技術(shù)專家共同撰寫(xiě)的blog，提供大量對(duì)Web設(shè)計(jì)師和開(kāi)發(fā)人員有用的技巧、教程和資源。還有很多前瞻性的分析文章。
• abduzeedo.com 更新量很大,如果你設(shè)計(jì)卡殼了,這是尋找靈感的好地方.

作品共享和靈感采集站：

• deviantart.com 全球最大的設(shè)計(jì)師展示和分享創(chuàng)作的平臺(tái)。其網(wǎng)站本身交互設(shè)計(jì)也非常有特色。
• ffffound.com 圖片類(lèi)的delicious服務(wù)，一個(gè)你永遠(yuǎn)不可能拿到注冊(cè)碼的社區(qū)，但是其中活躍著大量全球一流的設(shè)計(jì)師和創(chuàng)作。

Web設(shè)計(jì)畫(huà)廊（Gallery）

designshack.co.uk （可按配色、布局和類(lèi)型進(jìn)行篩選）

reeoo.com （可按配色進(jìn)行篩選）

siteinspire.net （可按樣式、主題、網(wǎng)站類(lèi)型進(jìn)行篩選和排序）

coolhomepages.com （可按類(lèi)型進(jìn)行篩選和排序）

原載于 《程序員》雜志2010年第7期。 作者：西喬

原文永久鏈接:?http://blog.xiqiao.info/2010/07/19/719