由于上文将产品的信息架构做了全新的复盘。所以在原型开始之前对导航和一级页面重新梳理，这是一个很重要的需要反复推敲的过程。在平时的工作过程中，页面布局一般相对稳定使用周期长难以修改，这与产品定位、迭代方向和设计团队响应速度等有关。所以在产品设计之初在信息架构确认后，应反复推敲来确认交互设计师将业务需求转化为用户交互界面的第一步。几年的工作积累现在回过头来看，大多数的产品导航设计和页面布局是过于急躁的。如何才能定义好合适的导航，理性的设计出更合理的页面布局？首先得搞懂什么是导航？什么是页面布局？

导航

导航是信息架构界面可视化第一步。通过信息架构可以很清晰的得到导航的设计方案。再配合合理的首页布局，就可以完整第一次的导航系统。检验导航设计是否合理，需要产品设计人员以外的同事或者目标用户协助进行主要的任务体验。在用户操作流程设计后，则可以测试出整个流程设计的使用感受。

界面布局

界面布局是建立在对界面任务理解透彻后开始的。界面任务的梳理依据是用户任务和产品需求。以用户任务为主要目标，将界面信息根据重要性、关联性等进行组块分类和布局。以下内容是从网易微专业的交互设计课程上学到的。

界面布局常见难点：1.内容太多；2.分类模糊；3.和竞品重合度高。

解决方法：

1.内容太多，可用以下原则进行检查：

• 整体原则：清晰的视觉引导。遵循用户的使用惯性，不做不必要的不符合用户习惯的创新。
• 显示：清晰的页面逻辑关系，突出主要的任务流程和功能。
• 弱化：将优先级较低的功能弱化，减少认知压力。用格式塔心理学理论的六大原则进行分析设计。六大原则：接近性、相似性、连续性、封闭性、对称性、情感化。
• 删除：梳理页面信息，将不必要的信息进行删除。将重复累赘信息进行合并或者用其他的方法进行创新设计。
• 隐藏：对于不常用的、不太在意的、高级的功能进行隐藏。需要时再呼出。

2.分类和层级模糊，可根据以下指标进行：使用人数、使用频率、重要程度、综合优先级。

3.和竞品重合度高是很常见的，原因是用户养成了很多使用习惯，在不改变用户使用习惯的条件下，如需做差异化设计，可通过情感化设计和微动画交互来提升用户的体验感受。

影响因素：操作频率和距离与面积。按钮大小设计和界面元素设计可遵循费茨法则。

导航设计复盘

由于产品功能多，信息架构复杂，所以将每个页面信息单独整理，便于为界面布局设计提供清晰的思路。

以下是复盘信息架构的五大调整：

1. 重新定义功能。将进货设定为入库，将开单设定对出货开单并独立出来。将入库和入库记录归类为仓库管理，将仓库操作归类为仓库日志，将订单定义为单纯的出货线上线下订单；
2. 整合开放功能。将各种独立的信息设置、规则设置功能整合为一个开放模块；
3. 场景归类功能。将管店页面和其他安排不合理的胡乱堆砌的功能入口分发到合适的页面中；
4. 明确功能界限。将分析修改为统计有三点原因，首先是很多数据只留在统计层面，开发进度无法很好的支撑分析功能；然后分析需要专业的数据人员和业务人员配备设计分析指数，这也需要根据团队的实际产能来；最后分析可以属于高级收费功能，越智能越复杂的数据不适合在移动端查看和操作。通过查找业务资料了解店铺经营情况的分析指数后对统计模块增加了一些功能；
5. 完善核心功能。在原有的出货开单功能上添加灵活快速开单，将快速开单、扫码和手动录入商品三种模式合为一体，形成独立而完整的开单模块。

根据这五大调整，将导航重新设计。由之前的标签导航调整为鸵式导航加抽屉导航。“首页-货单-仓库-分析-管店”调整为“首页（带抽屉）-订单-库存-统计+开单”。首页和抽屉导航都属于整合模块，其他都属于独立模块。

鸵式导航的中间是开单，开单是一个即时并支持多种复杂的场景的功能，也是整个产品最高频的功能，并不需要从属于某个模块，可直接触发二级页面任意切换开单场景高效开单。

抽屉导航的内容主要是店铺信息、账户信息、以及通用设置和个性化设置等。整个模块不需要高频操作，每个条目之间没有强关系，开放管理。

把新的导航和信息架构带入到用户反馈。可以发现找不到的类似账本等高频功能调整到了首页，快速记一笔和开单整合使得开单场景覆盖更大，以及用户找不到的设置问题都进行了聚合。解决用户提出的一半以上找不到功能的问题。剩下的问题就交给页面布局和操作流程来解决。

总结：经过竞品分析到信息架构再到导航设计这一步，所有功能经过打散重组提炼出几个核心的功能并以全新的方式排序是一个复杂且漫长的过程。仿佛确定产品导航才真正进入产品设计的第一步。而我用封闭的分析方法来梳理必然少了更多重要的环节。想到要从调研到启动，确实会是一个很大的工作量。现在来看这些工作量，显得必不可少，因为这些工作的确能让产品出色很多。

