網(wǎng)頁交互設(shè)計之單選與多選

一、單選    
1.Tab選項

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

優(yōu)點 
將所有選項都擺在一行，對垂直空間的利用率能達(dá)到好，設(shè)計樣式也可以做到非常直觀，漂亮。
缺點 
它不大適合用在長詞，短語或價格上，如果你確實希望將這些內(nèi)容放在選項中，就必須嘗試精簡文本。水平空間非常有限，即使是只有少量的選項，有時候你仍然需要決定如何截斷文本。
2.列表單選
最初的單選按鈕被用于列表中超過6個選項時，被設(shè)計成垂直方向，圓形輪廓，并擺在列表項的開頭。后來iOS通過在列表末尾加上一個對勾選中而創(chuàng)造一個新的經(jīng)典案例。現(xiàn)在最新的一些設(shè)計中，選中被設(shè)計成在列表選項外加一個描邊框形式，用以節(jié)省水平空間。
優(yōu)點 
列表單選為內(nèi)容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。
缺點 
他們往往很占用空間，不適合用在垂直高度受限的頁面中。
一個有趣的事實是，單選按鈕是受舊收音機上的按鍵設(shè)計的啟發(fā)而設(shè)計出來的，一個按鈕被按下，就會彈出其他按鈕。
二、多選    
1.標(biāo)簽選擇
標(biāo)簽選擇通常用于要從3-6個選項中進(jìn)行多次選擇的情況，它們最適合用一到兩個簡短的單詞或數(shù)字。它們設(shè)計的形式一般是類似于一個小按鈕，通過背景色來區(qū)分“開”和“關(guān)”。
盡管谷歌設(shè)計規(guī)范建議最好在選中的標(biāo)簽前加上一個勾選標(biāo)記，但我覺得有顏色作為區(qū)分已經(jīng)夠了，這樣還能節(jié)省水平空間。
優(yōu)點 
節(jié)省空間，標(biāo)簽堆砌在一起的具體樣式是由文本長度決定的。它們給人的印象是輕量的，有趣的。
缺點 
這種形式與tab選項形式有一樣的弊端，都不能很好的處理長詞。不建議對文本進(jìn)行折行或者調(diào)整大小，因為會不便于用戶閱讀，使用兩行以上的標(biāo)簽會使得每個標(biāo)簽非常難以快速掃描。
2.列表多選
列表中的復(fù)選框一般應(yīng)用于6個以上選項進(jìn)行多選的情況，設(shè)計樣式通常是在列表開頭處設(shè)計一個正方形描邊框。
優(yōu)缺點
與單選框有一樣的優(yōu)勢和弊端。
三、綜合來看    
我們很容易陷入到特定組件的設(shè)計中，所以我發(fā)現(xiàn)最好是從整體上開始思考。然后做出好決定，決定使用哪種選擇設(shè)計最有利于一致性、差異性和層次感。
1.水平Tab和標(biāo)簽
選項背景是tab控件和標(biāo)簽控件之間大的區(qū)別。一個連續(xù)的背景幫助用戶理解他們必須要選擇一個，而一個分離的背景表明他們可以選擇多個。
Tab控件和標(biāo)簽控件的設(shè)計應(yīng)該在視覺上彼此相似，并且做到與文本框和按鈕不同，以不同的視覺樣式幫助達(dá)到不同的交互層次結(jié)構(gòu)。
2.列表單選和列表多選
有這么多單選按鈕形式可以選擇，我發(fā)現(xiàn)最好是將單選和復(fù)選放在一起才便于比較。iOS端的列表單選勾和描邊高亮都是很漂亮的設(shè)計，但是與多選框放一起，就會顯得不夠統(tǒng)一。
最后說一點，但并非是最不重要的，就是圖片的位置。選擇控件一般位于列表項的開頭位置，但是，當(dāng)列表項中有圖片時，就有人開始糾結(jié)應(yīng)該是放前面好還是放后面好。這里，我選擇將控件保留在開頭位置，因為控件是必須存在的，而圖片是可選或者可添加的。

原文：https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4
作者：Linzi Berry
譯者：彩云Sky
（鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請聯(lián)系我們修改。）

當(dāng)前題目：網(wǎng)頁交互設(shè)計之單選與多選
當(dāng)前鏈接：http://m.kartarina.com/news/113888.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)頁設(shè)計公司、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)