




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
1、Checkbox和Toggle在設(shè)計中的應(yīng)用創(chuàng)建表格的時候,交互設(shè)計師常常面臨著要去選擇一種UI元素,作為表格中“選項”的交互方式。當(dāng)然,我們也需要去遵守設(shè)計準(zhǔn)則。盡管如此,這里也有一些結(jié)論值得你記在心里:你想選擇哪種元素作為你的選項操作方式。 選項操作方式的選擇可以通過使用Checkboxes、Toggles、Radio buttons、Drop-downs這些來進(jìn)行選擇。只要你能正確使用它們,它們就是非常棒的。在本文中我們會講訴Chexkboxes和Toggles這兩種選項操作方式在設(shè)計中的應(yīng)用。Checkboxes 當(dāng)列表里面有一系列信息需要用戶去選擇的時候,這里就需要使用Checkbo
2、xes。換句話來說就是每一個選項都是獨立存在的,你選擇了其中一個就不需要去選擇其他的。 Checkboxes的標(biāo)簽Toggles Toggles就像現(xiàn)實生活中的開關(guān),它允許用戶去打開或者關(guān)閉。 它提供了兩種截然相反的選擇Toggle一般表示一個動作(比如:開始或者停止一件事情)。比如燈的開關(guān)。 Toggles 常常被應(yīng)用于燈的開關(guān)Checkboxes和toggles的最佳應(yīng)用 用標(biāo)準(zhǔn)的可視化表示Checkboxes是一個小的正方形,且允許被標(biāo)記。(選擇的狀態(tài)) Checkbox被選中和未被選中的狀態(tài)。 圖片來源于:MaterialDesignToggle看起來像一個開/關(guān)的開關(guān)。(操作的動作)
3、 Toggle被選中和未被選中的狀態(tài)。圖片來源于:Material Design用戶在使用選項操作的時候,應(yīng)該為他們提供清晰的視覺反饋信息。即使微妙的動畫也會讓用戶感覺到它的獨特即使對于在手機(jī)上的移動APP,這些UI控件也是實實在在存在的。 Ios7/8的Toggle按鈕。來源于:Dribbble垂直設(shè)計你的列表 盡量使用垂直的列表,保證每一行只有一個選擇。這個準(zhǔn)則適用于Toggles和Checkboxes.如果你必須在一行里面使用很多種選擇,那你要確保讓用戶清楚按鈕和文字標(biāo)簽的關(guān)系。下面的例子就是元素之間相隔太近了: 很難選擇到對應(yīng)的單選按鈕 Toggle的當(dāng)前狀態(tài)應(yīng)該能馬上看見 在你設(shè)計T
4、oggles的時候,你要避免它的操作和當(dāng)前狀態(tài)讓用戶不明白。我們使用IOS 6的開關(guān)設(shè)計作為一個例子,在下圖當(dāng)中,藍(lán)色狀態(tài)意味著開著的狀態(tài)。 上圖這種方式不是很清楚這個標(biāo)簽的狀態(tài),“on”是當(dāng)前狀態(tài)還是需要你去操作 你能說出開關(guān)“ON”是當(dāng)前的狀態(tài)嗎?如果你把這個按鈕移動/點擊/滑動到另一邊了?”O(jiān)N”是告訴你現(xiàn)在的狀態(tài),還是告訴你需要移動/點擊/滑動這個操作的一個指示?我們大家都不是很清楚。 操作和狀態(tài)應(yīng)該有很明顯的區(qū)別,而你不應(yīng)該讓用戶對此感到迷惑。實際上,可以通過強調(diào)當(dāng)前狀態(tài)來提高用戶體驗: 文字的顏色表明當(dāng)前的狀態(tài)(顏色變亮就是ON)使用肯定的語言作為checkbox的標(biāo)簽 使用肯定的
5、語言作為checkbox的標(biāo)簽,以便用戶打開checkbox的時候清楚發(fā)生了什么事情。避免使用否定式語言的標(biāo)簽,比如“不要給我發(fā)送郵件”這意味著用戶不得不去點擊checkbox以防這件事發(fā)生。 Checkboxes應(yīng)該使用肯定的語言,而不是否定的語言 讓Checkbox的點擊目標(biāo)范圍擴(kuò)大 所有的checkboxes都有標(biāo)簽,但并不是所有的都能點擊標(biāo)簽。Checkboxes能點擊的區(qū)域是非常小的,根據(jù)菲茨定律,這樣小的區(qū)域是很難被用戶點中的。為了讓用戶方便去點擊,可以把這個點擊區(qū)域擴(kuò)大,比如說點擊這個選項的標(biāo)簽或者相應(yīng)的文字一樣能夠選中某個區(qū)域。 讓你的用戶通過點擊它的標(biāo)簽或者checkbox也
6、能被選中使用checkboxes作為設(shè)置選項,而不是作為操作按鈕 checkbox和toggle開關(guān)的主要區(qū)別就是:checkboxes是一種狀態(tài),而toggle開關(guān)是一種操作(動作)。假如需要使用執(zhí)行某種操作的開關(guān),那么Toggle開關(guān)是最好的選擇。 在下圖的例子中,當(dāng)把WIFI的開關(guān)設(shè)置成“打開”狀態(tài)的時候,使用Toggle是最清楚的了。但是如果使用Checkbox開關(guān)的話,用戶需要思考當(dāng)前狀態(tài)WIFI是打開的,還是需要去點擊才能讓W(xué)IFI打開了。 使用Toggle開關(guān)能讓用戶明白當(dāng)前狀態(tài)是開還是關(guān),比如WIFICheckbox和Toggle的交互 Checkbox和Toggle在交互上有些不同就是, 使用checkbox可以延遲它的時間(比如說,在表格里,即使勾選了Checkbox,也需要你點擊提交按鈕,才會有反饋),而使用toggle會立馬有反饋。 使用Toggle這種的用戶體驗會非常好,它不需要你按下一個操作后,還要去做“保存”的操作或者說返回到前一級菜單去操作,所操作即所得。就像我們在現(xiàn)實生活中使用家里的開關(guān)一樣,你把燈的開關(guān)打開了,燈就亮了。 ios上的WIFI被打開了而在使用checkbox的時候,用戶需要操作其他操作才會有效。 用戶必須點擊“提交”或者“下一步”按鈕,他
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2030中國甑炭行業(yè)需求動態(tài)及發(fā)展前景研究報告
- 點菜技巧培訓(xùn)
- 新人法律培訓(xùn)
- 商業(yè)成功背后的學(xué)生動機(jī)分析
- 校園智慧體育設(shè)施的建設(shè)現(xiàn)狀及挑戰(zhàn)
- 情緒智力在教育心理學(xué)中的核心地位
- 醫(yī)療行業(yè)中的科技應(yīng)用與師資培訓(xùn)模式研究
- 商業(yè)環(huán)境下的教育創(chuàng)新與青少年運動培訓(xùn)的融合研究
- 教育游戲化的策略與方法探討
- 學(xué)生心理特點與教學(xué)方法的匹配研究
- 全同態(tài)加密算法概述
- 【酒店管理系統(tǒng)的設(shè)計與開發(fā)(論文)】
- 電流、電壓指針儀表校驗報告
- 六年級下冊英語素材-Unit-6-General-revision-3-知識點-人教精通版
- 2023年云南玉溪市直事業(yè)單位選調(diào)45人筆試備考試題及答案解析
- BS2000標(biāo)準(zhǔn)操作規(guī)程
- 中等職業(yè)學(xué)校英語課程標(biāo)準(zhǔn)(2020年版)(word精排版)
- 毛絨玩具驗貨報告 格式
- 小學(xué)學(xué)校教務(wù)處年終工作總結(jié)以及計劃PPT模板下載
- GB/T 20319-2017風(fēng)力發(fā)電機(jī)組驗收規(guī)范
- GB/T 18391.4-2009信息技術(shù)元數(shù)據(jù)注冊系統(tǒng)(MDR)第4部分:數(shù)據(jù)定義的形成
評論
0/150
提交評論