《2013新浪·天气通第二届手机桌面插件设计大赛》 参赛作品

世界范围内移动设备的使用数量在与日俱增。面对在跨越多个不同设备上创建良好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风，我是绝不会在它们身上花半毛钱的。