設(shè)計(jì)對(duì)話框的時(shí)候，設(shè)計(jì)師很常碰到的問(wèn)題就是「ok」跟「取消」兩個(gè)按鈕要怎麼擺。

「ok」鈕是完成使用者動(dòng)作的最關(guān)鍵；「取消」也同樣重要，因?yàn)榭梢詣倓偟膭?dòng)作復(fù)原，回到原來(lái)的頁(yè)面，防止犯錯(cuò)。根據(jù)上述的功能，要怎麼決定它們擺放的順序才是最好的呢？到底誰(shuí)在左邊誰(shuí)在右邊？

• 照慣例嘛，好不好？

很多人都覺(jué)得就照慣例來(lái)吧，但真的可以嗎？

慣例無(wú)法解決這個(gè)問(wèn)題。其實(shí)要大家遵照慣例設(shè)計(jì)順序，是因?yàn)橐屖褂谜哂幸恢碌捏w驗(yàn)；一致的體驗(yàn)在設(shè)計(jì)界是個(gè)滿熱門(mén)的詞，也可能導(dǎo)致一種盲點(diǎn)，蒙蔽大家深刻思考使用者真正碰到的問(wèn)題。如果大家都不明白慣例從何而來(lái)，那又如何知道遵守這慣例有什麼好處？如果這個(gè)慣例對(duì)使用者並沒(méi)有好處要怎麼辦呢？

當(dāng)然我們有一些設(shè)計(jì)慣例是被廣泛使用的，但這裡的重點(diǎn)是UI設(shè)計(jì)師不應(yīng)該被限制住，必須要能更深入看待問(wèn)題，了解設(shè)計(jì)背後的理由。

• 視覺(jué)份量、標(biāo)示很重要，如同順序

要讓按鈕更明顯的話，可以加強(qiáng)文字的視覺(jué)份量（例如使用加粗的文字），或者使用特別的標(biāo)示（例如顏色）。而針對(duì)這兩項(xiàng)傳統(tǒng)來(lái)說(shuō)，大家覺(jué)得比「順序」重要許多；可是視覺(jué)份量與標(biāo)示雖然重要，如果忽略了順序，設(shè)計(jì)就不完整。

• 「ok」應(yīng)該放在右邊

要仔細(xì)分析這個(gè)問(wèn)題，其實(shí)需要先看設(shè)計(jì)師們常有的假設(shè)是否站得住腳。

有些設(shè)計(jì)師相信把第一順位的「確認(rèn)」鈕放在左邊，也就是在第二順位的「取消」前面對(duì)使用者是比較好的，因?yàn)檫@樣比較先看到「確認(rèn)」，可以花比較少時(shí)間按。聽(tīng)起來(lái)也許有道理，但不能忽略使用者在決定要按什麼鈕之前，會(huì)先把所有的選項(xiàng)看過(guò)。

這代表大部分的使用者不會(huì)盲目的只按在左邊的（第一順位）按鈕，而不注意到在左邊的（第二順位）按鈕。在視覺(jué)上，很明顯就是一個(gè)在左邊，一個(gè)在右邊。然後他們就會(huì)把眼睛移回到左邊的按鈕然後按下去，這樣一來(lái)，就有三次的眼球動(dòng)作。

當(dāng)「ok」放在左邊，視覺(jué)方向比較複雜。

?OK按鈕放在右邊，視覺(jué)方向就一致了。

比較「ok」放在左邊跟右邊的效果：若把「ok」放右邊，就只有兩個(gè)視覺(jué)定點(diǎn)與一種視覺(jué)方向，視覺(jué)流動(dòng)的速度就快許多。但如果放在左邊，會(huì)讓使用者比較比較容易按，但的確就會(huì)造成三個(gè)視覺(jué)定點(diǎn)，兩個(gè)視覺(jué)方向。所以把「ok」放在右邊的確會(huì)讓使用者的速度快很多。

• 設(shè)計(jì)要與經(jīng)驗(yàn)一致

當(dāng)使用者按「取消」的時(shí)候，他們不會(huì)預(yù)期有什麼動(dòng)作，只是會(huì)回到原來(lái)的頁(yè)面而已。

