旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

時間:2020-09-22來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-09-22點擊量:作者:Gella

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

  只做一套的會存在兩個問題:
 

  1、安卓用戶的使用習(xí)慣不太適應(yīng)iOS的設(shè)計,導(dǎo)致使用時遇到阻礙,任務(wù)流程失敗率變高。
 

  2、如果設(shè)計師或者產(chǎn)品經(jīng)理有的異常場景狀態(tài)沒有想到,導(dǎo)致安卓開發(fā)沒有組件調(diào)用,為了省事就直接調(diào)用安卓自帶組件,導(dǎo)致整個產(chǎn)品在視覺風(fēng)格上面既有產(chǎn)品風(fēng)格的組件又有安卓系統(tǒng)的組件,統(tǒng)一性差。
 

  所以設(shè)計師在設(shè)計過程中,針對兩端的差異性,可以單獨將具有差異性的Android部分做出來,保持兩端的差異性。今天AAA教育郭老師就總結(jié)了一下android和iOS差異性。
 

  文章大綱如下所示:
 

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

  2、支付規(guī)則
 

  3、推送規(guī)則
 

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

  5、手勢區(qū)別
 

  6、組件風(fēng)格
 

  7、組件用法
 

  1、視覺風(fēng)格和理念iOS通過使用留白、簡化UI、使用無邊框按鈕等方式使得呈現(xiàn)的功能更加清晰。
 

  以功能驅(qū)動設(shè)計
 

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

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  2、支付規(guī)則
 

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

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

  3、推送規(guī)則
 

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

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

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

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

  5、手勢區(qū)別
 

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

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7、組件用法
 

  7.1搜索欄
 

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7.2警示對話框

  android對話框文案左對齊,按鈕文案右對齊。
 

  iOS對話框文案居中對對齊,按鈕也都居中對齊。

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7.3卡片
 

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7.4toast
 

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7.5導(dǎo)航欄
 

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7.6發(fā)送按鈕
 

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

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  7.7更多操作
 

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

 

UI設(shè)計中Android和IOS設(shè)計差異總結(jié)

 

  總結(jié):
 

  以上是針對iOS和android端部分設(shè)計的差異性總結(jié)。如果需要做兩套設(shè)計,那么應(yīng)該如何設(shè)計呢?可以先做一套iOS的,然后針對android端的,組件涉及到不同的地方進(jìn)行全局替換。例如長按操作,android使用菜單,iOS使用底部操作列表。對話框、底部操作列表和toast等組件進(jìn)行全局替換即可。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