财新传媒
位置:博客 > 李明 > android4.0 UI Design:Patterns (一)

android4.0 UI Design:Patterns (一)

 

android UI设计文档,翻译第三部分:

(由于从第三部分开始,内容变得很多,我打算分开来发,而不是把它们放到一篇博文里)

Part 3:Patterns 模式 第一部分

 

用一致的,可预见的方式来表现你的应用。

 

一. New in Android 4.0  安卓4.0的新特性

 

1. 导航栏

Android4.0不再需要手机上传统的物理按键,取而代之的是一个虚拟的导航栏。这个导航栏上有主界面键,返回键和最近使用键。通过兼容性模式,android4.0操作系统也可以适应那些有物理按键的手机以及android3.0或更低版本下有菜单menu功能的应用。

2. 动作栏

动作栏是android应用程序最重要的组成元素。它提供了风格一致的导航并让你的应用操作更加可视化。

3. 多窗口布局

在android的世界里,存在着多种多样的框架因素和大小不一的屏幕尺寸,创建一个适应这一切的应用将非常重要。多窗口布局允许你合并那些在小尺寸的设备上单独显示的视图,把它们混合到一起显示到平板电脑中。

4. 选择

长按动作通常被用于显示一些相关操作对象的数据。当你选择一项数据的时候,上下文动作栏允许你进行其他操作。

 

 

二. Gestures 手势

 

手势允许用户通过操纵屏幕上的对象来与应用程序交互。下面的表格列出了android支持的核心手势。

触摸

触摸是对于一个给定条目的默认功能。(操作:按下,松开)

长按

进入数据选择模式。允许你在一个视图中选择一个或者多个条目并通过一个上下文动作栏来操作选中的数据。不要使用长按来显示上下文菜单。(操作:按下一段时间后松开)

划动

通过划动来显示更多的能容或者同一层次下视图间导航。(操作:按下,划动,松开)

拖动

视图中重新排列数据,或者把数据移动到一个容器。(例如主屏幕的文件夹)(操作:长按,拖动,松开)

双击

显示选中部分的内容。也用作选择文本的备选手势(操作:连续两次点击屏幕)

放大(捏合)

放大内容,多用于图片(两指按下,向外划动,松开)

缩小(捏合)

缩小内容,多用于图片(两指按下,向里划动,松开)

 

 

三. Application Structure 应用程序架构

 

应用程序有着多种多样的类型,来满足用户不同的需求,例如:

计算器或者照相机类的应用,通常是单界面,围绕着一个单独的功能。

诸如电话类的应用,特点则是在不同的页面间切换,而且没有更深一层的导航。

Gmail或者Play Store之类的应用,则结合了大量的数据视图和深层次的导航。

所以你的应用程序结构,很大程度上取决于应用的功能和你想要表现给用户的内容

 

General Structure 总体结构

一个典型的android应用由主视图(顶层视图)和详细/编辑视图组成。如果导航层次复杂,那分类视图应该能链接到主视图和详细视图

1.Top level views 主视图(顶层视图)

应用的顶层视图通常包含着你的应用支持的不同类型的视图。这些视图要么显示相同类型数据的不同展示,要么是你的应用中某个功能块的体现。

2.Category views 类别视图

类别视图允许你进一步查看你的数据

3.Detail/edit view

在详细/编辑视图中,你可以使用或者创建数据。

 

 

Top Level 顶层视图

 

留心你的应用启动界面的布局。这是用户启动你的应用后看到的第一个视图,所以它应该兼顾到新手和老的用户,让他们都有一个好的体验。

问问自己:“我的目标用户会非常想用我的应用吗?”,然后再相应地创建你的启动页布局。

1. Put content forward 将内容提前

许多应用都关注于内容的显示。不要只有导航,而是让用户通过启动界面来了解你的应用的核心内容。用合适的数据类型,在尺寸适合的屏幕上,选择那些有视觉冲击力的布局。

Google应用商店的启动页允许用户导航到应用,音乐,书籍,电影和游戏。它同时也包含为用户量身定做的推荐内容和用户可能感兴趣的内容。搜索功能出现在启动页的动作栏上,让用户更易于查找自己想要的内容。

 

 

2. Set up action bars for navigation and actions 为你的导航和操作设置动作栏

你的应用的所有页面都应该显示动作栏,以提供统一的导航和显示重要的操作。

在主界面(顶层界面)上,要特别考虑动作栏的适用性:

使用动作栏来显示应用程序的图标和标题。

