阿房公同志永吹不休

阿房公
阿房公@ahfun

2012年6月9日

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

转自51CTO独家专题:谷歌官方教程:Android UI设计技巧

P2

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

简介

这个教程包含5个部分:

◆该做什么,不该做什么

◆设计哲学和考量

◆你必须了解的 UI 框架特性

◆新的 UI 设计模式

◆图标和准则

UI设计5不要

Don’t:

◆不要照搬你在其它平台的UI设计,应该让用户感觉是在真正使用一个 Android 软件,在你的商标显示和平台整体观感之间做好平衡

◆不要过度使用模态对话框

◆不要使用固定的绝对定位的布局

◆不要使用px单位,使用dp或者为文本使用sp

◆ 不要使用太小的字体

 

UI设计9要素:

Do:

◆为高分辨率的屏幕创建资源(缩小总比放大好)

◆ 需要点击的元素要够大

◆图标设计遵循 Android 的准则

◆ 使用适当的间距(margins, padding)

◆ 支持D-pad和trackball导航

◆正确管理活动(activity)堆栈

◆ 正确处理屏幕方向变化

◆使用主题/样式,尺寸和颜色资源来减少多余的值

◆和视觉交互设计师合作!

4则Android UI的设计哲学:

◆干净而不过于简单

◆关注内容而非修饰

◆保存一致,让用户容易投入其中,可附加少许变化

◆使用云端服务(存储和同步用户资料)来加强用户体验

优秀界面的设计5条准则:

◆关注用户

◆显示正确的内容

◆给予用户适当的回馈

◆有章可循的行为模式

◆容忍错误

关注用户:

◆了解你的用户(年龄,技能,文化,对你的应用的需求,使用的设备,何时何地如何使用设备)

◆‘用户优先’的设计心态 (用户通常是任务导向的行为模式)

◆更早,更频繁的由真实用户来测试

显示正确的内容:

◆最常用的操作需要最快被用户看到并且可用

◆不太常用的功能可以放到菜单里面

给予用户适当的回馈:

◆交互式的UI元素最少需要反映出4种不同的状态 (default,disabled,focused,pressed)

◆保证操作的结果是清晰可见的

◆多给予用户进度提示,但是不要干扰他们当前的操作

 有章可循的行为模式:

◆行为模式遵循用户的期望(正确的操作活动堆栈,显示用户期望看到的信息和动作)

◆使用合适的方式来加强功能可见性(可点击的元素就应该看起来是可以点击的)

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

容忍错误:

◆只允许有意义的操作(适当禁用一些按钮)

◆尽量减少不可回退的操作

◆允许回退(undo)比使用确定对话框更好(实际上,应该尽量少用确定对话框,它对用户是一种干扰)

“如果错误是可能发生的,那它就一定会发生。”

——Donald Norman, The Design of Everyday Things 作者

设计需要考量的8地方:

◆屏幕的物理尺寸

◆屏幕密度

◆屏幕的方向(竖向和横向)

◆主要的UI交互方式(触屏还是使用D-pad/trackball)

◆软键盘还是物理键盘

◆了解不同设备之间的相异之处是非常重要的!

◆阅读CDD,学习设备可能差异的地方

◆了解屏幕尺寸和密度分类

Android UI 框架特性

你必须了解(使用)的 UI 框架特性。

使用相对布局管理界面元素。

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

合理使用资源修饰符

使用资源修饰符来修饰同一套资源的多个不同版本。

◆一个apk包里面会包含所有的资源文件。

◆系统在运行时会根据软硬件环境来自动选择相应修饰符版本的资源。

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

9-patch drawables

使用 9-patch drawables – foo.9.png

◆9-patch drawables 的语法跟CSS3 border image 类似

◆根据边缘的像素宽度切割出不同的拉伸区域

◆最好同时提供 mdpi 和 hdpi 的版本

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

使用状态列表和多层叠加来制作具备复杂效果的可绘制图像

使用 Selector (state list) drawables (状态列表)来提供不同状态(normal,disabled,focused,pressed…)下的绘制图像。

