品味移动设计——1.1　成为用户体验设计师

我们要做的，不是传统的设计；我们面对的，不是平常的用户；我们想要成为的，也不是普通的设计师。很多人询问过我：我想设计一个移动应用，应该怎样入手？用什么软件？看些什么资料？……面对这些问题，我确实有些犯难。并不是我没法回答他们，而是这些问题反映出他们对移动应用设计实在是一无所知。我们要清楚，为移动平台设计应用程序，绝不是心血来潮、想做就做的事情。如果仅仅是为了填补一下自己的设计业务领域的空白，或是满足一下自己“IT 时代”的时尚情怀，那还是省省吧。 真正地面对一个成熟的应用设想或一个实实在在的项目时，我们需要考虑的绝不是上述的这些问题。你的应用将要在什么平台上运行？在什么设备上安装？面对什么样的用户群体？这个应用到底能给你带来什么？……我们所面对的工作，绝不仅仅是针对视觉和感官上的设计，而是移动应用的用户体验设计。想要得到完美的设计结果，也绝不是普通的设计师能够做到的，我们将要成为的是一名用户体验设计师。 你做好准备了吗？ 1.1　成为用户体验设计师 每当我们打开手机或平板电脑，看着一款款精美时尚、高效实用的应用产品的时候，心里不免会感慨：这要是我的作品该多好啊！然而，每个精彩的移动应用背后，都需要完成大量的工作，经历烦琐的步骤，耗费相当多的时间和精力。单靠一个人的工作几乎不可能，大部分情况下都是一个甚至多个团队的合作。在本节中，我们系统介绍一下用户体验设计的工作。 1.1.1　UI、ID、UE和GUI，这些都是什么 在网页和应用设计领域中，我们经常会听到人们用这些英文缩写描述设计工作，那么它们各自代表什么含义？具体的工作、方向和区别是什么呢？ 下面让我们先来看看它们的英文全称和基本概念。 •• UI（User Interface）。用户界面设计，是指对应用软件的操作逻辑、人机交互、界面的整体设计。从20 世纪80 年代起，用户界面设计成为了计算机科学的正式学科。在设计理念上，UI 设计不仅是让软件变得有个性、有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。 •• ID（Interaction Design）。交互设计，又称互动设计，它考虑的是人、环境与设备的关系和行为，以及传达这种行为的元素的设计。这个解释有点难懂。简单地说，我们进行交互设计，就是为了让产品更易用、有效，让人使用产品时感到舒适。同时，它需要了解用户和他们的期望，了解用户在同产品交互时彼此的行为，以及“人”本身的心理和行为特点。交互设计还涉及人体工程学、心理学、生物学等多个学科，以及与多领域人员的沟通。 •• UE（User Experience）。用户体验设计，它要求设计师能够全面地分析和体察用户在使用某个系统时的感受。他的工作从开发的最早期开始，并贯穿始终。目的是保证用户对产品的体验有正确的预估，了解用户的真实期望和目的，并对功能核心设计进行修正，保证功能核心同人机界面之间的协调工作。 •• GUI（Graphical User Interface）。图形用户界面设计，是指针对采用图形方式显示的操作环境用户接口进行设计。其实就是界面美工，只关心界面的美观和有关视觉方面的设计工作。 从上面各项设计工作的概念来看，UI 的概念比较广，包含了软硬件设计，也囊括其他各项设计的部分内涵。而GUI 设计比UI 设计稍窄。目前，国内大部分UI 设计师其实做的是GUI，他们大多出自美术院校。简单地讲，ID 设计只是指人和电脑之间的互动过程，目前一般是软件工程师在做。而UE 设计从简单理解上，关注的是用户的行为习惯和心理感受，就是琢磨人会怎么用软件或者硬件才觉得得心应手。但是，有关用户体验这一课题的确切定义、框架及其要素还在不断发展和革新。 下面我们通过一则国外的UE 设计师招聘要求，看看现在的用户体验设计师需要处理的工作内容（如图1-1 所示）。 面对这份招聘启事，我和大家有同感，它的业务跨度相当大，条件也近乎于苛刻，不是吗？我们不但要了解编程工作，还要善于图形设计；不但要有组织和测试能力，还要善于沟通；不但要掌握各种图像软件，还得是个绘画、制图的高手。看来，想要成为真正的用户体验设计师比想象得要难一些。但是我们仔细分析一下，不难得出一个结论，未来的用户体验设计师就是要具备界面设计、交互设计、图形美术设计及以用户为中心的原型和体验设计于一身的全能型设计人才。这也是我们为本书选题的原因，我们的目标就是要从零开始伴随大家逐步成为用户体验设计师。 图1-1 UE 设计师招聘要求 1.1.2　了解成功的用户体验设计案例无论你是否真的做好准备成为一名用户体验设计师，现在我们都需要先放松一下，深吸一口气，用心地观摩几款成功的移动应用用户体验设计案例。这对于我们加深对这门学科的认识，提高我们研究它的兴趣，以及对它设计理念的深入理解都是非常有帮助的。 下面我们先为大家介绍iOS 平台的Passbook，如图1-2 所示。 自从iOS 6 一发布，Passbook 就以它独特的支付功能和超凡的用户体验设计博得了大众的眼球。它是苹果公司于2012 年6 月12 日在全球开发者大会（WWDC）上宣布的，并在iOS 6 系统上提供操作的一个全新应用。这是一款可以存放优惠券、会员卡和电影票的移动应用。它整合了来自各类服务的票据，包括电影票、登机牌、积分卡和礼品卡等。这些票据将被显示在锁屏屏幕上，当用户走到相关商店或场所附近时，通过定位功能，对应的票据将会自动显示。在这个大多数印刷品都开始数码化的年代，使用电子优惠券或电子机票其实是很平常的事。 图1-2 iOS 平台的Passbook Passbook 的另一个独特功能在于，它能够自动显示附近商家的会员卡和优惠券等信息。例如，当你经过必胜客时，Passbook 就会弹出一条信息，提醒你必胜客就在附近，你可以使用相关的必胜客优惠券和礼券等。此外，它还支持各种信息的实时更新，如果登机牌上的航班出现延迟，它会自动通知你。如果你不想使用Passbook 管理某一种电子票券，那么也可以随心所欲地将这些电子票券从Passbook里“销毁”。 我们为大家介绍的第二款应用是著名的微博服务应用——Android 版的 Twitter，如图1-3 所示。Twitter 作为著名的社交网络及微博客服务网站，从2006 年创建起就已经家喻户晓。它允许用户将自己的最新动态和想法以推文的形式发送给手机和个性化网站群。由于Twitter 最初计划就是在手机上使用的，并且与短信的形式比较接近，因此，所有的Twitter 消息都被限制在140 个字符之内，每一条消息都可以作为一条SMS 短消息发送。这也是Twitter 的一个迷人之处。 图1-3 Android 平台的Twitter 2011 年12 月，Twitter 对页面进行重新设计，目的是让用户能够更加轻松地查找Twitter 信息和流行话题。用户使用新版Twitter 提供的新型工具，可以更轻松地浏览视频、图片、被转发的Twitter 信息以及其他内容。用户还可以查看自己关注的人和被关注粉丝的数量，以及自己所发布的Twitter 信息被转发的情况，并查看根据自己兴趣或所在地理位置的Twitter 信息排列结果等。此外，新版Twitter 还允许所有用户查看Twitter 品牌页面。 在图1-3 里，我们分别可以看到Twitter 在Android 平台上的手机和平板电脑的用户界面设计，其布局合理、色彩大气、字体清晰、操作流畅，是一款非常优秀的用户体验设计案例。 最后为大家介绍的是著名的美国彩色对开日报《今日美国》在Windows Phone 平台上的移动用户端，如图1-4 所示。 图1-4 Windows Phone 平台上的《今日美国》 《今日美国》于1982 年9 月创刊，至今为止一直保持着彩色版面、消息集中、多用图表、重视体育报道、便于读者迅速获得所需信息等特点而吸引着读者。进入移动互联网时代的今天，《今日美国》仍然保持着各方面的领先优势。归纳起来，作为全新的移动数码报纸，《今日美国》主要有4 大特点。 •• 涵盖面广。专门开辟了“ 美国各地”和“世界新闻摘要”专栏，便于读者从这一份报纸上了解美国各地及世界上的重大新闻。 •• 动态天气。仿效电视气象预报形式，首创了用彩色气象图表报道美国50 个州、100 多个主要城市3 天天气的趋势。 •• 界面美观。独创了使用生动的图片和图表为主的新闻报道，图文并茂，形式美观，提高了读者的读报欲望和兴趣。 •• 文字精炼。它注重使用简洁明快的报道文体，偏爱使用短句、短字来浓缩文章，有时，一两句话就构成了一条新闻，这样就充分节省了篇幅，便于登载尽可能多的信息，以突出其综合性大报的特点。 在图1-4 中，我们可以分别欣赏到《今日美国》在Windows Phone 平台上的手机和平板电脑移动用户端上的界面设计。它把Windows Phone 平台矩形磁贴的界面元素，以及水平移动的布局观念和扁平化设计风格运用得出神入化。这是一款精彩的、带有浓郁的Windows Phone 平台味道的用户体验设计。 上面我们向大家分别介绍了三大移动平台上风格各异的三款经典的应用设计，目的是让大家对移动应用、用户界面以及用户体验设计有一个比较直观的认知和了解，那么作为本书的主线，移动应用的三大平台到底是怎样被创建形成的，它们的特点和区别又是什么呢？