iOS平臺(tái)

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左）。?OS X Interface Guidelines，傳送門(mén)（參見(jiàn)Dialog章節(jié)）

iOS繼承了OS X的設(shè)計(jì)原則（圖3右），只是稍稍有些不一樣，體現(xiàn)在對(duì)于Cancel的理解上：

• 1.當(dāng)操作涉及潛在的風(fēng)險(xiǎn)時(shí)，兩個(gè)按鍵中「Cancel」按鍵應(yīng)位于右側(cè)，并高亮提示。

• 2.當(dāng)需要引導(dǎo)人們進(jìn)行所期望的操作時(shí)，兩個(gè)按鍵中的「Cancel」按應(yīng)位于左側(cè)，相對(duì)應(yīng)的操作按鍵高亮提示。

Dialog操作按鈕通常是「取消」/「確定」，確定鍵同時(shí)也是首選操作以及最可能執(zhí)行的操作。但是，如果涉及特殊操作例如關(guān)閉或等待，那么所有的按鈕都應(yīng)該使用動(dòng)詞。同是，dialog中肯定性的操作總是安排在右側(cè)，而否定性的操作放在左側(cè)。與iOS理念上統(tǒng)一，但也有所保留！^_^?ps.就算是到現(xiàn)在還是能看到大量的Android應(yīng)用與該原則相悖，或許是慣性，或許是遷就低版本系統(tǒng)… -_-’Android Design，傳送門(mén)（參見(jiàn)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è)理由：

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（古藤堡圖表）也是用以描述掃視順序的模型（傳送門(mén)）。。ps.注意圖6標(biāo)識(shí)出的區(qū)域1，iOS在右側(cè)「Action」鍵上加了高亮效果，這對(duì)視覺(jué)搜索有益。

如圖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í)是一條很重要的原則，可惜國(guó)內(nèi)并沒(méi)有太多設(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ì)原則呢？