針對不同的系統(tǒng)，以往產(chǎn)品團隊可能會基于Android與iOS的差異而產(chǎn)出不同的設計稿，那么現(xiàn)在，雙端差異設計是否還有必要延續(xù)？在實際的產(chǎn)品設計中，Android和iOS的雙端差異設計又是如何實踐的？一起來看看作者的分析與解讀。

在2023年的今天，討論Android和iOS雙端差異性的聲音越來越?。ɑ疽严В瑖鴥?nèi)的流行趨勢是兩端逐漸一端化，一個App一套設計稿，以此降低設計成本和維護成本。

大部分設計團隊似乎不再進行雙端差異性設計，但是實際工作中是這樣嗎？本篇文章通過Google、iOS原生以及目前國內(nèi)主流App雙端，來看看Android和iOS的雙端差異設計實際情況。

一、Google和Apple官方產(chǎn)品差異

通過Google旗下的Gmail和iOS旗下的原生郵箱來看兩端的差異性。

下圖為Gmail主界面截圖。

從上圖可以看出，Gmail設計整體風格：注重材料質(zhì)感。通過設計將功能元素強化，整體非常風格化。整體頁面呈現(xiàn)強烈對比色彩，通過水波設計更加強化其材料質(zhì)感。

Gmail很好地遵循了Material Design 設計指南風格。Material推崇的抽屜導航也很好的沿用在Gmail中。而在國內(nèi)，很多產(chǎn)品只有底部標簽頁不夠用時，才考慮抽屜導航，其原因是抽屜導航整體曝光點擊率不如底部標簽欄。

Gmail水波動畫效果讓人深刻。Material的動效是描述空間關(guān)系、功能以及提供優(yōu)雅流暢的交互效果。

下圖為iOS原生郵箱的主界面截圖。

iOS原生郵箱很好地遵循了iOS設計指南設計原則的以下兩點。

1. 遵從：UI應該有助于用戶更好地理解內(nèi)容并與之交互，并且不分散用戶對內(nèi)容本身的注意力。
2. 清晰：去掉多余的修飾，突出重點，以功能驅(qū)動設計。

而在動效方面，iOS的動效相比于Material來說更克制。

而在組件使用方面，Android端更多操作，常用菜單。iOS端常用底部操作列表。

二、國內(nèi)主流產(chǎn)品雙端差異性

根據(jù)QuestMobile TRUTH中國移動互聯(lián)網(wǎng)數(shù)據(jù)庫2022年9月份數(shù)據(jù)。目前國內(nèi)頭部互聯(lián)網(wǎng)公司月活躍用戶數(shù)top3分別為微信、淘寶和抖音。

接下來我們主要以微信、淘寶和抖音三款產(chǎn)品來看Android和iOS兩端的差異性。

分別從以下7個點進行說明：

1. 視覺風格和理念

iOS通過使用留白、簡化UI、使用無邊框按鈕等方式使得呈現(xiàn)的功能更加清晰。減少使用邊框、漸變和陰影，使界面盡可能輕量化，從而突顯內(nèi)容。以功能驅(qū)動設計，突出重點內(nèi)容并傳達交互性。

在兩端日趨統(tǒng)一的今天，微信、抖音和淘寶兩端沒有較大的差異性。

在微信首頁，兩端的列表設計使用的是同一套。唯一的差異點是搜索功能。

iOS通過點擊輸入框觸發(fā)搜索流程。android通過點擊搜索圖標觸發(fā)搜索，這也是android設計指南所倡導的，但是這種設計會弱化搜索功能。

目前整體設計趨勢是將搜索輸入框外顯以強化搜索功能。當然也有一些應用的搜索場景優(yōu)先級低，采用通過搜索圖標觸發(fā)搜索。

在發(fā)現(xiàn)頁面，列表設計維持一套。沒有差異化。唯一的不同是，右上角的Android端多了搜索和下拉菜單操作。

整體看來，微信的設計風格和理念基本保持一套，僅搜索有些差異。右上角功能展示入口未做統(tǒng)一。

抖音兩端主界面設計風格基本保持一套，即使出現(xiàn)兩端功能有部分差異，大概率是兩端開發(fā)進度和灰色發(fā)版等導致的。

淘寶兩端的設計風格也只有一套設計。但涉及到兩端系統(tǒng)設置差異性的時候，會對應的差異性對待。

如下圖，Android端的開啟系統(tǒng)通知的圖例使用更貼合Android定制系統(tǒng)的圖。iOS端的開啟系統(tǒng)通知使用的是iOS系統(tǒng)通知的圖。

唯一有點缺憾的時候，兩端圖例狀態(tài)欄用反了。

從上面三個app中，可以看出均采用一套設計稿，只是某些地方有少許的差異。

網(wǎng)易云音樂，兩端差異性比前面說到的三款App會大很多。點擊效果采用material典型的水波效果。導航欄也是按照傳統(tǒng)的Android設計規(guī)范。

