Android UI Design Tips 笔记

一、为什么我们要关心 UI?

如果一个应用软件具备良好的使用体验,那么:

1.  用户所感知的软件质量越好
2.  将给你更高的评分
3.  软件会有更好的排名
4.  更多人购买或安装你的软件

二、接下来将讨论如下内容:

1.  应该遵循和不应该遵循的设计原则
2.  设计理念和各种考虑因素
3.  你必须使用的 UI 框架特性
4.  新的 UI 设计模式
5.  图标和准则

1 、应该遵循和不应该遵循的设计原则

错误的设计原则

1. 不要照搬其他平台上的 UI 设计。

应该让用户感觉是在使用一个真正的 Android软件,在你的品牌显示和平台整体观感之间做好平衡。

2. 不要过度使用模态进度条和确认对话框

(文:意思是,不要经常弹出那些挡了用户所有操作的对话框或进度框。)。

3. 不要使用固定的绝对定位布局。

(文:AbsolutLaout,软件中你若使用此布局方式,意味着,市面上有多少种分辨率手机,你就要写多少份布局文件)

4. 不要使用 px 单位,使用 dp;如果是文本,使用 sp 。

(文:因为Android产品众多,各自分辨率的手机充斥市场。如果使用和分辨率相关的单位(px),很可能导致在其它

分辨率的手机上看到你意料之外的Size效果。而dp(或者dip)和sp是和屏幕密度相关的(其实是根据320x480为标准计算的))

5. 不要使用太小的字体。

正确的设计原则

1. 所有资源都要针对高分辨率屏幕创建

2. 需要点击的元素要够大

3. 图标设计要遵循Android 的准则

4. 要使用适当的间距(margins, padding) 

5. 要支持 D-pad 和 trackball 导航

(文:我猜测是“触摸屏”和“轨迹球”,“轨迹球”相当与PC上的鼠标,当用户滑动轨迹球去指向目标事物时,目标事物需要做出回应。说好懂点,相当于当你的鼠标划过一个链接或当你的鼠标悬停再一个链接上的时候,链接通常会加高亮。如果说“触摸屏”只需要关注用户手指按下的动作,那么“轨迹球”还要关注“控件”被选中的动作。)

6. 要正确管理活动(activity)栈

(文:activity的lanchmode属性能够设置activity在栈中的活动状态,例如栈内单例或者栈顶单例或者总是新建等。决定于你是否希望用户重新回到上一个(或更早)的界面,看到“最初的”还是“上一次”的数据。前者通常意味着丢弃用户上一次填写的数据、从数据库查询更新的数据等等。例如XXX项目中,当用户按HOME键回到桌面,然后点击状态栏(桌面顶部)将出现一个“小人”图标,用户点击它将会回到应用程序中来,对于“主界面”或者“图表界面”来说,就是使用的看到“上一次”数据的方式。取决与他们的lanchmode的设置)。

7. 要正确处理屏幕方向变化。

(文:除非万不得已,否则建议不要强制横屏或竖屏。躺在床上玩手机的人知道,单手举在空中久了,手会酸疼,这时候希望横过屏来双手操作。双手举久了,就想测过身来躺并换成单手举着。总之,人类这个生物永远不可能找不到让自己永远满意的舒服的姿势。因此,保险的做法是,将他任何的使用姿势都考虑在内。

可是我悲哀的发现,就算我们做到了支持自动横、竖屏,人类还是不会满足。因为当你侧身单手使用手机的时候,就算竖着拿手机(对于正侧身的人来说,手机是竖着的。这时候人的意愿应该是想竖屏显示内容),可是因为手机方向对于地球来说,已经横过来了,因此,手机内容会变成横屏。当我使用某款电子书软件时,这个问题可是烦透我了(我不得不偏着头看书),直到用了"QQ Reader",心情一下子无比欢畅,仅仅因为他支持 “总是横屏或总是竖屏” 的设置。于是我就这样成了 "QQ Reader" 的忠实用户。
迷住一个男人,只需要女人一个妖媚的眼色;迷住用户,有时候也只需要一个很贴心的细节。)