使用 Layer drawables (多层叠加)来制作具备复杂效果的可绘制图像。

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

2012年6月9日 2.4K

    回复

    需填写称呼、邮箱,无需注册,必填项已标注*

    阿房公
    阿房公@ahfun

    2012年6月8日

    解决网站不能下载APK文件的问题 

    今天无意间发现此前上传的APK文件,在点击下载时报告404错误。我以为是上传程序有问题,FTP登录一看,在upload文件夹下面的确存在apk文件,思考了一下,应该是IIS不能识别APK后缀的文件,这个只要增加MIME类型即可。

    于是,配置增加新的MIME类型,后缀名:.apk,MIME类型:application/vnd.android.package-archive。再测试访问,一切OK。

    参考:http://www.eoeandroid.com/qa/2012/0206/697.html

    2012年6月8日 1.7K
      阿房公
      阿房公@ahfun

      2012年6月6日

      第一个手机应用程序《求签测字》问世 

      求签测字完全遵循易经求签和解字占卜的古典规则,并通过算法完美实现于手机客户端。主要包括“黄大仙灵签”与“诸葛解字”两大核心功能,后续还将加入黄历、解梦、星座等功能。本软件是我学习Android开发的第一个练手应用,通过这个项目,我已基本掌握了开发的要点和流程,以后可以尝试更高深的应用啦。

       

       

       

      我已向移动MM提交了作品,不知是否能被收录,先把安装包放在这里下载吧。201206062322592822.apk

      2012年6月6日 1.8K
        阿房公
        阿房公@ahfun

        2012年6月4日

        我的第一个DEMO应用——摇晃手机计数 

        Testing.apk

        实现功能:每摇晃手机一次,手机都会震动一次,并自动计数,在手机屏幕上显示已晃动了多少次。

        待优化部分:检测手机摇晃的算法有待进一步优化与完善。

        Eclipse截屏居然变成红色,不过懒得理会了。

        2012年6月4日 1.7K
          阿房公
          阿房公@ahfun

          2012年6月4日

          Eclipse快捷键大全(转载) 

          Ctrl+1 快速修复(最经典的快捷键,就不用多说了)
          Ctrl+D: 删除当前行
          Ctrl+Alt+↓ 复制当前行到下一行(复制增加)
          Ctrl+Alt+↑ 复制当前行到上一行(复制增加)
          Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了)
          Alt+↑ 当前行和上面一行交互位置(同上)
          Alt+← 前一个编辑的页面
          Alt+→ 下一个编辑的页面(当然是针对上面那条来说了)
          Alt+Enter 显示当前选择资源(工程,or 文件 or文件)的属性
          Shift+Enter 在当前行的下一行插入空行(这时鼠标可以在当前行的任一位置,不一定是最后)
          Shift+Ctrl+Enter 在当前行插入空行(原理同上条)
          Ctrl+Q 定位到最后编辑的地方
          Ctrl+L 定位在某行 (对于程序超过100的人就有福音了)
          Ctrl+M 最大化当前的Edit或View (再按则反之)
          Ctrl+/ 注释当前行,再按则取消注释
          Ctrl+O 快速显示 OutLine
          Ctrl+T 快速显示当前类的继承结构
          Ctrl+W 关闭当前Editer
          Ctrl+K 参照选中的Word快速定位到下一个
          Ctrl+E 快速显示当前Editer的下拉列表(如果当前页面没有显示的用黑体表示)
          Ctrl+/(小键盘) 折叠当前类中的所有代码
          Ctrl+×(小键盘) 展开当前类中的所有代码
          Ctrl+Space 代码助手完成一些代码的插入(但一般和输入法有冲突,可以修改输入法的热键,也可以暂用Alt+/来代替)
          Ctrl+Shift+E 显示管理当前打开的所有的View的管理器(可以选择关闭,激活等操作)
          Ctrl+J 正向增量查找(按下Ctrl+J后,你所输入的每个字母编辑器都提供快速匹配定位到某个单词,如果没有,则在stutes line中显示没有找到了,查一个单词时,特别实用,这个功能Idea两年前就有了)
          Ctrl+Shift+J 反向增量查找(和上条相同,只不过是从后往前查)
          Ctrl+Shift+F4 关闭所有打开的Editer
          Ctrl+Shift+X 把当前选中的文本全部变味小写
          Ctrl+Shift+Y 把当前选中的文本全部变为小写
          Ctrl+Shift+F 格式化当前代码
          Ctrl+Shift+P 定位到对于的匹配符(譬如{}) (从前面定位后面时,光标要在匹配符里面,后面到前面,则反之)

          下面的快捷键是重构里面常用的,本人就自己喜欢且常用的整理一下(注:一般重构的快捷键都是Alt+Shift开头的了)
          Alt+Shift+R 重命名 (是我自己最爱用的一个了,尤其是变量和类的Rename,比手工方法能节省很多劳动力)
          Alt+Shift+M 抽取方法 (这是重构里面最常用的方法之一了,尤其是对一大堆泥团代码有用)
          Alt+Shift+C 修改函数结构(比较实用,有N个函数调用了这个方法,修改一次搞定)
          Alt+Shift+L 抽取本地变量( 可以直接把一些魔法数字和字符串抽取成一个变量,尤其是多处调用的时候)
          Alt+Shift+F 把Class中的local变量变为field变量 (比较实用的功能)
          Alt+Shift+I 合并变量(可能这样说有点不妥Inline)
          Alt+Shift+V 移动函数和变量(不怎么常用)
          Alt+Shift+Z 重构的后悔药(Undo)

          编辑
          作用域 功能 快捷键
          全局 查找并替换 Ctrl+F
          文本编辑器 查找上一个 Ctrl+Shift+K
          文本编辑器 查找下一个 Ctrl+K
          全局 撤销 Ctrl+Z
          全局 复制 Ctrl+C
          全局 恢复上一个选择 Alt+Shift+↓
          全局 剪切 Ctrl+X
          全局 快速修正 Ctrl1+1
          全局 内容辅助 Alt+/
          全局 全部选中 Ctrl+A
          全局 删除 Delete
          全局 上下文信息 Alt+?
          Alt+Shift+?
          Ctrl+Shift+Space
          Java编辑器 显示工具提示描述 F2
          Java编辑器 选择封装元素 Alt+Shift+↑
          Java编辑器 选择上一个元素 Alt+Shift+←
          Java编辑器 选择下一个元素 Alt+Shift+→
          文本编辑器 增量查找 Ctrl+J
          文本编辑器 增量逆向查找 Ctrl+Shift+J
          全局 粘贴 Ctrl+V
          全局 重做 Ctrl+Y

          查看
          作用域 功能 快捷键
          全局 放大 Ctrl+=
          全局 缩小 Ctrl+-

          窗口
          作用域 功能 快捷键
          全局 激活编辑器 F12
          全局 切换编辑器 Ctrl+Shift+W
          全局 上一个编辑器 Ctrl+Shift+F6
          全局 上一个视图 Ctrl+Shift+F7
          全局 上一个透视图 Ctrl+Shift+F8
          全局 下一个编辑器 Ctrl+F6
          全局 下一个视图 Ctrl+F7
          全局 下一个透视图 Ctrl+F8
          文本编辑器 显示标尺上下文菜单 Ctrl+W
          全局 显示视图菜单 Ctrl+F10
          全局 显示系统菜单 Alt+-

          导航
          作用域 功能 快捷键
          Java编辑器 打开结构 Ctrl+F3
          全局 打开类型 Ctrl+Shift+T
          全局 打开类型层次结构 F4
          全局 打开声明 F3
          全局 打开外部javadoc Shift+F2
          全局 打开资源 Ctrl+Shift+R
          全局 后退历史记录 Alt+←
          全局 前进历史记录 Alt+→
          全局 上一个 Ctrl+,
          全局 下一个 Ctrl+.
          Java编辑器 显示大纲 Ctrl+O
          全局 在层次结构中打开类型 Ctrl+Shift+H
          全局 转至匹配的括号 Ctrl+Shift+P
          全局 转至上一个编辑位置 Ctrl+Q
          Java编辑器 转至上一个成员 Ctrl+Shift+↑
          Java编辑器 转至下一个成员 Ctrl+Shift+↓
          文本编辑器 转至行 Ctrl+L

          搜索
          作用域 功能 快捷键
          全局 出现在文件中 Ctrl+Shift+U
          全局 打开搜索对话框 Ctrl+H
          全局 工作区中的声明 Ctrl+G
          全局 工作区中的引用 Ctrl+Shift+G

          文本编辑
          作用域 功能 快捷键
          文本编辑器 改写切换 Insert
          文本编辑器 上滚行 Ctrl+↑
          文本编辑器 下滚行 Ctrl+↓

          文件
          作用域 功能 快捷键
          全局 保存 Ctrl+X
          Ctrl+S
          全局 打印 Ctrl+P
          全局 关闭 Ctrl+F4
          全局 全部保存 Ctrl+Shift+S
          全局 全部关闭 Ctrl+Shift+F4
          全局 属性 Alt+Enter
          全局 新建 Ctrl+N

          项目
          作用域 功能 快捷键
          全局 全部构建 Ctrl+B

          源代码
          作用域 功能 快捷键
          Java编辑器 格式化 Ctrl+Shift+F
          Java编辑器 取消注释 Ctrl+\
          Java编辑器 注释 Ctrl+/
          Java编辑器 添加导入 Ctrl+Shift+M
          Java编辑器 组织导入 Ctrl+Shift+O
          Java编辑器 使用try/catch块来包围 未设置,太常用了,所以在这里列出,建议自己设置。
          也可以使用Ctrl+1自动修正。

          运行
          作用域 功能 快捷键
          全局 单步返回 F7
          全局 单步跳过 F6
          全局 单步跳入 F5
          全局 单步跳入选择 Ctrl+F5
          全局 调试上次启动 F11
          全局 继续 F8
          全局 使用过滤器单步执行 Shift+F5
          全局 添加/去除断点 Ctrl+Shift+B
          全局 显示 Ctrl+D
          全局 运行上次启动 Ctrl+F11
          全局 运行至行 Ctrl+R
          全局 执行 Ctrl+U

          重构
          作用域 功能 快捷键
          全局 撤销重构 Alt+Shift+Z
          全局 抽取方法 Alt+Shift+M
          全局 抽取局部变量 Alt+Shift+L
          全局 内联 Alt+Shift+I
          全局 移动 Alt+Shift+V
          全局 重命名 Alt+Shift+R
          全局 重做 Alt+Shift+Y

          2012年6月4日 1.7K
            阿房公
            阿房公@ahfun

            2012年6月4日

            解决豌豆荚与ADB冲突的问题(续) 

            前几天提到安装豌豆荚软件,会导致ADB服务启动失败。当时的解决办法是将豌豆荚一卸了之。

            由于要装软件,今天又把豌豆荚装上了,果然在启动Eclipse的时候,Console里又再次报告“adb server didn’t ack * failed to start daemon”错误。仔细想了想,既然是冲突,必然是豌豆荚占用了ADB的服务端口,打开进程列表,发现豌豆荚有两个自动响应手机连接的系统进程。一个是wandoujia_daemon.exe,还有一个是wandoujia_helper.exe。直接kill掉,再重启Eclipse,果然一切OK了。

            2012年6月4日 1.8K

              Loading...
              穿越中

              哥们也是有底线的

              没有可加载的页面

              C
              写微文
              S
              搜索
              J
              下一篇微文/评论
              K
              上一篇微文/评论
              R
              回复
              E
              编辑
              O
              显示隐藏评论
              T
              回顶部
              L
              登录
              H
              显示隐藏帮助
              Ctrl+Enter
              提交发布
              ESC
              取消并清除内容