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

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

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

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

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

下圖為Gmail主界面截圖。

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

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

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

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

iOS原生郵箱很好地遵循了iOS設(shè)計(jì)指南設(shè)計(jì)原則的以下兩點(diǎn)。

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

而在動(dòng)效方面，iOS的動(dòng)效相比于Material來說更克制。

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

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

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

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

分別從以下7個(gè)點(diǎn)進(jìn)行說明：

1. 視覺風(fēng)格和理念

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

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

在微信首頁(yè)，兩端的列表設(shè)計(jì)使用的是同一套。唯一的差異點(diǎn)是搜索功能。

iOS通過點(diǎn)擊輸入框觸發(fā)搜索流程。android通過點(diǎn)擊搜索圖標(biāo)觸發(fā)搜索，這也是android設(shè)計(jì)指南所倡導(dǎo)的，但是這種設(shè)計(jì)會(huì)弱化搜索功能。

目前整體設(shè)計(jì)趨勢(shì)是將搜索輸入框外顯以強(qiáng)化搜索功能。當(dāng)然也有一些應(yīng)用的搜索場(chǎng)景優(yōu)先級(jí)低，采用通過搜索圖標(biāo)觸發(fā)搜索。

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

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

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

淘寶兩端的設(shè)計(jì)風(fēng)格也只有一套設(shè)計(jì)。但涉及到兩端系統(tǒng)設(shè)置差異性的時(shí)候，會(huì)對(duì)應(yīng)的差異性對(duì)待。

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

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

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

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

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

2. 支付規(guī)則

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

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

3. 推送規(guī)則

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

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

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

iOS系統(tǒng)每個(gè)app之間沒有文件夾管理概念，導(dǎo)致無法找到對(duì)應(yīng)app的文件夾。

如果iOS版app想要發(fā)送文件時(shí)，則無法選擇對(duì)應(yīng)的文件夾里面的文件。但因?yàn)橛辛薸Cloud的存在，可以通過iCloud選擇文件。

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

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

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

5. 手勢(shì)區(qū)別

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

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

6. 組件風(fēng)格

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

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

7. 組件用法

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

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

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

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

1）toast

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

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

iOS一般在界面居中位置，為了強(qiáng)化反饋狀態(tài)，一般會(huì)有圖標(biāo)搭配對(duì)應(yīng)的文案。

2）警示對(duì)話框

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

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

3）發(fā)送按鈕

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

4）更多操作

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

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

三、雙端總結(jié)

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

2）針對(duì)于兩端特殊的地方?？苫趇OS設(shè)計(jì)稿，然后針對(duì)android端的組件和手勢(shì)進(jìn)行全局替換。例如菜單、對(duì)話框、底部操作列表和snackbar等進(jìn)行全局替換即可。