Android UI设计标准参考
Android UI设计标准参考
- 一，尺寸标准
- 1.1 安卓基本尺寸参考
- 1.2 安卓logo
- 二，屏幕适配
- 2.1适配思想
- 2.2 适配策略
- 三，图标设计思考方式参考
- 3.1设计页面
- 3.2设计各元素
- 四，动画设计
- 五，图片格式颜色
- 5.1 png格式
- 5.2 颜色
- 六，总结
大家好，随着安卓UI发展，最近工作中遇到各种屏幕适配、 切图尺寸 等各种问题，现写此文章写明各标准，说明各问题，以帮助UI设计同事一次性设计和切图成功，避免再次返工，增加不必要的工作量。
一，尺寸标准
随着安卓手机的流行，屏幕越来越大，各种尺寸手机都出现了，可怎么样设计UI怎么样切图更能符合安卓App的需求，我在此详细记录下来
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
- 标准最大尺寸，512*512PX，圆角半径弧度：70PX，图片格式：PNG；以此最大图进行缩放，app工程和上传市场使用。
- 屏幕密度 图标切图尺寸参考
mdpi 48x48px
hdpi 72x72px
xhdpi 96x96px
xxhdpi 144x144px
xxxhdpi 192x192px - 随着安卓设备的发展，app logo形状需求变得多样化，不仅仅有椭圆形，还有正方形和圆形等，Google为了支持这种多样性，设计了一套标准，把logo的图案与底色（可单色可纹理）分离，图案与形状分离。形成了一套可以支持多种图形的标准，详细介绍请点击链接；
二，屏幕适配
因为安卓的理念是一个app包，可以在多种大小屏幕设备上正常运行和使用，所以绝对的的尺寸和单一切图不能满足这个目标，这就产生了屏幕适配的问题。
2.1适配思想
既然要适配多种屏幕，就不能用PS绝对的尺寸思想来设计UI，要用相对的概念来思考屏幕上的各元素排列。
- 深入研究相对与绝对的关系，一般秉承一个原则：较长的尺寸用相对理念实现，较短的尺寸用绝对的长度来标注。
- 具体到实际工作当中：要思考，在特大和特小屏幕手机设备上会不会正常显示；要思考在数据最多最少时显示会不会显示不全，会不会突兀。我认为正确处理绝对与相对的关系，是一个UI设计师最基本的要求。
- 那怎么用相对的思想考虑UI设计，可以考虑一个元素相对手机边缘或另一元素，居左居右的相对的大小。要这样考虑问题"对齐"、“居左”、“居中“、“等份”、……
2.2 适配策略
要做好适配工作，首先要知道页面上的UI元素的排列方式，是由上及下和由左向右的平铺 和由底层到上层的层层叠加 。这些元素的排列方式在PS设计中叫图层，在安卓开发中叫布局。 以下为常用的适配方案，可在UI设计中灵活使用
- 多套图多套尺寸文件：Google为我们设计安卓开发包时，除了可以添加不同的尺寸图标文件外，还可以根据不同屏幕尺寸设计不同的尺寸值的配置文件。
- 等比划分（安卓中叫权重）：当我们需要控制某个元素占据屏幕或另一元素几分之几的位置时，我们可以用此方案
- 切图。切icon图时，尽量用透明的正方形背景，不要只切图形的形状图。切图也是门学问，从哪儿开始切，切哪个区域作为一个整体将直接关系到UI适配性。
- 上下左右滚动。当页面上的元素较大较多显示不下时，选择特定区域上下滚动，左右可滚动，可跑马灯。
- 其他方案。如用程序动态计算屏幕宽高，来调整元素位置。
三，图标设计思考方式参考
3.1设计页面
- 设计普通安卓页面，首先要考虑状态栏颜色，需要说明的是状态栏只有黑色和白色，没有其他颜色。
- 再要考虑状态栏是否沉浸，即在状态栏显示内容。通常显示
- 设计页面底色，通常为白色或浅灰色
- 设计页面，考虑好内容显示不下，滚动的区域，交互可能会影响设计
- 设计好上下左右常规边距，以让开发同学统一页面
3.2设计各元素
- 设计按钮：要考虑4种颜色，常规色、按下色、不可点击色和动态扩展色（或叫水波色）。
- 设计图片：设计网络图片，除了考虑大小外，还要考虑做占位图和网络加载失败图。如图片验证码，新闻配图等。
- 设计列表：要考虑无数据和无网络的展示情况，要考虑下拉刷新上滑加载更多的情况，列表的每一条要考虑点击时的颜色。
- 设计文字：要考虑文字最短和最长的情况。文字比较多时，可以在头中尾显示…也可以跑马灯。也可以根据文字的增多动态设计字号。
- 设计输入框：提示文字不要太长，太长无法显示，问题暂无法解决。输入文字的框的颜色可设计常规显示，选中时显示颜色。输入框尾部最好添加删除小按钮，有内容选中时显现。
- Loading：一，区分loading框设计要符合安卓的设计习惯，不要仿IOS。二，正确区分loading框和loading图标的交互区别。三，可研究实现特定的loading以彰显APP特色。
- 设计字体：一，要知道安卓只有一种系统自带的字体，不能像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设计中尽量用相对、动态的思想考虑问题，要用发展的眼光看到这个世界，谢谢。
结束！
Android UI设计标准参考相关推荐
- 向产品宣战——开发者眼中的Android UI Design
向产品宣战--开发者眼中的Android UI Design 准备了半个月,思考产品设计.交互设计,见证了公司的产品.UE和开发的撕逼,将自己的思考.感悟,整理成下文,谨代表广大程序猿,向设计狮.产品 ...
- ui设计参考网站以及ui设计参考书籍
今天是ui设计参考网站以及ui设计参考书籍的一些总结推荐,ui设计其实不仅仅是学习一些软件那样简单,很多时候我们需要开发脑力以及想象力,看书是会打开思维,看网站是会打开想象.下面就是ui设计参考网站以 ...
- Android UI开发第二十五篇——分享一篇自定义的 Action Bar
Action Bar是android3.0以后才引入的,主要是替代3.0以前的menu和tittle bar.在3.0之前是不能使用Action Bar功能的.这里引入了自定义的Action Bar, ...
- 【Android UI】图片 + 文字展示by SpannableStringBuilder
起源 图片和文字混合展示,比如这么个需求,需要在每段文字的左边要有一个小圆点,(小圆点符号在android系统中并不支持). 先用TextView的setDrawableLeft, 嗯,达到要求,那么 ...
- 使用XML声明自定义Android UI元素
如何使用XML声明Android UI元素? #1楼 Google似乎更新了其开发者页面,并在那里添加了各种培训. 其中一个处理自定义视图的创建,可以在这里找到 #2楼 除了大多数投票的答案. obt ...
- Android UI开发第三十篇——使用Fragment构建灵活的桌面
http://www.lupaworld.com/article-222973-1.html 当我们设计应用程序时,希望能够尽最大限度的适配各种设备,包括4寸屏.7寸屏. 10寸屏等等,Android ...
- Android UI编程之自定义控件初步（下）——CustomEditText
概述: 基于对上一篇博客<Android UI编程之自定义控件初步(上)--ImageButton>的学习,我们对自定义控件也有了一个初步的认识.那现在我们可以再试着对EditText进行 ...
- android 组件 线程,Android UI线程和非UI线程
UI线程及Android的单线程模型原则 当应用启动,系统会创建一个主线程(main thread). 这个主线程负责向UI组件分发事件(包括绘制事件),也是在这个主线程里,你的应用和Android的 ...
- Android UI线程和非UI线程
UI线程及Android的单线程模型原则 当应用启动,系统会创建一个主线程(main thread). 这个主线程负责向UI组件分发事件(包括绘制事件),也是在这个主线程里,你的应用和Android的 ...
最新文章
- Go 学习笔记（60）— Go 第三方库之 go-redis（初始化 redis、操作 string、操作 list、操作 set、操作 hset）
- 串口同步异步c语言程序,同步串口spi的c语言编程
- 中科大 计算机网络6 Internet结构和ISP
- 丘成桐：年轻学者要敢于“无法无天”
- 81. Search in Rotated Sorted Array II
- .Net Framework SDK下的命令汇总
- Java多线程深度探索
- python中转义符的用法_一篇文章搞懂python的转义字符及用法
- 2022年信息安全工程师考试知识点：信息系统安全测评
- 今天手把手教你做一个Python版的迷宫小游戏
- OpenCV:Knn算法
- 端元提取——逐次投影算法SPA与顶点成分分析VCA
- 重新开始学Java——java中的标识符（biao,zhi,fu）、关键字和代码规范
- 给你的手机加上安全保障，请设置SIM卡PIN码
- vivo计算机有没有弧度计算公式,x 23手机背面弧度大不大？？
- [7]深入浅出工作开源框架Camunda： camunda-webapp 用户登录功能代码分析
- 在同一个二维坐标系绘制出一元二次曲线, sin正弦、cos余弦曲线 （numpy,matplotlib.pyplot ）
- 终于知道为什么程序员都喜欢删库跑路了
- 指标计算---vnpy
- 使用Gmsh画非均匀网格