新手必看!iOS 和 Android的 APP 設計有什麼差異?

瞭解並適當結合平臺規範與優勢,才能做到最佳的用戶體驗。在《最新Android & 

iOS設計尺寸規範》一文中介紹APP 設計規範https://ds.mockplus.cn),同時本文也是一些補充。

爲了創建最佳的原生APP,就需要你牢記iOS和Android平臺之間的差異。這些平臺差異不僅在視覺層面有所不同,在結構和流程上也有區別。牢記這些差異,才能給原生

應用以最佳的用戶體驗。

本文將聚焦於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設計規範)

在父級界面上,嵌入的子元素會在點擊時擡起並在適當的位置展開。將過渡的重點放在子界面上,明確子父級之間的關係。

共享相同的父級界面(例如標籤切換時的內容)一致性的移動能夠強化他們的關係。

need-to-insert-img

標籤選項卡固定在一個位置不變,內容界面在水平方向上進行移動

在應用的最上層,切換目標通常被分在主要任務(這些任務可能彼此不相關)上。這些界面通過改變不透明度和縮放值來進行適當的轉換。

總結

當然也有例外:一些iOS應用遵循Android設計規範(比如Gmail)而一些Android應用則遵循iOS設計規範(比如Instagram)。

左邊是iOS版的Gmail,右邊是Android版的Gmail

左邊是iOS版的Instagram,右邊是Android的Instagram

但其實顯而易見——使用兩個平臺系統自身的組件設計應用,流程要快很多。因此,最好是花些時間瞭解下兩個平臺不同的設計規範,而不是混合iOS和Android的組件模型,然後還得花很多力氣在開發上。

設計規範系統網址:https://ds.mockplus.cn

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章