所以，「取消」按鈕就像是「上一頁(yè)」一樣；但當(dāng)使用者按了「ok」，就會(huì)期待接下來(lái)會(huì)如同按鈕上說(shuō)的，把他們帶到下一個(gè)頁(yè)面。所以「ok」就像是「下一步」一樣。

把「上一頁(yè)」放在左邊，「下一步」放在右邊，其實(shí)也配合了使用者的心智模式，是他們可以預(yù)期的動(dòng)作。把使用者帶到下一步的按鈕放在右邊，到上一步的在左邊，這種順序有邏輯的原因就是它符合使用者的左到右閱讀習(xí)慣，右邊代表的是向前，而左邊代表的是後退。

下圖的「ok」鈕把使用者帶往「下一步」，而取消就是回到原來(lái)的視窗。

• ?提供使用者更流暢的流程：放在右下的按鈕相當(dāng)於是結(jié)束區(qū)

放在右下角的按鈕會(huì)讓使用者比較好按，是因?yàn)檫@遵守了Gutenberg diagram，也就是下面圖片所展示的「閱讀重力(reading gravity)」流向。

在Gutenberg diagram裡面，放在右下的按鈕相當(dāng)於是結(jié)束區(qū)，也就是使用者視覺(jué)瀏覽方向的最後一站，放在這個(gè)位置能讓使用者了解最後一件要做的事是什麼。

這不僅改進(jìn)了視覺(jué)方向的複雜度，也改善了使用流程。使用者瀏覽的時(shí)候不用再跳過(guò)「ok鈕」，因?yàn)樵谝曈X(jué)的最後一站就會(huì)剛好看到它，所以就可以立刻按下去，進(jìn)到下一步。

下圖這種對(duì)話框就比較方便瀏覽，因?yàn)橐暰€會(huì)直接停留在「ok」鈕

• 要分開(kāi)還是一起？

還有個(gè)設(shè)計(jì)師常常思考的問(wèn)題是：要把兩個(gè)都放在右下角，還是一個(gè)放左下，一個(gè)放右下？

當(dāng)你把兩個(gè)按鈕各放在兩邊角落時(shí)，也同樣能與「上一頁(yè)」「下一步」的使用習(xí)慣配對(duì)。但是，因?yàn)椤竜k」與「取消」按鈕並不完全是像「上一頁(yè)」「下一步」那樣的流程鈕，所以這樣做並沒(méi)有必要，而且壞處可能比好處多。

下圖這樣的擺放造成過(guò)大的視覺(jué)距離，讓人難以比較兩個(gè)按鈕。但在某些狀況中，我們需要衡量按這些鈕會(huì)發(fā)生什麼事情是。

如果要執(zhí)行的是重要的動(dòng)作，而且無(wú)法修改，那把「取消」跟「ok」放在一起是很重要的。

在這個(gè)情況裡，「取消」按鈕就像是「上一步」，但比「上一步」更重要，因?yàn)槟歉且粋€(gè)「安全鈕」，可以防止任何不理想的改變。如果把「取消」分開(kāi)放在左下，會(huì)造成的危險(xiǎn)是使用者可能會(huì)忽略「取消」這個(gè)選項(xiàng)，因?yàn)榕c「ok」隔得太遠(yuǎn)。把兩個(gè)按鈕放在一起可以讓使用者一次看到有兩個(gè)按鈕。這就能讓他們更有效率的比較兩個(gè)按鈕，一眼就看出要採(cǎi)取什麼行動(dòng)。

• 結(jié)論：放哪裡很重要

這種對(duì)話框經(jīng)常被使用，尤其是在有重要訊息需要使用者詳細(xì)閱讀的時(shí)候，或是在需要執(zhí)行重要?jiǎng)幼鞯臅r(shí)候。在這種情況下，放置按鈕的順序?qū)?huì)影響使用者會(huì)採(cǎi)取什麼動(dòng)作。正確的順序擺位能讓資訊更清楚。當(dāng)資訊夠清楚，就可以防止使用者因?yàn)榘村e(cuò)鈕而造成嚴(yán)重錯(cuò)誤。

（資料來(lái)源：UXmovement；圖片來(lái)源：?maskedcard, CC Licensed）