用这6个逆向思维
，教你搭建高级感的B端全局框架

确认提交

一 、全文速览图

B 端网页界面的样式粗略看起来都很像 ，但并不代表它们就没有差异，教搭建高级感局框架尤其在作品集展示项目中，端全更需要表现出项目设计的教搭建高级感局框架 —— 设计感与差异化 。

要实现这个目标虽然有很多细节可以讨论，端全但其中最核心的教搭建高级感局框架部分，就是端全界面全局框架设计的差异 。因为全局框架在多数页面中都可见，教搭建高级感局框架对整体设计效果的端全影响也是最大的，也是教搭建高级感局框架项目设计实践中的第一步。

所以今天我们要分享的端全
，就是教搭建高级感局框架如何设计出具有差异化的 B 端全局框架，为后续设计奠定一个良好的基础。

二、全局框架的布局模式

B 端全局框架即项目中常驻核心组件的设计与布局结果 ，包括导航栏
、顶部栏、悬浮层 、内容区域等，最常见的布局如下图所示。

市面上有 80% 的项目都使用这种布局形式，包括几款主流开源框架的官方示例。一方面证明了这种布局形式受到广泛的认可经久耐用 ，另一方面也表明了这种布局形式是“普通的”
、“乏味的”
 、“没有设计感”的
。

在常规项目中使用这样的设计没有任何问题，但在需要设计感的时候 ，这种布局形式就是直接可以 Pass 掉的选项。

那我们要往哪个方向设计 ？除了积累外部样式案例外 ，还要学会使用逆向思维来对常规设计标准做出反问  ，再寻找解决的方案 。下面列举几个不同的疑问 ，并给出相应的设计结果  ，帮助大家打开设计思路。

问题1 ：为什么导航只能做成上下通栏有背景色的独立模块 ？

思路 ：那就把导航做成非通栏的模式，比如做成四周有间距的悬浮卡片，或者干脆去背景和页面背景融为一体。

问题2：为什么顶部栏只能做成左右通栏且有背景色的独立模块？

思路 ：把顶部栏卡片化，或者干脆移除顶部栏让它和整个内容区域融为一体。

问题3：为什么导航 、顶栏、内容区域要使用不同背景颜色做区分？

思路 ：导航和顶栏使用一个颜色 ，或者三个区域使用一个背景色 。

问题4：为什么导航只能做在左侧占据内容区域横向空间？

思路：把导航做到顶部，使用多行顶部栏
，实现上下布局形式  。

问题5 ：为什么内容区域只能处于右下角且Z轴层级较低？

思路：可以移除顶栏右侧全是内容区域，同时可以将内容区域做成卡片高于导航
。

问题6：侧边抽屉只能展开后右对齐且上下通栏 ？

思路
：将侧边抽屉卡片化，展开后默认上方和右侧有间距 。

所有布局形式最终都需要结合项目的实际情况决定，而上面这些示例虽然都是通过逆向思维形成的，但基本也都能找到类似的线上布局案例。之所以要用逆向思维，是因为我们最容易被主流的设计形式所影响形成惯性，也就是所谓的“路径依赖”
，这对于设计工作来说有很大的坏处 
。

经常用逆向思维反问
，不仅能激发我们更多的灵感，也能帮助我们更好的思考设计的动机和逻辑 ，比如回答 “为什么选择使用常规方案” ，或是 “为什么要做的和常规方案不同”。

三 、结尾

本篇分享的布局形式 ，只是全局框架设计中的第一步 ，要实现最终的设计还要结合具体组件的设计样式做决定。所以下篇分享，我们就会围绕全局框架的组件展开 ，来分享如何进一步实现特别且有设计感的B端界面框架。

希望大家能思路打开，我们下篇再贱！

作者  ：超人的电话亭