品味移动设计——1.3　用户体验设计的基本流程

对于传统的设计师（包括用户界面设计师和交互设计师）来说，移动应用的用户体验设计是一个全新的设计领域，你在其他形式的图形设计中积累的经验很难应用到移动设备界面上。也就是说，即使你在网页设计上拥有丰富的经验，对于移动应用的界面设计来说也只能算处于入门阶段。 现在，我们就通过移动应用用户体验设计的工作流程，了解一下这门学科所涉及的知识领域和经验要求。这对移动应用设计的初学者也极有帮助，可以更加明确、系统地规划自己的知识体系，积累一定的经验和素材。 1.3.1　创意和原型草图阶段 这部分工作主要是对设计进行前期铺垫，以及对应用的概念和功能进行规划和设想。 1. 市场调查 在开始设计之前，我们必须了解很多事情。首先要确定你的创意还没有人做过，如果你发现已经有类似的应用（这当然很难免），那你需要比它做得更好，而且具有更多独特的优化设计。最好的调查方式是到各大平台的移动商店上搜索已有的应用程序。iOS 应用一律在iTunes Store 上搜索（如图1-7 所示）；Android 平台由于其开放性，造成了网络上出现各种五花八门的应用商店，我推荐大家还是在官方的Google Play（如图1-10 所示）里搜索，因为它的内容比较全面，分类也比较系统；Windows Phone的应用可以在Windows Phone 官网的Apps+Games 里搜索（如图1-13 所示）。 图1-13 Windows Phone 官网的Apps+Games 2. 应用的定位 我们还需要对自己的想法有个明确的定位，这对后续的设计工作很重要，它决定了整个应用的设计要点。图1-14 是iOS 平台的《人机界面指南》中归纳的应用设计的定位方法，它把应用归结为5 个设计方向，距离图中坐标原点越远的应用，特点越明显，越能够与其他竞争者明显区分开来；而距离原点越近的应用越兼顾其他性质和功能，比较实用和全面。 图1-14 iOS 平台的《人机界面指南》中归纳的应用设计的定位方法 我们通常推荐大家在定位时尽量有所偏重，也就是距离中心坐标较远，这样的应用比较容易做出自己的个性而吸引用户，具体的描述可以参看第2 章的内容。 3. 用户分析 这里主要通过对应用的用户及用户群体的分析和了解来确定应用的核心功能。这一步对于整个应用的用户体验设计来说是极端重要的。在应用设计的前期阶段，最容易出现的就是对功能取舍的争论，团队里的每一个成员都会提出各种功能需求设想，也很容易陷入到某一个具体功能中去。我们通常推荐大家借助“头脑风暴”的方式来解决，具体可参看第2 章和第3 章的内容。 4. 绘制原型草图 并不是所有的问题考虑清楚后，我们就可以打开电脑进行图形界面设计甚至编码了。在进入具体设计之前，需要先在纸上勾划出应用的原型草图，示例图如图1-15 所示。目的是通过铅笔在纸上把应用的功能点、操作流程、界面布局以及交互元素进行一次实际的演习。去除多余或不合理的因素，加强应用的核心功能。 图1-15　手绘原型草图 1.3.2　原型的中保真阶段 中保真原型就是在电脑上进行应用的图形界面设计，而不需要过多的细节修饰，只是把你纸面上的草图数字化，以便于在电脑上不断改进和补充。　　 1. 选择布局和导航方式　　 在把应用设计从纸面上移动到电脑软件的过程中，我们需要对几个重要的环节进行细化，第一个就是选择好界面的布局以及合理的导航方式，这直接影响到应用在使用和操作过程中页面跳转的清晰、流畅和调理性。我们将在第5 章里详细介绍三大平台处理相关问题的思路和规范。　　 2. 设置控件和界面元素　　 界面的布局得当后，就要对界面上的细节元素进行细致的设计、排版和调整了，这个过程对设计师的图形把握能力和构图能力要求比较高，它可不是简单地把这些元素拼凑在界面上就完成了，而是要考虑很多的相关问题。包括上一步的导航和布局在内，我们都要对应用的交互方式、人体工程学以及视觉的整体协调感进行反复的调整。　　 3. 可用性测试　　 这是移动应用的用户体验设计中非常重要的步骤。将设计好的应用原型输入移动设备的相册里，或者使用软件制作成可进行简单页面间跳转的动画。寻找一些团队以外的人员尝试着使用一下，观察他们的使用情况并进行记录和分析。以此来测试应用布局、导航和控件位置的合理性和操作的体验感。示例图如图1-16 所示。　　 图1-16　应用的可用性测试　　 1.3.3　高保真原型及设计的完成阶段　　 虽然我们得到了一个比较完善的设计结果，但是中保真原型依然是一个中间状态，它不美观、没个性，无法吸引用户来尝试和使用，因此我们需要进一步的创意和修饰。　 1. 个性化设计　　 我相信这是大部分设计师最喜欢的步骤，我们在中保真原型的基础上对应用的界面进行色彩、图形细节、字体和特效上的修饰和创意。发挥你天才般的想象力，充分展现应用的个性和魅力，使用户一打开应用，就会爱不释手。在第7 章里，我们会由浅入深地和大家一起探索应用界面个性化设计的思路和方法。　　 2. 图标设计　　 这是最后也是画龙点睛的环节，发挥你超长的造型能力和软件技巧，为你的应用设计一幅既迷人、又有视觉冲击力的面孔。让它无论在移动桌面上还是在应用商店的货架上，都能够吸引用户的眼球。同时，我们也不能忽视应用界面上工具栏图标的设计。　　 3. 交付开发人员　　 最后，我们把高保真的个性化设计结果细致地分类，保存成相应的图形或动画文件，连同完整的界面设计效果图一起分别打包、保存好，做上清楚的标注，发送给开发人员。在这个过程中，你可能还要与开发人员进行沟通，还需要单独保存或分割某些图形。　　 以上就是移动应用用户体验设计的全部过程。在整个过程中，还有许多细节并没有阐述，比如讨论、修改和测试的过程。当然，在之后的章节中，我们将更加系统详尽地进行描述。同时，有些步骤并不是一次完成的。在设计和实践的过程中，经常会把设计推翻或反复一个甚至几个步骤。而且对原型的可用性测试，我们推荐大家在每个环节完成后都应该简单地进行一次，这样可以少走弯路。因此，以上这个流程只是作为大家在设计过程的一个参考和依据。　　同时，我们推荐大家在进行设计之前，无论针对的是哪个移动平台，都应该详细阅读相应平台的《人机界面指南》，千万不要认为这只是给初学的菜鸟看的“使用说明书”，它对你设计的规范化和合理性都会有极大的帮助。关于三大平台的《人机界面指南》，可以在它们的官网上找到中文版。 到这里，我们把移动应用用户体验设计的概念、移动应用的特点、三大移动平台以及相关的设计流程向大家进行了比较详细的描述。现在可以开始我们的设计了，你做好准备了吗？