一個(gè)網(wǎng)站的核心是它的功能和內(nèi)容，而設(shè)計(jì)則決定了這些功能、內(nèi)容如何被組織和展現(xiàn)出來(lái)。

對(duì)已成功的網(wǎng)站進(jìn)行再設(shè)計(jì)——重新構(gòu)造它的組織和展現(xiàn)形式是具有挑戰(zhàn)性的。偏偏有設(shè)計(jì)師喜歡迎難而上，嘗試對(duì)facebook、google這些著名網(wǎng)站進(jìn)行概念設(shè)計(jì)。他們通常有兩條思路，一是對(duì)現(xiàn)有問(wèn)題挖掘然后改進(jìn)，二是提出完全創(chuàng)新的想法。

下面收集整理+翻譯了一些設(shè)計(jì)師的概念設(shè)計(jì)成果，其中各有優(yōu)劣，有的交互讓人眼前一亮，有的視覺(jué)表現(xiàn)優(yōu)秀，有的缺乏實(shí)現(xiàn)的可能性，希望這些設(shè)計(jì)以及設(shè)計(jì)思路能給各位帶來(lái)一些靈感。

Facebook
Facebook是著名的社交網(wǎng)絡(luò)服務(wù)類(lèi)網(wǎng)站，于2004年2月4日上線。截至2010年7月Facebook擁有超過(guò)6億活躍用戶。

概念設(shè)計(jì)一：Facebook Facelift
設(shè)計(jì)師：Barton Smith

這是一個(gè)完成于2009年的項(xiàng)目，由設(shè)計(jì)師Barton Smith自發(fā)完成，其設(shè)計(jì)目的是挑戰(zhàn)facebook原有的形式和功能。整個(gè)設(shè)計(jì)使用黑白灰+fb品牌色藍(lán)色點(diǎn)綴，顯得干凈優(yōu)雅，專(zhuān)業(yè)成熟。

首頁(yè)一些特點(diǎn)：
1．發(fā)布工具條：發(fā)布工具條位置固定，使用戶在任意頁(yè)面都可以發(fā)布內(nèi)容，避免了不必要操作。
2．對(duì)信息流的兩種篩選方式：可篩選內(nèi)容提供者或內(nèi)容類(lèi)型。
3．提供了兩種feed展示形式：緊湊（compact）和完整（full）模式。
4．實(shí)時(shí)feed：實(shí)時(shí)feed固定在頁(yè)面底部，滾動(dòng)展示好友的最近更新，鼠標(biāo)經(jīng)過(guò)時(shí)展開(kāi)。避免了G+的實(shí)時(shí)feed造成整個(gè)頁(yè)面跳動(dòng)的問(wèn)題。

照片feed的排版形式整齊清晰。個(gè)人主頁(yè)更加無(wú)縫地集成到網(wǎng)站中，和首頁(yè)布局統(tǒng)一。

概念設(shè)計(jì)二：iA’s 2006 Facebook Designs, Redesigned
設(shè)計(jì)師：IA

這次創(chuàng)新設(shè)計(jì)開(kāi)始于2006年12月，是著名團(tuán)隊(duì)IA對(duì)fb進(jìn)行的再設(shè)計(jì)，未正式發(fā)布，只在其博客上有草圖發(fā)表。
他們的基本概念是：采用郵箱式（mail-application like）的界面，折疊的三欄式布局逐級(jí)展開(kāi)，清晰的將導(dǎo)航、信息流、回應(yīng)三種內(nèi)容區(qū)別開(kāi)。如下圖所示：導(dǎo)航（左），信息流（中），評(píng)論（右）。

默認(rèn)狀態(tài)下，只能看到每條feed的兩條評(píng)論，要查看全部評(píng)論，需點(diǎn)擊單條feed或者對(duì)應(yīng)的評(píng)論區(qū)域。

設(shè)計(jì)非常具有前瞻性，后來(lái)Twitte也采用了這種方式，兩欄折疊展開(kāi)。相比f(wàn)b，twitter其實(shí)更適用這種方式，因?yàn)閒b強(qiáng)調(diào)好友間的互動(dòng)，而twitter更強(qiáng)調(diào)信息的快速流動(dòng)。

對(duì)比IA 06年的概念設(shè)計(jì)和2010年的fb，可以發(fā)現(xiàn)：
1．IA的品牌標(biāo)志可用空間更大
2．IA 評(píng)論占用的空間更大
3．早于當(dāng)時(shí)的fb，IA將左導(dǎo)航進(jìn)行分組歸類(lèi)，更加有序
4．IA廣告位少，但位置突出，無(wú)其他運(yùn)營(yíng)位置

