世界范围内移动设备的使用数量在与日俱增。面对在跨越多个不同设备上创建良好web体验的挑战，现在已经存在多种解决方案。但是对于任何一个给定的项目，这些解决方案中哪个是最合适的？为了回答这个问题，《移动优先》作者Luke以Bagcheck应用作为案例（注：Bagcheck是一家从事搜索与发现业务的创新型企业），解释了选择分别设计移动版和桌面版背后的原因，并通过对比提炼出四个优化移动Web产品的建议。全文如下：

　“这个不符合用户的心理”，“这个功能打破了我们产品整体的平衡性，放在这里在我看来是不太合理的”…   

讨论方案时，设计师常会提议，某产品的某个元素（如按钮或功能）设计的挺好，设计存在很多可能性，发散思维时不论对错。但实际应用时，要考虑元素的应用条件，切不可随大流，盲目地照搬套用。选择最合适的设计，而不是最流行最酷的，围绕品牌特性做设计，让产品形成与众不同的气质。

比如错误的提议：现在流行Metro风格，我们也这样设计吧。

较好的提议是：Metro风格适合内容型应用，弱化按钮的UI元素，突出内容本身，而我们是工具型应用，主界面需要突出某个按钮或引导用户执行某项操作。

侧边栏

 

 

开发者要在智能手机有限的空间发挥无限的创意和价值，这的确不是一件容易的事。为了使用户更有效地使用app，开发者的app必须要做到精简和直观。另外，开发者更要巧妙地引导用户去发现和使用app的功能，本文为开发者提供了一些小技巧。

创建安装向导

安装技巧如果你的app对用户输入依赖程度比较高，一个不错的办法是设置安装向导，在用户第一次使用的时候，就可以收集不少有用的信息。创建一个自定义安装向导，你可以把这个单调乏味的过程变得有趣和充满创造力。

提供app攻略

移动用户数和手机使用量都在逐年增加。随着越来越多的用户使用手机完成任务（参见The Future of Mobile ），如何改进移动用户体验的各个影响要素，便成为值得关注的焦点。

　　移动用户体验是指用户使用低端功能机到高清平板电脑间的任意设备中，与移动产品（浏览器或App ）互动之前、之时及之后的认知和感受。

　　为了创建令移动用户愉悦的体验，我们必须重新思考那些长期以来被认为理所当然的桌面端设计。移动用户体验的复杂性源于移动设备的特性，主要包括：小屏幕，设备特性的巨大差异，电量和网络的限制，难以定位又永远变化的移动使用场景。

通过解析移动用户体验的重要组成部分，我们可以得到一个概念框架来构建和评估好的移动体验。这些部分在文章《以用户为中心的移动设计方法》
中有所提及 
（参见
user-centered approach to designing for mobile
）。下图组成要素决定了移动用户体验，包括：功能、情境、用户输入、内容和营销等等。

　　 以上这些要素的重要性会根据设备类型不同（如非智能手机、智能手机、平板电脑）和界面显示不同（如 App 和 Web ）发生变化。本文将简要介绍这些要素，并详细说明相关的重要准则。

在本篇案例当中，我们将帮助各位使用Metro风格的设计原则对原有的iOS应用设计方案进行重新构思，大家会了解到怎样将iPad当中一些常见的界面元素及体验模式转换成为Metro风格，以打造全新的Windows 8应用。我们将对同一款应用在两个平台中的不同设计方式进行对比，帮助各位了解怎样将你的应用与Windows 8以及Metro设计原则进行完美的融合。

我们将要研究的是一款相片日志应用，用户可以在线查看和管理他们的照片或视频。下图是这款应用的Metro版本：

这款应用最初是为iPad设计的，如下图所示。

从设计及体验模式的角度出发，该应用可以大致被解构为六个方面：

1. 布局和导航
2. 命令与行为
3. 契约(Contract)：搜索、分享及其他
4. 触控与手势
5. 屏幕定向与视图模式
6. 消息通知

