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