从Web设计转到移动互联网设计（2）

来源：火星时代 作者：未知 发布时间：2011-12-17 08:22:31 网友评论 0 条

App前端开发框架——这些工具可以帮助我们在开发原生应用的过程中创建快速原型——无论视觉还是交互方面都相当高保真的快速原型。

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

对于移动设备来说，你需要面对和解决的交互设计方面的问题会有很多，和以往不同，你现在是在为手指做设计。你必须考虑的一个问题是，怎样的页面元素布局可

以让拇指自由的操作并充分的休息。另外，当用户在进行操作时，界面的一部分必然会被拇指遮挡住，所以要尽量保证控制元件的布局不会干扰到实际内容。类似这

样的问题还有很多，多数可以归纳到“舒适度”与“可视性”这两方面。这也是多数触屏智能手机会将主要控制元件或导航一类放在屏幕底部的原因——而这些与传

统Web设计的习惯正好相反。

你需要知道用户多数会在怎样的环境下以怎样的方式使用客户端应用。对于这个问题，我们通常有个误解，就是觉得用户都会在很忙很赶、无法集中注意力的情况下使用应用。其实这只是实际情况的一部分，“移动应用”并非只在移动的状态下被使用;很多时候，人们会在沙发上、在厨房中、在机场候机时进行操作。在这些场景里，用户拥有足够多的操作时间，注意力也可以非常集中。另外，移动设备在很多方面的功能是超越桌面计算机的，譬如GPS、内置麦克风及摄像头、触控、陀螺仪、罗盘等;基于这些功能打造的不同类型的客户端应用，它们所对应的使用场景也各有不同。

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

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

(Amazon)举例子，他们的移动客户端应用还具有条码扫描功能;这是充分利用移动设备特有功能的典型案例。

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

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

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

Query实现响应式Web设计”。

Robin Nixon (Web开发人员、科技文章作者，著有HTML5 for iOS and Android: A beginner's Guide一书)

在我看来，对于传统Web设计及开发人员来说，进行扩展或转型的最佳入门方式，就是保持手头技术的先进性，包括HTML(5)、CSS(3)和

JavaScript;目前，将Web

App整合成为原生客户端应用的解决方案正在日趋成熟，要实现产品的移动应用化，我们并不一定需要花时间学会那些复杂的编程语言，比如面向对象C语言、

JAVA、.NET等。只要你拥有足够扎实的前端设计和开发能力，你就可以很轻松的创建Web App。

Aaron Maxwell (Mobile Web Up创始人)

从设计的角度讲，多数概念和技能依然适用。作为一名设计师，你要清楚自己希望用户在使用移动应用的过程中做出怎样的行为，你希望自己的产品能够提供怎样的用户体验。这种说法虽然有些务虚，但是将注意力集中在这些问题上并延伸思考下去，确实是一个良好的开端。

菜单是一种可以带来高效率的UI组件，除非你提供的菜单项过多。试着以逐层滑入作为呈现方式，将菜单项以合理的继承关系组织起来，确保每层里面的菜单项不要过多。另外，标签(tab)形式的导航也是移动应用中的重要元素。

和传统Web页面一样，移动应用界面中的留白也是一门学问。怎样使用留白来表达视觉元素之间的关联及分组关系，是需要认真琢磨和尝试的。尤其受移动设备屏幕的可视区域尺寸所限，在对元素之间距离的控制方面，我们并没有太多像素可用，所以对像素级细节的把握能力就显得越发重要了。

要记得在适当的时候舍弃一些元素。比如，在设置菜单中，每添加一个菜单项都会增加操作的复杂度，使用户多花费一份时间和注意力在他们未必需要的功能里面。对于你的产品所涉及到的使用场景，要做到充分的了解，并在此基础上判断功能元素的优先级，做好取舍。

Sarah Lynn (Web设计师、创意设计师)

在向移动领域转型这方面，我个人认为最棒的、最切实可行的入门方式，就是研究学习市面上的各种移动应用。观察它们，分析它们的功能，学习它们对原生控件的利用方式;去实际使用这些应用，熟悉并理解各种控件的交互方式，并将不同的应用加以对比。另外，不少公司和团队都做过大范围的用户研究，你可以通过他们的研究报告学到很多东西，尤其是在用户体验等方面。

另外，有些不错的书也可以帮助你入门。我最推荐的一本，是Suzanne Ginsburg的Designing the iPhone User

Experience(iPhone应用的用户体验设计)。

有些工作需要花时间和心思去执行，比如，要学会获取用户的反馈，另外一点是在进入实际设计开发流程之前，做好充分的计划工作;在初期可以制作纸质原型，并尽早与用户或有经验的移动应用设计开发人员进行交流。

从设计的角度讲，移动客户端应用与传统网站页面之间的主要区别在哪里？