2017最新安卓版UI设计规范篇

无规矩不成方圆,我们的UI界面设计也是一样,具有设计规范,系统建议的规范可以让我们设计具有统一性,界面视觉更美观,今天主要分享安卓版的ui界面规范。

概念篇

本文主要针对UI界面设计中安卓版的规范进行分享,如果你是新手,你就需要仔细的阅读,可能你需要先了解一些基础概念,如果你是牛哄哄的大神,可以选择直接拉到中间,也可以看看,给我奖励咯~互相探讨分享。

像素

像素(px)简单的来说就是颜色点。我们的屏幕都是由很多的小块的颜色构成的,这每一个颜色块我们就把它称为像素,如下图所示。就拿我们从小的伙伴马里奥来做个例子,整张图片就是通过很多不同颜色的点构成的,把所有的颜色点集合再一起,就成了图,而组成图片的这些点就是我们的像素了。

DPI

DPI指的是像素/英寸,直接翻译过来就是每英寸里面有多少个像素点,这个就是DPI。dpi的数值越大,就越清晰,同样拿我们的马里奥举例。第一张图是100dpi的图片,第二章是10000dpi的图片,但是图片的大小一致。简单点说就是一样大小的图片,第二张图片上的像素点比第一张多,所以就图片质量就更加的细腻,更加的清晰。

分辨率

分辨率其实跟我们dpi解释差不多,只是范围不同。我们整个显示器,电脑屏幕都是由这些像素构成的,分辨率的意思就是我们整个屏幕里面有多少个像素点,像素越多,我们看到的屏幕越清晰。例如常见的iPhone5的分辨率是640*1136,也就是说屏幕的宽有640个像素,屏幕的高有1136个像素的意思。

SP

SP是安卓中专门为字体设计的单位,由于我们市场上安卓手机的分辨率越来越多,所以去适配的时候就出现了很多的麻烦,数据太多。所以安卓为了更好的适配给出了这个设计单位。在mdpi密度的屏幕中:1px=1sp。主要用于字体显示,可以根据用户的字体大小进行缩放,打个比方:

上面对应的是三种分辨率的屏幕显示,第一个是一倍的mdpi,第二个是两倍的xhdpi,第三个是三倍的xxhdpi。如果mdpi上的字体是12px,那么所对应的是12sp。因为sp在任何分辨率上都不会改变,所以也都是12sp,而xhdpi的字体大小显示就是:12*2=24px,xxhdpi的字体大小显示就是12*3=36px,以此类推。

DP

DP也是一个为了安卓适配时用到的单位,安卓为了适配不同分辨率给出的单位,它也不会因为屏幕分辨率大小不一样而发生变化。适配分辨率的时候也是记住,在mdpi密度的屏幕中:1dp=1px,其余的分辨率用倍率乘以这个dp值就行了,如图所示。

好了,介绍了基本的几个概念,那可能有的人就不明白了,为什么要了解这些概念?

目前的市场上的手机有不同的分辨率:160/320/480dpi等。所以,我们不可能去记住那么多的数据,因此我们就通过DP这个单位和与PX的转化去记住。注意的是转化的时候不止是图标转化,间距和所有元素的大小也要相应的进行改变。而且还有一点值得注意的是,因为我们设计常用单位是PX ,设计的时候我们用这个单位,但是开发人员则用dp ,所以在这个设计过程中去适配不同的手机,安卓使用dp这个单位来进行px之间的转化,就是一个上述概念中的一个使用单位。

那么怎么去适配?单位之间怎么转化才可以让开发人员准确的还原我们的设计图,以及在设计过程中该怎么规范设计,去适配不同分辨率的手机呢?

现在市场上有很多种的系统、比如我们的安卓,苹果、黑莓、windows phone等,身为一个ui设计师,我们都应该对这些系统有所了解,了解完之后再去做APP界面就会更加的得心应手。上表是一张安卓版本的设计参考规范表,首先了解市场上用得最多安卓的分辨率种类:LDPI、MDPI、HDPI、XHDPI、XXHDPI。

首先我们从上往下来分析上表:

  • 第一行就是我们的手机分辨率,这个是一定要记住的,比较重要的,我们去做设计图的时候就是利用它的这个分辨率作为尺寸的。

  • 第二行是密度值,这个是手机出厂的时候手机厂商给的,就是一个英寸里面有的颜色点,比如LDPI这个分辨率的,它每一个英寸里面就有120个颜色点,所以密度值越高,屏幕越清晰,接下来的比例就只是一个相对应的比例了,没什么好说,接下来看一下下面的倍率关系。

