1课程002如何定位设计中的问题

1、【1 课程 002】-如何设计中的问题各位小伙伴，在做东西的时候是不是经常碰到这么一种情况：做个页面，上边有个按钮，就在那里寻思，这个按钮是大点好还是小点好呢？用橙色还是灰色呢？跟经理或是开发讨论一个功能，经理讲的都是商业概念，开发讲的都是技术实现，你说的都是页面问题，是不是经常说不到一块去？那今天我们就来引入一个经典的分析框架，用户体验要素的五个层次（想必有的同学已经听说过了，但是你能分得清结构层和框架层吗？嘿嘿。）这五个层次分别是：战略层、范围层、结构层、框架层、表现层，这个层次基本上适用于绝大多数互联网。第一个层次-战略层（第 1 张图）Why互联网，的根本是由战略层（strategy）

2、所决定的。包含两方面：经营者想从（）得到什么；用户想从（）得到什么。，我们作为普通用户，要的就是好用的工具，而且还，那腾讯要的是什么，企业逐利，当然是利润了，不过在互联网是通过来用户，为用户提供增值服务来实现的，可能你我没有买过表情也没有买过微信道具，但是 100 个人里边有一个买了，几亿用户下来就收入可观了。淘宝也是这样，通过 P4P（Pay for performance）的来实现营收。在这个层面，并细节到功能、页面，那是模式要解决的问题。战略层要解决的就是用户模式，就是能够为用户提供什么价值。这个层次是的的基石，这一层没搞好，其余的层次都是白搭。你曾有过这种经历吧，被什么红包偶然了个 A

3、PP，结果发现不是你想要的，拿完红包然后就卸载了。这就是运营做的好但是不符合用户需求。这个层面要解决为什么要做的问题，在这层面要问几个问题，是为什么用户设计？解决用户什么问题？这类用户在这方面的需求强吗？用户用了我这个和不用我这个有什么区别？没有我这个之前用户是如何解决问题的？第二个层次-范围层（第 2 张图）What解决什么该做什么不该做的问题这个层次的存在就是为了承接战略层的，为了解略层的为谁而做做啥东西的问题，是要通过做功能来满足用户的具体需求。通过对用户的需求进行分解，一步步的列出功能点。不过，这时候，你问一般的用户他需要什么，他肯定跟你说的是一个一个的具体功能，能这个,能那个等等，但

4、是哪些才是真正应该做的，在范围层要确定好。范围层就是限定或应该有哪些不应该有哪些。在这个层面，用户和设计者才可以进行比较顺畅的，在战略层，用户是说不清的，所以很多时候你去做调研，用户反馈基本上都是在范围层以下，不是我希望有个功能，就是功能没啥用。体现的具体点，举个例子就是是否可以情，淘宝是否应该保存之前的收货地址。范围层的内容，通常是功能需求列表。比如：1.用户可以免登录就直接2.用户可以收藏站点3.要有券，支付的时候可以用4.能够支持、支付宝支付通常还要分出优先级，有了这张功能列表，后边才好通过结构层把他们有机组织起来形成一个产品。这个层次通常要解决的问题是，这个功能一定要要吗？哪个功能优先

5、级更好？还有没有其他的实现方法能替代掉这个功能。第三个层次-结构层（第 3 张图） How解决用户如何使用的问题。有了功能列表，用户也不能直接就用啊，需要做出东西来啊，这就到了具体的设计了。怎么做？一个系统就像一个城市，不能上来就东盖一间房西盖一工厂吧，得有一个架构，这既是结构层要解决的问题，架构就在这里了。范围层哪些散落的功能点到这里要变成一个有组织的结构。用户的使用流程应该是什么样的？各种情况系统应该有哪些反馈？就像是城市一样，要有一个蓝图。富士康周边的超市购物工具也得考虑下放在什么地方合适吧。高德地图也不是你给钱就能在地图上直接给你放一个大吧，都得有一个之前就确定的结构的。上的结构层会解

6、决信息架构的问题，包含导航、搜索等等，让各个功能合理分布，以便用户顺利到达。通常流程图都是在这个阶段画的，我们以后会讲到。第四个层次-框架层（第 4 张图）How解决一个功能、一组信息如何呈现，就是一个页面如何布局。包含页面的平面布局和页面的元素层次。框架是结构的具体表达方式，结构层解决了如何达到支付页面，框架层确定了在结账页面上支付按钮的位置，是否用鲜亮一点的颜色（视觉层级高）还是暗淡一点的颜色（视觉层级低）。到了这里，才是用户可以直接感受到的页面。见过Demo 稿吗？就是一块一块只有颜色没有具体内容的那种，用来说明什么地方摆放什么模块的那种。就是框架层的表现形式。结构层和框架层的关系学术点

