2025-7-4 杰睿 設(shè)計(jì)思維
設(shè)計(jì)師經(jīng)常會(huì)思考對(duì)話(huà)框中“確定”和“取消”按鈕應(yīng)該放在哪里。“確定”按鈕是完成任務(wù)的主要操作。
“取消”按鈕是輔助操作，可以讓用戶(hù)返回到原始屏幕而不完成任務(wù)。根據(jù)它們的功能，最佳的放置順序是什么？“確定”按鈕應(yīng)該放在“取消”按鈕之前還是之后？
許多人認(rèn)為遵循平臺(tái)慣例是解決問(wèn)題的答案。雖然這看起來(lái)像是解決問(wèn)題的辦法，但實(shí)際上并非如此。它沒(méi)有回答哪種布局對(duì)用戶(hù)更有利以及原因。僅僅為了保持一致性而遵循平臺(tái)慣例的建議根本不夠好，只會(huì)讓設(shè)計(jì)師徒勞無(wú)功。
“一致性”是設(shè)計(jì)師們常用的詞。它也是人們不深入思考用戶(hù)面臨的設(shè)計(jì)問(wèn)題的常見(jiàn)借口。如果連設(shè)計(jì)慣例存在的意義都不知道，遵循它又有什么意義呢？
如果某種設(shè)計(jì)慣例對(duì)用戶(hù)有害怎么辦？設(shè)計(jì)師是否應(yīng)該為了保持一致性而盲目遵循它？是否應(yīng)該因?yàn)樵O(shè)計(jì)師想要將平臺(tái)設(shè)計(jì)一致性作為解決所有問(wèn)題的答案而將糟糕的設(shè)計(jì)實(shí)踐延續(xù)下去？
如今，某些平臺(tái)設(shè)計(jì)慣例被廣泛使用，因?yàn)樗鼈儗?duì)用戶(hù)有用。但這里的重點(diǎn)是，平臺(tái)設(shè)計(jì)的一致性永遠(yuǎn)不應(yīng)成為設(shè)計(jì)師做某事的唯一理由。理解為什么應(yīng)該以某種方式設(shè)計(jì)用戶(hù)界面而不是另一種方式是關(guān)鍵。
有人可能會(huì)認(rèn)為，通過(guò)增加操作按鈕的視覺(jué)重量和清晰的標(biāo)簽使其更加突出，比其位置更重要。雖然操作按鈕的視覺(jué)重量和標(biāo)簽是需要考慮的重要設(shè)計(jì)方面，但并非唯一的方面。
只關(guān)注一個(gè)設(shè)計(jì)方面而忽略其他方面，是粗心大意的設(shè)計(jì)師的表現(xiàn)。一個(gè)一絲不茍的設(shè)計(jì)師會(huì)思考每個(gè)設(shè)計(jì)方面如何影響用戶(hù)。而主要操作和次要操作的布局，正是設(shè)計(jì)師最難搞清楚的。這就是為什么“確定”/“取消”按鈕的爭(zhēng)論在設(shè)計(jì)師中如此普遍。
當(dāng)你克服了平臺(tái)慣例的爭(zhēng)論后，你會(huì)質(zhì)疑哪種布局效果最好。你可以通過(guò)分析設(shè)計(jì)如何影響用戶(hù)來(lái)解決這個(gè)問(wèn)題。
有必要驗(yàn)證設(shè)計(jì)師們常見(jiàn)的假設(shè)是否正確。一些設(shè)計(jì)師認(rèn)為，將主要操作放在左側(cè)次要操作之前對(duì)用戶(hù)更有利，因?yàn)樽髠?cè)操作更靠近用戶(hù)，因此點(diǎn)擊時(shí)間更短。
這很有道理，但你不能忽視一個(gè)事實(shí)：用戶(hù)在選擇操作之前會(huì)查看所有選項(xiàng)。這意味著大多數(shù)用戶(hù)不會(huì)盲目點(diǎn)擊主要操作按鈕，而不查看旁邊的次要操作按鈕。
他們會(huì)先看到左側(cè)的主要操作，然后再看右側(cè)的次要操作。之后，他們會(huì)將目光移回主要操作并點(diǎn)擊它。這會(huì)在多個(gè)方向上形成總共三個(gè)視覺(jué)注視點(diǎn)。
左側(cè)有“確定”按鈕，視覺(jué)注視點(diǎn)更多，并流向多個(gè)方向
使用右側(cè)的“確定”按鈕，視覺(jué)注視點(diǎn)減少，并流向一個(gè)方向
將其與位于對(duì)話(huà)框右側(cè)、次要操作位于左側(cè)的按鈕進(jìn)行比較。用戶(hù)的視線(xiàn)首先停留在次要操作上，然后移至主要操作并點(diǎn)擊按鈕。這在一個(gè)方向上產(chǎn)生了總共兩次視覺(jué)注視，從而為用戶(hù)提供了更快的視覺(jué)流。
用戶(hù)只會(huì)在每個(gè)按鈕上注視一次，最終停留在主要操作按鈕上。將主要操作按鈕放在左側(cè)或許能讓用戶(hù)更容易觸及，但從用戶(hù)的思維過(guò)程和視覺(jué)注視角度來(lái)看，將主要操作按鈕放在對(duì)話(huà)框右側(cè)實(shí)際上會(huì)更快。
當(dāng)用戶(hù)點(diǎn)擊輔助操作按鈕時(shí)，他們希望應(yīng)用程序不執(zhí)行任何操作，并返回到原始屏幕。因此，“取消”按鈕的功能類(lèi)似于“返回”按鈕。
當(dāng)用戶(hù)點(diǎn)擊主要操作按鈕時(shí)，他們期望應(yīng)用程序執(zhí)行按鈕指示的操作，并將他們帶到下一個(gè)屏幕。因此，“確定”按鈕的功能類(lèi)似于“下一步”按鈕。將次要操作按鈕放在左側(cè)，將主要操作按鈕放在右側(cè)，可以映射用戶(hù)期望的“上一步”和“下一步”按鈕的功能。
這與分頁(yè)按鈕的放置方式類(lèi)似。將用戶(hù)帶到下一頁(yè)的按鈕位于右側(cè)，將用戶(hù)帶回上一頁(yè)的按鈕位于左側(cè)。這種按鈕放置方式之所以有效，是因?yàn)樗c用戶(hù)從左到右的閱讀和導(dǎo)航方向相呼應(yīng)，其中右側(cè)是前進(jìn)方向，左側(cè)是后退方向。
“確定”可讓用戶(hù)前進(jìn)到下一個(gè)屏幕，“取消”可讓用戶(hù)返回到原始屏幕
對(duì)話(huà)框中的“確定”和“取消”按鈕應(yīng)遵循類(lèi)似的交互模式，因?yàn)樗鼈兊墓δ茴?lèi)似于分頁(yè)按鈕。不僅如此，左右方向的模式也符合西方用戶(hù)習(xí)慣。將主要操作放在右側(cè)，將次要操作放在左側(cè)，將使對(duì)話(huà)框按鈕更容易、更直觀地被用戶(hù)理解。
對(duì)話(huà)框右下角的按鈕更容易被用戶(hù)點(diǎn)擊，因?yàn)樗裱斯膨v堡圖表。在古騰堡圖表中，右下角是終端區(qū)域。這是用戶(hù)完成瀏覽后視線(xiàn)最終停留的區(qū)域。
將按鈕放置在終端區(qū)域，可以讓用戶(hù)最后看到需要執(zhí)行的主要操作。這不僅改善了視覺(jué)流程，也優(yōu)化了任務(wù)流程。用戶(hù)在瀏覽時(shí)不會(huì)跳過(guò)主要操作按鈕。他們的目光會(huì)在瀏覽過(guò)程中直接落在按鈕上，因此可以立即點(diǎn)擊。
掃描對(duì)話(huà)框并采取行動(dòng)既快速又簡(jiǎn)單，因?yàn)橛脩?hù)的眼睛停留在主要操作按鈕上。
設(shè)計(jì)師經(jīng)常思考的另一個(gè)問(wèn)題是，他們應(yīng)該把按鈕放在角落里還是把它們放在一起。當(dāng)你把主要操作和次要操作放在對(duì)話(huà)框的角落里時(shí)，它們可以很好地映射到左右導(dǎo)航方向。然而，由于“確定”和“取消”按鈕不是導(dǎo)航按鈕，因此沒(méi)有必要遵循方向映射。有時(shí)，這樣做弊大于利。
按鈕之間較大的視覺(jué)分離使得操作比較困難，并將一個(gè)操作與另一個(gè)操作隔離開(kāi)來(lái)
如果應(yīng)用程序即將執(zhí)行用戶(hù)無(wú)法撤消的關(guān)鍵操作，那么讓用戶(hù)能夠同時(shí)看到“取消”按鈕和“確定”按鈕就顯得尤為重要。在這種情況下，“取消”按鈕的功能可能類(lèi)似于“上一步”按鈕，但它更重要的是，它充當(dāng)了安全按鈕，可以防止任何更改。
將“取消”按鈕放在最左上角的危險(xiǎn)在于，由于兩個(gè)按鈕之間的視覺(jué)距離過(guò)大，用戶(hù)可能會(huì)忽略它。將“取消”按鈕與“確定”按鈕放在一起，可以讓用戶(hù)更容易地在一次注視中看到并比較這兩個(gè)操作，從而選擇最佳操作。
當(dāng)用戶(hù)需要閱讀重要信息或執(zhí)行重要操作時(shí)，設(shè)計(jì)師通常會(huì)使用對(duì)話(huà)框。按鈕的放置順序會(huì)影響用戶(hù)選擇的操作。如果按鈕的放置順序清晰高效，可以防止用戶(hù)選擇錯(cuò)誤的操作并犯錯(cuò)。
按鈕的位置很重要，但也要記住注意按鈕的視覺(jué)重量和標(biāo)簽。所有這些設(shè)計(jì)方面都會(huì)在用戶(hù)瀏覽對(duì)話(huà)框時(shí)發(fā)揮作用。既然您理解了為什么“確定”按鈕放在右側(cè)效果最佳，那么您就有比平臺(tái)一致性更好的參考依據(jù)了。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn