教你打造集才華與美貌與一身的網(wǎng)站

　　網(wǎng)頁(yè)設(shè)計(jì)師面臨的最大挑戰(zhàn)之一，可能就是平衡網(wǎng)站的功能性和視覺(jué)性。你說(shuō)，我也想「極簡(jiǎn)」，我也想「高大上」，可是不弄個(gè)紅彤彤的按鈕，用戶就不知道點(diǎn)哪里嘛。在本篇文章中，中國(guó)設(shè)計(jì)網(wǎng)舉了4個(gè)例子，看看他們是如何解決這個(gè)世紀(jì)難題的。

　　有一些網(wǎng)站僅僅是為我們提供服務(wù)，也有一些網(wǎng)站讓我們看著賞心悅目，但是最好的網(wǎng)站兩者兼?zhèn)?。令人愉悅的設(shè)計(jì)能給我們帶來(lái)一種流連忘返的特別感受。

　　如果一個(gè)網(wǎng)站只有花里胡哨的吉祥物，卻沒(méi)有實(shí)質(zhì)，那么用不了多久，最初的魅力會(huì)逐漸消散，不留痕跡。我們下面列舉了一些較優(yōu)于行業(yè)水平的網(wǎng)頁(yè)設(shè)計(jì)案例，你可以從下文的案例中得到些靈感。

　　只有最好的糖衣

　　在分析案例之前，讓我們來(lái)討論一下賞心悅目的交互是如何適應(yīng)于整體的設(shè)計(jì)。

　　Aaron Walter在寫Treehouse博客的時(shí)候，通過(guò)一個(gè)1943年發(fā)布的心理學(xué)的經(jīng)典理論——馬斯洛的需求層次理論，解釋了什么是賞心悅目的設(shè)計(jì)。這個(gè)理論從本質(zhì)上將人體需求按優(yōu)先次序排列。從底層，即生理必須層 (其包括食物和氧氣等)，到最高層——非生理必須層，如自我實(shí)現(xiàn)。

　　一個(gè)可行的交互設(shè)計(jì)并不是非好看不可。一個(gè)網(wǎng)站只要有功能，可靠并且實(shí)用，哪怕外表有那么點(diǎn)丑(就如Craigslist網(wǎng)站)也可能成功。但是，一個(gè)好看的網(wǎng)站如果外強(qiáng)中干，遲早會(huì)失去它的感染力。因此影響交互設(shè)計(jì)最重要的因素，說(shuō)到底還是實(shí)用性。

　　上文并不是說(shuō)美觀不重要。正如Don Norman解釋道：人類在進(jìn)化，我們基于情感所做出決定，多于基于邏輯做出的決定。事實(shí)上，他接而提出「設(shè)計(jì)提高美觀度甚至可提升可用性」這一觀點(diǎn)，即通過(guò)創(chuàng)造一個(gè)愉快的氛圍，產(chǎn)品可以使使用者放松，反過(guò)來(lái)使機(jī)械的程序運(yùn)轉(zhuǎn)得更加平穩(wěn)。這就使學(xué)習(xí)操作網(wǎng)站變得簡(jiǎn)單許多。

　　好看的設(shè)計(jì)如同蛋糕上的糖衣，不能填飽肚子，但也是蛋糕上最可口的那部分。一個(gè)又干又平淡無(wú)味的蛋糕是無(wú)法引起食欲的，一旦有更好的選擇可選(更加多彩可口的蛋糕)，饑餓的用戶則會(huì)選擇他們。另一方面，不管你的糖衣多美味誘人，很少有人只吃甜膩的糖衣。

　　下面所說(shuō)的網(wǎng)站非常的完整：清晰的目標(biāo)、好用的界面、完善的功能——還有一點(diǎn)額外的東西。

　　1、Bitly

　　Bitly是一個(gè)廣為人知的牌子。它廣受歡迎的原因在于，哪怕在網(wǎng)絡(luò)時(shí)代的早期，它的服務(wù)就已得到大家的認(rèn)可。Bitly將網(wǎng)址縮短到幾個(gè)字符，短小精煉。當(dāng)你要分享鏈接的時(shí)候，不再需要用一長(zhǎng)串毫無(wú)聯(lián)系的字母和數(shù)字來(lái)壓倒對(duì)方。它很好的證明了，只需運(yùn)用一點(diǎn)巧妙的設(shè)計(jì)，你就可以創(chuàng)造一個(gè)前所未有的商機(jī)。

　　這是Bitly的核心感染力，并且我們猜想，即使有意思的交互設(shè)計(jì)少一些，他們?nèi)匀豢梢酝晟圃摲?wù)。有趣的交互設(shè)計(jì)是使Bitly脫穎而出的關(guān)鍵因素。

　　這個(gè)網(wǎng)站的操作非常簡(jiǎn)明。用戶們只需要將鏈接復(fù)制粘貼到左上角，旁邊的一個(gè)菜單馬上就會(huì)滑出一個(gè)新的簡(jiǎn)短的鏈接和圖標(biāo)，供人們歸檔、編輯、加標(biāo)簽或者分享鏈接。

