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ī)。
常見設(shè)備尺寸
不要被這些尺寸嚇倒，實(shí)際上大部分的移動(dòng)端界面，在各種尺寸的屏幕上都能正常顯示，說明尺寸的問題一定有解決方法，而且有規(guī)律可循。
像素密度，那么什么是像素密度呢？像素密度，即每英寸屏幕所擁有的像素?cái)?shù)，像素密度越大，顯示畫面細(xì)節(jié)就越豐富。
屏幕大小，屏幕大小是手機(jī)對(duì)角線的物理尺寸，以英寸（inch）為單位。比如某某手機(jī)為"5寸大屏手機(jī)"，就是指對(duì)角線的尺寸，5寸×2.54厘米/寸=12.7厘米。
分辨率，分辨率就是手機(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è)公式可以表示。
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)換：
關(guān)系圖
界面：720*1280
狀態(tài)欄高度為：50px
導(dǎo)航欄高度為：96px
主菜單欄高度為：96px
內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038)
英文字體為 Roboto字體，中文字體為 思源黑體。在Android 5.0之后，使用的是思源黑體，字體文件有2個(gè)名稱，"source han sans"和"noto sans CJK"。 思源黑體是Adobe和Google領(lǐng)導(dǎo)開發(fā)的開源字體，支持繁簡日韓，有7種字體粗細(xì)。（如果需要字體可私信我）
在這里要了解幾個(gè)概念：
倍率與邏輯像素
設(shè)計(jì)尺寸
圖標(biāo)尺寸
設(shè)計(jì)字體
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn