要建立最佳的原生應用程式設計,您應該牢記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中的按鈕樣式
“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)。
左-Instagram on iO;右 -Instagram on Android
但有一點是顯而易見的 - 使用原生元件為兩個作業系統設計移動應用程式要快得多。是以,最好花時間對應不同的系統平台設計而不是開發一個應用程式模型,因為一個應用程式模型是Apple的人機互動指南和Google的Material Design元件的混合,然後由于自定義元素而花費大量時間進行開發。
想要檢視本機設計應用示例,其中我們使用本機元素以及具有強大樣式的自定義界面?通路我們的Dribbble 和Behance 頁面,以更好地了解我們的能力。
原文釋出時間為:2018-10-18
本文作者:SteelKiwi Inc.
本文來自雲栖社群合作夥伴“
安卓巴士Android開發者門戶”,了解相關資訊可以關注“
”。