童庆等手机交互中手机应用软件的交互架构研究67
手机交互中手机应用软件的交互架构研究
童庆，蒋晓
（江南大学，无锡214122）
摘要：以交互设计中的交互架构为切入点，分析了手机应用软件的交互架构方式中，存在的层级深度与层级交叉导致用户产生挫折感的问题，并对比研究了广而深与广而浅架构方式的不同，在此基础上，提出了必须灵活使用广而浅的架构方式，通过用户参与信息层级的梳理与分类，平衡架构层级的宽度与深度，以及增加Tap与手风琴架构方式来构建手机应用软件的交互架构。
关键词：交互架构；架构层次；用户参与；用户测试中图分类号：TB472
文献标识码：A
文章编号：1001-3563（2011）06-0067-04
ResearchofInteractionArchitectureofMobileApplicationSoftware
TONGQing，JIANGXiao
（JiangnanUniversity，Wuxi214122，China）
Abstract：Embarkingfrominteractivearchitectureininteractiondesign，itanalyzedtheproblemofuser′sfrustrationcausedbythedepthandcrossofframeworkhierarchy,anddiscussedthedifferencebetweenwideanddeepandwideandshallowstructuremode.Onthisbasis,itshouldbeflexibleintheuseofwideandshallowstructuremode,throughmethodsofcardingandclassifyingofinteractiveframeworkhierarchy，balancingofwidthanddepth，addingtapandusingaccordionarchitecturewaytoconstructainteractiveframeworkwhichissuitableformobileapplicationsoftware.Keywords：interactivearchitecture；frameworkhierarchy；userparticipation；usertest
手机应用软件是指智能手机中的第三方应用软件，如Google地图、掌上百度等。目前已经有苹果公司iTunesStore和android的GoogleMarket提供手机应用软件下载。在今天的移动互联网时代，智能手机迅速普及，尤其是iPhone手机的出现，手机的功能已经发生了转变，各种应用软件开始成为手机使用的重要工具。用户逐渐开始使用它们在互联网中进行浏览、下载、消费等。
Web设计不同，继续沿用Web架构方式变得越来越不适应手机交互设计的发展。这对手机交互设计提出了新的要求，如何创建简洁、顺畅、适用于手机应用软件交互的交互架构是设计师需要迫切考虑和解决地问题。
1.1广而深的架构方式
交互架构即信息的交互层级结构，它的任务就是在信息与用户之间建立一个通道，使用户能够获取到其想要的信息。一个有效地交互架构方式，会根据用户在完成任务时的实际需求来指引用户一步一步地获得他们需要的信息。目前大部分手机交互架构还是采用Web设计的光而深的架构方式，见图1。但是手机客户端中没有像面包屑那样显示路径的功能，必须一层层返回。即使增加像面包屑显示路径的功能，仍然面临着手机屏幕视域相当狭窄、信息维度很小、显示路径过长无法完全显示以及占用过多空间的问题。
1手机应用软件的交互架构方式
手机应用软件与用户交互的过程，其实是信息与用户的交互，手机和用户都在输出和输入信息，触摸屏和按键只是用户输入信息的方式。手机的交互架构是用户与手机应用软件交互的根本，其任务是在二者之间交互搭建一座畅通的桥梁，但手机应用软件与
收稿日期：2010-11-29
作者简介：童庆（1987-），男，安徽宣城人，江南大学硕士生，主攻产品交互设计。
68
包装工程PACKAGINGENGINEERINGVol.32No.62011.032灵活使用广而浅的架构方式方法
广而浅的架构方式对用户来说是使用时比较轻松的方式，用户点击的次数明显少于广而深的架构方式，但是设计师不能在弃用广而深的架构方式之后又盲目的套用广而浅的架构方式。设计师应考虑宽度与深度的平衡，如果层次太深，用户就会需要多次点
图1广而深的架构方式Fig.1Wideanddeepstructuremode
击才能找到他们的页面；但是如果是宽度过大，用户就面临在主页面的过多选项中寻找的困难[2]。设计师需要灵活使用广而浅的架构方式。2.1交互架构中的信息层级梳理与分类
交互架构中的层级是否清晰始终影响着用户使用手机时的体验。以iPhone上的腾讯新闻与新浪新闻为例，iPhone上的腾讯新闻分类有2种方式，一种是按照新闻的性质分类，如头条、经济、科技等分类，这是传统报纸上新闻分类方式。另一种则是按照新闻内容的形式进行分类如图片新闻、评论观点等，用户可以轻松地选择自己感兴趣的新闻进行浏览。相比较而言，新浪新闻则是分为热门和频道，用户如果想看某一类新闻可能会在热门的目录下，也可能在频道的目录下，用户在不知情的情况下必须做出选择，见图3。
通常，在移动的情形下，用户进行访问是为了达到某一目的，而不是为了阅读乐趣。人们很容易想象出手机用户的一些典型目的，如“找一家最近的超市”、“查询前往目的地的路线”等，但是广而深的交互架构的复杂性以及层级之间的交叉，会导致手机用户在使用过程中迷失方向。因为在窗口之间切换涉及到注意力的整体转移，这强迫用户不断地进入新的情景，用户需要不断地在窗口之间移动，混乱感和挫折感会加深[1]。面对这些问题，必须重新考虑手机终端的特殊性，而不是继续套用Web设计的方法。操作复杂、流程繁琐、挑战性高的深层次架构方式的设计并不适合在手机上进行。1.2广而浅的架构方式
在考虑手机应用软件的架构之前，应首先分析手机及其使用的特点。首先，用户往往是在移动的状态使用手机应用软件，并不会给予充分的注意力。每多跳转一次页面就可能失去一部分用户。其次是手机屏幕的问题，虽然手机的屏幕尺寸在逐渐增加，但是对于应用软件的仍然存在，应用软件必须考虑提供信息量的大小、功能的取舍。再次，手机操作目前无法达到鼠标的灵活性，用户很难进行非常复杂的操作。结合手机使用的这些特点，手机应用软件的架构应考虑广而浅的架构方式，见图2。
图3腾讯新闻、新浪新闻Fig.3Tencentnews,Sinanews
在交互架构的过程中，设计师可以让用户参加进来，使用卡片分类法进行研究。卡片分类方法能帮助设计师理解用户是如何看待产品信息和交互架构的
[3]
。例如：某手机购物软件的交互架构，先将软件的所
有功能（商品、支付、预定等功能）制作成卡片，再邀请用户按照其习惯的功能分类方式完成基础分类，分类
图2广而浅的架构方式Fig.2Wideandshallowstructuremode
后出现主要的首层功能。在这一分类基础上，再请用户按照其分组依据以及思维的逻辑，继续进行各个首
童庆等手机交互中手机应用软件的交互架构研究69
1∶1），在测试之前介绍该软件的主要功能和测试的注意事项。第二步，在所有相关设备调试完成后，让用户开始使用定制信息功能，这时记录人员应开始记录测试数据以及操作视频。第三步，用户测试完后，请用户说出在操作过程中的问题以及使用时的感受。第四步，得出统计分析表，设计师根据分析结果调整交互架构层级。如表1的统计可以发现，步骤3，4，6的层级需要设计师进行调整。删除步骤5，在步骤4提交定制信息后自动跳转到步骤6的页面，用户直接看到反馈信息。
由于用户并不会长时间使用手机软件，这就意味着交互架构层级不能过深，否则用户很快会直接退出软件，不再使用，因此手机应用软件层级的深度要降低到用户能接受的范围内。由于用户对软件需求的不同，用户对各种软件的接受范围也不同。设计师可以尝试设计典型的使用情景，通过具体的情景设计可以发现用户使用时的特点[5]。
手机应用软件的功能应尽量成为用户主要、经常
层功能下的子功能的数量进行再筛选和组合，最后设计师根据分类结果进行分析并调整。研究用户对信息层级分类其实是在研究用户的心理模型，从而将其应用在交互架构中，使得交互架构的实现模型与用户心理模型保持一致性，这样设计出的信息层级才是用户所真正熟悉的。
通过对卡片分类法的研究，设计师首先要梳理各功能间的关系，通过适当的增加同一层的目录数，减少目录的级数来减少用户点击的次数。这是减少信息深度的最直接方式，但此种方式应避免的问题是，不能为了减少用户操作而一味的将所有信息平铺。2.2平衡层级的宽度和深度
手机由于其屏幕尺寸的，必须对架构层级的宽度和深度进行评估和测试。通过对用户完成任务的各种指标（如完成率、操作时间、操作路径长度、错误率、出错类别等）进行测试，根据测试结果再调整交互架构[4]。提供某类定制信息软件的定制功能层级深度测试，见表1。第一步，邀请8位目标用户（男女比例
表1软件定制功能用户测试统计表
Tab.1Thevalueofcustomfunctionofsoftwareinusertesting
操作步骤步骤1:启动软件步骤2：进入定制标签页面步骤3：打开添加新定制页面步骤4：输入定制信息并提交步骤5：打开查询已定制步骤6：查看定制反馈信息步骤7：查看详细信息
用户1√√√√√⊙√
用户2√√⊙√√⊙√
用户3√√⊙√√√√
用户4√√√×√√√
用户5√√⊙√√√√
用户6√⊙√√√×√
用户7√√√⊙√√√
用户8√√√⊙√√√
注：“√”表示用户完成；“⊙”表示用户在提示下完成；“×”表示出错，用户重新启动软件才完成
使用的功能。设计师在进行交互架构的第一层级选项的设计时，应先对这一层级的所有选项进行价值重要性评估，将用户使用频率较高的选项放在第一层级，不常用的层级可以放置在设置当中。
设计师在设计应用软件时，应将重要信息尽量呈现在第一层级或第二层级，主要信息显示保持在3个层级之内，然后让用户选择继续或者返回。用户感兴趣可以继续深入浏览，反之可以迅速退出。这样用户就不必阅读很多信息才能找到自己想要的信息或知道自己下一步应该怎么做[6]。根据用户对功能的需求不同和信息量的大小来确定交互架构层级的深度。
层级的深度和宽度也需要考虑软件的目标人群
特点，不同人群对深度和宽度的要求都不同。如老年群体对所使用产品的选择逐渐以习惯性为主导，更为重视产品内在的实用性、易用性，因此在为老年群体进行软件交互架构时，应以简洁易懂、方便使用为设计目标，优先显示老年群体使用的常用功能，层级深度以浅为主。对于年轻群体，设计师首先需要对目标用户进行细分和心理分析，同时结合对软件的定位来调整层级的宽度和深度的平衡。2.3Tab的架构方式与手风琴的组织方式
当手机屏幕需要显示大量信息却无法一次显示的时候，可以使用Tab架构方式和手风琴的架构方式。增加Tap将主要选项置于页面顶端或底端，用户
70
可以不需要转换页面就可以使用大部分功能。而手风琴架构则是将主要选项纵向排布在页面上，每个分类可以自由伸缩，可以节省大量空间，这2种方式适合在同一层级有逻辑分类的情况下使用。
与传统的架构方式对比，这2种架构方式可以减少用户的点击次数，提高效率。Gmail软件页面见图4，用
包装工程PACKAGINGENGINEERINGVol.32No.62011.03为了加强用户对操作定位的能力，可以提供更好地参考点即导航标志，并始终固定在界面上[8]。iPhone的标题栏是导航设计的一个优秀案例，在标题栏的中间部分始终显示当前页面的名称，提示用户所在的位置。在标题栏的左侧始终是上一层级或者返回选项，让用户可以迅速返回，见图5。
图5iPhone标题栏中的导航Fig.5NavigationiniPhonetitlebar
图4Gmail，百度贴吧Fig.4Gmail，Baidustick
3结语
手机应用软件的交互架构必须以手机本身和用户使用应用软件的特点为基础进行设计，采用广而浅的架构方式，在进行交互架构时应让用户参与进来。在架构初期，有针对性的选择一定数量的用户，通过卡片分类法进行分析研究。在软件原型初步完成时进行用户测试，通过对用户完成任务的各种指标进行测试，根据测试结果再调整交互架构，最终确定最合适的交互架构以及架构层级宽度与深度，从而减少用户使用手机应用软件时产生的挫折感，让用户可以顺畅、高效率地使用手机软件。参考文献：
[1][2][3]
COOPERAlan.AboutFace3交互设计精髓[M].刘松涛，译.北京：电子工业出版社，2008.
MORVILLEPeter，ROSENFELDLouis.Web信息架构[M].陈建勋，译.北京：电子工业出版社，2008.
CHAUNCEYWilson.重塑用户体验[M].刘吉昆，，译.北京：清华大学出版社，2010.
[4]杨会利，李诞新，葛列众.用户体验在通信产品开发中的应
用[M].北京：人民邮电出版社，2010.
[5]周陟.UI进化论[M].北京：清华大学出版社，2010.[6]李四达.交互设计概论[M].北京：清华大学出版社，2009.[7][8]
常海，蒋晓.交互设计中的用户控制感研究[J].包装工程，2010，31（4）:29-31.
MATTJones，MARSSDENGary.移动设备交互设计[M].奚丹，译.北京：电子工业出版社，2009.
户若在浏览Buzz的内容时要查看收件箱的邮件，需要进行点击Gmail>收件箱>邮件，而传统的架构方式则是Buzz>Gmail首页>Gamil>邮件，使用增加Tap方式的页面跳转次数要少一次。而在采用手风琴方式的百度贴吧中，从一个目录下的某一信息到另一目录下的页面比传统的架构方式少两次页面跳转。
在使用这2种方式时，需要注意以下问题。首先一般默认将重要的目录展开，减少用户的选择负担。其次每个目录使用和不使用的状态要有明显的视觉区分，始终给用户清楚的使用状态反馈。最后增加Tap与手风琴方式也有不同之处。如果信息的主要层级数量较少，适合采用增加Tap方式，置于屏幕顶端。而手风琴方式则适合主要层级数多于4个的交互架构，在屏幕上平铺展现出来。2.4在交互架构中采用合理的导航
相比同一款软件在PC上的架构层级而言，交互架构中层级的递进都需要考虑导航的问题。在用户使用导航的过程中，要保证让用户能够知觉到产品的变化与自己的意志吻合，能够控制产品的变化过程，获得期望的结果[7]。首先，要使用户轻松地从应用软件的一个功能切换到另一功能，就要保证其操作通道的通畅性，用户可以快速地找到出口，随时可以返回上层操作。其次，在需要时给予用户导航，让用户知道接下来的页面是什么。让用户知道自己当前的位置，使其做出下一步行动的决定。
