最新消息:文章中包含代码时,请遵守代码高亮规范!

UI界面设计-Android【原创】

Android Shirley 296浏览 0评论

前言:在APP的界面设计规范中,因为机型多种多样,在设计中的规范也参差不齐,大多数是沿用720*1280的规范来设计的,但手机的更新换代越发迅速,对清晰度的要求也愈发的高!下面我给大家介绍下Android最新的界面设计规范!

一、工欲善其事必先利其器

要想APP设计的好,工具是必不可少的,现在大多是用Photoshop和AI,当然如果用Mac的话,你也可以尝试用Sketch。软件的版本是一直在升级的,为了使设计做的更好,我的建议是用最新版的,软件的升级并不是无的放矢的,版本越高其功能越强大,也就越能提升设计师的能力和效率,现在PS最新版本CC2017也早已经上线了,建议做设计的小伙伴们赶紧换上哦!CC2017 的功能也有了全新升级了哦!酷炫的启动界面,更加人性化并且方便实用的新建界面,还可以直接下载Stock素材模板,增加SVG字体样式,可以直接输入表情了哦!更多新功能等着你去发掘,赶快行动起来吧!

二、设计规范

一个设计规范,为什么不是规定?因为市面上的手机尺寸繁多,我们只能根据相应的适配性、可用性推出一套适用于大部分机型的设计规范(特殊机型除外)!

1、我们先来看下一个APP的界面主要构成,一般APP界面由图片、文字、icon(图标)、以及布局层构成。

2、接下来就是设计稿的规范以及设计了,从事这个行业的设计师都知道app设计,无论iOS还是Android都分为:状态栏、导航栏、内容区域以及菜单栏。

 

在Android设计中,我们根据页面布局的合理性、以及视觉上的舒适度会在左右两边各留24像素的边界来适应用户体验(当然你也可以留30px,这个也没有什么硬性规定的);当然现在有很多app已经摒弃了边界的限制,像某宝的页面就已经舍弃边界留白了。

三、关于图标

安卓手机的市面占有率可谓是很高的,而且机型繁多!那么,问题来了;这种情况下图标如何去适应不同机型以及屏幕分辨率呢?按照dpi的大小,Google吧图标分成了四种模式,即:XXHDPI、XHDPI、HDPI、MDPI,由于Android4.3的出现,现在已经有了XXXHDPI。

名称 分辨率 Icon尺寸
MDPI 320*480 48*48
HDPI 480*800 72*72
XHDPI 720*1280 96*96
XXHDPI 1080*1920 114*114
XXXHDPI 2160*3840(4K) 192*192

 

APP的icon尺寸分为如下几种:(具体切图操作详情参考博客:“教你快速切出android开发用的一套应用图标”http://blog.it985.com/17256.html)

四、菜单列表页

菜单类型的列表页是APP设计中很基础的一种页面,通过分栏的菜单罗列出对应的功能,通过间距的不同可以分别出不同类型的功能,微信里我们就能常见这样的页面,普通单条菜单的高度为96PX,高度适中,也适合触控操作。

当然,菜单页面也可以通过变形成为其他的一些界面,将不同的功能和控件组合在菜单页面里,比如下单页面/订单页:

 

五、提醒&弹窗

系统提醒大体分为两种,一种是通知,不带操作,几秒就消失,另一种通知提醒有“确定”“取消”等等给用户的操作。

 

由于系统默认的弹窗视觉上不够美观,所以目前越来越多的APP在弹窗设计上都进行了个性化,优化了弹窗的用户体验:

 

 

 

 

六、动效设计

动效是UI设计进阶的内容,越来越多的APP开始融入的动效的成分。因为动效能很好的吸引用户的眼球,构建用户脑中对APP的建模,方便用户使用与理解,提升了交互。但动效设计和传统的APP设计不太一样,需要学习新的工具,常用的有AE和C4D,AE主要处理平面动效,C4D主要生成3D动效,两者的难度都比较大。另外,这里生成的动效都是视觉样例,要在APP中落地实现,还要极大的依靠移动开发者的能力。设计师需要把审核通过的动效拆分成最基础的平移、缩放、旋转、透明度等几个最基础动作的组合,还要考虑运动速率,使动效看起来更真实,贴近物理定律,开发需要用代码按这些动作组合来实现设计的动效,需要设计师和开发双方有很好的技术的配合。

 

(部分图片来自网络,侵删)

 

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/21916.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Shirley的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!