移动端界面设计规范(Android尺寸篇)

2018-4-13 蓝蓝 移动设备ui及体验

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


"这是移动端界面设计规范尺寸安卓篇也是第二篇小总结,主讲如何一稿去适配众多的安卓机型。如果你有兴趣也可以去官方研读下设计文档,这样的话,就可以比较系统的掌握知识。

首先,你必须要知道的一个现象,那就是Android系统是开源,这个是它的优点也是一个令设计师很苦恼的痛点。那就是Android设备的屏幕尺寸非常多,碎片化是相当的严重。你会听说过很多种的分辨率,比如:480×800、480×854、540×960、720×1280、1080×1920,甚至还有2560×1440也就是俗称的2K屏,更高的则是3840*2160(4K),目前仅有索尼Xperia Z5尊享版是4k分辨率的手机。

移动端界面设计规范(Android尺寸篇)

常见设备尺寸

不要被这些尺寸吓倒,实际上大部分的移动端界面,在各种尺寸的屏幕上都能正常显示,说明尺寸的问题一定有解决方法,而且有规律可循。

在这里要了解几个概念:

  1. 像素密度,那么什么是像素密度呢?像素密度,即每英寸屏幕所拥有的像素数,像素密度越大,显示画面细节就越丰富。

  2. 屏幕大小,屏幕大小是手机对角线的物理尺寸,以英寸(inch)为单位。比如某某手机为"5寸大屏手机",就是指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。

  3. 分辨率,分辨率就是手机屏幕的像素点数,一般描述成屏幕的"宽×高",安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。

屏幕像素密度,分辨率,屏幕尺寸的关系是什么?这三个专业名词之间,有着非常严谨的关系。为啥说严谨呢,因为这三者之间,有一个公式可以表示。

移动端界面设计规范(Android尺寸篇)

PPI关系图

倍率与逻辑像素

"实际密度"就是我们自己算出来的密度,如上述例子中的440dpi就是实际密度,5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看来,屏幕密度将会出现很多数值,呈现严重的碎片化。而密度又是安卓屏幕将界面进行缩放显示的依据,那么安卓是如何适配这么多屏幕的呢?其实,每部安卓手机屏幕都有一个初始的固定密度,这些数值是120、160、240、320、480,我们权且称为"系统密度"。安卓对界面元素进行缩放的比例依据正是系统密度,而不是实际密度。

以此建议在720×1280尺寸上做设计图。

因为ui设计师给程序员的设计图是以px为单位的,Android开发则是使用dp作为单位的,那么我们需要进行转换:

移动端界面设计规范(Android尺寸篇)

关系图

设计尺寸

界面:720*1280

状态栏高度为:50px

导航栏高度为:96px

主菜单栏高度为:96px

内容区域高度为:1038px(1280-50-96-96=1038)

图标尺寸

移动端界面设计规范(Android尺寸篇)

设计字体

英文字体为 Roboto字体,中文字体为 思源黑体。在Android 5.0之后,使用的是思源黑体,字体文件有2个名称,"source han sans"和"noto sans CJK"。 思源黑体是Adobe和Google领导开发的开源字体,支持繁简日韩,有7种字体粗细。(如果需要字体可私信我)


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


Powered by emlog 京ICP备12006971号-1 sitemap