七条守则让你为用户设计出更好的移动通讯体验！

一个好的第一印象对于每一段关系来说是十分重要的。人们总是在追寻信任及真诚，并且期待可以透過后续的相处去让他们的第一印象变得更好。这事儿套在品牌和产品设计上也是一样的，设计就是扮演著这么重要的角色：去建立与使用者的关系以及维系品牌的承诺。

用户期待他们的移动通讯服务是有价值、高性能的且易于使用的，然而，因为在设计中的种种限制，常常不能满足使用者对于手机服务的所有要求，你们可能会小看了这件事的重要性，这些与用户体验相关的设计对使用者来说是不可以被忽视的，事实上，用户使用体验的设计应该被列为手机设计中的十分关键的一环。

在这篇文章中，我们将讨论与设计有关的七条守则，透过这些守则，可以帮助你在性能与外形设计上符合使用者和企业的需要。我们团队曾经在不同的平台上设计多元移动通讯产品的App，而此七条守则是建立在那些过去的经验上。

原文：Seven Guidelines For Designing High-Performance Mobile User Experiences
翻译、编辑: Ennis Chen@DamnDigital

移动通讯产品的性能表现

人们在不同时间、不同的地点透过他们的通讯产品去提高生产力，并且让生活变得更加舒适、有趣，像是在等公交车的时候、走在人行道上的时候、寻找在哪个月台搭车的时候。在多元的使用环境中，移动通讯的App设计必须得聚焦在一个核心功能上，而这个核心功能的速度要快以及是令人信赖的。

但这与事实正好相反，我们发现很多移动产品的设计周期总是以高美感为第一诉求，设计出很多令人惊叹”这真是太好看了！”的产品。当然，那些令人惊艳的视觉设计也总是会在第一次的接触中快速抓住消费者的眼球，但是长久的使用过程绝对和产品的品质息息相关，而这些也都与App的表现是切割不开的。如果一个App看起来很棒，但却不太好用，这会将损害你们的信誉，使用者其实很快会发现你们的App很缓慢或是就像坏了一般，如此的情况不只是会让人不堪使用、更会破坏你们的品牌。使用者期待的是一个高速且反应灵敏的App，如果你的App不是如此，它的评价就会变很低，然后会去使用的人将变得越来越少。

从视觉上来说，Twitter的App(图左)似乎没有Cookmate(料理小帮手)(图右)来的酷炫好看，
但在App Store中，Twitter的App评价相对是好很多的。

App的性能让你的品牌与众不同

每一项产品的使用经验都影响著用户对你的品牌观感。使用者总是会去寻找最好的工具来使他们的生活变得更美好。为了吸引更多的用户群，越来越多的App被设计出来，你得想点法子让你的App与众不同，像是做一些别人没有做过的App，或是同样的东西比别人做的更好。性能的表现是关键要素，这直接的让你的品牌和别人的区隔出来。如果要更进一步，就好好突破你们在性能技术上的挑战，让使用过程变得更顺畅，这绝对会让你们产品的销售有一定的突破，而且其他的竞争者也很难模仿。

Flickr iPhone App就是一个很好的例子，Flickr在一般互连网中的两大目标是：帮助人们去使用他们的照片，以及透过新的方式去管理相片及视频。你知道吗？Flickr App完全实现了这两大目标，因此也让他们的品牌承诺更加完整。

Flickr在实现品牌承诺上表现的很好

因此，当你要规划设计一套App时，你最好要好好分析一下市场，并且试著去问问自己以下这两个问题：
（1）这App和其他的竞争者有什么区别？（2）要如何让这套App表现的比竞争者更好？
然后，好好努力在你们最重要的三个目标之上。

一个关键的设计过程

任何一种产品的制造设计模式都需要受到重视，一些经典的设计和工程的准则总是会被世人津津乐道著。像是汽车的设计会影响在运作时的空气动力学，一座无论如何美丽的桥也是得让让车与人能在上头走过。移动通讯的应用程序设计也是一样的，App的设计影响著它的功能、内容、互动性和逼真感，这也等于是影响了整体的表现。

我们在不少产品开发团队中都发现，其实产品最终的性能更多地取决于开发人员，如果开发者不能很好地考虑性能与功能表现方面的因素，而把这一部分完全交由设计师来完成，已经为时过晚。不过为了要创造更多的可能性，开发中的一些细节在创意发想时中就必须要被考虑进去的。运用以下七条守则，去思考与移动通讯介面设计相关的因素（请见下一章节），你将会了解要使用户达到高性能的体验不只是在做编码活而已，开发端的努力是一个重要的关键！

