APP設計在iOS和Android操作系統中的差異
本文主要講講iOS和Android兩個平臺的交互設計模式間的主要區別,并進一步闡述為什么會有這樣的區別。
要想設計出優秀的原生APP,就要牢記iOS和Android間的差異。這些差異除了體現在APP的視覺方面,還體現在APP的結構以及流程上。因此只有牢記了這些差異,才能為不同平臺的用戶設計出最佳使用體驗。
iOS和Android的原生APP都具有各自操作系統所特有功能。Apple和Google的設計指南都建議開發者盡可能使用平臺所提供的標準控件,比如:頁面控件、標簽欄、分段控件、列表、聚合視圖和拆分視圖。
用戶都比較熟悉這些控件在各自平臺上的運行規律,因此只要你采用了這些標準控件,用戶會比較輕松地學會如何使用你的APP。
所以接下來我們關注重點將集中在兩個平臺的交互設計模式間的主要區別,進而闡明為什么它們看起來不同的原因(以及它們為什么要這么做的原因)。另外我們還會通過原生APP的設計模板和設計案例來幫助讀者們更好地理解我們所描述的內容。
差異一:導航模塊
在不同頁面間進行切換是比較常規的操作。就導航模式而言,了解iOS和Android平臺間的設計指南的差異是很重要的。Android平臺在設備底部有一個通用導航欄,使用導航欄里的返回按鈕,會返回上一個頁面或步驟,它幾乎應用于所有的Android平臺APP上。
Global navigation bar (Android)
相反,Apple的設計方法則有著很大的不同。在iOS原生APP的設計中,是沒有全局導航欄的,因此我們就不能通過導航欄中的返回鍵返回到上一步。這影響了iOS 中APP的設計,其內部頁面需要一個在左上角有返回按鈕的原生導航欄。
Back button?(iOS)
不僅如此,Apple還在APP中加入了向右滑的手勢,以幫助用戶回到上一步,這個手勢也幾乎應用于所有的iOS APP中。
Left-to-right swiping gesture?—?go back?(iOS)
在這種情況下,iOS和Android平臺之間的差異在于:iOS設備的原生APP可以通過向右滑來返回到上一步,而Android的原生APP通過向右滑則只能進行標簽的切換。但與iOS不同的是,Android設備有一個全局導航欄,其上的返回按鈕可以幫助用戶返回到上一步。
記住不同平臺之間的差異,進而保證自家的APP與其他公司的APP有著一致性是非常重要的。
Left-to-right swiping gesture?—?switch between tabs (Android)
差異二:APP內置的導航
在Material Design指南中,有幾種不同的導航類型,比較知名的一個類型的就是抽屜式導航和標簽的結合。
抽屜式導航是一個菜單,通過點擊漢堡菜單圖標從頁面左側或右側滑出。標簽位于屏幕標題的正下方,可以使內容信息處于較高級別,以允許用戶在APP的不同視圖、數據集和不同功能之間進行切換。
Left?—?drawer navigation menu; right?—?tabs (Material Design)
Material Design還有一個底部導航的組件,該組件對于Android端原生APP也很重要。底部導航欄,讓用戶可以通過點擊實現在不同的一級菜單中進行瀏覽或切換。Material Design指南不建議同時使用底部導航和(頂部)標簽,因為它可能會對用戶造成混淆。
Bottom navigation (Material Design)
在Apple的人機界面指南中,并沒有與抽屜導航菜單類似的標準導航控件。相反,Apple的設計指南建議將全局導航放在標簽欄中,標簽欄放在APP的底部,可以在APP中的各個主要功能模塊之間進行快速切換。
通常,標簽欄包含的標簽不超過五個。我們可以看到,該組件類似于Material Design中的底部導航,但在iOS APP中更常用。
Top left?—?iOS segmented control; bottom right?—?iOS tab bar?(HIG)
雖然這兩個操作系統的導航模塊中有類似的元素(如標簽和分段控件、底部導航和標簽欄),但是導航仍是兩者的主要區別之一。兩者之間有著客觀存在的差異,比如:Android中的全局導航欄,而iOS中就沒有,另外,兩個系統之間的視覺風格也有所差別。
Apple認為主要導航元素應該前置,漢堡菜單應該僅用于用戶操作中的不常用的存儲功能。而另一方面,Android端APP中的通常做法是將主要導航隱藏在漢堡菜單中。
差異三:標準控件的自定義視圖
如果你希望APP中的每個元素在不同平臺上都看起來一樣,你需要額外的開發工作才能創建出最佳的APP設計體驗。最復雜的情況是,在Android平臺上展示iOS平臺上的默認控件,或在iOS平臺上展示Android平臺上默認控件(如單選按鈕、復選框以及切換按鈕等),這需要進行自定義控件的開發。
每個平臺都有其獨特的交互規范,好的設計是能夠尊重用戶在不同操作系統中的使用習慣的。在為iOS和Android進行設計APP時,牢記不同平臺之間的差異是很重要的,只有這樣,才能設計出滿足用戶期望的APP。
日期選擇器可以作為兩個平臺差異的案例,Android用戶是不熟悉iOS中常見的老虎機卷軸式的日期選擇器的,在Android APP中使用這種樣式的日期選擇器需要自定義視圖開發,這可能會變得復雜,增加了開發的復雜性和工期,并且會讓你的APP設計看起來與Android平臺有所不同。
Left?—?standard iOS controls; right?—?standard Android?controls
Left?—?standard iOS pickers; right?—?standard Android?pickers
差異四:按鈕風格
Material Design指南中有兩種類型的按鈕:扁平式按鈕和凸起按鈕。Material Design中按鈕的文案通常是大寫的,有時我們也會在iOS原生APP中看到大寫的按鈕文案。但事實上,在iOS中,我們通常會將標題大寫。
Left?—?standard Material Design buttons; right?—?standard HIG?buttons
還有一種類型的按鈕,在Android中叫做懸浮操作按鈕,而在iOS中叫做行為召喚按鈕。懸浮操作按鈕表示其是APP中的主要操作命令,例如:郵件APP中的寫郵件按鈕,或社交網絡APP中的發布新帖子按鈕。iOS APP中的主要操作的類似設計是行為召喚按鈕,該按鈕一般位于標簽欄的中間。
Left?—?standard floating action button in iOS; right?—?standard CTA button in?Android
差異五:底部列表(Android)與動作列表&行為視圖(iOS)
Android有兩種類型的底部列表:模態底部列表和永久底部列表。
模態底部列表有兩種類型的內容:有著不同操作的模態底部列表和用戶點擊分享按鈕后彈出的APP列表。我們可以在iOS中的動作列表和行為視圖中找到類似的內容類型,但是這些組件與Android底部列表看起來有所不同。
Left?—?standard Material Design bottom sheets; right?—?action sheet in iOS?app
差異六:熱區和網格
iOS和Android對點擊熱區的規定有著細微的差別(iOS:44px@1X,Android:48dp/48px@1x),Material Design指南還建議所有的元素要與8dp大小的基線方格對齊。
差異七:字體
iOS的系統字體是San Francisco,而Android的標準字體則是Roboto,Noto則是Chrome和Android對其不支持語言的替代字體,你需要密切關注每個平臺的字體和布局規范。
Left?—?Material Design typography; right?—?HIG typography
差異八:微交互
就設計而言,第一印象通常就是用戶的最終印象。
這就是為什么APP從一開始就要吸引用戶的注意力的原因。在APP設計和開發的過程中,我們可以通過微交互和動效來為用戶創造一個迷人的體驗。
先定義兩個平臺上的交互和動效的主要規則和建議,并通過具體的案例以加深理解。
專注和重要性。微交互能夠將用戶的注意力集中在APP中真正重要的內容上,因此只有在真正需要時才會使用它們。這兩個平臺都不鼓勵使用過多的動效,因為它們會分散用戶的注意力,并可能讓用戶感到緊張。
一致性和層次感。請務必記住,微交互通過顯示元素彼此之間的關系,來幫助用戶在APP中定位自己的位置。頁面之間的常見的、流暢的和不顯眼的過渡,可以使用戶持續參與到APP中,動效暗示用戶如何操作并為之提供有效的建議。
盡管在Material Design指南和人機界面指南中對使用微動畫的基本建議非常類似,但而這之間仍有一些明確的差異。用戶已經習慣了在這些特定平臺之間的切換,并將其視為理所當然的事情。
這就是為什么關注熟知交互顯得特別重要的原因,這些熟知的交互能夠提升用戶體驗,并且看起來很自然。
iOS
iOS用戶習慣于iOS中的微交互,例如:平滑過渡、不同APP之間的流暢切換以及基于物理原理的滑動。當移動沒有意義或似乎違反物理規則時,iOS用戶就會感到困惑。
例如:如果用戶想通過下滑來打開某個界面,則他們會希望能夠通過滑回去的操作來關閉該界面。人機界面指南強烈建議,除非是開發諸如游戲之類的沉浸式體驗,否則你需要將自定義動效的實現效果達到與iOS內置的動效相媲美的水平。
Android
根據Material design設計指南的規定,在轉場的過程中,界面元素分為轉出、轉入或永久等三個類型。不同的類型會影響其自身的轉換方式。
動效引導用戶的注意力。當UI改變外觀時,動效需要在轉場前后提供元素的位置和外觀之間的延續性。導航轉場是所有有著界面的交互中最重要的元素,他們通過展示APP的層次結構來幫助用戶確定自己的位置。
例如:當一個元素填充到整個頁面中時,填充效果能夠暗示新頁面是子頁面,原頁面是其父級頁面。
Example of a parent-to-child transition (Material Design Guidelines)
在父級頁面中,其嵌入的子元素會在點擊時升起并展開。轉場讓用戶的注意力集中在子頁面中,同時加強了父級與子級頁面之間的關系。
有著相同父級的頁面動效采用同樣的動效來加強它們之間的關系(如相冊中的照片、個人資料中的模塊以及流程中的步驟),類似的頁面從同一側進來,離開時則是相反的反向。
Tabs are at the same elevation and move together on the horizontal
在APP的頂層架構中,用戶目標通常被分組為不同的主要任務(這些任務可能彼此不相關),這些頁面切換可以通過改變頁面的不透明度和縮放比例來實現。
結論
當然也有例外:一些iOS APP會遵循Material Design指南中的設計規則(如Gmail),也有一些Android APP會遵循人機界面指南中的設計規則(如Instagram)。
Left?—?Gmail on iOS; right?—?Gmail on?Android
Left?—?Instagram on iOS; right?—?Instagram on?Android
但有一點是顯而易見的:使用各操作系統的默認控件設計的APP要快得多,因此,最好花點時間在APP設計上,而不是單純制作一個APP模型(該模型是Apple的人機界面指南和Google的Material Design混合體),而后由于自定義元素而浪費大量的開發時間。
原文作者:SteelKiwi Inc.
原文鏈接:https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca
翻譯:元設計
校審:行云
本文由 @元設計 翻譯發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Pexels,基于 CC0 協議
太好了!謝謝
非常感謝,讓我知道了material design這個網站,是本文最大的收獲
get了
不夠通俗
能夠理解就行,畢竟是外國人總結的
全面屏也是一樣的嗎?
全面屏只是增加了屏占比,對具體交互規則影響不大
我的iphone不能左右劃屏幕
Tab切換是MD里的,iOS左右滑只能進行返回,兩者是有所不同的~
別驚訝,我也不會~
是可以的~但手要貼著邊緣去做
你可以看iOS和MD自己的規范,有些APP對規范進行了調整,為了讓自家app在兩端有著一樣的體驗交互