編輯導語:單選框即使用者只能選擇一個選項,這個元件在日常生活中並不少見,但是在設計上,單選框的設計仍需要考慮到多個細節方面。本篇文章裡,作者就如何設計出更好的單選框、以及如何應用單選框設計做了總結,一起來看一下。
大家好,我是Clippp。今天為大家分享的是
「單選框
」
設計。元件的功能在於
提升可用性
,幫助使用者輕鬆做出決策。雖然單選框只是一個很簡單的元件,但在設計上從不缺乏細節,更不能疏於考慮。
一起來看看好的單選框設計需要具備哪些特點,如何結合當下的使用場景,靈活運用單選框得到最優解。
一、什麼是單選框?
顧名思義,單選框表示只能選擇一個選項,再具體一點,可以理解為只能從一組
相互排斥
的選項中選擇其中一個選項。
單選框有
選中和未選中
兩種狀態,樣式上用填充的圓表示選中,描邊的圓表示未選中,透過改變狀態來給使用者反饋。
常見的樣式是按鈕在左標籤在右,在結合特定的場景使用時,兩者的位置可以視情況靈活調換。
二、何時使用單選框?
除了單選框,選擇類元件還有很多其他形式,比如下拉列表、複選框等,我們首先來對比區分一下這幾個易混淆的元件。
1. 單選框VS下拉列表
當用戶需要從大量選項中進行選擇時,為了
節省空間
,可以使用下拉列表代替單選按鈕。但是下拉列表將內容都隱藏在下一層級中,
需要使用者多做一次選擇,操作成本和認知成本都會變高
。
當選擇不多於3項,建議使用單選框,這樣選項可以直接展示出來,使用者只需要點選選擇即可;當選擇超過5項時,可以考慮使用下拉列表,確保選項不會佔用大量空間。
2. 單選框VS複選框
複選框允許使用者一次選擇多個選項,選中其中一個選項,
不會對其他選項產生影響
。對於何時使用單選框還是複選框沒有明確的界定,需要具體問題具體分析。
這裡提一個使用複選框時需要注意的小問題,比如在只有兩個選項時使用複選框,使用者可能會以為只需要從這兩個選項裡面選擇一個,反而造成誤導。
三、單選框設計指南
1. 始終確保良好的可用性
對於這樣一個簡單的元件,想要做好用好,在設計上有一些不可忽視的細節。
首先要避免在單選框列表中巢狀下一層級的選項,因為使用單選框的目的之一就是為了讓所有選項清晰呈現給使用者,巢狀過多層級會導致整個結構的混亂。
另外要明確的是,單選按鈕不應該是唯一可點選的熱區,而是要
將按鈕和標籤一起作為熱區,便於使用者準確點選操作
。
這個選擇模組由單選按鈕、文字標籤和圖示共同組成,可操作的範圍很大,視覺層次也很清晰,設計得既整潔又實用。
2. 保證可讀性
單選框列表的佈局要有邏輯性,儘量減輕使用者的認知負荷。
使用者習慣於
上下瀏覽選項和列表
,如果將這些選項水平排布,可能會造成兩點問題:一個是瀏覽時視線移動的不習慣,另一個就是如果選項位置過於緊湊,使用者可能不知道每個標籤到底對應哪個按鈕。
除了列表要垂直佈局,標籤也需要很簡潔。標籤越長,使用者需要花費更多的時間和精才能瞭解整個列表。
3. 提供預設選擇
想象這樣一個使用場景,我們下載了一個新的設計軟體,第一次開啟時跳出一個彈窗,提示我們是選擇經典佈局,還是個性化佈局,但是我們對這個軟體不是很瞭解,可能並不清楚這兩個佈局到底是什麼樣子。
在這種情況下,最好
預設選中其中一個選項
,這樣做一方面可以減輕使用者對於選項的糾結,另一方面還能有目的地引導使用者使用。
#專欄作家#
作者:Clippp,微信公眾號:Clip設計夾。每週精選設計文章,專注分享關於產品、互動、UI視覺上的設計思考。
本文原創釋出於人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。