Android和iOS有什么設(shè)計(jì)差異點(diǎn)
發(fā)布時(shí)間:2022-01-07 10:14 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 5003

由于設(shè)計(jì)師、產(chǎn)品經(jīng)理使用的移動(dòng)設(shè)備大部分是iPhone,所以在做設(shè)計(jì)時(shí),容易忽略Android和iOS的差異,按照iOS的規(guī)范進(jìn)行設(shè)計(jì),兩端只做一套。

只做一套的會(huì)存在兩個(gè)問題:

  • 安卓用戶的使用習(xí)慣不太適應(yīng)iOS的設(shè)計(jì),導(dǎo)致使用時(shí)遇到阻礙,任務(wù)流程失敗率變高。
  • 如果設(shè)計(jì)師或者產(chǎn)品經(jīng)理有的異常場(chǎng)景狀態(tài)沒有想到,導(dǎo)致安卓開發(fā)沒有組件調(diào)用,為了省事就直接調(diào)用安卓自帶組件,導(dǎo)致整個(gè)產(chǎn)品在視覺風(fēng)格上面既有產(chǎn)品風(fēng)格的組件又有安卓系統(tǒng)的組件 ,統(tǒng)一性差。

所以設(shè)計(jì)師在設(shè)計(jì)過程中,針對(duì)兩端的差異性,可以單獨(dú)將具有差異性的Android部分做出來,保持兩端的差異性。


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


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

留白可以使重要的內(nèi)容和功能更加醒目、更易理解。使一個(gè)應(yīng)用看起來更加聚焦和高效,如下圖1所示。

讓顏色簡(jiǎn)化UI,使用一個(gè)主題色。比如備忘錄中用了黃色,高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性,如下圖2所示。

使用無邊框的按鈕,通過文案、顏色以及操作指引標(biāo)題來表明該無邊框按鈕的可交互性。如下圖3所示。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

Material 通過構(gòu)建系統(tǒng)化的動(dòng)效和空間合理化利用,并將兩個(gè)理念合二為一,構(gòu)成了實(shí)體隱喻。

在基本元素的處理上,借鑒了傳統(tǒng)的印刷設(shè)計(jì):排版、網(wǎng)格、空間、比例、配色、圖像等,使用這些基礎(chǔ)的平面設(shè)計(jì)規(guī)范。

在這些設(shè)計(jì)基礎(chǔ)上,構(gòu)建出視覺層級(jí)、視覺意義以及視覺聚焦。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!


支付規(guī)則


當(dāng)App含有虛擬商品,那么用戶購買方式也不一樣。

對(duì)于iOS用戶來說,支付渠道必須走蘋果支付平臺(tái),并抽取30%作為服務(wù)費(fèi)。而android版不用走平臺(tái),使用支付寶、微信支付等第三方支付平臺(tái)即可。

如下圖所示,網(wǎng)易云音樂android版,支付時(shí)可以選擇支付寶、微信、京東等支付方式。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

而iOS端則只能走蘋果官方平臺(tái)(App Store)。對(duì)于公司來說,抽成30%意味著收入下降,但是這種走平臺(tái)支付也有一個(gè)好處,可以連續(xù)訂閱,自動(dòng)續(xù)期扣錢。

推送規(guī)則


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

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

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

這意味著iOS端,即使app的后臺(tái)殺死,依舊可以接收到推送。而android端則需要保持后臺(tái)在線才能收到推送消息。

文件選取規(guī)則


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

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

如下圖所示,微信如果想發(fā)送文件到微信好友時(shí),點(diǎn)擊文件,進(jìn)入iCloud選擇文件發(fā)送即可。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

而安卓版則可以調(diào)取文件夾,選擇對(duì)應(yīng)的文件發(fā)送。如下圖所示,qq給好友發(fā)送文件時(shí),直接進(jìn)入手機(jī)的文件夾中找到對(duì)應(yīng)的文件

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!


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

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

如下圖所示,安卓針對(duì)列表更多操作時(shí),采用長(zhǎng)按手勢(shì),長(zhǎng)按出現(xiàn)菜單。

而iOS左右滑動(dòng)出現(xiàn)隱藏的操作。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!


組件風(fēng)格的差異性


iOS和android整體上視覺差異很明顯。

android組件整體呈現(xiàn)通過投影產(chǎn)生層級(jí)區(qū)分,如下圖所示。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

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

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!


組件用法

1. 搜索欄

android常使用搜索圖標(biāo),用戶點(diǎn)擊圖標(biāo)進(jìn)入搜索欄界面。

iOS直接以輸入框的形式展示,用戶點(diǎn)擊激活輸入框,從視覺的角度上看,iOS的搜索欄視覺更強(qiáng)化,更容易引導(dǎo)用戶搜索。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

2. 警示對(duì)話框

android對(duì)話框文案左對(duì)齊,按鈕文案右對(duì)齊。

iOS對(duì)話框文案居中對(duì)對(duì)齊,按鈕也都居中對(duì)齊。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

3. 卡片

android針對(duì)于提示語,通常放在卡片里面,而iOS放在卡片外面。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

4. toast

android的tost一般在界面底部,文案左對(duì)齊(非居中對(duì)齊)。安卓除了toast還有snackbar 。

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

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

5. 導(dǎo)航欄

Android版的返回icon,通常用左箭頭(中間有一杠)。同時(shí)導(dǎo)航欄的標(biāo)題位于左邊箭頭之后,標(biāo)題為當(dāng)前界面的標(biāo)題。

iOS版的返回箭頭(中間沒有一杠),返回箭頭之后為上一級(jí)界面的標(biāo)題。導(dǎo)航欄中間的標(biāo)題為當(dāng)前界面的標(biāo)題。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!
6. 發(fā)送按鈕

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

下圖為android版發(fā)送流程。

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

下圖為iOS版發(fā)送流程:

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!

7. 更多操作

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

Android和iOS有哪些設(shè)計(jì)差異點(diǎn)?來看高手總結(jié)的7個(gè)不同!


總結(jié)


以上是針對(duì)iOS和android端部分設(shè)計(jì)的差異性總結(jié)。

如果需要做兩套設(shè)計(jì),那么應(yīng)該如何設(shè)計(jì)呢?

可以先做一套iOS的,然后針對(duì)android端的,組件涉及到不同的地方進(jìn)行全局替換。

例如長(zhǎng)按操作,android使用菜單,iOS使用底部操作列表。對(duì)話框、底部操作列表和toast等組件進(jìn)行全局替換即可。

文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC