譯:原生iOS應用程式和原生Android應用程式設計之間的差異

艾維碼發表於2018-08-08

原文地址:https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca

要建立最佳的原生應用程式設計,您應該牢記iOS和Android平臺之間的差異。這些平臺不僅在原生應用程式的外觀方面有所不同; 它們在結構和互動方面也有所不同。您需要牢記這些差異,以通過原生應用程式設計給使用者提供最佳使用者體驗。

iOS和Android的原生移動應用程式具有各自作業系統平臺特殊的功能。Apple和Google的設計指南建議儘可能使用平臺標準導航控制元件:頁面控制元件,選項卡,分類控制元件,表檢視,組合檢視和拆分檢視。使用者熟悉這些控制元件是如何在每個平臺上執行的,因此如果您使用標準控制元件,您的使用者將直觀地知道如何操作您的應用程式。我們專注於iOS和Android上的互動設計模式之間的主要區別,以闡明iOS和Android上的應用程式看起來不同的原因 - 以及它們為什麼應該這樣做。我們還提供原生應用程式設計模板和原生移動應用程式示例,以幫助您視覺化我們正在談論的內容。

導航模式的差異

在螢幕之間跳轉是移動應用程式中的常見操作。在設計導航模式方面,考慮到iOS和Android不同的應用程式設計指南是非常重要的。Android裝置底部有一個通用導航欄。使用導航欄中的後退按鈕非常簡便的返回上一個螢幕或步驟,它幾乎適用於所有Android應用程式。

全域性導航條(Android)

另一方面,Apple的設計方法卻截然不同。沒有全域性導航欄,因此我們無法使用原生iOS應用程式設計中的全域性後退按鈕返回。這會影響iOS移動應用程式的設計。螢幕內部應該有一個左上角是一個返回按鈕的原生導航欄。

返回按鈕(iOS)

Apple還在應用程式中引入從左到右的滑動手勢,以跳轉到上一個螢幕。此手勢幾乎適用於所有應用。

從左向右滑動手勢 - 返回(iOS)

在這種情況下,iOS和Android之間的區別在於,在iOS裝置上的原生應用程式中,從左向右滑動手勢將返回到上一個螢幕。相同手勢在Android裝置上通常用於切換選項卡。但與iOS不同的是,Android裝置上有一個底部導航欄,後面的按鈕會返回上一個螢幕。

記住平臺之間的這種差異以保持與其他移動應用程式的一致性始終很重要。

從左向右滑動手勢 - 在標籤之間切換(Android)

iOS和Android中應用內導航模式有所不同

“Material Design Guidelines”中有一些不同的導航選項。Android應用程式中使用的一個眾所周知的導航模式是抽屜導航和選項卡的組合。

抽屜導航是一個通過點選漢堡選單圖示從左側或右側滑入的選單。選項卡位於螢幕標題的正下方,內容組織處於較高階別,允許使用者在應用中切換不同的檢視,資料集和功能。

左—抽屜導航選單, 右—選項卡

Material Design中還有一個名為bottom navigation的元件。此元件對於Material Design應用程式也很重要。底部導航欄使您可以輕鬆瀏覽和切換頂級檢視。Material Design Guidelines不建議同時使用底部導航和選項卡,因為它可能會在導航時造成混淆。

底部導航(材料設計)

在Apple的UI指南中,沒有與抽屜導航選單類似的標準導航控制元件。相反,Apple的指南建議將全域性導航放在選項卡中。選項卡顯示在應用程式螢幕的底部,可以在應用程式的主要類別之間快速切換。

通常,選項卡包含的類別不超過五個。我們可以看到,此元件類似於Material Design中的底部導航,但更常用於iOS應用程式中。

左上角 - iOS分段控制; 右下角 - iOS標籤欄(HIG)

雖然在兩個作業系統中都有類似的功能(選項卡和類別控制,底部導航和標籤欄),但導航仍然是iOS和Android之間的主要區別之一。存在兩個客觀差異,例如Android中的全域性導航欄及其在iOS中的缺乏,以及這兩個系統的視覺差異。

Apple認為主要導航元素應位於前臺,漢堡包選單應僅用於儲存不是使用者執行的日常任務的功能。不同的是,Android應用程式通常的做法是在漢堡選單中隱藏主導航。

自定義標準控制元件需要額外的開發時間,並且對於使用者來說是不熟悉的

如果您希望應用程式中的每個元素在不同平臺上看起來相同,那麼您需要進行額外的開發工作才能建立最佳的移動應用程式設計。最複雜的用例涉及預設控制元件,如單選按鈕,核取方塊,切換按鈕等,並且需要自定義檢視實現,以在iOS上顯示類似iOS的控制元件或類似Android的控制元件。

每個平臺都有其獨特的互動。在每個作業系統中尊重使用者習慣的設計是良好的設計。在為iOS和Android設計移動應用程式時,牢記平臺之間的差異非常重要,這樣您就可以設計出滿足使用者期望的應用程式。

在兩個平臺上的一個不同的元素的設計示例是日期選擇器。Android使用者不熟悉iOS中常見的老虎機卷軸式日期選擇器。在Android中使用這種樣式的日期選擇器需要自定義檢視,這可能會變得複雜,增加了開發的複雜性和持續時間,並使您的應用程式設計看起來與Android平臺不同。

左 - 標準iOS控制元件; 右 - 標準的Android控制元件

左 - 標準iOS選擇; 右 - 標準的Android選擇

iOS和Android中的按鈕樣式

“Material Design Guidelines”中有兩種型別的按鈕 - 平面和凸起。這些按鈕用於不同的情況。Material Design中按鈕上的文字通常都是大寫的。有時我們在本機iOS應用程式中也會找到大寫按鈕文字,但通常我們找到的是標題大小寫。

