一個(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ù)類網(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)雅，專業(yè)成熟。

首頁(yè)一些特點(diǎn)：

1．發(fā)布工具條：發(fā)布工具條位置固定，使用戶在任意頁(yè)面都可以發(fā)布內(nèi)容，避免了不必要操作。

2．對(duì)信息流的兩種篩選方式：可篩選內(nèi)容提供者或內(nè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)行分組歸類，更加有序

4．IA廣告位少，但位置突出，無(wú)其他運(yùn)營(yíng)位置

標(biāo)簽： 再設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 產(chǎn)品設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。