人
已閱讀
已閱讀
APP表單中關(guān)于勾選框和開關(guān)的設(shè)計
來源:lexintech.com ?? ?? 發(fā)布時間:2019-05-17
在APP開發(fā)中,表單是經(jīng)常要碰到的界面,在創(chuàng)建表單時,交互設(shè)計師總是會面臨一個選擇,選用哪種UI元素來表示可選項的操作。今天我們來討論一下。
可選項可以用勾選框、開關(guān)、單選框和下拉菜單表示。選擇得當(dāng)?shù)脑?,任何一種都非常出色。本文中,我們重點關(guān)注勾選框和開關(guān)。
勾選框用在一系列選項中,用戶可以選擇任意數(shù)量,包括0個、1個,或者許多個。換言之,每個勾選框在列表中都是相互獨立的,勾上一個框并不會取消其他選項。
開關(guān)組件是在仿照物理開關(guān),讓用戶打開或關(guān)閉某個項目。
開關(guān)提供了兩種簡單直接的對立選項
開關(guān)組件通常用于表現(xiàn)一個動作(例如開始或停止某個操作),它類似于電燈開關(guān)。
勾選框應(yīng)當(dāng)是一個小方框,選中時有一個勾,或者一個叉。
開關(guān)組件是在仿照物理開關(guān),讓用戶打開或關(guān)閉某個項目。
開關(guān)提供了兩種簡單直接的對立選項
開關(guān)組件通常用于表現(xiàn)一個動作(例如開始或停止某個操作),它類似于電燈開關(guān)。
勾選框應(yīng)當(dāng)是一個小方框,選中時有一個勾,或者一個叉。
縱向展示列表,每行一個選項。這對于開關(guān)和勾選框都有效。如果一定要橫向排列,一行有多個選項,就要調(diào)整好按鈕和標(biāo)簽的距離,哪個選項對應(yīng)哪個標(biāo)簽清晰明了。
開關(guān)的當(dāng)前狀態(tài)應(yīng)該在控件外面,設(shè)計開關(guān)時,你應(yīng)該避免狀態(tài)和操作的歧義。我們以iOS6的開關(guān)設(shè)計為例,注意看寫著ON的藍(lán)色狀態(tài)按鈕。
并不能確定標(biāo)簽(例子中是“ON”)是指當(dāng)前狀態(tài),還是按下的操作。
你能判斷按鈕當(dāng)前是開著的嗎,或者拖動滑塊、點擊、點按時會開啟?“ON”在這里是個狀態(tài)(名詞)還是動作(動詞)?并不清楚。
不應(yīng)該讓用戶感到困惑,區(qū)分出操作和狀態(tài)非常重要。實際上,高亮顯示當(dāng)前狀態(tài),能夠讓它更加友好。
你能判斷按鈕當(dāng)前是開著的嗎,或者拖動滑塊、點擊、點按時會開啟?“ON”在這里是個狀態(tài)(名詞)還是動作(動詞)?并不清楚。
不應(yīng)該讓用戶感到困惑,區(qū)分出操作和狀態(tài)非常重要。實際上,高亮顯示當(dāng)前狀態(tài),能夠讓它更加友好。
文字顏色表明了現(xiàn)在的狀態(tài)(亮起的是ON)
勾選框使用肯定的文案
使用肯定、有效的文案作為勾選框的標(biāo)簽,用戶就很清楚如果勾上選框會發(fā)生什么。避免“不要給我發(fā)郵件”這樣的否定文案,這就意味著用戶要勾上選框來阻止某些事發(fā)生。
勾選框使用肯定的文案
使用肯定、有效的文案作為勾選框的標(biāo)簽,用戶就很清楚如果勾上選框會發(fā)生什么。避免“不要給我發(fā)郵件”這樣的否定文案,這就意味著用戶要勾上選框來阻止某些事發(fā)生。
勾選框永遠(yuǎn)都應(yīng)該使用肯定的指令,不能用否定文案,例如“請勿……”
勾選框使用Label標(biāo)簽,增大操作區(qū)域。
所有的勾選框都有標(biāo)簽,但并非都使用label標(biāo)簽。勾選框本質(zhì)上很小,但是根據(jù)費茨定律,它們就很難點擊或者點按。要增大操作區(qū)域,讓用戶在點擊或點按標(biāo)簽與相關(guān)文字時就能選中選項,而不僅僅是那個小方框。
勾選框使用Label標(biāo)簽,增大操作區(qū)域。
所有的勾選框都有標(biāo)簽,但并非都使用label標(biāo)簽。勾選框本質(zhì)上很小,但是根據(jù)費茨定律,它們就很難點擊或者點按。要增大操作區(qū)域,讓用戶在點擊或點按標(biāo)簽與相關(guān)文字時就能選中選項,而不僅僅是那個小方框。
讓用戶通過點擊方框或它的標(biāo)簽來選中選項
勾選框只用來改變設(shè)置,不能作為操作按鈕
作為一個二元選擇,勾選框和開關(guān)的主要區(qū)別,是勾選框是狀態(tài),而開關(guān)是操作。如果一個操作適合用物理開關(guān)表示,那么開關(guān)可能就是最適合的控件。
下面的例子很明顯,在開關(guān)中,無線網(wǎng)絡(luò)是開著的。但在勾選框里,用戶還需要思考無線網(wǎng)絡(luò)是否開啟,是否需要勾選這個框來開啟無線網(wǎng)絡(luò)。
勾選框只用來改變設(shè)置,不能作為操作按鈕
作為一個二元選擇,勾選框和開關(guān)的主要區(qū)別,是勾選框是狀態(tài),而開關(guān)是操作。如果一個操作適合用物理開關(guān)表示,那么開關(guān)可能就是最適合的控件。
下面的例子很明顯,在開關(guān)中,無線網(wǎng)絡(luò)是開著的。但在勾選框里,用戶還需要思考無線網(wǎng)絡(luò)是否開啟,是否需要勾選這個框來開啟無線網(wǎng)絡(luò)。
設(shè)計界面時,交互元素的選擇要保持一致、可預(yù)期。遵循設(shè)計標(biāo)準(zhǔn),能讓用戶更好預(yù)測控件的功能、如何操作。相反,違背標(biāo)準(zhǔn)會讓界面感覺很脆弱——好像會毫無預(yù)兆發(fā)生任何事情。