概念設(shè)計(jì)三：
設(shè)計(jì)師: Justin Dauer

設(shè)計(jì)師對(duì)這個(gè)設(shè)計(jì)設(shè)定的目標(biāo)是：使界面簡(jiǎn)潔、更加web app化。他認(rèn)為，每天登陸fb人數(shù)超過(guò)175 ,000,000（2010年數(shù)據(jù)），所以用戶每天進(jìn)行的大量操作是重復(fù)、集中的。

界面一些特征：
1．兩欄布局：放棄了sns網(wǎng)站常見(jiàn)的三欄布局，給feed區(qū)域更多空間
2．右側(cè)欄集中展示用戶個(gè)人內(nèi)容：賬戶名、狀態(tài)更新區(qū)，個(gè)人頭像，當(dāng)前狀態(tài)， app，活動(dòng)、聊天等
3．把Fb的左側(cè)導(dǎo)航放到了右側(cè)欄的My facebook板塊下，更app化，視覺(jué)處理也使這些入口足夠顯眼
4．右側(cè)部分模塊可拖拽、自定義

概念設(shè)計(jì)四：
設(shè)計(jì)師: Jonaska

這是一個(gè)有視覺(jué)沖擊力的界面，設(shè)計(jì)堅(jiān)持了fb藍(lán)，但采用了相對(duì)較重的顏色和質(zhì)感，甚至一點(diǎn)點(diǎn)的擬物（如評(píng)論框、底部聊天窗口）。查看原圖

一些小細(xì)節(jié)也不錯(cuò)，如：發(fā)表框的設(shè)計(jì)，贊、評(píng)論部分的設(shè)計(jì)。

概念設(shè)計(jì)五：Telerik fdeck Client for Facebook
設(shè)計(jì)師：Telerik

嚴(yán)格說(shuō)來(lái)，這不只是一個(gè)“概念設(shè)計(jì)”，而是一個(gè)已發(fā)布的beta版桌面客戶端——Microsoft Client for Facebook Beta。不過(guò)因?yàn)樗慕换ズ鸵曈X(jué)表現(xiàn)上都與傳統(tǒng)fb大相徑庭，而且亮點(diǎn)多多，所以在這里一并提出。
Feed 的展示形式除了常規(guī)的按時(shí)間線列表排列以外，它還提供了網(wǎng)格（grid）形式和圖片feed（photofeed）展示，如下：

其他概念設(shè)計(jì)：

IMDb
IMDb全稱(chēng)Internet Movie Database，互聯(lián)網(wǎng)電影資料庫(kù)。是一個(gè)關(guān)于電影演員、電影、電視節(jié)目、電視明星、電子游戲和電影制作的在線數(shù)據(jù)庫(kù)。IMDb的資料中包括了影片的眾多信息，演員，片長(zhǎng)，內(nèi)容介紹，分級(jí)，評(píng)論等。截至2010年10月8日，IMDb共收錄了1,692,407部作品資料以及3,797,214名人物資料。

概念設(shè)計(jì)一：IMDB User Interface Concept——film page
設(shè)計(jì)師：Vladimir Kudinov

為什么要對(duì)IMDB進(jìn)行再設(shè)計(jì)？

設(shè)計(jì)師認(rèn)為現(xiàn)有的IMDB信息太多，大量的信息未經(jīng)組織堆砌在網(wǎng)站上，讓人找不著北。而實(shí)際上并不需要這么多的信息，瀏覽這類(lèi)網(wǎng)站的人往往更關(guān)注圖片、視頻。所以設(shè)計(jì)的重點(diǎn)放在使界面簡(jiǎn)單有序，讓用戶輕松瀏覽，而不是痛苦的尋找、閱讀。

用戶在界面上看到的信息主要是：照片、演員、預(yù)告片、故事情節(jié)等。點(diǎn)擊向右的箭頭進(jìn)入下一屏。另外，“在線觀看”、“到Amazon購(gòu)買(mǎi)”的選項(xiàng)也整合到了界面中。

其他更多界面請(qǐng)見(jiàn)http://www.behance.net/gallery/IMDB-Filmpage-Concept/1678386

概念設(shè)計(jì)二：IMDB Website Redesign
設(shè)計(jì)師： Rob Atomic

