Android 视觉规范
各种分辨率下图片尺寸
工程师通常开发三套UI布局文件,所以设计师通常也要不同的需求处理2-3套切图。
con Type |
Standard Asset Sizes (in Pixels), for Generalized Screen Densities |
||
Lowdensityscreen(ldpi) |
Mediumdensityscreen(mdpi) |
Highdensityscreen(hdpi) |
|
Launcher |
36 x 36 px |
48 x 48 px |
72 x 72 px |
Menu |
36 x 36 px |
48 x 48 px |
72 x 72 px |
StatusBar |
24 x 24 px |
32 x 32 px |
48 x 48 px |
Tab |
24 x 24 px |
32 x 32 px |
48 x 48 px |
Dialog |
24 x 24 px |
32 x 32 px |
48 x 48 px |
List View |
24 x 24 px |
32 x 32 px |
48 x 48 px |
视觉设计师通常在480x800px下进行设觉设计,然后进行适配HVGA(320x480)等。
间距规范与文字规范单位换算(dip、sp与px)
1、dip与px
Android工程师在写页面时,margin值的单位是dip,而视觉设计师通常情况下是通过px来控制margin值的,不同单位之间的差别是什么呢?看下面的参数。
在WVGA(800x480)下dip与px之间的视觉测算结果:
1dip=2px |
9dip=14px |
17dip=26px |
2dip=3px |
10dip=15px |
18dip=27px |
3dip=5px |
11dip=17px |
19dip=29px |
4dip=6px |
12dip=18px |
20dip=30px |
5dip=8px |
13dip=20px |
21dip=31px |
6dip=9px |
14dip=21px |
|
7dip=11px |
15dip=23px |
|
8dip=12px |
16dip=24px |
根据上述数值可以得出一个在WVGA下dip与px的换算公式(2N代表任意偶数,2N-1代表小与偶数1的奇数):
dip与px之间的换算公式:
a. 2N + 2N/2 = PX
b.(2N-1)+ 2N/2 = PX
注:偶数值dip 的1.5倍等于相对应的px值,偶数值的间距与奇数元素设置居中对齐的时候会有1px的误差,仔细看可能会不是很美观(如下图)。
A与B居中对齐时有一个值的差,C与D可以完美居中对齐。
但是这种情况发生的几率还是非常小的,只有在细扣页面的时候常见到,遇到时应急处理一下也可以解决问题,但是如果在一开始设计时就注意了的话,后面细扣也不会出现问题的,也就省去了应急处理的时间,在一定程度上可以提高效率。
在HVGA(320x480)下dip与px之间的视觉测算结果:
1dip=1px |
9dip=9px |
17dip=17px |
2dip=2px |
10dip=10px |
18dip=18px |
3dip=3px |
11dip=11px |
19dip=19px |
4dip=4px |
12dip=12px |
20dip=20px |
5dip=5px |
13dip=13px |
21dip=21px |
6dip=6px |
14dip=14px |
|
7dip=7px |
15dip=15px |
|
8dip=8px |
16dip=16px |
根据上述参数得出的结果是dip值等于px值。
由上述得出,视觉设计师在WVGA(480x800)模式下设计,建议最佳间距是:12px、18px、24px、30px、36px、42px、48px,由于dip、px值在HVGA\WVGA 对应的都是偶数,各个元素能做到最严格的对齐。
二、sp与px
在WVGA(800x480)下sp与px之间的视觉测算结果:
7sp=11px |
15sp=23px |
23sp=35px |
8sp=12px |
16sp=24px |
24sp=36px |
9sp=14px |
17sp=26px |
25sp=38px |
10sp=15px |
18sp=27px |
26sp=39px |
11sp=17px |
19sp=29px |
27sp=41px |
12sp=18px |
20sp=30px |
28sp=42px |
13sp=20px |
21sp=31px |
29sp=44px |
14sp=21px |
22sp=33px |
30sp=45px |
根据上述参数得出的结果:
sp与px之间的换算公式与dip与px的换算公式相同:
a. 2N + 2N/2 = PX
b.(2N-1)+ 2N/2 = PX
在HVGA(320x480)下sp与px之间的换算结果:
7sp=7px |
15sp=15px |
23sp=23px |
8sp=8px |
16sp=16px |
24sp=24px |
9sp=9px |
17sp=17px |
25sp=25px |
10sp=10px |
18sp=18px |
26sp=26px |
11sp=11px |
19sp=19px |
27sp=27px |
12sp=12px |
20sp=20px |
28sp=28px |
13sp=13px |
21sp=21px |
29sp=29px |
14sp=14px |
22sp=22px |
30sp=30px |
根据上述参数得出的结果是sp值等于px值。
由上述得出,视觉设计师在WVGA(480x800)模式下设计,建议常用最佳字号是:18px、24px、30px、36px、42px,在一些需要严格对齐的位置,这几个参数的文字是不会出问题的,当然其他的字号也是可以用的,毕竟应用中不是所有的文字都需要严格的对齐。
知识普及:
sp、dip,Android默认单位,可根据不同的屏幕大小自适应,同样的字号,不同的屏幕尺寸下显示的视觉效果大小不同。
Px属于固定像素值,不会主动自适应屏幕大小,不同的屏幕尺寸下显示的视觉效果大小效果相同。
仔细看了一下android开发文档,基本了解android对多屏的开发支持。
首 先,我们先看看android设备的屏幕状况:下表是google play 市场最新的统计数据,应该具有相当的代表性。
|
Ldpi (120) |
Mdpi(160) |
Hdpi(240) |
Xhdpi(320) |
small |
1.90% |
2.50% |
||
QVGA(240*320) |
480x640 |
|||
normal |
0.70% |
19.60% |
64.60% |
2.40% |
WQVGA400 (240x400) |
HVGA(320x480) |
WVGA800(480x800) |
640x960 |
|
WQVGA432 (240x432) |
WVGA854(480x854) |
|||
600x1024 |
||||
large |
0.20% |
2.30% |
||
WVGA800** (480x800) |
WVGA800* (480x800) |
|||
WVGA854** (480x854) |
WVGA854* (480x854) |
|||
600x1024 |
||||
xlarge |
1024x600 |
5.80% |
1536x1152 |
2048x1536 |
WXGA (1280x800) |
1920x1152 |
2560x1536 |
||
1024x768 |
1920x1200 |
2560x1600 |
||
1280x768 |
什么是DPI:Dot Per Inch。 1英寸=2.54厘米 这个需要重点了解。
上表可看出,对于size,实际上是个范围值。大致情况如下:
我们看看 Android提供的策略:
1:明确指定支持的屏幕大小,在安装时检查,不符合不允许安装。这比较粗暴,可能对一些对设备大小依赖度比较高的软件才会采用。
2:不同大小和密度的情况下,提供不同的布局方案。
实现方式: Layout-small/
Layout-normal/
Layout-large/
layout-xlarge/
3:不同密度提供不同的图片。
默认情况,系统可以帮忙进行伸缩处理,但这样的图片质量是有问题的。如果要得到更好的效果,需要专门制作图片,放置到相应的图片目录下。
drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi
对于多语言,可以添加语种,用 – 分隔
可组合。比如:drawable-en-rUS-xhdpi
4:系统的匹配优先级
4.1:查找最精确的配置
4.2:使用默认资源,然后进行拉伸处理
5:可用的配置项
Screen characteristic |
Qualifier |
Description |
Size |
small |
Resources for small size screens. |
normal |
Resources for normal size screens. (This is the baseline size.) |
|
large |
Resources for large size screens. |
|
xlarge |
Resources for extra large size screens. |
|
Density |
ldpi |
Resources for low-density (ldpi) screens (~120dpi). |
mdpi |
Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.) |
|
hdpi |
Resources for high-density (hdpi) screens (~240dpi). |
|
xhdpi |
Resources for extra high-density (xhdpi) screens (~320dpi). |
|
nodpi |
Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density. |
|
tvdpi |
Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi. |
|
Orientation |
land |
Resources for screens in the landscape orientation (wide aspect ratio). |
port |
Resources for screens in the portrait orientation (tall aspect ratio). |
|
Aspect ratio |
long |
Resources for screens that have a significantly taller or wider aspect ratio (when in portrait or landscape orientation, respectively) than the baseline screen configuration. |
notlong |
Resources for use screens that have an aspect ratio that is similar to the baseline screen configuration. |
实际上:语种也可以做为属性项,这可以做为图片多语言的方式。
举例:
res/layout/my_layout.xml // layout fornormal screen size ("default")
res/layout-small/my_layout.xml // layout for small screensize
res/layout-large/my_layout.xml // layout for large screensize
res/layout-xlarge/my_layout.xml // layout for extra large screensize
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscapeorientation
res/drawable-mdpi/my_icon.png // bitmap for mediumdensity
res/drawable-hdpi/my_icon.png // bitmap for highdensity
res/drawable-xhdpi/my_icon.png // bitmap for extra highdensity
其它:
:适当使用 Nine-Patchbitmap files,可以减少不同密度图片的工作量。
:res/drawable-nodpi/icon.png nodpi指的是不进行缩放。这个可能在某些特殊场景会用到。
:aspect 是否宽屏
根据上面的原理,可以确定简单的策略:
1:使用 dp 来定义大小。
使得布局与密度无关,使用Warp_content,fill_parent。
硬编码中也不要使用pix。
不要使用AbsoluteLayout。
同样:文字大小使用 sp。
为什么要用dp,道理很简单,如果有两个用户使用 相同size的手机,他们希望不管是不是密度不同,但都可以正常使用
同一个软件,要达到此目的,显然不能使用px,因为他会导致效果不同,如果使用dp,因为它是按设备的dpi进行了运算,刚
好将dpi的不同体现到了点阵上,因而达到相同效果的目的。
2:在如下场景,提供变化的布局:(只针对size,因为使用了dp)
2.1:在小屏上,发现按纽找不到了,或者不正确的换行了,导致无法正常操作或界面太丑。
2.2:在大屏上,发现空间的利用率太低,不利于用户的操作和使用。
注意:用户使用了更为昂贵的设备,当然希望得到更佳的体验,这个同样的重要。尽管在大屏上应用可以正常使用,但这是不够的。
2.3:当从横屏切纵屏时,发现按纽的位置不合理,应该将底端按纽放到右侧。这种情况下,也需要提供两种不同的布局。
一般情况下,我们不需要使用不同的layout,这个意味着要重新设计,工作量较大。
3:对于图片,在不同密度下提供不同的图片。
drawable中的XML files 定义文件,必须放到drawable/
下。
分辨率的比例是: 3:4:6:8
drawable-nodpi 暂不考虑
Nine-Patchbitmap files,这是通过锚定的方式,确定某些区域不缩放,如果要节省空间,可以部分情况采纳。
4:调试时,使用AVD虚拟设备如下:
除了设置正确的 dpi和分辨率外,还可设置Screen Size,得到更真实的效果。
参考:http://blog.sina.com.cn/s/blog_8bed0f3101012f2s.html
http://blog.sina.com.cn/s/blog_8bed0f3101012sq3.html
http://blog.sina.com.cn/s/blog_67f995260101mbw9.html
Android 视觉规范的更多相关文章
- Android视觉规范-间距规范与文字规范单位换算(dip、sp与px)
http://blog.csdn.net/shimiso/article/details/29826073 1.dip与px Android工程师在写页面时,margin值的单位是dip,而视觉设计师 ...
- 2015最新移动App设计尺寸视觉规范【图文版】(转)
如今手机app的屏幕设计尺寸参差不齐,仿佛来到了移动界面尺寸战国时代,每家移动设备制造公司都为了迎合大众的口味,各家都在2014年大放光彩.2015年也将会是我们移动APP设计界快速发展的一年. 因为 ...
- 《阿里巴巴Android编码规范》阅读纪要(二)
版权声明:本文出自汪磊的博客,转载请务必注明出处. 本篇继续上一篇<阿里巴巴Android编码规范>阅读纪要(一) ,还是建议各位同学有时间完整阅读一下<阿里巴巴Android编码规 ...
- Box(视图组件)如何在多个页面不同视觉规范下的复用
本文来自 网易云社区 . 问题描述 Android App中的页面元素,都是由一个个Box(可以理解成一个个自定义View组件和Widget同级)组成,这些Box可以在不同的页面.不同的模块达到复用的 ...
- 浅谈Android编码规范及命名规范
前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...
- Android 命名规范 (提高代码可以读性)
android文件众多,根据名称来辨别用途很重要,因此命名要规范 这篇文章可参考:Android 命名规范 (提高代码可以读性) 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名 ...
- Android编码规范01
目标: 掌握Java & Android命名规范 在研究Android源代码的基础上改进命名规范 考核内容 说出四种常用的命名法 比较java和C#的命名规范的不同点 总结: 读不同程序员写的 ...
- Android 命名规范 (提高代码可以读性) 转
转自:http://blog.csdn.net/vipzjyno1/article/details/23542617 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名的那个控件 ...
- android命名规范
Android 开发规范 (陈杨) (一)注意事项 1. 编码方式统一用UTF-8. Android Studio默认已是UTF-8,只要不去改动它就可以了. 2. 缩进统一为4个空格,将Tab si ...
随机推荐
- ios中广告滚动页面(uiscrollview)
展示功能 第一步 引入 “EScrollerView.h”,EScrollerView.m"文件 用法 NSArray *imgarr=@[@"1.jpg",@" ...
- DPDK无法分出连续大页面(contiguous hugepages)的几个解决方法
在使用DPDK或者SPDK的时候,需要在进程刚启动的时候使用rte_eal_init初始化Environment Abstract Layer,应用进程会通过这个函数告诉EAL为它映射多大的hugep ...
- httpclient获取响应实体和信息的封装方法(解耦更新)
转自:https://blog.csdn.net/fhaohaizi/article/details/77850302 2018年07月19日更新,主要是解耦之后方法很多地方发生了变化,httpcli ...
- <转>LUA语法分析
本文选自:http://www.cnblogs.com/nazhizq/p/6516561.html 一步步调试,在lparser.c文件中luaY_parser函数是语法分析的重点函数,词法分析也是 ...
- HDUOJ-------单词数
单词数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- [转]shell awk sed tr grep 语法汇总
tr 基本语法 -c # 用字符串1中字符集的补集替换此字符集,要求字符集为ASCII -d # 删除字符串1中所有输入字符 -s # 删除所 ...
- Rplidar学习(一)—— 开发套件初识
一.简介 RPLIDAR A1 开发套装包含了方便用户对 RPLIDAR A1 进行性能评估和早期开发所需的配套工具. 用户只需要将 RPLIDAR A1 模组与 PC 机连接,即可在配套的评估软件中 ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- java单双派机制理解
引言:Java是一个支持双分派的单分派语言 知道java是支持后期动态绑定,也知道访问者模式,但是两者之间的关系,还真不知道,况且在这之间还有一个静态绑定. 1.动态绑定 class Father { ...
- 启动mysql报错 -- ERROR! The server quit without updating PID file
开发说某个测试环境的mysql,无法重启了,报以下错误提示: # service mysqld restart Shutting down MySQL.. SUCCESS! Starting MySQ ...