前幾天偶爾看了一款觸屏產(chǎn)品的GUI設(shè)計(jì)，發(fā)現(xiàn)了一個(gè)問題。下圖是某個(gè)應(yīng)用的開關(guān)，你能看明白嗎？

“on”表示的是當(dāng)前狀態(tài)是“開”，還是表示當(dāng)前狀態(tài)是關(guān)，點(diǎn)擊后打開呢？

“off”表示的是當(dāng)前狀態(tài)是“關(guān)”，還是表示當(dāng)前狀態(tài)是開，點(diǎn)擊后關(guān)閉呢？

圖一

下面是iphone的GUI中的開關(guān)，展現(xiàn)的很清楚。

“on”表示的是狀態(tài)，即當(dāng)前為“開”，點(diǎn)擊后會關(guān)閉

“off”表示的是狀態(tài)，即當(dāng)前為“關(guān)”，點(diǎn)擊后會打開

圖二

出現(xiàn)這種問題在于設(shè)計(jì)者沒有考慮到視覺傳達(dá)（開和關(guān)都是藍(lán)色，用戶無法進(jìn)行判斷），只是照著葫蘆畫瓢，仿制ipone的GUI。因?yàn)闆]有把握到本質(zhì)問題，反而出現(xiàn)了嚴(yán)重的可用性問題。

要說清楚這個(gè)問題，關(guān)鍵不在于視覺傳達(dá)，而在于交互設(shè)計(jì)中，對按鈕類型的定義。所有的按鈕都可以分為以下兩個(gè)大類：

表示當(dāng)前狀態(tài)：即當(dāng)前的按鈕表示的是當(dāng)前的狀態(tài)，點(diǎn)擊后會切換到另一個(gè)狀態(tài)。下圖的單選按鈕和復(fù)選框就是典型的表示狀態(tài)的按鈕。

圖三

表示功能：即當(dāng)前的按鈕表示的是某一種功能，點(diǎn)就后就會激活這個(gè)功能。下圖的播放、暫停和停止就是典型的表示功能的按鈕。

圖四

出于使用習(xí)慣，在設(shè)計(jì)時(shí)會將兩個(gè)（或多個(gè)）相反的功能設(shè)計(jì)成為一個(gè)按鈕，例如“播放和暫停”、“選中和未選中”、“打開和關(guān)閉”等。在設(shè)計(jì)時(shí)就要充分考慮到如何進(jìn)行恰當(dāng)?shù)囊曈X傳達(dá)，使用戶很容易的區(qū)分出當(dāng)前按鈕到底是表達(dá)功能，還是表達(dá)狀態(tài)。

在圖二中，蘋果的開關(guān)設(shè)計(jì)，很巧妙。它使用顏色的習(xí)慣用法（與彩色搭配時(shí)，一般灰色表示未選中、取消、關(guān)閉等意思）來表達(dá)出按鈕上的文字“on”和“off”是狀態(tài)，而不是功能。

在設(shè)計(jì)按鈕時(shí)，一定要明確的傳達(dá)出按鈕到底是表示功能還是狀態(tài)。圖五是最常見的設(shè)計(jì)方法。

圖五

文章來源：blog.sina.com.cn/mingqin1

標(biāo)簽： 交互設(shè)計(jì) 按鈕設(shè)計(jì) 產(chǎn)品設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。