IMDB的問(wèn)題在于內(nèi)容太多，以至于顯得雜亂難以使用，因此設(shè)計(jì)師對(duì)網(wǎng)站信息架構(gòu)進(jìn)行了梳理。

Youtube
YouTube是全球最大的視頻分享網(wǎng)站，2005年2月，由三名PayPal的前任員工所創(chuàng)站，2006年11月，Google以16.5億美元收購(gòu)了YouTube。

概念設(shè)計(jì)一：YOUTUBE 2011 CONCEPT
設(shè)計(jì)師: Josh Collie

設(shè)計(jì)師本人是youtube的忠實(shí)用戶，在使用過(guò)程中對(duì)網(wǎng)站的一些體驗(yàn)不滿，于是決定自己動(dòng)手設(shè)計(jì)。概念版中，設(shè)計(jì)師做了這樣三件事：
1．視頻詳情頁(yè)——簡(jiǎn)化
YouTube再設(shè)計(jì)的第一步是進(jìn)行簡(jiǎn)化，去掉使用不足的功能，清理界面元素，以便使用戶的注意力集中在視頻上，而不是周?chē)募?xì)節(jié)上。如下圖。評(píng)論間距也進(jìn)行了調(diào)整，鼠標(biāo)hover后，操作才出現(xiàn)。另外，整站的頭部配合google產(chǎn)品，加入了細(xì)微的灰色漸變和google的鏈接藍(lán)。

2．視頻詳情頁(yè)——多列布局
設(shè)計(jì)師認(rèn)為，在觀看視頻時(shí)，有兩個(gè)很大的問(wèn)題：
（1）無(wú)法觀看視頻的同時(shí)搜索查找其他視頻
（2）在閱讀評(píng)論時(shí)總要向下滾動(dòng)，而視頻就被滾出屏幕上方了。

所以概念設(shè)計(jì)試圖解決這兩個(gè)問(wèn)題。如下圖所示，設(shè)計(jì)中有3個(gè)單獨(dú)的滾動(dòng)列，從左至右依次是搜索，視頻和評(píng)論。當(dāng)開(kāi)始進(jìn)行搜索后，左欄會(huì)擴(kuò)展出篩選選項(xiàng)。當(dāng)選擇了一個(gè)視頻時(shí)，視頻在中欄加載。當(dāng)選擇視頻后，左欄中增加一個(gè)tab，展示相關(guān)影片。

這樣的設(shè)計(jì)部分受到了平板電腦使用習(xí)慣的影響，隨著移動(dòng)設(shè)備的廣泛應(yīng)用，web設(shè)計(jì)也可以從中吸取適當(dāng)?shù)捏w驗(yàn)移植過(guò)來(lái)。
評(píng)論的展示方式G+的照片板塊也在使用。

3．搜索結(jié)果頁(yè)——運(yùn)用網(wǎng)格排列
設(shè)計(jì)師用網(wǎng)格排列形式來(lái)展示搜索結(jié)果，而不是每條結(jié)果單獨(dú)占用一行。使一屏內(nèi)可看到更多搜索結(jié)果。同時(shí)使用了更大的縮略圖，顯得內(nèi)容更豐富，更具吸引力。
搜索結(jié)果頁(yè)的另一個(gè)變化是搜索篩選項(xiàng)。Youtube當(dāng)前版本需要點(diǎn)擊才能展開(kāi)搜索篩選項(xiàng)，而展開(kāi)后又占用過(guò)多空間。所以下圖設(shè)計(jì)對(duì)搜索篩選項(xiàng)進(jìn)行了整合，直接展示在搜索結(jié)果頂部。

設(shè)計(jì)師的詳細(xì)介紹請(qǐng)見(jiàn)http://joshcollie.com/YouTube-redesign/

其他概念設(shè)計(jì)：

Twitter
概念設(shè)計(jì)：MetroTwit
設(shè)計(jì)師：Pixel Tucker

這個(gè)設(shè)計(jì)追求簡(jiǎn)單、少即是多，視覺(jué)風(fēng)格受Windows Phone 7的Metro語(yǔ)言影響。
皮膚和模塊都可以自定義。

Google
Google大概是世界上最著名的網(wǎng)站之一了吧。它是全球最大的并且最受歡迎的搜索引擎。同時(shí)google還有眾多其他產(chǎn)品，包括gmail、map、google+，以及chrome、android等。

概念設(shè)計(jì)一：
設(shè)計(jì)師: FloxDesign
概念有點(diǎn)類(lèi)似bing，使用大圖片背景，畫(huà)面很美