于移动设备的操作系统及应用来说，判断其用户界面设计方案是否优秀的一个重要衡量标准，就是看它对于手指触控操作的友好程度。相比于桌面计算设备及相关的软件环境，触屏移动设备所具有的交互特性几乎将用户体验设计师们带入了工业设计的领域；设计方案更多是在体现着人机工学方面的原理，而不再是仅仅用来规划内容与功能的视觉呈现方式。

拇指热区与底部原则

首先，我们需要了解人们通常会以怎样的方式将手指停靠在设备上。拿手机来说，普通青年们多数会使用拇指来进行触控操作，所以触屏手机的界面交互方案基本是围绕着拇指来进行打造的。

拇指是很不可思议的，据说它是将我们与动物区分开来的重要标志之一...拇指的功能具有相当的弹性，同时也受到一定的局限。对于常规的触屏手机来说，我们可以使用拇指扫过屏幕当中的大部分区域，但其中大约只有三分之一属于真正有效的触控区域。所以在设计当中，要尽量将最重要的界面交互元素放置在这个范围当中。在右手持机的状况下，有效触控区域位于屏幕的左下方：

这也正是移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部的原因。与此相反的是，在传统的桌面设备系统环境中，导航菜单一类的界面元素通常被放在界面顶部，无论是本地软件还是网页基本都是如此。对于我们有限的拇指作用范围来说，这种传统布局方式显然不能在移动设备的用户界面当中很好的适用。

相比之下，左下角还是右下角的问题略显次要。我们在实际当中经常会更改左右手持机方式，想想看是不是这样，譬如对于右撇子来说，当他们正在写字或是需要同时使用鼠标操作桌面设备时，通常会将手机交于左手操作；而左撇子们则正相反。不过在多数时间内，使用右手持机的用户还是要相对较多一些。

底部原则可以帮助我们对界面当中的可触控元素进行更好的组织。最常用的功能按键应该被放在拇指最容易触摸到的热点区域当中，而其它相对次要或是比较敏感的控制元素则应该尽量避开这个区域。以iOS中的“编辑”按钮来说，它通常被置于界面右上方，这个位置即可以保证它清晰可见，同时又不会被很容易的触碰到，以免发生误操作。

我个人对这方面的话题是蛮关注的，偶尔在微博 上弱弱的念叨两句，也会有不少朋友来发表各自的看法，确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的，其中有些比较公允务实，有些则比较偏颇；所谓偏颇，也就是片面表达某种风格一定比某种风格更好，以及好在哪里。说真的，都有一定的道理，都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢，你到底觉得哪种好呢？我要说的是叭，在我看来这个事情里的的确确不应该存在哪个强于哪个的争议，因为它根本就不是个非黑即白非美即丑泾渭分明的问题；脱离了实际产品的上下文环境，脱离了产品功能与目标用户群类型之间的关联，所谓好与不好的命题压根就不成立。

说的具体些，远的不讲，单说Beforweb 这边的视觉风格，除了每篇文章的图标以外，可以说是彻彻底底的扁平化了(当然，细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框，这个不算数...)，但如果有人说我是扁平风格的卫道者的话，我会很不开心，因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面，最典型的包括语音备忘录、iBooks、iPad里的日历等等，它们的界面让我觉得亲切自然，让我可以在冰冷的电子设备当中找到现实生活的真实感，就这么简单。

下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒，我着实在这些东西上花掉不少钱，但如果它们的界面没有采用如此逼真的拟物化设计，如果他们只是干巴巴的功能和数据陈列或是Metro风，我是绝不会在它们身上花半毛钱的。

移动设备与传统桌面设备虽然都被成为“计算设备”，但它们之间的差异是显而易见的：移动设备的屏幕要小很多，无线网络链接方面会有不稳定，电池续航能力较弱，等等。这份“弱点”清单可以列的很长，但如果你因此认为移动设备就是降级版的计算机，那同样是错误的看法。

