改版提升产品—如何搭建产品结构层？

我在上一篇文章中（详情见《UI设计师面临的问题—如何改版提升产品？》）提到，改版提升产品并不是只简单从表现层，即视觉层面改版就可以提升产品的。从产品视觉层面进行改版，只是提升产品体验的一部分。那么既然改版产品，那就想让产品整体表现更好，视觉层面改版只是提升了视觉层面的体验。正如我之前举的例子，视觉设计师好似产品的美妆师，更多的职责是把产品的界面包装的更好看。并未动产品的“骨架”，还记得上一篇文章中的那个例子吗？一个女生身高150cm，体重140斤，无论你再怎么怎么化妆，脸蛋再怎么好看也能改变她内部骨架对她的的限制。

之前也提到产品的用户体验要素包括五个层面：表现层、框架层、结构层、范围层、战略层。既然提升产品，那么必然这五个层面必不可少。那么又由于这五个层的关系是这样的：每个层面都是根据它下面的那个层面来决定的。所以，表现层由框架层决定，框架则建立在结构层的基础上，结构层的设计基于范围层，范围层是根据战略层来制定。这种依赖性，意味着在战略层上的决定将具有某种自下而上的的“连锁效应”。

那作为视觉设计师的我们，一般被应聘到公司，产品所要研发基本功能已经确定，不然我想公司也不会招聘视觉设计师。而产品的基本功已经由这个公司高层即决策者已经确定。那么也就是说产品的「战略成」和「范围层」（产品所包含的最功能）基本已经确定。那么作为视觉设计师的我们要想优化产品，那必然要把精力放在产品的其他层面，即：「结构层」、「框架层」和「表现层」。因为产品的另外两个层面「战略层」、「范围层」已经由公司高层确定。

既然『战略层』和『范围层』我们几乎无法改变，那我们就应该把改版软件的重点放在后面三个层面上。又由于产品的下一层决定上一层，那么我们若是想改版产品那就要从，产品的『结构层』入手。

产品的结构层：结构层是五个层面的第三层，用来设计用户如何到达某个页面，并且在他们做完事情之后去到某个地方。它也适当的将我们关注点从抽象的决策层（战略层）和范围层的问题上，转移到更能影响最后的用户体验的具体因素。那么移动端的信息架构有哪几种方式呢？下面我也总结了下，并分开阐述：

移动端信息架构
移动设备也有自己的一套信息架构模式。但是移动站点或应用的架构并没有一定之规。比如下面这些比较热门常用的模式：分层结构、轴辐式结构、套娃结构、标签视图、便当盒结构及筛选视图结构。那我们一一举例分析他们各个的利弊。

1.分层结构

1.png

分层结构模式是一种比较标准的网站结构，其拥有索引页及一系列子页。对于响应式网站，可能这是唯一可用的模式了，不过你也可以自己构思其他模式来针对移动端量身定制用户体验。

Luke Wroblewski的“移动为先”方法可以帮助我们将注意力先集中到关键的内容上，例如有助于打造优秀用户体验的功能及用户旅程等。

适合于
组织需要遵循台式机网站结构的复杂型网站结构。

要注意的问题
导航。多层面导航结构容易给使用小屏幕的用户带来问题。

2.轴辐式结构轴辐式结构

2.png

轴辐式结构可让用户通过中央索引向外导航。这是iPhone默认采用的模式。用户不能在各个“辐条”之间进行导航切换，只能先回到轴心再出去。这个方式在历史上一直用于工作流程存在限制（通常是表单或购买流程等技术限制）的台式机情况，但其现在也开始逐渐流行到了移动端，因为在移动端用户往往需要专注于单项任务，另外设备的形状因素也造成全局导航使用比较不便。

适合于
每个功能都有自己内部导航和用途的多功能工具。

要注意
需要执行多任务的用户

3.套娃结构

3.png

套娃结构模式能够以相对线性的方式引领用户查看细节内容。当用户身处环境不便时，这种导航方式相对比较快捷简单。其简单的前后推进模式还能让用户清楚明确地知道自己目前在内容结构的什么位置。

适合于
主题单一或彼此相近的应用或网站。也可用作其他模式的子模式，例如标准分层结构或轴辐式结构模式。

要注意
用户无法快速在不同板块直接切换，所以要考虑其适用性，不能成为对内容探索的障碍。

4.标签视图

4.png

这是普通应用用户比较熟悉的模式之一。其实际上就是通过工具栏菜单把一系列板块绑在一起。这种方式可以方便用户在首次打开时快速浏览并理解应用的全部功能。

适合于
主题类似的工具类应用。多任务。

要注意
不要做的太复杂。这一模式最适合于简单的内容结构。

5.便当盒/仪表盘

5.png

便当盒或者叫仪表板模式可以通过使用组件形式展示相关工具或内容的不同部分将详细具体的内容直接呈现到索引屏幕上。这一模式比较复杂，因此更适合于平板电脑。其可以让用户一眼发现关键信息，因此功效强大。但是这种模式同时也严重依赖于设计界面的优劣以及信息呈现是否明确。

适合于
主题类似的多功能工具和基于内容的平板电脑应用。

要注意
平板电脑的屏幕较大，因此能够留出更大的空间发挥这一模式。但设计时尤其要注意理解用户与各部分内容之间进行交互的方式，以便确保应用的简便和乐趣性。

6.筛选视图

6.png

筛选视图模式可以让用户通过选择筛选器选项形成分类视图以便在系列数据中进行导航。筛选以及分类搜索方法的使用是方便用户以自己喜爱的方式探索内容的好办法。

适合于
内容量大的应用或网站，例如文章、图片和视频类网站。可以用做杂志类应用或网站的模板，或者用作其他导航模式的子模式。

要注意
移动端。考虑到复杂性问题，筛选器和分类搜索在比较小的屏幕上显示时可能会有困难。

最后：
开发出适合于手机和平板电脑的信息架构只是打造优秀移动用户体验的第一步。上面列举的这六种，关于「结构层」的布局方式，只是现在最常用的的布局方式，在一个软件里 可能会兼具了好几种架构的布局方式。由于每个产品行业特性和属性的不同，并不能一概而论，给一个具体的架构方式。具体采取那种结构层的布局方式，还需根据你的产品具体应用。万变不离其宗，了解每一种架构的优、劣点，再结合产品的具体内容、行业、等特性，作出适合自己产品结构层布局的产品。

这是我简单梳理的结构层的布局，希望这些能在你完善产品的路上帮到你。