在日常工作中，我們經(jīng)常會遇到一些設(shè)計的很”漂亮”的圖片不被用戶認可，點擊率很低，這時候我們會暗地里抱怨，可卻沒明白問題究竟出在哪？

網(wǎng)頁設(shè)計與平面設(shè)計究竟有啥區(qū)別，我們主觀的為頁面添加元素的時候是否有章可循，博主以前曾是一名視覺設(shè)計菜鳥，以自己的切身體會談?wù)勗赪eb頁面設(shè)計中的一些體會。

下面我們先看一個專題的banner：

第一眼看上去，畫面感好像還行，但細看后會發(fā)現(xiàn)整個畫面沒有一個視覺中心，這張圖片究竟想表達什么也沒有說清楚，看看上面的元素：女人，模特架，燈光，展廳，衣服。好像表達了很多，其實除了設(shè)計師本人知道這是衣服與配件專題的banner，其他人都一頭霧水。

隨著互聯(lián)網(wǎng)信息爆炸式增長，用戶瀏覽單個網(wǎng)頁時，并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看，為什么？

一、 視覺層級為什么重要

左側(cè)是設(shè)計師期望用戶的瀏覽方式，右側(cè)為用戶實際的瀏覽方式—摘自《Don’t make me think》

用戶來到一個網(wǎng)站有他自己特定的目標(biāo)，如閱讀新聞、購物、查看新消息，然而信息量太大，逐一查看需要大量時間，這就要求網(wǎng)站能抓住主流用戶特征，將重點推送給他，用戶找到自己的目標(biāo)或感興趣的點，才有可能繼續(xù)瀏覽或產(chǎn)生下一步動作，否則就會離開。

有的時候，我常常無法進入狀態(tài)，這個時候我會選擇看書。一本好書有一種力量，一種代入感的力量，會讓你隨著做著的邏輯一路陷入進去，慢慢的將內(nèi)心的浮躁都洗去，讓你沉靜下來，然后整個人也跟著沉了下來。

Flickr為用戶準(zhǔn)備了很多有意思的登錄歡迎語，這其實是一個容易被忽略的細節(jié)，但Flickr的整體設(shè)計風(fēng)格與產(chǎn)品氣質(zhì)也正是由許許多多這樣的細節(jié)構(gòu)成的。也許，只有當(dāng)這些細節(jié)從產(chǎn)品中消失的時候，我們才會發(fā)現(xiàn)并開始懷念它們。

我(英文原文作者)會特別在意這些細節(jié)，因為它們可以觸發(fā)用戶的情感響應(yīng)。如果運用方式得當(dāng)，這些細節(jié)當(dāng)中的小魔鬼可以幫助我們打造出更具人格的產(chǎn)品，并使用戶在與之進行互動的過程中產(chǎn)生積極的情感響應(yīng)；而這種積極的態(tài)度會有效的促使用戶主動傳播和擁護你的產(chǎn)品。這種在人格層面與用戶建立關(guān)聯(lián)的設(shè)計思路也被稱作“情感化設(shè)計”。

一點小理論

“情感化設(shè)計(Emotional Design)”一詞由Donald Norman在其同名著作 當(dāng)中提出。而在Designing for Emotion 一書中，作者Aarron Walter將情感化設(shè)計與馬斯洛的人類需求層次理論聯(lián)系了起來。正如人類的生理、安全、愛與歸屬、自尊和自我實現(xiàn)這五個層次的需求，產(chǎn)品特質(zhì)也可以被劃分為功能性、可依賴性、可用性和愉悅性這四個從低到高的層面，而情感化設(shè)計則處于其中最上層的“愉悅性”層面當(dāng)中。

一個有效的情感化設(shè)計策略通常包括兩個方面：

1. 你創(chuàng)造出了獨特并且優(yōu)秀的風(fēng)格理念，令用戶產(chǎn)生了積極響應(yīng)。
2. 你持續(xù)的使用該理念打造出一整套具有人格層面的設(shè)計方案。

接下來，我們將一起了解一下情感化設(shè)計的組成要素及相關(guān)策略，看一看有哪些產(chǎn)品在這些方面做的比較有代表性；另外，我們還會通過幾個案例分析來感受一下從整體角度持續(xù)使用情感化設(shè)計理念所帶給產(chǎn)品的“人格魅力”。

在決定網(wǎng)站的布局之前，有很多重要的事情需要考慮。顏色、風(fēng)格和可用性是網(wǎng)站布局的核心因素，是網(wǎng)站是否成功的關(guān)鍵。多年以來，我們看到很多內(nèi)容充實，色彩豐富的網(wǎng)站作品，但最近幾年極簡主義風(fēng)格（一種設(shè)計風(fēng)格，感官上簡約整潔，品味和思想上更為優(yōu)雅）的設(shè)計越來越流行，人們認識到簡潔干凈的網(wǎng)站布局能夠更加有效的突出網(wǎng)站的主題內(nèi)容。

