手机上的信息架构方式

月上西楼|2010-08-09|交互设计

信息架构 即信息的组织结构。它的任务就是在信息与用户之间建立一个通道,使用户能够获取到其想要的信息。一个有效的信息架构方式,会根据用户在完成任务时的实际需求来指引用户一步一步的获得他们需要的信息。

比如我们去饭店点菜、去商场买衣服,要完成这类日常生活中最常见的任务,用户最希望的就是过程简短、不用过多的去思考。所以根据用户的实际需求,这类任务就要采取比较顺畅的架构方式。相反,如果在PC上玩一个大型的网络游戏,为了满足用户在游戏过程中的一些情感体验,就要把游戏设计得有些难度。所以这时就要采取带有障碍的架构方式。如果网络游戏也采用顺畅的架构方式的话,那么游戏就变得毫无挑战,也就失去了它的乐趣。

通过分析我们可以看出来,采用哪种架构方式是根据用户完成某个任务或行为时的实际需求来决定的。

根据上面所讲的信息与用户之间的关系,我们可以把信息架构分为四种类型:浅而广、浅而窄、深而广、深而窄。

浅而广和浅而窄的类型,都属于较为顺畅的架构方式,在这种方式下用户不需要去过多思考,可以较直接的获取到信息。深而广和深而窄的类型,属于带有障碍的架构方式,它的特点是用户获取信息有一定的难度,要经过一定的步骤和流程才能获取到信息。

手机上应采用哪种信息架构方式呢?

手机这种小屏幕设备的特点是:

首先人们大都在空闲的时间使用它,每多跳转一个界面就可能失去一部分用户;

其次它的屏幕较小,限制了功能展现的复杂性;

再次不得不考虑它的电池供电时间的限制等等。

根据它的这些特点我们不难发现,在手机上做应用一定要是功能简单、操作简便、轻量级的、占用的时间要短等等。操作复杂、流程繁琐、挑战性高的深层次架构方式的设计并不适合在手机上进行。所以结合手机的特点,考虑到用户的实际操作,手机上的设计就要采用尽量浅的、顺畅的信息架构方式。

那么怎样在小屏幕设备上实现浅的信息架构方式?在设计中又要注意哪些问题呢?下面根据我在设计中遇到的问题,谈谈怎样减少信息架构的深度。希望可以抛砖引玉,大家一同来探讨。

一.  减少目录级数

重新考虑软件功能的布局,梳理各功能间的关系,通过适当的增加同一层的目录数,减少目录的级数来减少用户点击的次数。这是减少信息深度的最直接方式,但此种方式应避免的问题的是,不要为了减少用户操作而一味的将所有信息平铺(图1)。与其在一堆毫无规律的功能中寻找一个功能,还不如从分类清晰的目录中寻找来得容易(图2)

二. 功能的排布要有逻辑,分类要清晰,命名要准确、易懂

软件各功能间的关系要有逻辑性,同类型的功能要归好类,并且分类及功能的命名要准确,易懂,不要使用过于专业的术语。避免把A类功能放在B类中。

 

三. 减少操作次数、减少界面跳转层级

因为每多跳转一个界面就可能流失部分用户。所以在设计中应该尽量减少用户操作的次数。我们可以采用tab或手风琴等架构方式来减少界面跳转的层级。

tab的架构方式

可以将并列的信息通过横向或竖向tab来表现。与传统的一级一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。如下图3传统的架构方式,从A1到B1界面,要经过A—O—B—B1 一共要跳转四次,经过五个界面。采用tab架构方式的图4,从A1到B1界面,只经过A—B—B1 一共跳转三次,经过四个界面,比图3少点击一次。

手风琴式的架构方式

 

如图5的手风琴式的架构方式,它其实与功能平铺类似,都是在一个界面上把功能展现。但不同的是,它有很清晰的分类,各个不同的功能放在不同的分类中,每个分类可以自由伸缩,大大节省了空间。这样用户在一个界面上就可以了解整个功能的布局和每个分类中的详细子功能项。对比前面的架构方式,此种方式从A1到B1只需经过A&B—B1 跳转两次,经过三个界面。

此种方式需要注意的问题是:

首先每个分类项目条的展开和收起状态在视觉上要有明显的区分,这样可以方便用户检索;

其次为避免页面过长,增加用户的浏览负担,请不要把所有的分类都设为默认展开状态。可以把用户最常用的分类设为默认展开的状态。

四. 操作要顺畅,界面跳转符合用户心理预期。

随时随地 返回

因为手机屏幕较小,显示空间有限,相比同一款软件在PC上信息层次而言,小屏幕设备的信息层次就会变得更加深。所以用户在多个界面之间跳转的时候,就要保证其操作通道的通畅性,要能快速的找到出口,随时可以返回上层操作。这样会增加用户的安全感。举个反面例子:如下图windows mobile 6.5 的回复短信界面,没有把出口标识清楚,用户需要切换tab项才能找到出口。这样的设计会给用户带来极大的迷惑。