左 - 標準材料設計按鈕; 右 - 標準的HIG按鈕

還有一種型別的按鈕 - Android上的浮動操作按鈕和iOS上的呼叫操作按鈕。浮動操作按鈕表示應用程式中的主要操作。例如,郵件應用程式中的撰寫按鈕或社交網路應用程式中的新帖子按鈕可以是浮動操作按鈕。iOS應用程式中主要操作的類似設計是行為按鈕,該按鈕位於標籤欄的中心。

左側 - iOS中的標準CTA按鈕; 右 - Android中的標準浮動操作按鈕

Android中的原生底部列表與iOS中的活動檢視操作列表之間的差異

Android中有兩種型別的底部列表:list列表和表格列表。list底部列表有兩種型別的內容:具有不同情景操作的列表和在使用者點選“共享”圖示後顯示的應用程式列表。我們可以在iOS活動檢視操作列表中找到相同型別的內容。但這些元件看起來與Android底部列表不同。

左 - 標準材料設計底部列表; 右 - iOS應用中的操作表

解析度的差異

iOS和Android的解析度指南略有不同(iOS為44px @ 1x,Android為48dp / 48px @ 1x)。Material Design Guidelines還建議將所有元素與8dp方形基線網格對齊。

排版差異

San Francisco是iOS中的系統字型。Roboto是Android中的標準字型。Noto是Chrome和Android不支援的所有語言的標準字型。您需要密切關注每個平臺的排版和佈局規範。

左 - 材料設計排版; 右 - HIG排版

Microinteractions

在設計方面,第一印象通常是使用者的最後印象。

這就是為什麼從一開始就吸引使用者的注意力如此重要。在應用程式設計和開發過程中,我們可以通過微互動和動畫為使用者建立一個非常著迷的體驗。

讓我們明確關於兩個平臺的互動和動作的主要規則和建議,並檢視詳細示例。

重點和重要性 - 互動將使用者的注意力集中在應用程式中真正重要的內容上,因此只有在真正需要時才需要使用它們。兩個平臺都不鼓勵過多的動畫,因為它們會分散使用者的注意力並使使用者感到緊張。

一致性和層次結構 - 請務必記住,互動通過顯示元素彼此之間的關係來幫助使用者在應用中定位自己。從一個螢幕到另一個螢幕的自然,流暢的過渡使使用者保持沉浸其中。動作嚮導為如何執行操作提供了有用的建議。

儘管使用微動畫的基本建議在“Material Design Guidelines”和“人機互動指南”中非常相似,但仍有一些明確定義的差異。使用者習慣於這些特定於平臺的過渡,並覺得十分自然。

這就是為什麼要特別注意熟悉的互動是十分重要的,這將改善使用者體驗並在每個平臺上看起來自然。

iOS

iOS使用者習慣於iOS中使用的微妙動畫,例如平滑過渡,裝置方向的流暢變化和基於物理的移動。當移動沒有意義或似乎違反物理定律時,iOS使用者會感到迷失方向。例如,如果使用者通過從螢幕頂部向下滑動來顯示檢視,則他們希望能夠通過向後滑動來退出檢視。HIG強烈建議,除非您正在建立諸如遊戲之類的沉浸式體驗,否則您可以使自定義過渡動畫與內建動畫相媲美。

Android

根據“Material Design Guidelines”,在轉換期間,轉換的介面元素分為傳出,傳入或固定。專案所屬的類別會影響其轉換方式。

動畫引導使用者注意。當UI改變外觀時,動作在轉換之前和之後提供元素的放置和外觀之間的連續性。導航轉換是與介面進行整體互動的重要元素。它們通過表達應用程式的層次結構幫助使用者定位自己。例如,當元素擴充套件以填充整個螢幕時,擴充套件行為表示新螢幕是子元素。它展開的螢幕是它的父元素。

導航轉換是與介面進行整體互動的重要元素。它們通過表達應用程式的層次結構幫助使用者定位自己。例如,當元素擴充套件以填充整個螢幕時,擴充套件行為表示新螢幕是子元素。它展開的螢幕是它的父元素。

父級檢視對子檢視過渡的例子(Material Design Guidelines)

在父螢幕上,嵌入的子元素在觸控時會抬​​起並在適當的位置展開。

過渡將重點放在子螢幕上,同時加強了父子檢視之間的關係。

共用相同父級的螢幕(例如相簿中的照片,個人資料中的部分或流程中的步驟)一致地移動以加強他們的關係。檢視從一側滑入,同時同級的檢視在相反方向上離開螢幕。

選項卡位於同一高度,並在水平方向上一起移動

在應用程式的頂層,選項通常被分組為主要任務(可能彼此不相關)。這些螢幕通過更改不透明度和比例等值來轉換。

結論

當然也有例外:一些iOS應用程式遵循Material Design Guidelines(如Gmail),一些Android應用程式遵循人機互動指南(如Instagram)。

左 — Gmail on iOS; 右 — Gmail on Android

左-Instagram on iO;右 -Gmail on Android

但有一點是顯而易見的 - 使用原生元件為兩個作業系統設計移動應用程式要快得多。因此,最好花時間對應不同的系統平臺設計而不是開發一個應用程式模型,因為一個應用程式模型是Apple的人機互動指南和Google的Material Design元件的混合,然後由於自定義元素而花費大量時間進行開發。

想要檢視本機設計應用示例,其中我們使用本機元素以及具有強大樣式的自定義介面?訪問我們的DribbbleBehance頁面,以更好地瞭解我們的能力。

相關文章