但是網(wǎng)易云音樂也是一套設計稿，只是有些地方會有一定的差異性。

2. 支付規(guī)則

由于iOS內(nèi)購規(guī)則限制，虛擬商品只能通過蘋果支付平臺購買，并抽取30%作為服務費。而android端不用走平臺，使用支付寶、微信支付等第三方支付平臺即可。

如下圖所示，網(wǎng)易云音樂android版，支付時可以選擇支付寶、微信和京東等支付方式。iOS端只能走蘋果應用商店支付。

3. 推送規(guī)則

iOS系統(tǒng)的消息推送必須依靠蘋果的APNS（Apple Push Notification Service）服務器來完成，信息與app之間的交互是通過蘋果的服務器完成的。

Android的消息推送相比之下更加開源，在不選擇使用GCM的情況下，app的消息推送就需要在自己或者是第三方服務器與設備之間建立一條長連接，通過長連接進行推送。

4. 文件選取規(guī)則

iOS系統(tǒng)每個app之間沒有文件夾管理概念，導致無法找到對應app的文件夾。

如果iOS版app想要發(fā)送文件時，則無法選擇對應的文件夾里面的文件。但因為有了iCloud的存在，可以通過iCloud選擇文件。

如下圖微信，由于微信文件本地都存儲過，所以還可以直接調(diào)用微信聊天記錄的文件。

通過iCloud云盤，可以調(diào)用發(fā)送iCloud的文件。

而Android端則可以調(diào)取文件夾，選擇對應的文件發(fā)送。如下圖所示。

5. 手勢區(qū)別

android和iOS的手勢區(qū)別比較大。對于列表隱藏的操作，安卓長按較多，iOS左右滑動較多。

如下圖所示，微信android端對于列表更多操作，通過長按，喚起菜單。微信iOS端通過左滑喚起操作。

6. 組件風格

iOS和material整體上視覺差異很明顯。android是一種注重卡片式設計、紙張的模擬、水波動效比較突出。使用了強烈對比色彩的設計風格。通過水波動效，強化其材料質(zhì)感，如下圖所示。

iOS則通過簡潔的視覺層級、單純的分割線區(qū)分層級關(guān)系。如下圖的界面組件樣式。

7. 組件用法

Android和iOS在一些組件使用上面有明顯區(qū)別。這也是兩端產(chǎn)品比較大的區(qū)別。為什么會有這么明顯的差別？

設計師基本都是iOS設計稿為主。組件都是偏iOS規(guī)范，iOS開發(fā)調(diào)用會方便很多，但對于Android開發(fā)來說成本比較高。所以涉及到某些組件時，Android開發(fā)為了省事會替換成對應的android系統(tǒng)組件。

如果強制android開發(fā)使用iOS設計稿。那么遇到異常場景狀態(tài)沒有設計時，為了省事就直接調(diào)用安卓自帶組件，導致整個產(chǎn)品在視覺風格上面既有產(chǎn)品風格的組件又有安卓系統(tǒng)的組件 ，統(tǒng)一性差。

所以在一些特定組件上差異化是比較合適的。以下是常見的組件差異性用法。

1）toast

android的toast一般在界面底部，文案左對齊（非居中對齊）。android除了toast還有snackbar ，android端提示設計趨勢，snackbar有取代toast趨勢，主要原因是snackbar視覺提示更明顯，同時多了操作按鈕，使用場景更加廣泛。

如下圖同一個操作提示，Android使用snackbar，iOS使用toast。

iOS一般在界面居中位置，為了強化反饋狀態(tài)，一般會有圖標搭配對應的文案。

2）警示對話框

android對話框文案左對齊，按鈕文案右對齊。iOS對話框文案居中對齊，按鈕也都居中對齊。幾年前微信Android端警示對話框遵循android規(guī)范。現(xiàn)在改成和iOS端保持一致。

下圖抖音依舊保持了android端的規(guī)范。

3）發(fā)送按鈕

Android版微信信息發(fā)送的按鈕放在了工具欄上，ios版微信的信息發(fā)送按鈕內(nèi)嵌在鍵盤上。

4）更多操作

針對于更多操作時，android長按通常出現(xiàn)菜單，而iOS長按通常出現(xiàn)底部操作列表。

如下圖淘寶消息查看圖片，Android長按出現(xiàn)菜單。iOS長按出現(xiàn)底部操作列表。

三、雙端總結(jié)

1）幾年前微信Android端導航欄、菜單、警示對話框等都遵循material的設計規(guī)范，而如今這些都改為和iOS端保持一致。國內(nèi)主流產(chǎn)品雙端差異越來越小。這種方式會讓設計效率更高，更利于設計稿的維護。

2）針對于兩端特殊的地方。可基于iOS設計稿，然后針對android端的組件和手勢進行全局替換。例如菜單、對話框、底部操作列表和snackbar等進行全局替換即可。