網頁設計師面臨的最大挑戰之一，可能就是平衡網站的功能性和視覺性。你說，我也想「極簡」，我也想「高大上」，可是不弄個紅彤彤的按鈕，用戶就不知道點哪里嘛。在本篇文章中，我們舉了4個例子，看看他們是如何解決這個世紀難題的。

有一些網站僅僅是為我們提供服務，也有一些網站讓我們看著賞心悅目，但是最好的網站兩者兼備。令人愉悅的設計能給我們帶來一種流連忘返的特別感受。

如果一個網站只有花里胡哨的吉祥物，卻沒有實質，那么用不了多久，最初的魅力會逐漸消散，不留痕跡。我們下面列舉了一些較優于行業水平的網頁設計案例，你可以從下文的案例中得到些靈感。

只有最好的糖衣

在分析案例之前，讓我們來討論一下賞心悅目的交互是如何適應于整體的設計。

Aaron Walter在寫Treehouse博客的時候，通過一個1943年發布的心理學的經典理論——馬斯洛的需求層次理論，解釋了什么是賞心悅目的設計。這個理論從本質上將人體需求按優先次序排列。從底層，即生理必須層 （其包括食物和氧氣等），到最高層——非生理必須層，如自我實現。

（感性的界面設計：熱情的用戶入口）

把本理論運用于網頁設計，Walter提出了新的需求層次理論。

（感性的界面設計：熱情的用戶入口）

一個可行的交互設計并不是非好看不可。一個網站只要有功能，可靠并且實用，哪怕外表有那么點丑（就如Craigslist網站）也可能成功。但是，一個好看的網站如果外強中干，遲早會失去它的感染力。因此影響交互設計最重要的因素，說到底還是實用性。

上文并不是說美觀不重要。正如Don Norman解釋道：人類在進化，我們基于情感所做出決定，多于基于邏輯做出的決定。事實上，他接而提出「設計提高美觀度甚至可提升可用性」這一觀點，即通過創造一個愉快的氛圍，產品可以使使用者放松，反過來使機械的程序運轉得更加平穩。這就使學習操作網站變得簡單許多。

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

下面所說的網站非常的完整：清晰的目標、好用的界面、完善的功能——還有一點額外的東西。

?1. Bitly

Bitly是一個廣為人知的牌子。它廣受歡迎的原因在于，哪怕在網絡時代的早期，它的服務就已得到大家的認可。Bitly將網址縮短到幾個字符，短小精煉。當你要分享鏈接的時候，不再需要用一長串毫無聯系的字母和數字來壓倒對方。它很好的證明了，只需運用一點巧妙的設計，你就可以創造一個前所未有的商機。

這是Bitly的核心感染力，并且我們猜想，即使有意思的交互設計少一些，他們仍然可以完善該服務。有趣的交互設計是使Bitly脫穎而出的關鍵因素。

這個網站的操作非常簡明。用戶們只需要將鏈接復制粘貼到左上角，旁邊的一個菜單馬上就會滑出一個新的簡短的鏈接和圖標，供人們歸檔、編輯、加標簽或者分享鏈接。

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

正如交互設計師Ben Rowe所解釋的，令人愉悅的設計有兩層：表層和更深的流程層。也就是說，吉祥物和有趣的視覺設計組成表層，而「被動魔法式」的交互設計形成更重要的流程體驗層面。

2. Medium

令人愉悅的設計并不是由絢麗的色彩和有趣的卡通形象堆砌而成的。正如Rowe所說，由于用戶體驗能建立更強的聯系，所以好看的設計不僅僅只是依靠那些討喜的動物形象，而是依托于實用性。

作為最受歡迎的博客平臺之一，Medium具有極簡主義風格的特征，平臺使用大量的白色，沒有卡通或任何百搭的顏色。它登上我們「好看網站排行榜」的原因就是其簡單卻強大的用戶體驗。

Medium的極簡主義獨特之處不僅在于外觀：寫作體驗被網站運營者們視為重中之重，盡可能讓新用戶盡快上手，并且不會被那些小玩意、插件或其他功能所干擾。這不是說網站風格平淡無味，想想看，你看不到那些優雅的印刷體，或者是像其他網站上不斷滾動的新聞條，是不是覺得耳目一新了？

除了表層視覺，簡潔干凈的交互界面讓用戶能夠更集中于寫作。它的界面功能已經足夠完成用戶的核心目標，Medium只需要騰出空間，讓奇跡自然發生。

