`
java-mans
  • 浏览: 11415712 次
文章分类
社区版块
存档分类
最新评论

谷歌Android UI设计技巧

 
阅读更多

谷歌官方教程: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,是谷歌公司的注册商标、其它全部商标及版权归其各自拥有者所有

分享到:
评论

相关推荐

    《谷歌Android UI设计技巧》共五部分

    《谷歌Android UI设计技巧》共五部分

    谷歌Android+UI设计技巧

    较为实用的Android UI技巧,以五个部分说明Android UI要注意的事项、技巧等等。

    android UI设计技巧

    android UI设计技巧 1、该做什么,不该做什么 2、设计哲学和考量 3、你必须考虑的UI框架特例 4、新的UI设计模式 5、图标和准则

    《Android UI设计》PDF

    系统讲解了从事Android UI设计必须要掌握的Android平台的主要技术和特性,全面总结了Android UI的设计原理、设计理念和设计模式,并通过一个综合的案例项目阐述Android UI设计的方法和技巧。 《Android UI设计》特色...

    android UI 设计技巧

    对于UI开发设计非常有用的技术文档, 文档时google 工程师总结 可以看看 ,

    谷歌android+ui设计技巧共五部分

    第一部分:该做的和不该做的 第二部分:优秀UI设计准则 第三部分:框架特性 第四部分:新的UI设计模式 第五部分也就是最后一部分:图标与指导说明

    Android_UI设计指导

    Google 的官方开发者博客发布了名为“Android User Interface Design Tips” (Android UI设计技巧)的幻灯片,非常实用。

    《谷歌Android_UI设计技巧》共五部分(合集)

    符合谷歌的UI规范,做更好的界面优化,确保程序开发时更加的合理,不做多余的重复修改。

    《Google Android开发入门与实战》.pdf

    15.2.2 在线播放器ui设计 285 15.2.3 在线播放器数据存储设计 286 15.3 在线播放器的编程实现 286 15.3.1 申请api key 286 15.3.2 基础功能实现 287 15.3.3 实现activity 290 15.3.4 实现service...

    Google.Android开发入门与实战

    15.2.2 在线播放器UI设计 15.2.3 在线播放器数据存储设计 15.3 在线播放器的编程实现 15.3.1 申请APIKey 15.3.2 基础功能实现 15.3.3 实现Activity 15.3.4 实现Service 15.3.5 后续开发展望 15.4 在线音乐播放器应用...

    Google Android开发入门与实战的代码

    15.2.2 在线播放器UI设计 285 15.2.3 在线播放器数据存储设计 286 15.3 在线播放器的编程实现 286 15.3.1 申请API Key 286 15.3.2 基础功能实现 287 15.3.3 实现Activity 290 15.3.4 实现Service...

    android开发入门与实战(下)

    15.2.2 在线播放器UI设计 15.2.3 在线播放器数据存储设计 15.3 在线播放器的编程实现 15.3.1 申请APIKey 15.3.2 基础功能实现 15.3.3 实现Activity 15.3.4 实现Service 15.3.5 后续开发展望 15.4 在线音乐播放器应用...

    android开发入门与实战(上)

    15.2.2 在线播放器UI设计 15.2.3 在线播放器数据存储设计 15.3 在线播放器的编程实现 15.3.1 申请APIKey 15.3.2 基础功能实现 15.3.3 实现Activity 15.3.4 实现Service 15.3.5 后续开发展望 15.4 在线音乐播放器应用...

    android群雄传

    12.1 Android 5.X UI设计初步 258 12.1.1 材料的形态模拟 258 12.1.2 更加真实的动画 258 12.1.3 大色块的使用 259 12.2 Material Design主题 260 12.3 Palette 261 12.4 视图与阴影 263 12.5 Tinting和...

    Android 4游戏编程入门经典

     3.2 游戏设计:笔比代码更强大  3.2.1 游戏的核心机制  3.2.2 一个故事和一种艺术风格  3.2.3 画面和切换  3.3 代码:具体细节  3.3.1 应用程序和窗口管理  3.3.2 输入  3.3.3 文件i/o  3.3.4 音频  ...

    android游戏编程入门

     3.2 游戏设计:笔比代码更强大 46  3.2.1 游戏的核心机制 46  3.2.2 一个故事和一种艺术风格 47  3.2.3 画面和切换 48  3.3 代码:具体细节 52  3.3.1 应用程序和窗口管理 52  3.3.2 输入 53  3.3.3 文件I/...

    java二叉树源码-SCR-Screen-Recorder-app:安卓屏幕录制应用。不再维护!

    这个应用程序从快速而肮脏的原型演变而来,从未被正确重写/重新设计。 你不会在这里找到复杂的架构或漂亮的代码。 您可能会发现一些针对 Android 限制的有趣技巧和变通方法。 此应用程序不再维护。 由于此应用已从 ...

    JAVA上百实例源码以及开源项目

    此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这...

    JAVA上百实例源码以及开源项目源代码

    此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这...

Global site tag (gtag.js) - Google Analytics