2021-7-7 分享达人
一、布局原则：古登堡、尼尔森
二、结合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、你想或者说是产品想传递给用户的信息是什么。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
您可以选择一种方式赞助本站
支付宝转账赞助
