有一次我無(wú)意中發(fā)現(xiàn)了這樣的警示彈出框樣式（左邊是iPhone客戶端的，右邊是Android客戶端的），那一剎那，我真的被雷到了。

我告訴視覺(jué)設(shè)計(jì)師，“取消”和“確定”應(yīng)該在樣式上有所區(qū)別（我有點(diǎn)無(wú)奈，因?yàn)槲矣X(jué)得這是常識(shí)），并讓他認(rèn)真參考一下iPhone的原生樣式（如下圖）。

之后，改成了這個(gè)樣子（左邊是iPhone客戶端的，右邊是Android客戶端的）。

我依然不太滿意，但我沒(méi)想到的是，Android的開發(fā)人員也不滿意了，他們跟我說(shuō)：“現(xiàn)在這樣子太丑了，我們一致認(rèn)為之前的那個(gè)樣子非常好，強(qiáng)烈要求改回去”。我再次被雷擊中……

經(jīng)過(guò)思考，我才理清了發(fā)生這種現(xiàn)象的原因：

這就要從iPhone和Android的平臺(tái)差異說(shuō)起了。對(duì)于iPhone來(lái)說(shuō)，紅色一般代表著警戒和刪除。所以如果要自定義操作按鈕樣式的話，記得慎用紅色。即使不考慮iPhone的這個(gè)特征，警示彈框內(nèi)也盡量不要出現(xiàn)兩個(gè)突出的顏色，這樣會(huì)使人不安，且分不清重點(diǎn)。

所以最初的警示框樣式是肯定不適合iPhone的，那為什么Android開發(fā)卻可以接受呢？

和Windows系統(tǒng)一樣，Android的彈窗也是固定把“確定”（或積極意義的操作）放到左邊，把“取消”（或消極意義的操作）放到右邊。從圖中我們也可以看到，兩個(gè)按鈕都是灰色的，在樣式上并沒(méi)有區(qū)分。但用戶并不會(huì)感到操作上的困惑，因?yàn)槲覀冊(cè)缫蚜?xí)慣了這種樣式。我想這就是Android的開發(fā)人員在看到左右按鈕樣式一致的時(shí)候不感到奇怪的原因吧。至于他們認(rèn)為紅色好看，我猜測(cè)也許是因?yàn)榘沧康脑�生樣式太過(guò)清淡吧，添點(diǎn)色彩反而讓人覺(jué)得眼前一亮（雖然我不是這么認(rèn)為的）。

當(dāng)然如果能改良一下，會(huì)更好。但即使不改，由于這種操作順序的固定性，用戶也不會(huì)感到困惑。

但iPhone就不一樣了。我們來(lái)看《iPhone Human Interface Guidelines》中的一段話：

警示框上有兩個(gè)按鈕時(shí)，左邊的按鈕通常使用深色，而右邊的按鈕從不使用深色。如操作有潛在危險(xiǎn)時(shí)，“取消”按鈕應(yīng)該在右邊并使用淺色；如操作沒(méi)危險(xiǎn)時(shí)，“取消”按鈕應(yīng)該在左邊并使用深色。

也就是說(shuō)，“取消”在左邊還是在右邊，要看這個(gè)操作是否有危險(xiǎn)。之所以在有危險(xiǎn)時(shí)，把“取消”放在右邊，是因?yàn)橛疫叺奈恢酶�方便手指操作（單手握手機(jī)時(shí)），這樣可以避免用戶由于誤操作帶來(lái)的嚴(yán)重后果。

這本來(lái)是個(gè)非常人性化的設(shè)計(jì)，但也同時(shí)增加了混淆的風(fēng)險(xiǎn)（用戶可能下意識(shí)的認(rèn)為左邊的都是“取消”操作）。不過(guò)好在左右的按鈕樣式上有區(qū)分，可以幫助用戶識(shí)別按鈕的優(yōu)先級(jí)。因此設(shè)計(jì)師如果要自行設(shè)計(jì)警示框的樣式時(shí)，一定要區(qū)別左右按鈕的樣式，讓右邊的按鈕更醒目些。

另外再說(shuō)句題外話，也是我以前犯過(guò)的小錯(cuò)誤：文案中盡量不要出現(xiàn)“取消”的字樣，否則的話會(huì)有一點(diǎn)點(diǎn)小歧義。比如新浪微薄的取消關(guān)注功能，點(diǎn)擊“取消”是取消這個(gè)操作，還是取消關(guān)注呢？

總結(jié)：

1.iPhone普通操作按鈕及提示文字慎用紅色

2.警示框中，不要同時(shí)突出兩個(gè)按鈕

3.Android警示框，保持“確定”在左邊，“取消”在右邊；但iPhone不一定

4.iPhone警示框中，左右按鈕在樣式上要有所區(qū)別（右邊的更加明顯）

5.警示框文案中盡量不出現(xiàn)“取消”字樣

作者：legene

文章來(lái)源：legene的交互設(shè)計(jì)博客

標(biāo)簽： 警示 

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