在荷兰鹿特丹的伊拉斯玛斯桥。（图：Wikipedia）

是什么在影响移动通讯介面的表现？

关于性能的表现是建立在以下几个功能上：开机时间、页面loading的状态、切换页面动画的流畅度、误差和等待时间。下图说明了这些功能的因素：”App”（与他的图像表现、互动、内容、功能与编码）在“移动”设备上的运行具有有著特定的技术（CPU，屏幕大小等）和平台（Android，iOS等）。在不同的案例中，App以一些平台（LTE、3G、2G）和网络连接至后端，（下图）上面两因素是被设计与开发团队影响著，而下面两个因素则是需要考虑一些装置上的限制。

影响性能的因素

每个对于以上这些要素的决定都会影响性能的表现。这是一种相互影响的状态，不管像是增强（如进阶的视觉效果）或限制（如网络覆盖差）皆有可能会影响他的效率。举例来说，为了要从后端加载一些进阶的图像内容，你就得冒著缓慢网速的风险，这些相互影响后的结果都会减弱程序的性能表现。

七条守则

在过去几年中，我们看到了移动平台的巨大改变。新的传播介面开始不断的出现，屏幕和处理器进化得和桌上型电脑一样先进，而输入机制也有了重大的改变。

在这些日新月异的科技改革所产生的限制中，设计师需要不断的尝试去创造更尖端、更令人耳目一新和更高性能的产品，这些不仅仅是去减少图片大小的问题而已。不同层次的设计决策和设计过程将会产生重大的影响。让我们来看看在不同的设计层面，已被证明是有用的七项工具，指引你实现高性能的移动用户体验。

1. 定义使用介面的品牌特性

在每位使用者在使用App时，要能让他们感受出品牌的故事且增加认同、忠诚度以及满意度。我们需要去辨认App中的哪些元素和品牌形象有关的，像是功能、视觉效果、措辞、字体和动画。我们的设计团队在不同的团队里面做不同的产品，这使得我们可以用以一些簡單的使用介面元素做出更多元的变化。去界定我們App的核心要件可以讓用戶使用率增高、防止別人模仿，更可以優化設計與製程。

我们建议去界定使用介面的元素(如上列之功能、视觉效果等)，如此便可以创造出有自己独特风格的核心要件，在概念成形阶段， 可以依照以下的一些规则去定义那些元素：

• 使App有差异化（例如：选择不同的照片浏览路径）
• 关键功能的展现（例如：登出店铺时的接口）
• 设置特定的设计样式（例如： 把一些重点截图放在头部背景之上）

微软为 Window Phone 7设计的介面体现了字体、排版与综合布局的完美整合，
创造出一种属于他自己的设计DNA。

核心的识别标志要十分显眼的，使用者会不断的看见这些识别标示，而这些标示也会被运用到不同的产品介面里。如果让设计和制程依循著一系列的识别元素，则可以倍数提高品牌的识别度 。

2. 关注产品组合

一个公司若想要很快的发表他的产品、或想去发展产品组合（如：不同的产品在同一平台、同一产品在不同的平台或是同样的产品在同一平台上）抑或是面对时间与资源的种种限制时，是十分难判断到底应该先关注哪一部分。我们认为设计和制程应该关注在产品的组合上，产品组合才是最重要的事。一个产品顺序的矩阵可以给我们很大的帮助，去了解哪项产品的设计应该最优先处理。

不同的产品顺序的矩阵之例（以不同产品在不同的平台、不同的客户数量与竞争者的分类来决定设计的顺序）

我们得去关注最重要的部分，如此可以让整体的努力表现投注在投资报酬率最高的区块。假设你预期的顾客都在使用Android手机，而你的竞争者也对准了这群用户，那么去付出努力在设计更优雅和高效的Android App就会比去分心去设计其他使用平台上的App更为有价值。

3. 了解核心使用者的使用情节

我们的团队过去曾面对很多不同项目的发布，在最初的要去完成一些产品要求的时程里，多半耗时长、抓不到重点以且几乎很难去实现。事实上，当公司准备要做某一样产品时，常常会忽略使用者需要我们解决的需求通常是非常特定的（他们的需求不是如此不著边际 ）。

