發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

43 評論 598297 瀏覽 1033 收藏 10 分鐘

本期文章主要研究單選和多選控件的設計細節(jié),雖然是很常見的控件設計,但是也是有非常多需要注意的地方。能提煉總結(jié)常見事物的一般規(guī)律,這本身就是一件值得大家都去做的一件事。

無論是從個性化內(nèi)容還是用戶體驗上來講,控件元素都會在我們的產(chǎn)品設計中扮演重要角色。為特定的內(nèi)容選擇正確的控件可能要比你想象的要難,控件的高度,寬度,樣式設計和選項數(shù)量都是至關(guān)重要的因素。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

為了幫助分解問題,這里給大家列了一個決策樹。

單選

Tab選項

一個分段tab通常會由2-6個單選項,它最適合用于圖標、數(shù)字或短詞的導航形式,并被設計成一個水平的容器,容納等距離的單選內(nèi)容。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

圖標、短詞、價格

優(yōu)點:將所有選項都擺在一行,對垂直空間的利用率能達到最佳,設計樣式也可以做到非常直觀,漂亮。

缺點:它不大適合用在長詞,短語或價格上,如果你確實希望將這些內(nèi)容放在選項中,就必須嘗試精簡文本。水平空間非常有限,即使是只有少量的選項,有時候你仍然需要決定如何截斷文本。