　　只需要單擊鼠標(biāo)，你就可以從簡(jiǎn)短的網(wǎng)址追蹤到最復(fù)雜的鏈接，就像是施了魔法一般。當(dāng)設(shè)計(jì)了其中有趣的顏色和河豚的卡通形象之后，使用體驗(yàn)從頭到尾都是令人印象深刻的。再加入直觀的鏈接跟蹤和有韻律的陳列，這些體驗(yàn)會(huì)變得稍微使人沉迷——你會(huì)想看哪個(gè)鏈接點(diǎn)開(kāi)次數(shù)最多，并回去研究為什么。

　　正如交互設(shè)計(jì)師Ben Rowe所解釋的，令人愉悅的設(shè)計(jì)有兩層：表層和更深的流程層。也就是說(shuō)，吉祥物和有趣的視覺(jué)設(shè)計(jì)組成表層，而「被動(dòng)魔法式」的交互設(shè)計(jì)形成更重要的流程體驗(yàn)層面。

　　2、Medium

　　令人愉悅的設(shè)計(jì)并不是由絢麗的色彩和有趣的卡通形象堆砌而成的。正如Rowe所說(shuō)，由于用戶體驗(yàn)?zāi)芙⒏鼜?qiáng)的聯(lián)系，所以好看的設(shè)計(jì)不僅僅只是依靠那些討喜的動(dòng)物形象，而是依托于實(shí)用性。

　　作為最受歡迎的博客平臺(tái)之一，Medium具有極簡(jiǎn)主義風(fēng)格的特征，平臺(tái)使用大量的白色，沒(méi)有卡通或任何百搭的顏色。它登上我們「好看網(wǎng)站排行榜」的原因就是其簡(jiǎn)單卻強(qiáng)大的用戶體驗(yàn)。

　　Medium的極簡(jiǎn)主義獨(dú)特之處不僅在于外觀：寫作體驗(yàn)被網(wǎng)站運(yùn)營(yíng)者們視為重中之重，盡可能讓新用戶盡快上手，并且不會(huì)被那些小玩意、插件或其他功能所干擾。這不是說(shuō)網(wǎng)站風(fēng)格平淡無(wú)味，想想看，你看不到那些優(yōu)雅的印刷體，或者是像其他網(wǎng)站上不斷滾動(dòng)的新聞條，是不是覺(jué)得耳目一新了?

　　除了表層視覺(jué)，簡(jiǎn)潔干凈的交互界面讓用戶能夠更集中于寫作。它的界面功能已經(jīng)足夠完成用戶的核心目標(biāo)，Medium只需要騰出空間，讓奇跡自然發(fā)生。

　　雖然界面極其簡(jiǎn)介，但通過(guò)設(shè)置懸停和隱藏，Medium給用戶提供了所有必要的選擇(上傳圖片/視頻，插入內(nèi)容等)。不像傳統(tǒng)的博客平臺(tái)體驗(yàn)給人感覺(jué)更多的是「內(nèi)容管理模式」，Medium把寫作功能和上傳功能創(chuàng)造性地結(jié)合在一起。

　　如此簡(jiǎn)潔如白紙般的界面，即使是再小白的門外漢，寫起博客來(lái)也會(huì)覺(jué)得自己如同大文豪海明威。

　　網(wǎng)站也提供了其他很好的體驗(yàn)。比如每篇文章都會(huì)有一個(gè)閱讀時(shí)間提示，你就會(huì)知道你閱讀這篇文章大概會(huì)花多長(zhǎng)時(shí)間。而在最基礎(chǔ)的編輯頁(yè)面，你甚至可以直接從百度圖片里把搜索的圖片復(fù)制粘貼上去，而不需要額外下載以及重新上傳(這對(duì)那些長(zhǎng)期寫博客的博主來(lái)說(shuō)真是一次解放!)。

　　上述這些精巧細(xì)微的設(shè)計(jì)看似對(duì)于一個(gè)博客平臺(tái)來(lái)說(shuō)并非缺一不可，但正是它們出乎意料的有用，才提升了設(shè)計(jì)的檔次。這些特質(zhì)不只博用戶一笑，也使他們更好地完成目標(biāo)。如果你想創(chuàng)造一個(gè)完美的「愉悅設(shè)計(jì)」，就一定要在交互設(shè)計(jì)中加點(diǎn)「小心思」進(jìn)去。

　　3、Carbonmade

　　當(dāng)你把實(shí)打?qū)嵉挠脩趔w驗(yàn)和有趣的顏色以及卡通結(jié)合起來(lái)，會(huì)發(fā)生什么?你會(huì)得到Carbonmade，一個(gè)讓建站小白輕松無(wú)痛苦地制作網(wǎng)絡(luò)作品集的網(wǎng)站。

