用戶界面 (UI) 設(shè)計(jì)和用戶體驗(yàn) (UX) 設(shè)計(jì)是同一個(gè)網(wǎng)頁(yè)設(shè)計(jì)“硬幣”的兩個(gè)方面。兩者都對(duì)在消費(fèi)者眼中定義公司的品牌、產(chǎn)品或服務(wù)具有影響力，并且對(duì)轉(zhuǎn)化率同樣具有影響力。

了解UX和UI設(shè)計(jì)之間的區(qū)別是網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵。了解哪個(gè)更重要，哪個(gè)可以提高您的轉(zhuǎn)化率，以及您應(yīng)該將資源和時(shí)間集中在哪個(gè)上，這不是非黑即白。

用戶界面不是定義了用戶體驗(yàn)嗎？用戶體驗(yàn)不是比用戶界面更復(fù)雜嗎？你能有一個(gè)沒(méi)有另一個(gè)嗎？

我們已經(jīng)準(zhǔn)備好解決問(wèn)題（或至少重新點(diǎn)燃辯論）。UX與UI設(shè)計(jì)：有什么區(qū)別，哪個(gè)更重要？

UX和UI網(wǎng)頁(yè)設(shè)計(jì)的區(qū)別

網(wǎng)頁(yè)設(shè)計(jì)涵蓋了廣泛的特性和功能，它們都聚集在一起（希望）為用戶創(chuàng)造一種引人入勝的體驗(yàn)。作為其各部分的總和，一個(gè)好的網(wǎng)站導(dǎo)航流暢，看起來(lái)很吸引人，并仔細(xì)引導(dǎo)訪問(wèn)者實(shí)現(xiàn)預(yù)期目標(biāo)：例如點(diǎn)擊 CTA，或閱讀常見(jiàn)問(wèn)題解答以找到答案。

有些人會(huì)爭(zhēng)辯說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)難題中最重要的兩個(gè)部分是用戶體驗(yàn)設(shè)計(jì)和用戶界面設(shè)計(jì)。這些概念聽(tīng)起來(lái)很相似，而且它們確實(shí)在很大程度上相互依賴，但它們是數(shù)字設(shè)計(jì)的兩個(gè)不同部分。

• UX網(wǎng)頁(yè)設(shè)計(jì)： 一種設(shè)計(jì)方法，優(yōu)先考慮為用戶在瀏覽交互、網(wǎng)頁(yè)、應(yīng)用程序和網(wǎng)站時(shí)創(chuàng)造無(wú)縫體驗(yàn)。
• UI網(wǎng)頁(yè)設(shè)計(jì)：指用戶看到的數(shù)字空間的實(shí)際設(shè)計(jì)界面；按鈕、微交互和滾動(dòng)元素都是UI網(wǎng)頁(yè)設(shè)計(jì)的例子。

UX網(wǎng)頁(yè)設(shè)計(jì)和UI網(wǎng)頁(yè)設(shè)計(jì)之間的主要區(qū)別： UX著眼于整個(gè)用戶體驗(yàn)以及它如何影響網(wǎng)站的整體設(shè)計(jì)，而UI網(wǎng)頁(yè)設(shè)計(jì)側(cè)重于界面的特定網(wǎng)頁(yè)設(shè)計(jì)元素以及它們?nèi)绾我龑?dǎo)用戶頁(yè)。

用戶體驗(yàn)網(wǎng)頁(yè)設(shè)計(jì)解釋

用戶體驗(yàn)網(wǎng)頁(yè)設(shè)計(jì)（以及一般的UX設(shè)計(jì)）包括支持您提供的體驗(yàn)的所有幕后研究和可用性測(cè)試。

尼爾森諾曼集團(tuán)的認(rèn)知科學(xué)家兼聯(lián)合創(chuàng)始人唐諾曼早在 1990 年就創(chuàng)造了“用戶體驗(yàn)”一詞。

良好的UX設(shè)計(jì)融合了心理學(xué)、市場(chǎng)研究和技術(shù)元素，但也會(huì)持續(xù)監(jiān)控實(shí)際用戶行為并根據(jù)使用模式做出改變，以試圖影響用戶采取行動(dòng)。UX設(shè)計(jì)師身兼數(shù)職，成功指標(biāo)可能比一成不變的銷售數(shù)據(jù)更難確定。產(chǎn)品、服務(wù)和網(wǎng)站通過(guò)提供無(wú)縫、令人滿意的用戶體驗(yàn)而取得成功。