(譯者注:為什么對于底部導航欄的分欄數(shù)是2-6個最合適,根據(jù)iOS規(guī)范中說的,太多的選項卡增加了應用的復雜性,使得信息定位變得困難。選項太少也可能會帶來一個問題是界面間的信息流斷開,不便于快速觸達。

請見iOS規(guī)范https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/ 。另外,還有說法是按鈕的大小能決定點擊時的舒適度,數(shù)量也會影響用戶的記憶和學習成本。請見知乎https://www.zhihu.com/question/31103224 )

列表單選

最初的單選按鈕被用于列表中超過6個選項時,被設計成垂直方向,圓形輪廓,并擺在列表項的開頭。后來iOS通過在列表末尾加上一個對勾選中,而創(chuàng)造一個新的經(jīng)典案例?,F(xiàn)在最新的一些設計中,選中被設計成在列表選項外加一個描邊框形式,用以節(jié)省水平空間。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

Android & Web vs iOS vs 描邊框模式

優(yōu)點:列表單選為內(nèi)容提供了更多的空間。它們易于閱讀,可以容納多文字,文本可以換行,還可以增加圖片。

缺點:他們往往很占用空間,不適合用在垂直高度受限的頁面中。

一個有趣的事實是,單選按鈕是受舊收音機上的按鍵設計的啟發(fā)而設計出來的,一個按鈕被按下,就會彈出其他按鈕。

多選

標簽選擇

標簽選擇通常用于要從3-6個選項中進行多次選擇的情況,它們最適合用一到兩個簡短的單詞或數(shù)字。它們設計的形式一般是類似于一個小按鈕,通過背景色來區(qū)分“開”和“關(guān)”。

盡管谷歌設計規(guī)范(譯者注:大家可以看看谷歌官方的規(guī)范,對于標簽設計列舉了大量實用原則 https://material.io/design/components/chips.html#filter-chips)建議最好在選中的標簽前加上一個勾選標記,但我覺得有顏色作為區(qū)分已經(jīng)夠了,這樣還能節(jié)省水平空間。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

短詞標簽vs帶省略號的多詞標簽vs折行標簽

優(yōu)點:節(jié)省空間,標簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的,有趣的。

缺點:這種形式與tab選項形式有一樣的弊端,都不能很好的處理長詞。不建議對文本進行折行或者調(diào)整大小,因為會不便于用戶閱讀,使用兩行以上的標簽會使得每個標簽非常難以快速掃描。

列表多選

列表中的復選框一般應用于6個以上選項進行多選的情況,設計樣式通常是在列表開頭處設計一個正方形描邊框。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

列表中的復選框

優(yōu)缺點:與單選框有一樣的優(yōu)勢和弊端。

綜合來看

我們很容易陷入到特定組件的設計中,所以我發(fā)現(xiàn)最好是從整體上開始思考。然后做出最佳決定,決定使用哪種選擇設計最有利于一致性、差異性和層次感。

水平Tab和標簽

選項背景是tab控件和標簽控件之間最大的區(qū)別。一個連續(xù)的背景幫助用戶理解他們必須要選擇一個,而一個分離的背景表明他們可以選擇多個。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

統(tǒng)一的風格和不統(tǒng)一的風格

Tab控件和標簽控件的設計應該在視覺上彼此相似,并且做到與文本框和按鈕不同,以不同的視覺樣式幫助達到不同的交互層次結(jié)構(gòu)。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

不同的樣式風格和相同的樣式風格

列表單選和列表多選

有這么多單選按鈕形式可以選擇,我發(fā)現(xiàn)最好是將單選和復選放在一起才便于比較。iOS端的列表單選勾和描邊高亮都是很漂亮的設計,但是與多選框放一起,就會顯得不夠統(tǒng)一。

(譯者注:最左側(cè)的單選復選樣式和位置相對比較一致,中間的上下都有對勾會讓人產(chǎn)生疑惑,而最右側(cè)的方框高亮和左側(cè)復選框設計差異太大。)

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

Android & Web vs iOS vs Alternate Pattern

最后說一點,但并非是最不重要的,就是圖片的位置。選擇控件一般位于列表項的開頭位置,但是,當列表項中有圖片時,就有人開始糾結(jié)應該是放前面好還是放后面好。

這里,我選擇將控件保留在開頭位置,因為控件是必須存在的,而圖片是可選或者可添加的。(譯者注:如果在一個設計規(guī)范中,選項控件都在左側(cè),那也應該盡量讓其他控件也保持在左側(cè)來保證一致性。)

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

Image in the End vs Start Position

最后的想法

還有一種很好用的選擇控件是滾筒(https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/)。當有許多短詞并且垂直控件有限時,就可以使用它。建議只在其中放置文本,它的使用要求比較高,在Android和iOS中都很復雜。

發(fā)現(xiàn)設計細節(jié),原來單選和多選也有這么多講究

 

原文:https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4

作者:Linzi Berry

譯者:彩云Sky,公眾號:彩云譯設計

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 日期活動比較多

    回復
  2. 求求你,別推了

    回復
    1. ??

      回復
  3. 謝謝,學習了,很厲害!

    回復
  4. 很棒

    回復
  5. 有些圖沒看出對比,??

    回復
  6. 很棒

    回復
  7. 很棒

    回復
  8. 為小編加油

    回復
  9. 從非專業(yè)人士的角度看,我覺得人的圖片放前面比較好,視覺上看起來更有重點

    回復
    1. 嗯,從視覺上說應該是更容易找到重點,如若要看圖片可以只看圖片一列如果想看文字可以直接看文字一列,兩列近不容易造成視覺疲勞。

      回復
    2. 哈哈哈哈

      回復
    3. 不放前面的理由文中也說得很清楚了

      回復
  10. 這篇文章3月出的 咋每天還掛在這里

    回復
    1. 推的真夠久的

      回復
  11. 正確的控件可能要比你想象的要難,控件的高度,寬度

    回復
    1. 控件誰做的最專業(yè)?我們平時可以參考哪些?

      回復
    2. 哈哈

      回復
  12. 多謝分享

    回復
  13. 熊貓(ー_ー)!!

    回復
  14. 感謝

    回復
    1. 口口大口的

      回復
  15. 感謝!

    回復
  16. 感謝

    回復
    1. h?h?h?h

      回復
    2. 很健康k?k

      回復
    3. 很口口口

      回復
  17. 細致

    回復
  18. 講究?。。?!

    回復
  19. 優(yōu)秀

    回復
  20. 厲害,感謝分享

    回復
    1. 回復

      回復
  21. 缺少端的場景的限制,Web端,平板端和手機端是不一樣的。例如web端單個checkbox可以代表兩個互斥狀態(tài)。

    回復
    1. 贊同

      回復
  22. 優(yōu)秀,大道至簡!

    回復
  23. 不錯

    回復
  24. 滾筒選擇在安卓上顯得不倫不類 感覺盡量能用原生的就用原生的

    回復
  25. 感謝分享

    回復
  26. 謝謝

    回復
  27. 好!學習了,感謝!????????????

    回復
  28. 很不錯

    回復
  29. 感謝分享。

    回復