1. 从架构上突出产品的差异化。通过竞品分析和对自己经历的产品的全面剖析，加深了对自身产品的认识。从架构上认识自身产品的优势和差异，以致于避免盲目模仿而降低了自身产品的特点。
2. 从操作场景中整合功能模块。整合用户反馈复盘后，总能得到很清晰的答案。然而这并不是从理论角度去研究出来的，而是用户真真实实的体验需求，这种需求和经过长期累积下来的方法论完全融合。所以说不了解方法论没关系，了解用户自然可以轻松地找到设计方法。
3. 先找到功能再到会用和好用。竞品同质化严重但也存在不少差别。有的入口设计很扁平，内容支持全面，但是分布零散没有主次关系。有的功能使用频率高操作流程很自然流畅但入口很隐蔽。这些都会导致找功能困难。所以根据场景给信心分层，突出核心对用户使用是有正面影响的。

页面布局再设计

页面布局的复盘，继续解决找不到功能的问题。用户反馈提出了库存修改和盘点单，店员权限和店员加减，如何查看账单这三个问题。从用户的提问其实可以很清晰的看出用户潜意识是将库存修改和盘点单归为一个大场景，店员权限设置和店员数量加减归为一个大场景的。账单对商家而言应该仅是除了开单外的核心且高频的功能，将账单和今日收入统计归为一个大场景。而上一步的信息架构复盘也是从用户使用场景出发，重组功能结构。所以在复盘页面布局过程中，也要注意使用场景的相关性。将相关功能或内容有效重组。

下面是新导航后的一级页面的布局

• 首页：宫格布局。整个页面由数据和入口组成，没有操作和编辑功能。将相互独立的入口按规律整理分组后排列出来，一目了然。
• 抽屉：列表布局。由于抽屉内功能都是独立的个人中心、信息设置等低频功能。内容少，相互关联性弱，所以选择抽屉导航中最常见的列表布局。
• 订单：tab导航+列表布局。订单分门店内和线上两种订单，用一级tab区分。而线上订单有多种状态，用二级tab切换。全局支持点击和滑动，有利于大屏幕的快速切换查看和操作。
• 库存：列表布局。和之前的库存相比，在信息内容和交互方式上都做了调整。首先将之前默认隐藏起来的库存操作功能展示在库存列表的顶部，让用户对库存管理的支持一目了然，在网上滑动的过程中可消失。然后信息展示由之前的库存数和进货价调整为库存数和销售量。最后由于入库功能的加入，也支持从列表中选择单个商品左滑进行入库、盘点等，也就是库存管理功能从之前的仅支持批量操作到现在的支持批量和单个商品的操作。
• 统计：图表布局+宫格布局+列表布局。这个模块是建立数据化智能化店铺的根本。一定的规模或较多流量的店铺可升级为智慧门店。同时智慧门店会有多方数据关联。所以要承载复杂的数据查看操作以及对比等功能。所以手机端小屏幕相对PC端更难承载。通过减法列出商家最关注的数据引导商家灵活调整运营策略。从营收、订单、库存、销量四个角度给商家做统计。通过分析营收可多维度了解店铺经营状态，是所有统计中商家最关注的，所以我选择将营收用图表布局并在一级tab呈现，其他的选择宫格入口查看。热销和滞销都是排行的方式，使用列表布局。
• 开单：tab导航+列表布局。开单模块可直接跳转二级页面。tab支持滑动切换，灵活切换开单方式。同时手动开单只支持点击商品列表操作，与tab滑动切换无冲突。同时扫码开单后录入的商品列表支持数量编辑，支持点击删除，不支持滑动删除，支持呼出键盘之间改数字。

以下是界面布局复盘后的一些感想：

1. 加入C端产品体验设计思维。由于目标用户大部分是小微，除了小部分购买的传统的店铺服务系统的商家外大部分是第一次使用软件管店。所以页面布局不可太枯燥和过于功能化，应加入他们更加熟悉的C端产品设计思维，注重交互反馈和引导帮助，帮助用户清晰操作效率先行。
2. 优化并加强信息场景相关性。全新的页面布局从信息相关性到信息模块化切入。之前的商品库存展示内容是商品名称+图+库存数+进货价，现在把进货价改成了月销量，月销量和库存数的相关性更强，让用户一眼就能清楚知道月销量和库存的关系。
3. 独立操作和批量操作并存。新的库存内单个商品支持独立操作，这样在操作流程中可以减少打开批量操作页面去选择商品的步骤，使库存操作变得更灵活。这个思维方式和购物车、客户列表等一致。
4. 完善功能建立体验闭环。除了整合功能加强场景性外，还需要考虑一些极少数的场景实现真正的灵活操作。这就需要不全一些末端的简单功能，形成体验闭环。这次的布局中完善了开单的体验闭环，支持更多灵活的开单场景。

这是我复盘系列中的一篇文章。年前想将这系列文章都发布出来，可随着复盘的深入，对专业知识的理解越来越深刻，导致我对之前的分析判断有了一些怀疑，我想优化好再发出来，却发现不如重新写。不过我还是会把之前的东西补全，那只是对以前的总结而已。未来会有更多更科学的设计思路指导的前进。学习就是这样，总有更好的。工作好几年才体会到，校园时期做设计的那种有理有据的习惯是那么的难能可贵。

作者：买恰恰，微信公众号：买恰恰没吃饱