原生 iOS 與 Android App 設計上有哪些區別？
感謝 SteelKiwi 提供授權翻譯。
Thanks to SteelKiwi allow me to translate their article.
選擇這篇的原因：
對於像我這樣的菜鳥設計師，剛接觸到 App 介面設計規範的時候，因為手上沒有 iOS 裝置，常常不知道如果我要做一個跨平台的 App 該注意什麼，讀完這篇文章後對於兩邊的差異又更加認識了，不過還是推薦讀熟 MD 和 HIG 會比較得心應手。(對我自己說的xD)翻譯時間：4 小時 27 分鐘
閱讀時間：9 分鐘 27 秒如果對於翻譯有任何建議歡迎提出！
目錄
- 正文開始
- 導覽模式 Navigation Pattern 的差異
- 客製化元件會消耗更多開發時間(為什麼它們不該長得一樣)
- iOS 與 Android 的按鈕樣式
- 表單 Sheet 的差異
- 感應範圍 Touch Target 的差異
- 文字 Typography 的差異
- 微互動 Microinteraction 的差異
- 結語
1. 正文開始
要設計一個好的原生 App，你要知道 iOS 和 Android 平台之間的差異性；這些平台不僅僅在外表上不同，在結構、流程上也有差異，在設計跨平台的 App 時要留意這些差異，才能提供最好的使用者體驗。
原生的 iOS 和 Android App 有為作業系統量身打造的功能；在 Apple 及 Google 的設計規範中建議最好使用該平台標準的導覽方式：Page Control, Tab Bars, Segmented Controls, Table Views, Collection Views 以及 Split Views（為方便理解、查詢保留元件的英文名），使用者很熟悉這些平台的操作方式，所以如果你以規範標準的元件來設計，使用者可以馬上理解該如何探索你的 App。我們將會針對 iOS 和 Android 在互動設計上的幾個主要差異來說明為何 iOS 和 Android 的 App 會長得不太一樣、為什麼它們不該長得一樣，我們也會提供幾個樣板和例子讓你更了解我們的意思。
2. 在導覽模式(Navigation Pattern)上的差異
在多個畫面中移動是許多 App 常見的動作。很重要的是要考慮到 iOS 和 Android 在原生設計規範上有不同的導覽模式；Android 擁有一個全域導覽列，「返回」按鈕可以輕鬆地回到上一步、上一個頁面，並且它適用幾乎任何 Android App。
而 Apple 的做法則有很大的不同，沒有全域導覽列，所以我們沒辦法在 iOS App 中用一個通用的返回鍵，這影響了 iOS App 的設計，每個畫面上都必須有一個導覽列以及左上角要有返回鍵。
Apple 也加入一個從左滑到右可以回到上一頁的手勢，這手勢適用於大多數 iOS App。
在這裡 iOS 和 Android 的差別是，iOS 從左滑到右會回到上一頁，而相同的手勢在 Android 中則是切換分頁(Tab)，要回到上一步則是使用全域導覽列的返回鍵。
App 內的導覽模式差異
在 Material 設計規範中有提供數種不同的導覽元件，其中最常用的就是漢堡選單(Navigation Drawer)和分頁(Tabs)。
漢堡選單是當你按下漢堡選單(通常是三條橫線)的按鈕後，會從左邊或右邊滑出一個選單。分頁則是位於標題列下方，為頁面內容做一個大分類，讓使用者可以在 App 不同畫面、功能作切換。
在 Material 設計規範有一個元件叫做底部導覽列(Botton Navigation)。這個元件在原生 Android App 中相當重要，只要在底部導覽列輕鬆一按就能探索、切換不同最高層分類的畫面，在設計規範中不建議同時使用底部導覽列和分頁，因為它有可能會造成使用者對於功能層級的疑惑。
在 Apple 的 Human Interface Guidelines 中，並沒有一個類似漢堡選單的標準元件，取而代之的是蘋果建議把導覽項目放在頁籤(Tab Bar)裡，頁籤會出現 App 畫面底部，讓使用者可以在各主要功能之間快速切換。
通常頁籤不會放超過五個按鈕，也如你所見，這個元件和 Material 中的底部導覽列很類似，但是這更常見於 iOS App 中。
雖然兩種平台都有相似的元件可以達到相似的功能，導覽模式依舊是它們最大的不同，它們有不同的目標導向，像 iOS 中沒有 Android 的全域導覽列，還有其他在視覺上的不同。
Apple 認為主要導覽的元素應該要放在前景，而漢堡選單只應該用來存放使用者不常用的功能，而在 Android 反而很常見的把主要功能放在漢堡選單中。
3. 客製化元件需要更多開發時間和使用者學習成本
如果你想要你的 App 在不同平台看起來一模一樣，你就需要投入額外開發成本來達到最好的體驗。最複雜的部分包含預設控制方式，例如 radio button, checkboxes, toggles 等等需要特別開發才能讓 iOS 的元件出現在 Android 或 Android 的元件出現在 iOS 上。
兩個平台有各自獨特的互動方式，一個好的設計應該要尊重不同平台使用者的習慣，一定要留意這兩個平台的差異，你的設計才會符合使用者預期。
舉一個例子，就是日期選擇器(Date Picker)，在 iOS 很常見像吃角子老虎機(Slot Machine)樣子的日期選擇器，對於 Android 使用者就不太熟悉了，如果在 Android 也想用這樣的設計就必須特別去開發，不僅增加實作複雜度，也會讓你的 App 在 Android 平台看起來像是個外星人。
4. iOS 與 Android 的按鈕樣式
在 Material 設計規範有兩種按鈕樣式：扁平(flat)、實體(Raised)。使用在不同的狀況；在按鈕上的文字通常是全部大寫。有時候我們也可以在原生 iOS App 中找到使用全大寫文字的按鈕，但 iOS 全大寫字還是用在標題比較多。
還有一種按鈕樣式，在 Android 上叫「浮動按鈕」(Floating Action Button)，在 iOS 裡稱為行為招喚按鈕(Call to Action Button)，用來表示一個 App 中最主要的功能。
舉 Email App 的例子來說，撰寫新郵件的按鈕在 Android 就會是用浮動按鈕，在 iOS 就會是用行為招喚按鈕，一個位於 Tab bar 中間的按鈕。
5. Android 的 Bottom Sheet 與 iOS 的 Action Sheet, Activity View的不同
Android 分為兩種表單：Modal Sheet (狀態清單)和 Persistent Sheet(固定清單)。Modal 可以根據使用情境列出現在可執行的動作，也可用於在你按下分享按鈕後會列出可用的 App。
在原生 iOS 我們可以找到類似上述功能的元件，稱為 Action Sheet 和 Activity Views，但在外觀上看起來不同。
6. 在感應範圍(Touch Target) 及網格(Grid)的差異
iOS 和 Android 在 Touch Target 上有些不同：
iOS 是 44px @1x。
Android 是 48dp/48px @1x。
Material Design Guideline 中也建議把所有元素都對齊 8dp 的正方形網格
7. 在文字*(Typography)的差異
譯：不確定怎麼翻 Typography，《字體散步》是說有人翻成「字體排印學」，但是這裡只講文字不講排版，所以就暫譯「文字」。iOS 的系統字型是 San Francisco；Android 使用 Roboto，而 Noto 則是不支援 Roboto 時，可以替代用於全部語系的 Chrome 和 Android。
在設計時要多注意兩種平台在文字的規定。
8. 微互動(Microinteractions)
第一眼通常會決定使用者對 App 的整體印象，從最開始就抓住使用者眼球是非常重要的，在 App 設計與開發時，可以利用微互動和動畫創造非常吸睛的體驗。
我們來看看兩個平台對於互動設計、動畫設計的規範和例子。
- 焦點、重點：互動設計可以讓使用者專心在 App 上重要的事，所以使用上要很謹慎，不建議過度使用動畫，會讓使用者分心造成反效果。
- 一致性、階層性：互動設計可以幫助使用者更容易理解自己在 App 中的哪個位置，利用流暢、簡潔的動畫讓使用者看到元素之間的關聯和畫面如何轉場，幫助使用者了解怎麼使用並提供有效的提示，促進互動率。
雖然 MD 和 HIG 對於微互動的建議有許多相似之處，還是有幾處不一樣的地方需要注意，利用平台特有的轉場方式可以讓熟悉平台的使用者更快上手，也在該平台上看起來更自然。
iOS
iOS 使用者習慣 iOS 特有的小動畫，例如滑順的轉場、畫面隨著裝置方向改流暢的改變，基於物理特性的滑動。如果畫面上有動作沒有基於物理法則移動的話，iOS 使用者會覺得怪怪的。舉例來說如果使用者從螢幕上方往下滑拉出另一個畫面，他們會預期可以透過把它往上滑回去可以收回它，這是 HIG 強烈推薦的轉場方式，除非你設計的是比較需要沈浸式的體驗例如說遊戲，你可能就需要客製化的轉場動畫。
Android
在 Material 設計規範中，動畫可分為三類：
- 離去 Outgoing
- 進場 Incoming
- 固定 Permanent
譯：在這篇文章中的 Transition anatomy 章節有動圖範例！動畫會指引使用者的注意力，當 UI 轉變樣貌、位置時，動畫會呈現轉變中間的連續性，這類導覽的互動設計可以幫助使用者理解 App 的層級。例如當一個元素放大填滿整個視窗時，放大的這個動畫表示它是一個子畫面，它所覆蓋著的畫面則是母畫面。
動畫展示的是從母畫面開始，一個子畫面在被按下後浮起來並佔滿整個視窗。這個動畫把焦點帶到子畫面，並同時強調了子母畫面的關係。
擁有相同母畫面的子畫面，例如相簿中的相片、個人檔案中的區塊、或流程中的步驟，會同時移動來強調它們的關係，一個新的子畫面滑進來的同時其他子畫面會從反方向移動。(例如下圖)
9. 結論
當然也有一些例外，有些 iOS App 遵循 MD，例如 Gmail，有些 Android App 遵循 HIG，例如 instagram。
但有一件事情是肯定的，利用平台原生的元件來設計、開發速度快多了，這樣可以把時間花在設計上，避免花大把時間在混合兩個平台的介面，然後再花大把開發時間在開發客製化的介面。
