2015-1-28 藍藍設計的小編
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Web端的用戶體驗（UX）是指人們在使用網站時所獲得的抽象感覺。用戶界面（UI）則是指人們的交互對象，是用戶體驗的一個組成部分。
在設計網站時，應該盡量保證UX正面積極，讓用戶享受你的網站，這是問題的關鍵。但是，就像一家公司不能“想賺錢就賺錢”一樣，網站的UX也不是說改進就能改進的。要獲得優秀的UX，就要采用一定的戰略，也就是通過UI對其進行提升（或弱化）。
來源：UX is not UI
對于網站來說，公司設計團隊完善UI的目的通常是為了提高UX。菜單項、按鈕、文字、圖像、視頻以及其各自在頁面上的位置構成了界面，所有這些要素都應當仔細規劃。而這些就是UX的組成元素，它們的使用方式直接影響著用戶的感覺。
我們首先通過幾個示例來概覽一下UI，說明有哪些策略可以幫助你了解為什么優秀的UX取決于UI的優劣，然后再詳細講解一下為什么塑造UI要比塑造UX容易（雖容易，但不一定就能做對）。
在web端，比方說設計師想添加拖拽文件作為整理內容的方式。這就屬于UI的范疇。又比方說用戶覺得這個網站沒有另一家競爭對手的網站做得好，因為在另一家網站上用戶能夠輕松簡單地聽幾個小時的音樂。這就屬于UX的范疇。
如Web端UI最佳實踐2014中所述，Web端UI是指構成網頁的各個要素的設計、呈現和執行。誠然，上述囊括了設計師能夠放到網站上的幾乎所有內容，因此必然變幻多樣，但幸運的是，我們可以借用Usability gov（一家領先的UX最佳實踐與指南資源網站，其將上述內容以方便好用的方式進行了歸納分類）：
例如：OS X Yosemite 力求打造優秀UI。盡管Yosemite是一款操作系統（而不是網站），但在UI背后的原理同樣適用于web環境。其在可點擊按鈕（輸入）上所實現的視覺效果讓操作系統的使用更加令人愉悅，其充滿活力的側邊欄（導航）能夠讓用戶看到窗口后方的內容，明快的通知中心（信息）能夠在不影響桌面空間的情況下提供用戶所需信息。
最重要的是，正如Apple在其UI指南中所述，這些元素有助于描繪“自定義功能及獨特用戶體驗”這一更為寬廣的圖景。Yosemite UI的終極目標是讓呈現出來的操作系統達到能讓用戶自由定制，而又不會太過復雜讓用戶不知所措的狀態。
UI和UX是兩個不同但又彼此相連的概念。
如Web端UI設計模式2014中所述，Google Play充分運用了UI拖放技巧（其稱為“模式”）。在其網站上，用戶可以將歌曲拖放到播放列表中，然后通過拖放調整播放順序。觀其效果，用戶只要告訴應用自己喜歡的歌曲有哪些，然后就可以盡情享受音樂，不再進行過多操作，這就大大改善了整體UX。這樣一來，其UI的選擇（拖放）實現了便捷和個性化，從而改善了UX。
下面我們來看一個相對不那么直接的示例。比方說，很多用戶因為不喜歡先登錄才能使用某些功能而徹底拋棄了你的網站。那么這就是個顯然的UX問題，因為你的體驗效果是促成用戶離開。不過你也許能夠從UI中尋找問題的根源。有可能你現在的登陸過程需要用戶填寫過多的表單內容。如果是這樣，你可以采取即時使用（“免注冊”）UI模式作為解決方案。這樣一來用戶就能在不注冊的情況下直接使用網站大部分內容。在自由瀏覽了一定時間后，用戶可能就會決定注冊賬戶，特別是如果網站有僅限會員使用的有門檻功能。
AirBnB就采取了這種方法吸引新客戶。非會員用戶可以和會員一樣自由瀏覽網站上的所有帖子，這樣他們就能看到AirBnB上有很多有意思的內容。但是，在他們需要預留房間時，就需要先注冊才能預訂。
如果說UI部分造就了UX，那么造就UI的就是草圖繪制、線框圖繪制和設定模型等設計流程。線框圖和模型就像是設計師在開始正式網站設計之前所使用的輪廓或藍圖。它們既可以是在餐巾紙上隨手畫的草圖，也可以是使用UXPin或Balsamiq等工具打造的數字線框圖。這一階段堪稱是最為重要的一個階段，在這一階段，設計師需要從理論角度思考什么樣的UI能夠創造出自己所渴望的UX。就像蓋房一樣，要先有明確詳細的藍圖才能開工動土。
有關UI線框圖繪制的詳細介紹，請閱讀線框圖繪制指南。
Rivet Games的首席UI/UX設計師Shawn Borsky時常提醒我們UX不僅僅是UI的最終結果。他表示，UX是“品牌的核心”，而品牌自身只是“一個人對一家公司或機構長期感受的累積?！边@就說明，良好的UX不僅僅是UI的追求目標，更是整個公司機構全部互動活動的目標。
網站上呈現出來的每條細節都能為用戶體驗作出貢獻，同時也參與形成了用戶使用網站時所形成的記憶和印象——但是，網站的設計師無法做到直接控制用戶的體驗。正如下圖所示，UI是實實在在看得見的東西（就好像勺子），因此很容易讓人局限住自己的視野，忘記如何打造整體的體驗（就像享用早餐）。
來源：UX vs. UI
與此類似，當你在準備一頓大餐時，肯定想花盡心思，對吧？你一定會親手挑選最棒的食材、找出最好的烹飪方法并仔細遵循，你甚至還會在飯桌上放上漂亮的裝飾營造美妙的氣氛。而構建網站也是這個道理。你需要合理對所有內容進行規劃，給訪客留下美好的印象。不過，盡管你可以花上幾個小時甚至幾天的時間計劃準備這頓大餐，但這只是所謂完美用餐體驗終極目標的一個組成部分。這也就是為什么我們說要先牢記UX，花在打造UI細節上的時間才有意義。
如果你在UI上耗盡心思，其成效一定會體現到UX當中。如果UI簡簡單單、隨隨便便，或者你忽略了其中某個重要部分，那么很可能最后遭殃的是整體UX。在忽略這方面有個很好的例子，那就是iPhone的Shift鍵（雖然這篇文章是針對網站的，但因UI毀掉UX的情況在移動設備上也不可避免）：
來源：Quora
這兩幅圖片中，哪個Shift鍵是激活的？有的背景按鍵一直是灰色顯示，有的一直是白色，但Shift依是否激活有灰色和白色兩種狀態。盡管說這不影響功能的使用，但其UI設計很差勁。而其結果呢？用戶（比如身處UXPin的我們）往往不得不刪掉輸錯的內容重新輸入，這種情況非常惱人，從而也就無從談起優秀的UX了。
（真的，你能看出來兩幅圖片中哪個Shift是開啟的嗎？編者已經用iPhone有六年時間了，現在還是經常搞混。）
如Web UI最佳實踐中的一個反例所示，目前最臭的UI設計之一同時也比較常見，甚至LivingSocial等知名網站也未能逃脫。
這是用戶首次登陸網站時顯示的窗口。其問題在于，你完全沒法退出。這也就意味著當有人隨意或因為好奇瀏覽到這里時，就不得不輸入自己的Email，而輸入完成后就會毫不猶豫的離開這個網站。也有可能這個UI上的缺陷是有意為之，以便迫使用戶輸入Email，但是，把自己網站的UX做的像個攔路的土匪一樣真的好嗎？
我們要注意到，這個UI功能正常并且沒有什么不妥之處——配色妥當、按鈕也很利索——但問題是UX糟糕。這個例子充分說明了就算優秀的UI一樣可能帶來差勁的UX。UXPin的CEO Marcin Treder認為，差勁的UX只有在其目的明確特殊的前提下才能勉強讓人接受?！坝械臅r候我們會看到又長又繁復的web表單，而且所有標簽全部左對齊，閱讀體驗非常之差，”Treder說道。“但另一方面，其能夠防止人們機械性地快速填寫表單，從而提高資料的質量。”
我們在這里談及不佳UI設計的原因，是因為其相比規劃合理的UI設計更加讓人印象深刻（也更有意思）。因為，一個UI越是優秀，你就越不會注意到它。就好像好電影能夠讓你忘記身處戲院一樣，一個上佳的UI能夠讓用戶全身心投入體驗而忽視UI自身。也就是說，如果UI引起了人的注意，那就達不到最佳UX的水平。
理論說得多了，下面我們來看看如何通過選擇UI直接影響UX。
下面這些例子只是對UI選取影響UX的一個寬泛概覽。在Web UI設計模式2014中，另有63個類似技巧的問題/解決方案詳解待你閱讀。
盡管說UI塑造了UX，但你還是要先決定自己要達到何種UX，然后再通過恰當的UI來實現。同樣，如果你的UX有問題，最后先找出并深入分析問題再思考如何通過修改UI來解決問題。
理解UX和UI之間的區別只是個開始——構建優秀網站的關鍵在于熟知這兩個概念之間的種種關系糾葛。盡管很多web端的設計方面各自區別而獨立，但UX和UI卻是緊密相聯。
如上圖所示，打造有效的用戶體驗需要的遠遠不止漂亮的視覺。視覺和聲音設計僅僅是UX所含的UI要素中的一小部分。盡管你無法控制網站的UX，但UI是你可一手掌握的——所以，一定要有一個整體的UX目標，并依此設計UI。
在Web UI最佳實踐中介紹了AirBnB、Wufoo、Linkedin等頂尖公司的案例，并以案例為基礎提供了實用的建議，靜待你的閱覽。
掃一掃，案例分享帶回家（藍藍設計微信公眾平臺）