最全總結(jié)！iOS與Android最新原生設(shè)計(jì)規(guī)范差異
系統(tǒng)版本
? ? Andriod 9.0? VS? ? iOS 12.1.4
分析思路：
? ? 不管是面對(duì)哪個(gè)平臺(tái)的交互設(shè)計(jì)任務(wù)，在確定業(yè)務(wù)流程及功能需求的前提下。需要解決的問(wèn)題，主要涉及以下幾個(gè)方面：導(dǎo)航、內(nèi)容布局、頁(yè)面關(guān)系、操作、反饋。因此，本文在閱讀了iOS 及Andriod官方設(shè)計(jì)指南的情況，希望從上述幾個(gè)維度，對(duì)于指南中提及的內(nèi)容，進(jìn)行劃分，希望對(duì)日常的交互設(shè)計(jì)工作起到一定幫助。
差異點(diǎn)概述：
1.導(dǎo)航：
Andriod：頂部導(dǎo)航（多用文字/圖文/可滑動(dòng)形式）
iOS：頂部導(dǎo)航（分段控制器）
2.布局：
Andriod：多出圖片、卡片的相關(guān)規(guī)范
iOS：僅對(duì)列表有規(guī)定
3.頁(yè)面關(guān)系：
Andriod：Bcakdrop、底部表單（本頁(yè)）
iOS：滾輪選擇器、模態(tài)
4.操作
Andriod：長(zhǎng)按手勢(shì)、標(biāo)簽（chips)
iOS：滑動(dòng)手勢(shì)
5.反饋
Andriod：Snackbar、橫幅（Banner）
iOS：Toast
系統(tǒng)級(jí)差異：
1.應(yīng)用間切換：
Andriod：由底部向上滑動(dòng)/應(yīng)用切換按鈕
iOS：連續(xù)按兩次home鍵/向上滑動(dòng)并停止
2.控制中心：
Andriod:由底部向上滑動(dòng)
iOS:由頂部向下滑動(dòng)
3.激活小部件
Andriod:通過(guò)長(zhǎng)按激活
iOS：通過(guò)3Dtouch激活，且小部件可選
4.刪除
Andriod:長(zhǎng)按并拖拽
iOS:長(zhǎng)按
4.文件管理
Andriod: 1.可選擇圖片、最近、網(wǎng)盤、本機(jī)所有文件；2.多層文件夾，可任一層級(jí)返回
iOS：1.僅能選擇icloud/iphone/應(yīng)用中文件；2.多層文件夾，需逐級(jí)返回；3.可新建文件夾
導(dǎo)航
1.頂級(jí)導(dǎo)航間切換
Andriod:頁(yè)面內(nèi)容被重置（允許修改）
iOS: 頁(yè)面內(nèi)容保留
2.頂部應(yīng)用欄/導(dǎo)航欄
Android：1.本頁(yè)標(biāo)題居左；2.一級(jí)頁(yè)面多含抽屜；
iOS：1.本頁(yè)標(biāo)題多居中；2.上級(jí)標(biāo)題多居左；
3.底部應(yīng)用欄（僅Andriod)
用于：1.需在底部設(shè)置「抽屜導(dǎo)航」；2.操作項(xiàng)（2-5）；3.僅移動(dòng)端
4.抽屜導(dǎo)航（僅Andriod)
1.適用：5+導(dǎo)航項(xiàng)
2.滑出位置：（1）抽屜位于左上：從左至右滑出；（2）抽屜位于左下：從下至上滑出；
4.頂部導(dǎo)航
Andriod:
1.適用：2+導(dǎo)航項(xiàng)
2.形式：固定/滑動(dòng)&文字/圖形，四者相互組合
3.行為：向上滾動(dòng)時(shí)，可選項(xiàng)卡吸頂，僅顯示狀態(tài)欄
iOS：
1.分段控制器—適用：（1）表單中單選；（2）視圖中切換/分割同類數(shù)據(jù)
2.分段控制器—屬性：（1）<5個(gè)；（2）文本/圖像二選一；（3）大小一致；（4）僅點(diǎn)擊
3.行為：向上滾動(dòng)頁(yè)面時(shí)，可切換「大標(biāo)題」至「標(biāo)準(zhǔn)標(biāo)題」
5.底部導(dǎo)航
Andriod:
1.適用：3-5個(gè)導(dǎo)航項(xiàng)
2.行為：（1）頁(yè)面向上滾動(dòng)時(shí)，底部導(dǎo)航可消失；（2）子頁(yè)面可保留底部導(dǎo)航
iOS：
1.行為：子頁(yè)面，底部導(dǎo)航消失；
布局
1.列表：
Andriod:
1.單行：（1）純文本：選項(xiàng)；（2）圖標(biāo)+文字：選項(xiàng)、通訊錄；
2.兩行：（1）圖標(biāo)+元圖標(biāo)：文件列表；（2）縮略圖+元文本：商品列表；
3.三行：（1）形象+文本：郵件列表；（2）縮略圖+文本+元文本：食物列表；
iOS: 1.基本：選項(xiàng)/導(dǎo)航項(xiàng)；2.含詳情：?jiǎn)蝹€(gè)已選；3.含輔助信息：多個(gè)已選；4.組合式：列表歸類
2.圖片列表（僅Android）：
1.規(guī)則：各項(xiàng)同等重要；2.非規(guī)則：強(qiáng)調(diào)某些項(xiàng)；3.編織：瀏覽對(duì)等對(duì)象；4.砌體：瀏覽原比例對(duì)象；
3.卡片（僅Android）：
1.規(guī)則型：快速瀏覽； 2.儀表盤：多功能+多主題； 3.差別型：凸顯卡片；
頁(yè)面關(guān)系
1.本頁(yè)關(guān)系：
Andriod:
1.Backdrop：多用于底層（多操作）與頂層（內(nèi)容多于操作）產(chǎn)生聯(lián)動(dòng)關(guān)系；2.模態(tài)底部表單(sheet:bottom): 用于替換菜單；
iOS：
1.滾輪選擇器：用于選擇（時(shí)間、日期、地址…)；2.模態(tài)（用于操作）：提醒、操作表單、活動(dòng)視圖、模態(tài)視圖（整屏/部分）；
注：通常模態(tài)會(huì)提供「取消」、「完成」
背景帷（Backdrop)
結(jié)構(gòu)：底層 、頂層
用法：1.底層(隱藏):展示與頂層相關(guān)的內(nèi)容； 2.底層(顯示):提供與頂層相關(guān)的操作(導(dǎo)航、更改內(nèi)容、篩選）
注：一次僅能激活一層
頂層：
1.內(nèi)容形式：列表行、圖片、卡片、文本
2.行為：(1)內(nèi)容支持橫/豎向滾動(dòng) ；(2)底層出現(xiàn)，頂層淡出； (3)底層滾動(dòng)，頂層模態(tài)； (4)頂層滾動(dòng)，標(biāo)題懸浮；
底層：
1.內(nèi)容形式：導(dǎo)航、步驟條、文本框、選擇控件
2.底層高度：取決于內(nèi)容
3.被關(guān)閉： (1)點(diǎn)擊「關(guān)閉」 ；(2)點(diǎn)擊頂層； (3)頂層展開箭頭；
4.被展現(xiàn)： (1)點(diǎn)擊菜單/輸入?yún)^(qū)域
注：不能通過(guò)滑動(dòng)前層
2.跨頁(yè)關(guān)系：
Andriod:
1.返回：用于頁(yè)面層級(jí)遞進(jìn)關(guān)系；2.關(guān)閉：僅用于編輯狀態(tài)；
iOS：
1.返回：同上；2.關(guān)閉：僅全頁(yè)面模態(tài)；
增、改操作
1.按鈕：
Andriod:
1.文字按鈕：非強(qiáng)調(diào)；
2.帶邊框按鈕：中強(qiáng)調(diào)；
3.帶背景按鈕：最強(qiáng)調(diào)；
4.FAB：(1)角色：界面中主操作；（2）用法：觸發(fā)操作/發(fā)起界面；（3）用于：創(chuàng)建/關(guān)注/分享/發(fā)起；
iOS：
1.文字按鈕：默認(rèn)；
2.帶邊框按鈕：僅必要時(shí)用（撥號(hào)鍵）；
3.帶背景按鈕：僅必要時(shí)用（呼叫鍵）；
2.文本框：
Andriod:
1.類型：（1）填充型；（2）線框型；
2.輔助信息：替換原有幫助信息
iOS：
1.類型：無(wú)具體規(guī)定；
3.標(biāo)簽：
Andriod:
1.結(jié)構(gòu)：容器*、文字*、圖標(biāo)、移除按鈕；
2.類型：
（1）輸入標(biāo)簽：文本輸入—標(biāo)簽；單行/折行顯示；
（2）選擇標(biāo)簽：僅單選；可替換單選；多水平放置；橫向滑動(dòng)/折行顯示；
（3）篩選標(biāo)簽：可替換按鈕/復(fù)選框；多位于搜索框下/右側(cè)；橫向滑動(dòng)/折行顯示；
（4）操作標(biāo)簽：與內(nèi)容相關(guān)操作，以動(dòng)態(tài)/關(guān)聯(lián)關(guān)系出現(xiàn)；可替換按鈕；多位于卡片下方/界面底部；
3.1 輸入標(biāo)簽：
3.2 選擇標(biāo)簽：
3.3 篩選標(biāo)簽：
3.4 操作標(biāo)簽：
4.鍵盤：
Andriod:
1.類型（原生）：默認(rèn)；電話；數(shù)字；鏈接；郵箱；密碼；英文輸入；數(shù)字和符號(hào)；計(jì)算；
2.命令（原生）：完成；前往；上一項(xiàng)；下一項(xiàng)；搜索；發(fā)送；回車；
注：各廠商定制系統(tǒng)，難確保「發(fā)送」一定存在，故一般輸入框后，緊跟「發(fā)送」
3.命令（H5）：下一項(xiàng)&完成，不可調(diào)起
特例：輸入框字符為數(shù)字時(shí)，按鍵可為“下一項(xiàng)”
iOS：
1.類型（原生）：默認(rèn)；ASCii碼；數(shù)字和符號(hào)；鏈接；數(shù)字；電話；名字和電話；郵箱地址；小數(shù)；推特；網(wǎng)頁(yè)搜索；字母；
2.命令（原生）
鍵盤類型：
1.默認(rèn)：常規(guī)鍵盤
2.文本鍵盤：默認(rèn)鍵盤-表情符號(hào)(密碼輸入）
3.整數(shù)鍵盤：僅輸入數(shù)字0-9。
4.小數(shù)鍵盤：整數(shù)鍵盤+小數(shù)點(diǎn)。
5.電話鍵盤：數(shù)字鍵盤+“*” 和 “#” 。
6.郵箱鍵盤：默認(rèn)鍵盤+“@”和“.”。
7.鏈接鍵盤：默認(rèn)鍵盤上+“.com”、“.”和“/”（網(wǎng)址輸入）
8.數(shù)字和符號(hào)：數(shù)字鍵盤+標(biāo)點(diǎn)符號(hào)
鍵盤命令：
1.回車（return/enter）：換行
2.搜索（search）：執(zhí)行搜索
3.下一項(xiàng)（next）: 多輸入框，切換至下一個(gè)
4.發(fā)送（send): 內(nèi)容發(fā)送(通訊App)
5.前往（go): 任務(wù)過(guò)程中,執(zhí)行下一步驟（eg:輸入網(wǎng)址后，前往打開的網(wǎng)頁(yè))
6.完成（done）: 提交
刪除操作
1.手勢(shì)
Andriod:
1.點(diǎn)擊：通過(guò)點(diǎn)擊，進(jìn)行導(dǎo)航；執(zhí)行操作/元素交互；
2.拖動(dòng)：滑動(dòng)超出閾值，「默認(rèn)視圖」變?yōu)椤溉烈晥D」/「關(guān)閉視圖」；
3.滾動(dòng)&平移/輕坲：垂直/水平/全方向移動(dòng)；
4.滑動(dòng)：（1）左滑/右滑動(dòng)列表>閾值，可完成操作；（2）一級(jí)頁(yè)面，可右滑喚出導(dǎo)航；
5.連續(xù)點(diǎn)擊：縮放
6.捏：（1）縮放進(jìn)行導(dǎo)航；（2）圖形縮放：
7.長(zhǎng)按：可顯示其他模式和特性（eg:編輯）；
8.拾取&移動(dòng)：長(zhǎng)按并拖動(dòng)，可對(duì)內(nèi)容重新排序；
9.復(fù)合手勢(shì)：用戶可在不同手勢(shì)（縮放、旋轉(zhuǎn)、平移）間無(wú)縫切換；
iOS：
1.點(diǎn)擊：激活操作/選擇條目；
2.拖動(dòng)：進(jìn)入編輯狀態(tài)后，從一側(cè)移動(dòng)至另一側(cè)，屏幕內(nèi)拖動(dòng)；
3.輕坲：快速滾動(dòng)/平移：
4.滑動(dòng)：（1）左滑列表行；（2）單手右滑，回到上頁(yè)；（3）單手滑動(dòng)，展示被隱藏分割視圖；（4）四指滑動(dòng)：應(yīng)用間切換（僅iPad）；
5.連續(xù)點(diǎn)擊：縮放
6.捏：僅圖像縮放；
7.觸摸&按住：可放大文本；3D touch;
8.旋轉(zhuǎn)：旋轉(zhuǎn)圖片/視圖；
1.1 點(diǎn)擊
1.2 拖動(dòng)
1.3 滑動(dòng)
1.4 長(zhǎng)按
1.5 拾取&移動(dòng)
2.操作
Andriod:
1.操作菜單：獨(dú)有；
2.底部表單：無(wú)取消按鈕；
3.簡(jiǎn)易對(duì)話框：（1）中間彈出；（2）無(wú)「取消」；（3）選擇操作，會(huì)關(guān)閉；（4）操作非遮罩區(qū)域，直接關(guān)閉；
iOS：操作表單/活動(dòng)視圖
1.關(guān)閉：取消/遮罩區(qū)域
2.使用：（1）單任務(wù)，多選項(xiàng)；（2）危險(xiǎn)操作，二次確認(rèn)；（3）可連續(xù)彈出；（4）操作表單，避免滾動(dòng)；
注：如危險(xiǎn)情況，非用戶觸發(fā)，則使用「提醒」；
2.1 操作菜單
2.2底部表單/操作表單
2.3 簡(jiǎn)易對(duì)話框
3.選擇控件
Andriod:
1.日期選擇—對(duì)話框；2.時(shí)間選擇—對(duì)話框；3.單選/多選—區(qū)分；4.其他選擇—下拉菜單；
iOS
1.日期選擇—滾輪選擇器；2.時(shí)間選擇—滾動(dòng)選擇器（多出現(xiàn)下方/附近）；3.單選/多選—不區(qū)分；4.其他選擇—滾輪選擇器；
3.1 日期選擇
3.2 時(shí)間選擇
3.3 其他
反饋
Andriod:
1.輕打斷：Snackbar
（1）操作（非必須）；（2）自動(dòng)消失（4-10S）；（3）操作項(xiàng)（0-1）；（4）位置：底部部導(dǎo)航；
2.中打斷：橫幅
（1）操作/圖標(biāo)（可選）；（2）隨內(nèi)容滾動(dòng)，需用戶消除；（3）操作項(xiàng)（1-2）；（4）位置：導(dǎo)航欄/固定搜索之下；
3.重打斷：對(duì)話框
（1）操作（必須）；（2）需用戶忽略；（3）操作項(xiàng)（1-2）；
注：操作項(xiàng)位于右側(cè)
iOS:
1.輕打斷：Toast
（1）無(wú)操作；（2）自動(dòng)消失；
2.重打斷：對(duì)話框
（1）操作（必須）；（2）需用戶忽略；（3）操作項(xiàng)（1-2）；
注：操作項(xiàng)位于居中
1.輕打斷：
2.中打斷：
3.重打斷：
參考文章及來(lái)源：
1.這個(gè)控件叫：Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤
http://www.lxweimin.com/p/0c210c8ec5a0
2.交互稿中「鍵盤類型」的標(biāo)注
https://mp.weixin.qq.com/s/ii7iTwT7B-SmHkC_7bcUbQ?
3.深度基礎(chǔ) | 交互中的Android鍵盤詳解
https://mp.weixin.qq.com/s/nQx2CpEHCycwyunEgI-m2w?
4.Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
5.Material Design