举例来说，如果你去购物（先不管那些应酬与寻找灵感等等的事儿）通常是要买某样产品，不论是在一个小城市、伦敦的牛津街（奢侈品聚集地）或是在互连网上，都是在找寻你想要的。当然如果能让整体的购物体验有趣些当然更好，但最重要的事儿还是得买到你想要的东西。在设计购物的App上也是一样的（不论是买游戏、音乐或是优惠卷），不论你所设计的其他功能是否可以让整体使用体验更丰富，但一定得让使用者可以很快的找到想买的东西以及购买，

下面的插图显示了在一家商店购买信息页的两种设计 ，左图是比较进化后的版本，像是有送礼的功能、还有一些相关产品以及销售店家的评价。而右图则是侧重于购买的功能上。如果使用右图的设计可以优化公司想传达的概念，团队不会被设计一些样式给转移注意力。只有把基础的核心功能做好，再加上那些特色样式才会有意义，只要那些特色样式别阻碍了核心使用者的使用情节。

两种不同的购买信息页面

在产品在定义的过程中，为了要专注在开发设计产品上，我们需要去了解那些核心使用者的使用情节。

4. 优化使用流程和元素

使用者不喜欢等待。（Google把” 我们以千分之一秒来计算搜索时间”作为处理使用者体验中的第二大信条）。去优化使用频幕、流程以及元素可以让使用者的操作速度更加快速，也减少了他们在使用过程中去想”这简直在浪费我时间”。

A. 让App使用者感觉速度加快

設計者不可能總是控制App的表現，有可能是因為網絡速度慢；或是使用者本身的裝置在後台運行其他的任務；某些任務會需要更多的運算力。如果使用者最終感覺他們不是在讓費時間，那麼他們可能會對App有個更穩定的印象，其實有些設計可以傳達這個訊息，就算是真的有些使用上的延遲。

第一步是去找出哪些是造成延迟的关键（如获取后端数据、执行大量运算等）。第二步是去放一些额外的步骤说明当正在延迟时，让使用者认为这些延迟是必要的（也可以设计一些loading的动画、或是显示一些重要的小窍门等等的资讯）。

下面这组图片是要展示在搜索内容时可能的步骤：

使用者在此会经历以下的四个步骤：

1. 点击搜索按钮
2. 看到loading动画
3. 看到一部分只有文字和图片预留位置的表列（这是可以被储存到App里头的）
4. 看到真正的图片缩图

试想使用者直接从第一步骤跳至第四步骤，他们一定会感觉等待了很久。

（请见下图）另外一个例子是当App开始准备loading时，你如果先展示了和你App设计有关的图片，这会让使用者觉得此App特别快 。然而，如果在第一个画面加入了一个简单的进度通知讯息，也有可能让使用者认为速度正在加快。这也可以避免使用者认为这好像根本还没开始要loading。

iPhone 上 Facebook App的loading画面

B. 优化使用介面的元素

每一个UI的元素都会影响App的表现，且每一项优化都会反应到整体的表现上，所以每个元素都应该被仔细考量后使用。一些设计的关键请看：

• 频幕上的元素
  在频幕上UI元素的数量和样式皆会影响在频幕上的表现。举例来说，一些多媒体（音讯、视频和地图）的影响会大于那些单一的元素（静止的图像等）。
• 元素的特点
  一个元素的特点，像是它的清晰度或图像的大小都会影响绘图运算时间。例如，在Android上，每个可以使用的规格（JPG，PNG）都会被解码成点阵图(bitmap)格式，所以每一个被优化过的图像可以减少一些大小。你能减少色彩浓度或降低解析度吗？
• 绘图技术
  UI元素在App上的绘图方式会影响loading的时间，举例来说，当整个频募得背景图正在loading时，会和一个放在更上层的巨大且不透明的图一起处理吗？你能不能为了整体的上传的速度把整个背景切割成小的图片？

5. 去定义UI缩小的规则

去建构一个最生动的App设计像是在许多有障碍的地方进行导航，你必须要持续地平衡所有的功能、美学、实用性以及各种表现。有些平台要求UI有比它者更多的折衷空间，不论平台有多少限制，对于品牌最关键的识别仍然要保留下来。

以下是我们建立的UI的缩小规则，这些规则可以透过相对重要的UI元素去帮忙你的设计，某些元素对于你的品牌识别来说是非常重要的，有些元素则是你移除了他也不会造成太大的影响，请见下列几项不同的类别：

