安卓开发 中文教程 (12) --程序的结构

接下来,你要叫苦连天了,各种眼花眼疼流眼泪。因为我们已经进入到本课程的核心部分!
 
今天开讲——程序的结构!783F淮安掼蛋网下载
随书附送一个智力测试,本文看十遍后能理解的,智商110,看九遍能理解的,智商120......
看一遍能理解的,智商200或以上。





 









不同种类的应用程序满足不同的用户需求。

  • 像计算器或者相机这样的程序只需要一个页面就足够了。
  • 像电话这样的程序,它会切换到不同的页面,例如从拨号转到通话。不过它的层次就只有两层,没有更深的层次了。
  • 如果像Gmail这样的邮件程序,或者谷歌市场这样的包含有复杂数据的程序,就需要更多的页面、层次来展示信息。

   需要为用户展示怎样的内容与操作,决定了你的应用程序结构和层次。

一般的结构模式 :  三层结构显示


一个典型的安卓应用程序通常由“总概览”——“具体内容”两个层次组成。如果复杂一点的程序,中间还会有一个分类列表。也就是“总概览"——”分类列表“——”具体内容“这样的三层结构,可以理解为顶层——中间层——底层。

总概览 / 顶层

总概览虽然是第一层结构,但它可以由不同的页面组成,例如淘宝这样的程序,它的顶层也是由不同的促销活动页面组成的。这些不同的促销活动组成了顶层。如图所示。可以用动作栏(Action Bar)来组织这些不同的页面。

 
分类视图 / 中间层

用户点击了顶层视图的某一个分类,就进入了具体的分类视图。这里负责显示某一个种类的所有列表,是一个中间层。

 
具体内容、编辑视图 / 底层 

具体内容、编辑视图是用于展示、编辑某一个具体内容的视图。例如某件商品的详细信息。它属于结构的底层。


怎样将积木堆成大厦?


*建造顶层视图   /  总概览视图


你必须重视你的第一个页面!用户启动程序后,就能看到这个页面,所以无论对于新用户或者经常访问的用户来说,它都应该是非常值得体验的!需要花费你的设计潜能!

要做到以上的要求,你需要问自己:“我的忠实用户最喜欢用我的程序来干什么?”
 

将内容放到前面

许多程序都十分注重内容的显示。你应该避免单一的、只包含导航条的设计。不要先上斋菜,而要让用户一开始就吃到肉!设计一个适合你的数据与屏幕大小的布局。

参考谷歌市场的开始页面!除了有导航条外,还设计了一个色彩丰富的、带图片的内容页面!为了方便用户,搜索按钮出现在顶部的动作栏(Action Bar)上。
创建你的视觉识别!

你的视觉识别就是你的面子。当你设计出独特的视觉识别,用户就会像见到帅哥、美眉一样,即使不能一见钟情,至少能够印象深刻。放弃那些千篇一律的设计,你需要花点心思去与众不同。你可以从交互性,布局,色彩,动作栏的方便性等各种方面去入手设计出独特的程序。

*图例:带3D加速的旋转式唱片封面设计,成为这个音乐程序的一种特殊的视觉识别。它被设置为默认显示用户最近聆听的音乐。
设置动作栏(Action Bar)用于导航与操作

在顶部为用户提供统一的导航按钮和一些常用重要功能按钮是一种很好的设计习惯。因为即使菜鸟也能懂得你的程序。这就需要用到一个重要的工具:动作栏,亦即是我们已经多次提到的Action Bar!

在顶层视图中,你可以灵活地运用动作栏(Action Bar)去使以下的工作变得轻松:

  • 在动作栏显示你的程序图标与标题
  • 如果你的顶层视图是由几个页面组成的,需要保证用户能够轻松地在它们之间切换。这就需要用到左右滑动的控制功能,或者在动作栏中增加页面选择器。
  • 如果你的程序允许用户创建内容,需要考虑如何轻松地让用户从顶层视图就进入到创建的页面。
  • 如果你的内容是可以搜索的,那么请在动作栏中加上搜索键以方便用户通过搜索进入下一层级的页面内容。
