B端产品布局设计规范

第一次尝试写文章，做设计也有好几年了，真是惭愧啊。刚开始做是从平面设计开始的，到现在的UI设计（其实主要是做B端产品设计），C端做的比较少。

也是为了把脑子里的知识整理一下，现在东西太多太乱了。慢慢开始分析总结一下这些年的收获。这次先从B端布局设计原则开始。

一、布局原则：古登堡、尼尔森

二、结合B端产品和页面分析

三、大厂布局设计规范分析

四、总结

一、布局原则

布局设计在设计的每个领域都有涉及，这里说的不是设计中的布局四原则：亲密、对齐、重复、对比（专业术语：格式塔原则），这是平面设计中常用的布局方式，我的理解就是排版。但B端的布局设计是不同的，每个企业或者产品的设计规范有各自不同的依据。

B端页面布局最常用的原则我见过有两种：古登堡原则和尼尔森F型视觉模型。下面是网上找的图：

（1-侵权提删：古登堡原则）

古登堡原则：阅读引力是从上到下，从左到右，呈现Z字形移动，而起点和终点会作为重点视觉记忆区，中间过程会轻扫作为次要视觉记忆区。左上和右下是用户会比较容易关注和注意到的地方。

 

（2-侵权提删：尼尔森F模型）

尼尔森F模型：我们在第一次观看页面时，视线会呈 F的形状关注页面。先从顶部开始从左到右水平移动，目光再下移开始从左到右观察但是长度会相对短些，以较短的长度向下扫视，形成一个 F形状。

这两个原则都是从用户视觉角度分析，在按需带入产品页面设计的。没法单纯的说哪个对哪个错，或者说哪个更好。因为要结合产品属性、信息结构、及用户心理等因素。

二、结合产品和页面属性分析

我们公司产品的列表页面是参考古登堡原则制定的布局设计规范。这是一个运维产品（我们通常称为SaaS：软件即服务）-列表页面的模板，可以看到大部分内容被表格占据，且表格中的内容是相似的。通过与腾讯蓝鲸团队的沟通，最终确定这种布局的页面用户视角浏览流程是“Z”型的。

主要操作按钮在左侧的第一视角区，通常以“新建”等主要按钮为主、“导出”或“批量操作”等次要按钮为辅一同摆放。因为列表通常是某个任务的罗列，会把新建的入口也放在一起，一是为了方便用户快速找到新建任务入口，二是为了让信息结构更聚拢。强休息区放搜索框。在不同场景下，按钮和搜索框位置要视需求确定位置。在我们公司的大部分产品场景下，按钮是在左侧。最终落脚点是在操作字段（表头属性，技术角度称为字段）。

 

弹窗的布局也是类似的，很容易可以判断出标题和确定、取消按钮是两个视角落脚点。

 

当然不是所有页面都遵循古登堡原则，像下面的表单页面就是使用F模型。因为最主要信息标题都在左侧，且信息流是集中往下走，并不分散也不需要横向跨度很大。所以使用尼尔森F模型就可以支持布局走势。

 

三、大厂布局设计规范

这里以腾讯Magic Box VUE组件库和阿里AntDesign来分析我个人的理解：

 

这是从antdesign官网找到的信息复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。这应该是阿里内部自己建立的布局规范，既不符合古登堡原则，也不适应尼尔森F模型。但从地下不同页面内容的分布来看，我觉得是把这两种模型结合了。请看下图：

 

古登堡原则注重左上角和右下角的内容。尼尔森F模型是只注重左侧内容，这种布局方式通常是信息量比较大时用的比较多。我们把页面的内容拆开看就可以分析出，每个模块也是可以分成不同模型的结合。

 

腾讯Magic Box的布局规范就是前面我们公司用的是一样的，就不多分析了。

四、总结

通常：信息流页面使用尼尔森F模型。需要用户操作页面的则常常把古登堡和F模型结合使用，具体使用哪种看两个：1、用户在页面的常用操作是什么，2、你想或者说是产品想传递给用户的信息是什么。