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

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

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

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

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

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

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

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

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

Teamcola信息结构早期讨论稿

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

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

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

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

页面路径图讨论稿

整理后的页面路径图

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

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

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

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

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

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

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

最后,欢迎体验我们这番设计的最终成果——最好用的团队日志管理工具——TeamCola!  同时欢迎关注@TeamCola与@彩程设计 以获得我们的最新动态。:)

来源:http://blog.mycolorway.com/2011/12/30/teamcola-pre-design/

时间: 2024-10-25 22:40:50

通过TeamCola浅谈互联网产品前期设计方法的相关文章

TeamCola信息结构:互联网产品前期设计方法

文章描述:通过TeamCola浅谈互联网产品前期设计方法. 当下大大小小层出不穷的互联网产品如同一场令人眼花缭乱的星球大战,普通用户会被死星.联盟战舰和绝地武士们手中的光剑所吸引,而设计师们则会去关注这些庞大或精巧的武器如何被制造出来. 是的,随着以用户为中心的设计(UCD)和用户体验设计(UED)概念的深入人心,互联网产品设计的方法和流程已被重新定义而且大同小异,即便是刚入门的麻瓜也能一本正经地告诉你一个正确的产品设计流程需要经过低保真原型.视觉设计.交互设计.高保真设计--等阶段. 彩程设计

浅谈互联网产品的情感化设计

相信关注情感化设计话题的人大部分都看过诺曼的<情感化设计>一书,但诺曼谈得太宏观.太概念化了.我想谈谈对互联网产品情感化设计的理解及操作方法. 我理解的互联网产品情感化设计就是产品不单要实用.易用还要让用户感到愉快.当用户使用这个产品不单完成了任务(某种需求),还用得很愉快时,他不单自己会对产品产生良好的印象,还会把这种感受告诉朋友,我认为这就是情感化设计达到的效果. 对情感化设计的分析,诺曼提出一个重要观点"本能水平的设计--外形,行为水平的设计--使用的乐趣和效率,反思水平的设计

浅谈手机软件测试用例设计方法

手机产品和用户交互非常紧密,手机的软件质量就显得尤其重要.要使最终用户对手机软件感到满意,必须要在手机软件发布之前进行充分的测试.而不完全.不彻底是软件测试的致命缺陷,但是我们又不可能进行穷举测试,任何程序只能进行少量而有限的测试.为了节省时间和资源,提高测试效率,我们必须要从数量极大的可用测试数据中精心挑选出具有代表性或者特殊性的测试数据进行测试.测试用例在此情况下产生.测试用例是为特定的目的而设计的一组测试输入.执行条件和预期的结果.简单地说,测试用例就是设计一个场景,使软件程序在这种场景下

以新浪网为例谈互联网产品之间的打通问题

      我们谈互联网产品之间"打通"这个话题.照例,为了说明道理,我们会拿别人网站的案例来解释.       先看案例:新浪网的新闻.UC聊天.微博之间.       在访问新浪新闻时候,右下角会有一个浮动窗的标题栏.说要不要跟一起看这个页面的人聊聊.       点开之后发现是新浪UC聊天室.我于是可以说话了.还被提示可以跟某人私聊.(其实这里解决了很大的"用户互动"的问题,这次不表.)          我的问题出现了,我在这写,跟新闻评论有什么关系吗?写了

浅谈互联网金融:互联网系的盛宴还是银行系的自我救赎?

中介交易 SEO诊断 淘宝客 云主机 技术大厅 本不想谈及互联网金融,因为这会触及我的旧伤(注1),但形势逼人,尽管我不想,却不得不谈.从2013到现在,互联网金融已经成为金融行业不得不谈的一个话题.我不说互联网金融是未来的趋势,但其来势汹涌,特别是阿里腾讯的互联网金融大战之后,许多金融机构都已坐不住,纷纷快速加入到互联网金融这个战争中来.自此便产生了互联网金融领域的互联网系与银行系! 在谈及互联网金融之前,我们先了解一下什么是互联网金融.从字面上来讲,就是互联网(包括移动互联网)与金融相结合的

浅谈关于JavaScript API设计的一些建议和准则

  这篇文章主要介绍了浅谈关于JavaScript API设计的一些建议和准则,文中列举了许多知名的JS API进行辅助说明,极力推荐!需要的朋友可以参考下 设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的API设计,也是一样的.但是API设计常常很少关注软件发展,因为为其他程序员写代码的重要性要次于应用UI设计和最终用户体验. 但是API设计,作为

浅谈fastjson的常用使用方法_java

如下所示: package Demo; import java.util.ArrayList; import java.util.Collection; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Vector; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; imp

浅谈JS中的bind方法与函数柯里化_javascript技巧

绑定函数bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定. 关于这个特性看<JS权威指南>原文的例子: var sum = function(x,y) { return x + y }; var succ = sum.bind(null, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

浅谈c++中的输入输出方法_C 语言

cin:  当碰到空格或换行符'\n'时,输入结束: char a[10],b[10]; cout<<"Enter some input:\n"; cin>>a>>b; cout<<a<<b<<"End\n"; 输出结果为: Enter some input: 12 34 56 1234END cin.getline: 当碰到换行符'\n'或达到所能接受的最大字符数时,输入结束: char a[