以MDPI为基准,也就是说MDPI是一个一倍的分辨率,那么其它的都给出了它们相应的倍率,去适配的时候就是通过记住这个倍率去进行大小尺寸的转换。那么我们有这么多的分辨率,对应的就有这么多的尺寸,我们去设计的时候应该拿哪一个的尺寸来作为设计稿呢?一般去选择设计稿的时候有两种方法:

  • 方法1:以一个基本的尺寸(MDPI=320*480或者XHDPI=720*1280) 开始,之后将其缩放到不同的屏幕尺寸。

  • 方法2:从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。

因为MDPI是一倍的,而XHDPI是两倍,都是整数倍,容易去适配其它的分辨率,如果以XHDPI为设计稿,设计的所有数值都要求是双数的,去转换的时候才能保证不出现小数点,第二种方法的话就比较难去控制,所以一般还是建议用第一种,当然最好的方式自然是每一个分辨率都单独去做一套界面图。

了解完这些分辨率和用什么尺寸做标准之后,接下来让我们直接看一下界面设计要注意的一些规范。首先先从界面的布局尺寸开始:

布局规范表

上表就是我们在界面上最基本的一些控件尺寸的大小规范,比如状态栏、导航栏、和菜单栏,这些都是比较死的数据,多去看几次就记了,当然数据还是挺多的,你也可以用MDPI的尺寸标准看成DP然后再去适配其它的尺寸,这样做的话需要记住的数据就少了很多了,这就是DP的法,比如,MDPI的状态栏高度是25px,你就把它等同成25dp,然后再去进行相应的转换。

哪些基础控件的大小就不说了,记住就行,宽度的话是满屏,接下来看一下最细画笔大小,指的是一些分割线,或者一些线性图标,这些我们要保证做出来之后,用户去使用的时候可以看的清楚。

图标尺寸

在一个分辨率里,一张界面图上有太多的图标,不可能每一个图标的大小都是一样的,所有图标会根据所处的位置的不同,用处的不同,图标的大小也会不一样,图标的大小也不是我们想给多大就给多大,安卓系统有一套自己的规范。接下来我们看一下上面的这些图标指的是哪些。

第一个是启动图标,就是我们手机桌面上的图标。操作栏图标就是一个应用上操作栏上面的图标,上下文图标就是放在正文里面的一些图标,系统通知栏图标也就是状态栏上面的图标,商店启动图标是当我们去网页上下载的时候出现的那个图标,了解一下就行了。

看完了分辨率、控件大小和图标的规范,那么还有一个重要的因素,那就是字体之间的规范。

字体规范

字体的大小安卓里面也有相应的规范,比如最小字体是多大,文本是多大,按照规范来设计的话就可以保证我们的界面图整体看起来更加的美观,而且在使用的字体方面,也是有一个严格的规定,英文在安卓里面使用的是Roboto,中文字体使用的是droid sans fallback,当然现在随着安卓手机分辨率的增加, 中文,字体的选择也多了几种,比如中文也可以使用思源黑体等。

讲到这里,安卓部分的内容就算是讲完了,当然上面的所有规范也只是规范,不要因为这些规范去限制自己的想法,规范是用来打破的,设计最重要的还是设计得美观,设计的时候具体要给多大的数值,取决于设计师,规范是用来参考的。那么安卓有这样的一些规范,那ios系统的呢?想要继续了解ios是怎么去设计的,可以出门右拐进入我的个人中心查看iOS版的界面规范篇。

n/p/39aZHs4.html

