Android 和 iOS 的設計不同之處

作為智能手機的最大的兩個陣營,iOS 和 Android 系統差異一向都是大家津津樂道的話題,其中內容通常是圍繞“機器性能好不好,打開軟件卡不卡”“攝像頭的像素高不高,拍出來的自己美不美”“外觀是不是有 bigger”等話題展開的。

在一個設計師眼里,這兩個系統的差異性之多可遠遠不止表面上看起來的那么簡單粗暴。但在移動端趨勢有如春草那樣蔓延開來的今天,大多數的公司都選擇把 iOS 的界面直接運用于 Android 系統。我們自然可以理解這樣做是為了節省成本和更快的迭代,但抹殺了系統特性的運用卻犧牲了許多 Android 用戶的用戶體驗。盡管知乎也有類似回答過兩個系統交互的不同,今天筆者想更著重介紹一下兩者設計語言的異同。

1、從 Flat Design 和 Material Design 說起

幾乎每個移動端的設計師都會熟知的一個 Mobile 設計里程碑——iOS7的 Flat Design。原本栩栩如生的擬物化設計被拍扁,去除了冗余、厚重和繁雜的裝飾效果,扁成了“扁平化設計”,其核心思想就是讓“信息”本身凸顯出來,在設計元素上則強調了抽象、極簡和符號化。自此扁平風格開始在移動端設計中廣為盛行。

(典型的 Material Design)


自從2014年11月3日,Android5.0 Lollipop 正式面向用戶推出,Material Design 煥然一新的設計驚艷了全場,不僅僅是視覺效果,全新的“數字紙墨”的空間概念也賦予了界面全新的UI理念。

(扁平化風格顯著的 iOS7設計)


那么 Flat Design 與 Material Design,兩個同樣趨于簡約的設計理念,他們具體的區別又在哪呢? 以下將會就這個話題具體分析兩者在設計思路、動效和其他細節上的不同。

2、開放與封閉,設計思路大不同

如果只能用一對詞來概括 Android 和 iOS 系統的不同,我想那應該是開放與封閉,也正是這兩個截然不同的系統特性帶來了設計思路的不同。

Android 的開放帶來了多樣化設計的同時(使用自定義控件幾乎沒有不能實現的設計效果),同時也帶來了“雜亂無章”之感和眾多因為不統一而造成的用戶在使用時無從下手的情況。

iOS 的 HIG(《Human Interface Guideline》人機交互規范)則更多“迫使”設計師去更多的使用系統原生的控件,設計師對于控件的修改非常局限,但這樣做的好處就是每個 App 的基本操作都是在規范之內,具有一定的統一性,用戶使用起來非常的方便,學習成本也相應降低了不少。

這兩者很難去評判孰優孰劣,可以說“iOS 的下限比 Android 高,但 Android 的上限比 iOS 高”,伴隨著大屏時代的腳步,可以看到雙方都在努力靠近彼此的一個趨勢,相信在不久的將來,就可以達到一種“和而不同”的平衡。

3、動效展現——換個角度看世界

現在動效的運用已經成為了許多 APP 的標配,合理的動效不僅僅是為了視覺效果上的“酷炫”,更是幫助用戶更好的理解層級、轉場關系和關注到重點信息的利器。然而細心的設計師會發現,Android 和 iOS 的動效思路是截然不同的。用一句話概括兩邊設計語言的物理模型就是:Material Design 運用的是機械物理和電磁物理,而 iOS 的動效更多建立在鏡頭運動和景深變化上。究其設計語言的本質就是讓用戶可以把客觀經驗移植到界面的一種思路。

Material Design 的隱喻是紙張,用戶的手指就像磁鐵一樣把電子紙墨吸引過來,點擊后就會泛起“漣漪”作為一個交互響應。而其他物體的排列則按照一種“深淺”的層級來排布,離手指越近的元素越亮,陰影越深,而離開遠的元素則越暗,直至淹沒在黑暗之中。

(Material Design 中動效的展現)


(Material Design 的經典動畫)


細觀 iOS 的系統動效可以發現,iOS 的桌面就好像一片星空,每個 App 都是其中的一個小星星(點),每當用戶去點擊,鏡頭就會切近,而背景則是隱入了一片高斯模糊的景深之中,這應該是每個 iOS 用戶最深刻的動效體驗之一了。高斯模糊也成為了 iOS 特有的一個表達層級關系的利器(其中不僅是模糊,還存在著鏡頭晃動時的位移)。

同樣類型的動效還體現在打開 APP 的時候由一個點放大成一個面,包括“日歷”App 和“相冊”App(皆為系統應用)中年-日-月切換的操作,均是鏡頭思路的表現形式。

(相冊的層級,由遠及近,由小變大)


(iOS 打開 APP 時的動效,從點到面)


無論是哪種動效,本質上都是幫助用戶更好的理解界面切換和時間線之間的關系,設計師們也可以在這兩種系統動效的基礎上,設計出適合自己產品的動效。

4、分辨率之殤

對于需要同時涉及移動端多個平臺的設計師來說,分辨率是永遠無法避開的一個痛點。在 iPhone6/iPhone6Plus 問世之前,iOS 更受設計師歡迎,也更多被作為模板來設計的原因,很大一部分是因為 iOS 的分辨率相對固定,設計效果更容易被還原。而 Android 也一直因為屏幕尺寸的多樣化而被設計師們所”嫌棄“。所以在設計的過程中,不僅僅需要調整當前頁面的最佳設計效果,同時也應該思考這樣的設計是否符合不同分辨率尺寸下的屏幕顯示效果。之前公眾號中董浩龍的《一稿適配 iOS7》(傳送門見文末)應該會給大家不少適配方面的啟示。

對于 Android 來說,無他,唯調整爾。盡量把設計元素的所占空間用百分比來表示,同時根據開發實現的效果來調整一些極端情況下具體的間距,以求“滿足大部分主流屏幕的完美顯示以及其他屏幕的可接受顯示”原則。

下圖給大家展示一下 iOS 與 Android 的分辨率的轉換關系,在切圖的時候滿足一定的倍數關系,就可以一鍵導出可以同時適配兩者的切圖了。

1dp(Android)=1pt(iOS)

以48dp@160dpi計算的話

mdpi 48px (160dpi, 1x) 基礎尺寸,已經非常少使用

hdpi 72px (240dpi, 1.5x)低分辨率

xhdpi 96px (320dpi, 2x) 同iOS @2x

xxdpi 144px (480dpi, 3x) 同iOS @3x

xxxdpi 192px (640dpi, 4x) 更大更高更強的分辨率

文末小結

其實 iOS 和 Android 的設計還有許許多多的不同之處,比如字體、Tab bar 設計、物理鍵操作方式、編輯模式、APP 體現個性的方式等等,在此不一一展開了。

希望在設計移動端產品的過程中,設計師們可以更多的去思考兩者的異同,并且更多的關注一下 Android 系統獨有特性的運用,不僅僅節省了開發成本,同時也更好的為 Android 用戶所接受。


本文作者:Doris(點融黑幫),視覺設計師,現就職于點融網用戶體驗團隊DDC。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,327評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,996評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,316評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,406評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,128評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,524評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,576評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,759評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,310評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,065評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,249評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,821評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,479評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,909評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,140評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,984評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,228評論 2 375

推薦閱讀更多精彩內容