2017-2-20 周周
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
之前有粉絲留言說(shuō)希望我們能寫(xiě)一篇關(guān)于iOS和Android平臺(tái)特性對(duì)比的文章，筆者曾經(jīng)為兩個(gè)平臺(tái)分別做過(guò)差異化的設(shè)計(jì)，所以今天想借此話題為大家介紹一下iOS和Android兩個(gè)系統(tǒng)在設(shè)計(jì)方面的差異之處，讓大家能更好的理解其中的異同并運(yùn)用在自己的設(shè)計(jì)當(dāng)中。
作為智能手機(jī)的最大的兩個(gè)陣營(yíng)，iOS和Android系統(tǒng)差異一向都是大家津津樂(lè)道的話題，其中內(nèi)容通常是圍繞“機(jī)器性能好不好，打開(kāi)軟件卡不卡”“攝像頭的像素高不高，拍出來(lái)的自己美不美”“外觀是不是有bigger”等話題展開(kāi)的。
但在一個(gè)設(shè)計(jì)師眼里，這兩個(gè)系統(tǒng)的差異性之多可遠(yuǎn)遠(yuǎn)不止表面上看起來(lái)的那么簡(jiǎn)單粗暴。但在移動(dòng)端趨勢(shì)有如春草那樣蔓延開(kāi)來(lái)的今天，大多數(shù)的公司都選擇把iOS的界面直接運(yùn)用于Android系統(tǒng)。我們自然可以理解這樣做是為了節(jié)省成本和更快的迭代，但抹殺了系統(tǒng)特性的運(yùn)用卻犧牲了許多Android用戶的用戶體驗(yàn)。盡管知乎也有類(lèi)似回答過(guò)兩個(gè)系統(tǒng)交互的不同，今天筆者想更著重介紹一下兩者設(shè)計(jì)語(yǔ)言的異同。
幾乎每個(gè)移動(dòng)端的設(shè)計(jì)師都會(huì)熟知的一個(gè)Mobile設(shè)計(jì)里程碑——就是iOS7的Flat Design。原本栩栩如生的擬物化設(shè)計(jì)被拍扁，去除了冗余、厚重和繁雜的裝飾效果，扁成了“扁平化設(shè)計(jì)”，其核心思想就是讓“信息”本身凸顯出來(lái)，在設(shè)計(jì)元素上則強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。自此扁平風(fēng)格開(kāi)始在移動(dòng)端設(shè)計(jì)中廣為盛行。
自從2014年11月3日，Android5.0 Lollipop正式面向用戶推出，Material Design 煥然一新的設(shè)計(jì)驚艷了全場(chǎng)，不僅僅是視覺(jué)效果，全新的“數(shù)字紙墨”的空間概念也賦予了界面全新的UI理念。
那么Flat Design與Material Design，兩個(gè)同樣趨于簡(jiǎn)約的設(shè)計(jì)理念，他們具體的區(qū)別又在哪呢？ 以下將會(huì)就這個(gè)話題具體分析兩者在設(shè)計(jì)思路、動(dòng)效和其他細(xì)節(jié)上的不同。
如果只能用一對(duì)詞來(lái)概括Android和iOS系統(tǒng)的不同，我想那應(yīng)該是開(kāi)放與封閉，也正是這兩個(gè)截然不同的系統(tǒng)特性帶來(lái)了設(shè)計(jì)思路的不同。Android的開(kāi)放帶來(lái)了多樣化設(shè)計(jì)的同時(shí)（使用自定義控件幾乎沒(méi)有不能實(shí)現(xiàn)的設(shè)計(jì)效果），同時(shí)也帶來(lái)了“雜亂無(wú)章”之感和眾多因?yàn)椴唤y(tǒng)一而造成的用戶在使用時(shí)無(wú)從下手的情況。
而iOS的HIG（《Human Interface Guideline》人機(jī)交互規(guī)范）則更多“迫使”設(shè)計(jì)師去更多的使用系統(tǒng)原生的控件，設(shè)計(jì)師對(duì)于控件的修改非常局限，但這樣做的好處就是每個(gè)App的基本操作都是在規(guī)范之內(nèi)，具有一定的統(tǒng)一性，用戶使用起來(lái)非常的方便，學(xué)習(xí)成本也相應(yīng)降低了不少。這兩者很難去評(píng)判孰優(yōu)孰劣，可以說(shuō)“iOS的下限比Android高，但Android的上限比iOS高”，伴隨著大屏?xí)r代的腳步，可以看到雙方都在努力靠近彼此的一個(gè)趨勢(shì)，相信在不久的將來(lái)，就可以達(dá)到一種“和而不同”的平衡。
現(xiàn)在動(dòng)效的運(yùn)用已經(jīng)成為了許多app的標(biāo)配，合理的動(dòng)效不僅僅是為了視覺(jué)效果上的“酷炫”，更是幫助用戶更好的理解層級(jí)、轉(zhuǎn)場(chǎng)關(guān)系和關(guān)注到重點(diǎn)信息的利器。然而細(xì)心的設(shè)計(jì)師會(huì)發(fā)現(xiàn)，Android和iOS的動(dòng)效思路是截然不同的。用一句話概括兩邊設(shè)計(jì)語(yǔ)言的物理模型就是：Material Design運(yùn)用的是機(jī)械物理和電磁物理，而iOS的動(dòng)效更多建立在鏡頭運(yùn)動(dòng)和景深變化上。究其設(shè)計(jì)語(yǔ)言的本質(zhì)就是讓用戶可以把客觀經(jīng)驗(yàn)移植到界面的一種思路。
Material Design的隱喻是紙張，用戶的手指就像磁鐵一樣把電子紙墨吸引過(guò)來(lái)，點(diǎn)擊后就會(huì)泛起“漣漪”作為一個(gè)交互響應(yīng)。而其他物體的排列則按照一種“深淺”的層級(jí)來(lái)排布，離手指越近的元素越亮，陰影越深，而離開(kāi)遠(yuǎn)的元素則越暗，直至淹沒(méi)在黑暗之中。
△ MATERIAL DESIGN中動(dòng)效的展現(xiàn)
△ MATERIAL DESIGN的經(jīng)典動(dòng)畫(huà)
細(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í)的位移）。同樣類(lèi)型的動(dòng)效還體現(xiàn)在打開(kāi)app的時(shí)候由一個(gè)點(diǎn)放大成一個(gè)面，包括“日歷”App和“相冊(cè)”App（皆為系統(tǒng)應(yīng)用）中年-日-月切換的操作，均是鏡頭思路的表現(xiàn)形式。
△ 相冊(cè)的層級(jí)，由遠(yuǎn)及近，由小變大
△ iOS打開(kāi)APP時(shí)的動(dòng)效，從點(diǎn)到面
無(wú)論是哪種動(dòng)效，本質(zhì)上都是幫助用戶更好的理解界面切換和時(shí)間線之間的關(guān)系，設(shè)計(jì)師們也可以在這兩種系統(tǒng)動(dòng)效的基礎(chǔ)上，設(shè)計(jì)出適合自己產(chǎn)品的動(dòng)效。
對(duì)于需要同時(shí)涉及移動(dòng)端多個(gè)平臺(tái)的設(shè)計(jì)師來(lái)說(shuō)，分辨率是永遠(yuǎn)無(wú)法避開(kāi)的一個(gè)痛點(diǎn)。在iPhone6/iPhone6Plus 問(wèn)世之前，iOS更受設(shè)計(jì)師歡迎，也更多被作為模板來(lái)設(shè)計(jì)的原因，很大一部分是因?yàn)閕OS的分辨率相對(duì)固定，設(shè)計(jì)效果更容易被還原。而Android也一直因?yàn)槠聊怀叽绲亩鄻踊辉O(shè)計(jì)師們所”嫌棄“。所以在設(shè)計(jì)的過(guò)程中，不僅僅需要調(diào)整當(dāng)前頁(yè)面的最佳設(shè)計(jì)效果，同時(shí)也應(yīng)該思考這樣的設(shè)計(jì)是否符合不同分辨率尺寸下的屏幕顯示效果。
對(duì)于Android來(lái)說(shuō)，無(wú)他，唯調(diào)整爾。盡量把設(shè)計(jì)元素的所占空間用百分比來(lái)表示，同時(shí)根據(jù)開(kāi)發(fā)實(shí)現(xiàn)的效果來(lái)調(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)的分辨率
其實(shí)iOS 和Android 的設(shè)計(jì)還有許許多多的不同之處，比如字體、Tab bar設(shè)計(jì)、物理鍵操作方式、編輯模式、App體現(xiàn)個(gè)性的方式等等，在此不一一展開(kāi)了。希望在設(shè)計(jì)移動(dòng)端產(chǎn)品的過(guò)程中，設(shè)計(jì)師們可以更多的去思考兩者的異同，并且更多的關(guān)注一下Android 系統(tǒng)獨(dú)有特性的運(yùn)用，不僅僅節(jié)省了開(kāi)發(fā)成本，同時(shí)也更好的為Android用戶所接受。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com