有助于創(chuàng)造令人滿意的用戶體驗(yàn)的常見(jiàn)原則包括：

• 清晰和簡(jiǎn)單
• 閃存功能
• 可掃描性（網(wǎng)站被掃描，而不是閱讀）
• 了解你的聽(tīng)眾
• 視覺(jué)層次

用戶在評(píng)估您網(wǎng)站的UX設(shè)計(jì)時(shí)會(huì)下意識(shí)地提出的問(wèn)題：

• 有用嗎？
• 可以用嗎？
• 能找到嗎？
• 它是可取的嗎？
• 可以訪問(wèn)嗎？
• 可信嗎？

UX設(shè)計(jì)師如何培養(yǎng)令人滿意的用戶體驗(yàn)？大多數(shù)人都認(rèn)為設(shè)計(jì)需要以人/用戶為中心。簡(jiǎn)而言之，UX使技術(shù)人性化。

UX設(shè)計(jì)師做什么？

一位優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)師早在您開(kāi)始向網(wǎng)站添加功能和內(nèi)容之前就開(kāi)始工作。

用戶體驗(yàn)設(shè)計(jì)師將：

• 進(jìn)行用戶和用戶組研究
• 創(chuàng)建用戶角色
• 確定信息框架
• 設(shè)計(jì)流程和線框
• 創(chuàng)建原型和模型
• 進(jìn)行用戶測(cè)試
• 和更多

用戶體驗(yàn)設(shè)計(jì)考慮將某人從想法轉(zhuǎn)化為轉(zhuǎn)化的情感、線索和模式。用戶體驗(yàn)設(shè)計(jì)師將引導(dǎo)消費(fèi)者從“我需要一雙新鞋”到尋找當(dāng)?shù)匦墓?yīng)商、找到您的網(wǎng)站、導(dǎo)航到一雙新鞋并進(jìn)行購(gòu)買(mǎi)。

UI網(wǎng)頁(yè)設(shè)計(jì)解釋

用戶界面設(shè)計(jì)側(cè)重于觸覺(jué)元素——菜單、圖標(biāo)、圖像等——有助于創(chuàng)造令人滿意的用戶體驗(yàn)。UI 設(shè)計(jì)主要關(guān)注網(wǎng)站、網(wǎng)頁(yè)或產(chǎn)品的交互性。

打個(gè)比方：用戶界面是馬鞍、馬鐙和韁繩，用戶體驗(yàn)是你騎馬的感覺(jué)。

換句話說(shuō)：UI 網(wǎng)頁(yè)設(shè)計(jì)是圍繞著用戶體驗(yàn)存在的框架。用戶必須通過(guò)瀏覽您的網(wǎng)站、單擊按鈕和閱讀內(nèi)容進(jìn)入該框架并與之交互，以獲得用戶體驗(yàn)。

UI網(wǎng)頁(yè)設(shè)計(jì)師做什么？

優(yōu)秀的UI網(wǎng)頁(yè)設(shè)計(jì)師會(huì)結(jié)合美學(xué)、風(fēng)格元素，試圖根據(jù)從內(nèi)容層次結(jié)構(gòu)到顏色選擇和元素大小的所有內(nèi)容以某種方式影響用戶。UI 設(shè)計(jì)師更專注于創(chuàng)建無(wú)縫的設(shè)計(jì)界面，而不是培養(yǎng)體驗(yàn)。如果它有效，并且運(yùn)行良好，那就是好的UI設(shè)計(jì)。

常見(jiàn)的UI設(shè)計(jì)元素可以分為三個(gè)不同的類別：

1. 輸入元素
2. 輸出元素
3. 輔助元素

輸入元素負(fù)責(zé)管理各種用戶輸入。它們可以是驗(yàn)證過(guò)程的一部分，可以幫助用戶過(guò)濾產(chǎn)品頁(yè)面，并且可以用于導(dǎo)航目的。

典型的UI設(shè)計(jì)輸入元素包括：

• 下拉菜單
• 紐扣
• 切換
• 文本或密碼字段
• 復(fù)選框
• 日期選擇
• 確認(rèn)對(duì)話
• 和更多

輸出元素響應(yīng)并顯示來(lái)自各種用戶輸入的結(jié)果。常見(jiàn)的輸出元素包括彈出窗口、警報(bào)、警告和錯(cuò)誤消息等內(nèi)容。輸出元素不獨(dú)立運(yùn)行。它們需要某種類型的用戶輸入。

