Android UI设计标准参考

大家好，随着安卓UI发展，最近工作中遇到各种屏幕适配、 切图尺寸 等各种问题，现写此文章写明各标准，说明各问题，以帮助UI设计同事一次性设计和切图成功，避免再次返工，增加不必要的工作量。

一，尺寸标准

随着安卓手机的流行，屏幕越来越大，各种尺寸手机都出现了，可怎么样设计UI怎么样切图更能符合安卓App的需求，我在此详细记录下来

1.1 安卓基本尺寸参考

安卓工程对屏幕尺寸做了一下分割，即对屏幕的小，正常，大，特大屏幕的标准做了个尺寸上的界定。

1. Google目前为安卓开发设计了六种尺寸（详细介绍请点击官方链接）

密度	屏幕尺寸	切图目录	评论
ldpi（低）	240×320	L	不需切图
mdpi（中）	320×480	M	不需切图
hdpi（高）	480×800	X	可切图，兼容小屏手机
xhdpi（超高）	1280x720	2X	需切图，作为标准
xxhdpi（超超高）	1920x1080	3X	需切图，常规手机
xxxhdpi（超超超高）	3840×2160	4X	大屏手机，未来趋势

1.2 安卓logo

安卓logo即安卓App安装后显示在桌面的入口图标，安卓开发中叫 ic_launcher

1. 标准最大尺寸，512*512PX，圆角半径弧度：70PX，图片格式：PNG；以此最大图进行缩放，app工程和上传市场使用。
2. 屏幕密度 图标切图尺寸参考
   mdpi 48x48px
   hdpi 72x72px
   xhdpi 96x96px
   xxhdpi 144x144px
   xxxhdpi 192x192px
3. 随着安卓设备的发展，app logo形状需求变得多样化，不仅仅有椭圆形，还有正方形和圆形等，Google为了支持这种多样性，设计了一套标准，把logo的图案与底色（可单色可纹理）分离，图案与形状分离。形成了一套可以支持多种图形的标准，详细介绍请点击链接；

二，屏幕适配

因为安卓的理念是一个app包，可以在多种大小屏幕设备上正常运行和使用，所以绝对的的尺寸和单一切图不能满足这个目标，这就产生了屏幕适配的问题。

2.1适配思想

既然要适配多种屏幕，就不能用PS绝对的尺寸思想来设计UI，要用相对的概念来思考屏幕上的各元素排列。

1. 深入研究相对与绝对的关系，一般秉承一个原则：较长的尺寸用相对理念实现，较短的尺寸用绝对的长度来标注。
2. 具体到实际工作当中：要思考，在特大和特小屏幕手机设备上会不会正常显示；要思考在数据最多最少时显示会不会显示不全，会不会突兀。我认为正确处理绝对与相对的关系，是一个UI设计师最基本的要求。
3. 那怎么用相对的思想考虑UI设计，可以考虑一个元素相对手机边缘或另一元素，居左居右的相对的大小。要这样考虑问题"对齐"、“居左”、“居中“、“等份”、……

2.2 适配策略

要做好适配工作，首先要知道页面上的UI元素的排列方式，是由上及下和由左向右的平铺 和由底层到上层的层层叠加 。这些元素的排列方式在PS设计中叫图层，在安卓开发中叫布局。 以下为常用的适配方案，可在UI设计中灵活使用

1. 多套图多套尺寸文件：Google为我们设计安卓开发包时，除了可以添加不同的尺寸图标文件外，还可以根据不同屏幕尺寸设计不同的尺寸值的配置文件。
2. 等比划分（安卓中叫权重）：当我们需要控制某个元素占据屏幕或另一元素几分之几的位置时，我们可以用此方案
3. 切图。切icon图时，尽量用透明的正方形背景，不要只切图形的形状图。切图也是门学问，从哪儿开始切，切哪个区域作为一个整体将直接关系到UI适配性。
4. 上下左右滚动。当页面上的元素较大较多显示不下时，选择特定区域上下滚动，左右可滚动，可跑马灯。
5. 其他方案。如用程序动态计算屏幕宽高，来调整元素位置。

三，图标设计思考方式参考

3.1设计页面

1. 设计普通安卓页面，首先要考虑状态栏颜色，需要说明的是状态栏只有黑色和白色，没有其他颜色。
2. 再要考虑状态栏是否沉浸，即在状态栏显示内容。通常显示
3. 设计页面底色，通常为白色或浅灰色
4. 设计页面，考虑好内容显示不下，滚动的区域，交互可能会影响设计
5. 设计好上下左右常规边距，以让开发同学统一页面

3.2设计各元素

1. 设计按钮：要考虑4种颜色，常规色、按下色、不可点击色和动态扩展色（或叫水波色）。
2. 设计图片：设计网络图片，除了考虑大小外，还要考虑做占位图和网络加载失败图。如图片验证码，新闻配图等。
3. 设计列表：要考虑无数据和无网络的展示情况，要考虑下拉刷新上滑加载更多的情况，列表的每一条要考虑点击时的颜色。
4. 设计文字：要考虑文字最短和最长的情况。文字比较多时，可以在头中尾显示…也可以跑马灯。也可以根据文字的增多动态设计字号。
5. 设计输入框：提示文字不要太长，太长无法显示，问题暂无法解决。输入文字的框的颜色可设计常规显示，选中时显示颜色。输入框尾部最好添加删除小按钮，有内容选中时显现。
6. Loading：一，区分loading框设计要符合安卓的设计习惯，不要仿IOS。二，正确区分loading框和loading图标的交互区别。三，可研究实现特定的loading以彰显APP特色。
7. 设计字体：一，要知道安卓只有一种系统自带的字体，不能像IOS一样灵活切换“苹方”等字体，但安卓有加粗斜体等属性。二，如果项目中确实需要特殊字体的显示，文字较少可以用切图实现，文字较多，可以添加字体文件ttf来实现，但下载的ttf文件通常较大，打到安卓apk包中会导致用户安装时下载包太大。三，那怎么解决这问题呢，我们UI设计师可以把此ttf字体文件用工具进行编辑，删除无用的字的字体，即可解决。如果是需要全字字体，那只能打全ttf文件或网络下载加载ttf文件。另外字体的单位，sp随系统设置字体大小改变而改变，dp则不然。

四，动画设计

为了提高用户的体验感，UI设计越来越注重添加动画。其中最典型的就是上面滚动，多层布局，显示不同部分UI，这种模式成为了主流。页面元素随着滚动，可移动可缩放可渐变成为了发展方向。其中做得比较好的app有腾讯新闻，小视频交互等。

五，图片格式颜色

5.1 png格式

其中png和jpg是位图；.9.png和svg图可以理解为矢量图

图片格式	说明
png	安卓中的基本格式
jpg	安卓中也支持
svg	等比放大或缩小
.9.png	俗称点九图，部分区域可拉伸，不可缩小。链接

5.2 颜色

UI设计要尽量用透明度来代替浅色，这样设计的好处就是1，半透明的效果比不透明体验感更好。2，开发中，当元素的底色修改了，元素的前景色并不需要改动。

六，总结

总之，因为需要适配，在UI设计中尽量用相对、动态的思想考虑问题，要用发展的眼光看到这个世界，谢谢。

结束！