中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2021-05-16    分類: 網(wǎng)站建設(shè)

一、單選    
1.Tab選項(xiàng)

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

網(wǎng)頁交互設(shè)計(jì)

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

網(wǎng)頁交互設(shè)計(jì)

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

當(dāng)前題目:網(wǎng)頁交互設(shè)計(jì)之單選與多選
當(dāng)前鏈接:http://www.rwnh.cn/news/113888.html

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

廣告

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

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司
新河县| 长顺县| 临沂市| 斗六市| 海阳市| 甘德县| 襄樊市| 绍兴市| 怀来县| 大新县| 张家港市| 寿宁县| 崇礼县| 仁布县| 长海县| 都江堰市| 庆元县| 张北县| 安达市| 元朗区| 六安市| 乌审旗| 肇东市| 日喀则市| 斗六市| 峡江县| 武乡县| 宁都县| 临沂市| 浑源县| 阿克| 新密市| 平陆县| 武冈市| 永清县| 黑水县| 宜宾县| 从江县| 宝丰县| 南充市| 贡觉县|