用户体验优化信息结构设计

有的时候我们在做项目的过程中经常会遇到以下两个问题：

下面从两种维度来解析信息架构。

 

此维度是从产品架构的轻重来划分的，一般的对C类重体验的服务性App都是轻架构；对B类重功能的基本是种架构，下面具体说说这两种架构的区别。

此维度的分类依据是用户的使用场景，以及用户使用目的。

总结：

1重架构产品，ToB产品，如果用户需要靠浏览靠猜来使用产品特性完成任务，那肯定结果是不好的，用户会崩溃

2.轻架构ToC产品如果不是任务式，那很有可能就是用户在无聊，需要进入浏览式。是两种形态的结合

下面，我会以前段时间为公司广告竞拍后台—招客宝的设计经历，来详细描述一样如何组织信息，如何设计信息架构？

    接下来就是如何梳理这三个模块的架构了，其实这个过程如果真的好好设计的话，可能耗时很长，产品的结构各式各样，有从上到下的（决策型功能梳理），也有从下到上（内容整合型功能梳理方法）。在实际的项目过程中，两种方法一般都是结合在一起使用的，既有老板一拍脑袋决定的功能，也有用户调研画像后产生的功能，具体放在什么位置，和产品业务的逻辑流程有关。

下面是我简单的罗列我做招客宝的流程。

      绘制主流程其实在后台设计中蛮重要的，因为一个好用的后台，必须有良好的信息反馈机制，如果设计者不摸清用户的使用流程，那里出错应该有提醒，那里应该跳出说明提示这些交互就无法完成，所以，我在设计后台的时候和产品经理详细确定了每个步骤的流程。

在这里有个遗憾之处：因为在设计此次后台之前没有做大量的用户模型设计，设计师的我无法确定整个主流程是否真的正确，如果有机会重来的话，我会加上用户模型的调研这一步。

综上所属，信息结构已经分好，接下来就是视觉布局的事儿了。

    首页我们根据框架体系绘制出首页的草图（左图）；其次，搭建960栅格系统确定每个模块的位置、大小（右图）。在设计模块功能性布局的时候，我们依据视觉动线的原则从左到右，从上到下的原则，划分功能模块的主次。

    下图为不同的视觉动线适合不同分类的网页布局，主流的观点一般F型布局适合内容为主的网页，比如我之前做过的评价页；

Z型布局比较适合这种不以文本为中心的网页（比如这个项目的首页）。

视觉动线tips：1.用户不读取整个页面，他们只是扫描   2.头两段／标题应传达最重要的信息。   

在后台中表单的设计是不可或缺的，我们在这么多项目经验中，或多或少都接触过表单的设计，一个好的表单应该尽量减少很多惹眼的视觉化元素，因为这样会妨碍用户对表单所提问题的理解，所以在此次项目设计中，我建议一页只做一件事。

16年我在设计笛风分销平台的App工作中，左图是一个由计算表单，核对表单类型组合而成的一个多步骤表单，图1 将选择团期，出游价格人数都收在一个弹出页面的手风琴面板中，图2是一个长页面包括了团期详情，价格&优惠、联系人信息、游客信息等模块，这样的长表单一旦用户填错了数据很难发现，修改也很苦难（图15），因此分拆成几步会是个不错的方法。

       登录表单应该只包括少量的信息输入：用户名、密码、操作按钮、密码帮助等选项，有些应用将这些信息输入框设计在一屏内显示。
以招客宝平台的登录表单为例，由于用户较为特殊，所以增加了用户选择身份的过程；在一开始的原型中，项目经理本打算将两种身份登录做在一个界面中，然而身份1产品经理用的是用户名和密码登录，而身份2供应商则链接到nbooking的登录页登录，这是两个完全不同的交互，所以经过讨论，我们决定将登录分为两步，第一步只解决身份识别，第二部根据身份的不同选择不同的登录页（图2为产品经理登录的界面）

最后将界面的控件提取出来制成组件表，这么做第一可以审视相同控件尺寸风格是否在视觉上一致，其次方便平台二期的功能扩展。

总结

设计师做完一个产品，可以回头想想这个产品信息架构你做了什么样的创新、调整，产生了什么价值。

不要仅仅拘泥于做界面元素的规范、设计细节等问题解决，因为信息架构，是设计大局观的最好练功秘籍。