Android UI 设计模式——我们做的是什么
如需转载请注明出处：http://www.cnblogs.com/PengLee/p/4504190.html
在这部分内容中，我们要介绍的是：如何从交互和用户体验出发，深入分析一款应用中的优势、劣势，以及如何改进
过程之中，我们会根据实际的应用进行分析。但是就算是Greg Nudelman 这样的交互大师，有时候难免也会出错，更况
且这里面的交互模式的依据是Android_4.0的官方指南，并没有考虑更新的Android特性。所以，你完全可以有自己的观
点，但是在推向市场之前你应该有足够的依据来支持自己的做法。
还是从Greg Nudelman举得这的经典的应用 AutoTrader 的改进说起吧！
AutoTrader最初是一款IOS应用，之后出现了Android版本的AutoTrader，但是明显的是，Android版本明显是从
IOS版本“硬性”的转化过来的，几乎没有考虑到Android平台上特有的一些交互和UI模式，一些IOS的痕迹非常的明显，
我们的任务就是通过分析它，以便初步的了解Android平台上的应用的特有的模式。
启动图标
先来看看启动图标。从IOS直接移植过来的大多数应用都忽略了一项必不可少的工作，那就是重新设计启动图标。IOS
将启动图标放在一个圆角正方形中，但是Android启动图标则不受这种限制。Android鼓励设计人员为启动图标赋予独特的
外形，请看Yelp和Twitter的启动图标。
根据这样的原则，重新设计后的AutoTrader的启动图标可以是下面这样的形式
Action Bar与信息架构
一般而言，Action Bar和其中的操作图标是应用的神经中枢，在整个设计中的地位是不言而喻的，但是，AutoTrader
的做法却不能令人满意。
[Before]
请看默认主屏幕Car Search，在action bar 的位置上，最显眼的是一个Settings功能按钮，它位于右上角，非常的显
眼，在移动UI中，右上角的位置是的第二重要而显眼的位置（最显眼的位置是左上角的位置，被一个巨大的应用图标占据）。
但是，非常令人失望的是，点击Setting这个看似非常重要的按钮之后，提供的却是一些法律和隐私条款，这显然是一个
反模式。这个重要的位置上的Setting按钮，实际上并没有提供重要的内容，也就是所，在信息架构上来说，这样的安排是不
合理的。
与过度突出的Setting按钮形成鲜明对比的是，像Find Car、Find Dealer、Scan & Find、My AutoTrader 这些重要
的功能，却隐藏在老式的Android_2.3导航栏溢出菜单中，这无疑是一个反模式
[After]
首先，需要调整按钮的样式，将圆角和斜边删除。在action bar中，用文本表示的功能也必须删除。在Android_4.0中，Action
bar中的功能按钮用图标表示。根据这种方案，第一个修改建议如下：
在这个版本中，Setting按钮用一个锤子和扳手组成的图标代替，底部的导航溢出菜单中的重要的功能操作，放到了action bar
中的右上角的溢出菜单中了。同时庞大的应用图标换成了与气动图标一致的图标，并加上了屏幕标题。请注意，根据Android设计指
南，屏幕标题的长度不能够超过屏幕宽度的50%，这一点必须牢记。
但是，仅仅做这些修改还是不能够解决信息架构上的问题，显眼的锤子和扳手的Setting按钮并不能够提供真正重要的信息，同
时溢出菜单中重要的功能还是处于隐藏状态。还有一点需要注意：当用户点击锤子扳手按钮之后，发现并不能够提供有用的信息，那
么用户很可能就会因此放弃对右上角的溢出菜单的查看，因为用户会认为，溢出菜单中的功能更加不重要。
一种改进的方案可能是：将Find Car 和 My AutoTrader移动到Action bar 上面，将Setting移动到右上角的溢出菜单中
但是，问题是这两个图标按钮非常有可能被用户误读，因为没有了文本提示，同时非常明显的是这两个功能真的非常重要，最好的
方法应该是将它们放到顶级导航菜单中，所以，最终我们的改进方法是引入“侧滑菜单”最为顶级菜单，将Find Car、Find Dealer、My
AutoTrader放到这个侧滑菜单中
如果应用中包含有大量的彼此没有直接关系的视图，Android UI规范提倡将抽屉式菜单用于顶级导航。Scan & Find 是一项汽车搜
索功能，有理由认为这项功能是一项重要的功能，因此将它放到了action bar上面，用一个条形码图标表示，用户仅需要单击一次，就能
够使用这个功能。而毫无用处的Setting功能，放到了右上角的溢出菜单中了。
为了能够让用户知道，通过滑动屏幕能够开启侧滑菜单这个顶级导航，Android指南提倡设计师在屏幕的左边沿放置一条不同颜色的
细线，也可以在action bar中的标题的位置放置一个 “<”
选择控件
[Before]
AutoTrader使用的是IOS风格的组合滚轮选择器，以供用户选择年份和价格范围，使用触控选择的方式输入，而不是使用键盘输入，
是一种非常好的方式，避免了输入错误的情况的出现，但是在Android中并不提倡使用“方框”，提倡的是一种无限制的内容显示方式
在Android中的触控选择控件有很多，以后我们会介绍，这里我们使用的是两个单独的选择器，并配上一个下面带有一条横线的标题，
按钮
我们将IOS风格的按钮，改成了Android风格的按钮，为了突出Search这个主要操作，让它占据了更大的空间，并且在其中放置了一个图标
搜索结果屏幕
[Before]
在重新设计之前，action bar 上还是使用的IOS风格的三个按钮：Sort、Map、分享
[After]
重新设计后，所有的按钮都变成了扁平化的图标，符合Android风格
需要注意的是，由于分享方式有多种，我们使用了带有下来功能的菜单按钮，当点击之后，所有的分享选项会在一个上下文列表中出现
有的时候，如果分享项目非常的多，还可以使用新浪微博处理方式
当点击右上角的溢出菜单之后，就会在屏幕的下部出现一个灯箱区域，显示所有的分享方式，这个处理方式非常的好
搜索结果详情页
[Before] → [After]
在这个页面中，非常明显的干扰是：在action bar 位置上有一个分享按钮，在内容中又有一个分享按钮，这显然是一个反模式，容易让
用户感到困惑。还有一个非常值得重视的反模式是：用户如果想要查看下一个结果详情，必须点击返回按钮，到达搜索结果页面，才能够重
新选择下一个内容卡，这是一种上蹿下跳的模式，应该避免，可以加入清扫手势，使得用户通过清扫屏幕就能够切换到下一个选项卡，为了
提示用户可以使用手势清扫切换，在屏幕的底部，我们加一行提示文字。最后记得将action bar上面的三个按钮组成的选项卡，转换成And
roid模式
最终结果
让我们来看看重新设计前后的最终结果
浙公网安备 33010602011771号