設(shè)計(jì)經(jīng)驗(yàn)分享?· 不定時(shí)更新

-------------------------------------------

胡桃子

深圳 | UI/UX設(shè)計(jì)師

唧唧歪歪：設(shè)計(jì)師在做 app 的時(shí)候很少考慮兩個(gè)平臺(tái)的差異，之前我也覺(jué)得兩者越來(lái)越趨同，在設(shè)計(jì)上可以用一套設(shè)計(jì)稿去做。其實(shí)有很多不一樣的地方，了解這些差異和區(qū)別，能節(jié)省UI設(shè)計(jì)和研發(fā)成本，設(shè)計(jì)更符合兩個(gè)平臺(tái)用戶的操作習(xí)慣。

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. 狀態(tài)欄交互的不同

iOS ：用戶在 Y 軸滾動(dòng)了很長(zhǎng)內(nèi)容時(shí)，點(diǎn)擊狀態(tài)欄可以快速回到初始位置。

Android ：部分安卓手機(jī)無(wú)論滾動(dòng)了多長(zhǎng)內(nèi)容，都是點(diǎn)擊無(wú)任何效果，不過(guò)兩種交互也逐漸趨同。

4. 軟件更新方式的不同

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 查看版本情況。

5. 切圖標(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)出更加方便

③極大提高了視覺(jué)還原和其他機(jī)型的適配

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

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

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

③用主流尺寸做設(shè)計(jì)，極大提高視覺(jué)還原和機(jī)型適配

4. 鍵盤差異引發(fā)的搜索框樣式

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

很多輸入法在鍵盤的右側(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返回不帶橫線“

分享按鈕：一把iOS會(huì)采用蘋果自帶的向上的形式，安卓喜歡用三個(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ì)。

希望上述內(nèi)容能對(duì)大家在數(shù)據(jù)可視化設(shè)計(jì)有所幫助～～

---

感謝你的閱讀支持 · 歡迎留言互動(dòng)

-------------------------------------------

多一點(diǎn)行動(dòng)? ·? 多一種可能

—

你點(diǎn)的「在看」是最好的肯定與鼓勵(lì)

?

總結(jié)

以上是生活随笔為你收集整理的android 模糊查询搜索框_彻底搞懂 iOS 和 Android 的设计差异的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。