移动设计八原则

移动设计八原则

    近几年，交互设计专业也有了蓬勃发展，Alan Cooper、Donald Norman等人为交互设计提供了许多理论上的支持，Ben Shneiderman 提出的交互设计“黄金八法”和Nielsen 的“启发式评估10 条原则”为交互设计的评估提供了标准，所有这些理论和原则在移动应用的设计上依然是通用的。但移动应用有其特殊性，在设备和情景上都与普通的设计不同。因此，我们在考虑其他原则的基础上，整理了八条移动应用设计的针对性原则。

一、内容优先

    对于手机而言，屏幕空间资源显得非常珍贵。为了提升屏幕空间的利用率，界面布局应以内容为核心，而提供符合用户期望的内容是移动应用获得成功的关键。如何设计和组织内容，使用户能快速理解移动应用所提供的内容，使内容真正有意义，这是非常重要的。
重组内容，使内容符合移动的特征

    在PC 上的网页内容往往相对复杂，在进行内容移动化时，并不合适把内容直接照搬到手机端。在进行移动应用设计时，应该重组内容，使其符合移动应用的特征。

      移 动应用的内容应使用用户的语言，以用户熟悉的维度来组织内容，这样更容易查找目标信息，提升内容的利用率；删除无关的多余内容，让内容更简洁清晰，考虑在 小屏幕空间可以合理的布局，增加屏幕的利用率；内容要是清晰和具体的，是用户恰好需要的；内容要是有情景特征的，可以在不同的情景下给用户提供不同的情景 下的内容。
优先突出用户需要的信息，而简化界面的导航

    一个应用提供给用户的信息往往是太多而不是太少，设计师们的关注重点也会转移到如何让用户找到内容，而忽略了能给用户获得价值的是内容，而不是导航。

书城阅读软件

    上图是两个书城阅读软件的首页，左图应用在设计上以导航和框架为基础，用户想要看到内容，则需要再次进行操作。而右图应用则直接以用户要看的内容（书）为主体，突出了内容的设计。

 

    在移动应用设计时，我们更为关注的是用户需要的内容，其次才是导航。在内容本身复杂而多变的时候，如何让用户能更快速地获取恰当的信息，在移动情景中会显得很重要。

适时提升屏幕空间的利用率
    即使用户的视觉注意点集中在内容上，在设计方面也要把屏幕资源更多的给内容而不是导航。只是在恰当的时候，可以让用户呼出导航即可。

      在 天猫客户端的搜索列表界面，当用户刚进入搜索列表时，应用会给用户显示筛选和标题栏。当用户向上滑动列表查看列表中更多内容时，筛选和标题栏会自动收起， 给出最大的空间来展示用户需要的内容。当用户需要导航时，向下滚动列表就可以显示出来。在设计上充分考虑了内容优先，只是在恰当的时候才显示导航和筛选等 信息。

搜索列表设计

二、为触摸而设计

    点击操作是PC 时代交互的基础，在触屏设备上基于手指的手势操作已经代替了鼠标的点击操作。手势操作灵活多变、交互自然，但也带来识别性差、操作精度不高等缺点，都需要一些手势设计的基本原则来指导和完善。
以信息架构为基础，建立手势交互规范

    在一个移动应用中，手势的统一性非常重要。让用户在应用的任何界面中都知道怎么使用手势，并达到预期的结果。这需要设计师提供一套基于应用信息架构的手势规范，它将是导航与交互的基础。下面我们以Clear 为例来讲述一下手势的架构设计。

Clear 的手势架构

 

    Clear 这个应用的三层导航架构在整个交互架构上，都是以手势为基础。这里可以对Clear 的交互设计进行分析。

 

    第一部分就是它的导航逻辑。它的导航逻辑以手势架构为基础，层级导航向下时为Tab 点击，层级向上返回时为在List 顶部向下在拖动一定距离。整个应用的导航逻辑统一，用户只要在一个地方学会了操作，在整个应用中都能快速上手。

    第二部分就是细节交互。它也是以手势为基础，新增操作就是在列表顶部向上拖动一个项目距离，删除操作是从右向左拖动项目到一定距离，设置是从左向右拖动项目到一定距离。

