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

想做好單選框的用戶體驗(yàn),這兒有10個(gè)技巧可以幫你

2016-09-08    分類: 用戶體驗(yàn)

沒(méi)人帶,自學(xué)慢,不在BAT怎么學(xué)產(chǎn)品?人人都是產(chǎn)品經(jīng)理聯(lián)合200+BAT資深產(chǎn)品經(jīng)理帶你學(xué)點(diǎn)此查看詳情

單選框是表單組成的重要元素之一,看似簡(jiǎn)單,想做好用戶體驗(yàn)還有很多細(xì)節(jié)值得推敲。今天這篇譯文總結(jié)了10個(gè)幫你做出優(yōu)秀體驗(yàn)單選框的技巧,一起來(lái)收。

它往往應(yīng)用于列表中兩個(gè)或兩個(gè)以上互斥的選項(xiàng),用戶必須從中至少選定一個(gè)。換句話說(shuō),如果你選中一個(gè)選項(xiàng),另一個(gè)先前被選中的選項(xiàng)會(huì)自動(dòng)變成未選中的狀態(tài)。

通用的單選框控件

當(dāng)我們正確使用單選框時(shí),它往往有杰出的表現(xiàn)—它可以防止用戶輸入錯(cuò)誤的信息,因?yàn)樗徽故竞虾踹壿嫷倪x項(xiàng),并且可以通過(guò)鍵盤切換不同選項(xiàng)。本文我們將重點(diǎn)討論單選框在可用性測(cè)試中的實(shí)踐規(guī)范。

單選框的名字由來(lái)

單選框的名字來(lái)源于老式汽車上用于切換廣播電臺(tái)頻道的物理按鈕--當(dāng)按下其中一個(gè)按鈕,其他按鈕會(huì)彈起,被按下的按鈕被置于“推進(jìn)去”的狀態(tài)。軟件中的單選框正是對(duì)這些物理電臺(tái)按鈕的模仿。

 單選框的好實(shí)踐

將單選框只用于設(shè)置

我們應(yīng)使用單選框更改設(shè)置,而不是像使用行動(dòng)按鈕那樣來(lái)執(zhí)行命令。另外,直到用戶點(diǎn)擊行動(dòng)按鈕(例如“繼續(xù)”或“保存”等)被更改的設(shè)置才可生效。如果用戶點(diǎn)擊“返回”或“取消”按鈕,該頁(yè)面應(yīng)恢復(fù)初始狀態(tài),此時(shí)任何應(yīng)用了單選框的設(shè)置都會(huì)被清空。

如果單選框用于行動(dòng)決策,最好的處理方式是提前設(shè)計(jì)好不同的命令選項(xiàng),這樣用戶可只需要一次簡(jiǎn)單的交互即可完成正確的選擇。

單擊一下相應(yīng)的輸入選項(xiàng)即可完成

設(shè)計(jì)合理的選項(xiàng)順序

我們應(yīng)按一定邏輯給選項(xiàng)設(shè)計(jì)合理的排列順序,比如,根據(jù)發(fā)生的可能性、難易程度、風(fēng)險(xiǎn)大小來(lái)排序。需要注意的是,一般不推薦根據(jù)首字母排序的方法,因?yàn)檫@種方法太依賴語(yǔ)言且不合邏輯。

選項(xiàng)應(yīng)該易于理解且容易區(qū)分

單選框存在的一個(gè)大可用性問(wèn)題是選項(xiàng)中包含模糊、誤導(dǎo)、難懂的內(nèi)容,用戶一般很難理解。幫助文本可以減輕這個(gè)問(wèn)題,但最好還是可以使用戶可以任意嘗試任一交互控件。

始終提供一個(gè)默認(rèn)的選項(xiàng)

UI設(shè)計(jì)中的10項(xiàng)啟發(fā)式評(píng)估原則認(rèn)為,用戶可隨時(shí)撤銷他們的行為,這意味著應(yīng)該讓他們易于把UI控件恢復(fù)到原始狀態(tài)。這條準(zhǔn)則反映在單選框上,體現(xiàn)在至少有一個(gè)風(fēng)險(xiǎn)最小的選項(xiàng)要預(yù)先被選中(為防止數(shù)據(jù)丟失)。如果不考慮安全性這個(gè)主要因素,也可以把最易發(fā)生或最便捷的選項(xiàng)作為默認(rèn)選項(xiàng)。

如果用戶并不想做出明確的選擇,我們應(yīng)該為此提供選項(xiàng),比如“none”。為用戶預(yù)先選定一個(gè)清楚中立的選項(xiàng)好過(guò)讓他們從列表中尋找含義不明的選項(xiàng)做出選擇。

垂直展示列表

水平排列的單選框選項(xiàng)不易于用戶快速瀏覽定位。而且水平排列的形式使用戶難以對(duì)應(yīng)各選項(xiàng)的內(nèi)容,無(wú)法區(qū)分選中的是前一個(gè)還是后一個(gè)。所以垂直排列的設(shè)計(jì)方法是最安全的。

盡量保持垂直排列列表項(xiàng),并且每行只有一個(gè)選項(xiàng)。如果你仍需要在一行內(nèi)水平放置多個(gè)選項(xiàng),請(qǐng)確保利用空間分隔按鈕和標(biāo)簽,這樣每個(gè)選擇按鈕所對(duì)應(yīng)的標(biāo)簽就清晰了。比如,你應(yīng)該避免以下情況:這個(gè)例子很難分辨選擇選項(xiàng)4應(yīng)該單擊那個(gè)按鈕。

反例:水平的單選框