从哪来回哪去

小屏幕设备的信息架构较深,界面较多。为了避免用户在多个界面之间跳转时迷路,当用户进行返回操作时,所返回的界面一定是他刚刚操作的上一层界面。比如用户从O界面进入到A界面,又从A界面进入到A1界面,此时从A1界面返回时一定是返回到A界面,而不是O界面。

想一想我们回家时,从大门口进入客厅,经过客厅进入卧室,此时若从卧室出来却发现自己站在大门口,那将会是怎样的情形……

无论哪种方式都要使用得恰当,一个好的设计师应该要从各个角度去综合考虑问题,灵活运用各种方式方法,把握好用户和信息间的平衡。

分享到QQ空间

查看[15,648]|评论[29]
  1. lerroyli 说道:

    先沙发,再细读。

  2. Abelli 说道:

    :qiang: 好帖,学习了

  3. sparkling 说道:

    :gz:
    拜读~

  4. jasperzhao 说道:

    占位,围观

  5. 草根网 说道:

    好文,收藏至20ju.com

  6. chefsu 说道:

    拜读

  7. justing 说道:

    您阐述的第一点应该改为“减少目录数”而不是“减少目录级数”。

  8. 图图网 说道:

    手机UI,很少见的好文章

  9. 兰戈 说道:

    :wx: 真厉害,学习了。

  10. Aboymaxwell 说道:

    我想知道你的原型图是用什么画的?Visio还是你们的UIDesigner?
    看上去很清爽

  11. nancy 刘 说道:

    现在做移动设备交互的大多数都针对手机,本人做车载GPS交互的,苦于找不到讨论对象,哎!

  12. 丁丁 说道:

    移动设备的交互大多都相通,本文作者以前就是做GPS的。

  13. reakyzhou 说道:

    文章好长的说,评了再看。

  14. jackie 说道:

    文中例举的wm6.5的例子,看上去是HTC sense的某个版本,其实用户不需要切换tab找到出口,HTC的硬件中会有back物理按键,随时可以返回上一级。不过其在通话记录tab下增加返回,有点摸不着头脑。(wm在softkey上的习惯就是左边是常用功能,右边是菜单,htc的sense UI 增加了自己的tab,但仍旧遵循着wm的一些设计原则) :wx:

  15. 接近佛的男人 说道:

    嘿嘿,不小心看到出博客了拜读一下,加油 :se:

  16. pengkai 说道:

    今天仔细浏览了一下,经验值得学习。尤其对这种贴近大众生活的产品做到贴心、顺心是大家努力的方向。共勉。

  17. Kimcool 说道:

    手机的信息架构我个人感觉要从多面角度来分析,比如横屏,竖屏,再比如应用的类型,分层,但是我最喜欢的还是从底部开始架构。

  18. LRLan 说道:

    好文章!!!学习了!! :qiang:

  19. Ayu 说道:

    如果手风琴形式是把用户最常用的分类设为默认展开的状态。那么跟TAB形式有什么太大的区别呢?
    TAB形式只是将导航横向布局,而手风琴形式将导航竖列布局。并且,TAB也是默认将其中一页的内容展开。这跟手风琴形式将用户常用分类默认展开是同样的一种做法。
    另外,TAB形式的频道和内容之间的级别划分相当明确。而手风琴的频道和内容之间的划分,更接近于目录和子目录。

    个人想法:
    1. 手风琴形式跟传统web页面的模式接近,采用此形式,对于一个同时是pc用户的手机用户来说,更易接受。故此形式适用于wap。

    2. TAB形式适用于客户端,用方向键切换频道,更显操作灵活。客户端相比wap而言,更讲究操作的灵活性。

    以上是个人看法。欢迎拍砖。

  20. anyone 说道:

    拜读! :shl:

  21. tina 说道:

    为什么这个网站不能订阅到Google reader呢?难道是今天出问题了? :yw:

  22. ico 说道:

    非常有收获
    手机相关的文章目前很少,感谢腾讯无线ued提供了不少好资料啊。

  23. 面对面 说道:

    支持!好文章学习了

  24. 妍妍叫 说道:

    这个章节收获太多了,非常受用:wx:

  25. fooldy 说道:

    :wx: 讲的非常清晰

  26. 天下大乱 说道:

    文章图文并茂,不错。不过内容一般般。加油,月上西楼,你是个很细心的女孩,至少!!不过以后内容还是强化以下啊。

  27. Hi HI First time skipped here on your website, founde on Bing.

  28. 麻利蛙 说道:

    :wx: 写得不错,转载至:http://blog.sina.com.cn/maliwaucd

  29. 说道:

    写得非常好,受益了

发表你的评论

 微笑 色 发呆 得意 流泪 害羞 大哭 调皮 呲牙 惊讶 白眼 流汗 疑问 擦汗 抠鼻 鼓掌 可怜 强 胜利