总的来说，Clear 这款应用的导航架构与手势架构逻辑都比较清晰，操作一致性较高，易学性强。

 

    在应用设计时，完成信息架构设计后，也要思考应用手势的架构，使基于手势的导航能与信息架构整合一体，让用户方便、快捷地找到内容。
优先设计自然的手势交互，而不只是Tap 点击

    在移动应用的设计过程中，我们可以发现大多数的应用在手势的使用上都是非常保守的，基本上以Tap 点击为主，模拟在PC 上的操作方式。但是，作为以触屏为基础的设计，如果只使用Tap 点击的形式，不能完全体现出自然的交互操作。我们建议在设计时，能更多地思考出一套适合自己应用的手势交互形式，使用户在操作的过程中能更自然、更高效。
引导用户在情景中学习手势操作

    由于手势在界面上是相对隐藏的操作类型，需要用户的探索和学习。因此，除了基本的用户都熟知的手势外，其他手势在使用时都需要给出提示和引导。手势操作基 于程序性操作知识，最好的学习方式就是通过实际操作来理解和记忆。因此在手势引导设计上，更多的是以指导用户操作的方式来做，能让用户快速掌握。

手势引导

    在Fantastical 的操作提示界面中，有一个蓝色的小点一直从上到下落下，提示用户向下拖曳来切换视图。由于结合了实际操作，这个手势更容易被记忆。
特殊手势不是必须的

    苹果的Mac OS 提供了很多快捷操作方式及手势的交互形式，这些多指的手势能让专家用户的操作效率得到大幅度提升。新手却很难记住所有的手势，但是这并不影响他们使用Mac 系 统，因为系统都提供了满足于新手的交互解决方案。在移动应用的设计上也会采用一些个性化的、不属于各个操作系统规范里定义的手势，在某些情景中使用也会非 常合适。但是特殊手势应作为快捷操作的形式存在，用户不使用它也能完成任务。特殊手势的使用能提升产品的交互效率，或者给出有趣的体验，但是它们不是必须 的。
可触区域必须大于7×7 mm，尽量大于 9×9mm

    在触摸操作设计时，我们已经知道在界面中的可触物理区域不应小于7~9mm。为了让用户能在各种情景下都能容易操作，我们建议可触区域不应小于9mm。但是可触区域不同于在屏幕中直接呈现的物理大小，为了视觉及审美的需要，有时设计师会把屏幕元素设计得较小，这也是允许的，实际的可触区域可以大于屏幕元素呈现给我们的大小。我们需要控制可触区域的空间，在可触区域中都可以触发用户的操作。
手势操作要提供过程反馈提示

    在触屏界面上，由于手势操作是隐藏在界面中的，用户必须去尝试才能知道真实的效果如何。因此，在用户手势操作过程中反馈显得非常重要，他们需要反馈才能知道手势是否有效，也才能知道操作后获得的结果。

三、转换输入方式

    文字输入是移动端的软肋之一，不管是手写输入还是键盘输入，操作效率都相对较低。在行走或者单手操作时，输入的出错率也比较高。如何在应用设计时避免文字输入，或者使用一些代替方案来提升输入效率，在移动应用设计中显得尤为重要。
减少文本输入，转化输入形式

    在数字输入过程中，常常会把文字的输入转化为基本的手势输入。手势操作会以更快的形式进行输入，提升了输入的效率。如下面的两个例子在移动输入的改进方面提供了帮助，天猫客户端的价格输入转化为手势拔动；在Black Berry 的输入法中，当用户输入某个字母后，系统会给用户提供该字符串开始的推荐词，用户手指拔动就可以完成词语输入，省去了后面字符串的点击输入，提升了效率。

       

