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

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

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

一、單選    
1.Tab選項

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

網(wǎng)頁交互設計

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

網(wǎng)頁交互設計

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

本文題目:網(wǎng)頁交互設計之單選與多選
網(wǎng)站網(wǎng)址:http://m.rwnh.cn/news38/113888.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、外貿(mào)建站App設計、外貿(mào)網(wǎng)站建設網(wǎng)站設計公司、域名注冊

廣告

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

手機網(wǎng)站建設
崇义县| 肥西县| 沛县| 古交市| 通化县| 游戏| 英超| 荆州市| 连江县| 桦甸市| 望都县| 内江市| 嘉峪关市| 渭南市| 桐梓县| 郑州市| 涞水县| 中山市| 陇西县| 新昌县| 泰州市| 开平市| 黄大仙区| 长海县| 南阳市| 广安市| 太保市| 东阳市| 新郑市| 杂多县| 湖口县| 新密市| 霍林郭勒市| 苏尼特左旗| 富裕县| 行唐县| 博客| 固原市| 濮阳市| 肥东县| 独山县|