通过TeamCola浅谈互联网产品前期设计方法

当下大大小小层出不穷的互联网产品如同一场令人眼花缭乱的星球大战，普通用户会被死星、联盟战舰和绝地武士们手中的光剑所吸引，而设计师们则会去关注这些庞大或精巧的武器如何被制造出来。

是的，随着以用户为中心的设计（UCD）和用户体验设计（UED）概念的深入人心，互联网产品设计的方法和流程已被重新定义而且大同小异，即便是刚入门的麻瓜也能一本正经地告诉你一个正确的产品设计流程需要经过低保真原型、视觉设计、交互设计、高保真设计……等阶段。

 

彩程设计用户体验设计流程

产品经理不是巫师，拿脑袋当水晶球拍拍，就能精确地规划出每个界面和界面上的控件，而是通过一定的方法和工具，把逻辑思维逐步收缩，并落实纸面。低保真原型通常并非一个设计真正的起点，就好像一个完整而令人激动的星球大战故事还会有它的前传 。

是我们针对小团队开发的一款团队日志产品，通过让团队内部工作透明从而方便管理、增进信任和提高效率。想通过这款产品，来谈谈我们设计前期所使用的一些工具和方法。

软件设计，以人为本。产品设计前，对产品本身的典型使用人群需要个大致定位，如果不太明确，建议提前进行一些调研、走访并制作一份角色分析表，共同 讨论和分析是什么类型的用户，会出于什么动机，在什么场景下，使用到软件的什么功能。关于用户研究，有很多成熟的理论与方法，不在此赘述。

产品的雏形或者说全貌，通常会先出现产品经理的脑海中，如果这个产品经理就是个单干户，那么他马上就可以做设计写代码或者同时搞了 ，但更多的情况是 产品经理是团队的一员，需要跟团队的成员沟通，告诉他们自己想做的是个什么东西。当然，某些既不是普通产品又不是文艺产品经理的产品经理不在讨论之列。

在彩程，产品经理需要通过一张图来向团队成员来阐述这个产品的内在逻辑，用什么方式或软件来绘制不重要。这张图可以是纸面的草图，也可以经过精心的绘制，这样的图，我们称之为信息结构图。

Teamcola信息结构早期讨论稿

一个普通用户眼中的TeamCola 信息结构

一个产品经理眼中的TeamCola信息结构

在这个阶段，产品经理着重需要考虑的是系统的核心功能和信息流向。这样一张信息结构图，对于信息逻辑的梳理非常有帮助，也方便向团队其他成员展示和阐述。

接下来，产品经理会开始绘制页面路径图和角色任务图，页面路径图会大致规划产品大概会有哪些页面，相互间的链接关系如何。然后将典型 角色的典型任务列出，看看完成这些任务需要经过多少个网页，路径是否过长，是否有走不通的断头路等情况。

页面路径图讨论稿

整理后的页面路径图

典型角色在Teamcola中可能会面临的典型任务

有了这些前期成果，就可以开始正式的低保真原型设计了，在做每个具体页面信息架构的时候，可以根据内容的多寡和重要性进行某些页面的合并或拆分。至 于 形式，可以是手绘，也可以用Axure之类的软件来完成。一般说来手稿在绘制的时候效率更高，成本更低，摊在桌上很文青，贴在墙上很大师；html的版 本则更方便在电脑上展示和远程传输，在展现一些动态的交互细节与不同页面间的跳转关系上更为方便。

在前期设计的辅助下开始基于页面信息架构的低保真原型设计

有些页面上有相互调用的模块，我们会做成小的卡片来方便讨论时的排列组合

把低保真设计原型贴在墙上方便集体讨论和查阅

低保真原型后面的故事，相信大家都知道啦 ～就是视觉设计、交互设计、前端开发、后端开发之类的一通猛干，把这些纸上的想法变成现实。：）

Mm⋯⋯我知道我们团队今年夏天干了什么