　　比愉悅的體驗(yàn)更深一層的體驗(yàn)，是讓用戶可以輕松在線創(chuàng)造他們自己的作品集——這是金字塔重要的基礎(chǔ)。據(jù)創(chuàng)始人解釋，網(wǎng)站的靈感源于在網(wǎng)上發(fā)表自己的插畫的糟糕經(jīng)歷，又貴又麻煩。在第一印象中，網(wǎng)站具有風(fēng)格獨(dú)特的元素，這種元素在適應(yīng)于用戶的基礎(chǔ)上，使網(wǎng)站達(dá)到了表層次的好看。這些元素是：輕松的復(fù)制功能、明亮的色彩和動(dòng)物圖像的大量使用。這種視覺(jué)處理能夠獲得你的注意力。而且，Carbonmade 甚至在網(wǎng)站上大膽聲稱，即使是小白用戶，也用不著看使用說(shuō)明。

　　當(dāng)你潛入更深一些，你會(huì)發(fā)現(xiàn)Carbonmade能夠用Medium式的流暢體驗(yàn)來(lái)滿足一切用戶自己建站所需要的功能。創(chuàng)建你的方案，拖拉放下你想要展現(xiàn)的東西，在左手邊的導(dǎo)航欄輸入文字，想要的界面立馬呈現(xiàn)。

　　你想更新你的簡(jiǎn)介?只需要在旁邊的導(dǎo)航欄輸入文字，右邊的文本框便可以即時(shí)瀏覽效果，真是立等可取!

　　即使網(wǎng)站免費(fèi)的方案已經(jīng)可以幫助用戶在30分鐘內(nèi)建立一個(gè)比較完備的作品集，現(xiàn)在更多地高級(jí)用戶也會(huì)為了更個(gè)性化的服務(wù)更新升級(jí)至付費(fèi)方案。

　　正如Rowe所說(shuō)，「不像功能的功能」讓界面更加討人歡心。這會(huì)讓你感覺(jué)自己并不是通過(guò)工具，而是通過(guò)自己的雙手在制作作品集。學(xué)習(xí)曲線實(shí)際上已經(jīng)不復(fù)存在了，因?yàn)閺挠脩魝儚牡谝幌聠螕糸_(kāi)始，他們就立馬獲得滿滿的成就感。

　　4、MailChimp

　　最后是MailChimp網(wǎng)站，它完美地平衡了實(shí)用性和視覺(jué)效果。MailChimp是一個(gè)通過(guò)電子郵件訂閱 RSS 的在線工具，聽(tīng)起來(lái)就很「性冷淡」。這應(yīng)該可以解釋為什么公司喜歡創(chuàng)造一個(gè)更加個(gè)性化的面孔來(lái)推銷自己。如此一來(lái)，MailChimp就把一個(gè)枯燥無(wú)聊的任務(wù)轉(zhuǎn)變成一次很好玩的體驗(yàn)。

　　賞心悅目的設(shè)計(jì)是被公司廣泛看好的，因?yàn)樗鞘袌?chǎng)中決定公司核心競(jìng)爭(zhēng)力的要素。

　　不混亂的界面、直截了當(dāng)?shù)倪x擇和多選的對(duì)話形式，把復(fù)雜的操作歸納為一個(gè)簡(jiǎn)單且人性化的體驗(yàn)。MailChimp在你成功發(fā)送一組郵件之后，還設(shè)計(jì)了一個(gè)好玩的擊掌屏顯。這是一個(gè)令人印象深刻的體驗(yàn)，一些用戶甚至一邊擊掌一邊哈哈大笑。

　　除了萌萌的猴子之外，網(wǎng)站其余部分也非常生動(dòng)友好。無(wú)襯線字體創(chuàng)造了隨意的氛圍，文本的基調(diào)也簡(jiǎn)單輕巧(絕非偶然)。

　　借助「惡意賣萌」的動(dòng)畫和「段子手式」的文案(如：這是您的榮耀時(shí)刻)，MailChimp網(wǎng)站化解了第一次發(fā)送郵件的緊張感。有別于一個(gè)冷冰冰的郵件推廣軟件，MailChimp更像是一個(gè)能感同身受般理解你的導(dǎo)師。

　　幽默和動(dòng)畫都是只是表層的好看。但是當(dāng)我們進(jìn)入更深層次，我們會(huì)看到對(duì)話反饋和簡(jiǎn)單的任務(wù)程序都有助于MailChimp網(wǎng)站與用戶于無(wú)形中建立聯(lián)系。產(chǎn)品指引、娛樂(lè)和幫助用戶。而且，即使是新手也會(huì)感覺(jué)像個(gè)內(nèi)行。那確實(shí)是個(gè)難忘的經(jīng)歷。

　　總結(jié)：

　　好看的設(shè)計(jì)可以不同程度地給網(wǎng)站錦上添花。在不失實(shí)用性的前提下，融入能愉悅用戶的元素，你將會(huì)創(chuàng)造出一個(gè)既愉悅又實(shí)用的網(wǎng)站。

　　賞心悅目的終極目標(biāo)，是當(dāng)與用戶創(chuàng)造無(wú)形的情感連接并給予用戶力量。這不是一項(xiàng)輕松的任務(wù)，但它確實(shí)能讓你的產(chǎn)品脫穎而出。