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

一、全文速览图

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

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

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

二、全局框架的布局模式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、结尾

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

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

欢迎关注作者的微信公众号：「超人的电话亭」