2017最新安卓版UI设计规范篇相关推荐

  1. android最新设计规范,2016最新安卓版UI设计规范篇

    无规矩不成方圆,我们的UI界面设计也是一样,具有设计规范,系统建议的规范可以让我们设计具有统一性,界面视觉更美观,今天主要分享安卓版的ui界面规范. 概念篇 本文主要针对UI界面设计中安卓版的规范进行 ...

  2. android单机斗地主,单机斗地主最新安卓版

    单机斗地主最新安卓版是一款操作流畅的经典单机斗地主类游戏,妈妈再也不用担心我因为金币不够不能玩斗地主了,本作为大家提供了无限金币,让你畅玩一整天都不用担心.游戏中有各种的赛事哦,随时可参与,根据你的状 ...

  3. android版怎么下载地址,负重前行怎么下载到手机 最新安卓版下载地址

    负重前行怎么才能下载到最新的版本呢?想要比别人前线体验到游戏的操作快感,那么提前下载到游戏是关键,不过有玩家说在下载的时候找不到最新版本,也不知道下载地址,其实很简单,三招解决你的烦恼,同时还有安装负 ...

  4. python写安卓游戏_Python 3d最新安卓版下载,Python 3d游戏最新安卓版下载 v1.0 - 游戏盒子下载站...

    Python 3d最新安卓版是一款趣味十足的以贪吃蛇为玩法的3D风格的休闲类游戏.玩家在游戏中需要控制自己的这条小蛇灵活的躲避各种障碍,然后吞食资源进行成长!你能否将小小的蛇,养成霸屏的庞然大物呢?每 ...

  5. grasshop 犀牛5.0下载_新安|原创剑尊下载新版本 2020最新安卓版剑尊下载地址整理...

    剑尊最新版怎样下载是年夜局部剑尊玩家都存眷的,由于网上信息精确度纷歧,一些小白玩家经过网上下载的剑尊"最新版"各类弹窗告白满屏,接上去就给小同伴们分享一下最新的剑尊民间最新版下载. ...

  6. dos模拟器即时存档工具_DOS模拟器手机版|DOS模拟器最新安卓版apk下载v1.0.60 - 找游戏手游网...

    DOS模拟器手机版,DOS模拟器是一款游戏模拟器软件,玩家们能够在DOS模拟器上架设各种旧版风格的小游戏,体验儿时的游戏乐趣,回味经典. DOS模拟器介绍: Magic Dosbox app,这是一款 ...

  7. grab最新安卓版 打车_Grab官方海外最新版下载-Grab安卓版打车软件下载 - 燃文下载站...

    Grab安卓版是一款东南亚出差游玩打车软件,支持中文界面和多种货币支付方式,自带翻译功能,提供出租车.私家车.拼车.顺风车和摩托车等全面服务,Grab在新加坡.马来西亚.印尼.泰国.越南.菲律宾.缅甸 ...

  8. ino查看工具android版,(组图)老牌 RSS 阅读器 Inoreader 安卓版 UI 改版了

    软餐(ruancan.com)获悉,老牌的 RSS 阅读器 Inoreader 近日向 Android 平台推出了 Inoreader 7.0 Beta 版,在该版本上,Inoreader 对 UI ...

  9. php一点通,编程一点通下载-编程一点通最新安卓版下载-99wo下载站

    今天小编又要为大家推荐一款很特别的软件了,这款软件不管是玩法还是画面都没有办法可以挑剔,一起来看看吧! 编程一点通APP是一个免费的,能够让你在手机上学习编程知识的一款手机软件,这款软件能够让你在手机 ...

  10. java虚拟机最新安卓版apk

    前言 JVM调优主要是针对垃圾收集器的收集性能优化,令运行在虚拟机上的应用能够使用更少的内存以及延迟获取更大的吞吐量.毫不夸张地说,JVM是现代软件工程最成功的案例之一.因为它自带GC,又有无数可以微 ...

最新文章

  1. 逆袭!? 期待下一个“BCH”出现
  2. Android中XML的命名空间、自定义属性
  3. 通过极简模拟框架让你了解ASP.NET Core MVC框架的设计与实现[中篇]:请求响应
  4. OpenHFT Java Lang项目
  5. MongoDB中MapReduce介绍与使用
  6. android:gravity与android:layout_gravity
  7. 蓝桥杯 PREV-37 历届试题 分巧克力
  8. Angularjs总结(一)表单验证
  9. 典型的异步服务器端套接字构建
  10. 【操作系统】银行家算法
  11. Python安装时报缺少DLL的解决办法
  12. APP加密,让你的移动应用更安全!
  13. Java中的servlet是什么?
  14. python xlwt_python xlwt模块简介
  15. MySQL数据库复制概论
  16. icpc 昆明 A.AC
  17. PHP处理iso8583报文
  18. matlab画图线型、符号、颜色
  19. SpringBoot基于websocket的网页聊天
  20. 新手问题:如何理解sql语句中 +textBox1.Text+

热门文章

  1. 导致ImportError: No module named 'xxx'问题的两种原因以及解决方案
  2. java.lang.IllegalStateException: Found multiple @SpringBootConfiguration annotated classes
  3. 苹果麦克风设置在哪里_这一份 iOS 14 安全和隐私设置指南,请收好
  4. 三国志战略版:今天你打铁了吗?货布商店大解析
  5. make_blobs方法的使用
  6. Caffe Blobs
  7. [HAL]STM32F1光照度测量BH1750 串口输出
  8. c语言三维空间间绕坐标轴变换,浙江大学软件学院三维动画与交互技术考试概念拾掇...
  9. idear修改新的git地址
  10. idear右边的依赖视图没了_APP开发中出现提到的Idear是什么意思