8. 要使用主题/样式、尺寸和颜色资源来减少界面冗余。

(例如,你的软件(甚至同一个界面)里有很多文本框,每个文本框的样式都差不多甚至一样。那么你是否每个都要设置一堆啊?如:

<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5.0dip"
android:layout_marginRight="5.0dip"
android:layout_marginBottom="5.0px"
android:background="@drawable/login_edit"
android:paddingLeft="35.0sp"
android:singleLine="true"
android:saveEnabled="true"
android:inputType="text"
/>

还是说这样稍微好点呢(将修饰成Style里,让Style重用):

<EditText  style="@style/Style_Edit" /> 

假如说你的软件里有二十个这样的文本框,你只需复制这一行代码二十次就可以了。
还有人会犹豫说,我的二十个文本框另外还有些细节的区别怎么半?

1. 为每种文本框都写一个Style 。

2. 抽象出几种间的共同点,用

<style parent="@style/Base_Edit">...差异化内容</style>

3. 假如差异的内容并多并且不常见的化,还有个小窍门。例如:

<EditText  style="@style/Style_Edit"
android:inputType="password"
/>

这样就将,Style为普通文本框修改成了密码框。秘诀在与android解析XML应该用的pull解析器,pull解析器的特征就是写在前面的属性将被先解析到(先触发事件),因此,android:inputType="password"因为被写在了后面,就将覆盖Style里面的内容。这样也完成了样式差异化。)

2.  设计理念和各种考虑因素

设计理念

1. 干净而不过于简单(文:让我想到了一句话--美观是用户体验的一种表达形式,而不是为了美观而美观。)

2. 关注内容而非修饰

3. 一致,吸引人,少量简洁的变化

4. 使用云端服务(同时在 PC 桌面和手机上同步用户使用场景)来加强用户体验

3、优秀界面的设计准则

1. 关注用户

2. 显示正确的内容

3. 给予用户适当的回馈

4. 有章可循的行为模式

5. 容忍错误

关注用户


1. 了解你的用户(年龄,技能,文化,是否有身体障碍,对应用的需求,使用的设备,何时何地如何使用设备)
2. “用户优先”的设计心态 (用户通常是任务导向的)
3. 更早、更频繁的由真实用户来测试

显示正确的内容

1. 最常用的操作用户应该立即可以看到并且使用
2. 次要功能可以放到菜单里面

给予用户适当的回馈

1. 交互式的 UI 元素最少需要反映出 4 种不同的状态 (default,disabled,focused,pressed)(文:推荐Google自家的 Google Music Android客户端)
2. 保证操作的结果是清晰可见的。(文:这个我推荐Excel)
3. 多给予用户进度提示,但是不要干扰他们当前的操作。

(文:其它常见的替代方式:
1. 常驻通知栏,下划通知栏能看到当前进度。需要学习RemoteView。
2. 在Title右测显示小的圆形进度条(一直旋转那种)。如Gmail等。
3. 像Windows的中的迅雷下载一样,置顶显示一个小图标。推荐体验一下UC迅雷,感觉不错。WindowManager的针对整个屏幕的addView和removeView机制能够实现此效果。
4. 像UC浏览器那种,屏幕顶部显示一个横向的进度条。 )

有章可循的行为模式

1. 行为模式遵循用户的期望(正确的操作活动栈,显示用户期望看到的信息和动作)
2. 使用合适的方式来加强功能可见性(可点击的元素就应该看起来是可以点击的)
3. 如果用户完成一项任务需要复杂的操作,重新思考你的设计!!!

容忍错误

1. 只允许有意义的操作(适当禁用一些 UI 元素)
2. 尽量减少不可回退的操作
3. 允许回退(undo)比使用确定对话框更好(实际上,应该尽量少用确定对话框,它对用户是一种干扰)