Tapmates

Caava Design

我個人對這方面的話題是蠻關(guān)注的，偶爾在微博 上弱弱的念叨兩句，也會有不少朋友來發(fā)表各自的看法，確實是大家都蠻關(guān)心的設(shè)計問題。另外最近看到不少文章觀點也都是圍繞這些展開的，其中有些比較公允務(wù)實，有些則比較偏頗；所謂偏頗，也就是片面表達某種風(fēng)格一定比某種風(fēng)格更好，以及好在哪里。說真的，都有一定的道理，都能看出發(fā)表論調(diào)的設(shè)計師的思考和激情。

有人說了你怎么這么沒節(jié)操呢，你到底覺得哪種好呢？我要說的是叭，在我看來這個事情里的的確確不應(yīng)該存在哪個強于哪個的爭議，因為它根本就不是個非黑即白非美即丑涇渭分明的問題；脫離了實際產(chǎn)品的上下文環(huán)境，脫離了產(chǎn)品功能與目標(biāo)用戶群類型之間的關(guān)聯(lián)，所謂好與不好的命題壓根就不成立。

說的具體些，遠的不講，單說Beforweb 這邊的視覺風(fēng)格，除了每篇文章的圖標(biāo)以外，可以說是徹徹底底的扁平化了(當(dāng)然，細心的朋友可以在側(cè)邊欄標(biāo)題背景底部發(fā)現(xiàn)類似陰影效果的1像素邊框，這個不算數(shù)...)，但如果有人說我是扁平風(fēng)格的衛(wèi)道者的話，我會很不開心，因為我只是在自己覺得合適的地方使用這種風(fēng)格而已。我喜歡iOS里很多擬物擬真風(fēng)格的界面，最典型的包括語音備忘錄、iBooks、iPad里的日歷等等，它們的界面讓我覺得親切自然，讓我可以在冰冷的電子設(shè)備當(dāng)中找到現(xiàn)實生活的真實感，就這么簡單。

下面這些截圖來自我平常自娛自樂時會用到的一些音樂方面的iOS或OS X應(yīng)用。它們的功能的確非常棒，我著實在這些東西上花掉不少錢，但如果它們的界面沒有采用如此逼真的擬物化設(shè)計，如果他們只是干巴巴的功能和數(shù)據(jù)陳列或是Metro風(fēng)，我是絕不會在它們身上花半毛錢的。

什么是風(fēng)格指南？簡單的說，就是一份告訴你如何講故事的文檔。它確立了一些標(biāo)準(zhǔn)，例如怎樣撰寫文案、怎樣排版、怎樣打造視覺元素和交互方式等等。風(fēng)格指南源自于印刷領(lǐng)域，例如報刊(看看衛(wèi)報的風(fēng)格指南 )；在Web領(lǐng)域，它同樣體現(xiàn)出了巨大的價值。

無論是傳統(tǒng)印刷，還是互聯(lián)網(wǎng)，最關(guān)鍵的都是“內(nèi)容”。風(fēng)格指南的最終目標(biāo)就是讓內(nèi)容以清晰并且一致的視覺風(fēng)格呈現(xiàn)出來。BBC的全球體驗語言 (Global Experience Language,GEL)就是網(wǎng)站風(fēng)格指南的絕佳范例。不妨通過頁面右側(cè)的“Download GEL Web Styleguide”下載一份PDF文檔來稍作了解先。

移動設(shè)備與傳統(tǒng)桌面設(shè)備雖然都被成為“計算設(shè)備”，但它們之間的差異是顯而易見的：移動設(shè)備的屏幕要小很多，無線網(wǎng)絡(luò)鏈接方面會有不穩(wěn)定，電池續(xù)航能力較弱，等等。這份“弱點”清單可以列的很長，但如果你因此認為移動設(shè)備就是降級版的計算機，那同樣是錯誤的看法。

實際上，從其他一些角度來觀察，移動設(shè)備又是比桌面設(shè)備更加強大的。智能手機和平板電腦都是更加個人化的設(shè)備，它們會一直陪伴在你身邊，讓你隨時隨地都可以接入互聯(lián)網(wǎng)獲取所需的信息；它們身上還有傳統(tǒng)設(shè)備所不具備的很酷的功能，包括GPS、數(shù)位羅盤、加速計等等。

所有這些差異都使得移動設(shè)備當(dāng)中的應(yīng)用程序在界面設(shè)計方面存在很多獨到之處。我(英文原文作者)基于在自己的workshop中的工作經(jīng)驗，總結(jié)出了移動應(yīng)用界面設(shè)計的十條原則及小提示，在這里與大家分享，希望能夠幫助那些還不是非常熟悉這個領(lǐng)域的設(shè)計師們建立起一套有實踐價值的設(shè)計思維框架。

