UI設(shè)計(jì)中IOS和安卓的設(shè)計(jì)差異

　　設(shè)計(jì)師在做app的時(shí)候很少考慮兩個(gè)平臺(tái)的差異，在設(shè)計(jì)上用一套設(shè)計(jì)稿去做，其實(shí)有很多不一樣的地方。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中IOS和安卓的設(shè)計(jì)差異進(jìn)行簡(jiǎn)單的說(shuō)明。
 

　　iOS與安卓設(shè)計(jì)上的差異主要從系統(tǒng)差異、成本考慮、用戶習(xí)慣3個(gè)方面來(lái)闡述。

 

　　一. 系統(tǒng)差異
 

　　1. 物理按鍵對(duì)返回的影響
 

　　安卓的物理按鍵以及屏幕導(dǎo)航按鍵的差異是安卓的返回鍵更加方便，
 

　　iOS只有home鍵，隨著全屏的出現(xiàn)，可能會(huì)打破這種差異。
 

　　因此在設(shè)計(jì)返回操作的時(shí)候需要考慮平臺(tái)的差異性。

 

　　安卓比iOS增加了物理返回鍵、底部導(dǎo)航，有些設(shè)備可以隱藏底部導(dǎo)航。
 

　　全面屏的普及會(huì)慢慢打破這種因?yàn)槲锢戆存I造成的交互及設(shè)計(jì)差別，全面屏設(shè)計(jì)適配是要考慮底部按鍵的差異。
 

　　華為全面屏的幾種手勢(shì)：
 

　　安卓全面屏出現(xiàn)后，并沒(méi)有完全舍棄內(nèi)置導(dǎo)航按鍵，還有純手勢(shì)、懸浮按鈕、內(nèi)置導(dǎo)航條3種方式。隨著硬件的發(fā)展，安卓和iOS的交互操作會(huì)更加趨同，改變這種差異。
 

　　返回浮窗的UI表現(xiàn)：
 

　　iOS 手機(jī)只有一個(gè)“Home ”鍵，為方便用戶退出浮層需要增加了“取消”入口。

 

　　而 Android 手機(jī)本來(lái)就有“返回”虛擬鍵，所以多做一個(gè)“取消”的意義性不大。
 

　　2. 屏幕分辨率造成的色調(diào)選擇
 

　　Material Design作為谷歌推出的全新的設(shè)計(jì)語(yǔ)言，和iOS對(duì)比，Material Design更加沉穩(wěn)，iOS更加鮮艷。原因是因?yàn)閕OS的屏幕分辨率更高，對(duì)鮮艷顏色的還原度更好，安卓適應(yīng)的機(jī)型比較多，顏色還原度沒(méi)有那么好。
 

　　深色模式下考慮到用戶長(zhǎng)期使用的體驗(yàn)，因iOS的還原度高，背景使用#000000，安卓分辨率的限制，文字顏色較淺，谷歌推薦背景色為#121212。有些平臺(tái)護(hù)眼模式和深色模式用兩套，比如網(wǎng)易云音樂(lè)。

 

　　3. 軟件更新方式的不同
 

　　Android ：由于安卓的開(kāi)源特性，當(dāng)有新版本時(shí)都會(huì)提示用戶更新，且每個(gè)產(chǎn)品內(nèi)部都帶有“版本更新”入口。
 

　　更新的方式可分2種：
 

　　引導(dǎo)更新：彈出提示讓用戶更新 APP ，用戶點(diǎn)擊「更新」按鈕前往應(yīng)用商店更新、或者在當(dāng)前頁(yè)面更新并顯示下載進(jìn)度。
 

　　強(qiáng)制更新：也是先提示用戶更新，只不過(guò)用戶點(diǎn)擊「更新」按鈕，即調(diào)起軟件安裝頁(yè)面。

 

　　iOS ：而 iOS 端出于對(duì)用戶體驗(yàn)的考慮，是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的 iOS 產(chǎn)品，都是沒(méi)有“版本更新”入口的原因，即使有，點(diǎn)擊了也直接跳轉(zhuǎn)到 App Store 查看版本情況。

 

　　4. 切圖標(biāo)注
 