概念設(shè)計(jì)二：
設(shè)計(jì)師: Craig Reville

更多設(shè)計(jì)圖見(jiàn)http://dribbble.com/CraigReville/projects/7692-Google-Re-Design

Amazon
亞馬遜，是美國(guó)最大的一家電子商務(wù)公司，也是網(wǎng)絡(luò)上最早開(kāi)始電子商務(wù)的公司之一。亞馬遜成立于1995年，一開(kāi)始只經(jīng)營(yíng)網(wǎng)絡(luò)的書(shū)籍銷(xiāo)售，現(xiàn)在則擴(kuò)及了范圍相當(dāng)廣的其他產(chǎn)品，包括了音樂(lè)、軟件、電子產(chǎn)品、衣服、家具等。

概念設(shè)計(jì)：
設(shè)計(jì)師：Trevor Cleveland

設(shè)計(jì)是為了解決問(wèn)題而存在的。Amazon的問(wèn)題同樣也是信息過(guò)多，導(dǎo)航類(lèi)目繁多，圖文混雜。它使用的流動(dòng)布局(fluid)適合于小屏幕，而在越來(lái)越多的大屏幕、寬屏幕上看起來(lái)就顯得留白過(guò)多，排版更加混亂難以閱讀。因此設(shè)計(jì)師提出了以下幾種方案。

更多界面請(qǐng)見(jiàn)http://www.behance.net/gallery/Amazoncom-Homepage-Redesign-Exploration/1109537

朋友網(wǎng)
概念設(shè)計(jì)：
設(shè)計(jì)師：pearlfu

今年4、5月，我抽業(yè)余時(shí)間嘗試著對(duì)朋友網(wǎng)做概念設(shè)計(jì)，將理想中的SNS通過(guò)設(shè)計(jì)稿表達(dá)。由于拋開(kāi)了平日做設(shè)計(jì)需求的種種限制，過(guò)程非常開(kāi)心，設(shè)計(jì)師brella、wendy也一起出謀劃策。雖然還存在著許多問(wèn)題，但在此分享出來(lái)，希望能起到拋磚引玉的作用。

一直認(rèn)為人是社區(qū)內(nèi)最核心的元素，認(rèn)識(shí)人、了解人、與人互動(dòng)……社區(qū)的一切都應(yīng)該圍繞著人來(lái)展開(kāi)。因此概念設(shè)計(jì)的基本理念是：以人為核心——以人為核心來(lái)導(dǎo)航、以人為核心篩選信息。

社區(qū)分為三大部分：社區(qū)好友、游戲好友、發(fā)現(xiàn)好友。其中游戲好友、發(fā)現(xiàn)好友分別滿足社區(qū)內(nèi)交友和游戲兩大最旺盛的需求。

界面的基本結(jié)構(gòu)是：頂部導(dǎo)航、左側(cè)人、右側(cè)內(nèi)容。操作基本在一個(gè)界面內(nèi)完成。

其他一些小特點(diǎn)：
1．人物排版：頭像大小根據(jù)你和好友間的親密度有所不同，越關(guān)注、互動(dòng)越多的好友頭像越大，這樣能直觀的了解到你最關(guān)注的好友以及他的新鮮事。
2．將游戲好友和社區(qū)好友分開(kāi)：以保證關(guān)系鏈的純凈，也為游戲玩家提供方便的加好友方式
3．在地圖上直觀的發(fā)現(xiàn)好友，設(shè)想能查找附近的人，也能直接在地圖上畫(huà)圈，圈出一個(gè)區(qū)域內(nèi)的人
4．人氣推薦：圖文混排，希望用戶在漫游、游戲般的環(huán)境中發(fā)現(xiàn)好友。

寫(xiě)在最后：優(yōu)秀的設(shè)計(jì)總能在功能、可用性和美觀之間取得平衡。對(duì)于以上設(shè)計(jì)，你可能會(huì)有不同的看法和偏好，希望它們能對(duì)你的工作有一點(diǎn)點(diǎn)幫助、啟發(fā)。

參考資料及相關(guān)鏈接：
http://www.hongkiat.com/blog/concept-design-facelift-notable-websites/
http://www.behance.net/gallery/Facebook-Facelift/314489
http://www.informationarchitects.jp/en/ias-2006-facebook-designs-redesigned/
http://www.telerik.com/products/fdeck.aspx
http://www.behance.net/gallery/IMDB-Filmpage-Concept/1678386
http://joshcollie.com/YouTube-redesign/
http://www.metrotwit.com/

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