现在的位置: 首页 > 综合 > 正文

谷歌Android UI设计技巧

2013年01月20日 ⁄ 综合 ⁄ 共 944字 ⁄ 字号 评论关闭

谷歌官方教程:Android UI设计技巧

 

第一部分:该做的和不该做的

谷歌官方Android UI设计技巧

作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条。因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱。

这个教程包含5个部分:该做什么,不该做什么、设计哲学和考量、你必须了解的 UI 框架特性、新的 UI 设计模式、图标和准则

该做的和不该做的

Don't:不要照搬你在其它平台的UI设计,应该让用户感觉是在真正使用一个 Android 软件,在你的商标显示和平台整体观感之间做好平衡、不要过度使用模态对话框、不要使用固定的绝对定位的布局、不要使用px单位,使用dp或者为文本使用sp、不要使用太小的字体

Do:为高分辨率的屏幕创建资源(缩小总比放大好)、需要点击的元素要够大、图标设计遵循 Android 的准则、使用适当的间距(margins, padding)、支持D-pad和trackball导航、正确管理活动(activity)堆栈、正确处理屏幕方向变化、使用主题/样式,尺寸和颜色资源来减少多余的值、

Do:和视觉交互设计师合作!

 

 

第二部分:优秀UI设计准则。

谷歌官方Android UI设计技巧

Android UI设计理念和注意事项

Android UI的设计哲学:干净而不过于简单、关注内容而非修饰、保存一致,让用户容易投入其中,可附加少许变化、使用云端服务(存储和同步用户资料)来加强用户体验

优秀UI设计准则:关注用户、显示正确的内容、给予用户适当的回馈、有章可循的行为模式、容忍错误

关注用户:了解你的用户(年龄,技能,文化,对你的应用的需求,使用的设备,何时何地如何使用设备)、‘用户优先’的设计心态 (用户通常是任务导向的行为模式)、更早,更频繁的由真实用户来测试

显示正确的内容:最常用的操作需要最快被用户看到并且可用、不太常用的功能可以放到菜单里面

给予用户适当的回馈:交互式的UI元素最少需要反映出4种不同的状态 (default,disabled,focused,pressed)、保证操作的结果是清晰可见的、多给予用户进度提示,但是不要干扰他们当前的操作

有章可循的行为模式:行为模式遵循用户的期望(正确的操作活动堆栈,显示用户期望看到的信息和动作)、使用合适的方式来加强功能可见性(可点击的元素就应该看起来是可以点击的)

如果用户完成一项任务需要复杂的操作,重新思考你的设计!!!

容忍错误:只允许有意义的操作(适当禁用一些按钮)、尽量减少不可回退的操作、允许回退(undo)比使用确定对话框更好(实际上,应该尽量少用确定对话框,它对用户是一种干扰)

“如果错误是可能发生的,那就有人会犯错误。”——Donald Norman, The Design of Everyday Things 作者

设计需要考量的地方:屏幕的物理尺寸、屏幕密度、屏幕的方向(竖向和横向)、主要的UI交互方式(触屏还是使用D-pad/trackball)、软键盘还是物理键盘

设计需要考量的地方:了解不同设备之间的相异之处是非常重要的、阅读CDD,学习设备可能差异的地方、了解屏幕尺寸和密度分类

 

第三部分:框架特性

谷歌官方Android UI设计技巧

你绝对应该尝试的Android UI框架功能

<相关布局>

注:相对布局和线性布局是Android里面常用的两种布局,线性布局比较简单,而相对布局可以做出比较复杂的布局管理,所以仅仅了解线性布局,很多时候是不够的。不过以作者之前Qt的经验来看,Android里面的布局管理功能都比较阳春也不太容易使用,不过这可能是跟移动平台的性能考量有关系。

所有资源都包含在一个.apk文件当中、系统在运行时选择哪些资源需要被调用

注:最常用的修饰符可能是locale修饰符(制作多语文本),dpi修饰符(为不同密度的屏幕制作不同尺寸的图标和皮肤),orientation修饰符(为横屏和竖屏提供不同的UI布局)。如果系统找不到对应的修饰符版本,它就会选择无修饰符的版本,这个版本通常也是所谓的默认选择。

 9-补丁使foo.9.png支持拖拽操作:类似于CSS3 的border图像、可拉伸区域以border像素显示、同时支持 –mdpi及 –hdpi显示效果!

注:drawables 在 Android 里面跟 WPF 里面的 Drawing 类似,用于定义一个可绘制的对象,包括位图,刷子,填充颜色或者以上物件的组合等等。所谓 9-patch drawables,就是将一个 drawable 按照定义的 4 个边缘的宽度大小切割成9个区域,包括4个角落,4条边缘和一个中心区域,当把这个 drawable 绘制到一个任意矩形区域时,drawable 的各个区域有不同的拉伸控制(角落不拉伸,横边横向拉伸,竖边竖向拉伸,中心区域横竖向都拉伸)。通常使用
9-patch drawable 一般是为了绘制出比较漂亮的带圆角背景,这样可以避免圆角及边缘被任意拉伸导致变形。当然,如果你的程序里面绘制的图像和目标区域大小完全一样,就不需要那么麻烦,不过以 Android 的状况来说,为了适应多种设备,最好不要事先假设目标区域的像素大小。

选择器(状态列表)支持拖拽操作

选择器(状态列表)支持拖拽操作

由XML 与PNG构成的图层支持拖拽操作

由XML 与PNG构成的图层支持拖拽操作:渲染结果输出(通过w/9补丁可对尺寸进行调整)

注:所谓多层叠加,使用PS来制作图标和皮肤的同学可能都清楚,比如说一个按钮的PS模板通常会包括所谓的background层定义底色,mask层定义轮廓,shine层定义前景的高亮效果。而 Android 里面允许你直接在 XML 脚本里面使用 Layer drawables 的语法来定义上述的多层叠加效果,这样可能比在PS里面直接做好要更灵活一些,并且有的层可以是来自png位图,有的层可以是直接通过 XML 脚本生成(比如纯色,过渡色等等)。

 

第四部分:新的UI设计模式

谷歌官方Android UI设计技巧

新的Android UI设计模式

新的UI设计模式:借鉴自2010年谷歌I/O大会中的Android UI 设计模式

新的Android UI设计模式

新的Android UI设计模式

新的Android UI设计模式

新的Android UI设计模式

仪表盘:“我能通过这个应用程序做些什么?”、“有什么新内容?”

 仪表盘 – 使用建议:专注于三到六个最重要的应用程序选择、强调新内容、要有吸引力 – 这是你的第一印象

动作栏:“我如何让<常规操作>进行得更为便捷?”

动作栏 – 使用建议:在屏幕上实现关键性应用程序操作、有助于空间感的传达、保持与应用程序风格的一致性、 提供’Home’机制——设置操作标识或专用按钮、不要引入关联性的操作

快速启动:“我能通过<这个项目>做些什么?”

第五部分:图标与指导说明

谷歌官方Android UI设计技巧

 图标与指导说明

新的Android图标风格:触控  提交  前端指向  为选中的图标添加顶光效果  不同形态、不同材质

图标指导说明:指导说明及模板可从此链接中获取

更多问题?

版权及商标:Android,是谷歌公司的注册商标、其它全部商标及版权归其各自拥有者所有

 

抱歉!评论已关闭.