摘要：iOS和Android用戶體驗(yàn)設(shè)計(jì)差異

關(guān)鍵詞：iOS，Android，用戶體驗(yàn)設(shè)計(jì)

本文將討論iOS和Android之間的具體設(shè)計(jì)差異。

基本差異

1、設(shè)計(jì)規(guī)范

iOS和Android遵循不同的設(shè)計(jì)規(guī)范。

2、度量單位

iOS應(yīng)用程序設(shè)計(jì)是在pt中開(kāi)發(fā)的，而Android應(yīng)用程序設(shè)計(jì)是在dp中開(kāi)發(fā)的。通常，我們以1倍(或mdpi)進(jìn)行設(shè)計(jì)，并以2x和3x生成圖標(biāo)和插圖。對(duì)于Android，設(shè)計(jì)以dp顯示，并以hdpi，xhdpi，xxhdpi和xxxhdpi生成圖形。

3、屏幕尺寸

我更喜歡以盡可能小的尺寸設(shè)計(jì)iOS應(yīng)用：iPhone 5 SE的屏幕尺寸為320х568pt。我這樣做是為了避免內(nèi)容在小屏幕上顯示不正確。有些人更喜歡為iPhone 8設(shè)計(jì)。

對(duì)于Android應(yīng)用，普遍接受的屏幕尺寸為360х640dp。

在為iOS設(shè)計(jì)時(shí)，有時(shí)會(huì)為iPhone X(375х812pt)開(kāi)發(fā)設(shè)計(jì)。開(kāi)發(fā)人員必須了解如何在這種尺寸的屏幕上正確設(shè)置邊距。在為iPhone X設(shè)計(jì)時(shí)，還需要牢記安全區(qū)域。

4、系統(tǒng)字體

如果不知道使用哪種字體，請(qǐng)使用系統(tǒng)字體。對(duì)于iOS，這是San Francisco。對(duì)于Android，它是 Roboto。

5、Android導(dǎo)航欄

與iOS不同，Android具有用于反向?qū)Ш降膬?nèi)置工具。

它既可以?xún)?nèi)置在智能手機(jī)中，也可以?xún)?nèi)置在界面中。用戶可以使用箭頭按時(shí)間順序后退(反向按時(shí)間順序?qū)Ш?。

當(dāng)我剛開(kāi)始做UI設(shè)計(jì)師時(shí)，花了很多時(shí)間折磨Android開(kāi)發(fā)人員，經(jīng)常問(wèn)問(wèn)題：“為什么需要兩個(gè)后退按鈕？” 切換到子頁(yè)面時(shí)，底部的導(dǎo)航欄中有一個(gè)，頂部應(yīng)用程序欄中有一個(gè)。

6、Android投影標(biāo)注

在Android中，陰影起著很大的作用。它們?cè)诮缑嫔咸砑恿说谌S(Z軸)，這使每個(gè)組件都可以沿Z軸具有自己的特定位置(從0dp到24dp)。此外，此Z軸不僅存在于概念級(jí)別上，開(kāi)發(fā)人員還有“elevation”參數(shù)，可用于設(shè)置元素沿該軸的位置。

7、命名差異

標(biāo)簽欄與底部導(dǎo)航欄

導(dǎo)航欄與頂部應(yīng)用欄

分段控件與選項(xiàng)卡

通知對(duì)話框

Touch ID與Android指紋

導(dǎo)航和模式(UX)的差異

8、導(dǎo)航

iOS僅建議一種頂級(jí)導(dǎo)航方法：Tab欄。Android則有三種方法：導(dǎo)航菜單，底部導(dǎo)航欄和標(biāo)簽。

如果頂層頁(yè)面超過(guò)五個(gè)，則使用導(dǎo)航菜單。如果數(shù)量較少，我們將使用底部導(dǎo)航欄。標(biāo)簽不是經(jīng)常用于這種導(dǎo)航，但是這種方法也可以使用。但是，Material建議不要將選項(xiàng)卡和底部導(dǎo)航欄組合在一起，因?yàn)榕c這些組件的交互會(huì)影響頁(yè)面的內(nèi)容，并且用戶可能會(huì)感到困惑。

