我們?cè)谥車氖澜缰锌吹搅嗽S多熟悉的設(shè)計(jì)模式。例如，大多數(shù)道路用實(shí)線或條紋線分隔車道。還有交通燈和道路標(biāo)志可以幫助您在道路上行駛。如果每個(gè)國(guó)家/地區(qū)使用不同的系統(tǒng)，司機(jī)將不得不為他們想要駕車經(jīng)過的每個(gè)國(guó)家/地區(qū)學(xué)習(xí)新的駕駛模式——但這不切實(shí)際！

UX 設(shè)計(jì)模式的工作原理類似。它們使用戶無需學(xué)習(xí)新系統(tǒng)即可熟悉瀏覽數(shù)字產(chǎn)品或網(wǎng)頁。

什么是用戶體驗(yàn)設(shè)計(jì)模式？

UX 設(shè)計(jì)模式是用于構(gòu)建用戶界面的常見構(gòu)建塊。設(shè)計(jì)師使用 UX 設(shè)計(jì)模式作為可重用組件來解決常見的可用性問題。

例如，我們經(jīng)?？吹降囊环N設(shè)計(jì)模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。

UX 設(shè)計(jì)模式如何改善用戶體驗(yàn)

設(shè)計(jì)模式為設(shè)計(jì)人員提供了構(gòu)建塊以更快地創(chuàng)建用戶界面，但它們也增強(qiáng)了用戶體驗(yàn)。

UX 設(shè)計(jì)模式通常遵循用戶熟悉的通用設(shè)計(jì)標(biāo)準(zhǔn)，從而減少學(xué)習(xí)和瀏覽新產(chǎn)品或網(wǎng)站所需的時(shí)間和認(rèn)知負(fù)擔(dān)。

在《我們?nèi)绾螞Q定》一書中，作者喬納·萊勒 (Jonah Lehrer) 寫道，識(shí)別熟悉的模式會(huì)釋放出多巴胺——一種與動(dòng)機(jī)、獎(jiǎng)勵(lì)、記憶和注意力有關(guān)的化學(xué)物質(zhì)。當(dāng)用戶體驗(yàn)?zāi)Ｊ桨搭A(yù)期工作時(shí)，多巴胺命中會(huì)增加。

使用有效的UX 設(shè)計(jì)心理學(xué)技術(shù)的設(shè)計(jì)師，例如熟悉的 UI 設(shè)計(jì)模式，可以增強(qiáng)用戶體驗(yàn)并使產(chǎn)品交互更加愉快。

UX 和 UI 模式之間的差異

大多數(shù)設(shè)計(jì)師交替使用UX 模式和UI 模式這兩個(gè)術(shù)語，因?yàn)閰^(qū)別很小，有很多重疊，并且可能會(huì)引起混淆！

UX 模式：用戶流和導(dǎo)航的可重用模式——在社交媒體平臺(tái)或網(wǎng)站上無限或連續(xù)滾動(dòng)。用戶認(rèn)識(shí)到他們可以向下滾動(dòng)以刷新頁面。

UI 模式：用于視覺和交互設(shè)計(jì)的可重用模式——一個(gè)漢堡圖標(biāo)。用戶知道漢堡包圖標(biāo)將打開導(dǎo)航。

何時(shí)以及如何應(yīng)用設(shè)計(jì)模式

知道何時(shí)使用設(shè)計(jì)模式對(duì)于產(chǎn)品設(shè)計(jì)和用戶體驗(yàn)至關(guān)重要。設(shè)計(jì)人員必須僅在有明確的可用性原因時(shí)才使用設(shè)計(jì)模式。

以下是識(shí)別用戶需求和應(yīng)用設(shè)計(jì)模式的四步、以問題為中心的方法：

查明問題——您可以通過分析和可用性測(cè)試的組合來識(shí)別問題。例如，您注意到在獲取客戶詳細(xì)信息時(shí)，您的產(chǎn)品注冊(cè)流程有很高的流失率。通過可用性測(cè)試，您了解到一個(gè)常見的痛點(diǎn)是注冊(cè)過程耗時(shí)太長(zhǎng)——您的注冊(cè)表單要求填寫全名、電子郵件、年齡、性別、城市和手機(jī)號(hào)碼（其中許多細(xì)節(jié)與使用產(chǎn)品無關(guān)） 。