7、讲就是逻辑与物理的关系，就像是当你研究两个城市之间的距离的时候，你可以把城市看做一个点，而只有当你研究到城市里边的布局的时候才需要看到城市里的布局。之后我们会详细讲解结构层和框架层的区别。第五个层次表现层（第 5 张图）How在表现层，你看到的是一系列真实的网页，由图片和文字组成。一些图片是可以点击的，从而执行某种功能，例如带到购物车里去的购物车图标。一些图片就只是图片，比如一个促销的或的标志。好了，五个层次给大家解读到这里。再来看个例子，见图 6那个故事大家听说过吧？一个师设计小区道路的故事，刚开始的时候拍出来一个设计方案，结果大家都没按照他设计的道路走，都是从草坡上直接走的，然后他下一次吸

8、取教训直接让小区居民走出一条道来，然后据此修成正式的道路。如果是只盯住道路怎么设计的笔直、的合理，不关注用户的需求那么就是没有解决 Why 的问题，而是 focus 在了 how 上，从框架层和结构层上入手，这就导致可能很用功，结果效果不好。回到昨天的两个作业，大家知道为什么要从“人”的需求入手了吧，其实超市购物工具也好上课用的 APP 也好，最开始的要契合用户在当前场景下的需求。注：还是经典的五个层次，不过记住了并不等于会用了，老D 能彻底分清楚结构层和框架层也是用来不少时间的，现在会把悟到的东西告诉同学们，不求同学们一下子能理解，但求在同学们的心里种下一粒，让它慢慢生根发芽，逐渐长大，到那

9、时只要一分析的体验就会潜意识的想到这个框架，那就没有白来上老D 的课。看看文章里的 5 张图，是不是很形象？作业：以我们为目标用户，大家回帖对扎堆的五个层次说一下的观点，不要分析整体来往，太多了，进分析扎堆的功能就可以。提示：扎堆满足了我们的什么需求？为什么老D 没有选择扎堆有哪些功能，哪些功能是必要的，那些事要删掉的整个操作流程是否顺畅页面布局是否合理整体的视觉感受如何战略层、范围层、结构层，这三个层次都跟最终用户能够看的到的东西距离有点远。这三个层次可以用三种不同表述形式：1.战略层-为什么样的用户需求提供什么服务2.范围层-有功能，没有功能，可以，不可以3.结构层：先干这个再做那个.表现

10、就是动宾短语的流程描述4.框架层其实就是页面的布局和区块划分提供线上工具-暂时这么说吧在这个层次上靠语言是说不清楚的，就是一群人聊天，聊完的东西基本马上就失效了，但是扎堆、百战略层：为基于话题的群组那线下的东西来作吧，度贴吧这类东西是话题的聚合，像是可以在上边写字的布告栏一样，内容是需要沉淀的。我们的课堂也是这样，发完的东西是需要同学们以后再看的，并且需要话题评论，所以的形态会导致刷屏。范围层：扎堆：-有创建/删除扎堆的功能，有编辑扎堆信息的功能-有添加/删除成员的功能-限管理-有公告等等帖子：-可以发帖（三种形式），帖子可以被回复-帖子支持各种排序规则（时间、热度）-有搜索功能-默认的话题排

11、列规则等等消息系统等等结构层：比较合理的流程：进入扎堆>选择“交互设计学堂”>进入“交互设计学堂”>浏览帖子列表>查看详情>评论/回复现在的流程是：选择“扎堆”>查看帖子列表>查看详情>进入“交互设计学堂”（非常不明显）再给大家看几张图。图 1 是现在的分析，图 2 是改进的版本-直接展示扎堆列表，点击进入框架层：这个其实就是页面布局啦，给大家看个例子图 3，这个以浏览为主的页面公告区占了大半个屏幕，这就是框架层上的设计问题这么一分析，你就知道扎堆现在最明显的问题其实是在结构层，这一层级对应的是交互，可以判断来往团队的交互设计能力比较弱。表现层大家说的都还好了，就是视觉、文字内容方面的。我就不多说了哈。晓可 ：5 天前 回复横天 ：4 天前 回复witchvi ：4 天前 回复东东 ：3 天前 回复胡思亮 ：3 天前