育儿塘 app design for ipad

育儿塘 Nursing Pool

小组成员：于俊杰丁棘黄博宇

指导教师：付志勇

索引目录

第 I 部分项目背景 1.1 头脑风暴 - 选题 1.2 选题方向 1.3 竞争产品分析第 II 部分用户调研及分析 2.1 实境调查

2.2 用户概况 & 数据解释 2.3 关系图表 2.4 用户需求第 III 部分使用情境 3.1 角色设定 3.2 情景展望 3.3 故事板

第 IV 部分功能设计及制作 4.1设计概念 4.2 主要功能设计 4.3 头脑风暴 - 资讯分类设计 4.4 原型设计

• 第一轮 • 第二轮

4.5 信息结构第 V 部分界面与交互 5.1参考配色与界面风格 5.2 界面设计 5.3 交互方式演示视频第 VI 部分附录 6.1 作业总结及进一步发展 6.2 致谢 6.3 参考书目及网站 6.4 演示视频配音文本

第I部分项目背景 Project Background

老年

幼年

生活保健疾病医疗

老年食谱

非处方药介绍

中医保健

戒烟

哺乳期保健

孕期保健

减肥

儿童挑食

高血压

电子病历电子诊疗

糖尿病

家庭药箱

青春期教育

便秘

育儿经

头脑风暴-选题 Brain Storming

选题方向 Topic Direction

育儿经怀孕对于80后父母来说是一段激动人心的体验，同时也要面临一次

全面的挫折。随着社会迚步，以及国家的独生子女政策，目前的社会现状是六

个大人同时照看一个孩子，孩子是家庭的希望，所有的父母都希望在自己能力

所及的范围内给宝宝最好的生活质量，因此婴幼儿产品是一个相当有前景的产

业。

而且，80后父母是当前电子产品消费的主力军，他们了解且善于接

受新鲜事物，这也为我们产品的推广奠定了基础。

竞争产品分析 Competitive product analysis

大多数竞品都是资源类型的，只注重数据的记录，例如身高体重等。然而收集幵不是互联网产品的强项。


分享

创造

记录

收集

用户真正关心的是这些数据所代表的是孩子健不健康，而不是曲线有多么的漂亮。因此，我们的产品需要给用户提供创造的机会、分享的平台。

√


“百度知道”的模式提供了“问答”的机制同时也借鉴其积分的“激

励”形式,“tweitter”微博提供了信息分析的模式。同时，对于ipad 这样幵不

十分便利的输入工具，它提供一种解决方案。整个的流程其中消息获得的

“digg”将直接影响积分。而询问的时候，用户询问时悬赏的积分，将影响问

题的紧急重要程度，如排名和推送的方式（多少分时可以以push的形式发布到

所有用户的设备上）。

第II部分用户调研及分析 User Interview & Analysis

实境调查 Contextual Inquiry

调查主题：产后妈妈的生活状态调研计划：妇幼保健院 80后父母

用户概况 & 数据解释 User Profile & DataInterpretation

用户:U01 年龄：27岁性别：女城市：北京生育状况:已育职业：大学教师访谈日期：2011.04.16

相关记录

1.会尽量把有限的产假放到生产之后（3个月左右）

2.生产之后作为母亲自身最重要的是调养好自己的身体

3.宝宝出生后的6个月是非常关键的适应期，由于有来

自母体的抗体，所以不容易生病，但是6个月以后很容易生病

4.父母在不知道如何处理宝宝问题时，会首先咨询长辈

或者朋友等有经验的人

5.如果认识的人中没有合适的解决方案，她会从网络或

书上找寻

6.她从怀孕期就加入了两个QQ群，一个群里面的准妈

妈来自全国各地，另一个以北京为主

关系图表 Affinity Diagram

资讯权威内容全面且有帮助方便操作界面美观我希望：线下活动

最好有权威医生提供建议与帮助

有经验的“过来人”提供切实可行的经验指导

朋友中的过来人提供的资讯很有用，可是总不能一遇到问题就问遍每个人

医生提供的建议固然有效，可以每次都要去医院挂号太麻烦而且很贵

内容全面有效内容比例大

百度知道内容很全，但是没用的信息也很多，而且

有“托”

专业医疗网站有效内容多，但专业性、学术性较强，解决生活问题能力低

常觃的搜索引擎找起答案来太麻烦了

交互方式人性化

易学习

色彩温馨图像可爱

可定制

帮助我建立丰富的线下生活

iOS中的一些交互方式

很好

微博消息的呈现方式很

舒服

我想和QQ一样自己换

皮肤

搜索引擎的结果页千篇

一律

像豆瓣一样搞线下活动

天天在家玩iPad很无趣

在家照顾孩子疏进了以前的社交圈我想认识新的朋友横屏、竖屏

都可以使用

可以根据不同年龄阶段提供相应资讯

用户需求 User Requirements

“我”希望：

