《触动人心—设计优秀的iPhone应用》读书笔记（二）

   

 《触动人心—设计优秀的iPhone应用》读书笔记(一)的链接是：http://blog.csdn.net/circlepig/article/details/8567040

 

《触动人心—设计优秀的iPhone应用》读书笔记(三)的链接是：http://blog.csdn.net/circlepig/article/details/8635147

    

     第三章  小小触摸屏——为尺寸和触摸设计

        iPhone这么小的屏幕对于设计师开说绝对是个巨大的挑战，而且，它还要靠精确的指尖点击来操作。这为应用设计带来了双重的困难。 身为设计师，如何在这巴掌大的玻璃黑砖上大显身手，创造界面和物理体验呢？这一章，将统观小触屏设计中的大方面。

        1. 应用要给用户带来物理真实感
        iPhone的操作系统常常会让用户产生现实世界的错觉，轻拂滚动一个列表，会看着它因“摩擦力”逐渐变慢；列表滚到尽头时，居然会反弹。所有一切都和我们在现实世界中熟悉的自然规则一样运作: 惯性、动量、摩擦力，处处皆是。
       因此，一个iPhone应用的界面要在感觉上像个真实设备，更重要的是，它需要满足操作系统给用户带来的期望和硬件上点击带来的真实存在感。比如，“报刊杂志”应用，不仅设计成书橱的外形，向下拉动时，还会有反弹的惯性。是完全拟物进行设计的。

       

       2. 为拇指点击做设计
        iPhone是一个用手操作的玩意，而且大家很喜欢用单手操作，因此需要为这种操作方式优化设计。那么拇指点击有什么特点呢？
       虽然拇指能划到整个整个屏幕，但只有三分之一的屏幕是真正容易触及的。如下图所示，对于右手拇指来说，屏幕上点击舒适的区域分布在左边和屏幕下方(右上角和右下角是最难点击的区域)

       

       这就是为什么工具栏和标签栏一般放在iPhone屏幕的底部(传统桌面软件都习惯把菜单放在屏幕或窗口的顶部)。常用的按钮还有导航标签应该放在屏幕底部的左边，不常用的按钮还有会改变数据的按钮会被塞到右上方。比如，如下图所示，“编辑”按钮一般都放在右上角。

       

       再比如，Twitterterrific这个应用的工具栏，将"刷新"、"写微博"两个功能的图标放到左边，而“删除”则放到了右边。就是为了让用户更加方便的点击。

       为了适应左撇子的点击习惯，Twitterterrific，PCalc甚至提供了一个设置，可以翻转布局。

       当然，还有一种按钮，可以平等的对待左右手拇指，就是通栏按钮。肥大的按钮既可以明确的引导用户，也保证左手右手用户都不会遇到问题。比如，下图总的游戏"Word Crasher“就采用了这种设计。

       

       

       3. 44像素的控件
       苹果公司把手指的点击大小定义为44像素，这个尺寸在iPhone控件中随处可见。
       理想状态下，所有按钮或点击目标都应该保持在44*44像素，但这并不是说你看到的点击目标一定要那么大，其实这还包括了按钮自身延伸出的整个点击区域。比如，一个29像素的按钮，如果点到它的左边右边，只要在44的范围之内，也算是点击到了。
      苹果的标准控件基本都符合这个标准，除了键盘。键盘的按键只是44*30，也只有这样，才能将整个键盘都塞进去。（所以这个键盘超级难用...）

    4. 别塞太多的图标
       标准的标签栏和工具栏只有5个标签的位置，设计时，尽量遵循规则。否则就会显得太拥挤，容易点错。

       焦点应用讲解: PCalc
     （1）设计师没有将MAC版本直接搬到iPhone，而是进行了重新设计。根本原因就是iPhone屏幕太小，塞不下那么多按钮。

       
     

     （2）在点击按键时，需要给用户提供反馈: 比如类似iPhone键盘的闪屏，嘟嘟声。
     （3） 科学计算器通常功能比按键多，以前，一般会添加"2nd"按钮解决问题。而在iPhone上，虚拟键盘便可以解决这个问题。PCalc的虚拟键盘可以为不同的需求呈现不同的布局，从而容下所有功能。
     （4）在提供不同键盘布局的基础上，它还为用户提供了不同的主题样式。（为了让这件事情更方便，他进行了一定的调整。原来的按钮是图片事先渲染好了的，后面改为了即时生成的方式）

        在介绍了几条iPhone屏幕的物理特点之后，下面介绍几条iPhone应用普遍遵守的友好设计指南。

       1. 将重要信息放到上面去
       屏幕底部是拇指点击最舒适的区域，也是容易被挡住的区域。因此，记住一条准则: "主操作在下，主内容在上"。比如，当你点击标准文本输入框要打字时，内置的虚拟键盘从下方弹出，输入框和备选的输入内容则位于屏幕顶部。

      

      

       当然，也并不是所有应用都能区分出操作和内容。比如相册，代办事宜等。这个时候，整个内容区都变成可点击区。这种设计的好处是，可以直接点击想要看到的信息。 需要注意的是，即便在这种情况下，还是可以将最常用的点击目标放在底部。

       以下图中的应用Runkeeper为例，顶部的状态不止显示了信息，本身也是可以点击的。而两个按钮Pause和Stop还是保留在底部 ，因为他们最常用。

       

       

       2. 基于44像素的设计韵律
       只要你的设计大致基于44像素的栅格，界面上的元素与操作手机的手指就能和谐共处。这个长度是自然得来的，因为它也是一些标准控件的大小规律。
      实例，iPhone主屏上的图标排列行高为88像素，通过这种方式，iPhone主屏按着44像素设计韵律所设计。

       3. 质疑滚屏
       尽量不要使用滚动屏，因为滚动需要体力和脑力，而应用设计师的任务就是消灭多余的脑力和体力劳动。
       很多应用都致力于单屏设计，比如内置的“天气”应用。它消减了不少关于天气的信息，对内容进行精心设计，从而实现了单屏的设计。

       

       优秀的工具型应用，往往以大大的文字和图片为主，衬以大量空白，高速的传递简单信息。这是设计触动人心的应用的基本原则: 简洁胜过繁密。争取让应用通过速览测试吧（把应用握在一臂之远的地方，依然能轻松的获取并理解应用上的信息）比如下图中的两个应用Surf Report和Tea Round，都是能够通过速览测试的工具型应用。

            
       

       而对于一些更复杂的应用来说，想要达到这一原则，则需要更多的设计。比如下图中的AccuWeather应用，比天气应用要高级。应用主体只展示了天气的概况，而将详细信息藏到了图标背后，需要点击才能获得。点击是一种比滚屏更好的方式，因为用户不用忙于扫视、定位内容的位置，更容易获取信息。

            
       

       对于长文本，也可以用创新的方式来取代滚屏。比如读书软件，都会有翻书的隐喻来取代滚屏。

       

       当然，并不是所有应用都可以抛弃滚屏，比如Facebook，新闻客户端，邮件等。当应用需要滚屏时，需要确保应用的主操作能固定到屏幕上，不会随滚屏消失。

      4. 减少，减少，再减少

       在第二章中，我们鼓励你尽量削减应用的功能点，同样，对于屏幕上的每个元素，我们也能用同样的办法。 我们需要保证界面上放的所有操作都是大部分受众最常用的功能。每个工具都要与近旁的主要任务紧密关联，附属功能和附属内容要放到次屏中，或全部剔除。比如AccuWeather应用中看到的，无需把每条琐碎信息都列出来。很多内容都被删减，留下的一些次要内容和操作可以放到另外一张视图中。

       5. 秘密的面板
       对于大多数人来说，基本的功能就够了。但对于某个应用的高级用户来说，还需要更多的功能。加入这些额外的功能和工具后，如何能够继续保持界面的简洁呢？
       以Twitter为例，一条微博中，可能包含视频链接，可能附带地理位置信息，可能要提及某个用户，还可能包含了某个话题。如何既能保证快速发出微博，又能让用户找到这些重要功能，同时还能保持界面简洁呢？如果，我们将键盘加入了这个乱阵当中，额外界面就会将你正在打的字给挤掉，而这些字又是最为重要的内容。

       因此，应用将所有附加操作全部隐藏到键盘后面，从而解决这个问题。如下图所示，应用中有个按钮，显示正在编辑的微博还可以输入多少字，而这个按钮同时也用来切换主键盘和秘密面板。

       
       

       还有一些类似的方法来移开界面元素。比如电子书应用、视频应用，都提供了全屏模式，而单击屏幕则可退出全屏模式。这种方法虽然可行，但是不可乱用，因为这种隐藏方式可能让用户无法找到秘密面板的入口。只有在全屏模式下获大利的应用才可以使用。

       
       

       广告算作边框的一部分，用户是比较讨厌广告的，但为了商业利益，广告是必不可少的。滑动面板是个不错的妥协方法。比如，USA TODAY，屏幕底部会滑出一个广告横幅，保持几秒后就会滑走。
      

       当然，还有一点。如果你打算用隐藏之门，请记住在明显的地方放置门闩，便于用户找到它。可以有以下几种方式：

      （1）可以将标识放到用户正在关注的内容的旁边，比如，Twitter将秘密面板放在真该输入的内容旁边

      （2）将隐藏界面放在同一个平面上，比如，内置的Mail应用，需要将页面往到顶部，才会出现搜索框

      （3）用二级工具栏的方式。比如QuickOffice，点击工具栏上最后一个图标，会有弹出菜单，提供修改文本格式的工具。