我們在周圍的世界中看到了許多熟悉的設(shè)計模式。例如，大多數(shù)道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區(qū)使用不同的系統(tǒng)，司機將不得不為他們想要駕車經(jīng)過的每個國家/地區(qū)學習新的駕駛模式——但這不切實際！

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

什么是用戶體驗設(shè)計模式？

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

例如，我們經(jīng)常看到的一種設(shè)計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。

UX 設(shè)計模式如何改善用戶體驗

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

UX 設(shè)計模式通常遵循用戶熟悉的通用設(shè)計標準，從而減少學習和瀏覽新產(chǎn)品或網(wǎng)站所需的時間和認知負擔。

在《我們?nèi)绾螞Q定》一書中，作者喬納·萊勒 (Jonah Lehrer) 寫道，識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關(guān)的化學物質(zhì)。當用戶體驗模式按預期工作時，多巴胺命中會增加。

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

UX 和 UI 模式之間的差異

大多數(shù)設(shè)計師交替使用UX 模式和UI 模式這兩個術(shù)語，因為區(qū)別很小，有很多重疊，并且可能會引起混淆！

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

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

何時以及如何應用設(shè)計模式

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

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

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

通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設(shè)計庫，以找到常見的 UI 模式來解決您的問題。回到我們上面的例子，您會發(fā)現(xiàn)競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄，從而簡化注冊流程。

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

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

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

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

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

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

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

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

C. 導航

D. 社交媒體和分享

E. 激勵

F. 等級制度

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

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

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

當用戶單擊一個日期時，它會突出顯示以選擇。最后，有一個 CTA（有時是一個取消按鈕），用戶可以在完成并準備繼續(xù)時單擊。

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

a) 表單提交

b) 成功/失敗消息

c) 應用通知

d) 進度條/步驟

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

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

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

導航

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

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

無限或連續(xù)滾動是 Instagram 和 Pinterest 使用的典型導航設(shè)計模式。當用戶滾動時，系統(tǒng)會刷新以顯示更多內(nèi)容。這種設(shè)計模式很熟悉并增強了用戶體驗，因為用戶不需要單擊下一步按鈕或分頁來查看更多內(nèi)容。

社交媒體與分享

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

a) 鏈接的品牌社交媒體圖標

b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標

c) 引言——用引號引用此人的姓名和形象

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

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

激勵

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

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

例如，游戲化模式鼓勵用戶邀請朋友來獲得獎勵。UI 模式將通過 CTA 向用戶顯示他們當前的積分，以邀請更多朋友賺取更多。

等級制度

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

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

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

總結(jié)

UX設(shè)計模式是用戶體驗的重要組成部分，因為它們最大限度地減少了產(chǎn)品的學習曲線和人類認知負擔。設(shè)計師必須知道何時使用這些 UX 設(shè)計模式，而不僅僅是出于習慣或模仿競爭對手而實施它們。

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

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

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

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

藍藍設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務