价格选择的手势                             BlackBerry 快捷输入
简化输入选项，变填空为选择

    在设置输入或者对于一些已知项目的输入中，尽量把用户要输入的内容变成选择。如已有帐户的登录过程，让用户选择而不是输入。日期、地址等本身可以转化为选择项的内容，尽量使用选择输入。尽量把用户的常用选项筛选出来让用户选择，而不是直接让用户输入。
使用手机已有的传感器输入

    使用语音、扫描识别（二维码、条码、文字等）、LBS 技术来减少用户的输入，给用户提供便利。我们在进行输入设计时，多转换思维，发挥各个传感器的基本特性并灵活运用，把难以输入转化为简单智能的输入形式，使用户能更便捷地使用。

四、流畅性

    在移动应用的操作过程中会碰到多种多样的情况——找不到目标、不知道该怎么操作、操作后没有及时反馈，等等，这都会对应用的流畅性造成影响。在移动应用的设计中主要从三个方面来考虑应用的流畅性，即手指及手势的操作流、用户的注意流和界面反馈的转场流畅性。

流的对比

 

    当把用户完成任务的操作触点连接起来就能组成一个完整的操作流，我们可以通过操作路径来判断界面的流畅性，操作路径短能在一定程度上被认为是操作效率更 高、流畅性更好。用户在操作界面时，注视点转移形成的焦点流连起来后就形成了注意流，注意流是否圆滑也是判断界面是否流畅的重要标志。注意流大幅跳跃的界 面一般被认为是界面元素的布局不够合理，需要让界面元素重新布局或者设计更好的注意引导机制，让注意流更圆滑。在本书的番外篇“流”中我们将探讨了一种移 动应用的流设计方法，就是在操作流和注意流的基础上来讨论更自然流畅的设计体验。

 

    除了注意流和操作流外，要让界面保持流畅性，更重要的一条是让应用的界面转场过渡和反馈都是及时流畅的，转场动效的设计在《移动设计》第5 章“细节”中会有详细阐述。除了完成理想的动效外，设计师们在做完设计后，还需要时刻跟进项目，试用开发的中间版本，体验应用的设计是否流畅，及时调整界面和转场动效中不流畅的地方。

五、多通道设计

    多通道设计是指系统的输入和输出都可以由视觉、听觉、触觉等来协作完成，协同的多通道界面和交互也会让用户更有真实感和沉浸感。当前各个系统平台下的基础 技术已经越来越成熟，语音输入、手势识别及其他由多种传感器组成的综合识别系统也会给用户带来更自然的感觉。设计师们在思考时，也可以从其他通道的角度来 思考设计，给用户一个更好的交互方式。

 

    多通道的设计在多数情况下都需要有深厚的技术功底做支持，新创团队也需要较多的积累才可能达到。

Chirp

 

    上图是两部手机正在使用应用Chirp 来 传递图片的界面，发起和接收图片使用的信号是鸟叫声。发起方发出一个声音，接收方接收到声音后，就完成了图片的传递。这是一个比较生动的多通道配合的例 子。通过声音发送信息的方法是一个理所当然的形式，它和我们对沟通的理解很一致（不同的鸟叫声会传递不同的信息），而像蓝牙、Wi- Fi 等复杂的协议对人们来说是看不见的、高深莫测的、不可爱的，它们让人困扰或不爽。而通过Chirp得到的结果却使设计更加有爱。

六、易学性

    对于移动应用产品，提倡的是简单、直接的操作，倾向于清晰地表达产品目标和价值。让用户快速学会使用，尽量不要让他们查看帮助文档。保持界面架构简单、明 了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的线索就能让用户清晰地知道操作方式。只有这样的设计，才能让用户的学习使用没有 负担，而不是通过帮助系统来教会用户操作。

