著名網(wǎng)站改版的10個(gè)經(jīng)典案例
網(wǎng)站的重新設(shè)計(jì)可能會(huì)為它的成長和發(fā)展帶來新的契機(jī)。隨著時(shí)間的推移,網(wǎng)站的訪問者變了,而網(wǎng)站本身也有必要隨之進(jìn)化。它并不一定非得和過去一樣,你可以隨著網(wǎng)站設(shè)計(jì)的趨勢重新構(gòu)建它。
當(dāng)你重新設(shè)計(jì)網(wǎng)站的時(shí)候,功能實(shí)現(xiàn)與用戶體驗(yàn)是你需要考慮的首要因素。以下的十個(gè)重設(shè)案例中,包括了著名的社交網(wǎng)站Facebook,搜索巨頭Google,視頻巨擘Youtube,以及權(quán)威的影視評(píng)分網(wǎng)站IMDB。看看這些案例,再點(diǎn)擊每張圖片上方的鏈接訪問原始網(wǎng)頁,你可以對(duì)比以下它們的差異。琢磨一下為什么這些重設(shè)是成功的,你可能會(huì)從中受益匪淺。
Top 10:Amazon
這一設(shè)計(jì)稿出自設(shè)計(jì)師James Cipriano之手,并且發(fā)布在Dribbble上。James強(qiáng)化了Amazon的標(biāo)識(shí)色黃色,并應(yīng)用到側(cè)邊欄上。而主體部分的產(chǎn)品圖則比目前的Amazon地設(shè)定更清晰規(guī)整。右上角的個(gè)人信息用圓形的頭像替代了,而這正是目前最流行的表現(xiàn)形式。原始的Amazon網(wǎng)站戳這里。
James Cipriano對(duì)Amazon的重新設(shè)計(jì)
Top 9:IMDB
設(shè)計(jì)師Vladimir Kudinov在自己的Behance頁面中發(fā)布了這一設(shè)計(jì)作品。原始的IMDB首頁設(shè)計(jì)來的更傳統(tǒng),而Vladimir的設(shè)計(jì)則采用了圖片拼貼的方式來呈現(xiàn),大小錯(cuò)落的照片圍繞著純色底的文字選框,充滿了視覺沖擊力。原始的IMDB網(wǎng)站戳這里(需要翻墻)。
Vladimir Kudinov對(duì)IMDB的重新設(shè)計(jì)
Top 8:Google
這一重設(shè)作品同樣發(fā)布在Behance上面,作者是Ayman Shaltoni。Ayman的設(shè)計(jì)非常有特色,Google的Logo字體從襯線體替換成了更現(xiàn)代的非襯線體,原本清新的糖果色被更加復(fù)古的色調(diào)所替代??赡苁鞘艿搅斯爬系腗ac OS 8.5的啟發(fā),原本置于頂端的導(dǎo)航欄被移動(dòng)到下方,并且可以像抽屜一樣打開,這可能是這一重設(shè)最為亮眼的地方。原始的Google網(wǎng)站戳這里。
Ayman Shaltoni對(duì)Google的重新設(shè)計(jì)
Top 7:BBC
Micheal Coyle也認(rèn)為圖片是最抓人眼球的。他重新設(shè)計(jì)BBC的首頁的時(shí)候同樣選擇了將圖片作為呈現(xiàn)的主體,去除大量的文字堆砌,更加直觀。左側(cè)的側(cè)邊欄替代原本BBC網(wǎng)站上各個(gè)區(qū)塊的標(biāo)題,整合度更高。原始的BBC網(wǎng)站戳這里。
Michael Coyle對(duì)BBC的重新設(shè)計(jì)
Top 6:Twitter
Zsolt所設(shè)計(jì)的Twitter網(wǎng)站采用了獨(dú)特的分欄設(shè)計(jì)。有研究表明正常人閱讀的時(shí)候,一眼只能看到幾個(gè)字,這也是為什么報(bào)紙的排版中每一欄的寬度都不大。而Zsolt的設(shè)計(jì)與此不謀而合。另外,Zsolt的twitter頁面的信息維度也更加的扁平,頁面可以向左滑動(dòng),看到更多的欄目,也可以向下滾動(dòng),閱讀更多的回復(fù)。原始的twitter網(wǎng)頁戳這里(需要翻墻)。
Zsolt Hutvagner對(duì)Twitter的重新設(shè)計(jì)
Top 5:Wikipedia
維基百科也許是截至目前最好的百科全書。目前的維基百科頁面極其素雅,文字遠(yuǎn)多于圖片,因此,排版就顯得尤為重要了。George基于現(xiàn)有頁面和欄目重新設(shè)計(jì)了維基百科的首頁。左側(cè)以圖片為日期索引,頗具匠心,而右側(cè)則使用圖文混排的形式,以相同尺寸的矩形區(qū)塊來劃分不同的欄目。值得一提的是,George在此也引入了時(shí)間線,拓展了信息呈現(xiàn)的維度。原始的維基百科的頁面戳這里。
George Kvasnikov對(duì)Wikipedia的重新設(shè)計(jì)
Top 4:Soundcloud
Soundcloud號(hào)稱是音頻分享界的Youtube,無出其右者。Anton保留了Soundcloud原始的配色方案,增加了banner圖,強(qiáng)化了主體部分的排版,為右側(cè)的個(gè)人信息欄增加了淺灰色的底色,區(qū)分出了區(qū)塊。比起原本的Soundcloud頁面,Anton的設(shè)計(jì)顯得更加清晰,又不失其簡約風(fēng)格的神韻。原始的Soundcloud頁面戳這里(需要翻墻)。
Anton Skugarov 對(duì)Soundcloud的重新設(shè)計(jì)
Top 3:Youtube
被封為視頻領(lǐng)域傳奇的Youtube就無需深入介紹了吧?同以上的幾個(gè)案例一樣,Alexandr對(duì)于Youtube的改造方向也選擇了扁平化。這套重新設(shè)計(jì)的頁面保留了Google的配色體系,左側(cè)的個(gè)人信息欄使用了經(jīng)典的紅黑配色,在淺色的底色上顯得非常顯眼,也讓整個(gè)版面不那么單調(diào)了。視頻的排布方式也遵循一貫的排布方式,中間是主要的視頻內(nèi)容,右側(cè)為相關(guān)推薦。原始的Youtube網(wǎng)頁戳這里(需要翻墻)。
Alexandr Brinza對(duì)Youtube的重新設(shè)計(jì)
Top 2:Netflix
不知道Netflix?那你應(yīng)該知道連奧巴馬都喜歡看的美劇《紙牌屋》吧?這就是Netflix出品的。作為美國最著名的在線影片租賃提供商,Netflix沿用著充滿復(fù)古范兒的Logo,以及相對(duì)古板的頁面排布方案。Vivek對(duì)Netflix的重新設(shè)計(jì)還是比較徹底的,重新設(shè)計(jì)的logo,扁平的頁面。三欄式的頁面設(shè)計(jì),方便用戶篩選他們喜歡的影片,而影片的圖文混排比也比之前的版式更加清晰出眾。原始的Netflix的頁面戳這里(大陸無法觀影)。
Vivek Venkatraman對(duì)Netflix的重新設(shè)計(jì)
Top 1:Facebook
傳奇的社交網(wǎng)站Facebook已經(jīng)不是第一次被人重新設(shè)計(jì)了。但是這一次的設(shè)計(jì)方案還是令人印象非常深刻的。Fred采用了微軟的Metro設(shè)計(jì)風(fēng)格,藍(lán)色與白色的色塊來承載文字信息,與圖片錯(cuò)落混排,效果極為養(yǎng)眼。深色的側(cè)邊欄與頂部的藍(lán)色導(dǎo)航欄,也同樣形成色彩對(duì)比,清晰明了。戳這里訪問Facebook,當(dāng)然,你得翻墻才行。
Fred Nerby對(duì)Facebook的重新設(shè)計(jì)
本文地址:http://m.likemindfilms.com/tutorial/de2062.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