通過市場(chǎng)和競(jìng)爭(zhēng)對(duì)手研究找到解決方案——尋找競(jìng)爭(zhēng)對(duì)手和流行的設(shè)計(jì)庫(kù)，以找到常見的 UI 模式來解決您的問題?；氐轿覀兩厦娴睦樱鷷?huì)發(fā)現(xiàn)競(jìng)爭(zhēng)對(duì)手通常只在注冊(cè)時(shí)詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進(jìn)行注冊(cè)和登錄，從而簡(jiǎn)化注冊(cè)流程。

自定義設(shè)計(jì)模式——您必須自定義新的設(shè)計(jì)模式以匹配您的品牌和現(xiàn)有設(shè)計(jì)系統(tǒng)。對(duì)于我們的用戶注冊(cè)示例，此自定義可能包括調(diào)整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標(biāo)簽和錯(cuò)誤/成功消息將使用您的樣式指南中的顏色。

測(cè)試您的設(shè)計(jì)模式——最后，您必須始終測(cè)試新的設(shè)計(jì)模式實(shí)現(xiàn)，以確保它們滿足可用性和品牌要求。

上面的例子展示了可用性測(cè)試的重要性——識(shí)別和應(yīng)用用戶界面設(shè)計(jì)模式以測(cè)試開始和結(jié)束。

不要因?yàn)楦?jìng)爭(zhēng)對(duì)手有一個(gè)設(shè)計(jì)模式或者你認(rèn)為這是正確的做法就添加一個(gè)設(shè)計(jì)模式。例如，您的網(wǎng)頁設(shè)計(jì)是否需要面包屑導(dǎo)航？對(duì)于電子商務(wù)，可能有必要讓用戶返回到產(chǎn)品類別或知道他們?cè)诮Y(jié)賬序列中的位置。但是，對(duì)于大多數(shù)其他網(wǎng)站，它只是添加了額外的數(shù)據(jù)點(diǎn)供用戶處理。

UX 設(shè)計(jì)模式的常見示例

設(shè)計(jì)模式分為六大類：

A. 數(shù)據(jù)輸入輸出

B. 內(nèi)容結(jié)構(gòu)

C. 導(dǎo)航

D. 社交媒體和分享

E. 激勵(lì)

F. 等級(jí)制度

數(shù)據(jù)輸入和輸出

數(shù)據(jù)輸入和輸出是最常見的用戶/產(chǎn)品交互之一。用戶輸入信息，系統(tǒng)返回?cái)?shù)據(jù)或完成一個(gè)動(dòng)作。

一個(gè)很好的例子是許多網(wǎng)站和應(yīng)用程序使用的日期選擇器。盡管它們看起來略有不同，但大多數(shù)日期選擇器顯示類似的布局和功能——標(biāo)題中的月/年、星期幾和日期。

當(dāng)用戶單擊一個(gè)日期時(shí)，它會(huì)突出顯示以選擇。最后，有一個(gè) CTA（有時(shí)是一個(gè)取消按鈕），用戶可以在完成并準(zhǔn)備繼續(xù)時(shí)單擊。

數(shù)據(jù)輸入和輸出的其他示例包括：

a) 表單提交

b) 成功/失敗消息

c) 應(yīng)用通知

d) 進(jìn)度條/步驟

內(nèi)容結(jié)構(gòu)

你有沒有注意到大多數(shù)界面使用類似的塊布局和圖像縮略圖？或者，管理界面的左側(cè)導(dǎo)航面板和右側(cè)的內(nèi)容如何？

使用這些熟悉的內(nèi)容結(jié)構(gòu)和 UI 模式可以幫助用戶快速瀏覽新的數(shù)字產(chǎn)品或網(wǎng)站。目標(biāo)是最大限度地減少摩擦（例如學(xué)習(xí)新界面），以獲得無縫和愉快的用戶體驗(yàn)。

