静电的设计教室：画原型图的思路

设计文章 / 交互设计 | 2014-07-03 | 来源:静电的设计教室 | 作者:静电

一. 为什么要画原型图？

当我们在出门旅行的之前,我们要规划一下,路线怎么走,乘坐什么交通工具,行程有几天。当我们在建设一栋房子的时候，我们会先设计出图纸，设计出效果图，让我们对整个房子有一个整体的印象。对，这就是原型图的价值所在，透过原型图的训练，我们可以对我们的产品有一个更整体的了解。对于技术型人才，我们常常会沉溺于某个具体细节不能自拔，从而忽略更高层面的信息。这个更高层面的东西，就是对整体信息的归纳和整理的技能。静电认为，这种技能，比沉浸在某个技术点或者设计细节中，更能让你的产品有趣和受到用户欢迎。

二. 画原型图之前，我们的思考

1.我们打算开发的这款产品，受众是谁？年龄段区间是多少？
2.他们使用这款产品，能解决什么核心需求?
3.这款产品是否有其它同类型的产品来做, 你的竞争对手和你比起来,孰强孰弱?
4.针对某个模块的功能调整,最终达到的目的是什么?
当然,这个过程中,我们要考虑的问题实在太多, 其中包括更大范围内的市场调研,用户使用习惯的分析等等,但,这个,对个人开发者来说,或多或少有点难度,因此,我们先跳过这个层面.

三.提醒:请一定不要陷入细节的深渊

作为设计者和单纯的开发者,我们是最容易陷进某一个细节的人群.我们常常为了实现某个效果,某个华丽的特效而废寝忘食,不达目的誓不罢休,费了九牛二虎之力,终于完成啦! 自己成就感大幅UP….然后兴冲冲拿给用户去用,问他们感觉怎么样? 然后…..然后….就没有了…. 瞬间从山峰到谷底有木有啊?

所以,静电要打击一下各位,为什么会这样? 不是我们做的不好，是因为这个细节，对用户一点用处都没有。所以，原型图的功效就是如此，培养我们的大菊观。

四.开始原型图的绘制吧~

在以上的思考就绪之后,我们正式进入,画原型图阶段啦!　拍拍手鼓励一下自己吧!　为了更方便的实战，我们假想自己要开发一款基于音乐的社交软件．这个软件，可以听音乐，可以写分享音乐给好友，也可以搜索音乐库中的音乐来听.但重要的核心功能是, 音乐的分享和交流.

首先，平静呼吸，闭目30秒。。。。。。。。。。（喂，哥们儿，不要睡着了！醒醒！）

恩，开玩笑，首先我们拿几张纸，拿一只用的顺手的笔。思考一下,这是一款以音乐为载体来进行社交的软件,那么,我们的核心是什么?是用户的互动,还是单纯的听音乐? 静电认为是前者. 所以.如何促进用户的互动,对这款产品来说,就是一个主要功能,静电的设想是用feed流的形式来呈现. 接下来,我们来考虑,作为音乐软件,我们最不能缺少的是什么? 好的,有同学说是,音乐,一首一首的音乐,ok,音乐是我们这款产品的细胞. 那么,还有什么呢? 对了,听歌的人，人是一款应用的催化剂，缺少催化剂，应用不能活起来。那么，我们到现在，还缺少一样东西，这些元素，在哪里可以催化活跃起来呢？对了，用户的动态展示，这个展示包括自己的心情，自己分享的音乐，自己写的乐评，总之，这是一个大杂烩，所有的活动都可能在这里发生。我们暂且称之为他叫“音乐圈”。现在，我们把以上元素画出来。画到纸上，没错，很简单。看看静电画的。

哈哈，静电的字很烂对不对，或许有小伙伴要吐槽了，我的圆一定画的比你好，字比你好几万倍。好吧，静电做成这样都能勇敢的发出来，那么各位同学们，勇敢的拿起笔，画出你们的产品规划吧。这是个锻炼思维的过程。相信大家一定会比我强。

产品的形态确定了，接下来我们可以开始画框框啦。这个时候，静电提醒大家，千万不要陷入细节中去，粗略的画出草图就可以了。我打算把我设计的产品分成四个tab来区分功能。第一个是：我。（这个栏目的主要功能是：操作自己音乐的相关信息，比如我收藏的音乐，我的歌单，我的下载，我的好友。）第二个是：发现。（发现的功能，静电觉得是比较纠结的，因为静电考虑自己的用户量，当用户首次进入这款应用的时候，不至于一片空白，什么都找不到，所以，发现是一个内容提供源，静电坚持内容提供源这一概念，缺少这个，就像缺少组成人体的细胞，一切就是无本之源。）第三个：音乐圈。（正如上图那样，音乐圈就像一条宽阔的马路，一个大型广场，用户的所有交互行为都会在这里完成，这是一个中枢组织）。第四个：更多。（更多承载其它功能，同时可以归类其它一些无法用其它tab栏目展示的其它特色功能，这是静电为这个栏目起名更多的原因）。好的，四块已经订好，来看我画的图吧。