雖然界面極其簡介，但通過設置懸停和隱藏，Medium給用戶提供了所有必要的選擇（上傳圖片/視頻，插入內容等）。不像傳統的博客平臺體驗給人感覺更多的是「內容管理模式」，Medium把寫作功能和上傳功能創造性地結合在一起。

（極簡的力量）

如此簡潔如白紙般的界面，即使是再小白的門外漢，寫起博客來也會覺得自己如同大文豪海明威。

網站也提供了其他很好的體驗。比如每篇文章都會有一個閱讀時間提示，你就會知道你閱讀這篇文章大概會花多長時間。而在最基礎的編輯頁面，你甚至可以直接從百度圖片里把搜索的圖片復制粘貼上去，而不需要額外下載以及重新上傳（這對那些長期寫博客的博主來說真是一次解放?。?。

上述這些精巧細微的設計看似對于一個博客平臺來說并非缺一不可，但正是它們出乎意料的有用，才提升了設計的檔次。這些特質不只博用戶一笑，也使他們更好地完成目標。如果你想創造一個完美的「愉悅設計」，就一定要在交互設計中加點「小心思」進去。

3. Carbonmade

當你把實打實的用戶體驗和有趣的顏色以及卡通結合起來，會發生什么？你會得到Carbonmade，一個讓建站小白輕松無痛苦地制作網絡作品集的網站。

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

當你潛入更深一些，你會發現Carbonmade能夠用Medium式的流暢體驗來滿足一切用戶自己建站所需要的功能。創建你的方案，拖拉放下你想要展現的東西，在左手邊的導航欄輸入文字，想要的界面立馬呈現。

你想更新你的簡介？只需要在旁邊的導航欄輸入文字，右邊的文本框便可以即時瀏覽效果，真是立等可??！

即使網站免費的方案已經可以幫助用戶在30分鐘內建立一個比較完備的作品集，現在更多地高級用戶也會為了更個性化的服務更新升級至付費方案。

正如Rowe所說，「不像功能的功能」讓界面更加討人歡心。這會讓你感覺自己并不是通過工具，而是通過自己的雙手在制作作品集。學習曲線實際上已經不復存在了，因為從用戶們從第一下單擊開始，他們就立馬獲得滿滿的成就感。

4. MailChimp

最后是MailChimp網站，它完美地平衡了實用性和視覺效果。MailChimp是一個通過電子郵件訂閱 RSS 的在線工具，聽起來就很「性冷淡」。這應該可以解釋為什么公司喜歡創造一個更加個性化的面孔來推銷自己。如此一來，MailChimp就把一個枯燥無聊的任務轉變成一次很好玩的體驗。

賞心悅目的設計是被公司廣泛看好的，因為它是市場中決定公司核心競爭力的要素。

不混亂的界面、直截了當的選擇和多選的對話形式，把復雜的操作歸納為一個簡單且人性化的體驗。MailChimp在你成功發送一組郵件之后，還設計了一個好玩的擊掌屏顯。這是一個令人印象深刻的體驗，一些用戶甚至一邊擊掌一邊哈哈大笑。

（Jill Bernard通過Twitter與猴子擊掌）

除了萌萌的猴子之外，網站其余部分也非常生動友好。無襯線字體創造了隨意的氛圍，文本的基調也簡單輕巧（絕非偶然）。

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

幽默和動畫都是只是表層的好看。但是當我們進入更深層次，我們會看到對話反饋和簡單的任務程序都有助于MailChimp網站與用戶于無形中建立聯系。產品指引、娛樂和幫助用戶。而且，即使是新手也會感覺像個內行。那確實是個難忘的經歷。

總結

好看的設計可以不同程度地給網站錦上添花。在不失實用性的前提下，融入能愉悅用戶的元素，你將會創造出一個既愉悅又實用的網站。

賞心悅目的終極目標，是當與用戶創造無形的情感連接并給予用戶力量。這不是一項輕松的任務，但它確實能讓你的產品脫穎而出。永遠不要忘記：「人們不是要為更好的產品而買單，他們是為變成更好的自己而買單」。

原文作者?|?Jerry Cao、Kamil Zieba 和Matt Ellis

翻譯 | 春雷

校對 | 李蔚娜

文章推薦 | 王師境

微信公眾號 | 特贊Tezign

本文由 @春雷 翻譯發布于人人都是產品經理?，未經許可，禁止轉載。