产品设计-产品框架设计

一、前言

产品从无到有之前就需要先确定产品的主体框架，有了架构的支撑，才能将产品的其他需求填入其中，让产品丰富多彩、有血有肉。产品框架就相当于汽车的主体支架、楼房的钢筋结构、人体的骨骼组成一样，不仅支撑产品的外在表现，还还支撑着产品的内部结构。

任何一款产品都有自己的主体框架，产品类型不同产品框架也各不相同。

1. 2B类产品框架

2B类的管理系统，如企业ERP系统、电商网站卖家后台管理系统、物流管理平台、SaaS软件等，这些产品框架就较为复杂，甚至需要对产品的用户进行培训。

例如淘宝网的卖家后台管理系统，由于功能之多（包括交易管理、物流管理、商品管理、店铺管理、营销管理等）操作复杂，淘宝开通了“淘宝大学”，其中“卖家后台管理系统”就是其培训课程之一。

2. 2C类产品框架

而对于2C类的直播软件、论坛软件、打车软件、购物软件则往往较为简单，不需要用户花费太多的学习成本，使用方便、操作简单。

例如淘宝的购物网页，看起来页面复杂，但是核心都是商品展示，用户一看就懂使用方便、操作简单。

不过即使是同行业的产品，产品框架虽基本相同，但表现形式却仍有区别。像淘宝与京东、快手与抖音等，在主体框架相同的情况下，表现形式略有差异，这就涉及到了产品的功能流程设计、页面布局设计、交互设计、视觉设计等。

二、产品框架模型

在《用户体验要素》一书结构层信息架构中提到了互联网产品的四个主要信息框架模型。

1. 线性结构

线性结构来自于你最熟悉的线下媒体。连贯的语言流程是最基本的信息结构类型，而且处理它的装置早已被深深地植入我们的大脑中。书、文章、音像和录像全部都被设计成一种线性体验。

在互联网中，线性结构经常被用于小规模的结构，例如：单篇的文章或单个的专题；大规模的线性结构，则被用于限制那些需要呈现的内容顺序，对于符合用户需求非常关键的应用程序，比如：教学资料。”

线性结构其特点就像时间线一样呈现先后顺序，常见于工具类产品或者早期解决用户单一需求的产品中。

例如：天气类产品

用户打开软件——输入查询地点——查看天气情况——关闭软件

例如：用户使用共享单车出行也是一种线性结构

用户扫码——单车开锁——用户出行——出行结束——用户锁车——费用结算

2. 层级结构

“在层级结构中，节点与其他相关节点之间存在父级/子级的关系。子节点代表着更狭义的概念，从属于代表着更广义类别的父节点。不是每个节点都有子节点，但是每个节点都有一个父节点，一直往上直到整个结构的父节点。层级关系的概念对于用户来说是非常容易理解的，同时软件也是倾向于层级的工作方式，因此这种类型的结构是最常见的。”

层级结构是多种线性结构的组合，其特点是符合人类的认知和习惯，人们天生就有分类的习惯。

例如：用户使用滴滴打车

用户打车——选择车型（快车、转出、商务车、拼车等）

例如：淘宝物品分类

裤子——长裤/短裤——时尚/休闲/绅士等

由于层级结构是由多条线性结构组成，所以在产品设计的时候就要考虑到产品层级的宽度和深度。

例如：美团APP就是广而深，而「美团外卖APP」属于「美团APP」中的一个独立业务，相对于美团外卖来说就是窄而深。

两种产品架构各有优势和劣势，在偏向深度的产品，用户的操作效率偏低，用户获取信息、完成任务的路径较多，但是减少了用户选择的入口。相反，在偏向宽度的产品架构中，用户所面对的入口增多，选择入口时会比较费时，但是减少了用户的操作、使用路径。具体使用哪一种产品架构，需要结合自身产品的定位、用户特点、业务结构及使用场景进行决策。

3. 自然结构

“自然结构不会遵循任何一致的模式。节点是逐一被连接起来的，同时这种结构没有太强烈的分类概念。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。但是自然结构没有给用户提供一个清晰的指示，从而让用户能感觉他们在结构中的哪个部分。

如果你想要鼓励自由探险的感觉，比如：某些娱乐或教育网站，那自然结构可能会是一个好的选择。但是，如果你的用户下次还要依靠同样的路径，去找到同样的内容，那么这种结构就可能把用户的经历变成一次挑战。”

自然结构由于其没有太强烈的分类特点，常被2C类音乐、视频、资讯等互联网产品中。

