安卓UI设计规范 终极版

用户头像
杭州/UI设计师/10年前/8018浏览
安卓UI设计规范 终极版
用户头像
永远站

Android系统UI设计规范 包括界面 界面 字体 图标规范

相信很多人在开发设计app的时候都遇到过很多界面上的问题,如以多大的尺寸来设计,分辨率是多少,如何做适配,该怎么切图等。

下面就从界面尺寸 界面组成 字体规范 图标规范 界面切图 5个方面进行总结和梳理


安卓界面尺寸:


什么是px 什么是dp 

px:像素是UI设计师在PS中最常用的单位,它是一张图片中最小的点,一张位图就是由这样的点组成的。

dp:常用于Android系统,方便其不同版本之间的适配。不同的像素密度上有不同的显示效果 ,和设备硬件有关

简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。


为什么要用dp代替px 

原因是他们不会因为dpi(屏幕密度值)的变化而变化,在相同物理尺寸和不同dpi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。

根据换算方法可以得出以下结论

4cff58072388a84a0e282ba7e46a.jpg


在目前的Android app设计项目中 我们并不会去为每一种分辨率设计一套UI界面 这是一种理想的状态,小公司肯定是耗不起的,所以我们要学会变通,为了适应多分辨率:

1. 在标准基础(720px*1280px)上开始,然后放大或者缩小,来适应其他的尺寸。

2. 从设备的最大尺寸(1080px*1920px)开始,然后缩小,并适应所有的其他尺寸。

方法一是我们的一般处理方式 为什么选择720*1280尼 因为虽然现在分辨率已经支持到1080*1920像素 大家可以选择这个尺寸作图,但是图片素材将会增大应用安装包的大小,并且尺寸越大的图片占用的内存也就越高,所以在实际设计工作中,设计师可以从720px*1280px开始设计界面,因为这个尺寸兼顾了美观性和经济性并提供了最简单的dp换算。

美观性:以这个尺寸做出的应用,在720*1280屏幕中显示完美,在1080*1920屏幕中放大之后仍旧比较清晰。

经济性:这个分辨率下导出的图片尺寸适中,内存消耗不会过高,并且图片文件大小适中,安装包也不会过大。


界面基本组成元素:


Android的界面主要由状态栏、导航栏、主菜单栏和中间的内容区域4个元素组成

  1. 状态栏(信号、运营商、电量等显示手机状态的区域)

    4b38580725cfa84a0d304fcc6ad2.jpg

2.导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮

 332e580725e5a84a0e282b6cde24.jpg

3.主菜单栏:提供当前页面的分类内容的快速跳转

 e86e58072691a84a0d304f7de679.jpg

4.内容区域:展示应用提供的相应内容,整个布局中变更最为频繁


 e6365807261da84a0d304f813e42.jpg


字体规范:


在Android上最受欢迎的字体是droid sana fallback,他是谷歌自己的字体,与微软雅黑很像,中文字体为方正兰亭雅黑或微软雅黑。(Android4.0之后,roboto字体在新设备上越来越流行 大有冲击之势。)

下面选用720px*1280px的尺寸设计对字体的具体大小进行讲解。

注释最小字体:24px;

文本字体:28px;

文章标题或者图标名称:32px;

导航标题:36px;

(备注:教你一个最笨的方法,可以高清截图自己喜欢的app界面,放入PS对比调节字体大小)

 

 

图标规范:


1.启动图标

启动图标在“主屏幕”和所有应用中代表你的应用程序入口,所以要确保启动图标在任何背景和使用场景下都依稀可见。

大小和缩放:移动设备上启动图标的大小是48*48dp

 

2.操作栏图标

操作栏图标是app中最常用到的图标,在操作栏和列表中都会用到,覆盖的范围极其广泛。

大小和缩放:移动设备上操作栏大小应当是32*32dp,图像资源大小为32*32dp,图形区域尺寸为24*24dp,    

 

3.小图标

一般在表示特定状态的地方需要使用小图标

大小和缩放:移动设备上的小图标大小应当是16*16dp 图形区域尺寸是12*12dp

(备注以上图标用到的尺寸都是dp不同的分辨率屏幕设计中的PX值是不一样的自己根据上面的换算率换算)

 



界面尺寸标注:


根据不同的平台、不同的开发方法,可能程序员需要不同的标注。标注的内容有:

控件的绝对坐标、大小、间距

文字的字号、行距、色值

列表项

图形等

 下面是“营销家”首页界面标注实例

8b7c58072870a84a0e282b169701.jpg 



标注工具:

马克曼(推荐使用 因为免费 而且操作超简单)  

pxcook(优点在于将标注和切图这两项设计完图之后最棘手的工作集成在一个软件内完成,支持Windows和mac) 

.                                                                                                                                                                                                                                                                                                                                                                                               


58
举报
|
16
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
钱包ui模板
户外旅行飞机情侣假日出行
新拟态风格 UI设计组件库
【新年UI图标】汽车icon
【新年UI图标】会员icon
【新年UI图标】礼物/活动icon
Security Camera UI kit
UI 登录界面设计模板包
【新年UI图标】钱包icon
智能家居中心 简约 UI设计组件库
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
【新年UI图标】秒杀icon
高级感金属拟物 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新能源APP应用UIKit
【新年UI图标】旅行icon
UI界面 组件
拟物风质感写实UI卡片合集源文件
盲盒APP UI设计
我的钱包-UI界面设计-app
3D卡通UI界面图标可爱插画免扣素
你可能喜欢
大家都在看
登录注册