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 安卓基本尺寸参考

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

  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设计中尽量用相对动态的思想考虑问题,要用发展的眼光看到这个世界,谢谢。

结束!

你可能感兴趣的:(android)