同一個App,為什麼iOS 和Android 的互動操作有那麼大的差別?本文将用大量原生設計案例,為你一一說明它們為什麼應該這樣做,趕緊學起來!
了解并适當結合平台規範與優勢,才能做到最佳的使用者體驗。
為了建立最佳的原生 APP,就需要你牢記 iOS 和 Android 平台之間的差異。這些平台差異不僅在視覺層面有所不同,在結構和流程上也有差別。牢記這些差異,才能給原生應用以最佳的使用者體驗。
适用于 iOS 和 Android 的原生應用具有特殊的系統内置功能。 Apple 和 Google 的規範建議盡可能使用平台标準控件:頁面布局,标簽欄,分割線,表格視圖,集合視圖和拆分視圖。 使用者熟悉這些控件在每個平台上的一般操作方式,是以如果使用标準控件,使用者将會非常直覺的知道如何使用。 本文将聚焦于 iOS 和 Android 上的互動設計模式之間的差別,闡明 iOS 和 Android 上的應用看起來不同的原因,以及它們為什麼應該這樣做。 另外,本文還将提供原生應用設計示例,以幫助你更好的了解本文所寫的内容。
一、導航模式的差異
在界面之間切換是移動應用中的常見操作。考慮 iOS 和 Android 原生應用控件規範的差異,對于導航模式的設計很關鍵。 Android 裝置底部有一個全局導航欄, 使用導航欄中的後退按鈕是傳回上一個界面或步驟的簡便方法,它适用于所有 Android 應用。
△ 全局導航欄(Android)
對比 Apple,設計方法卻截然不同。 iOS 沒有全局導航欄,是以我們不能指望像 Android 原生控件那樣能支援全局傳回。 這個特性就會影響到 iOS 應用的設計,應用中需要設計一個導航欄,并在左上角加上一個傳回按鈕。
△ iOS上的傳回按鈕
嚴格來說,iOS 也有一個傳回的全局操作,直接在界面上右滑即可傳回上一級頁面。(譯者注:這個特性我原來還真不知道,現在已經用的很順手了。)
△ 全局傳回操作(iOS)
在這種情況下,iOS 和 Android 之間的差別在于,在 iOS 裝置上頁面的右滑是傳回上一級,而在 Android 上則是切換标簽。
為了保持與其他移動應用的一緻性,一定要記住平台之間的差異。
△ 左滑操作切換标簽(Android)
二、應用内部的導航模式在iOS和Android上是不同的
在 Material Design 設計規範中有一些不同的導航模式。在 Android 應用中被大家熟知的導航模式是抽屜和标簽形式的組合。
抽屜導航其實是一個菜單,通過點選漢堡圖示,然後從左側或右側滑出。标簽欄一般位于标題欄的下方,使得内容能夠很好地被管理,通過标簽欄,使用者可以對應用的視圖,資料集和功能進行切換。
△ 左側就是抽屜導航;右側是标簽欄
在 Material Design 中還有一個元件叫做底部導航。這個元件對于安卓原生應用來說也非常重要。底部的菜單項很容易點選和操作。但是安卓規範其實不建議同時使用底部導航和标簽,因為它可能會在導航時引起混亂。
△ 底部導航(Material Design)
在 Apple 的人機互動規範中,沒有類似抽屜菜單的标準導航控件。相反,Apple 則建議将全局導航放在标簽欄中。标簽欄放在應用的底部,讓應用的核心功能能夠快速切換。
通常,底部欄标簽不會超過5個。正如你看到的那樣,這個元件非常像安卓端的底部導航,隻是在 iOS 中這種形式的導航更加常用。
△ iOS的兩種常見導航形式,分段控制和底部标簽欄
雖然在兩個作業系統中都有類似的功能(切換标簽和分段控制,底部導航和标簽欄),但導航形式仍然是 iOS 和 Android 之間的主要差別之一。 兩者之間存在一些客觀差異,例如 Android 中有全局導航欄而在 iOS 中卻沒有,以及兩者在視覺上的差異。
Apple 認為,常用導航入口應該盡可能的外置,一些使用者不常用的功能才需要被放進漢堡菜單中。而對比安卓規範,通常會把主要導航也放在漢堡菜單中。
三、改造标準控件需要額外的開發時間,使用者也缺乏使用經驗
如果希望應用中的每個元素在各個平台上看起來都一樣,那麼将需要額外的開發工作來建立最佳的移動應用設計。最麻煩的是涉及到預設控件,比如單選按鈕、複選框、tab切換等等,這些控件需要一個定制的視圖來實作顯示 Android 上類似 iOS 的控件或 iOS 上類似 Android 的控件。
每個平台的互動方式各有其獨特性。好的設計是尊重不同平台使用者習慣的設計。在為 iOS 和 Android 設計移動應用時,一定要記住平台之間的差異,這樣才能設計出滿足使用者期望的應用。
兩個平台差異的一個例子是日期選擇器。安卓使用者對 iOS 中常見的老虎機形式的日期選擇器并不熟悉。在 Android 中使用這種類型的日期選擇器還需要重新布局,這樣無形中增加了開發的難度和時間,并使界面看起來與系統風格格格不入。
△ 左邊是iOS标準日期選擇器; 右邊是Android标準日期選擇器
△ 左邊是iOS标準選擇器;右邊是Android标準選擇器
四、iOS和Android中的按鈕樣式
在 Android 設計規範中有2種不同樣式的按鈕——扁平的和凸起的。這些按鈕分别用在不同的場景下。在 Android 中,按鈕上的文字一般都是全大寫。在 iOS 原生應用的按鈕中有時也能找到大寫的文字,但更多的情況是出現在标題上。
△ 左邊是标準的Android按鈕;右邊是标準的iOS按鈕
還有一種非常有特點的按鈕類型——在 Android 上叫做浮動按鈕,在 iOS 上叫做活動按鈕。浮動按鈕用來展示應用的主要操作。例如,在郵件 APP 中寫郵件,或者在社交 APP 中發狀态都會用到這個浮動按鈕。而在 iOS 中與之類似的按鈕則叫做活動按鈕,通常會放在底部導航的中間。
△ 左邊是标準的iOS活動按鈕;右側是标準的Android浮動按鈕
五、iOS與Android底部操作視圖的差異
在 Android 中有兩種不同類型的底部操作視圖:模态視圖和常駐視圖。模态視圖又有兩種不同類型:具有不同操作内容的模态清單和使用者點選「共享」圖示後顯示的應用清單。在 iOS 上也能找到類似的元件,但是在設計風格和布局上差異比較大。
△ 左邊是标準的Android底部菜單視圖;右邊是标準的iOS标準菜單視圖
六、在觸摸範圍和系統網格之間存在的差異
iOS 和 Android 的觸摸範圍略有不同(iOS 最小的觸摸範圍為44px @1x,Android 為48dp/48px @1x)。Android 規範還建議将所有元素以 8dp 作為規範基線來設計。
七、字型差異
iOS 的系統預設字型是 San Francisco 而 Android 系統預設字型則是 Roboto。Noto 是能在 Android 的所有界面中都适用的字型,包括那些不支援 Roboto 字型的語種。正是因為有差異,是以需要密切關注不同平台的排版和布局規範。
△ 左邊是Android字型; 右邊 是iOS字型
八、互動細節差異
給使用者的第一印象通常都是建立在設計層面。
建立使用者的第一印象對産品來說很重要。在 APP 開發設計過程中,我們可以通過做好微互動和動畫來為使用者建立一個有吸引力的體驗。
讓我們明确下兩個平台的互動和動畫的規則和建議,并檢視官方給出的一些标準示例。
焦點和優先級——互動設計的目的是将使用者的注意力集中在應用中對他真正重要的事情上, 兩個平台都不鼓勵濫用動畫,因為過多的動畫容易分散使用者的注意力,也會讓使用者感到焦慮。
一緻性和層級結構——請務必記住,互動設計最重要的是通過确定元素之間的層級關系,幫助使用者在應用中找到他們想要的。貼心,流暢,不突兀的頁面跳轉才能保證使用者能輕松操作。對于這一點來說,兩個平台都對動畫規範做了一些合理的建議。
盡管 Android 的 Material Design(材料設計規範)與 iOS 的 Human Interface(人機互動規範)在使用動畫方面的規範非常相似,但仍有一些明确的差異。 使用者會習慣于特定平台的動畫跳轉方式并認為隻有他們習慣的那些才是最自然的。
這就是為什麼要特别注意平台間的互動形式,這些小的細節可以很好的提升使用者體驗,使得在不同平台上都能給使用者帶來自然的體驗。
九、iOS
iOS 使用者習慣于 iOS 中的微動畫,像平滑過渡,橫豎屏轉向以及模拟實體規律等等。當應用出現無意義的或者違反實體常識的動畫時,使用者就會感到困惑。 例如,使用者希望通過下拉來重新整理界面,希望通過右滑來傳回。iOS 設計規範強烈建議,除非正在建立諸如遊戲之類的沉浸式體驗,否則還是盡可能的按照官方給出的動畫規範來設計。
十、Android
依照 Material Design 規範,一個元素在轉換過程中分為傳出,傳入或常駐,不同的元素也會有不同的轉換方式。
動畫能夠引導使用者的注意力。當界面發生變化時,動畫建立了過渡前後的連續性。導航的切換是界面中非常重要的元素。它們通過清晰的結構來幫助使用者找準自己的方向。例如,當一個 UI 元素展開以填充整個螢幕時,展開後的新界面是點開元素的子級,傳回可以回到父級。
△ 子父級切換的例子(Android設計規範)
在父級界面上,嵌入的子元素會在點選時擡起并在适當的位置展開。将過渡的重點放在子界面上,明确子父級之間的關系。
共享相同的父級界面(例如标簽切換時的内容)一緻性的移動能夠強化他們的關系。
标簽頁籤固定在一個位置不變,内容界面在水準方向上進行移動。
在應用的最上層,切換目标通常被分在主要任務(這些任務可能彼此不相關)上。這些界面通過改變不透明度和縮放值來進行适當的轉換。
總結
當然也有例外:一些 iOS 應用遵循 Android 設計規範(比如 Gmail)而一些 Android 應用則遵循 iOS 設計規範(比如 Instagram)。
△ 左邊是iOS版的Gmail,右邊是Android版的Gmail
△ 左邊是iOS版的Instagram,右邊是Android的Instagram
但其實顯而易見——使用兩個平台系統自身的元件設計應用,流程要快很多。是以,最好是花些時間了解下兩個平台不同的設計規範,而不是混合 iOS 和 Android 的元件模型,然後還得花很多力氣在開發上。