　　XHDPI對(duì)應(yīng)的是安卓2倍圖，XXHDPI對(duì)應(yīng)的是安卓3倍圖，iOS的3倍圖和安卓的XXHDPI是一樣的。

 

　　iOS用375*667px做設(shè)計(jì)，有些也用750*1334px，原因有3點(diǎn)：
 

　?、匍_(kāi)發(fā)同學(xué)不用換算，直接采用1倍圖就可以
 

　　②sketch切圖時(shí)導(dǎo)出更加方便
 

　?、蹣O大提高了視覺(jué)還原和其他機(jī)型的適配
 

　　安卓用1080*1920px做設(shè)計(jì)，原因有3點(diǎn)：
 

　?、?gòu)闹虚g尺寸向上和向下適配的時(shí)，調(diào)整幅度最小，最方便適配
 

　　②大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸，會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角
 

　?、塾弥髁鞒叽缱鲈O(shè)計(jì)，極大提高視覺(jué)還原和機(jī)型適配
 

　　5. 鍵盤(pán)差異引發(fā)的搜索框樣式
 

　　安卓鍵盤(pán)有些是系統(tǒng)自帶的，也有第三方的，例如搜狗輸入法，iOS更多是系統(tǒng)自帶的鍵盤(pán)。

 

　　很多輸入法在鍵盤(pán)的右側(cè)加入了更加明顯的搜索按鍵，但為了照顧一些用戶的操作習(xí)慣，安卓還是把搜索放在了搜索框后面。

 

　　二. 成本考慮
 

　　1. 開(kāi)發(fā)成本
 

　　loading
 

　　iOS的loading自定義更加常見(jiàn)、個(gè)性化強(qiáng)，安卓很多都是用系統(tǒng)自帶的(轉(zhuǎn)圈的那種)，主要是考慮開(kāi)發(fā)成本。
 

　　TAB樣式
 

　　2個(gè)平臺(tái)會(huì)有特有的控件樣式。
 

　　安卓系統(tǒng)本身全局actionbar，若去實(shí)現(xiàn)其他的樣式，會(huì)破壞整體的封裝，開(kāi)發(fā)成本更高。
 

　　iOS系統(tǒng)有自定義的tab切換樣式，開(kāi)發(fā)人員只需要更改顏色、圓角，更加方便。

 

　　高斯模糊
 

　　毛玻璃在iOS比較常見(jiàn)，安卓開(kāi)發(fā)成本高，建議不做這種效果。
 

　　2. 商業(yè)成本
 

　　一般iOS會(huì)讓用戶承擔(dān)30%的抽成，例如優(yōu)酷、騰訊的VIP會(huì)員價(jià)格。
 

　　三. 用戶習(xí)慣
 

　　1. 長(zhǎng)按側(cè)滑刪除
 

　　信息列表的側(cè)滑，在iOS中是很常見(jiàn)的操作，但是在安卓更習(xí)慣長(zhǎng)按，如果改成側(cè)滑刪除，會(huì)增加用戶的理解成本。

 

　　2. 圖標(biāo)設(shè)計(jì)
 

　　返回按鈕：一般iOS返回不帶橫線“<”，安卓喜歡帶有橫線，例如下圖，不過(guò)有些app會(huì)統(tǒng)一用一種。
 

　　分享按鈕：一把iOS會(huì)采用蘋(píng)果自帶的向上的形式，安卓喜歡用三個(gè)圈圈(看下圖)。

 

　　彈窗按鈕：有些安卓彈窗上的按鈕會(huì)遵循系統(tǒng)規(guī)則，在右側(cè)這種形式，iOS更喜歡居中。
 

　　bar標(biāo)題位置：安卓上的標(biāo)題跟隨著“返回”，在bar的左側(cè)，iOS會(huì)喜歡放在中間。

 

　　總結(jié)
 

　　兩個(gè)平臺(tái)新版本發(fā)布的時(shí)候也會(huì)更新新的設(shè)計(jì)規(guī)范，我們應(yīng)該實(shí)時(shí)關(guān)注兩者的優(yōu)劣勢(shì)，取其優(yōu)勢(shì)，結(jié)合項(xiàng)目本身，設(shè)計(jì)出更加符合用戶習(xí)慣或者節(jié)約成本的設(shè)計(jì)。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。