详细解析移动UI设计的八大原则

【 tulaoshi.com - 平面设计 】

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

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

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

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

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

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

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

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

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

一、内容优先

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

重组内容，使内容符合移动的特征

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

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

优先突出用户需要的信息，而简化界面的导航

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

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

适时提升屏幕空间的利用率

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

二、为触摸而设计

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

以信息架构为基础，建立手势交互规范

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

Clear 这个应用的三层导航架构在整个交互架构上，都是以手势为基础。

这里可以对Clear 的交互设计进行分析。

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

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

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

在应用设计时，完成信息架构设计后，也要思考应用手势的架构，使基于手势的导航能与信息架构整合一体，让用户方便、快捷地找到内容。

优先设计自然的手势交互，而不只是Tap 点击

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

引导用户在情景中学习手势操作

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

特殊手势不是必须的

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

可触区域必须大于7×7 mm，尽量大于 9×9mm

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

手势操作要提供过程反馈提示

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

三、转换输入方式

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

减少文本输入，转化输入形式

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

简化输入选项，变填空为选择

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

使用手机已有的传感器输入

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

四、流畅性

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

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

五、多通道设计

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

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

六、易学性

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

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

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

七、为中断而设计

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

保存用户的操作，减少重复劳动

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

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

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

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

衔接用户的记忆而不是让用户重头开始

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

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

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

对于阅读类的应用，要判断用户是否要持续阅读，使内容能更好地衔接起来。

无缝切换不同设备的内容

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

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

八、智能有爱

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

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

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

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

总之，设计在很多时候都是靠灵感的闪现，移动应用的设计则更加的灵活多变，如何能更好地设计出一个应用，没有具体的方法和成规。但是，为了能更好地避免设计师们走弯路，设计原则的学习是有必要的，它给了设计师们一定的参考和指导。