導(dǎo)航

熟悉的 UI 模式可以幫助用戶輕松瀏覽網(wǎng)站或數(shù)字產(chǎn)品。桌面和移動(dòng)界面有不同的導(dǎo)航模式。

例如，主導(dǎo)航位于桌面網(wǎng)站或應(yīng)用程序的標(biāo)題中或左側(cè)。在移動(dòng)應(yīng)用程序中，主導(dǎo)航欄位于頁腳中，只需用拇指觸碰即可。

無限或連續(xù)滾動(dòng)是 Instagram 和 Pinterest 使用的典型導(dǎo)航設(shè)計(jì)模式。當(dāng)用戶滾動(dòng)時(shí)，系統(tǒng)會(huì)刷新以顯示更多內(nèi)容。這種設(shè)計(jì)模式很熟悉并增強(qiáng)了用戶體驗(yàn)，因?yàn)橛脩舨恍枰獑螕粝乱徊桨粹o或分頁來查看更多內(nèi)容。

社交媒體與分享

設(shè)計(jì)師可以使用多種社交媒體和共享設(shè)計(jì)模式，包括：

a) 鏈接的品牌社交媒體圖標(biāo)

b) 共享圖標(biāo) - 向右彎曲的箭頭或三個(gè)點(diǎn)的共享圖標(biāo)

c) 引言——用引號(hào)引用此人的姓名和形象

這些熟悉的設(shè)計(jì)模式可幫助用戶找到社會(huì)認(rèn)同，以建立對(duì)您的產(chǎn)品和品牌的信任。

這些設(shè)計(jì)模式利用心理學(xué)，鼓勵(lì)用戶執(zhí)行所需的操作。這里的目標(biāo)是在用戶和產(chǎn)品之間建立聯(lián)系。

激勵(lì)

激勵(lì) UX 模式利用設(shè)計(jì)心理學(xué)來鼓勵(lì)用戶執(zhí)行任務(wù)和操作，從而創(chuàng)建用戶/產(chǎn)品關(guān)系。

設(shè)計(jì)師鼓勵(lì)使用設(shè)計(jì)模式通過積極的反饋、認(rèn)知、游戲化等來吸引用戶。

例如，游戲化模式鼓勵(lì)用戶邀請(qǐng)朋友來獲得獎(jiǎng)勵(lì)。UI 模式將通過 CTA 向用戶顯示他們當(dāng)前的積分，以邀請(qǐng)更多朋友賺取更多。

等級(jí)制度

層次結(jié)構(gòu)模式類似于內(nèi)容結(jié)構(gòu)，因?yàn)樗鼈優(yōu)橛脩魟?chuàng)造了即時(shí)的視覺熟悉度，以便快速瀏覽界面并知道如何完成所需的操作。

博客的兩種常見層次結(jié)構(gòu)模式包括標(biāo)題和目錄。用戶可以滾動(dòng)頁面以快速找到他們想要的內(nèi)容或使用目錄跳轉(zhuǎn)到特定部分。

面包屑是電子商務(wù)網(wǎng)站用來幫助用戶瀏覽產(chǎn)品頁面和結(jié)賬流程的另一種層次結(jié)構(gòu)模式。

總結(jié)

UX設(shè)計(jì)模式是用戶體驗(yàn)的重要組成部分，因?yàn)樗鼈冏畲笙薅鹊販p少了產(chǎn)品的學(xué)習(xí)曲線和人類認(rèn)知負(fù)擔(dān)。設(shè)計(jì)師必須知道何時(shí)使用這些 UX 設(shè)計(jì)模式，而不僅僅是出于習(xí)慣或模仿競(jìng)爭(zhēng)對(duì)手而實(shí)施它們。

分析和可用性研究可幫助設(shè)計(jì)人員確定界面中缺少哪些 UX 模式，然后測(cè)試他們是否實(shí)施了正確的模式。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷 作者:對(duì)啊設(shè)計(jì)君
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)