实际上，从其他一些角度来观察，移动设备又是比桌面设备更加强大的。智能手机和平板电脑都是更加个人化的设备，它们会一直陪伴在你身边，让你随时随地都可以接入互联网获取所需的信息；它们身上还有传统设备所不具备的很酷的功能，包括GPS、数位罗盘、加速计等等。

所有这些差异都使得移动设备当中的应用程序在界面设计方面存在很多独到之处。我(英文原文作者)基于在自己的workshop中的工作经验，总结出了移动应用界面设计的十条原则及小提示，在这里与大家分享，希望能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架。

1.设计观念

从传统设备转向移动领域，设计师们首先要做的是调整思维模式和设计观念。

• 专注 ：移动应用的本质目标是帮助人们以最高的效率完成特定的任务。少即是多，你要砍掉的产品功能通常会比你想象的多很多。
• 独特：从一开始就要理解你的应用与同类产品相比具有哪些独到之处，将其体现到产品的整体用户体验策略当中，并在交互及视觉设计流程当中着重突出这些卖点。
• 迷人 ：移动设备是相当个人化的工具，人们会在长久的使用过程中逐渐将感情融入到软硬件当中；应用程序同样要与用户在情感层面产生互动，通过各种友好的、有趣的、可信赖的设计与功能让用户觉得爱不释手。
• 体贴 ：不要将注意力过多集中在“开发”本身上，不要将自己的心智模型以及产品的业务逻辑作为设计的准绳。如果你确实希望自己的产品能够被更多用户所接受，那么必须学会站在他们的角度观察问题、制定设计决策。

不要用“多多益善”的观念打造移动应用

今年，我们(英文原文作者及团队)发布了FreshBooks 的第一款iPhone应用。从前我们的产品一直是通过Web端应用的方式提供服务的。这次，我们把iPhone应用的设计开发过程看作一张空白的花布，尽力在其中实现一些新的功能概念和设计想法。在这个过程中，我们着实学到不少东西。

不要害怕犯错

对于移动应用这样的产品，设计过程中必然会遇到很多用户体验方面的问题与挑战，尤其是对于新手来说更是如此。

无论你的线框稿在逻辑上有多缜密，UI稿在视觉上有多漂亮，当它们落实成为原型或最终产品时，总会有问题呈现出来。这并不完全是坏事；我们在设计FreshBooks的iPhone应用时甚至将犯错这件事也纳入到了流程规划当中，这就意味着：

• 坦承没有完美的设计，无论稿件和原型多么优秀。
• 真正的成功或失败都是由用户的反馈来定义的。
• 对于在设计过程中看到的问题要迅速做出反应，根据从实际用户身上得来的验证结果进行迭代。

接下来，我将向各位描述一下我们在项目中犯过的三个错误，以及我们是怎样解决这些问题的。

应用的主界面

在项目开始的时候，我们对FreshBooks的一些现有用户进行了访谈，了解他们在生活和工作中是怎样使用移动设备的，包括他们面对的实际问题，以及他们对移动应用版本的FreshBooks的期望。

根据这些访谈，我们归纳出了一些基本的设计原则，例如下面这条：

以任务为中心的用户体验

移动应用版本的产品应该围绕着一系列互不相关的帐单任务进行优化，包括时间追踪、为收据拍照存档、开票等等，这些是移动应用所处的使用场景当中最常见的任务。

而其他方面的复杂任务，包括批量编辑、权限管理、定制化等，则留给传统的Web端应用来承担，以此来保证移动版本在功能上的简约与集中。

基于这条原则，我们设计了应用的主界面。它由一系列最重要的任务组成，视觉上采用图标加文字标题的形式，点击进入相应的任务流程。例如，用户点击了其中的“创建新发票”之后会进入发票列表界面，然后创建新发票的界面会自动滑入视图。

这种以典型任务为中心的设计思路在意图上是好的，但接下来我们发现了一些问题。