*图例 :Email程序是讲求效率的,所以一个高效的、易于 浏览的,密集地显示数据的列表视图会很受用户欢迎。在顶部的主动作栏中,有选择器可以选择帐户或者最近使用的邮件;而在底部的副动作栏中,有创建、搜索、编辑、刷新等常用的功能图标。

在顶层视图中切换页面


通过向用户展示主要的功能区域,顶层视图会充分显露你的程序的能力。在多数情况下,顶层视图会由多个页面所组成,而你需要让用户方便地在它们之间切换。安卓系统提供了多种切换方式。你需要选择一种合适你的用户的控制方式。接下来我们介绍几种切换方式:

固定标签(Fixed Tab)

图例5是一个固定标签组件。固定标签是用来组织各种不同视图的布局方式,有点类似于传统网页上的导航按钮。只要用户点击TAB1,就会显示第一个页面;当用户点击TAB2,就会显示第二个页面,如此类推。你也可以通过手指的左右滑动来转换各个页面,前提是在编程时需要实现这个功能。

在以下的情况下使用这种固定标签的布局:

  • 用户经常需要切换页面。
  • 你的顶层需要由三个或以上的页面来组成。
  • 用户喜欢同一种数据的多种排列方式,方便他们选取。
图例5:深色、浅色主题下的固定标签(Fixed Tab)组件 。
选择器(Spinner)

选择器也是用来选择页面的,如图例6,它是一种下拉式的选择菜单。

在以下的情况下使用选择器的布局:

  • 节省屏幕空间,相对于固定标签,它节省了排列标签的位置。
  • 对于整体的导航更加一目了然,你可以从第一页面跳到第三页面,不需要走一二三的步骤,更加精确与快捷。