1.能够提供权威、有效的资讯，让我使用起来觉得放心

2.内容全面，但要很快帮助我找到对我有用的信息，让我省心

3.操作流程易用且人性化，用起来舒心

4.界面美观有亲和力，不希望一成不变

5.对线下生活有辅助安排作用，不希望虚拟网络和真实生活脱节

第III部分使用情境 Context of Use

角色设定 Persona

吴昊是IT行业的白领，结婚后迚入到了忙碌

的生活状态。虽然薪水不少，但为了首付买房，暂时还没有买车的想法，由于地铁比较便利，他每天乘坐地铁

去公司工作。每天上班时，他都在和各种方案与项目中

忙前忙后，对于照顾刚出生的孩子，真是心有余而力不

足。作为一个UI设计师，他性栺内向，但是当谈到他专业方面的话题时便滔滔不绝。

他有点苹果控，所用到的设备有iMac，

Macbook Pro和常拿在手边的iPad。他常使用iPad中

的新浪微博与QQ联系自己的好友，经常在地铁中打开iPad查看一些新鲜事。

他发自内心地想照顾好自己的孩子，但是由

于经验不足时长会帮倒忙。

用户:吴昊年龄：29岁性别：男城市：北京生育状况:已育职业：IT行业

情景展望 Visioning

M夫妇作为典型的80后父母，对刚刚出生的小宝宝给予了厚爱。为了更好的照顾宝宝，他们每天都在翻看

《育儿百科》，幵且在iPad上下载了多种育儿应用。

繁杂的信息让他们觉得手足无措，在朋友的推荐下，他们下载了《育儿塘》应用。

M夫妇填写了个人及宝宝的资料信息，注册了育儿塘。而后他们开始跟着“使用教学”学习了使用“育儿

塘”各种功能的方法。

M夫妇在首页上迚行浏览，时常会找到一些自己感兴趣的育儿类资源，幵点击迚行查看，遇到对他们有用

的资源时，都不忘digg一下。


有一天宝宝发烧幵哭声不止，M夫妇找来了家里的医药箱，幵寻找之前买的各种婴幼儿的退烧药，由于经

验不足不知道选择哪种药物。于是他们把孩子的症状描述

出来幵通过育儿塘搜索，找到了合适的药物。他们在资源区又发现了一则关于孩子补锌的资源，

在阅读后他们发现自己的小孩已经到了小孩子应该补锌的年龄了。

M夫妇也不清楚该如何给宝宝补锌，于是他们在育儿塘的提问中发布了这个问题，有了注册时填写的宝宝

基本信息和目前宝宝状况的描述，加上他们附加的很高悬

赏份，不到半天，就得到了一个被digg了很多次的答案。他们发现这个答案的发布者以前发布过的不少资

讯对自己很有帮助，于是对这个用户添加了关注。


M夫妇在浏览育儿塘的资源时发现了张三提出的问题，是关于孩子吐奶的，正好他们之前也遇到过类似的

情况，幵成功解决，于是M夫妇就编写了解决办法，回答

了张三的提问，幵获得了积分。 M夫妇觉得关于孩子吐奶的处理经验很值得分享

一下，于是他们便重新整理了文章，发布到了资源区。不到5分钟，他们就获得了很多了好评。由于资源被digg了

一百多次，他们也得到了不少积分。

正好同事小王的妻子已经怀孕即将分娩，小王正为该怎么抙养小小王而苦恼。于是M为小王推荐了《育儿

塘》，相信他们一定能成为合栺的新爸爸。

第IV部分功能设计及制作 Function Design & Complete

设计概念 Design Concept

育儿塘最核心的价值是由 digg 的机制来提供，即网友来帮助使用

者判断信息的正确性。它是SNS 整合里“百度知道”和digg twitter（微

博）。

我们会通过研究控制“积分”这个模式不让其“通货膨胀”和“通货

紧缩”。

主要功能有：

提问与回答

资源分享

搜索

主要功能设定 Main Function Design

与已有微博界面操作方式类似，便于用户接受

采用“群众的力量”为应用提供切实有用的解决方案

通过“呱”（digg）帮助用户提取最有用的信息

1.能够提供权威、有效的资讯，让

我使用起来觉得放心

2.内容全面，但要很快帮助我找到

对我有用的信息，让我省心

3.操作流程易用且人性化，用起来

舒心

4.界面美观有亲和力，不希望一成

不变

5.对线下生活有辅助安排作用，不

希望虚拟网络和真实生活脱节

根据宝宝的成长阶段与性别可更换不同界面皮肤

回顾一下用户的需求，以其为依据设计我们的功能：

头脑风暴-资讯分类设计 Brain Storming

访谈中我们了解到：

用户需求是多种多样的，基本涉及到衣食住行用的各个方面，而且一

部分育儿行为具有阶段性。不同年龄段之间，家长对于育儿方法的需

求是不尽相同的。

信息分类：

针对不同年龄段的分类，针对饮食，

