2022-1-11 ui設計分享達人
我們在周圍的世界中看到了許多熟悉的設計模式。例如，大多數(shù)道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區(qū)使用不同的系統(tǒng)，司機將不得不為他們想要駕車經(jīng)過的每個國家/地區(qū)學習新的駕駛模式——但這不切實際！
UX 設計模式的工作原理類似。它們使用戶無需學習新系統(tǒng)即可熟悉瀏覽數(shù)字產(chǎn)品或網(wǎng)頁。
什么是用戶體驗設計模式？
UX 設計模式是用于構(gòu)建用戶界面的常見構(gòu)建塊。設計師使用 UX 設計模式作為可重用組件來解決常見的可用性問題。
例如，我們經(jīng)?？吹降囊环N設計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。
UX 設計模式如何改善用戶體驗
設計模式為設計人員提供了構(gòu)建塊以更快地創(chuàng)建用戶界面，但它們也增強了用戶體驗。
UX 設計模式通常遵循用戶熟悉的通用設計標準，從而減少學習和瀏覽新產(chǎn)品或網(wǎng)站所需的時間和認知負擔。
在《我們?nèi)绾螞Q定》一書中，作者喬納·萊勒 (Jonah Lehrer) 寫道，識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關(guān)的化學物質(zhì)。當用戶體驗模式按預期工作時，多巴胺命中會增加。
使用有效的UX 設計心理學技術(shù)的設計師，例如熟悉的 UI 設計模式，可以增強用戶體驗并使產(chǎn)品交互更加愉快。
UX 和 UI 模式之間的差異
大多數(shù)設計師交替使用UX 模式和UI 模式這兩個術(shù)語，因為區(qū)別很小，有很多重疊，并且可能會引起混淆！
UX 模式：用戶流和導航的可重用模式——在社交媒體平臺或網(wǎng)站上無限或連續(xù)滾動。用戶認識到他們可以向下滾動以刷新頁面。
UI 模式：用于視覺和交互設計的可重用模式——一個漢堡圖標。用戶知道漢堡包圖標將打開導航。
何時以及如何應用設計模式
知道何時使用設計模式對于產(chǎn)品設計和用戶體驗至關(guān)重要。設計人員必須僅在有明確的可用性原因時才使用設計模式。
以下是識別用戶需求和應用設計模式的四步、以問題為中心的方法：
查明問題——您可以通過分析和可用性測試的組合來識別問題。例如，您注意到在獲取客戶詳細信息時，您的產(chǎn)品注冊流程有很高的流失率。通過可用性測試，您了解到一個常見的痛點是注冊過程耗時太長——您的注冊表單要求填寫全名、電子郵件、年齡、性別、城市和手機號碼（其中許多細節(jié)與使用產(chǎn)品無關(guān)） 。
通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設計庫，以找到常見的 UI 模式來解決您的問題?；氐轿覀兩厦娴睦?，您會發(fā)現(xiàn)競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄，從而簡化注冊流程。
自定義設計模式——您必須自定義新的設計模式以匹配您的品牌和現(xiàn)有設計系統(tǒng)。對于我們的用戶注冊示例，此自定義可能包括調(diào)整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標簽和錯誤/成功消息將使用您的樣式指南中的顏色。
測試您的設計模式——最后，您必須始終測試新的設計模式實現(xiàn)，以確保它們滿足可用性和品牌要求。
上面的例子展示了可用性測試的重要性——識別和應用用戶界面設計模式以測試開始和結(jié)束。
不要因為競爭對手有一個設計模式或者你認為這是正確的做法就添加一個設計模式。例如，您的網(wǎng)頁設計是否需要面包屑導航？對于電子商務，可能有必要讓用戶返回到產(chǎn)品類別或知道他們在結(jié)賬序列中的位置。但是，對于大多數(shù)其他網(wǎng)站，它只是添加了額外的數(shù)據(jù)點供用戶處理。
UX 設計模式的常見示例
設計模式分為六大類：
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 使用的典型導航設計模式。當用戶滾動時，系統(tǒng)會刷新以顯示更多內(nèi)容。這種設計模式很熟悉并增強了用戶體驗，因為用戶不需要單擊下一步按鈕或分頁來查看更多內(nèi)容。
社交媒體與分享
設計師可以使用多種社交媒體和共享設計模式，包括：
a) 鏈接的品牌社交媒體圖標
b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標
c) 引言——用引號引用此人的姓名和形象
這些熟悉的設計模式可幫助用戶找到社會認同，以建立對您的產(chǎn)品和品牌的信任。
這些設計模式利用心理學，鼓勵用戶執(zhí)行所需的操作。這里的目標是在用戶和產(chǎn)品之間建立聯(lián)系。
激勵
激勵 UX 模式利用設計心理學來鼓勵用戶執(zhí)行任務和操作，從而創(chuàng)建用戶/產(chǎn)品關(guān)系。
設計師鼓勵使用設計模式通過積極的反饋、認知、游戲化等來吸引用戶。
例如，游戲化模式鼓勵用戶邀請朋友來獲得獎勵。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設計模式是用戶體驗的重要組成部分，因為它們最大限度地減少了產(chǎn)品的學習曲線和人類認知負擔。設計師必須知道何時使用這些 UX 設計模式，而不僅僅是出于習慣或模仿競爭對手而實施它們。
分析和可用性研究可幫助設計人員確定界面中缺少哪些 UX 模式，然后測試他們是否實施了正確的模式。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務