产品中的设计

引言：在桌面软件行业或者移动互联网行业中，做设计不仅仅是为了交付一张图片而已，绝大多数时候，设计是为了让应用或者游戏更容易被用户所接受而存在的，输出的一个设计方案而不是一张图片。所以，在做设计的时候，需要综合考虑产品的本身，而不是单纯的为了好看而去做一张图片。现在有越来越多的UED团队强调，设计师需要有自己的产品sense,那产品的感觉究竟是什么样子的呢？这篇文章通过一个虚拟的项目来总结下个人的一些看法。

虚拟项目：需要做一款简单的网页产品，功能定位于老年人使用的网址导航。

项目资源：时间很紧，人手只有一名设计师加一名重构设计师的部分时间。

项目分析：网址导航类产品市场上有很多家公司在做，比较成功的应该是“好123”（http://www.hao123.com/），既然市场上已经有同类产品了，作为设计师，是不是找竞品的网页过来照抄一个就好了呢？不是的。为什么？因为既然要做这款产品，就需要好好去理解这款产品存在的意义，分析它的市场定位，然后有针对性的去作出差异化。那怎么去作出差异化呢？让我们一步步的来完成这个项目。

    先拆分下任务的工作量：项目需要包含一枚产品logo,一个网页。由于项目没有名字，所以还需要帮产品取个名字。好，那我们就从产品的名字说起。

    一般来说，产品的名字意义并没有想象的那么大，但是最好产品名字跟产品做的事情有一定关联，这样在当今互联网产品众多的情况下才容易被用户记住。同时作为一款网页产品，产品名字还需要跟域名有关，所以想到名字还需要去域名网站看看有没有合适的域名可以注册。从产品定位上看，帮助用户上网，这里就定名字为“上网帮手”，对于中老年人来说，这个名字也算比较容易理解，打开这个网页，帮助自己上网，碰巧“shangwangbangshou.com”还没有人注册，虽然域名的确是长了点，但是还算好记，我就顺便给注册了J

   好，产品有了名字， 接下来就可以开始做设计师的主体工作了。来，画个logo先。

LOGO分析：“上网帮手”是项目的名称，那么需要用什么东西来表达传递这个概念呢？接下来这个步骤我建议在草纸上进行，方便发散自己的思路。由于写这篇文章的时候，我的稿纸已经找不到了，所以这里就大概理一下思路。

     上网帮手，需要传达的是什么呢？产品本身结合名字大概可以产生以下关键词：“上网”“帮手”“网址导航”。到这里，其实还是完全没有办法画logo，这里我们可以称之为第一层联想，第一层联想多是产品的实质属性，是产品本身需要表达的东西，比较抽象，很难直接用图形来承载，但这层联想是必不可少的，是联想的根基。接下来根据这几个关键字进一步联想：“上网”我们可以联想到“个人电脑”“显示器”“万维网WWW”“丰富多彩的信息”“网格”“现代化的”等等,“帮手”可以联想到“ 帮助”“助理”“亲切的”“专业的”“可信赖的”等等，“网址导航”可以联想到“hao123”“网站地图”“指南针”“放大镜”“黄历”等等。好，从这第二层联想里边，我们发现已经有很多具象的东西可以辅助我们做logo的原型了，比如说“放大镜”“显示器”“指南针”等等，但是还有很多不太好表达的形容词，不要担心，我们可以以第一层第二层的关键词继续联想。这里，在草稿上写下这些联想词的时候，可以顺便把临时想到的图形也简单的画在关键词的旁边，这样在最后收敛归纳的时候会更形象一点。好，继续我们的第三层联想，这层的联想开始已经比较琐碎了，发挥你想象力的时刻到了。比如说从“亲切的”可以联想到“笑脸”“开心”，从“专业的”可以联想到“博士”“专家”“词典”等等。当然，接下来可以适当的展开第四层甚至第五层联想，等完成这些联想工作后，稿纸上应该布满了放射型的关键词和小图片，然后就可以进行归纳收敛了。

      一个LOGO不一定要包含产品的所有特征，当然，包含所有的特征也不是很现实。这里我们可以找产品的重点组合下，比如说我们挑选“专业的”“亲切的”“帮手”这样一个定位，根据我们上边的联想结果，可以用“微笑的”“博士”来表达这个概念，此外，我们还可以挑选“亲切的”“上网助手”，可以用“微笑的”“显示器”来表达。方案的表达形式已经出来了，我们可以接下来去具体执行LOGO的表现了。

“微笑的博士”

我们先来做一下这个方案，具体的技法就不描述了，大概写一下做一款logo的步骤和思路。从“微笑的博士”这个概念出发，很容易想到戴博士帽的笑脸，那接下来就可以打框架了，主体色调选取了暖色，如下图：

     用纯色的色块铺出基本形状，确认构图上没有大问题再进行下一步的图形细化工作。分三部分来细化这个图形，圆球+表情+帽子。

     之后添加整体的细节，比如说根据现在的球体质感，帽子应该在笑脸上有个倒影，投影也需要稍微提高些，帽子应该加个穗子，等等。

