【斩笔·芒种·书评】产品框架层简介

书目：《用户体验要素》

框架层（Skeleton）定义：按钮，控件，照片和文本区域的位置。框架层用于优化设计布局，以达到这些元素的最大的效果和效率。

框架层的设计工作由三部分组成：

1. 信息设计（information design）

不管是功能型产品还是信息型产品，我们都必须完成信息设计。出现在用户眼前的所有文字信息都是信息设计的范畴。在信息设计时最需要注意的问题是不要创造认识摩擦，购物网站的“购物车”是非常容易被用户理解和接受的一个词，因为它是活跃在现实生活中的一个词，直接使用它要比另外创造一个词要好上无数倍。关于认识摩擦，大家可参考我的另外一篇文章：蒸汽房里的认识摩擦

2. 界面设计（interface design）

界面设计的设计对象是按钮，输入框等等界面控件，这些控件的组合能让用户与系统的功能产生互动。所以界面设计也常被叫做交互设计，它主要针对功能型产品而言，功能型产品主要关注的是“任务”。就像你选择某个商品后点击“购物车”按钮，此时你是向购物网站喊话，“帮我把这东西放我购物车里！”，接着你会在网站页面上看到一句提示，“商品已被加入您的购物车，请前往购物车查看。”这是购物网站对你的回答，以上这一来一往就叫做一个交互。我们日常生活中常用的几个大产品，微信，淘宝，网易云音乐等等等，交互做的都不错，导致大家往往不知道交互差是一种什么体验。（当然，我举例的这几个产品的用户已经被“教育”出来了，对产品操作早已产生惯性。有机会我再写写用户教育的事儿~）

什么叫差的交互？产品就在你面前，你却一脸懵逼不知道怎么用。“诶？现在我该点什么了？”“呀？我这成功没成功？” 想体验差的交互，请找国企做的网站点一点，什么12*06啊，什么航空公司官网啊，你懂的。

3. 导航设计 （navigation design）

信息型的产品，通常必须要将屏幕上的一些元素进行组合，以提供给用户在信息架构中自由穿行的能力。最典型的信息型产品就是公司网站，学校网站等等，以提供，传递信息为主要目的的产品。学院-美术学院-教授-油画教授-王老师， 学院-美术学院-课程介绍-油画-王老师。大家可以看到，我举例的两条路径可以到达同样的终点，这是在做导航设计时要考虑的事情：用户比较喜欢走哪条路呢？

以上三个设计工作往往是紧密结合在一起的，如，“好的导航设计”并不能纠正“不好的信息设计”，所以他们之间的边界就很容易变得模糊。这里有一个简单的方法能够帮助大家区分：

--传达某个想法给用户：信息设计；

--提供给用户做某些事的能力：界面设计（交互设计）；

--提供给用户去某个地方的能力：导航设计；

想参考《用户体验要素》部分思维导图请访问：思维导图