跨平臺UI適配有不同的情景
我們都知道，iOS和Android之間的戰爭沒有贏家。如果一個產品在一個平臺上成功，那麼它毫無疑問的會被移植到另一個平臺。有時候開發人員甚至不用等待，同時在兩個平臺上釋出應用。對於設計師而言，這隻意味著一件事情——應用的UI和UX需要適配到另一個平臺，以確保產品設計語言的一致性。
跨平臺UI適配有三種不同的情景：1.保持品牌的一致性；2.符合平臺特性；3.尋求兩者之間的平衡。這篇文章通過最熱門的app分析這三種方法，讓你瞭解什麼方法最適合你。
一、品牌導向法
堅持品牌，和忽視“父級規則”是最快、最簡單、追劇成益的方法，但是隻是設計到設計UI，而沒有涵蓋軟體工程。自定義的使用者介面是相當複雜的，相對於用標準空間，開發工作要付出更多代價。
此外，選擇品牌作為UI設計的優先選項是一個相當危險的方法。我們把這種應用叫做“teenagers”（青少年），因為他們不遵守規則，有時候相當煩人。他們認為自己是與眾不同的，但是實際上他們和其他在那個年齡的人一樣。但是也有例外。
VSCO CAM
Visual Supply公司在2012年釋出了第一個iOS應用VSCO Cam. 一年後，這款流行的相片編輯app被移植到了安卓平臺。安卓版的VSCO Cam幾乎完全複製了iOS版的介面。有趣的是，兩個版本的VSCO Cam都沒有遵守該平臺的設計規範。
VSCO Cam： iOS（左）、安卓（右）
在這種情況下，拋開平臺的規則是有利品牌識別的。VSCO Cam的創始人認為，創造力是非常重要的，而這也說明了他們所構建的產品的願景。他們致力於開發一個能延續品牌的app，而這個品牌是藝術社群的一部分。這就是為什麼VSCO Cam的品牌創意的完整性更為重要。
VSCO Cam拍攝介面：iOS（左）、安卓（右）
INSTAGRAM
和VSCO Cam一樣，instagram 首先在app store釋出，然後才在安卓平臺可用。嚴格根據iOS規範設計的iOS版本經歷了巨大的成功；在這種情況下，為蘋果的支持者設計的典型UI變成了instagram與眾不同的特色。這就解釋了為什麼instagram的開發者沒有花很多的時間為安卓平臺打造一套獨特的UI。即使應用程式的整體美學不符合安卓使用者的期待，instagram在谷歌商店獲得了超過一天百萬的下載量。
Instagram首頁： iOS版（左）、安卓版（右）
現在instagram的iOS版和安卓版看起來像雙胞胎，但是這裡仍有一些元素冷僵他們區分開來。例如，搜尋欄看起來像兩個平臺原生的。最新的安卓版的相機頁面和iOS版的有一些不同。更重要的是，iOS版的instagram的標誌是位於導航欄的中間，而安卓版的是在工具欄的左側。
Instagram的搜尋介面：iOS版（左）、安卓版（右）
安卓版的instagram沒有遵循安卓平臺的設計規範，但是仍然使使用者覺得便捷。
Instagram的視訊介面：iOS版（左）、安卓版（右）
WIRE
wire是skype的創造者共同創立和支援的另外一個通訊應用。wire和競品沒有太大的不同，除了漂亮的、令人印象深刻的一使用者介面，它的使用者多是非主流青少年。wire的設計者用了不規範的表達解決方案，主要的目的是儘可能的影響使用者看見的東西。
“我們在建立一種優雅的、使用的溝通工具，通過所有方式——文字、聲音、視訊和媒體。媒體是wire的核心體驗，所以我們選擇了減少不必要的雜亂內容。我們還把大量的精力花在了字型和可讀性。”
——Priidu Zilmer，wire的首席設計
使用者在第一次開啟app尋找導航時需要一些猜測。但是另一方面，wire使用了大量微互動，讓使用者體驗更多樂趣和吸引力。簡化的聯絡人搜尋，好看的色調，自主選擇背景圖和背景顏色，都有助於構建wire的獨特的世界，而區別於其他線上溝通應用所建立的準則，例如telegram，whatsapp，viber，和其他典型的溝通應用程式。
Wire iOS（左）、安卓（右）
“我們在設計上投入了很多，我們不可能做到三種完全不同的方式（iOS、安卓、桌面/web），尤其是平臺自身的轉換常常轉移目標。太接近他們，意味著你突然發現不同步——例如當在iOS7和Android L上執行。
同時，我們知道不遵守平臺轉換的風險。因此，我們正在不斷努力，通過迭代和調整去尋找正確的平衡點，使我們的設計在跨躍平臺時轉換的很好。”
——Priidu Zilmer，wire的首席設計
wire的iOS版和安卓版的介面是完全一致的，包括使用者體驗設計，和圖示。wire沒有參考任何原始的設計準則（除了可點選元素的大小）。wire是使用者介面設計比平臺要求更重要的另外一個例子。
Priidu Zilmer指出，wire的設計團隊覺得，如果單純的按照平臺的設計準車，那麼不可能提升使用者在生活中與人們聯絡和分享。
Wire iOS（左）、安卓（右）
VSCO Cam, Instagram, Wire選擇專注於品牌和使用者介面的設計。但是這是否意味著一個小型的創業團隊複製他們的經驗能夠一樣成功冷？在一些特定的情況下，我相信以品牌為嚮導的方法是成功的策略。
在什麼時候我們應該遵循品牌導向的方法呢？
使用者會通過多個渠道使用你的產品（桌面、ipad、iphone、安卓）。
往往，品牌採用多渠道與客戶互動，是遵循了品牌導向的方法。然而，只有同一使用者通過不同的平臺和裝置（ipad，安卓，網頁）訪問產品才是合理的。例如，iBroadcast的使用者，通過iOS裝置，安卓裝置，甚至桌面裝置訪問它。各個平臺上的iBroadcast的版本看起來相似，因為iBroadcast的最高優先順序是，平滑地從一個平臺轉向另一個平臺，這個過程中然使用者感覺不到任何差異。
“使用者會在我們的服務的平臺（iOS、安卓、網頁）之間跳轉。我希望平臺之間是一致的，儘可能我們的使用者感到輕鬆。”
——Rod Collen，iBroadcast的創始人
iBroadcast iOS（左）、安卓（右）
如果你的應用是款平臺的，並且屬於這種型別，你可能會在使用品牌導向方法之前三思。例如，Facebook在跨平臺UI適配設計時使用混合的方案。原因是，facebook的使用者傾向於只使用一種平臺（iOS或安卓），而不是兩種平臺都適用。
自定義使用者介面提供了直觀的使用者互動，並在同一時間吸引人的眼球。
有研究表明，直觀的互動有四個部分組成：直覺、可語言性、不費力、神奇的體驗。這些部分的組成，使設計師創造無縫的使用者體驗，不管他們是否遵循平臺的規則指南。畢竟一些自定義元件可以提供更優秀的表象或互動體驗。
同樣值得一提的是，平臺之間的差異可能是為什麼app在一個平臺上讓人覺得方便在另一個平臺上卻不方便的原因。約會應用HowAboutWe的開發者認為，只有適用自定義的UI，才能真正確保應用的風格和佈局在不同安卓系統版本，製造商，螢幕大小解析度上的一致。原生的使用者介面元件有一定的侷限性，當你可以不斷創新，來改善產品的使用者體驗。
例如，一個預算管理的安卓應用，Receipt。有不同尋常的下拉動畫，忽略了所有平臺的規則指南，但這個下拉動畫確實吸引了使用者。
“我對平臺的規範感到不滿意，而且我覺得我提出更好的解決方案。一般來說，只有當我覺得按我的做法會有明顯的好處的時候，我才會忽略平臺的規範，例如向使用者提供坑好的反饋，刪除不必要的步驟，或者防止流程被打斷。大部分是用相關元素替換彈窗活著不必要的螢幕跳轉。”
——Bogdan Mihaiciuc，Receipt的創始人。
獨特又好看的UI，他們會給使用者留下很好的第一印象。使用者覺得“My Day”這個倒數應用吸引人的原因之一就是其獨特的使用者介面，這在兩個平臺上都是相同的。
Citymapper有著出色的介面設計，這使得它從同類產品中脫穎而出。
“對我們來說，一起餓都是關於平衡。然使用者感覺對我們的使用者介面感到熟悉，但又同時營造出一種明確獨特的生命，關於做為品牌，我們是誰。
我覺得，獨特的設計語言的價值總是被低估。你說citymapper?是，綠色的那個。這本身就是巨大的價值。
有時候設計師們對畫素的完美和設計的’正確’過於小心翼翼。生活總是混亂的，創造產品也是同樣的，所以我們為什麼要隱瞞事實呢？我們都是同樣的世界裡生活的，建立產品的人和使用產品的人。”
——Gilbert Wedam，Citymapper的設計負責人。
當把UI適配到另一個平臺，你應該把自己放進使用者的角色裡，不管你使用什麼方法。能夠穿件無摩擦的使用者體驗同時保持品牌的一致性是一個傑出設計師的美德。
二、平臺導向法
與以品牌導向相反，根據平臺的特性標準要求要求更多的時間和金錢（在這裡我們只討論UI設計）。當匯入設計去另一個平臺時，很多UX和UI元素需要根據目標平臺規範重建。
在這種情況下，焦點從品牌認同轉向了使用者熟悉的平臺體驗，因為使用者已經習慣平臺的規則。在慣用的平臺上，他們對設計規則的有直觀把握，你可以把這個作為你的優勢——Telegram和WhatsApp在這點上都做的很好。
TELEGRAM
Telegram是一個流行的通訊應用，由Pavel Durov創立，俄羅斯最大的社交網路背後的男人。telegram 的設計風格很簡約，並提供私人通訊安全加密協議，這給app增加巨大的優勢。
talegram的iOS版和安卓版同時推出，專注於功能，而不是視覺外觀。因此，他的設計者堅持平臺導向的方法。
同一個產品的iOS 和安卓版，作為iOS和安卓應用可以有所不同。iOS版完全遵循了iOS設計規範，看起來就是一個專門為iOS7或8設計的應用：在導航欄的右邊有一個圖示，是為了輸入新資訊的，左邊有一個編輯按鈕；在螢幕的底部有一個切換的tab欄，在上面你可以看見當前頁面的名稱。
Telegram： iOS （左）、 Android（右邊）
安卓版是按照谷歌material design設計規範來設計的。在導航欄有一個漢堡包選單圖示，裡面有app的各個部分的導航連結，在導航欄的右邊有一個簡單的搜尋按鈕，在螢幕的底部有一個懸浮按鈕——material design的核心和靈魂。
Telegram 的聯絡人列表頁面： iOS （左）、 Android（右邊）
telegram app使用了平臺的標準控制元件和UX互動元素。我猜設計師遵循了最通用的可用性原則去設計這個app。
Telegram 的設定介面： iOS （左）、 Android（右邊）
另一個通訊app是whatsapp，資訊應用的傳教士，現在被facebook收購。iOS版whatsapp在2009年釋出，緊跟其後的是黑莓和塞班版本，安卓版直到2012年才釋出。whatsapp看起來像是一個安卓手機使用者會認可並愛上的app。
whatsapp現在在每個平臺上都可用，他堅持平臺嚮導法是很自然的事情。iOS 版和安卓版看起來很不同。設計師在跨平臺適配上做了很傑出的工作。他們改變了ux、訊息展示、圖示、元素和選單的位置等等的所有。
WhatsApp： iOS （左） 、 Android（右）
現在，iOS 版對應了iOS 8的標準。安卓版則根據material design設計規範進行了視覺更新。
KOMMOT
kommot是為遠足者和自行車者設計的app，是德國的一個創業團隊做的。2010年先有了iOS，一年之後有了安卓版本。kommot的老版本沒有任何同類競品。
Komoot： iOS（左）、Android（右）
iOS 版和安卓版根據個平臺的設計規範，做了最好的設計。應用中包塊大量的旅遊的內容：地質地圖，轉成導航，景點建議，等等。所有的功能都必須很容易被使用者訪問。
“我們決定根據每個平臺的規則，因為各個平臺的UI更容易預測，這樣對使用者來說會簡單一些。而且，蘋果和google對使用者介面的設計有偏好。這個對於在蘋果的app store和google play的推廣非常重要。”
——Dmytro Prudnikov, Komoot的UI／UX設計師
Komoot已經多次出現在蘋果app store的推薦裡。而且，他還被提名為google play 2014最佳app，Komoot現在是google play德國商店裡最頂級的app之一。
現在，通過這些示範性的app，討論一下什麼情況下堅持以平臺規範為準則進行設計最合理。
什麼情況下，我們應該遵循平臺導向法？
高度競爭的市場環境促使你快速迭代使用者快速增長。
即使你需要時間重新設計應用程式的概念，平臺導向的方式可以使你的開發人員更快速的實現你的想法。。一旦一個程式被啟動，使用者會找到一個熟悉的互動方式。不僅如此，你不需要等待靈感來臨去設計一些特別的東西。你所要做的就是遵守設計指南。
蘋果和谷歌推出的一些設計趨勢在使用者中被證明是成功的。
一個聰明的品牌進入谷歌市場，即使你的app是從iOS版本上移植的，也必要改成符合material design規範以示誠意。但是這種流行趨勢也吸引了蘋果使用者的目光。因此，我們可以看到也有一些iOS上的app體現了material design的一些元素和風格。我提這件事只是為了強調一款app遵循設計規範是十分重要的，即使這意味著偶爾忽視平臺的具體細節。
你的應用具有複雜的功能和使用者介面。
任何移動應用都應該儘可能簡單容易使用，即使它負載很多功能。使用平臺導向法使有很多功能內容的app看起來井井有條。舉個例子，例如Accent Kit，英國的口音和方言訓練設計的app，包含多重功能：音訊播放、錄製、文字、影象等所有旨在對使用者的口音學習有幫助。當要移植到安卓平臺時，我們只能考慮使用平臺導向法。否則，使用者會很難找出程式提供的所有功能。
Accent Kit 安卓版（左）、iOS版（右）
堅持平臺的規範，為使用者提供原生的平臺經驗，使我們能滿足使用者的期望。
有些app會成功，有些並不會。平臺導向法對那些想保留品牌影響力的公司，並不重視那麼可怕。但是畢竟這個品牌是你謀生的工具，不要讓你的app變成“老師的走狗”，遵守規則但得不到同學的好感。
三、混合法
有了一點獨特性，我們就能足夠對應平臺的細節，並且保持品牌價值。混合法來適應多種平臺，是在以上兩種方法之間尋找一個平衡點，它也是最複雜的一個。
在這種情況下，你應該考慮兩種使用者：一種是熟悉你的產品的人，另一種是從沒用過產品的人。前者追隨品牌，而後者習慣了其他平臺的特性。選擇混合法的設計師像外交官一樣，代表了品牌的利益，同時也旨在促使和使用者的友好關係。他們需要找出哪些使用者介面元素能使產品脫穎而出，並找到不會傷害品牌的跨平臺的具體解決方案。
我們看看SoundCloud, Facebook, Airbnb 和 Viber的設計師們是如何處理這個挑戰的。
SOUNDCLOUD
Soundcloud是一個著名的音訊流app，最初的時候，它同時推出了iOS和安卓版本。雖然Soundcloud的設計師在為每個平臺做適配設計，但他們在保持品牌完整性上做了非常大的努力。
“在移動應用市場，我們的目標是在使用者熟悉的iOS和安卓裝置上找到一個很好的平衡，而這也很好反應了我們品牌的模式。例如，波形播放器好像我們品牌的簽名一樣，和競品做出了很好的區分。”
——Sylvain Grande, Soundcloud的產品VP&創始人
在不同平臺的不同特徵中，iOS標準tab欄是在螢幕的底部（有一些設計修改），搜尋欄是在螢幕的頂部。安卓則是在螢幕頂部有一個典型的工具欄，漢堡選單在工具欄的左邊，搜尋圖示點選會擴充套件成搜尋欄。無論是在iOS平臺還是在安卓平臺的app，都使用平臺特定的互動。
SoundCloud：iOS（左）、Android（右）
SoundCloud播放介面：iOS（左）、Android（右）
facebook移動應用的前生是用html5做，但是這是一個很大的錯誤，作為公司的創始人 Mark Zuckerberg也承認。最終，facebook決定致力於提升在iOS、安卓、以及其他平臺的體驗。
一方面，facebook的品牌具有巨大的影響力。另一方面，這是一個使用者數量龐大的跨平臺網路。這則是為什麼混合法能最和諧的結合品牌認證和多種平臺。
iOS版和安卓版app看起來差不多，但是也都讓人感覺非常像所屬平臺的原生應用。facebook為了使用者，遵循蘋果和谷歌的設計規範。由於內容是facebook app的重要特徵，設計者決定用簡約的設計風格，給內容留下更多的空間。
Facebook ：iOS（左）、Android（右）
iOS版使用了典型的iOS導航欄在螢幕的底部，和一個標準的搜尋欄在螢幕的上部。安卓版使用一個tab bar切換標籤，和大多數安卓應用一樣在螢幕的上方。
AIRBNB
airbnb是增長最快的初創公司之一，他獲得了強有力的市場地位，很大程度上是因為其簡單性和出色的使用者體驗。
airbnb的設計師選擇了混合法來設計移動服務。品牌本身是獨一無二吸引全世界各地人們的關注。它的內容使app獲得成功。因此，airbnb的創造者們讓他們的產品在各種平臺上都用起來很便利。
“我們希望我們的app讓我們的使用者感到熟悉，這也意味著要找到他們習慣於使用它們的通性。我們也想要讓他們感到是在體驗同一個airbnb。
平臺之間的連貫性——手機，網路，郵件等等——對我們建立的自信和信任很重要，因此我們決定不僅僅被各平臺的規範所驅動。貫穿的、連續的、同一的體驗造就了品牌。”
——Katie Dill，airbnb的首席體驗設計師。
第一眼看過去，airbnb的iOS版和安卓版的主要區別是導航欄的位置：iOS在底部，安卓版在頂部。
Airbnb：iOS（左）、Android（右）
如果不是為了這個小但重要的特殊性，我認為airbnb的app使用的是品牌導向法。然而，如果我們仔細看，iOS版和安卓版之間的差異性更為明顯。
Airbnb的搜尋介面：iOS（左）、Android（右）
鑑於airbnb的功能比較簡單，與平臺相關的細節會使app複雜化。
Airbnb的導航：iOS（左）、Android（右）
VIBER
差點忘記了一個令人震驚的流行的通訊應用！我相信viber是混合設計法的最佳代表。
不像whatsapp和telegram，viber的設計師完美的體現了品牌識別的同時遵循了平臺對UI的設計要求。混合法讓他們創造了一個在任何平臺都可識別、並且使用者體驗很好的app。換句話說，使用者不會混淆viber和其他競品app，他們在轉化平臺的時候也不會遇到什麼困難。
Viber：iOS（左）、Android（右）
在兩個平臺上都使用自定義顏色和圖示來實現品牌識別。為了使iOS 版和安卓版都易於使用，導航欄的位置都是根據平臺的特性決定的。
Viber的聯絡人列表頁面：iOS（左）、Android（右）
viber不僅強烈的堅持了品牌，還完美的滿足了使用者對介面和互動的期望，並十分注重功能。
什麼時候應該使用混合法？
當在根據反饋和評價逐漸發展和完善產品設計的時候。
混合法意味著使用者體驗在各個平臺上連續作用，這是一個基礎的設計迭代方法。這意味著你應該分析指標去了解使用者是如何與你的產品進行互動的，定期更新改進，並保持增長率。迭代設計代表了一個迴圈過程：原型設計、測試、分析和提煉產品每一個版本。
混合法是在一個奇特的情況下，讓體驗稱為品牌的代言。這是我認為的最好的方法去進行跨平臺的完美適配。他能讓你找到平臺、品牌和使用者的真相。此外，使用這種方法可以改變品牌和平臺設計指南之間的平衡，作為結果，得到一個偉大的產品。
混合法的唯一缺點是，不太可能在初創的小團隊中實施。因為小型初創團隊通常承擔不起大量的時間和金錢來提升應用的設計。此外，我猜在一個app的第一個版本，不測試使用者對UI特徵也可能是一種幸運。
四、哪一種設計方法更好？
儘管混合法看起來像是最好的方法，我想說的是，文章中提到的方法沒有一個是完美的。
有時選擇品牌識別會導致特定的使用者體驗問題，無論你的app看起來多麼美麗。畢竟，使用者決定了一個選單是否應該滑進，刷哪裡會進入特定的功能，以及如何返回個人主頁。
app使用平臺嚮導的會導致app看起來過於程式化，對品牌識別沒有幫助。當從另一方面來說，使用平臺嚮導設計法最有可能獲得成功，特別是你的app有很多功能，並且以獲得大量使用者為目標。
我用來說明混合設計法的例子是成功的適配跨平臺應用例項。這種情況其實很少見。但是，這不意味著你不應該嘗試去獲得相同的結果。
當我們設計app時，我們應該總是記得，我們為了現實世界中真實的人真實的裝置而做的。事實上，這並不是說品牌，平臺，或是你的創意，很重要。唯一重要的使用者。他們並不關心你用了什麼方法去適配UI設計。不管我們喜歡與否，所有使用者只是對整個公司的體驗感興趣——當它是積極的時候，說明這個公司成功了。