9、選項(xiàng)卡欄和底部導(dǎo)航欄的行為差異

在iOS上，如果從母頁(yè)面跳轉(zhuǎn)到子頁(yè)面，然后通過(guò)選項(xiàng)卡欄轉(zhuǎn)到另一個(gè)母頁(yè)面，然后返回前一個(gè)母頁(yè)面，用戶仍將停留在子頁(yè)面上。

Android如果通過(guò)底部導(dǎo)航欄進(jìn)行切換頁(yè)面，則將始終在母頁(yè)面之間切換。如果用戶之前在子頁(yè)面上，則將被重置。

10、Android標(biāo)簽頁(yè)

與iOS上的分段控件不同，Android標(biāo)簽頁(yè)具有一項(xiàng)特殊功能：用戶可以通過(guò)左右滑動(dòng)來(lái)在標(biāo)簽之間移動(dòng)。

11、子頁(yè)面的行為差異

在iOS上，子頁(yè)面(不計(jì)算模式窗口)僅以一種方式顯示：子頁(yè)面顯示在母頁(yè)面的右側(cè)和頂部，具有“滑入”效果。返回母頁(yè)面會(huì)產(chǎn)生“滑出”效果。

Android會(huì)通過(guò)動(dòng)畫(huà)告知用戶母頁(yè)面和子頁(yè)面之間的關(guān)系。用戶與之交互過(guò)渡到子頁(yè)面的組件將打開(kāi)放大覆蓋母頁(yè)面。通過(guò)這種方式，用戶可以了解所在的位置和來(lái)源，以及發(fā)生這種情況的原因以及按下返回按鈕后會(huì)回到哪里。

12、導(dǎo)航菜單

在設(shè)計(jì)帶有導(dǎo)航菜單的應(yīng)用程序時(shí)，該組件“接管”了“向左右滑動(dòng)手勢(shì)。因此，請(qǐng)勿在此手勢(shì)中添加任何其他邏輯。

13、滾動(dòng)期間內(nèi)容的行為

iOS上的內(nèi)容在滾動(dòng)期間的行為如下：導(dǎo)航欄寬度減小，工具欄消失。但是通常，iOS開(kāi)發(fā)人員可以在滾動(dòng)過(guò)程中為內(nèi)容和欄配置任何類(lèi)型的行為。

Android為滾動(dòng)期間的行為提供了更多選項(xiàng)。例如，底部導(dǎo)航欄，搜索欄和底部應(yīng)用欄可以在滾動(dòng)過(guò)程中消失。頂部應(yīng)用欄也可以消失或移至主要內(nèi)容上方。

14、不同的搜索行為

iOS將搜索委托給bar并將其稱(chēng)為Search Bar。在Android中，我們?cè)凇皩?dǎo)航”部分而不是“組件”部分中找到搜索。換句話說(shuō)，對(duì)于Material而言，搜索只是另一種導(dǎo)航方法。在iOS和Android上，搜索都可以靜態(tài)顯示在屏幕上，并且通常固定在導(dǎo)航欄/頂部應(yīng)用欄上。

組件差異(UI)

15、iOS上缺少哪些組件

iOS上沒(méi)有下列Android組件。

導(dǎo)航菜單

BackDrop

標(biāo)語(yǔ)

Snackbars

Chips

底部應(yīng)用欄

FAB

iOS上，主要操作按鈕應(yīng)位于導(dǎo)航欄右側(cè)的頂部。

底部導(dǎo)航菜單

Side Sheet

展開(kāi)底頁(yè)

標(biāo)準(zhǔn)底頁(yè)

參考資料

[1]

https://uxdesign.cc/ios-vs-android-design-630340a73ee6?source=rss----138adf9c44c---4

總結(jié)

以上是生活随笔為你收集整理的android 技能标签功能_iOS和Android用户体验设计差异的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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