【編者按】本文作者@MoonMonster朝捆，本篇文章為轉(zhuǎn)載學(xué)習(xí)用侵權(quán)刪，原文地址http://www.leiphone.com/news/201406/warlial-yes-for-right.html
1国章、先從WP開(kāi)始吧
WP平臺(tái)內(nèi)的彈出提示稱之為「raw notifications」具钥，延續(xù)Win桌面平臺(tái)的設(shè)計(jì)原則。
圖1
如圖1所示液兽，dialog內(nèi)操作按鍵稱之為「Commit button」骂删，肯定性操作位于左邊，否定性操作位于最右邊四啰。
Win平臺(tái)定義了具體的用法與順序：Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel宁玫。? ps.注意OK鍵沒(méi)有在此間出沒(méi)，后面具體說(shuō)明柑晒。
圖2
WP平臺(tái)及Win8平臺(tái)dialog內(nèi)操作按鍵的左右順序也是一致的（圖2）欧瘪。
2、iOS平臺(tái)
它的出身與歷史注定了與OS X在設(shè)計(jì)上的傳承敦迄。
與Win相反（或者說(shuō)Win有意與OS X相反恋追，這里面又要翻出一堆歷史遺留問(wèn)題了 ^_^）肯定性操作位于右邊，否定性操作位于左邊罚屋。（大多數(shù)情況下）ps. iOS需要注意按鍵高亮的狀態(tài)。
圖3
OS X用戶預(yù)期所有的按鍵位于dialog的右底部嗅绸，啟動(dòng)一個(gè)操作的按鍵總是位于最右側(cè)脾猛。該按鍵稱之為「Action button」，以確認(rèn)當(dāng)前dialog最重要的操作鱼鸠。取消按鍵位于「Action button」的左側(cè)（圖3左）猛拴。
參見(jiàn)《OS X Interface Guidelines》Dialog章節(jié)
iOS繼承了OS X的設(shè)計(jì)原則（圖3右），只是稍稍有些不一樣蚀狰，體現(xiàn)在對(duì)于Cancel的理解上：
當(dāng)操作涉及潛在的風(fēng)險(xiǎn)時(shí)愉昆，兩個(gè)按鍵中「Cancel」按鍵應(yīng)位于右側(cè)，并高亮提示麻蹋。
當(dāng)需要引導(dǎo)人們進(jìn)行所期望的操作時(shí)跛溉，兩個(gè)按鍵中的「Cancel」按應(yīng)位于左側(cè)，相對(duì)應(yīng)的操作按鍵高亮提示。
iOS中「Cancel」可能位于左側(cè)芳室，也可能位于右側(cè)专肪，這取決于所執(zhí)行的操作是否具有破壞性。?iOS平臺(tái)更看中的是按鍵的高亮狀態(tài)（iOS高亮狀態(tài)始終在右側(cè)堪侯，OS X則不然）嚎尤。
同時(shí)在dialog彈出的情況下按下Home鍵，應(yīng)當(dāng)是等同于點(diǎn)擊了「Cancel」按鍵伍宦，并不執(zhí)行任何操作芽死。
參見(jiàn)《iOS Human Interface Guidelines》alert的描述。
3次洼、Android平臺(tái)
這才是最頭痛的家伙收奔，大多數(shù)的坑都在這里。剛出道時(shí)滓玖，可能是因?yàn)楫?dāng)時(shí)設(shè)計(jì)規(guī)范執(zhí)行力度坪哄、Android系統(tǒng)的碎片化等原因，導(dǎo)致dialog內(nèi)的操作按鍵順序隨著各應(yīng)用開(kāi)發(fā)者喜好而定势篡，大多數(shù)與Win平臺(tái)保持一致翩肌。
更新至Android 4.x后，官方終于對(duì)此有了一個(gè)很明確的態(tài)度禁悠，并在Android Design里有了標(biāo)準(zhǔn)的定義念祭。
圖4
Dialog操作按鈕通常是「取消」/「確定」，確定鍵同時(shí)也是首選操作以及最可能執(zhí)行的操作碍侦。但是粱坤，如果涉及特殊操作例如關(guān)閉或等待，那么所有的按鈕都應(yīng)該使用動(dòng)詞瓷产。
同是站玄，dialog中肯定性的操作總是安排在右側(cè)，而否定性的操作放在左側(cè)濒旦。與iOS理念上統(tǒng)一株旷，但也有所保留！^_^
ps.就算是到現(xiàn)在還是能看到大量的Android應(yīng)用與該原則相悖尔邓，或許是慣性晾剖，或許是遷就低版本系統(tǒng)... -_-'
參見(jiàn)《Android Design》Dialog章節(jié)
聊完了各平臺(tái)的設(shè)計(jì)規(guī)范，對(duì)各平臺(tái)dialog內(nèi)操作按鍵的順序有所了解梯嗽，大家知道怎么去進(jìn)行設(shè)計(jì)了齿尽。
但是身為設(shè)計(jì)者需要更進(jìn)一步的思考，有興趣的請(qǐng)?jiān)竭^(guò)下面華麗的切糕線灯节。
-----------切糕線----------------------切糕線-----------
如果你是一個(gè)苦逼的設(shè)計(jì)者循头，在完全沒(méi)有設(shè)計(jì)原則指導(dǎo)的情況下绵估，將如何安排Dialog內(nèi)操作按鍵的順序呢？...... 想個(gè)五分鐘吧贷岸。
以下僅為個(gè)人觀點(diǎn)Ｒ际俊！歡迎打臉 ?^_^
我傾向于肯定性操作位于右邊偿警，否定性操作位于左邊躏救，也就是「取消」/「確定」。（ps.所說(shuō)皆錯(cuò)）
「確定」/「取消」螟蒸，采用這種順序最大的理由是符合自然的閱讀順序盒使，也就是大部分從左起語(yǔ)言的順序。
用戶在執(zhí)行某操作彈出dialog后七嫌，視線最先接觸的是需要執(zhí)行的「Action」少办，因?yàn)樵O(shè)計(jì)者認(rèn)為「Action」重要程度比「Cancel」要高，需要著重強(qiáng)調(diào)（這里涉及認(rèn)知領(lǐng)域的首因效應(yīng)诵原，以后有機(jī)會(huì)再講吧英妓。）ps.由于是Win平臺(tái)所采用的順序，就簡(jiǎn)稱為Win順序吧绍赛。
「取消」/「確定」蔓纠，由于主要是水果平臺(tái)采用，以下簡(jiǎn)稱為 OS X順序吗蚌，或者iOS順序腿倚。說(shuō)說(shuō)具體為什么傾向它的幾個(gè)理由：
閱讀視線流
掃視時(shí)的閱讀順序
邏輯順序
1、閱讀視線流
Win順序雖然能夠用戶視線更早接觸到「Action」蚯妇，但不可否認(rèn)一個(gè)事實(shí)敷燎，用戶會(huì)閱讀完所有可操作的選項(xiàng)，這意味著用戶的視線不會(huì)停留在「Action」上箩言，它將繼續(xù)向后進(jìn)行掃描硬贯，在查看完所有可選項(xiàng)后，再返回之前的的「Action」執(zhí)行相應(yīng)操作分扎。采用iOS順序澄成，用戶的視線流將會(huì)更平滑，視線最終停留的位置也是「Action」所處的位置畏吓。通過(guò)圖5對(duì)比，可以得知「確定」放置于左側(cè)卫漫，將導(dǎo)致用戶的視線流發(fā)生改變菲饼，用戶視線流無(wú)意識(shí)的回跳，而放于右側(cè)將保持視線流在一個(gè)方向列赎，減少視線曲折搜索的過(guò)程宏悦。
圖5
2、掃視時(shí)的閱讀順序
有人可能會(huì)問(wèn)了這與第1條理由有什么區(qū)別？閱讀是由掃視（saccades）和凝視（fixation）兩個(gè)動(dòng)作連續(xù)組合饼煞、切換的過(guò)程源葫。第1條的理由基于凝視（fixation）運(yùn)動(dòng)過(guò)程。
為什么在dialog彈出時(shí)會(huì)出現(xiàn)掃視砖瞧？因?yàn)橄⑻茫脩魧?duì)于dialog里的內(nèi)容只是快速的瀏覽，或者說(shuō)是沒(méi)有人會(huì)認(rèn)真閱讀dialog里的內(nèi)容块促。
由此也引申出dialog設(shè)計(jì)時(shí)的一個(gè)重要原則：不要在dialog相關(guān)的action按鍵里寫(xiě)上「好」或「確定」等荣堰，應(yīng)該用實(shí)際會(huì)發(fā)生的動(dòng)作來(lái)命名。
這也是為什么建議使用動(dòng)詞的原因竭翠。如：你需要執(zhí)行一個(gè)「保存」操作振坚，那你的dialog里出現(xiàn)的相關(guān)Action應(yīng)該是「取消」和「保存」。
說(shuō)回掃視斋扰，用戶的在進(jìn)行掃視時(shí)順序往往如圖6渡八，最終視覺(jué)的落點(diǎn)是在視覺(jué)界面的右下角（Terminal Area），掃視終點(diǎn)往往就在「Action」區(qū)域上传货，該區(qū)域能夠獲得更多的視覺(jué)關(guān)注屎鳍。這也是為什么Win及OS X桌面系統(tǒng)內(nèi)的dialog按鍵均非居中顯示，而是位于右下角的原因损离。
Gutenberg Diagram（古藤堡圖表）也是用以描述掃視順序的模型哥艇。。ps.注意圖6標(biāo)識(shí)出的區(qū)域1僻澎，iOS在右側(cè)「Action」鍵上加了高亮效果貌踏，這對(duì)視覺(jué)搜索有益。
圖6
3窟勃、 邏輯順序
首先讓我們來(lái)對(duì)dialog內(nèi)按鍵定義一下祖乳，「確定」按鍵是用戶以執(zhí)行相關(guān)操作的按鍵，點(diǎn)擊后將對(duì)現(xiàn)有狀態(tài)發(fā)生根本性的改變秉氧【炖ィ「取消」按鍵是使用戶返回到原來(lái)狀態(tài)，取消當(dāng)前dialog汁咏。
這意味著亚斋，用戶點(diǎn)擊「Action」后將進(jìn)入下一步操作，點(diǎn)擊「Cancel」將執(zhí)行返回操作攘滩。想想我們常見(jiàn)的：瀏覽器上的導(dǎo)航按鍵帅刊、kindle上的左右翻頁(yè)按鍵、安裝軟件過(guò)程當(dāng)中的「上一步」「下一步」......等等漂问！
如圖7赖瞒，用戶在dialog內(nèi)所看到的視覺(jué)順序與邏輯順序是一致的女揭。
圖7
另外，桌面平臺(tái)上還考慮到用戶左右手使用習(xí)慣栏饮，這其實(shí)與dialog內(nèi)的邏輯順序也有所關(guān)聯(lián)吧兔。
我們知道大部分的人主要是右手用戶，當(dāng)dialog內(nèi)的「Action」位于右側(cè)時(shí)袍嬉，用戶在操作時(shí)能夠更為順應(yīng)他們自身的使用習(xí)慣境蔼。
這一點(diǎn)還體現(xiàn)在Win和OS X桌面文件排布順序方面，OS X為了大部分的右手用戶將桌面文件分布在屏幕的右側(cè)冬竟。
圖8
最后來(lái)個(gè)Ending欧穴，其實(shí)視覺(jué)順序在設(shè)計(jì)時(shí)，或系統(tǒng)設(shè)計(jì)時(shí)是一條很重要的原則泵殴，需要設(shè)計(jì)師重視這條原則涮帘，舉例說(shuō)明（圖9），從下圖中將Win和OS X的窗口控制按鍵抽離出來(lái)笑诅，并將「關(guān)閉」替換成「取消」调缨。
如果將這些操作放置在一個(gè)dialog中，有沒(méi)有發(fā)現(xiàn)它們還是符合這兩個(gè)系統(tǒng)分別堅(jiān)持的設(shè)計(jì)原則呢吆你？
圖9
BTW. 有同學(xué)建議采用上下結(jié)構(gòu)解決左右順序問(wèn)題弦叶，這其實(shí)，與本文討論的標(biāo)的稍微有點(diǎn)偏差妇多。-_-'
iOS及其它移動(dòng)平臺(tái)內(nèi)有這樣的結(jié)構(gòu)伤哺，只是將其做了區(qū)分！iOS設(shè)計(jì)指導(dǎo)內(nèi)將類(lèi)似本文內(nèi)描述的dialog稱之為「Alert」者祖，上下結(jié)構(gòu)的dialog稱之為「Action Sheet」立莉，如圖10及圖11。
兩者之前的應(yīng)用場(chǎng)景和交互方式均有所不同七问，在遭遇實(shí)際問(wèn)題時(shí)蜓耻，需要設(shè)計(jì)者考慮使用哪種方式。ps.之前我對(duì)iOS官方進(jìn)行「Alert」及「Action Sheet」的區(qū)分也有點(diǎn)想不太透械巡，在寫(xiě)完本文并@ArtS同學(xué)提出該問(wèn)題后刹淌，終于有所明晰... ^_^
Action sheet為當(dāng)前任務(wù)提供一系列的操作，即多操作選項(xiàng)讥耗。
Action sheet在執(zhí)行涉及潛在風(fēng)險(xiǎn)操作時(shí)有勾，讓用戶進(jìn)行確認(rèn)，并將潛在風(fēng)險(xiǎn)操作按鍵設(shè)置為紅色古程，圖11柠衅。
Action sheet在iPhone設(shè)備（小屏設(shè)備），從屏幕底部彈出籍琳，并提供「Cancel」操作菲宴。ps. iPad無(wú)視這條。
圖10
圖11
休假后的第一篇趋急，略長(zhǎng)...略長(zhǎng)....... ?囧
作者博客：MoonMonster