完成稿1

“微笑的显示器”

这个方案就不啰嗦步骤了，完成稿如下：

完成稿2

方案选择：现在从两个方案中选择一个作为定稿。视觉上看方案1的整体性更好一点，而且表达的含义比方案2也更多一点，所以这里选定方案1作为定稿。

（ps:这一步在真正的产品决策中可能是耗时非常多的一步,但是这一步真的没有想象的那么重要，一般来说选择那种看一眼就能感觉到跟产品挂钩的方案，如果感觉都差不多，视觉上又没有明显优劣，大可以随便选择一个。产品的成败跟logo本身没特别大的关系。）

网页方案:在网页设计的时候，需要考虑人力成本和资源成本。由于这个产品的定位是简单的网址导航，所以我们没必要搞太多的子页面。这里甚至可以用一个页面来表现。市面上已经有现成的网址导航，所以我们不妨先参考下网址导航类产品需要遵循的规则，这个时候可以baidu或者google一下。大概可以得到以下几个点：1、设计要简单，不花哨；2、包含大量的网址；3、由于面向的人群比较广，需要保证各种浏览器的兼容性，少用浏览器支持度不高的css；这些可以理解为基本要求，接下来我们需要思考下产品与竞品的差异点,这个才是重点。

     从产品的用户来看，产品主要面向的用户是老年人，至少需要考虑两个点。第一，这些目标用户的特点是什么？目标用户的特点是，年纪比较大，需要使用网址导航的人应该是对电脑不是很熟悉。由于年纪比较大，所以在设计的时候字体需要尽量大一点，选中的效果也需要明显。由于对电脑不熟悉，所以页面内的内容需要尽可能的少，不要放置太多的信息。第二，目标用户的需求是什么？这里可以考虑自己做一个小小的用户调研，比如说问下长辈一般都上什么类型的网站，上网都做什么。或者看下市面上的老年人网址导航都放些什么样子的网址。综合这两个点，我们是不是把用户需要的网址罗列上去就好了呢？比如说放上“百度”“网易”“优酷”？这个时候需要再稍微思考下。

看电影:对于目标用户的需求来说，比如说他们有需要看电影的需求，那么你需要告诉他，“优酷”可以看电影，“土豆”上也有电影板块，“腾讯视频”上也可以找找。那么，对于用户来说他需要记住很多东西：我要看视频->我需要上一个叫做“优酷”的网站上去找，或者去“土豆”上去找->找到电影板块->如果这些顺利的话就可以找个电影看了。对于熟悉互联网的人来说，这些都不是事儿，但是你想，你的目标人群是刚刚接触网络的老年人，所以对于他们来说“土豆”上为什么可以看“电影”？很难理解。“优酷”是个什么东西？这个词压根儿没见过啊。如果只有一个看电影或许还能勉强记住几天的话，那么他们如果想看新闻怎么办？想看天气预报呢？是不是需要拿个本子全记下来？通过我们的产品可以解决这个问题吗？貌似不难，我们可以放置一个“看电影”的链接，直接跳转到“优酷”的“电影列表”页面，用户如果想看电影，只需要找到代表自己需求的文字“看电影”，就可以看到大量的电影列表了，等稍微熟悉了，自然会通过“电影列表”上边的筛选器去挑选自己更喜欢的电影了。完全不需要考虑“我如果想看电影，应该去什么网站？”这个问题了。

听音乐：再比如说，“听音乐”的需求，我们这里选择了豆瓣fm。为什么会选择这个看起来有点文艺的音乐网站呢？因为我们的目的就是让这个网址导航尽可能的简单，简单到点击了“听音乐”这个链接，“播放按钮”都不需要找，就可以开始放音乐了。这么来看，我们就找到产品的差异点了。至于搜索框和实时的新闻热点，这些东西有现成的baidu 开放API，只要内置下就好了。网页还原什么的这里就不做介绍了。

Ps: 网页的话，大家可以访问http://www.shangwangbangshou.com/ 。

总结：这篇文章主要的思路就是如何顺着产品的思路去做设计，不管你是作为乙方去完成一个外包的设计任务，还是在自己的产品团队中做设计，在做设计的过程中多想想产品的定位，产品的目标用户，想清楚产品是为了满足“谁”的“什么需求”，才能更好的让自己的设计被甲方或者是团队所接受，被用户所接受。此外需要注意的一点是，这个带着产品的sense去做设计绝对不要当作是做劣质设计的挡箭牌，带着产品的思路去做设计与做好看的设计本身是不冲突的，应该说好的设计是在满足了用户的基本使用需求的前提下，也能满足用户的视觉需求，说白了就是做的设计要不仅好用，而且好看。