久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

移動平臺Dialog內按鍵順序研究

移動平臺Dialog內按鍵順序研究 三聯

  iOS說,「I’m always right」,于是「確定」就在了右邊。

  Android倔強的說,「要在左邊」,于是「確定」就在了左邊。

  接著,iOS把Android胖揍了一頓,「stay foolish,foolish……都TM要在右邊」,Android被硬拗到了右邊。

  這是個老話題了,只是時間流轉,各平臺都在更新,我們也要與時俱進,有必要再拿出來提一提。

  移動端三大主要平臺,Android、iOS、Windows Phone,咱們逐個說。

  Windows Phone平臺

  先從WP開始吧,WP平臺內的彈出提示稱之為「raw notifications」,延續Win桌面平臺的設計原則。

  圖1

  如圖1所示,dialog內操作按鍵稱之為「Commit button」,肯定性操作位于左邊,否定性操作位于最右邊。Win平臺定義了具體的用法與順序:Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/[Don‘t do it], [Do it]/[Don’t do it]/Cancel。傳送門

  ps.注意OK鍵沒有在此間出沒,后面具體說明。

  圖2

  WP平臺及Win8平臺dialog內操作按鍵的左右順序也是一致的(圖2)。

  iOS平臺

  iOS平臺,它的出身與歷史注定了與OS X在設計上的傳承。與Win相反(或者說Win有意與OS X相反,這里面又要翻出一堆歷史遺留問題了 ^_^)肯定性操作位于右邊,否定性操作位于左邊。(大多數情況下)

  ps. iOS需要注意按鍵高亮的狀態。

  圖3

  OS X用戶預期所有的按鍵位于dialog的右底部,啟動一個操作的按鍵總是位于最右側。該按鍵稱之為「Action button」,以確認當前dialog最重要的操作。取消按鍵位于「Action button」的左側(圖3左)。 OS X Interface Guidelines,傳送門(參見Dialog章節)

  iOS繼承了OS X的設計原則(圖3右),只是稍稍有些不一樣,體現在對于Cancel的理解上:

  1.當操作涉及潛在的風險時,兩個按鍵中「Cancel」按鍵應位于右側,并高亮提示。

  2.當需要引導人們進行所期望的操作時,兩個按鍵中的「Cancel」按應位于左側,相對應的操作按鍵高亮提示。

  iOS中「Cancel」可能位于左側,也可能位于右側,這取決于所執行的操作是否具有破壞性。 iOS平臺更看中的是按鍵的高亮狀態(iOS高亮狀態始終在右側,OS X則不然)。同時在dialog彈出的情況下按下Home鍵,應當是等同于點擊了「Cancel」按鍵,并不執行任何操作。iOS Human Interface Guidelines,傳送門 (參見alert的描述)

  Android平臺

  Android平臺,這才是最頭痛的家伙,大多數的坑都在這里。剛出道時,可能是因為當時設計規范執行力度、Android系統的碎片化等原因,導致dialog內的操作按鍵順序隨著各應用開發者喜好而定,大多數與Win平臺保持一致。更新至Android 4.x后,官方終于對此有了一個很明確的態度,并在Android Design里有了標準的定義。

  圖4

  Dialog操作按鈕通常是「取消」/「確定」,確定鍵同時也是首選操作以及最可能執行的操作。但是,如果涉及特殊操作例如關閉或等待,那么所有的按鈕都應該使用動詞。同是,dialog中肯定性的操作總是安排在右側,而否定性的操作放在左側。與iOS理念上統一,但也有所保留!^_^ ps.就算是到現在還是能看到大量的Android應用與該原則相悖,或許是慣性,或許是遷就低版本系統… -_-’Android Design,傳送門(參見Dialog章節)

  聊完了各平臺的設計規范,對各平臺dialog內操作按鍵的順序有所了解,大家知道怎么去進行設計了,但是身為設計者需要更進一步的思考,有興趣的請越過下面華麗的切糕線。

  如果你是一個苦逼的設計者,在完全沒有設計原則指導的情況下,將如何安排Dialog內操作按鍵的順序呢?…… 想個五分鐘吧 以下僅為個人觀點!!

  我傾向于肯定性操作位于右邊,否定性操作位于左邊,也就是「取消」/「確定」。ps:所說皆錯

  「確定」/「取消」,采用這種順序最大的理由是符合自然的閱讀順序,也就是大部分從左起語言的順序。用戶在執行某操作彈出dialog后,視線最先接觸的是需要執行的「Action」,因為設計者認為「Action」重要程度比「Cancel」要高,需要著重強調(這里涉及認知領域的首因效應,以后有機會再講吧。)ps.由于是Win平臺所采用的順序,就簡稱為Win順序吧。

  「取消」/「確定」,由于主要是水果平臺采用,以下簡稱為 OS X順序,或者iOS順序。說說具體為什么傾向它的幾個理由:

  1. 閱讀視線流

  Win順序雖然能夠用戶視線更早接觸到「Action」,但不可否認一個事實,用戶會閱讀完所有可操作的選項,這意味著用戶的視線不會停留在「Action」上,它將繼續向后進行掃描,在查看完所有可選項后,再返回之前的的「Action」執行相應操作。采用iOS順序,用戶的視線流將會更平滑,視線最終停留的位置也是「Action」所處的位置。通過圖5對比,可以得知「確定」放置于左側,將導致用戶的視線流發生改變,用戶視線流無意識的回跳,而放于右側將保持視線流在一個方向,減少視線曲折搜索的過程。

  圖5

  2. 掃視時的閱讀順序

  有人可能會問了這與第1條理由有什么區別?

  閱讀是由掃視(saccades)和凝視(fixation)兩個動作連續組合、切換的過程。第1條的理由基于凝視(fixation)運動過程。

  為什么在dialog彈出時會出現掃視?因為,用戶對于dialog里的內容只是快速的瀏覽,或者說是沒有人會認真閱讀dialog里的內容。由此也引申出dialog設計時的一個重要原則:不要在dialog相關的action按鍵里寫上「好」或「確定」等,應該用實際會發生的動作來命名。這也是為什么建議使用動詞的原因。如:你需要執行一個「保存」操作,那你的dialog里出現的相關Action應該是「取消」和「保存」。

  說回掃視,用戶的在進行掃視時順序往往如圖6,最終視覺的落點是在視覺界面的右下角(Terminal Area),掃視終點往往就在「Action」區域上,該區域能夠獲得更多的視覺關注。這也是為什么Win及OS X桌面系統內的dialog按鍵均非居中顯示,而是位于右下角的原因。Gutenberg Diagram(古藤堡圖表)也是用以描述掃視順序的模型(傳送門)。。ps.注意圖6標識出的區域1,iOS在右側「Action」鍵上加了高亮效果,這對視覺搜索有益。

  圖6

  3. 邏輯順序

  首先讓我們來對dialog內按鍵定義一下,「確定」按鍵是用戶以執行相關操作的按鍵,點擊后將對現有狀態發生根本性的改變。「取消」按鍵是使用戶返回到原來狀態,取消當前dialog。

  這意味著,用戶點擊「Action」后將進入下一步操作,點擊「Cancel」將執行返回操作。想想我們常見的:瀏覽器上的導航按鍵、kindle上的左右翻頁按鍵、安排軟件過程當中的「上一步」「下一步」……等等!

  如圖7,用戶在dialog內所看到的視覺順序與邏輯順序是一致的。

  圖7

  另外,桌面平臺上還考慮到用戶左右手使用習慣,這其實與dialog內的邏輯順序也有所關聯。我們知道大部分的人主要是右手用戶,當dialog內的「Action」位于右側時,用戶在操作時能夠更為順應他們自身的使用習慣。 這一點還體現在Win和OS X桌面文件排布順序方面,OS X為了大部分的右手用戶將桌面文件分布在屏幕的右側。

  圖8

  最后來個Ending,其實視覺順序在設計時,或系統設計時是一條很重要的原則,可惜國內并沒有太多設計師重視這條原則,舉例說明(圖9),從下圖中將Win和OS X的窗口控制按鍵抽離出來,并將「關閉」替換成「取消」,如果將這些操作放置在一個dialog中,有沒有發現它們還是符合這兩個系統分別堅持的設計原則呢?

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 亚洲第一福利视频 | 黄色一级免费 | 在线视频 亚洲 | 亚洲一区二区在线播放 | 狠狠爱综合 | 中文字幕精品一区 | 91精品国产综合久久久久久 | 欧美三级成人理伦 | 欧美日高清 | 日韩欧美一区二区三区免费观看 | 九九久久精品 | 精品videossex高潮汇编 | 欧美vide| 欧美中文字幕在线观看 | 男人天堂网址 | 久久久久久久久久久福利观看 | 99久久婷婷国产综合精品电影 | 在线国产小视频 | 国产精品视频一二三区 | 亚洲69p | 玖玖国产| 大陆一级毛片免费视频观看 | 亚洲国产精品一区二区第一页 | 欧美日韩一二三区 | 黄色网页在线 | 亚洲视频一区在线观看 | av大片 | 精品国产乱码久久久久久图片 | 色吊丝在线 | 国产精品视频一区二区三 | 日韩欧美视频 | 国产视频三级 | 九九爱这里只有精品 | 精品一区二区三区四区五区 | 美日韩中文字幕 | 日韩午夜场| 国产欧美一区二区三区日本久久久 | 精品视频一区二区三区在线观看 | 免费色网址 | 精品福利在线视频 | 日本h片在线观看 |