• 重要的：这部份是指品牌的核心UI识别（参见守则一），举例来说，一个App的头部。
• 可替代的：此项相对于上一项是较为不重要的，但对于高端的解决方案来说是有利的，会降低App在表现上的负担。像是以不透明的元素替换掉透明的元素。
• 可选择的：这些元素可以被移除，并且仍然保持一定的App表现。像是减少搜寻选单的项目数量，从原本的25项，减少至10项。

1. 重要的（头部）2. 可替代的（使用不透明色块而不是透明的）3. 可选择的（减少选单的长度）

6. 使用性能分析表格

当要生产一个很棒的产品时，清楚的沟通管道在团队中是非常重要的。我们遇到很多情况是行销人、设计师以及开发者对产品有著不同的期待，因为App的表现是被不同的要求所影响著，那些要求像是为了符合一些守则、对App的性能的期许等，而这些要求本身也会产身一些限制。那么如何去解决呢？我们在此想要介绍性能分析表格， 这个表格可以帮助你们去测量、检视以及去设定每个产品现状的目标。性能分析表格可以有效帮助不同的产品现状、团队期待及关注层面进行沟通，我们以下列一些元素来说明此表：

• 核心使用者的使用情况：确保此表格和使用者的使用经验是连结在一起的

• 竞争者的定位：和重要的竞争对手比较你的产品定位

• 现状分析：展示目前产品的运行状况

• 目标：设定App的表现目标

• 现状：指出App目前所处的状态与目标的差距

性能分析表格的例子

很多工具都可以帮助你去测量你的App表现，你可以主观的来测量，藉由人工的纪录时间以及一些任务，或是客观的用一些工具，像是在Android SDK上以TraceView来评测（如果你是在开发一些原始的App的话）。

7. 如果要当第一，就以UI工程技术来决胜负

设计和科技总是密不可分。要在使用者经验上有很好的表现是需要专业技术的支持，这不只需要从前端到后端的知识以及对于设计目标的深厚了解。

对于版面样式的配置、图片以及动画等等的运用，在所有需要注意的事情之上，我们有两点想分享给你们：

• 聪明的加载机制
  聪明的加载机制，像是延迟图片载入，如果遇到图片，他会先跳过，让网页上其他的内容优先载入，当其他的网页物件载入完成后，再换图片进行载入（这样就不会因为图片的关系而让网页卡在图片读取中），可以使读者的阅读经验更加顺畅！
• 背景加载
  这是另一个广为人之的例子。性能的表现仍然还是要看其背景图是一张大的图片或很多小部分，抑或是一个纯粹的运算。最好的解决方法还是得依照不同的状况而定。

在很多情况里，一个责任常常是需要营销团队、设计团队以及开发团队一起来担的，我们注意到UI的表现常常会在这些分工中被忽略，每个团队都有他们自己的目标，所以一些需要共同担起的责任，像是UI的表现，大家就会忘记它的存在。我们以设计团队中前端的编码专家说明了这件事，这让我们专注在优化UI的实践和表现，优化后的使用者经验会更加流畅！

结论

我們已在上述的七条守則中以不同的角度介紹了和App使用表现的相关建议。每一项设计的考量都会影响App的表现，而这些使用表现应该在设计过程被认为是最重要的影响因素。然而不幸的，设计团队们常常是在搞坏了使用过程之后，才认知到这件事情的重要性。

我们已经成功地为一些相应的产品介紹這些守则，这些是可以帮助去改进你们的产品性能，也可以帮助你们团队增加一些消费者使用经验的意识。到此，我们也可以试著去转换最初对于App的要求：从”这必须要看起来超棒！”到”这必须要看起来超棒、感觉起来超棒、使用起来也超棒！”

来源：http://www.damndigital.com/archives/27138

© 推荐 for 互联网的那点事, 2011. | Permalink | 2 comments | Add to del.icio.us
Post tags: 设计思想

你可能也喜欢：
家居设计软件 – KitchenDraw中文绿色版 (@portablesoft)	商业名片设计软件 – iBizCard绿色版 (@portablesoft)	设计源自生活—谈生活中的用户体验设计	用户体验设计的五项原则	用户体验设计思想：瞬间设计（一）
无觅

Feed enhanced by Better Feed from Ozh