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