移動(dòng)端界面設(shè)計(jì)規(guī)范(Android尺寸篇)

2018-4-13    藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


"這是移動(dòng)端界面設(shè)計(jì)規(guī)范尺寸安卓篇也是第二篇小總結(jié),主講如何一稿去適配眾多的安卓機(jī)型。如果你有興趣也可以去官方研讀下設(shè)計(jì)文檔,這樣的話,就可以比較系統(tǒng)的掌握知識(shí)。

首先,你必須要知道的一個(gè)現(xiàn)象,那就是Android系統(tǒng)是開源,這個(gè)是它的優(yōu)點(diǎn)也是一個(gè)令設(shè)計(jì)師很苦惱的痛點(diǎn)。那就是Android設(shè)備的屏幕尺寸非常多,碎片化是相當(dāng)?shù)膰?yán)重。你會(huì)聽說過很多種的分辨率,比如:480×800、480×854、540×960、720×1280、1080×1920,甚至還有2560×1440也就是俗稱的2K屏,更高的則是3840*2160(4K),目前僅有索尼Xperia Z5尊享版是4k分辨率的手機(jī)。

移動(dòng)端界面設(shè)計(jì)規(guī)范(Android尺寸篇)

常見設(shè)備尺寸

不要被這些尺寸嚇倒,實(shí)際上大部分的移動(dòng)端界面,在各種尺寸的屏幕上都能正常顯示,說明尺寸的問題一定有解決方法,而且有規(guī)律可循。

在這里要了解幾個(gè)概念:

  1. 像素密度,那么什么是像素密度呢?像素密度,即每英寸屏幕所擁有的像素?cái)?shù),像素密度越大,顯示畫面細(xì)節(jié)就越豐富。

  2. 屏幕大小,屏幕大小是手機(jī)對(duì)角線的物理尺寸,以英寸(inch)為單位。比如某某手機(jī)為"5寸大屏手機(jī)",就是指對(duì)角線的尺寸,5寸×2.54厘米/寸=12.7厘米。

  3. 分辨率,分辨率就是手機(jī)屏幕的像素點(diǎn)數(shù),一般描述成屏幕的"寬×高",安卓手機(jī)屏幕常見的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在寬度方向有720個(gè)像素,在高度方向有1280個(gè)像素。

屏幕像素密度,分辨率,屏幕尺寸的關(guān)系是什么?這三個(gè)專業(yè)名詞之間,有著非常嚴(yán)謹(jǐn)?shù)年P(guān)系。為啥說嚴(yán)謹(jǐn)呢,因?yàn)檫@三者之間,有一個(gè)公式可以表示。

移動(dòng)端界面設(shè)計(jì)規(guī)范(Android尺寸篇)

PPI關(guān)系圖

倍率與邏輯像素

"實(shí)際密度"就是我們自己算出來的密度,如上述例子中的440dpi就是實(shí)際密度,5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看來,屏幕密度將會(huì)出現(xiàn)很多數(shù)值,呈現(xiàn)嚴(yán)重的碎片化。而密度又是安卓屏幕將界面進(jìn)行縮放顯示的依據(jù),那么安卓是如何適配這么多屏幕的呢?其實(shí),每部安卓手機(jī)屏幕都有一個(gè)初始的固定密度,這些數(shù)值是120、160、240、320、480,我們權(quán)且稱為"系統(tǒng)密度"。安卓對(duì)界面元素進(jìn)行縮放的比例依據(jù)正是系統(tǒng)密度,而不是實(shí)際密度。

以此建議在720×1280尺寸上做設(shè)計(jì)圖。

因?yàn)閡i設(shè)計(jì)師給程序員的設(shè)計(jì)圖是以px為單位的,Android開發(fā)則是使用dp作為單位的,那么我們需要進(jìn)行轉(zhuǎn)換:

移動(dòng)端界面設(shè)計(jì)規(guī)范(Android尺寸篇)

關(guān)系圖

設(shè)計(jì)尺寸

界面:720*1280

狀態(tài)欄高度為:50px

導(dǎo)航欄高度為:96px

主菜單欄高度為:96px

內(nèi)容區(qū)域高度為:1038px(1280-50-96-96=1038)

圖標(biāo)尺寸

移動(dòng)端界面設(shè)計(jì)規(guī)范(Android尺寸篇)

設(shè)計(jì)字體

英文字體為 Roboto字體,中文字體為 思源黑體。在Android 5.0之后,使用的是思源黑體,字體文件有2個(gè)名稱,"source han sans"和"noto sans CJK"。 思源黑體是Adobe和Google領(lǐng)導(dǎo)開發(fā)的開源字體,支持繁簡(jiǎn)日韓,有7種字體粗細(xì)。(如果需要字體可私信我)


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