产品经理内功修炼——产品的界面框架设计

产品的界面框架设计

课程目标

1.掌握产品界面框架设计的类型

2.了解不同界面框架的优缺点

3.能够根据产品需求设计界面框架

前言

我们说界面的框架设计不仅仅是UI同学的设计，更多的是产品经理和交互设计师的工作。为什么呢？因为我们的产品需求当确定之后，我们马上要做的共组就是对界面进行一些框架设计，也就是我们所谓的原型图。那么UI设计同学是根据原型图去进行设计的，所以说UI设计当拿到原型图的时候，产品架构基本已经确定了。UI只是在我们这种产品架构基础上进行添砖加瓦，在颜色、配色、对齐方面进行精雕细琢。可以说界面的框架设计就和盖楼一样，它是这个楼的骨架，是基础，所以说界面的框架设计是每一个产品经理和交互设计师都会面临的一个问题，也是很重要的一个问题，也是我们在产品的需求确定之后，面临的第一个问题，这个问题就是我们怎样做一个好的界面框架设计？怎么以最优的方式把我们的产品信息组合起来展现给用户？

十大APP界面框架设计模式

1.标签导航

标签导航是十大界面框架设计里最常用的界面框架设计，也是被业界之内公认的一种普遍使用的页面框架设计。那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计，比如说微博、微信、手机百度、支付宝、淘宝，这些我们所谓的超级APP都是运用的标签导航，无一例外。从这个角度也可以看出来，优秀的产品用标签导航这种页面框架设计是非常普及的。

标签导航位于页面底部，标签的分类最好可以控制在5个之内。

优点

1）标签导航能够让用户清楚当前所在的入口位置。比如对于微信来说，无论用户在“发现”还是“对话框”里面，用户都能通过底部的高亮区域来划分当前所处的这个产品结构的区域。无论是当前位置的判断，还是要找这个入口，都比较方便，比如对于微信来说，很容易都过标签导航找到“朋友圈”。

2）轻松在各入口间频繁跳转且不会迷失方向。比如对于微信来说，微信团队不仅希望我们拿微信来聊天，还希望我们拿微信来逛朋友圈、购物、支付、滴滴打车等等，那么如果能够让用户在不同的入口间实现频繁的跳转，那这时用标签导航是最合适不过的。

3）直接展现最重要入口的内容信息。这有两层意思，第一层就是它能展示出来最重要的入口，比如拿微信来说有那么多的重要入口，显然“微信对话框”最重要，那么他们默认的把微信对话框作为主入口。同样微博最重要的是首页，所以默认把微博首页作为最主要的入口。其次，入口不仅可以展示，入口里面的信息也可以展示。

缺点：功能入口过多时，该模式显得笨重不实用。怎么理解“功能模块过多”，比如说现在标签导航，一般情况下功能入口控制在5个以内，我们也会遇到6个的情况，但那种产品一般来说比较复杂，最少会是3个，最多5到6个。如果过多的话，标签导航会弹不开，那这种模式就失效了。过多不行，过少也不太方便，如果说就一个Tab、两个Tab，那么标签导航下面就会显得特别的空，也不太好看，所以这个时候我们就会知道标签导航的适用范围最好在3至5 个之间，并且这几个功能希望用户能够频繁的去操作。

如果说你的产品比较保守，那么就可以采用这种标签导航。

2.舵式导航

目前流行一种