华为Mate 20 发布会后,外媒给予了“全球有史以来zui强大的Android手机”的高度赞誉。
也难怪华为Mate 20“稳了”,据了解,该系列的设计研发周期长达15个月,是同行业平均水平的2到3倍。
精心打磨的设计一定会在用户体验中得到好的反馈。作为UI设计师,这些安卓的设计规范你不能不了解:
1、安卓机屏幕尺寸与分辨率
安卓手机的尺寸很多很杂,用户量目前zui高的是720P和1080P。我们建图时一般使用1080P的分辨率来进行设计。 目前主流的安卓手机分辨率有以下几种:
hdpi,对应800*480的手机。主流机型,很多。如小米1 ,1s 三星 htc 等
xdpi,对应1280*720的手机。三星Galaxy系列和华为p6.
xxdpi,对应1080*1920的手机。小米手机,华为荣耀手机系列为主加上 htc one。
当下主流安卓手机的屏幕尺寸和分辨率:
小米3和小米4屏幕尺寸和分辨率: |
5英寸1920x1080像素 |
魅族MX2屏幕尺寸和分辨率: |
4.4英寸1280x800像素 |
魅族MX3屏幕尺寸和分辨率: |
5.1英寸1800x1080像素 |
HTC one屏幕尺寸和分辨率: |
4.7英寸1920x1080像素 |
华为荣耀6屏幕尺寸和分辨率: |
5英寸1920x1080像素 |
华为p6屏幕尺寸和分辨率: |
4.7英寸1280x720像素 |
华为p7屏幕尺寸和分辨率: |
5英寸1920x1080像素 |
在目前我们的安卓APP设计项目当中,我们并不会去为每一种分辨率去设计一套UI界面,所以我们需要变通,为了适应多分辨率,可以
1:在标准基础(xdpi:1280*720)上开始,然后放大或缩小,以适应到其他尺寸。
2:从设备的zui大尺寸(xxdpi:1920x1080)开始,然后缩小,并适应到所需的zui小屏幕尺寸。
有些时候我们也会在实际开发过程中,Android和IOS的设计稿若无太大差异,也可从IOS的分辨率(960*640)开始,再调整设计稿的比例,适应其他分辨率。但是这种方法在切图的时候 需要做一些图片的调整。如果不是矢量图的元件需要重新按照1280*720的尺寸设计下。
2.桌面图标尺寸
不同的安卓手机系统对应的桌面图标处理并不相同。并不是完全统计:除了小米手机,其他的安卓手机可能不容易直接找到规范,并不像ios系统提供直角即可。
那么设计师怎么办?我们需要先搞清楚对桌面图标进行统一剪裁的手机平台规范,就可以知道圆角设置能保证在这些平台可完全匹配,不出现白边黑边的情况。
这里提供一个简便的测试方法:在多个统一剪裁的手机里面装上一些用户多的app进行比较,看是否都完美的匹配未出现白边黑边的情况。
我的测试结果是:主流安卓手机在96x96px尺寸下圆角小于等于20px为安全值,供大家参考指正。
规范了解以后,怎么设计比较好?
以上提到的安卓设备的种种问题,带给设计师很多困扰。大家按照安卓zui新的Material Design规范来进行单独的安卓版界面设计,它可能比较费时,但它是zui规范、效果zui好的。知乎、印象笔记等产品均采用了Material Design的设计方式。
Material Design——非扁平化设计
Material Design是安卓阵营产品的设计规范和风格,它并不是简单的扁平设计,而是一种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的设计风格。
先为大家介绍一个亮点:
Z轴的概念
手机界面是一个平面二维空间,而Material Design通过二维的一些表达手段,比如投影、动效等构建出了Z轴(前后)的概念。
Z轴的投影
不同投影暗示了不同元素的高度,我们可以理解为如同我们桌子上的几张纸层叠在一起,那么我们认为重要的纸在其他纸张之前,它的投影是zui高的。所以在Material Design中投影zui高的代表Z轴zui高值,也是zui重要的内容。
不同的功能使用不同的Z轴高度可以表明他们的重要性和逻辑层级关系。界面中的Z轴应用可以是这样的:
Material Design还藏着很多惊喜,比如悬浮球 FAB是Material Design中zui明显的标志了,虽然很小却在视觉表现和功能承载上非常重要。我们应该怎么使用它?
由于篇幅原因,今天就先聊到这里。想要知道问题的答案,继续了解Material Design的话,请关注诚筑说UI设计培训!