案例錦囊|“防呆設計”在交互中的巧妙應用(二)

2 評論 5088 瀏覽 25 收藏 10 分鐘

“防呆設計”是什么?本篇文章作者將帶來防呆設計在交互設計的中的巧妙應用案例二,大量錦囊妙計正在向你趕來!自動、保險、標示、隔離、警告,五種常見的防呆設計手法,推薦對交互設計感興趣的童鞋閱讀。

「防呆設計」作為一種預防、矯正錯誤行為的手法,常被用于交互設計中,讓用戶不需要花費注意力就可以正確無誤地完成操作。本文分享五種常見的「防呆設計」手法和案例:

  1. 自動
  2. 保險
  3. 標示
  4. 隔離
  5. 警告

希望會為你帶來更多的設計靈感。

RULE 1 自動

「自動」是指運用設備的結構和原理,使功能自動開始或停止,減少用戶因遺忘造成的風險。

案例1

釘釘新增了消息“定時發送”功能。晚上編輯好內容可以選擇明早定時發送,在不打擾同事的同時保證消息完成傳送;還可定時給同事、朋友發送生日、節日祝福等,避免你因為忙而疏忽,錯過朋友的重要時刻:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例2

Cash App 會自動識別銀行卡號、有效期、CVV 和郵編的位數。在用戶填寫信息達到標準位數時,就會自動跳入下一個輸入框,以減少用戶的點擊步驟。當輸入完成 5 位的郵編時,鍵盤會自動退出,給用戶一種“完成感”:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例3

瀏覽器會保留用戶的瀏覽記錄,當用戶再次填寫首字母時,系統就會自動填充瀏覽過的網站地址,減少用戶輸入錯誤的可能性:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例4

釘釘的紅包功能,在領取紅包后,系統會自動生成一些感謝話術,讓用戶選擇以表達感謝,既避免了不會說漂亮話的尷尬,又可以活躍群里的氣氛:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

RULE 2 保險

「保險」是指按照順序運行兩個以上的動作才能完成操作。多加一步操作,給用戶更多的思考機會和時間。典型用法是增加彈窗、鏈接等形式提供更多信息,讓用戶進一步確認。

案例1

餓了么的全能超市送貨時間為“半日達”(半天后送到),系統會在用戶下單時再次給出提示,告知用戶思考后下單:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例2

使用招商銀行 App 連續兩次給同一個賬號轉賬相同數量的金額時,會給出“避免重復打款”的提示,讓用戶進一步確認:??

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例3

加微信群時,如果群內人員有多次被舉報或違規的情況,會提示用戶保護個人隱私和財產安全,核實確認后再加群:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例 4

用百度搜索,檢索圖片不太令人舒適時,瀏覽器會幫助用戶先屏蔽圖片,提示用戶再次確認是否要繼續查看:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

RULE 3 標示

「標示」是指運用形狀、顏色、加粗線條等區別以方便識別,提醒用戶注意。交互設計中多以顏色鮮亮的小色塊、圓點等樣式進行示意。

案例1

餓了么 App 會幫助身體機能有缺陷的騎手做標注,比如“我是溝通障礙騎士,請多多包涵”,讓用戶心里有預期,對騎手有關懷:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例2

當iOS 系統中的App 需要升級才能使用時,系統會在 App 名字前加一個小云朵的下載 icon, 提示用戶在閑暇時間點擊 App 更新,避免在緊急使用時因為更新而耽誤時間:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例3

Figma 會檢測出英文的拼寫錯誤并進行標示,同時提供可能的正確拼寫方式:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例4

在疫情期間,使用高德地圖打車到機場,會提示該城市機場最新的防疫政策,避免用戶因為核酸信息而耽誤行程:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例5

美團打車會用明顯的標示提醒用戶上車地點有“限停時間”,通知用戶快速就位:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例6

微信群聊天設置“消息免打擾”,很可能會錯過重要信息。微信可以在群聊設置中選擇“關注的群成員”,被你添加關注的群成員在群里發消息時,你就可以接到通知提醒:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

RULE 4 隔離

「隔離」是指通過區域分隔或分離來保護某些區域,避免危險或錯誤。

案例1

買單吧 App 的用戶信息頁面,在錄屏的情況下會自動做模糊處理,保護用戶隱私:?

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例 2

微信添加新朋友時,可以選擇標簽給新朋友分組、設置權限。在朋友圈發了分組可見的內容后,也提供修改分組的功能,有效保護用戶隱私:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

RULE 5 警告

「警告」是指將不正?;蚣磳⒊鰡栴}的情況,通過顏色、燈光、聲音、動效等明顯、特殊的方式進行警告,提醒用戶及時修正錯誤。交互設計可借鑒工業設計中的報警器功能,用彈窗、燈光和聲音對用戶進行提示。

案例 1

釘釘會在你長時間未讀某人的單聊消息時,再次發出通知提示,避免你錯過重要消息:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例 2

在淘票票購買的電影票,如果距放映時間不到半小時,進入淘票票就會有彈窗通知電影信息,還可通過彈窗直接取票,避免用戶錯過觀影時間:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

案例 3

吉飲咖啡包裝底部的墊空是為了給產品做緩沖,不應該被打開。但如果用戶一不小心開錯了方向,就會發現文字說明,溫馨提示用戶開錯了方向:

案例錦囊|“防呆設計”在交互中的巧妙應用(二)!

還沒看夠?你還可以閱讀這些內容:

案例丨交互設計中的「防呆」案例(一)

專欄作家

元堯,微信公眾號:長弓小子,人人都是產品經理專欄作家。一線互聯網大廠B端體驗設計師,清華大學美術學院本碩連讀。曾負責國內最大開源組件庫Ant Design組件的設計和運營工作,目前負責國際業務線B端產品體驗設計和組件庫的搭建工作。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 棒棒

    來自北京 回復
  2. 無論是排版還是語言都很簡潔,讀起來舒服

    來自廣東 回復