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

網頁設計與平面設計究竟有啥區別，我們主觀的為頁面添加元素的時候是否有章可循，博主以前曾是一名視覺設計菜鳥，以自己的切身體會談談在Web頁面設計中的一些體會。

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

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

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

一、 視覺層級為什么重要

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

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

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

Flickr為用戶準備了很多有意思的登錄歡迎語，這其實是一個容易被忽略的細節，但Flickr的整體設計風格與產品氣質也正是由許許多多這樣的細節構成的。也許，只有當這些細節從產品中消失的時候，我們才會發現并開始懷念它們。

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

一點小理論

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

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

1. 你創造出了獨特并且優秀的風格理念，令用戶產生了積極響應。
2. 你持續的使用該理念打造出一整套具有人格層面的設計方案。

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

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

Tapmates

Caava Design

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

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

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

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

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

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

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

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

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

1.設計觀念

從傳統設備轉向移動領域，設計師們首先要做的是調整思維模式和設計觀念。

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

不要用“多多益善”的觀念打造移動應用

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

不要害怕犯錯

對于移動應用這樣的產品，設計過程中必然會遇到很多用戶體驗方面的問題與挑戰，尤其是對于新手來說更是如此。

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

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

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

應用的主界面

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

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

以任務為中心的用戶體驗

移動應用版本的產品應該圍繞著一系列互不相關的帳單任務進行優化，包括時間追蹤、為收據拍照存檔、開票等等，這些是移動應用所處的使用場景當中最常見的任務。

而其他方面的復雜任務，包括批量編輯、權限管理、定制化等，則留給傳統的Web端應用來承擔，以此來保證移動版本在功能上的簡約與集中。

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

這種以典型任務為中心的設計思路在意圖上是好的，但接下來我們發現了一些問題。