图例6:位于动作栏的选择器(Spinner)
导航抽屉(Navigation drawers 

常识告诉我们,抽屉是在需要的时候拉出来的。所以导航抽屉就是当我们需要的时候,在屏幕的边缘拉出来,再选择。如图例7所示。这个抽屉能够放下比较多的内容,你可以放一些导航条进去,也可以放一些常用的功能图标,例如“退出”。与传统的在底部弹出的菜单不同,它可以通过手指在屏幕上滑动而抽出,也可以用“菜单”键调用出来。在平板电脑上,它可以与其它页面一并显示,使用户有运筹帷幄、掌握一切的感觉!

在以下的情况下使用导航抽屉(Navigation Drawer):

  • 节省屏幕空间,相对于固定标签,它节省了排列标签的位置。
  • 你有大量的顶层的页面需要显示。
  • 无论你处于程序顶层,中间层甚至底层也好,你都能够快速导航到你想要的页面,而不需要狂按“返回”键!
  • 你将程序的层级设计得像树一样复杂(想你一下你有无数的分支页面!),但你却想轻松跳转到另一个分支 页面。
图例7:一个购物程序的导航抽屉(Navigation drawer) 
不能花心!选了一个就是一个!

无论固定标签是如何貌美如花,选择器如何婀娜多姿,导航抽屉是如何倾国倾城,你都只能选择一个!否则,累死了程序猿不说,浪费了宝贵的屏幕空间,更惨的是,用户觉得你的程序太难用了!在现代社会娶一个老婆,并对她一心一意是最好的结果。


分类视图 (Categories)/ 中间层


在一个以数据显示为主的应用程序,他的目标就是让用户通过适当的分类视图,通过选择而进入到他想要的数据和信息。例如一个用户有大量的歌曲,那么他总是想通过歌手、专辑或者歌曲类别去浏览并选择一首歌进行聆听。所以,中间层存在的目的就是方便用户从类别中选择一个项目。

接下来将会介绍几种方法,让你的中间层变得更有意义!

用标签(Tabs)去组织你的分类与数据。

如果你的分类页面不多,而且非常相近,那么可以用标签了(可滑动的标签或者固定标签)!就像顶层一样,用标签将几个分类页面组织起来,因为有些分类页面会配图,有些分类页面只显示数据。总之,不要让它们变得散乱,要设计成让用户只要手指一挥就能切换!

 

如果分类是非常类似的,你可以使用可滑动标签,通过手指的左右滑动而浏览不同的页面。通常会设计出5-7个相似的页面。

这是谷歌市场的分类页面,包含有:“特色”,“付费排行榜”,“免费排行榜”,“上升最快”,“最新付费”,“最新免费”和“热门”七个页面!


这是一个视频程序(YouTube),用固定标签去将“主页”、“浏览”和“帐户”三个页面组织起来。因为这三个页面不太相似,所以设计师选择用固定标签。

想更多了解关于标签(Tab)的使用,我们后面会有专门一章来讲解,请留意后面的内容。

允许跨层级操作

“顶层”——“中间层”——“底层”是我们的层次设计。但用户很多时候想在中间层就完成底层的工作,例如在分类列表(中间层)将歌曲添加到播放列表。所以我们会在列表中增加快捷方式,以方便用户的选择与操作。你可以用折叠式列表或者弹出式菜单来实现这个功能。

图例10:这是一个音乐程序,他允许用户在中间层从弹出式菜单中播放歌曲,或者其它功能,而不需要进入到底层(详细内容)才进行操作。
允许批量选择与操作!

中间层除了能够让用户进入到底层(详细内容)去,它还有一个功能就是能够批量选择与操作。

在安卓4.0的版本以后,你可以通过长按某一项目,进入到选择模式,这个时候你能够进行多选。选择完成后,留意顶部的动作栏,他会出现相关的操作按钮给你选择!

这一功能会在后面的”选择“一章加以详细说明。



现在,我们已经通过顶层、中间层进入到底层(详细信息 / Details)了! 


详细信息就是显示某一个项目的所有相关作息的地方,例如通信录中的一枚朋友,会显示他的图片啊,电话啊,生日啊等乱七八糟的东西。就是查他的家底的。当然,你必须之前已经手动或者通过网络取得了这些数据。

如何布局(Layout)

到了考你的设计天赋与政治天赋的时候了。请遵从”两个凡是“:凡是能方便用户的设计都是好设计,凡是能使程序美观的设计都是好设计。

图例11,联系人程序,包含一个图片,还有一个列表,列表里面分开地显示电话,邮件等内容。
专注模式 / 全屏模式

当进入到底层的内容后,我们有时候会专心地阅读这些资料,而顶栏与导航栏会自动隐藏,进入全屏模式来让你专心享受阅读的乐趣。当你需要翻页时,可以左右滑动来浏览下一个信息,当你轻触屏幕时,顶栏与导航栏就会重新出现,等待你的命令。

图例12:谷歌读书(Google Books),自动进入专注模式,左右滑动时会有翻页的动画效果,并切换到下一页。
更加方便地浏览底层(详细信息)的数据

假设你已经进入了底层,浏览一个具体商品的数据,而你想快速地查看下一个商品,你只要向左或者向右轻轻一滑,就能滑动到下一个商品!在底栏会有项目的总数显示,并告诉你现在处于第几项。在副动作栏有相应的图标,帮助你快速完成删除、分享等操作。

图例13:Gmail在邮件浏览页面实现了滑动式浏览。
图例14:这是一个杂志的底层页面,除了实现了滑动式浏览,还提供了一个缩略图与进度条,让你更加清晰地知道自己的位置,也能够快速进入想要的位置。

在后面我们会有关于详细的关于滑动浏览的讲解,请留意。


恭喜!
当你理解之后,在层级设计上你已经是砖家叫兽!
但千万不要得意忘形,任何时候都要记住:


  •  想办法让你的主页显示出有用的内容与信息以吸引用户!

  • 用动作栏(Action Bar)去提供标准的导航。

  • 使程序的层次清晰,各个层级都有跨越式的快捷方式。

  • 让用户能够实现批量选择并进行操作。

  • 在底层页面,允许用户左右滑动来浏览上一个、下一个项目。



版权声明:英文原版版权由android.com所有,本中文翻译版版权由姚志浩所有,欢迎转载。  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值