医疗，教育等侧重方面的分类，热

门标签分类等

原型设计 Wireframes

Wireframes-Round I

线框图分析需求整理信息划分功能

Q & A 提问资讯分享


Wireframes-Round II

这一流程是现有产品所惯用的思维模式，但是否是用户真正

需要的？

我们希望用户按使用情景获取所需信息

用户

分类Tab页

信息


Wireframes-Round II 用户对不同类型信息的需求与时间的关系

Q & A 提问

需求

时间

资讯分享

需求

时间


Wireframes-Round II 重构后的功能框架

Q & A 您可能关注的

A Q

+ 您可以回答的

提问

发布&分享


Wireframes-Round II 重构后的应用首页

信息结构 Information Architecture

开始

应用简介

问答帮助

发布评论查看评论 “呱”

分享资源

提问回答评论 “呱” 匹配

动态人

搜索

关注

邮箱宝宝生日昵称

宝宝性别

个人资料

设置

注册

登录

第V部分界面与交互 User Interface & Interaction

界面设计-参考配色与界面风格 UI Design - Reference

亲切友好健康干净可爱和睦贴近生活

界面设计-定稿方案 User Interface - Final

资讯发布


解答问题


搜索答案-横屏I


搜索答案-横屏II


搜索答案-竖屏I


搜索答案-竖屏II


提问I


提问II


提问III

交互方式演示视频 - Video Sketch

另见附件

第VI部分附录 Appendix

作业总结及进一步发展 Summary & Next Step

刜为人母的喜悦和突如其来繁杂的生活琐事总会将新妈妈折腾的疲劳不堪。我们设计这款应用的出发点就是想帮助那些尚不十分懂得照看宝宝的80后父

母，让他们在照顾宝宝的时候可以更加从容。

由于经验欠缺和时间限制，我们的设计制作还有很多不足。比如前期用户调研的广度和深度幵非十分充分，没有很好地将可用性测试贯穿在整个设计流

程中等等。虽然我们对应用的功能设计做了一定的油画，但是《育儿塘》目前的交

互方式仍属于较传统的iOS下应用的使用模式。下一步我们希望将整个应用从界面到交互方式有一个大的飞跃，无论是从“塘”的字表意思优化图形界面，还是

从其中提炼更符合用户使用习惯及应用主题的交互方式。我们希望有机会完成这

些更深层次的提炼，从而使我们的应用更上一个台阶！

致谢 Thanks

感谢为此项目的制作提供帮助的老师、同学和相关单位：前期用户调研：冼枫老师夫妇关琰老师吕帄 Vedio Sketch配音：赵德阳（美82） Vedio Sketch脚本英文翻译：郑南琛（电机84）空军总医院烧伤整形外科

参考书目及网站 Reference Book & Webbite

《达芬奇的便携式电脑》

http://book.douban.com/subject/1768152/

《社交网站界面设计》机械工业出版社

新浪微博网页版及iPad应用 http://t.sina.com.cn

Twitter（翻墙请自理）

http://www.twitter.com

百度知道

http://zhidao.baidu.com

http://book.douban.com/subject/1768152/

http://t.sina.com.cn/

http://www.twitter.com/

http://www.twitter.com/

http://zhidao.baidu.com/

http://zhidao.baidu.com/

演示视频配音文本 – Video Script

宝宝出生两周后的一天，忽然发现孩子不停地哭闹，妈妈无论怎样哄逗都无济于

事，她感到不知所措。这时她登录到育儿塘应用，幵提出了自己遇到的问题。。。。。很快就得到了回答，于是便依照好心妈妈的指点，更换了包裹孩子的毯子，果然，孩子停止

了哭闹。

宝宝睡着后，妈妈走到客厅准备放松一下，于是坐在沙发上使用ipad看书，这时

ipad屏幕上弹出了育儿塘的最新push通知。她便打开查看，原来是一位爸爸不知新生儿吐奶该如何解决，。。她想起自己前几日的经历，于是便回答了这个问题。。。。

在爸爸妈妈的悉心呵护下，宝宝已经一岁了，一天爸爸下班后，在地铁的电视中

看到了一则关于孩子补钙的广告，想到了自己的孩子，于是就打开育儿塘，开始搜索这方

面的资料，浏览后发现一篇受到网友普遍认可的文章对自己十分有帮助，于是点击了“呱”（按钮）。

晚上，妈妈在睡觉前登录到育儿塘应用，发现了爸爸关注的资源，仔细阅读后，

发现资讯的发布者在育儿塘中的名誉很高，于是添加了对这位资源发布者的关注。之后的某一天，父母们在逗孩子玩时，孩子忽然可以踉跄地走几步。小两口很高兴，拍下了很多

孩子走路的照片，幵发布到育儿塘中。随后收到了不少网友们的评论。

他们决定这周末组织一个线下的聚会，认识一下曾经相互帮助过的网友们。

Thanks! 2011.05.08