2022-1-11 ui設計分享達人
我們在周圍的世界中看到了許多熟悉的設計模式。例如,大多數道路用實線或條紋線分隔車道。還有交通燈和道路標志可以幫助您在道路上行駛。如果每個國家/地區使用不同的系統,司機將不得不為他們想要駕車經過的每個國家/地區學習新的駕駛模式——但這不切實際!
UX 設計模式的工作原理類似。它們使用戶無需學習新系統即可熟悉瀏覽數字產品或網頁。
什么是用戶體驗設計模式?
UX 設計模式是用于構建用戶界面的常見構建塊。設計師使用 UX 設計模式作為可重用組件來解決常見的可用性問題。
例如,我們經常看到的一種設計模式是面包屑。面包屑向用戶顯示他們所在的頁面以及返回主頁的路徑。
UX 設計模式如何改善用戶體驗
設計模式為設計人員提供了構建塊以更快地創建用戶界面,但它們也增強了用戶體驗。
UX 設計模式通常遵循用戶熟悉的通用設計標準,從而減少學習和瀏覽新產品或網站所需的時間和認知負擔。
在《我們如何決定》一書中,作者喬納·萊勒 (Jonah Lehrer) 寫道,識別熟悉的模式會釋放出多巴胺——一種與動機、獎勵、記憶和注意力有關的化學物質。當用戶體驗模式按預期工作時,多巴胺命中會增加。
使用有效的UX 設計心理學技術的設計師,例如熟悉的 UI 設計模式,可以增強用戶體驗并使產品交互更加愉快。
UX 和 UI 模式之間的差異
大多數設計師交替使用UX 模式和UI 模式這兩個術語,因為區別很小,有很多重疊,并且可能會引起混淆!
UX 模式:用戶流和導航的可重用模式——在社交媒體平臺或網站上無限或連續滾動。用戶認識到他們可以向下滾動以刷新頁面。
UI 模式:用于視覺和交互設計的可重用模式——一個漢堡圖標。用戶知道漢堡包圖標將打開導航。
何時以及如何應用設計模式
知道何時使用設計模式對于產品設計和用戶體驗至關重要。設計人員必須僅在有明確的可用性原因時才使用設計模式。
以下是識別用戶需求和應用設計模式的四步、以問題為中心的方法:
查明問題——您可以通過分析和可用性測試的組合來識別問題。例如,您注意到在獲取客戶詳細信息時,您的產品注冊流程有很高的流失率。通過可用性測試,您了解到一個常見的痛點是注冊過程耗時太長——您的注冊表單要求填寫全名、電子郵件、年齡、性別、城市和手機號碼(其中許多細節與使用產品無關) 。
通過市場和競爭對手研究找到解決方案——尋找競爭對手和流行的設計庫,以找到常見的 UI 模式來解決您的問題。回到我們上面的例子,您會發現競爭對手通常只在注冊時詢問用戶的全名和電子郵件地址。它們還允許用戶使用社交媒體帳戶進行注冊和登錄,從而簡化注冊流程。
自定義設計模式——您必須自定義新的設計模式以匹配您的品牌和現有設計系統。對于我們的用戶注冊示例,此自定義可能包括調整輸入、社交媒體按鈕和提交按鈕的圓角半徑。占位符文本、輸入標簽和錯誤/成功消息將使用您的樣式指南中的顏色。
測試您的設計模式——最后,您必須始終測試新的設計模式實現,以確保它們滿足可用性和品牌要求。
上面的例子展示了可用性測試的重要性——識別和應用用戶界面設計模式以測試開始和結束。
不要因為競爭對手有一個設計模式或者你認為這是正確的做法就添加一個設計模式。例如,您的網頁設計是否需要面包屑導航?對于電子商務,可能有必要讓用戶返回到產品類別或知道他們在結賬序列中的位置。但是,對于大多數其他網站,它只是添加了額外的數據點供用戶處理。
UX 設計模式的常見示例
設計模式分為六大類:
A. 數據輸入輸出
B. 內容結構
C. 導航
D. 社交媒體和分享
E. 激勵
F. 等級制度
數據輸入和輸出
數據輸入和輸出是最常見的用戶/產品交互之一。用戶輸入信息,系統返回數據或完成一個動作。
一個很好的例子是許多網站和應用程序使用的日期選擇器。盡管它們看起來略有不同,但大多數日期選擇器顯示類似的布局和功能——標題中的月/年、星期幾和日期。
當用戶單擊一個日期時,它會突出顯示以選擇。最后,有一個 CTA(有時是一個取消按鈕),用戶可以在完成并準備繼續時單擊。
數據輸入和輸出的其他示例包括:
a) 表單提交
b) 成功/失敗消息
c) 應用通知
d) 進度條/步驟
內容結構
你有沒有注意到大多數界面使用類似的塊布局和圖像縮略圖?或者,管理界面的左側導航面板和右側的內容如何?
使用這些熟悉的內容結構和 UI 模式可以幫助用戶快速瀏覽新的數字產品或網站。目標是最大限度地減少摩擦(例如學習新界面),以獲得無縫和愉快的用戶體驗。
導航
熟悉的 UI 模式可以幫助用戶輕松瀏覽網站或數字產品。桌面和移動界面有不同的導航模式。
例如,主導航位于桌面網站或應用程序的標題中或左側。在移動應用程序中,主導航欄位于頁腳中,只需用拇指觸碰即可。
無限或連續滾動是 Instagram 和 Pinterest 使用的典型導航設計模式。當用戶滾動時,系統會刷新以顯示更多內容。這種設計模式很熟悉并增強了用戶體驗,因為用戶不需要單擊下一步按鈕或分頁來查看更多內容。
社交媒體與分享
設計師可以使用多種社交媒體和共享設計模式,包括:
a) 鏈接的品牌社交媒體圖標
b) 共享圖標 - 向右彎曲的箭頭或三個點的共享圖標
c) 引言——用引號引用此人的姓名和形象
這些熟悉的設計模式可幫助用戶找到社會認同,以建立對您的產品和品牌的信任。
這些設計模式利用心理學,鼓勵用戶執行所需的操作。這里的目標是在用戶和產品之間建立聯系。
激勵
激勵 UX 模式利用設計心理學來鼓勵用戶執行任務和操作,從而創建用戶/產品關系。
設計師鼓勵使用設計模式通過積極的反饋、認知、游戲化等來吸引用戶。
例如,游戲化模式鼓勵用戶邀請朋友來獲得獎勵。UI 模式將通過 CTA 向用戶顯示他們當前的積分,以邀請更多朋友賺取更多。
等級制度
層次結構模式類似于內容結構,因為它們為用戶創造了即時的視覺熟悉度,以便快速瀏覽界面并知道如何完成所需的操作。
博客的兩種常見層次結構模式包括標題和目錄。用戶可以滾動頁面以快速找到他們想要的內容或使用目錄跳轉到特定部分。
面包屑是電子商務網站用來幫助用戶瀏覽產品頁面和結賬流程的另一種層次結構模式。
總結
UX設計模式是用戶體驗的重要組成部分,因為它們最大限度地減少了產品的學習曲線和人類認知負擔。設計師必須知道何時使用這些 UX 設計模式,而不僅僅是出于習慣或模仿競爭對手而實施它們。
分析和可用性研究可幫助設計人員確定界面中缺少哪些 UX 模式,然后測試他們是否實施了正確的模式。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務