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