这类产品的用户在使用时，通常有两种情况：

① 用户心里已经有了一个明确的目标，想听某种音乐或想看某个视频节目，便会点击相应的分类去选择同一类别下的不同作品。

例如：用户想用优酷看电影，但是不知道看哪一步电影。用户想听流行音乐，但是不知道该听那一首音乐。

②用户没有明确的目标，就是浏览网站，看到自己感兴趣的视频内容就点进去观看。

例如：用户只是想听音乐，随便点开看到感兴趣的就听。用户用快手看视频，在发现栏里面发现自己感兴趣的就会点进去观看。

4. 矩阵结构

“矩阵结构允许用户在节点与节点之间沿着两个或更多的维度移动，由于每一个用户的需求都可以和矩阵中的一个轴联系在一起，因此矩阵结构通常能帮助那些带着不同需求而来的用户，使他们能在相同内容中寻找各自想要的东西。

举个例子：如果你的某些用户确实很想通过颜色来浏览产品，而且其他人却希望通过产品的尺寸来浏览产品，那么矩阵结构就能同时容纳这两种不同的用户。然而，如果你期望用户把这当成主要的导航工具，那么超过三个维度的矩阵可能就会出现问题。在四个或更多维度的空间下，人脑基本上不可能很好的可视化这些移动。”

矩阵结构由于能够帮助带着「不同需求的用户」在「相同的内容中」找到自己想要的东西。其特点是将多种信息布局在一个页面里，重点是：“如何做好信息的分层处理，让信息更有效率地传递给用户”。

例如同一双耐克低帮板鞋可以通过品牌搜索到、也可以通过低帮搜索到，还可以通过板鞋搜索到。同一部电影《终结者》可以通过欧美电影搜索到，也可以通过好评搜索到，也可以通过科幻片搜索到。

三、常见框架设计（供参考）

1. 标签导航

位于页面的底部,最多不超过5个，最好4个。例如微信底部的4个标签，支付宝底部的5个标签。

优点：清晰当前窗口所在位置；方便在各入口间频繁跳转，不会迷失方向；直接展示最重要的入口内容信息

缺点：入口功能超过6个，会显得产品笨重不适用。

2. 舵式导航

在标签导航中部加了“+”号，例如贴吧，微博等。

优点：突出重要且平凡操作的功能入口，功能入口多余标签导航

缺点：导航栏不规则，入口较多，笨重不适用

3. 抽屉式导航

隐藏在当前页面后面，点击入口可像抽屉一样弹出，例如快手设置、QQ设置等。

有点：节省页面展示空间；通过页面弹出可以增加用户注意力；扩展性好

缺点：操作太多，不利于频繁切换应用

4. 宫格导航

主要入口集中全部集中在页面上，例如美图秀秀。

优点：直观展示各项内容；方便浏览经常更新的内容

缺点：无法入口间调整；不能直接展示入口内容；不能显示太多的入口内容

5. 列表导航

像表格一样展示内容，例如微信发现列表。

优点：层次结构清晰；可展示长标题内容；可展示标题的次级内容

缺点；同级越多，用户越易疲劳；排版灵活性偏低；只能通过排列顺序颜色层级来展示入口的重要性

6. Tab导航

本质与标签导航相同，在屏幕上方。例如快手Tab导航，知乎首页的二级Tab导航。

优点：适用于多内容多层级

缺点：结构复杂，内容较多

7. 轮据导航

应用信息足够简单、扁平，例如天气类APP。

优点：单页面内容简洁，整体性强；线性浏览方式有顺畅感，方向感

缺点：不适合展示更多内容，飞主页面不利于展示和查看

8. 点聚导航

主操作选项或导航合并在一个按钮，浮动在页面上，例如苹果home建。

优点：灵活，页面展示方式有趣，页面更开阔

缺点：隐藏了更多入口和操作

9. 瀑布式导航

适用于多图下拉加载，例如快手内容页、贴吧内容页、淘宝商品展示等。

优点：浏览时产生流畅体验，排版布局多重

缺点：不适合层级框架复杂的产品，容易产生疲惫感

10. 组合式导航

互联网产品常用的多种导航类型组合，例如淘宝等电商购物软件。

优点：布局灵活，能适应框架的快速调整

缺点：不规则，容易有杂乱感

四、备注

本文内容可用于对产品的框架进行确定时的参考，但具体框架选择要从产品逻辑，用户场景等多个角度考虑。