DP

产品设计流程

David Peng

2016-02-17

文档概述

为了总结设计的成功经验,保证产品设计可持续地成功,而不是只依赖于个人的发挥,特制定此流程,以规范和指导产品部设计产品。

读者对象

此设计流程规范是产品部的内部规范,针对的对象为:

交互设计的流程

  1. 理解需求。

    首先交互设计师要理解产品的需求。这些需求是在产品需求规格书中定义好的。只有在充分理解需求之后,才能开始交互设计。不能偏离需求去做设计。

  2. 画出流程图和信息架构。

    当理解了需求之后,交互设计师应开始构思产品业务的流程和页面之间的信息架构。对于客户端类的产品,流程图是为主的。对于网站(尤其是内容类网站),信息架构师为主的。

    可以使用 Visio 画流程图,使用 Xmind/MindManager/Visio 画信息架构。应保存文件原稿和导出成 PNG 或 PDF 等通用格式。

  3. 画线框图。

    在确立了流程和信息架构后,此时可以构思产品的基本页面。以纸笔或 Axure 画线框图,容易修改,可以快速迭代想法。

    要求输出 Axure 线框图原型。可选页面之间调转的交互。

  4. A/B 测试。输出测试结论。

    在做出了线框图时,应对主要流程的关键页面做 A/B 测试,即对同一页面做出至少 2 个版本,以测试哪种设计更符合用户的偏好。如果几种设计都不符合,应重新修改设计。在此过程要求输出测试结论,格式可以是 DOCX 或 TXT。

  5. 高保真原型。

    在做完线框图的 A/B 测试之后,应根据测试结论做高保真的交互原型。此时界面要能大致达到实际开发后的效果,以测试用户在面对最终产品时的看法。UI 设计师提供 UI 素材,比如主要界面的完整设计切图、某些可复用图标的切图等。

    包含范围:主要流程上的界面。可以不包括各种错误、异常等细节界面。

  6. 用户测试。结合 UI 主要界面。

    在做完高保真原型后,要再做用户测试。此时测试的是用户对交互、UI 总体的看法。

  7. 输出交互设计文档。

    在完成所有的用户测试后,总结设计结论,撰写交互设计文档。交互设计文档要清晰、准确地描述产品的交互设计的细节。产品经理既负责需求又负责设计时,可以将设计文档和需求文档结合起来,以减少工作量。

  8. 研发内部评审。

    交互设计文档应首先在产品部内部评审,然后在项目组内评审。评审时要完整地记录评审意见,根据评审意见修改设计和文档。

  9. 外部评审(可选)。

    对于较大的版本,要在公司层面做评审。邀请项目或产品的相关利益干系人做评审,这里干系人可以是销售、市场、售后、技术支持等,依具体情况而定。

    较小的版本,不需要再公司层面做评审。

  10. 跟进 UI 设计。

    完成交互设计后,跟进 UI 设计按交互设计实现视觉。

UI 设计的流程

  1. 理解需求

    产品需求和原型是UI设计的出发点,从需求评审会议或者需求文档中得到需求的具体内容,较小的项目可从产品经理的沟通中得到需求,从中深入了解产品介绍和具体的功能细节。

    产品原型基本决定UI设计的方向,从交互到细节元素都集成在原型文件里,所以必须完全理解和掌握当前项目的产品原型才能准确的进行产品的UI设计。

  2. 定风格

    UI设计师收集相关资料分析目标用户的使用特征、场景、情感、习惯、心理、需求等。另外分析竞品的设计,每个设计师的思维都有局限性,看到别人的设计会有触类旁通的好处,一是能做出差异化的设计,二是制定超越竞品的设计目标。

    根据产品原型、用户分析和公司产品的设计指南,确定产品UI的基本风格,颜色、样式、尺寸、图标、字体等方面要有基本的草案,可以绘制一些草图和低保真的效果图。

  3. UI原型

    选择一个具有代表性的界面,设计出多种方案的效果图(两个以上),将界面的色调、风格、窗口、图标和按钮等最精确的表现出来。输出物可在不改变交互方式的基础上,基于原型进行一定的优化。出多种方案时,可以从界面布局、图标风格、细节处理等方面做一些差异化的方案。

  4. A/B测试

    将UI原型提交相关人员进行A/B测试,针对视觉方面提出意见,总结优缺点,通过多次修改讨论确定最终可行的方案。

  5. 设计UI主要界面和用户测试

    设计出主要的界面效果图(产品原型中的所有界面),按原型中页面顺序命名,确保效果图的查看顺序和原型一致。然后效果图结合原型文件进行用户测试,确定原型和界面设计的可行性。

  6. 设计文档

    在设计界面效果图后,输出设计文档,对设计进行说明,针对一些设计亮点可做重点介绍,要求图文并茂。设计文档可用于评审会、产品发布会、wiki知识分享等。

  7. 内部评审

    UI效果图完成后提交进行研发内部评审,参会人员包括产品线总监、产品经理、UI设计师和开发人员和测试人员等。评审视觉效果和开发的可实现性,评审成果须是各方达成一致意见,提出合理的修改和优化建议。评审结束后,UI设计师应根据收集的意见修改优化效果图。

  8. 外部评审

    UI效果图提交给市场、销售或人力资源等部门人员进行外部评审,以用户视角评审UI效果图,并给出体验报告。筛选有价值的意见对UI效果图进行修改优化,输出最终版UI效果图。

  9. 切图及标注

    切图前要和开发人员沟通,可能对切图有一些特殊的图片资源要求。切图注意事项:按钮应提供4-5中状态(PC: normal, hot, focused, pushed, disable. APP: normal, pressed, disable. TV: normal, focused, pressed, disable);切图按模块放入对应文件夹方便开发人员查找(例如:toolbar, navbar等),mac和app切图应提供适配各分辨率的切图(android: xxhdpi, xhdpi. Ios&mac: @3x, @2x, @1x)。

    标注文件力求各元素均有尺寸和坐标标注,文字有字号、样式和颜色标注。部分按钮可以用颜色值的,要标注各种状态时的颜色值。

  10. 后期跟进

    开发过程中及时跟进,切图和标注需要调整的应及时完成,开发效果和效果图有偏差的应及时反馈。Demo测试时,列出所有开发效果和效果图偏差的地方,反馈给开发人员。

其他

所有的输出格式要求保存在位于 SVN 的项目文件夹中,以免文件遗失,也方便团队之间分享文件。

©2020 David Peng ♥ 采用 Pandoc 搭建