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