<b>本文講的是根據 OS 設計你的應用，</b>
作為一名設計師，了解不同平台的設計慣例和行為才能在開始設計前更好的和開發者及股東們進行交流。這樣，你的團隊可以基于适配各個平台的優缺點來讨論決定開發計劃（先開始 iOS 的開發，或者先開始 Android 的開發，或者同時進行兩個平台的開發）。
是以，在這裡我将會比對蘋果和谷歌這兩個作業系統設計風格上的相似之處和不同之處。我将會挑選部分應用，分析其在這兩個平台上設計的相似和不同。
通過這樣的比對，我們可以更好的了解在這兩個平台上約定俗成的設計形式。同時還可以給予設計者／開發者們一些建議，幫他們決定将來的設計和開發政策——不論他們想要先開發某一平台或者并行開發。
圖表 1.1 各版本 Android 作業系統普及率
圖表 1.2 Material Design 的主要特征
谷歌很好的定義了 Material Design。從圖表 1.2 中我們能看出，如果你不熟悉材料設計，共有四個方面你需要特别注意。
深度 & 表面： 你将會發現在 Android 中使用的效果是深經考究的，尤其是浮起的元素及其投影，都是為了表現不同界面元素之間的層級關系。
互動 & 運動： Material Design 參考了很多使用者使用動機和接觸反應。根據圖 1.3 中我們可以看出，當你點選某個元素時，接觸點的四周将會擴散出波紋，如果你點選的是按鈕，則按鈕将會升起（一般通過加深陰影實作）來“靠近”你的手指。
圖表 1.3 Material Design 互動
圖表 1.4, 各版本 iOS 的普及率
和 Material Design 不同的是，Apple 很早就建立了自己的 iOS 設計架構。從圖 1.3 中不難看出 iOS8 和 iOS9 占據了大多數使用者。由于 iOS9 數月前剛剛釋出，多數 iOS 應用還停留在 iOS8 的版本下。是以，此次我談論的 iOS 設計将主要圍繞 iOS8 和它的特性。
**扁平化設計：**它移除了任何給予元件 3D 效果的選擇，比如陰影，紋理等。它專注于排版，顔色群組件之間的關系。
極簡設計 & 功能： iOS 的設計更專注于原始功能而非外觀。簡易的圖示和布局最大程度上減少了使用者使用手機時的認知成本。
**直覺的互動：**内置的應用使用了很多直覺的設計，如壓感反應，顔色，位置，有含義的圖示和标志。使用者不需要過多裝飾就能明白螢幕上的某個元素是用來幹什麼的。比如，對于回到上一界面，多數使用者會被暗示隻需要在螢幕上輕輕從左向右滑動手指即可。
**顔色 & 圖檔：**在 iOS 中，Apple 使用了顔色來指出互動和視覺上的連貫性。 設計師們被強烈建議使用顔色和圖檔來引導使用者使用應用時的每一步操作。
使用者界面元素
圖表 1.5 使用者界面的比較
iOS 和 Android 平台在使用者界面上有着明顯的分别。根據圖 1.4 不難看出，第一，iOS（左）和Android（右）的主要操作欄位于不同的位置。蘋果系統将其放置于界面下方，而 Android 系統将其放置在上方導覽列的下方。第二，兩個平台都為回退功能設計了在左上的按鈕，但在 Android 平台下這個是可選的，因為 Android 手機上自帶了回退導航的按鈕。第三，Material Design 常用一種類似“漢堡”的圖示表示菜單欄，而 Apple 不常使用這種導航方式。第四，Material Design 允許浮動按鈕作為快捷方式出現在界面上，并把卡片視圖作為一個使用者界面上重要的元件。
互動 & 運動
圖表 1.6 互動設計上的比對
Android 和 iOS 在互動設計上也很不一樣。根據圖 1.5 我們可以看出，第一，當 iOS 使用顔色變化或淡出來給互動提供回報，Android 使用從你的手指擴散出的浮動的波紋（水面和光線的回報）以及點選後會通過加深陰影上升“靠近”你手指的按鈕（材質回報） 。第二，Apple 謹慎的設計了動畫，而 Material Design 對動畫的設計更抓人眼球。在 Google 來看，豐富清晰的動态設計可以有效的引導使用者的關注度。他們相信對于動态效果的應用可以更平滑的在不同導航界面間引導使用者，解釋螢幕上元件的改變，以及強調元素的優先級*（過渡）*。
視覺語言
圖表 1.7 視覺設計的比對
Android 和 iOS 在視覺設計上也大為不同。首先，在 Android 上，一個關鍵點是密度無關像素（常被縮寫為 DIP 或 DP）的引入，而 iOS 隻是使用點作為他們的機關。 這兩種類型都能保證你的設計在不同密度大小的裝置上能正常使用。第二，iOS 大量使用了模糊效果而 Android 選擇使用了陰影。第三，iOS 使用三種标準尺寸（@1x，@2x，@3x）而 Android 有四種（normal，small，large，extra large）。
在了解 Material Design 和 iOS 設計的主要特點後。我研究了一些在 Android 或是 iOS 上有相似和不相似界面的應用。由于我不認識這些開發團隊中的任何人，是以這一部分的總結來源于我的觀察和猜測而非真實的開發決策。基于我的觀察，對多平台設計應用通常有面向平台的，面向品牌的，以及混合的方法。我會在接下來解釋每種方法并分析一些例子。
面向品牌的方法主要是使用在兩種系統上使用自定義的使用者界面來突出自己的品牌。為了貫徹這種方法，設計師們往往不會遵循标準的平台設計而去設計獨特的使用者界面并釋出于兩個平台。在這個分類下，VSCO CAM 和 Snapchat 不僅保持了品牌特性，并且都有獨特的自定義界面。這一部分，我們将比對它們并研究它們的設計。
VSCO CAM
圖表 2.1 VSCO CAM — 探索頁（左 iOS vs 右 Android）
VSCO Cam 應用是一個現今流行的照片處理應用。剛開始它被釋出于 iOS 平台 并在随後推出了 Android 版本。圖 2.1 中可以看出， Android 上的界面和 iOS 上的幾乎一樣。同樣的導航，菜單，甚至圖示。更有趣的是，沒有一個平台上的開發是遵循平台設計準則的。沒有傳統的動作條。在不同界面的轉換需要通過一個不在通常位置的菜單完成。由于 VSCO Cam 完全“不管不顧”平台的設計準則而側重于品牌特點，你可以很明顯的感覺出在不同平台上他們所關注的品牌特點。
圖表 2.2 VSCO CAM — 相機頁（左 IOS vs 右 Android）
雖然現在 iOS 和 Android 平台上的 VSCO CAM 看似很接近，但實際仍然有一些地方可以被區分開。比如，相機的界面都是原生平台的界面。
Snapchat
圖表 2.3 Snapchat — 使用者界面流（左 IOS vs 右 Android）
總的來說，Snapchat 和 VSCO Cam 通過在不同平台上建立獨特一緻的使用者界面來提升了品牌的獨一性。然而，這樣的方法也有着很多的缺點（一會再讨論）。現在，讓我們來看看面向平台的方法。
面向平台的方法是在設計的過程中遵守各個平台的設計準則。在這種情況下，産品設計人員的關注點從品牌特點轉向了更貼近平台設計準則（因為使用者習慣于自己使用的平台習慣）。他們更熟悉自己所使用平台的設計規則，是以一個專門為平台考慮的設計使他們更快接受你的應用。在這一類産品中，Evernote 和 Dropbox 是很好的例子。
Evernote
Evernote 作為一個幫助提升使用者效率的記錄筆記的應用釋出于 2007 年。
iOS 和 Android 版本的 Evernote 不論從 UI 還是 UX 來看都完全不一樣。在兩個平台上幾乎每一部分都不一樣，從登陸頁，到菜單的設計，甚至一些界面元素。
圖表 2.4 Evernote 登陸頁（左 iOS vs 右 Android）
如同前面所提到的，在 iOS 版本上傾向于簡潔的動畫過渡，而 Android 版本上更多的動畫效果緻力于抓住使用者的目光。從圖 2.4 中看，兩個平台上的登陸頁遵循各自的設計準則而看起來完全不一樣。這樣的結果便是在 iOS 的登陸頁上有着極少的圖像設計和動畫，而 Android 版本上有的動态風富的設計和動畫。
圖表 2.5 Evernote 主菜單（左 iOS vs 右 Android）
菜單的設計也完全不一樣。iOS 上的菜單有着全綠色的背景，占據了整頁，這使它看起來像一個新頁面而不是菜單。而和 iOS 版本不同的是， Android 版本中遵循了 Material Design 的準則，使用了“漢堡”菜單。這個菜單隻占據了半頁，使用者可以很明确的知道他們所在的頁面。這在頁面轉換之餘給予了使用者更明确的體驗。此外，菜單的欄目在 Android 版本上由于更多的留白和資訊優先級要更易讀一些。
圖表 2.6 Evernote 動态互動（左 iOS vs 右 Android）
Evernote 的設計師們還在每個平台上采用了原生的使用者界面元件來執行同樣的任務。從圖 2.6 中可以見到，在 Android 版本中的添加按鈕是一個在 Material Design 中傳統的浮動按鈕，而在 iOS 版本中添加按鈕則被設計在了動作條上作為一個按鈕——這在 iOS 的設計中十分常見。
Dropbox
Dropbox 是一個重視功能而非界面的實用應用程式。是以，它的設計師們決定嚴格遵守面向平台的方法，沿用原生設計準則，進而使界面和互動更易預測，對使用者更友善。
圖表 2.7 Dropbox 導航結構
從圖 2.7 中看，Dropbox 的 Android 和 iOS 版本使用了不同的方法來決定導航的優先級。iOS 版本中，它使用了底部的選項欄來完成在四個最進階的部分（檔案，照片，離線檔案，通知）之間切換。然而，Android 版本中這些都被隐藏在導航 drawer 中。從優先級角度來看，這是很大的差異。
圖表 2.8 Dropbox 浮動按鈕（左 iOS vs 右 Android）
Dropbox 的設計師們也對各自平台使用了各自規範的控制和體驗互動元素。從圖 2.8 來看， Android 的浮動動作條和 iOS 中的選項按鈕各自被應用在其中關鍵的内容功能上。比如，上傳檔案，建立檔案夾等等。這種對界面元素的應用不僅使兩個平台上的功能保持高度一緻，而且還符合各自的界面設計模式。
圖表 2.9 Dropbox 登陸頁（左 iOS vs 右 Android）
除了 UI 和 UX 上的設計差異之外，圖像設計，動畫，包括寫作在不同平台上也很不一樣。從圖 2.9 中我們可以看到，iOS 版本使用了最少的文字和圖示，而 Android 版本上則重點照顧了視覺設計和動畫。 Android 上也有更好的寫作體驗，讓使用者感覺被關注和重視。
總的來說，這兩個公司都建立了高度面向平台的應用。然而，面向平台方法也有着很多的不足。現在我們先來看看最後一種方法：混合方法。
在多平台設計上應用混合方法往往是在以上提及的兩種方法中尋求平衡，當然它也是最複雜的一種。在這種情況下，設計師需要考慮兩種使用者：熟悉你的産品的，和從未使用過你的産品的。第一種使用者更貼近你的品牌，第二種使用者更習慣于所使用的平台。混合方法的設計師是品牌興趣和使用者體驗的外交官。他們需要找出哪些使用者界面元素讓它們的産品與衆不同，還要找到針對平台同時不影響品牌效應的解決方案。這一類公司中，Facebook 和 Spotify 是我們将要讨論的例子。
Facebook 由于其品牌在多平台網絡下大量的使用者有着巨大的影響。這就是為什麼結合品牌效應和平台适應性的混合方法看起來是最佳的選擇。顯而易見的，Facebook 使用了混合的方法。現在的 iOS 和 Android 端應用看起來很相似，但對每個平台的使用者來說都十分“原生”。
圖表 3.1 Facebook 布局（左 iOS vs 右 Android）
第一眼看去，品牌的特點通過在不同平台使用同樣的圖示和顔色得以展現。Facebook 在這兩個平台上的差別主要在于導航欄的位置。如你在圖 3.1 中所見到的，iOS 版本使用的是标準的 iOS風格的導航欄和标準搜尋欄。在 Android 平台下則是和多數應用一樣，通過位于頂部的選擇欄完成的。
圖表 3.3 Facebook 搜尋欄（左 iOS vs 右 Android）
在搜尋欄上的導航按鈕同樣是針對每個平台的。從圖 3.3 上看，iOS 上的 Facebook 應用有着一個取消鍵，在 Android 上這個取消鍵變成了一個 iOS 使用者所不熟悉的箭頭。這些針對平台的設計使新使用者很容易能了解這些互動該如何完成。
Spotify
Spotify 是一個流行的音樂播放應用，它有着針對品牌很鮮明的設計。他們的設計師側重于品牌特點的設計，并遵循各個平台的設計準則來設計一些應用中特殊的功能。
圖表 3.4 Spotify Home Page（左 iOS vs 右 Android）
第一眼觀看圖 3.4 就不難發現，Spotify 的設計師在統一兩個平台上的界面和視覺設計上做的非常好。這個頁面上的設計在兩個平台上保持了高度的一緻性。
圖表 3.6 Spotify 注冊頁
盡管大力的貼近了品牌特點，Spotify 也迎合了使用者在互動和界面上的預期，并且很多的應用了各個平台特色的使用者界面元件。從圖 3.6 中看，Spotify 對生日和性别資訊的文本框設計在兩個平台上是不一樣的。在 iOS 上使用了傳統的下拉菜單設計，而在 Android 上是一個彈出的菜單。卡片類的彈出菜單是 Material Design 的一個設計标準。
消息和活動頁面（左 iOS vs 右 Android）
此外，内容的優先級設計在兩個平台上也不太一樣。從圖 3.7 中看，在 iOS 上這一部分是在最進階菜單中的，而在 Android 版本中這兩個部分被放在了一個叫“通知”的菜單選項中。Spotify 的設計師遵循了 Google 的設計來簡化 Android 版本上的資訊流。
經過了這些案例分析以後，我們會針對每種方法分析優勢與缺點。在這部分，我會推薦在何種情況下一個公司最好使用哪種方法，并分析使用每種方法的優缺點。
專注于品牌而忽略平台規定的準則建立 UI 是最快，最容易，也是最經濟的方法。這些 UI 元件将會自由的被設計建立，進而給予使用者更個性化的的設計和互動體驗。由于沒有遵循平台的設計準則，在多個平台上産品也可以給予使用者同樣的觀感，幫助公司建立更好的品牌效應。然而，自定義的 UI 在開發過程中更難，需要公司比往常投入更多的精力。對于一些使用者來說，可能還有體驗上的問題，因為你們的界面和通用的界面并不相似。
**推薦：**開發一個樹立品牌的應用，并且将保持品牌一緻性作為第一準則是沒有任何問題的。
因為開發人員熟悉每個平台的标準界面，面向平台的方法擁有更快的開發周期。當一個應用釋出之後，使用者很容易就能明确互動的方法和常見的方法很相似，更容易上手。但當你遵循平台的設計準則，在設計 UI 方面你需要投入更多的時間和金錢。設計師完成設計後，很多 UI 元件需要針對不同平台重新設計和建立。此外，當設計師遵循設計準則之後，所有東西都看起來像是 Google / Apple 制造了。看起來，對于想要樹立品牌的公司來說，這個方法并不是十分實用的。
推薦： 當你需要快速投放市場并快速的在激烈競争的市場中搶占使用者的時候，這個方法是最好的。
混合的方法在你需要使用者體驗為品牌代言時，是最佳的選擇。我相信這是通往多平台适應的最佳路線。它允許設計師切身為平台，使用者和品牌考慮。此外，這個方法可以讓設計師很好的平衡諸如品牌和平台設計規則，進而釋出優秀的産品。然而，混合方法由于在開發過程中經常需要變更，是以最長的時間和工作量去完成。對于沒有足夠的資金和時間的初創公司來說這樣太難了。
**推薦：**在我看來，如果設計師可以根據回報和評估增加／改進産品的設計而沒有太多的限制，這個方法是近乎完美的。
盡管多方面結合（上文所提的多種）的方法看起來是應選的路線，我還是要說文中所提的方法沒有一種是完美的。有時，傾向于品牌效應而忽視的平台标準會造成一些“特别的”使用者體驗問題。而針對平台開發的方法，有時候看起來太刻闆太标準化，對品牌提升沒什麼效果。我舉例的這個使用混合方法開發的應用顯然是一個多平台适應的成功案例。然而，這樣的例子少之又少，因為它需要很多時間和投資的支援。
是以，當我們考慮使用任何一種方法時，設計師都應該考慮産品設計的政策和實際開發中的限制（比如，缺少能勝任的開發人員，資金和時間上的限制等等）。當你身處一個小公司，團隊需要極高的品牌效應的時候，面向品牌的方法顯然是較好的（被推薦的）。從另一方面講，當你的公司想要快速增增長使用者的時候，面向平台開發的方法便是更好的。如果你的團隊并沒有什麼明顯的限制，而隻是想要進一步提升你們的産品品質，那麼混合的方法來開發是最好的。
<b></b>
<b>原文釋出時間為：2016年09月10日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>