最美UI

为Android设备量身定制以打造出最为完美的应用!

如何为android设备量身定制以打造出最为完美的应用?这是让诸多开发者很是头疼的问题。不同于iOSandroid设备品类众多,屏幕分辨率、动态缩放、字体等各有不同。美国自学成才的ui/UX设计师Meng To结合自己所学及实战演练对android应用设计进行了各方位的深入剖析。

与苹果的iOS家族相比,android家族显然要大得多,但俗语有言“林子大了什么鸟都有”,android设备品类繁多,界面不甚协调,再加上其一贯的自由开放作风,直接导致了应用极度缺乏统一性。android自身的开放性极大的推动了应用的自主性,但对于开发者而言,在应用开发过程中,大到界面设计,小到屏幕分辨率、动态缩放及字体等都实在是很让人头疼的问题,这也是为什么近些年来响应式设计愈渐风行的原因之一。对此,来自美国自学成才的ui/UX设计师Meng To结合自己所学及实战历程对android应用设计进行了深入细致的剖析。

2013030821

过去我从来不会在android应用开发的方针准则上费事儿,因为我相信实践出真知,更何况android平台实在太为广泛,应用开发很难统一,但现在android平台已日趋成熟,这是件很值得高兴的好事。

返回按钮

在很长一段时间里,返回按钮因为同等的硬件问题永远不会成为用户界面的一部分。而现在硬件按钮已逐渐消失,早在2012年初,Google便官方表明“为了给用户使用应用带来最直观、无缝的体验,开发者在进行设计时需停止使用硬件式按钮。”现在,当用户进行内容分层次浏览时紧挨着相应应用LOGO处有一个表示“返回”的箭头已成非常流行的做法。用户界面的返回按钮(即所谓的“向上按钮”)相比硬件式返回按钮稍有不同,当向上按钮只是将界面内容退回到上一页时,返回按钮可以直接退回到之前使用的任何应用或内容。

2013030822

屏幕分辨率

android平台上,所有的屏幕分辨率都相当的让人摸不着头脑,从xhdpi(2x)、hdpi(1.5x)到mdpi(1x),听起来非常有技术含量。差不多一年前当我刚开始学习android应用开发设计时,伟大的程序猿们甚至都没有跟我解释它们每个的比值到底是多少,当然我理解也许在他们看来这不是个问题,但对于菜鸟而言,这实在是很恼人的大问题,不过不懂就问,学生时代的课堂上老师不都这样说的嘛。

2013030823

图:android屏幕分辨率

对于应用,必须以720×1280、540×960及360×640等的屏幕分辨率来进行设计,以确保硬件式按钮及所设计的高保真实体模型(样机)上有状态栏的地儿。

入门套件

大多数android应用中,动作栏是最显眼的UI元素。如果已经厌倦使用默认风格,可以尝试使用在线工具android Action Bar Style Generator生成炫目的动作栏。使用该网页应用,选好各个部位的颜色,便可自动生成所有相应的资源文件并打包成zip格式压缩包以供下载,里面包含有720×1280、540×960及360×640三种分辨率资源。

2013030824

图:三种分辨率

而来自Telly的设计师Jeremy Sallée之前也做了一个非常实用的可视化文档,展示了这三种分辨率的不同。

9-slice Scaling(9格缩放)

android上有一个和CSS非常不同的很独特的图形化资源管理方式,9-slicing允许开发者随心所欲地指定是否缩放,即使界面调整,圆角还可以保持不变。

2013030825

图:9格缩放

所谓9格,即如图所示,中间5区为内容区,正常缩放;1、3、7、9为角,不进行缩放;2、8横向缩放;4、6纵向缩放。9格缩放在ui设计中非常实用。

2013030826

图:android 9-slice

动作栏

不同于iPhone上应用标题常位于页首中间位置,在android平台上,应用标题正常位于左上方靠近LOGO的地方,这也导致如果点击应用图标,可能会转向某一侧菜单或退回到上一界面。

2013030827

某些情况下标题栏往下会有一个三角形小箭头,表示内容目录为可分级浏览,如同在PC上一样,在android设备上使用下拉式菜单也非常普遍。

2013030828

除此之外,其他所有的动作都应该相对立于右上方,包括刷新(在android设备上通过下拉刷新并不常见)、搜索及其他诸如返回等功能按钮,在动作栏中,使用过多的功能按钮并不合适,也就是所谓的物极必反,因此还是适当的好。

2013030829

字体

但就字体而言响应式效果就很重要,但很不幸字体是特定的,这也直接导致在某些设备上其显示效果非常令人“难过”。尽管智能手机更新迭代速度很快,但正常情况下要想保险一点还得在旧式手机上来测试,至于浏览器,还是使用IE6比较好。在android上最受欢迎的字体是Droid Sans,它是可以免费下载的,而现在Roboto在新设备上越来越流行,大有冲击之势。

20130308210

图:Droid Sans vs. Roboto

目录尺寸

android xhdpi(2x)中,像素最小值为正文28px、菜单及页首96px、页脚116px,只比iOS(24px、88px及100px)稍长,androidiOS的比率为116%。

设计测试

  • android手机

  • 来自Google的Roman Nurik之前发布了一款名为android Design Preview的相当实用的工具,允许开发者在自己的android设备上进行设计测试,能以非常完美的像素值展示桌面视图或设计图像,不需通过Dropbox(一个提供同步本地文件的网络存储在线应用),也不会将图片压缩得失真。

  • 在Mac上

要想在Mac上进行测试必须通过对安全隐私的系统参数进行设置,以确保除app Store内之外的应用可以下载

20130308211

图:系统参数设置

20130308212

图:android设计演示

在完成以上设置之后,通过USB数据线连接到设备上,点击“Install app(安装应用)”,随后即可进行演示测试。

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
双管齐下!如何同时设计 iOS 和 Android
下一篇
IOS7 UI设计不容错过的十大准则!