使用前引导

    现在移动应用的帮助页面几乎成了必不可少的元素，在应用中都植入了操作引导界面，其实这完全没有必要。有些产品会出于各种原因，不得不设计帮助页面，以免 用户在打开后不清楚应用是做什么的、不知道是怎么操作的而放弃使用。其实这些页面在设计时就要考虑移动端的用户行为和使用情境，因为用户可能没有那么多时 间仔细去看说明，而是试图快速地了解应用本身。许多应用更新后，都会发现启动页后有许多帮助内容，有些应用甚至提供了8、9 屏的内容或者各种操作说明，用户既没有耐心看，也很难记得住这些操作，我们建议最好不要超过3 屏内容，且要有快速退出的操作。

 

    对于功能引导设计，更好的帮助设计是把新功能的提示与产品本身做更完美的结合，这样用户在他刚好要使用的情境下获得提示，让用户感到友好并不突兀，这样的设计更合适。

七、为中断而设计

    在玩手机时突然没电了、写微博时又被老板叫去做重要的事情、在搜索商品时收到了一条重要的信息……在移动情境中，被各种其他的事情打断是很平常的。
保存用户的操作，减少重复劳动

    网络中断状态：移动网络时常不稳定，当用户在操作过程中，突然断网则会给用户带来干扰，那是否要在设计上考虑保存用户之前的劳动成果呢？如果当用户正在发送一条评论内容，突然网络中断了，那应该如何处理呢？

 

    在移动应用上行服务端数据时，都需要考虑网络状态出现异常的状况。例如新浪微博客户端，当博文发送不成功时会暂存到草稿箱中，用户可以在草稿箱里再次发送，iPhone 发送信息不成功，也会保存内容，标记为发送失败，允许用户重复发送。这都是暂存用户输入信息的好案例。在网站状态不好时，应用需要保存用户编辑的内容，允许用户在网络状态良好时继续发送，甚至自动在后台继续完成。

 

    编辑中断状态：当用户在编辑内容时，由于其他的即时消息或者事件必须中断当前的操作，则已编辑的内容该如何处理呢？在手机文本输入上还没有很好的体验，那保存用户已输入成果，不丢失用户输入的数据就显得尤为重要。

 

    在Line 等即时通信工具的对话输入界面切换到其他界面，再返回后，信息都一直保存，而不丢失。在编辑内容的界面中，要考虑在各种中断事件后，保存已编辑的内容，减少用户的重复操作。
衔接用户的记忆而不是让用户重头开始

    当用户在阅读时被打断，该如何处理返回的状态呢？在阅读状态下，基于内容可以分为不同的情况：

 

书籍类的阅读——用户再次进入界面后，衔接上一次正在阅读的页面，而不是书本的首页。

新闻类的阅读——需要根据间隔时间来判断，超过一天时间没有阅读，再次进入后，可以让用户选择是否继续阅读或者返回首页最新内容。若时间间隔很短，则直接返回之前的页面内容继续阅读。

 

    对于阅读类的应用，要判断用户是否要持续阅读，使内容能更好地衔接起来。
无缝切换不同设备的内容

    当用户使用PC 浏览了某个产品的内容，之后打开对应的手机应用，如何让用户感觉到在不同设备中访问同一个内容能无缝衔接？

 

    Chrome 的手机浏览器可以查看PC 浏览器中打开的网页，让手机浏览器能快速地浏览PC 中 已看的内容。那对于同类产品来说也很有必要。很多时候用户都是匆匆地切换设备，但还想继续之前的操作，如何能在多个不同设备之间无缝切换，会对体验的提升 产生很重要的作用。用户可以主动发起内容切换到其他的设备上，也可以在用户打开应用时，又可以提示用户“是否要继续其他设备上未完的操作？”未来多设备的 用户会越来越多，如何能在这方面提升用户的切换体验也是值得设计师们考虑的。

