功能确定之后，如何做好UCD概念设计？

2016-04-10 12:14:00

上回说到功能和数据都确定下来了，接下来我们就要把功能数据给设计出来，也就是决定它们长啥样，怎么操作的。详见上一篇：论需求和功能：如何分析需求并设计成功能。

如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”，现在开始我们就要“正确地做事”，方向抓准了，我们就出发吧。

这里分成概念设计和细节设计两个环节。概念设计是框架的设计。比如我们建房子，概念设计就是决定房子的架构，哪里是厨房，哪里是客厅，门开在哪里可以几个房间互通，房子的装修风格是怎样的。而细节设计就是细节的设计（呵呵…），也就是门是自动门还是手动门，门把手是旋转的还是固定的，塑料的还是金属的，墙纸是几何图形的还是花纹的。而设计本身又分成交互设计和视觉设计两类，交互是行为，视觉是形式，所以也就有了交互概念设计、交互细节设计、视觉概念设计、视觉细节设计。接下来我们先来看交互概念设计。

1 什么是交互设计？

1.1 就是行为的设计

什么是行为？

含羞草，碰它的叶子，它会收缩；狗狗，扔条骨头，它会叼回来；手机，点击屏幕，有东西弹出来。这就是我们跟植物、动物、人工制品交互的过程，我们及对方的所作所为就是行为。行为分3步，1我看到你，2打你一巴掌，3你喊哎呀，也就是获取线索、操作、反馈。

所以交互设计，就是设计线索、设计操作、设计反馈。

举个例子：我们发短信（新建短信那种），入口在哪里，在哪里输入短信内容，输入时怎么切换输入法，除了文本，还能添加其他内容比如图片吗？怎么添加，添加时有何限制，添加后怎么增删改，短信内容确定了，要填收件人，怎么填？直接输入号码还是输入名字，有联想吗？或者调用联系人名单，怎么调用，能多选吗？怎么增删改。收件人确定了，怎么发送？语音口令还是摇一摇发送，还是按按钮，按钮在哪里长啥样？发送出去后，怎么告知发送成功，成功后去哪里？怎么告知失败及善后？这些问题都需要有人来决定答案，这就是交互设计。

1.2 交互的趋势

首先，个人觉得从输入渠道来看，更多元了；而且，多渠道融合交互。

以前主要靠中间设备，鼠标键盘遥控器拉杆等。现在多了语音、多了手势、多了抖动、多了肢体（Kinect）、多了眼球（眼动仪）、多了亮度，等等等等。在同一个产品里，这些输入方式又混搭在一起，形成统一的体验，最简单的例子是nds上的经典游戏任天狗，你能呼唤狗狗又能触碰它。复杂的？AR和VR！

其次，跨终端。终端之间或对话或衔接或互补。

比如在电脑逛街下单，在手机支付追踪物流。比如游戏Lifeline在手机和手表同时进行。

比如房间里用遥控器在户外用手机控制空调。

比如pad和机器人对接。

再次，匹配更多线下场景。

比如基于交易场景、基于地理位置的各种应用，已经相当普及但还有很多场景可发掘。更复杂也更有远大前景的运用在于服务流程里，比如医院的就医流程，预约、等待、支付、查看报告等接触点都是交互，都是机会。比如银行业务办理、书店购书、看演唱会前后等等等等。

2 交互概念设计

回到主流程啦喂，交互概念设计做啥呢？三件事情。

2.1 信息架构

大概说一下，以后单独开个章节细说，因为说来实在是话长啊。我们前面已经得到了功能和数据对吧（详见上一篇：论需求和功能：如何分析需求并设计成功能）？在这一步就是把这些功能数据装到不同容器里，而多个容器的构成整体就是产品啦。

容器在表现层看来，就是界面。容器的规划、容器之间的逻辑关系（导航关系、上下级关系）就是信息架构。信息架构设计的产出就是信息树（树叶即容器），信息树的画法怎么样都可以。

看下图，左边的容器（列表页）放的是各种信息标题和图片（数据），同时它们又是详情页的入口（功能），右边的容器（详情页）放的是详细内容和更多推荐及评论相关内容。是先有信息架构再有功能数据还是先有功能数据再有信息架构？答：先有功能数据，用户决定需求，需求决定功能，得先确定这些东东是有价值的，才能规划它们嘛。当然随着产品开始运营，数据会在原有架构上持续丰富，功能也可能做出调整，甚至随着产品发展，架构也可能调整，这是后话了。

呃…看不懂？没所谓，在下能力有限没办法长话短说，以后再慢慢说。

有个信息架构设计的常用方法，叫卡片分类，洋名Card Sorting，过程如同下图。

研究人员将不同的陈述写在不同的卡片上，比如一张卡片代表一个功能，卡片上有功能名字，功能描述，确保用户理解这些功能；然后让用户分别独立地将这些卡片分堆，提问他们；然后将所有结果加以统计分析，哪个功能数据被最多地装到一堆里面，就可能是我们产品的最终内容分类。

其实就是让用户帮我们规划容器，装内容进容器，甚至帮容器起个名字（分类名、频道名、菜单名等）。

因为是用户起的容器名，说明这个容器入口也许最容易被理解。
因为是用户规划的分类，说明产品的架构也许最容易被接受。
因为是用户装的内容，说明内容也许最容易被找到。

但，信息架构是件麻烦事，它蕴含了我们的业务侧重点，代表了我们对用户的某种引导，个人觉得卡片分类只能是一种决策依据，不能全部依赖，卡片分类用于局部的信息架构比如工具栏分类、商品内容分类更理想。

2.2 界面框架和关键任务流

如果说信息架构是把内容装到容器（界面）里面，界面框架就是每个界面上的内容排排坐，决定界面的内容布局。

因为是概念设计，所以不需要考究细节，为了呈现效果给相关方，你可以画出细节，但不需要琢磨，能够说明这个界面上有什么内容、大致怎么分布的就行。这时我们会挑出关键界面来进行界面框架设计，不必设计所有界面。

而关键任务流就是把这些关键界面串联起来，让其走通。关键任务流是能够代表产品核心的任务流，比如购物应用的浏览商品、下单过程。这时可以单独输出流程图，也可以直接把框架设计的关键界面加上箭头联通起来，能说明事情就成。

信息架构、界面框架、关键任务流的完成，就意味着交互概念设计大致完成啦，在此过程中，你也要思考你的设计理念是什么，或者说成设计准则，在你面临设计方案选择时，它是统一的标尺帮你决定，也让整个产品体验更一致，更能体现产品价值观。有趣的是，理念也是在设计过程中被设计出来的，是随着设计进程推进，经验沉淀、碰撞出来的。下面我们来看看视觉概念设计。

3 什么是视觉设计

概念我就不说了，其实我也不知道。重要性我就不说了，因为第一章说过。想说的是：视觉设计至少做了这四件事情：

3.1 传达“品牌”。

视觉设计形成一种氛围，与公司品牌建立联系。既是一种宣传，也加深了用户对品牌的认知度。比如兰芝的产品、界面和包装都是一致的蓝。

3.2 传达“美感”。

漂亮的东西总是比丑陋的东西容易被人接受。这里指的“美感”应该是“恰当地漂亮”，每个人的审美不一样，甲之熊掌乙之砒霜，所以所谓的美感因人而异，因目标用户打造。小孩认为的美跟大人认为的美也许是不一样的。男人认为的美跟女人认为的美也许是不一样的。文艺青年的美跟土老板认为的美也许是不一样的。甚至同一个人身上，当他扮演不同的角色的时候，也应该给他恰当的美。