1.設(shè)計觀念

從傳統(tǒng)設(shè)備轉(zhuǎn)向移動領(lǐng)域，設(shè)計師們首先要做的是調(diào)整思維模式和設(shè)計觀念。

• 專注 ：移動應(yīng)用的本質(zhì)目標(biāo)是幫助人們以最高的效率完成特定的任務(wù)。少即是多，你要砍掉的產(chǎn)品功能通常會比你想象的多很多。
• 獨特：從一開始就要理解你的應(yīng)用與同類產(chǎn)品相比具有哪些獨到之處，將其體現(xiàn)到產(chǎn)品的整體用戶體驗策略當(dāng)中，并在交互及視覺設(shè)計流程當(dāng)中著重突出這些賣點。
• 迷人 ：移動設(shè)備是相當(dāng)個人化的工具，人們會在長久的使用過程中逐漸將感情融入到軟硬件當(dāng)中；應(yīng)用程序同樣要與用戶在情感層面產(chǎn)生互動，通過各種友好的、有趣的、可信賴的設(shè)計與功能讓用戶覺得愛不釋手。
• 體貼 ：不要將注意力過多集中在“開發(fā)”本身上，不要將自己的心智模型以及產(chǎn)品的業(yè)務(wù)邏輯作為設(shè)計的準(zhǔn)繩。如果你確實希望自己的產(chǎn)品能夠被更多用戶所接受，那么必須學(xué)會站在他們的角度觀察問題、制定設(shè)計決策。

不要用“多多益善”的觀念打造移動應(yīng)用

今年，我們(英文原文作者及團隊)發(fā)布了FreshBooks 的第一款iPhone應(yīng)用。從前我們的產(chǎn)品一直是通過Web端應(yīng)用的方式提供服務(wù)的。這次，我們把iPhone應(yīng)用的設(shè)計開發(fā)過程看作一張空白的花布，盡力在其中實現(xiàn)一些新的功能概念和設(shè)計想法。在這個過程中，我們著實學(xué)到不少東西。

不要害怕犯錯

對于移動應(yīng)用這樣的產(chǎn)品，設(shè)計過程中必然會遇到很多用戶體驗方面的問題與挑戰(zhàn)，尤其是對于新手來說更是如此。

無論你的線框稿在邏輯上有多縝密，UI稿在視覺上有多漂亮，當(dāng)它們落實成為原型或最終產(chǎn)品時，總會有問題呈現(xiàn)出來。這并不完全是壞事；我們在設(shè)計FreshBooks的iPhone應(yīng)用時甚至將犯錯這件事也納入到了流程規(guī)劃當(dāng)中，這就意味著：

• 坦承沒有完美的設(shè)計，無論稿件和原型多么優(yōu)秀。
• 真正的成功或失敗都是由用戶的反饋來定義的。
• 對于在設(shè)計過程中看到的問題要迅速做出反應(yīng)，根據(jù)從實際用戶身上得來的驗證結(jié)果進行迭代。

接下來，我將向各位描述一下我們在項目中犯過的三個錯誤，以及我們是怎樣解決這些問題的。

應(yīng)用的主界面

在項目開始的時候，我們對FreshBooks的一些現(xiàn)有用戶進行了訪談，了解他們在生活和工作中是怎樣使用移動設(shè)備的，包括他們面對的實際問題，以及他們對移動應(yīng)用版本的FreshBooks的期望。

根據(jù)這些訪談，我們歸納出了一些基本的設(shè)計原則，例如下面這條：

以任務(wù)為中心的用戶體驗

移動應(yīng)用版本的產(chǎn)品應(yīng)該圍繞著一系列互不相關(guān)的帳單任務(wù)進行優(yōu)化，包括時間追蹤、為收據(jù)拍照存檔、開票等等，這些是移動應(yīng)用所處的使用場景當(dāng)中最常見的任務(wù)。

而其他方面的復(fù)雜任務(wù)，包括批量編輯、權(quán)限管理、定制化等，則留給傳統(tǒng)的Web端應(yīng)用來承擔(dān)，以此來保證移動版本在功能上的簡約與集中。

基于這條原則，我們設(shè)計了應(yīng)用的主界面。它由一系列最重要的任務(wù)組成，視覺上采用圖標(biāo)加文字標(biāo)題的形式，點擊進入相應(yīng)的任務(wù)流程。例如，用戶點擊了其中的“創(chuàng)建新發(fā)票”之后會進入發(fā)票列表界面，然后創(chuàng)建新發(fā)票的界面會自動滑入視圖。

這種以典型任務(wù)為中心的設(shè)計思路在意圖上是好的，但接下來我們發(fā)現(xiàn)了一些問題。