维卡币到2020年会涨到多少|关于维卡币的视频报道
深圳網站建設,網站建設,網站設計,網站優化-深圳網站建設優化服務商
當前位置: 主頁 > 建站學堂 > 產品策劃 >
UI設計規范:單選按鈕vs復選框,沒那么簡單
技術文檔    發布日期:2017-06-19 11:47   來源:

無論是網頁設計,還是移動app設計,都經常用到單選按鈕和復選框這兩個組件。這兩個組件看似意義明確,很好區分,但在實際設計中卻很容易用錯,帶來不好的用戶體驗。

本文中我通過列舉幾個典型的錯誤用法,幫助設計師在進行UI/UX設計時,更加規范地使用單選按鈕和復選框這兩個組件。

使用原型工具:Mockplus

單選按鈕和復選框的區別

什么時候使用單選按鈕?

有兩個或兩個以上的互斥選項,用戶必須且只能從中選擇一個。換句話說,如果你選擇了其中一個沒有被選中的選項,那么原本被選中的選項就自動被取消。

什么時候使用復選框?

有一系列選項,用戶可以從中選擇選擇一個或多個,甚至不選也可以。換句話說,每一個選項是互不影響的。

看了定義,你是否覺得這兩個組件使用起來很容易呢?但在設計實例中,以下幾個錯誤用法是頻頻出現的:

錯誤一:用錯對象

一個提供午餐外賣服務的app, 在讓用戶選擇送餐時間時,使用了復選框組件。這既違背了設計初衷(希望用戶從中選擇一個時間段),又給用戶帶來了困擾,是不是我同時勾選前兩個時間段,就代表在這整個大的區間內送餐都是可以的呢?

錯誤二:選項文本中使用否定詞

以上的幾個例子是比較夸張的,但的確反映了一些UI/UX設計中存在的問題。如果我們在復選框選項中使用否定句式,用戶必須瀏覽完所有的選項,才能確保自己不喜歡的事情不會發生。

有一個例外的情況,當瀏覽器中彈出“不要再提示該信息”時,類似的選項中可以使用否定詞。

錯誤三:選項的排列不遵循邏輯順序

圖中的選項沒有遵循一定的邏輯順序。按照訂閱時間長短,應該是:月訂閱>季訂閱>年訂閱

以上三個是單選按鈕和復選框在UI/UX設計中常見的錯誤,除了避免這些錯誤之外,設計師在使用這兩個組件時,最好能遵循以下四點建議:

1. 能使用單選按鈕時,盡量不使用下拉菜單。在所有選項都被清晰地列舉出時,用戶更容易進行比較,做出正確的選擇。

2. 使用單選按鈕時,一定要提供一個已經選中的默認選項。

3. 單選按鈕和復選框都不用于觸發任何動作。

4. 選項句式不宜過長,最好能讓用戶迅速抓住關鍵信息。

以上三點錯誤和四條建議,是用好單選按鈕和復選框這兩個組件的關鍵。如需了解更多相關的設計規范以及組件的使用方法,請查看Mockplus官網的教程。 

?
地址:深圳市南山區創業路南光商務大廈2-1114    Email:[email protected]    Tel:0755-86176995    中國 · 深圳
Copyright ? 2006 -2018 深圳匯網在線 All Right Reserved.    粵ICP備14062458號-1


咨詢電話:0755-86176995
维卡币到2020年会涨到多少 重庆快乐十分 新疆时时彩 新疆11选5 皇冠即时比分 足彩 山东十一选五 北单比分开奖sp 云南十一选五 球探即时篮球nba比分直播 亿客隆彩票官网 广东时时彩 网球比分直播第一捷报网 新浪体育cba 极速十一选五 篮球比分网捷报 江西多乐彩