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

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

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

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

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

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

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

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

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

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

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

也就是說，“取消”在左邊還是在右邊，要看這個操作是否有危險。之所以在有危險時，把“取消”放在右邊，是因為右邊的位置更方便手指操作（單手握手機時），這樣可以避免用戶由于誤操作帶來的嚴(yán)重后果。

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

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

總結(jié)：

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

2.警示框中，不要同時突出兩個按鈕

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

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

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

作者：legene

文章來源：legene的交互設(shè)計博客

標(biāo)簽： 警示 

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