当前位置: 代码迷 >> Iphone >> 《拨动人心—设计优秀的iPhone应用》读书笔记(三)
  详细解决方案

《拨动人心—设计优秀的iPhone应用》读书笔记(三)

热度:81   发布时间:2016-04-25 06:03:37.0
《触动人心—设计优秀的iPhone应用》读书笔记(三)
  《触动人心—设计优秀的iPhone应用》读书笔记(一):http://blog.csdn.net/circlepig/article/details/8567040
  《触动人心—设计优秀的iPhone应用》读书笔记(二):http://blog.csdn.net/circlepig/article/details/8629882


      第四章  有条不紊——学着苹果做应用

       本章将介绍iPhone的导航风格,同时,也一并了解能够组织好应用内容和工具的导航方式。对于一个应用来说,最基础的操作就是基于页面间简单的移动,每张页面都完成一个任务或展示特定内容,因此,如何串联起这些页面是设计师的基本决策之一。

       1. 乔帮主会怎么做
       
乔布斯用其可挑剔的品味、质量和易用性缔造了整个苹果品牌。所以,苹果自己的应用设计嚼头十足,值得我们深究和模仿。
       苹果公司在设计方面一直走着自己独特的见解,它们为iPhone应用设计定义了详细的规则,并制定成了文档。这就是《iPhone Human Interface Guidelines》,即我们常说的HIG。HIG详述了iPhone玩具箱里的标准控件和标准视图,并解释了如何按照用户的期望来使用。苹果设计师对iPhone界面设计理解深刻,因此,他们出品的指南必属精品。

       
       
      认真看指南便会发现,除了理论实践兼备的各种建议外,苹果的界面指南也是App Store的审核标准。为避免麻烦,还是多用标准控件,恪守指南的条例比较好。

       2. 苹果的导航模型
       iPhone的代码库只定义了三种可以直接使用的导航模型,它们是: 平铺页面、标签栏、树形结构。三种导航模型的基本样式如下图所示:

       

       平铺页面:适用于只有一个主屏的简单应用。这类应用的主屏可能有不同的变体,然后,你就像拨动卡片一样,滑动切换这些页面。
       标签栏:标签栏就是在屏幕底部的一组用来在应用主功能之间切换的按钮,每点一个按钮,就会切换到另外一个页面。
       树形结构:在有层级的分类选项或分类内容中向下细分,然后也能很容易地回到上方。
       
       接下来,会分别介绍这几种导航方式的使用方法和适用情形。

       3. 平铺页面: 就像一叠卡片
       由于平铺页面应用没有信息层级,没有组织结构,所以把这种组织方式称为平铺列表
       平铺页面的导航方式很适合于在实用工具应用中使用。实用工具应用的页面里只有少量简单清晰的内容,因此可以像卡片一样的展示:卡片的“正面”展示主要信息,而“背面”就是简单的设置。
        如果你的应用非常简单,只有一张卡片,那就再容易不过了,如下图所示,正面显示内容,点击“i”进入背面的设置页面:

               
       
       这种方式适合于让用户浏览并发现:慢慢浏览查看同样类型、不同内容的页面。而且还可以通过设置,随意改变、添加、移除卡片。对于页面结构类似但页面数量会变化的情况,平铺页面导航模型非常合适。为了让用户在浏览时,保持方向感,在底部添加了标准页面分页控件,也就是那排小点。高亮的小点代表了你当前所在的位置。

       比如内置的“天气”应用,就是用这种方式展示。在不同的页面展示不同城市的天气状况。点击右下角的“i”,则可以设置需要展示的城市。

                                 


       平铺页面模型对于拇指操作的不便也很明显,你没法直接从第一屏跳转到最后一屏,必须要挨个翻过每张页面。如果页面太多,则会非常不便。因此,最好不要超过10个。

       平面页面模型无法直接跳转到特定页面的弊端,使其并不适用于功能或内容结构相差悬殊的应用。举个例子,“Phases”是一个用来跟踪月相的小应用。应用一共有四张页面,它们分别从不同的角度来查阅月球运动。这个应用使用了平铺页面导航。但由于它的页面数量固定,并且每张页面内容迥异,所以用标签栏会方便一些。使用标签栏,就不用翻阅了所有页面,才能找到所需要的页面,而可以直接跳转到感兴趣的页面。

       在使用平铺页面时,滚屏是很不可取的。如下图所示,“ESPN ScoreCenter”的每个页面,所显示的内容都会被底部的小点所截断,不太清爽。在平铺页面模型中,只有当每个页面像一张完整的卡片时,“卡片堆”的隐喻才会很有效。但是,如果用了滚屏,对于用户则是一个挑战: 由于横竖两个方向均可滑动,有时上下滚动时,滑动方向不小心带点斜度,就把下一张页面给滑进来了。

        

        4. 标签栏: 菜单上有啥?
        标签栏是附着在屏幕底部的Dock。如下图所示,点击标签栏的一个标签就会跳转到相应的功能页面,然后标签也会变亮。
 
         

        每个标签对应的页面都可以有自己独特的界面风格,还有自己特定的内容和功能。比如内置的“时钟”应用,提供了四种与时间相关的功能,每种功能对应着不同的标签: 世界时钟、闹钟、秒表、计时器。每张标签都像在运行着一个独立的应用。

        

        标签栏不仅可以像“时钟”应用一样分类工具的功能,标签栏也可以为应用的信息提供不同的展现方式。比如用来搜索旅馆、餐厅的“tripAdvisor”,用标签栏的方式提供了三种查找餐厅及住宿的办法:搜索、附近的、我的收藏。每个标签的方式不一样,但是目的都是一样的,解决用户在旅行中的住宿和吃饭问题。

             
        
       标签栏显示在屏幕的底部,高度有49 个像素,每个按钮都包含一个文本标签和图标。按钮的宽度取决于你放置的按钮数量,但请别塞太多,因为标签栏限定了最多5个按钮。如果放6个以上的话,会在前4个位置显示你最先设置的4个标签,最后一个位置则会冒出一个“更多”标签。点击“更多”,则可以看到其他标签。所有标签的位置可以通过右上角的“编辑”按钮来完成。

       下图所显示的应用是“AccuWeather”。点击“更多”之后,就会看到另外4个标签,即4个功能(如左图)。而点击“编辑”的话,则会显示所有的标签(如右图),用户可以在这个页面编辑标签的位置,将自己最常用的4项功能放到前面。
 
                    

       通过上面的描述,可以发现,如果超过5个按钮,不但让用户很容易忽视掉被藏起来的功能,不符合标签栏清晰易扫描的初衷,同时,还霸占了宝贵标签位中的一个,是不太理想的。这时候,更适合用树形结构。
       同时,标签栏也是一种约束,它高49像素,吃掉的空间相当大,超过屏幕的10%。当然,在某些页面,你也可以在需要全屏时,适当的去掉页面上的标签栏。比如,电子书或者听音乐的界面。但是,稳定持久是标签栏的优点,所以尽量保留。

       5. 树形结构:千张页面触手可及
       庞大的信息往往会被分类到类别,以及子类别、子子类别中去,这就是所谓的树形结构。几个世纪以来,文职人员一直在使用这种方法:
