草根交互、草根“设”法

本文分享我在日常工作中拿到的一个简单需求概念，并实际落地且比较草根的交互设计方法

将从以下几个阶段去分析：

1、需求沟通阶段：

背景：需求方最近联系到我，表示要添加一个 用户教程 的功能（教程内容是关于实际交易操作干货视频）

以下是聊天记录（内容一字不差，不能截图，那我就只好画出来了）

为了改变需求方口头提需求的“良好习惯”，且在当前团队 没有需求模版的情况下，

我根据“交互设计*要素、交互设计**原则”（我记不住那么多，都百度的到，各位读者千万不要去百度，否则会看到不同的作者写出不同的答案来）

装模作样的整理了一个初步的模版草稿给到需求方，如下图：（需求方拿到后，非常配合 屁颠屁颠就去填写了）

而后，需求方把需求模版发给我了，如下图（总的来说写的算是不错了，至少是能用）

2、需求分析

接着就需要从文档中提取对 信息布局 比较重要的信息（你问我怎么提取？寻找文档里需要呈现给用户看和操作的东西，就酱紫）

1、两端：Web+App

2、Web入口：**学院以banner形式进入、个人主页新增模块

3、App入口：个人主页新增模块、新增模块进入后以banner形式进入

4、功能点：

a. 有视频课程，且分等级，不同等级有不同的视频课程，课程属于考试后的福利

b. 有金、银、铜等级，包括毕业证，还得能下载并分享

c. 有等级对应的任务，去完成任务的入口

d. 有考试系统，有分数，有题目（单选+判断）

3、信息布局

愣着干什么？开始思考布局啊！

将提取出来的重要信息整理后，将需要展现的功能摆放在合理的位置（怎么确定位置，看下图的思考过程）

大致确定了布局结构之后，就需可以开始将具体的功能、字段信息完善在框架内；

最终可以推导出这样的一个布局：

4、交互注解

得出初步的布局后，再将布局中的每一个元素的交互注解补充完整（每个人的交互图都会有所不一样，选择一个适合你自己的表达即可）

例如：每个元素不同时间的状态、点击之后的反馈、功能流程是否闭环、用户操作之后的判断逻辑等

5、多端设计

完成Web端的设计后，开始思考App端的设计，此时基本上要做的是适配的问题；

但还是要具体问题具体分析（Web和App的交互方式不同，这个去知乎上都可以搜到）

6、总结拓展

对于需求之外的思考案例A：

总的来说，因为这个需求不是一个非常重要的功能，我也编不出我接手后的点击率啊、曝光率啊等指标数据（我发现很多人有编假数据的这个毛病）

更想谈谈在设计过程中遇到的问题，以及为了避免遇到类似的问题所总结的方法：

a. 拿到需求后，将有助于信息布局的信息提取出来，这一段前文写的轻描淡写；实际上在这一块花费的时间是最

多的，其实仔细看需求方写的需求，会发现杂乱无章；需要大量的去进行沟通，这样并不利于我去很好的提取内容

b. 在设计答题页面的过程中，我意识到，用户真正参与考试的时候，是会有意外情况中断考试进程的；例如提前

结束考试；考试后，想知道每道题的正确答案等需求上并未写明却又必须要有的配套功能（每个功能又会有不同的交互状态，补充起来就会越来越全面）

总之不重要的功能，能让你思考、进步的地方都是大大的有；为了避免下次遇到这样类似的问题，我在完成交互设计后给需求方提了一个建议：

自己写了一个该需求的优化建议发给了她，她表示看得懂，非常专业并大为震撼；我贴在下面