將整個(gè)標(biāo)簽選項(xiàng)作為點(diǎn)擊區(qū)域

單選框所占空間很小,所以,根據(jù)菲茨定律,它們很難被點(diǎn)擊。為了擴(kuò)大點(diǎn)擊區(qū)域,我們應(yīng)讓用戶不僅能點(diǎn)擊那個(gè)圓點(diǎn),還可以點(diǎn)擊整個(gè)選項(xiàng)。用戶可以通過(guò)點(diǎn)擊圓點(diǎn)和跟隨其后的選項(xiàng)完成選擇。

左邊:僅有紅色虛線的部分可點(diǎn) 右邊:點(diǎn)擊區(qū)域更大

在多鄰國(guó)app中,水平排列的單選框得到了很好的應(yīng)用:設(shè)計(jì)師采用了傳統(tǒng)的水平對(duì)齊方式,通過(guò)視覺(jué)手法把選項(xiàng)設(shè)計(jì)的清楚分明,又?jǐn)U大了點(diǎn)擊區(qū)域,更適用于在觸控設(shè)備上操作。

水平單選框的優(yōu)秀范例

使用單選框代替下拉列表

如果可能的話,使用單選框代替下拉列表菜單。單選框的認(rèn)知負(fù)荷很低,因?yàn)樗拿總€(gè)選項(xiàng)是可視的,所以用戶可以容易比較。

如果選項(xiàng)少于7個(gè),應(yīng)考慮使用單選框。用戶可以不需要任何點(diǎn)擊或輸入操作即可快速瀏覽選項(xiàng)的數(shù)量以及每個(gè)選項(xiàng)的內(nèi)容。

左邊:下拉列表中的性別 右邊:?jiǎn)芜x框中的性別

避免嵌套

使用單選框時(shí)應(yīng)盡量避免與其他單選框或checkbox嵌套。應(yīng)使所有選項(xiàng)保持平級(jí)以避免用戶混淆。

使用嵌套的單選框增加了復(fù)雜度

使用動(dòng)效和視覺(jué)反饋

良好的動(dòng)效設(shè)計(jì)使ux體驗(yàn)更加精致。例如在用戶界面中像單選框這種元素的動(dòng)效應(yīng)該更吸引眼球。視覺(jué)和動(dòng)效的應(yīng)用-例如增加清晰度,可以使用戶對(duì)界面的輸入效果立竿見(jiàn)影。

使用復(fù)選框的效果更好?

如果只有兩個(gè)選項(xiàng),我們可以使用復(fù)選框。但是,復(fù)選框只適用于打開或關(guān)閉一個(gè)選項(xiàng),而單選框可以用于完全不同的選擇。

復(fù)選框控件

如果兩種設(shè)計(jì)方案都可用,你應(yīng)該牢記以下不同的情況:

選擇:

當(dāng)清晰的checkbox表達(dá)的含義不夠明確時(shí),可以使用單選框。在下面的例子里,兩個(gè)選項(xiàng)意思相反,所以使用單選框的效果更好。

給文件選擇排列方式(橫向或縱向)

向?qū)В?/p>

在一個(gè)向?qū)ы?yè)面上,即使復(fù)選框是可用的,我們?nèi)匀恍枰褂脝芜x框來(lái)區(qū)分兩個(gè)不同的選項(xiàng)。默認(rèn)被選中的單選框設(shè)計(jì)可以為用戶提供明確的建議。默認(rèn)的選項(xiàng)可以引導(dǎo)用戶做出好選擇,并增強(qiáng)他們繼續(xù)完成任務(wù)的信心。

如果系統(tǒng)強(qiáng)推某個(gè)選項(xiàng),可以在選項(xiàng)旁增加“推薦”的標(biāo)簽 范例:DROPBOX

簡(jiǎn)單的回答“是”或“否”:

當(dāng)用戶面對(duì)一個(gè)簡(jiǎn)單的問(wèn)題,例如只需回答“是”還是“否”,此時(shí)使用復(fù)選框是正確的選擇。

結(jié)語(yǔ)

當(dāng)我們?cè)O(shè)計(jì)單選框時(shí),遵循設(shè)計(jì)標(biāo)準(zhǔn)很重要,因?yàn)檫@會(huì)培養(yǎng)用戶預(yù)知一個(gè)控件會(huì)起到什么作用、并且如何操作的能力。相反,違反設(shè)計(jì)標(biāo)準(zhǔn)會(huì)影響用戶界面的可信度--好比如果沒(méi)有警示信息,任何可怕的事都會(huì)發(fā)生。

設(shè)計(jì)時(shí)需用點(diǎn)心。單選框很容易通過(guò)紙面原型測(cè)試,如果用戶可以理解這個(gè)控件并能正確使用,你幾乎不需要費(fèi)多大力就可知道效果。

當(dāng)前標(biāo)題:想做好單選框的用戶體驗(yàn),這兒有10個(gè)技巧可以幫你
URL鏈接:http://m.rwnh.cn/news/46223.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站維護(hù)、用戶體驗(yàn)

廣告

聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)
象山县| 宜黄县| 永和县| 荣昌县| 长武县| 华池县| 深水埗区| 罗源县| 松阳县| 廊坊市| 四平市| 德钦县| 高密市| 鹰潭市| 增城市| 福建省| 大竹县| 顺昌县| 台江县| 无极县| 海安县| 台东市| 绥德县| 无为县| 漳州市| 兰溪市| 甘德县| 繁峙县| 宁都县| 阜平县| 霍城县| 广丰县| 宁武县| 成安县| 陆川县| 邓州市| 冕宁县| 浑源县| 扶沟县| 余江县| 夏河县|