好的單選框設計具備哪些特質?把握住這些知識點

編輯導語:單選框即使用者只能選擇一個選項,這個元件在日常生活中並不少見,但是在設計上,單選框的設計仍需要考慮到多個細節方面。本篇文章裡,作者就如何設計出更好的單選框、以及如何應用單選框設計做了總結,一起來看一下。

好的單選框設計具備哪些特質?把握住這些知識點

大家好,我是Clippp。今天為大家分享的是

「單選框

設計。元件的功能在於

提升可用性

,幫助使用者輕鬆做出決策。雖然單選框只是一個很簡單的元件,但在設計上從不缺乏細節,更不能疏於考慮。

一起來看看好的單選框設計需要具備哪些特點,如何結合當下的使用場景,靈活運用單選框得到最優解。

一、什麼是單選框?

顧名思義,單選框表示只能選擇一個選項,再具體一點,可以理解為只能從一組

相互排斥

的選項中選擇其中一個選項。

單選框有

選中和未選中

兩種狀態,樣式上用填充的圓表示選中,描邊的圓表示未選中,透過改變狀態來給使用者反饋。

好的單選框設計具備哪些特質?把握住這些知識點

常見的樣式是按鈕在左標籤在右,在結合特定的場景使用時,兩者的位置可以視情況靈活調換。

二、何時使用單選框?

除了單選框,選擇類元件還有很多其他形式,比如下拉列表、複選框等,我們首先來對比區分一下這幾個易混淆的元件。

1. 單選框VS下拉列表

當用戶需要從大量選項中進行選擇時,為了

節省空間

,可以使用下拉列表代替單選按鈕。但是下拉列表將內容都隱藏在下一層級中,

需要使用者多做一次選擇,操作成本和認知成本都會變高

好的單選框設計具備哪些特質?把握住這些知識點

當選擇不多於3項,建議使用單選框,這樣選項可以直接展示出來,使用者只需要點選選擇即可;當選擇超過5項時,可以考慮使用下拉列表,確保選項不會佔用大量空間。

2. 單選框VS複選框

複選框允許使用者一次選擇多個選項,選中其中一個選項,

不會對其他選項產生影響

。對於何時使用單選框還是複選框沒有明確的界定,需要具體問題具體分析。

好的單選框設計具備哪些特質?把握住這些知識點

這裡提一個使用複選框時需要注意的小問題,比如在只有兩個選項時使用複選框,使用者可能會以為只需要從這兩個選項裡面選擇一個,反而造成誤導。

三、單選框設計指南

1. 始終確保良好的可用性

對於這樣一個簡單的元件,想要做好用好,在設計上有一些不可忽視的細節。

首先要避免在單選框列表中巢狀下一層級的選項,因為使用單選框的目的之一就是為了讓所有選項清晰呈現給使用者,巢狀過多層級會導致整個結構的混亂。

好的單選框設計具備哪些特質?把握住這些知識點

另外要明確的是,單選按鈕不應該是唯一可點選的熱區,而是要

將按鈕和標籤一起作為熱區,便於使用者準確點選操作

好的單選框設計具備哪些特質?把握住這些知識點

這個選擇模組由單選按鈕、文字標籤和圖示共同組成,可操作的範圍很大,視覺層次也很清晰,設計得既整潔又實用。

2. 保證可讀性

單選框列表的佈局要有邏輯性,儘量減輕使用者的認知負荷。

好的單選框設計具備哪些特質?把握住這些知識點

使用者習慣於

上下瀏覽選項和列表

,如果將這些選項水平排布,可能會造成兩點問題:一個是瀏覽時視線移動的不習慣,另一個就是如果選項位置過於緊湊,使用者可能不知道每個標籤到底對應哪個按鈕。

除了列表要垂直佈局,標籤也需要很簡潔。標籤越長,使用者需要花費更多的時間和精才能瞭解整個列表。

3. 提供預設選擇

想象這樣一個使用場景,我們下載了一個新的設計軟體,第一次開啟時跳出一個彈窗,提示我們是選擇經典佈局,還是個性化佈局,但是我們對這個軟體不是很瞭解,可能並不清楚這兩個佈局到底是什麼樣子。

好的單選框設計具備哪些特質?把握住這些知識點

在這種情況下,最好

預設選中其中一個選項

,這樣做一方面可以減輕使用者對於選項的糾結,另一方面還能有目的地引導使用者使用。

#專欄作家#

作者:Clippp,微信公眾號:Clip設計夾。每週精選設計文章,專注分享關於產品、互動、UI視覺上的設計思考。

本文原創釋出於人人都是產品經理,未經作者許可,禁止轉載。

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

頂部