找到档案柜,选择抽屉,打开装满文件夹的抽屉,选取文件夹,再从文件夹中取出文件。iPhone的树形结构导航模型直接借鉴了这种整理方式。由于iPhone没有足够的空间将整个树形结构显示出来,每次只能看到一个“分栏”,当点击栏内的项目时,下一级分栏就会从页面右侧滑入。

       以内置的“Mail”应用为例,如下图所示,从左到右,用户通过逐层的点击,可以看到越来越底层的“分栏”,最终查看到单封邮件的内容。

                

       树形结构对管理一大摞的分类项目非常合适,比如管理邮件、待办事宜、音乐、照片等。假如你有5个以上功能分类,就可以使用树形结构。

       在考虑用何种形式来组织树形结构时,可以很自然的想到,基本的文本列表会是最自然的可视化方式。用行话来说,就是表格视图。比如上面所示的Mail应用,就用了这种简单的列表方式。

       与此同时,还有另外一种更加图形化的方式可以展示树形结构。比如,提供航班信息的应用“Lufthansa",就用了一组图标来展示多种功能。不仅更加图形化,而且还突出了Lufthansa是一个集航班查询、航班预订、手续办理、里程信息查询等为一体的集合。在这个主功能列表后是内容列表,可以通过不断的点击深入到这个结构层次中去。
 
        
       
       当你在内置的“照片”应用中浏览相册的照片,该应用也使用了类似的图形化展示方式。在进入单个相册之后,它展示了漂亮而密集的一屏缩略图,点击即可全屏查看相应大图。这比起显示一系列的照片标题要来得有用得多。

             
        
       无论用列表也好,图标也好,或者图片也好,这些树形结构导航都有类似的优点和缺点。优点是:占用很少量的界面空间,而且内容本身就是操作,使得应用的交互变得直接而直观。缺点是,主功能只有在最顶层页面才能被显示,主要功能和分类之间的切换比较麻烦。

       6. 组合使用导航模型
       以上这三大导航模型是不互斥的,你可以在一个应用中混用不同的导航模型。特别是应用内容或者功能繁多时,混搭导航可以帮助我们克服单个导航模型的短处。

       一种最常用的设计模式是:使用标签来组织应用的主要功能,然后在某几个标签下又添加树形结构导航。
       树形结构的一大缺点是,不能容易的从一个主要功能切换到另一个主要功能。而混搭导航弥补了这一缺点。将应用的主要功能放入标签栏后,用户就不用回到最开始的页面去切换功能,只需要点击标签栏即可。
        比如下图所示,”AccuWeather“应用使用标签栏导航来组织它的主要功能,而后,在其中的2个标签栏:”Forcast"和"Video”中都使用了基于列表的树形导航来充当子导航。
        
                     
       
       请注意一点,在用户切换标签时,你的应用应该记住每个标签下的情形,当用户从别的标签切换回来时,应该保持同样的位置,同样的搜索结果或同样的详情页。这称为“状态恢复”。
       
        第二种设计模式是:将平铺导航页面类似的嵌入二级页面中。比如Safari,如下图所示,点击工具栏中右下角的“窗口按钮”,即会用平铺导航的方式展示所有网页。

                     

       将卡片平铺的方式很适合于很少甚至没有按钮或操作的布局,所以大可以在应用的一部分内容上使用平铺页面,而且将这部分内容装入专门的平铺页面视图中。最好可以临时的全屏,或者至少可以抛弃当前操作控件。以Safari为例,如上面右图所示,在平铺展现所有网页时,虽然保留了工具栏,但是上面的按钮变成了简单的“新网页”和“完成”。

        7. 模态视图和导航的死胡同
       在使用应用时,常常会遇到如下情况:一张页面从底部划出,临时取代整个应用的显示屏。我们称这种处理方式为“模态视图”。模态视图是导航模型的死胡同——滑出一个单屏,编辑、查看、操作页面上的内容。这些独立的页面不属于你所知道的导航模型中,它被用户点出,完成任务后便消失。

        比如内置的“Mail”应用中,撰写新邮件或者移动邮件到新邮箱中时,就使用了模态视图。点击邮件页面工具栏上的“移动“按钮(左图底部第二个按钮)时,邮箱页面(右图)会从底部滑上来,盖住先前的页面。在点击了目标邮箱或点击”取消“之后,滑出的页面会缩回去。

                                  

        一个更加极端的例子是“Safari”,它没有标签栏,也没有分类列表。应用的整张页面基本就是网页内容,在浏览器中用来改变和分享内容的工具,都通过模态试图的方式弹出:蹦出的iPhone虚拟键盘让你能输入网址(下面右图);滑出的"分享"页面可以让你分享和邮寄网页(下面左图);弹出的”书签“页面可以让你找到之前保存过的页面。
 
                    

       上一章中,我们提到过“隐藏之门”,模态视图实际上就是一个例子。模态视图将次要的控件和功能藏起来,只有在任务被触发时才出现。由于模态视图属于支路,那么一定要在页面上添加一个“完成”或者“取消”按钮。

       8. 不要让应用成为乱麻般的网络
       在设计应用的导航逻辑时,千万不要让它成为一个乱麻般的网络。当用户需要使用某个功能时,应当可以轻松的找到该功能在应用的路径。而且,最理想的情况下,这条路径是唯一的。创建应用时,请尽量遵循“同一个房间,同一扇门”的原则:每张页面只有一个途径可以进入
       你一定希望自己的应用可以让用户可以逛开,但是首先要保证,用户在你的应用里不会迷路。每屏只有一条路径可以达到,这样才容易让大家可以记住。

       9. 在纸上画出你应用的故事板
       在搭建应用前,要先画好你应用页面的流程图。就像导演在开拍电影前,会先准备好每个场景每组镜头的故事板。不要在每张页面上做太多的事情,相反,应该深思熟虑,尽量让每张页面都简洁明了。
       那么,在设计的这个阶段,应该如何绘制应用的页面流程呢?下图展示的是应用“Things”的团队为每张页面和页面流画的纸面原型草图。

       
    
      在作图时,有几件事情需要注意: 
    (1)最好先从纸面草稿开始,不要忙着用PS或Illustrator来勾画像素。在纸上勾画,可以激发创意,还能免去你陷入细节的烦恼。
     (2)在最开始的阶段,只需要画应用的主要页面,说清楚用户将如何在应用中一步步的完成主要任务,不用去抠太多的细节。你的草稿只要说清大概即可:需要哪些页面,每张页面上有什么操作,还有页面上的工具和内容的大致比例。
     (3)如果是团队合作,这个阶段尽量让所有决策者都参与讨论,在白板上共同画出草稿来。现在做修改很容易,越到后面,设计和开发已经正式开始后,修改就难了。
     (4)虽然只是理清概念,但是保持在真实比例大小的纸上画草稿,会很受用。如果画得多,可以考虑买本正规点的iPhone绘本。APP Sketchbook(www.sketchbook.com)和Notepod(www.notepod.net)上面都有卖和iPhone一样大小的笔记本。还可以在“First & 20”这个网站上下载模板:http://www.firstand20.com/articles/iphone-graph-paper

           10. 丑点没关系
       在完成草稿设计之后,不要急着把它变成美丽的iPhone应用,而是要尽快测试你的草稿放到真实设备上的感觉。先把丑陋的原型放到iPhone上跑起来,看看你的设计是不是行得通。
       你可以把草稿拍下来,用作图软件缩放到iPhone的320*480像素,然后把这些图片放到iPhone里去。于是,你就可以在iPhone的“照片“应用里,全屏翻看你的草稿了。这个步骤主要是让你感觉一下设计的比例和大小。
       如果你觉得这样不够过瘾,还可以做个粗糙的原型应用出来,文本位用虚假的内容来代替即可。这样原型的页面就可以反动了。开发人员Rob Rhyne开发了一个很不错的iPhone的代码框架,叫做"Briefs",这个框架做的就是我们刚才所说的这种方式,请访问www.givebrief.com

      在完成这一步之后,便可以开始着手做更细致的模型了。下一章就将详细介绍如何使用iPhone的标准控件。
       

  相关解决方案