作為智能手機(jī)的最大的兩個(gè)陣營,iOS 和 Android 系統(tǒng)差異一向都是大家津津樂道的話題,其中內(nèi)容通常是圍繞“機(jī)器性能好不好,打開軟件卡不卡”“攝像頭的像素高不高,拍出來的自己美不美”“外觀是不是有 bigger”等話題展開的伍派。
在一個(gè)設(shè)計(jì)師眼里,這兩個(gè)系統(tǒng)的差異性之多可遠(yuǎn)遠(yuǎn)不止表面上看起來的那么簡單粗暴剩胁。但在移動(dòng)端趨勢有如春草那樣蔓延開來的今天诉植,大多數(shù)的公司都選擇把 iOS 的界面直接運(yùn)用于 Android 系統(tǒng)。我們自然可以理解這樣做是為了節(jié)省成本和更快的迭代昵观,但抹殺了系統(tǒng)特性的運(yùn)用卻犧牲了許多 Android 用戶的用戶體驗(yàn)晾腔。盡管知乎也有類似回答過兩個(gè)系統(tǒng)交互的不同舌稀,今天筆者想更著重介紹一下兩者設(shè)計(jì)語言的異同。
1灼擂、從 Flat Design 和 Material Design 說起
幾乎每個(gè)移動(dòng)端的設(shè)計(jì)師都會(huì)熟知的一個(gè) Mobile 設(shè)計(jì)里程碑——iOS7的 Flat Design壁查。原本栩栩如生的擬物化設(shè)計(jì)被拍扁廊佩,去除了冗余遮咖、厚重和繁雜的裝飾效果,扁成了“扁平化設(shè)計(jì)”爷光,其核心思想就是讓“信息”本身凸顯出來峻贮,在設(shè)計(jì)元素上則強(qiáng)調(diào)了抽象席怪、極簡和符號(hào)化。自此扁平風(fēng)格開始在移動(dòng)端設(shè)計(jì)中廣為盛行月洛。
自從2014年11月3日何恶,Android5.0 Lollipop 正式面向用戶推出,Material Design 煥然一新的設(shè)計(jì)驚艷了全場嚼黔,不僅僅是視覺效果,全新的“數(shù)字紙墨”的空間概念也賦予了界面全新的UI理念惜辑。
那么 Flat Design 與 Material Design唬涧,兩個(gè)同樣趨于簡約的設(shè)計(jì)理念,他們具體的區(qū)別又在哪呢盛撑? 以下將會(huì)就這個(gè)話題具體分析兩者在設(shè)計(jì)思路碎节、動(dòng)效和其他細(xì)節(jié)上的不同。
2抵卫、開放與封閉狮荔,設(shè)計(jì)思路大不同
如果只能用一對(duì)詞來概括 Android 和 iOS 系統(tǒng)的不同,我想那應(yīng)該是開放與封閉介粘,也正是這兩個(gè)截然不同的系統(tǒng)特性帶來了設(shè)計(jì)思路的不同殖氏。
Android 的開放帶來了多樣化設(shè)計(jì)的同時(shí)(使用自定義控件幾乎沒有不能實(shí)現(xiàn)的設(shè)計(jì)效果),同時(shí)也帶來了“雜亂無章”之感和眾多因?yàn)椴唤y(tǒng)一而造成的用戶在使用時(shí)無從下手的情況姻采。
iOS 的 HIG(《Human Interface Guideline》人機(jī)交互規(guī)范)則更多“迫使”設(shè)計(jì)師去更多的使用系統(tǒng)原生的控件雅采,設(shè)計(jì)師對(duì)于控件的修改非常局限,但這樣做的好處就是每個(gè) App 的基本操作都是在規(guī)范之內(nèi)慨亲,具有一定的統(tǒng)一性婚瓜,用戶使用起來非常的方便,學(xué)習(xí)成本也相應(yīng)降低了不少刑棵。
這兩者很難去評(píng)判孰優(yōu)孰劣巴刻,可以說“iOS 的下限比 Android 高,但 Android 的上限比 iOS 高”蛉签,伴隨著大屏?xí)r代的腳步胡陪,可以看到雙方都在努力靠近彼此的一個(gè)趨勢沥寥,相信在不久的將來,就可以達(dá)到一種“和而不同”的平衡督弓。
3营曼、動(dòng)效展現(xiàn)——換個(gè)角度看世界
現(xiàn)在動(dòng)效的運(yùn)用已經(jīng)成為了許多 APP 的標(biāo)配,合理的動(dòng)效不僅僅是為了視覺效果上的“酷炫”愚隧,更是幫助用戶更好的理解層級(jí)蒂阱、轉(zhuǎn)場關(guān)系和關(guān)注到重點(diǎn)信息的利器。然而細(xì)心的設(shè)計(jì)師會(huì)發(fā)現(xiàn)狂塘,Android 和 iOS 的動(dòng)效思路是截然不同的录煤。用一句話概括兩邊設(shè)計(jì)語言的物理模型就是:Material Design 運(yùn)用的是機(jī)械物理和電磁物理,而 iOS 的動(dòng)效更多建立在鏡頭運(yùn)動(dòng)和景深變化上荞胡。究其設(shè)計(jì)語言的本質(zhì)就是讓用戶可以把客觀經(jīng)驗(yàn)移植到界面的一種思路妈踊。
Material Design 的隱喻是紙張,用戶的手指就像磁鐵一樣把電子紙墨吸引過來泪漂,點(diǎn)擊后就會(huì)泛起“漣漪”作為一個(gè)交互響應(yīng)廊营。而其他物體的排列則按照一種“深淺”的層級(jí)來排布,離手指越近的元素越亮萝勤,陰影越深露筒,而離開遠(yuǎn)的元素則越暗,直至淹沒在黑暗之中敌卓。
細(xì)觀 iOS 的系統(tǒng)動(dòng)效可以發(fā)現(xiàn)慎式,iOS 的桌面就好像一片星空,每個(gè) App 都是其中的一個(gè)小星星(點(diǎn))趟径,每當(dāng)用戶去點(diǎn)擊瘪吏,鏡頭就會(huì)切近,而背景則是隱入了一片高斯模糊的景深之中蜗巧,這應(yīng)該是每個(gè) iOS 用戶最深刻的動(dòng)效體驗(yàn)之一了掌眠。高斯模糊也成為了 iOS 特有的一個(gè)表達(dá)層級(jí)關(guān)系的利器(其中不僅是模糊,還存在著鏡頭晃動(dòng)時(shí)的位移)惧蛹。
同樣類型的動(dòng)效還體現(xiàn)在打開 APP 的時(shí)候由一個(gè)點(diǎn)放大成一個(gè)面扇救,包括“日歷”App 和“相冊(cè)”App(皆為系統(tǒng)應(yīng)用)中年-日-月切換的操作,均是鏡頭思路的表現(xiàn)形式香嗓。
無論是哪種動(dòng)效沧烈,本質(zhì)上都是幫助用戶更好的理解界面切換和時(shí)間線之間的關(guān)系,設(shè)計(jì)師們也可以在這兩種系統(tǒng)動(dòng)效的基礎(chǔ)上像云,設(shè)計(jì)出適合自己產(chǎn)品的動(dòng)效锌雀。
4蚂夕、分辨率之殤
對(duì)于需要同時(shí)涉及移動(dòng)端多個(gè)平臺(tái)的設(shè)計(jì)師來說,分辨率是永遠(yuǎn)無法避開的一個(gè)痛點(diǎn)腋逆。在 iPhone6/iPhone6Plus 問世之前婿牍,iOS 更受設(shè)計(jì)師歡迎,也更多被作為模板來設(shè)計(jì)的原因惩歉,很大一部分是因?yàn)?iOS 的分辨率相對(duì)固定等脂,設(shè)計(jì)效果更容易被還原。而 Android 也一直因?yàn)槠聊怀叽绲亩鄻踊辉O(shè)計(jì)師們所”嫌棄“撑蚌。所以在設(shè)計(jì)的過程中上遥,不僅僅需要調(diào)整當(dāng)前頁面的最佳設(shè)計(jì)效果,同時(shí)也應(yīng)該思考這樣的設(shè)計(jì)是否符合不同分辨率尺寸下的屏幕顯示效果争涌。之前公眾號(hào)中董浩龍的《一稿適配 iOS7》(傳送門見文末)應(yīng)該會(huì)給大家不少適配方面的啟示粉楚。
對(duì)于 Android 來說,無他亮垫,唯調(diào)整爾模软。盡量把設(shè)計(jì)元素的所占空間用百分比來表示,同時(shí)根據(jù)開發(fā)實(shí)現(xiàn)的效果來調(diào)整一些極端情況下具體的間距饮潦,以求“滿足大部分主流屏幕的完美顯示以及其他屏幕的可接受顯示”原則撵摆。
下圖給大家展示一下 iOS 與 Android 的分辨率的轉(zhuǎn)換關(guān)系,在切圖的時(shí)候滿足一定的倍數(shù)關(guān)系害晦,就可以一鍵導(dǎo)出可以同時(shí)適配兩者的切圖了。
1dp(Android)=1pt(iOS)
以48dp@160dpi計(jì)算的話
mdpi 48px (160dpi, 1x) 基礎(chǔ)尺寸稻轨,已經(jīng)非常少使用
hdpi 72px (240dpi, 1.5x)低分辨率
xhdpi 96px (320dpi, 2x) 同iOS @2x
xxdpi 144px (480dpi, 3x) 同iOS @3x
xxxdpi 192px (640dpi, 4x) 更大更高更強(qiáng)的分辨率
文末小結(jié)
其實(shí) iOS 和 Android 的設(shè)計(jì)還有許許多多的不同之處,比如字體雕凹、Tab bar 設(shè)計(jì)殴俱、物理鍵操作方式、編輯模式枚抵、APP 體現(xiàn)個(gè)性的方式等等线欲,在此不一一展開了。
希望在設(shè)計(jì)移動(dòng)端產(chǎn)品的過程中汽摹,設(shè)計(jì)師們可以更多的去思考兩者的異同李丰,并且更多的關(guān)注一下 Android 系統(tǒng)獨(dú)有特性的運(yùn)用趴泌,不僅僅節(jié)省了開發(fā)成本舟舒,同時(shí)也更好的為 Android 用戶所接受。
本文作者:Doris(點(diǎn)融黑幫)嗜憔,視覺設(shè)計(jì)師秃励,現(xiàn)就職于點(diǎn)融網(wǎng)用戶體驗(yàn)團(tuán)隊(duì)DDC。