从网站到移动客户端应用 – 随\”机\”应变的用户体验设计
$从网站到移动客户端应用 – 随\”机\”应变的用户体验设计-移动阅读二维码$

设计文章 / 设计思想 | 2011-12-13 | 来源:Be For Web | 作者:c7210

平日的工作忙碌了些许，疲劳因素让每晚散碎的时间显得更加吃紧；赶上这样稍微有点篇幅的文章，做起来就有些迟缓了，哼哼唧唧的翻译了将近一周。

话说，又是以移动应用为主线的文章，这是闹哪样呢。但也不至于和本小博客的主旨相悖；网站产品移动化，设计思路移动化…在移动互联网汹涌的大潮面前，这是合情合理的趋势，也是我们在用户体验设计相关的日常工作中越来越多需要面对和学习的。

如果你一直以来从事着相对传统的交互、视觉等方面的Web设计工作，而如今开始打算扩展视野、提升技能、随“机”应变，做一名移动互联网的弄潮儿…那么本文很适合你阅读。相关领域中的几位牛人会在接下来的时间里带给我们一些很实在的经验之谈。全文大致分为三个主题：

Web设计师需要学习哪些知识和技能，才能进入移动应用的设计和开发领域？
从设计的角度讲，移动客户端应用与传统网站页面之间的主要区别在哪里？
怎样提升移动客户端应用的用户体验？设计师需要特别注意哪些？

开始进入正题。现如今，到处都有人在谈论移动应用方面的话题，从视觉外观到交互体验，这个那个的不亦乐乎。实际的统计数字也是蛮惊人的。最近，一份来自Flurry的研究报告显示，用户(美国地区)每天使用移动应用的时间，平均下来是81分钟，已经超过了平均74分钟的上网时间。

在这个世道里，身为用户体验设计相关从业人员的你，无论一直以来的主攻方向是交互、视觉还是前端，也许现在都已经开始琢磨着探索移动应用的相关领域了。

本文中，我们将从三个主要问题入手，与几位业内专家进行探讨，看看他们在“转型”方面有哪些看法和建议。

Web设计师需要学习哪些知识和技能，才能进入移动应用的设计和开发领域？

Josh Clark (设计师、开发人员，著有《触动人心 – 设计优秀的iPhone应用》一书，译者老包)

说到正经八本的设计技术能力，在入门阶段其实没太多新东西需要学。我们完全可以使用已经轻车熟路的HTML、CSS和 JavaScript创建出用户界面非常优秀的客户端应用。别误会，我不是在谈论Web App形式(什么是Web App？请参考我们之前关于网站移动化方法的文章)，我是指所谓的“混合型应用(hybrid apps)”，这是一种将基于HTML等前端技术实现的用户界面搭载在原生客户端上的方式，相当于为Web App穿上了原生客户端的外衣，并放到App Store当中。对于希望转型的传统Web设计和开发人员，这种方式是个不错的起点。

关于“混合型应用”，Jonathan Stark写了两本很棒的书，分别是《构建iPhone企业级应用—基于HTML, CSS 和JavaScript》以及《使用HTML、CSS和JavaScript开发Android程序》，书中展示了怎样使用开源框架PhoneGap创建这种混合形式的客户端应用。

作为入门是不错，但混合型应用在太多方面无法与原生客户端应用相提并论。如果你想打造在视觉及动画效果等方面都更加原汁原味的、特别是需要发挥设备硬件本身各种功能的应用的话，原生客户端应用仍然是不二之选。这就意味着你需要学习使用面向对象C语言(Objective-C)去写iOS应用，或是使用JAVA来打造Android版本。这些都是实实在在的编程语言，对于我们这样的Web设计相关人员来说，学习的难度会骤增；通常，我们可以与经验丰富的开发人员搭档，由他们将设计思路和方案通过代码实现出来。

即使这样，我们也无需扔掉HTML、CSS、JavaScript或是相关的Web App前端开发框架——这些工具可以帮助我们在开发原生应用的过程中创建快速原型——无论视觉还是交互方面都相当高保真的快速原型。

说到设计工作本身，特别在用户体验方面，移动应用与传统网页之间还是有着显著差异的。有两点需要特别注意：人机交互方式与使用场景。

对于移动设备来说，你需要面对和解决的交互设计方面的问题会有很多，和以往不同，你现在是在为手指做设计。你必须考虑的一个问题是，怎样的页面元素布局可以让拇指自由的操作并充分的休息。另外，当用户在进行操作时，界面的一部分必然会被拇指遮挡住，所以要尽量保证控制元件的布局不会干扰到实际内容。类似这样的问题还有很多，多数可以归纳到“舒适度”与“可视性”这两方面。这也是多数触屏智能手机会将主要控制元件或导航一类放在屏幕底部的原因——而这些与传统Web设计的习惯正好相反。
你需要知道用户多数会在怎样的环境下以怎样的方式使用客户端应用。对于这个问题，我们通常有个误解，就是觉得用户都会在很忙很赶、无法集中注意力的情况下使用应用。其实这只是实际情况的一部分，“移动应用”并非只在移动的状态下被使用；很多时候，人们会在沙发上、在厨房中、在机场候机时进行操作。在这些场景里，用户拥有足够多的操作时间，注意力也可以非常集中。另外，移动设备在很多方面的功能是超越桌面计算机的，譬如GPS、内置麦克风及摄像头、触控、陀螺仪、罗盘等；基于这些功能打造的不同类型的客户端应用，它们所对应的使用场景也各有不同。

不要过于自信的假设用户的意图。移动应用未必代表功能的简化，当你告诉自己“用户并不需要在移动版本中使用这个功能”时，你也许是错的。回忆一下你是否有这样的经历：在移动设备的浏览器中打开一个你所熟悉的网站，却发现页面跳转到了所谓的移动版本，不仅在视觉和操作上与你的习惯不符，更糟的是也许它所简化掉的功能正是你所需要的。虽然用户正在使用小屏幕设备，但这不代表他们需要获取的信息、需要使用的功能变少了。

我想说的是，我相信在多数情况下，无论移动应用还是所谓的移动版页面，它们都应该与桌面版的网站及产品具有相似的内容与功能。当然，正如我们在前面提到的，在呈现及交互方式等方面，它们需要基于设备自身的特点而区别对待，但在内容方面应当尽可能保持一致。有些时候，移动应用甚至需要做的更多，拿亚马逊(Amazon)举例子，他们的移动客户端应用还具有条码扫描功能；这是充分利用移动设备特有功能的典型案例。

从网站移动化这个角度来说，作为Web设计和开发人员，需要把思路锻炼的更加具有弹性。在过去超过15年的时间里，我们只是为桌面浏览器设计网站。真正的Web设计不该是这样的，它应该中立于平台之间的差异，在任何设备、任何尺寸的屏幕中都保证可访问性及可用性。

当然，在移动设备大规模普及之前，我们确实很难看到这一点；现在，我们开始了解到自己的网站和产品会被各种类型的设备访问及使用。这并不是说我们要为所有类型的设备都单独打造一个版本——真正需要的是让网站有足够的适应性和响应性。

关于响应式Web设计，可以参考我们之前的两篇文章：“什么是响应式Web设计？怎样进行？” 以及 “通过CSS3 Media Query实现响应式Web设计”。