如果你的主界面包含多个视图,或者你需要在不同的用户账号间切换数据,那么在动作栏上添加控制功能,以保障用户可以很容易在视图/账号间切换。

如果你的应用允许用户创建一些内容,那么确保用户可以从主界面访问到这些内容。

如果你的内容是支持搜索,那么在动作栏上放个搜索按钮,来确保用户可以直接导航到内容而无需穿过层层索引。

电子邮件讲求效率,所以一个高效,高数据密度,易浏览的邮件列表是必须的。导航需要支持在账号和最近使用的标签间切换。为新消息和搜索在分裂动作栏上创建一个图标。

 

3. Create an identity for your app 为你的应用创建用户登录系统

为你的应用在动作栏上创建一个用户登录系统。这样你的应用可以给特定用户传递特定数据,并完成用户和数据间的交互。尤其对于多媒体类的应用,尝试抛弃单调的列表视图,创建独特的布局来展示你的数据。

一个音乐应用:3D旋转的封面设计,独特的用户登录系统,最近浏览页面默认展现用户最近听过的音乐。

 

Categories

 

一般来说,深层次,数据驱动的应用都是通过细致的组织分类来实现导航。最小化可感知的导航,以确保你的应用没有那么多层次。

尽管从主界面到详细界面的垂直导航的数量通常取决于你的应用程序的内容,但是还是有几种方法可以减少复杂导航的层次:

使用表格来合并类别选择和数据显示

如果分类都是众所周知的或者分类的数量很小,那么这种方法是可行的。它的优势在于,层次被移除了,数据依然是用户关注的重心。富数据类别之间的导航更像是一个随意的浏览体验,而不是一个显式的导航。

如果分类都是总所周知的,可预见的或者联系密切的,使用可滚动的标签(当所有标签不能同时显示出来时)。保持标签的数量在一个可控的范围:不要超过5到7个标签

google应用商店使用标签来来同时展示分类选项和分类内容,用户可以通过左右滑动来在不同的分类间切换。

如果分类之间联系不是很密切,那么最好固定标签的位置,以保证所有标签可以同时显示出来。

YuToBe使用固定的标签在不同的,关联性不强的功能区直接切换。

允许切断层次结构

利用快捷方式,让用户更快捷地找到他们的目标。允许顶层视图操作内部数据列表或者网格视图,用下拉列表或者划分列表项的方式把数据呈现在顶层视图。这使得用户可以直接调用数据,而不必沿着导航一层一层地找。(译者注:这部分的意思是,你可以在主视图上利用快捷方式,让用户可以直接深入到某个详细内容,而不必通过层层导航)

音乐应用允许用户在分类页面(唱片集)上直接打开一首音乐,而无需点击进入该音乐的详细页面

作用于多个数据项

尽管类别视图主要用于指导用户找到详细视图,但是请记住,你也可以在类别视图上对数据集(译者注:数据集,指的是同样类别的数据)进行操作。

举个例子,如果你允许用户在详细视图删除一条数据,那你也应该允许用户在类别视图同时删除多条数据。你应该分析哪些细节视图是一类的,然后用多选的方式让用户在类别视图上可以同时删除它们。

 

 

Details 详细视图

详细视图允许你查看和操作数据。详细视图的布局取决于显示的数据类型,所以不同的应用间布局也大不相同。

 

Layout 布局

用户主要活跃在详细视图上,所以布局上应该有相应的针对性。比如对于身临其境的内容,可以利用熄灯模式,让用户完全投入到屏幕中去。

google图书应用的详细页面,主要是为了让用户有一种在阅读真实书籍的体验,翻页的动作也强调了这种体验。为了能让用户沉浸在其中,特意在熄灯模式下隐藏了所有系统控件。

People应用的详细信息页面主要是通信选项,这个列表视图主要是为了实现高效地扫描,电话号码,点子邮件地址和其它信息项快捷地浏览。通过划分条目,把信息和电话合并到一个紧凑的列表中。

 

详细视图之间的导航

如果用户可能在多个详细视图之间查看,那应当允许他们在详细视图之间来回切换。你可以利用滑动屏幕的动作,或者其他技术来实现之。

Gmail通过左右滑动来在不同的邮件间切换

除了支持通过左右滑动手势来切换图片,Gallery还提供了幻灯片,能让用户快速地跳转到特定图片。

 

Checklist 清单

1. 在开始界面上显示有用的内容

2. 用动作栏来提供一致的导航

3. 通过横向导航和快捷键来精简你的导航层数

4. 使用多选,允许用户操作数据集

5. 允许用户通过快捷导航来实现在详细视图时间来回切换

 



推荐 15