UI設計中Android和IOS設計差異總結

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

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

　　1、安卓用戶的使用習慣不太適應iOS的設計，導致使用時遇到阻礙，任務流程失敗率變高。
 

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

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

　　文章大綱如下所示：
 

　　1、視覺風格和理念
 

　　2、支付規(guī)則
 

　　3、推送規(guī)則
 

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

　　5、手勢區(qū)別
 

　　6、組件風格
 

　　7、組件用法
 

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

　　以功能驅動設計
 

　　留白可以使重要的內容和功能更加醒目、更易理解。使一個應用看起來更加聚焦和高效，如下圖1所示。
 

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

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

 

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

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

　　在這些設計基礎上，構建出視覺層級、視覺意義以及視覺聚焦。

 

　　2、支付規(guī)則
 

　　當App含有虛擬商品，那么用戶購買方式也不一樣。
 

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

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

 

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

　　3、推送規(guī)則
 

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

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

 

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

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

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

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

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

 

　　而安卓版則可以調取文件夾，選擇對應的文件發(fā)送。如下圖所示，qq給好友發(fā)送文件時，直接進入手機的文件夾中找到對應的文件
 

　　5、手勢區(qū)別
 

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

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

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

 

　　6、組件風格的差異性
 

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

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

 

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

 

　　7、組件用法
 

　　7.1搜索欄
 

　　android常使用搜索圖標，用戶點擊圖標進入搜索欄界面。
 

　　iOS直接以輸入框的形式展示，用戶點擊激活輸入框，從視覺的角度上看，iOS的搜索欄視覺更強化，更容易引導用戶搜索。

 

　　7.2警示對話框

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

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

 

　　7.3卡片
 

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

 

　　7.4toast
 

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

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

 

　　7.5導航欄
 

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

　　iOS版的返回箭頭(中間沒有一杠)，返回箭頭之后為上一級界面的標題。導航欄中間的標題為當前界面的標題。

 

　　7.6發(fā)送按鈕
 

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

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

 

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

 

　　7.7更多操作
 

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

 

　　總結：
 

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