八、智能有爱

    在E-mail 的 设计中，邮件内容中有“附件”文字时，如果没有贴附件，则会提醒用户“是否忘记附件了？”这是一个被大家广为称赞的贴心设计。在移动应用的设计中，更需要 这样的设计来提升应用的竞争力。评价一个移动应用体验的好坏，除了要看它是否满足用户需求和是否具有友好的可用性之外，能让用户感受到惊喜是在移动应用设 计中最为推崇的。这样的设计往往是超越了用户的期望，它的表现是功能、交互或者操作流虽不是用户预期的，但是用户能很好地理解，并更高效、更有趣地完成任 务。移动应用的设计应是惊喜有趣、智能高效和贴心的。让人惊喜的有趣的设计主要是通过设计手法来实现的。设计师是一个生活的观察家，对生活中有趣和美的事 物有非常好的积累，当需要在产品设计中表现时，会时常把这类好的想法迁移过来。

……

    智能高效的设计主要是通过设计师们对移动设备的特点和产品使用情境做深刻分析后才会产生的结果。

Line 通过手机扫码登录PC 客户端

 

    Line 在手机与PC 切换时，设计了一个二维码扫描登录功能。设计师们要去发现用户的使用情境与行为表现，例如用户在电脑边上时，更希望能通过电脑来使用Line，以提升操作效率。

 

    同时设计师们也要去分析移动设备的特点，发挥移动的特点来解决这个切换的问题。贴心的设计往往会帮用户提前想到一些事情，并满足用户还未意识到的需求，在用户在犯错误的时候能自动弥补、纠正用户的操作，并给出温馨的提醒。例如，Sync.ME（原名Smartsync）是一个很有趣的社交信息同步应用。当朋友给你打电话时，该应用会将其最新的Facebook 状态或照片显示在手机屏幕上，让你提前知道朋友最近的状态。然后你如果看到朋友最新滑雪的照片，那么你接电话就可以说：“怎么样，滑雪玩的爽不爽？”

Sync.ME 在来电时提示来电者的状态更新

 

    总之，设计在很多时候都是靠灵感的闪现，移动应用的设计则更加的灵活多变，如何能更好地设计出一个应用，没有具体的方法和成规。但是，为了能更好地避免设 计师们走弯路，设计原则的学习是有必要的，它给了设计师们一定的参考和指导。各个移动平台提供的设计是各大公司累积的移动设计的重要经验的集合，可以给我 们很多的参考和启发，在学习了这些平台的设计原则后，我们总结下上述八条移动应用设计原则，希望可以为移动应用的设计提供帮助。

 

原则一——内容优先：界面布局应以内容为核心，提供符合用户期望的内容。

原则二——为触摸而设计：界面的交互系统以自然手势为基础建构，符合人体工学并保持一致性。

原则三——转换输入方式：使用各种手机的设备特性和设计手段，减少在应用内的文字输入。

原则四——流畅性：保持应用交互的手指及手势的操作流、用户的注意流和界面反馈转场的流畅性。

原则五——多通道设计：发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感

原则六——易学性：保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的线索就能让用户清楚地知道其操作方式。

原则七——为中断而设计：考虑应用的使用情境，确保在各个产出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出。

原则八——智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。

 

 

作者简介

傅小贞，浙大心理系毕业，03年起在UT斯达康，中国移动研究院，淘宝网等多家公司从事移动交互设计和用户研究工作，曾组建过淘宝移动设计团队，领导淘宝移动主站和主客户端的设计；现负责斯凯UXC部门，推动冒泡系列产品设计。

 

胡甲超，交互设计师，来自阿里UX团队。06年加入阿里巴巴，从事过网站、桌面软件、无线客户端的交互设计，参与了阿里软件、淘宝Android客户端、阿里旺旺等产品的设计。在移动领域拥有多平台的设计经验，关注跨界设计和移动体验创新。

 

郑元拢，无线领域设计专家，一线实战经验丰富。目前任职于淘宝，从事无线方面的创意产品设计，负责过淘宝系列产品移动端的交互设计。


本文节选自《移动设计》一书

傅小贞 胡甲超 郑元拢 著
电子工业出版社出版