当你想要在某宝买一件衬衫时，你清楚地知道如何去寻找或搜索服装类的商品。看，这就是信息组织的重要性。那么，信息该如何组织，又该如何呈现在界面上呢？本文将从信息架构和整体布局两方面展开讨论~
信息架构
信息架构的主要目标就是让用户高效、有效地找到自己想要的信息，所以信息组织应该符合用户的认知模型。常见的信息结构主要有以下4种：
1.层级结构（树状结构）
含义：节点（信息组织的基本单位）与其他相关节点之间存在父级/子级的关系，子节点代表更狭义的概念，从属于代表更广义类别的节点。
总结：向用户提供一个线索
应用：产品的信息存在层级关系，产品目标是提供清晰的路径帮助用户寻找想要的信息
比如，我们官网的信息架构
某宝的产品分类
2.矩阵结构
含义：用户可以在节点与节点之间沿着两个或者更多“纬度”移动。
总结：向用户提供两个/多个线索
应用：产品信息存在多种组织方式，需要帮助“带着不同需求而来的用户”在相同内容中找到想要的信息；
比如：腾讯云的信息架构；
只需要单个产品「数据安全审计」的用户和需要整个解决方案的用户，都可以在腾讯云中找到「数据安全审计」这个产品；
某设计公司的案例分类
需要「出行与汽车」相关案例的用户和需要「产品从0-1」相关案例的用户都可以在某设计网站中找到「上汽荣威」的案例；
3.自然结构
含义：没有一致的模式，节点被逐一被连接起来，没有太强“分类”的概念。用户在结构中的哪个部分，没有明确的指示；
总结：不向用户提供线索；
应用：产品信息间关系不明确，或者内容一直在演变，产品目标是鼓励用户探索，沉浸于产品之中；
比如：知乎官网的信息架构。
知乎是以问答为内容主要形式的UGC社区，其内容信息关系不明确，内容一直在变化。
微博的信息架构
4.线性结构
含义：最基本的信息结构类型，连贯的语言流程。
总结：向用户提供线索，该线索具有引导性。
应用：产品呈现信息的顺序对满足用户需求非常关键，常用于互联网中小规模的结构。
比如，腾讯云-解决问题模块。
阿里云-控制台的新手引导
整体布局
信息组织完成后，就要考虑信息呈现的问题了，也就是如何规划我们的导航，目前导航的布局主要分为以下3种：顶部导航、侧边导航、顶部+侧边导航。下面将从优点、缺点、使用场景及应用4个方面对这3种导航做具体介绍。
1.顶部导航
优点：顺应从上至下的浏览顺序，方便浏览；占用面积小；
缺点：菜单数量和文本长度被限制；扩展性较差；
适用场景：菜单种类较少，页面篇幅长；
应用建议：a.菜单权重常常与排列顺序正相关；b.建议2～7项内容使用；c.建议1～2个层级，超出2个层级时，采用弹出式导航。
比如：招商银行一网通的顶部导航；
苹果官网的顶部导航
腾讯云的顶部+弹出式导航
2.侧边导航
优点：可见性更好，易于扫读；方便切换；扩展性好；
缺点：占用面积较大；
适用场景：菜单种类较多（多于6项）；
应用建议：a.菜单权重受排列顺序影响较小；b.可承载多个层级（建议1～3个）；c.系统右上角结合实用工具（搜索、帮助、通知等），多用于中后台的管理型、工具性网站；
比如：Ant design的侧边导航；
阿里云-账号管理的侧边导航及右上角实用工具
某OA系统也采用侧边导航+右上角实用工具的方式
3.顶部+侧边导航
优点：降低用户感知层级；
缺点：占用面积较大；
适用场景：功能很多，层级较深；
应用建议：a.顶部导航多用于提供全局类目与功能，侧边导航多用于提供多级结构收纳和排列网站架构；b.顶部导航与侧边导航不一定存在层级关系；
比如：招商银行一网通的顶部+侧边导航；
腾讯云-账号中心的顶部导航+侧边导航
顶部导航与侧边导航无层级关系。当用户在较深层级操作时，顶部导航可以快捷跳转。
确定好导航布局后，剩下的就是内容区域的布局了，虽然说该部分的布局方式需要根据内容具体分析，但是也存在很多规范布局的方法，让设计更具规律性、一致性和复用性，接下来就简单介绍一下如何使用栅格系统来布局页面。
第一步 确定设计稿基准尺寸
1.当产品用户为特定用户时（例如，某公司员工），收集用户数据，确定基准尺寸。
2.当产品用户为全网用户，无法统计用户屏幕分辨率情况，可考虑使用目前国内PC端排名前三的屏幕分辨率1920*1080、1366*768、1440*900。
第二步 确定页面布局结构
1.顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
2.顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
3.顶部导航高度的范围计算公式为：48+8n。
4.侧边导航宽度的范围计算公式：200+8n。
第三步 为内容区域建立删格系统
以sketch为例，设置最小单位（通常为8px）、总宽度W、列数N（web端通常为12列、24列）、水槽G、列宽C。
第四步 确定盒子（Box）比例
1.根据业务内容，确定盒子宽度及页面比列。
2.常用的比列有：1:1:1、1:2:1、3:5、2:3:3、1:1:1:1、1:2；
3.同一页面一般使用一到两组比例值的组合，避免组合过多不利于阅读和使用。
另外，通过观察不同页面的内容布局，发现盒子的比例，可根据页面属性、页面的内容量以及内容的重要程度确定（当然如果大家有更多的见解，欢迎随时补充噢~）
比如：采用单栏布局的腾讯云首页。
采用单栏布局的腾讯课堂首页
采用2:1方式布局的人人都是产品经理内容页。
采用1:1:1、2:1方式布局的阿里云-控制台。
采用通栏、2:1方式布局的腾讯云-账号管理。
采用9:1方式布局的Ant design。
以上就是关于产品信息架构和整体布局的分享，希望为大家的工作带来一点点帮助，前路漫漫，我们一起努力呀~