輔助元素旨在幫助和通知用戶瀏覽您的網(wǎng)站。通常，不是輸入或輸出元素的UI設(shè)計(jì)元素適合輔助元素類別。

一些最廣泛使用的輔助元素包括：

• 面包屑
• 通知
• 滑塊
• 圖標(biāo)
• 進(jìn)度條
• 提示
• 導(dǎo)航
• 組和容器

良好的UI設(shè)計(jì)是將用戶體驗(yàn)結(jié)合在一起的粘合劑。今天，UI 設(shè)計(jì)師負(fù)責(zé)讓網(wǎng)站工作并看起來(lái)很好，UI 設(shè)計(jì)比以往任何時(shí)候都更加重要。

設(shè)計(jì)曾經(jīng)是你為了品味而灑上的調(diào)味料，現(xiàn)在這是您在食譜開(kāi)始時(shí)需要的面粉。

UX和UI設(shè)計(jì)如何影響轉(zhuǎn)化

UX設(shè)計(jì)或UI設(shè)計(jì)哪個(gè)更好，沒(méi)有明確的贏家。如前所述，它們是同一個(gè)網(wǎng)頁(yè)設(shè)計(jì)硬幣的兩個(gè)方面，一個(gè)沒(méi)有另一個(gè)就行不通。

如果沒(méi)有良好的UI設(shè)計(jì)，用戶體驗(yàn)是平淡無(wú)奇的。同樣，如果不是為了創(chuàng)造某種用戶體驗(yàn)，UI 設(shè)計(jì)也沒(méi)有任何意義。糟糕的UI設(shè)計(jì)會(huì)造成糟糕的用戶體驗(yàn)。良好的UI設(shè)計(jì)可以創(chuàng)造良好的用戶體驗(yàn)。就這么簡(jiǎn)單。

也就是說(shuō)，哪個(gè)對(duì)轉(zhuǎn)化更重要？當(dāng)然，這取決于您嘗試實(shí)現(xiàn)的轉(zhuǎn)化類型以及這些轉(zhuǎn)化是否與UX或UI設(shè)計(jì)選擇直接相關(guān)。

例如，您網(wǎng)站的用戶界面在有人訪問(wèn)之前不會(huì)真正發(fā)揮作用。如果沒(méi)有人訪問(wèn)您的網(wǎng)站，您所有的辛勤工作設(shè)計(jì)元素和 A/B 測(cè)試顏色選擇都沒(méi)有多大意義。

這就是用戶體驗(yàn)設(shè)計(jì)（在營(yíng)銷和廣告的幫助下）發(fā)揮作用的地方。通常，用戶體驗(yàn)在有人訪問(wèn)您的網(wǎng)站之前就開(kāi)始了，主動(dòng)的UX設(shè)計(jì)策略會(huì)盡早開(kāi)始打造這種體驗(yàn)以推動(dòng)網(wǎng)站流量。

快樂(lè)的用戶等于更好的轉(zhuǎn)化率

通過(guò)出色的UX和UI設(shè)計(jì)可以最好地吸引訪客和保護(hù)客戶。用戶體驗(yàn)越無(wú)縫，用戶界面越吸引人和有效，您的轉(zhuǎn)化率就越高。

看起來(lái)很棒但很難使用的東西是優(yōu)秀UI和糟糕 UX的典范。雖然看起來(lái)很糟糕的非常有用的東西是優(yōu)秀用戶體驗(yàn)和糟糕用戶界面的典范。

轉(zhuǎn)化率取決于多種因素，但UX設(shè)計(jì)和UI設(shè)計(jì)必須協(xié)同工作才能提高轉(zhuǎn)化率。許多常見(jiàn)的 UX/UI 設(shè)計(jì)準(zhǔn)則已被證明可以提高轉(zhuǎn)化率：

• 收集和分析數(shù)據(jù)
• 優(yōu)化內(nèi)容以縮短加載時(shí)間
• 移動(dòng)設(shè)計(jì)
• 了解客戶旅程
• 簡(jiǎn)化和精簡(jiǎn)
• 可用性測(cè)試

UX和UI設(shè)計(jì)同樣重要

兩者缺一不可，這就是為什么UX設(shè)計(jì)和UI設(shè)計(jì)在我們眼中同等重要。兩者都努力改善整體用戶體驗(yàn)，并且兩者都做得好可以提高您的轉(zhuǎn)化率。您的目標(biāo)應(yīng)該是創(chuàng)建一個(gè)功能無(wú)縫且有效的用戶至上的網(wǎng)站。轉(zhuǎn)化將隨之而來(lái)。