4、设计上的考虑因素

1. 屏幕的物理尺寸
2. 屏幕密度
3. 屏幕的方向(竖向和横向)
4. 主要的 UI 交互方式(触屏还是使用 D-pad/trackball)
5. 软键盘还是物理键盘
6. 了解不同设备之间的相异之处是非常重要的
7. 阅读 CDD(兼容性定义文档),了解设备可能的差异
8. 了解屏幕尺寸和密度分类(点击这里阅读)

如果错误是可能发生的,那它就一定会发生。
- Donald Norman《The Design of Everyday Things》作者(文:《设计心理学》,关于Donald Norman的详细情况在这:http://www.techcn.com.cn/index.php?doc-view-134543.html)

转载自

http://blog.sina.com.cn/s/blog_8a97a8d50100u2gs.html

时间: 2024-08-13 23:08:15

Android UI Design Tips 笔记的相关文章

向产品宣战——开发者眼中的Android UI Design

向产品宣战--开发者眼中的Android UI Design 准备了半个月,思考产品设计.交互设计,见证了公司的产品.UE和开发的撕逼,将自己的思考.感悟,整理成下文,谨代表广大程序猿,向设计狮.产品X开战.希望广大程序猿能够坚持贯彻Google的Material Design,切实认真负责的执行Android的设计思想,将MD设计带到产品中去,不做中国特色的App,将Android的开发风气带到正轨,树立正确的开发观.设计观. 希望广大程序猿朋友在博客后面留言.签名,规范Android设计.树

Android ui 测试课堂笔记

开始接触Android ui测试了,笔记如下 模拟器 Genemotion , the fastest android simulator in the world Android ui 测试工具 Selendroid

Android UI Design

Ref:直接拿来用!10款实用Android UI工具 Ref:Android UI设计资源 Ref:Android酷炫实用的开源框架(UI框架) Ref:Android UI 组件 Ref:Android Design Ref:21个免费的UI界面设计工具.资源及网站 Ref:http://www.bypeople.com/android/

[Android ]UI 性能优化笔记

在 Android 开发过程中不免面临一个把应用做出来,再到把它做成牛逼的应用的过程,其中非常直观的一点就是应用 UI 的流畅度. 这里对一些性能相关的知识进行了小结~ 一.UI卡顿的原因 首先,我们评价UI的时候经常会遇到这几个说法: 1."这动画30帧都不到,卡成狗" 2."这帧率明显都到50多了怎么还是卡卡的感觉" 3."拖动的时候感觉在抖" 这里其实有两个问题: A1. 平均帧率不足 A2. 平均帧率上去了,但是掉帧 帧率不足很好理解,掉

Android Material Design 学习笔记 - Matrial Theme

google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方链接:http://developer.android.com/training/material/index.html) 在以后的Android中,我觉得Design风格将逐渐流行,所以:为了跟着潮流,我们也是要不断的与时俱进 --->> 如何使用Design主题? 使用的时候,你仅仅需要在St

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初

Android Material Design新UI控件使用大全 一

序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们

Android Material Design新UI控件使用大全 二

序言 上一篇中我们介绍了几个简单的新UI控件,相信很多小伙伴对Materil Design的视觉效果有了一定的了解,今天我们就继续介绍其他几个控件的玩儿法,让我们一探Materil Design的究竟,我们先来看一下我们今天要介绍的CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout及TabLayout, ok,我们接下来就逐一对这些控件进行解析,揭开他们神秘的面纱,来为我们服务,Let's Go. TabLayout 我们先来看官方的介绍

Android Material Design新UI控件使用大全 三

序言 在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及CoordinatorLayout有了一定的了解后,我们最后将对AppBarLayout,CollapsingToolbarLayout进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图) AppBarLayout AppBarLayout 是继承LinerLayo