平板电脑布局策略
使用碎片和多窗格视图
Honeycomb设计的构建模块是“碎片”。 碎片是自成体系的布局组成部分,它可以根据屏幕的方向和尺寸改变自身的尺寸和布局位置。为多种尺寸外观而设计这个问题的进一步解决方法是:给设计师和开发 人员一种途径使他们的屏幕布局组成部分具有弹性和堆叠性,并取决于运行应用程序的设备屏幕限制。屏幕组成部分可以被拉伸、堆叠、扩展或者收缩、展示或者隐 藏。
碎片架构给了设计者和开发者几种选择,在跨越多种屏幕尺寸和方向的情形下维护他们的布局。
是什么让碎片变得如此特别?通过兼容性库,开发者可以将这种功能带入到1.6版以上的Android智能手机中,使他们能够使用一种尺寸适配多种设备的策略来创建应用程序。简言之,它能够使设计师和开发人员只开发一个应用程序而适配所有规格的设备。
虽然碎片可能是一个更多的被开发人员使用的术语,但设计师仍然应该对压缩的内容如何任意拉伸、堆叠、扩展和隐藏有一个基本的了解。
最常见的碎片排布方式是分割视图。这种布局在新闻应用程序和电子邮件客户端中较为常见,通常列表在较窄的一栏中呈现,详情视图在较宽的一栏中呈现。
USA Today 使用的分割视图
呈现分割视图的另一种方式是在它的一侧转换方向。这种情况下,侧边的列表碎片变成了轮播,支持水平方向上的导航而不再是垂直方向上的。
方向策略
碎片是将一种设计应用到多个屏幕尺寸上的好办法,同时对设定方向策略亦是非常有用的。你的屏幕设计在横向视图时也许看起来很不错,但面对狭窄的纵向 视图包含三栏的情况的时候你要做些什么呢?你可以再次选择拉伸、堆叠或者隐藏内容。可以把碎片想象成一堆可伸展的拼图,你可以根据需要四处移动、塑造或者 删除它。
关于动画
Honeycomb架构允许设计师和开发人员运用丰富多彩的动画效果。根据Android 3.0 要点 页,“动画可以创建淡出效果、不同状态间的运动、循环播放一张动态图片、或者退出动画、改变颜色以及更多。”Honeycomb还拥有展现2D或3D图像的高性能机制。为了更好地了解Honeycomb性能的大体情况,看一下这段视频。
从例子中学习
Android平板电脑仍是一个相对较新的领域,有些品牌只是刚刚开始试水。下面是一系列为激发灵感而收集的应用程序。你可以从 Android Market 或者Amazon中下载其中的任何一款。
YouTube
当然,Google在Honeycomb平台上的youtube应用程序堪称典范,展示了上文所有讨论到的设计样式及用户界面元素。为了更好的体验Honeycomb,请先下载这款应用程序并运行它。
CNN
CNN(美国有线电视新闻网)应用程序很好地运用了触控手势(包括滑动来浏览更多内容)、分割视图和字体!一种自定义的字体(Rockwell)应用于新闻标题。
CNBC
CNBC(美国全国广播公司财经频道)是另一个优秀的新闻应用程序,包括动画(股票行情自动轮播)以及丰富的图表和渐变。CNBC是最引人入胜的应用程序之一。
Plume
通过它的三栏布局,Plume很好的示范了横向视图变为纵向视图的时候布局需要如何显著地改变。
FlightTrack
一款设计优雅的信息量巨大的应用程序。包括精致的地图,微妙的动画以及标准的Honeycomb 用户界面元素。
Pulse
你还可以说: Pulse是为Android平板电脑而生!但是对比Android和ipad版本,它们几乎在各个方面都是相同的;无论如何,它仍然很有趣。
WeatherBug
它曾是是Android Market中最早的Honeycomb应用程序之一。它很好地利用了地图和全息用户界面来展示来自于天气凸轮的图片。
Kindle
Kindle很好地坚持使用了设计模式和Honeycomb用户界面元素。结果是优雅的,也是坚守Android的最佳实践。
佳作
IMDb
News360
USA Today
AccuWeather
Ustream
Google Earth
Think Space
在线资源
视频
n Android手机与平板电脑的用户界面设计及实现,Google I/O 2011
n Android 3.0 Honeycomb 动画演示
演示文档
Android手机与平板电脑的用户界面设计及实现,Google I/O 2011(PDF)
博客
平板电脑用户界面模式
Android 开发者
支持多屏幕
图标设计
Android 3.0 平台要点
完
[译者注:本人英语水平实在有限,而文章专业词汇又过多,翻译失实之处请指正。谢谢!]
系列文章:
Android平板电脑设计:做得像iPad就行吗?
Android平板电脑设计:屏幕流创建与设计布
文章来源:一叶苦雨
新闻热点
疑难解答