确认提交
B 端网页界面的样式粗略看起来都很像，但并不代表它们就没有差异 ，教搭建高级感局框架尤其在作品集展示项目中 ，端全更需要表现出项目设计的教搭建高级感局框架 —— 设计感与差异化。
要实现这个目标虽然有很多细节可以讨论 ，端全但其中最核心的教搭建高级感局框架部分 ，就是端全界面全局框架设计的差异 。因为全局框架在多数页面中都可见 ，教搭建高级感局框架对整体设计效果的端全影响也是最大的 ，也是教搭建高级感局框架项目设计实践中的第一步 。
所以今天我们要分享的端全 ，就是教搭建高级感局框架如何设计出具有差异化的 B 端全局框架 ，为后续设计奠定一个良好的基础。
B 端全局框架即项目中常驻核心组件的设计与布局结果 ，包括导航栏 、顶部栏 、悬浮层 、内容区域等 ，最常见的布局如下图所示 。
市面上有 80% 的项目都使用这种布局形式 ，包括几款主流开源框架的官方示例。一方面证明了这种布局形式受到广泛的认可经久耐用 ，另一方面也表明了这种布局形式是“普通的” 、“乏味的” 、“没有设计感”的 。
在常规项目中使用这样的设计没有任何问题 ，但在需要设计感的时候 ，这种布局形式就是直接可以 Pass 掉的选项 。
那我们要往哪个方向设计 ？除了积累外部样式案例外 ，还要学会使用逆向思维来对常规设计标准做出反问 ，再寻找解决的方案 。下面列举几个不同的疑问 ，并给出相应的设计结果 ，帮助大家打开设计思路 。
问题1 ：为什么导航只能做成上下通栏有背景色的独立模块 ？
思路 ：那就把导航做成非通栏的模式 ，比如做成四周有间距的悬浮卡片，或者干脆去背景和页面背景融为一体 。
问题2 ：为什么顶部栏只能做成左右通栏且有背景色的独立模块 ？
思路 ：把顶部栏卡片化，或者干脆移除顶部栏让它和整个内容区域融为一体。
问题3 ：为什么导航 、顶栏 、内容区域要使用不同背景颜色做区分 ？
思路 ：导航和顶栏使用一个颜色 ，或者三个区域使用一个背景色 。
问题4 ：为什么导航只能做在左侧占据内容区域横向空间 ？
思路 ：把导航做到顶部 ，使用多行顶部栏 ，实现上下布局形式 。
问题5：为什么内容区域只能处于右下角且Z轴层级较低 ？
思路 ：可以移除顶栏右侧全是内容区域 ，同时可以将内容区域做成卡片高于导航 。
问题6 ：侧边抽屉只能展开后右对齐且上下通栏？
思路 ：将侧边抽屉卡片化 ，展开后默认上方和右侧有间距 。
所有布局形式最终都需要结合项目的实际情况决定，而上面这些示例虽然都是通过逆向思维形成的 ，但基本也都能找到类似的线上布局案例 。之所以要用逆向思维 ，是因为我们最容易被主流的设计形式所影响形成惯性 ，也就是所谓的“路径依赖”，这对于设计工作来说有很大的坏处 。
经常用逆向思维反问 ，不仅能激发我们更多的灵感 ，也能帮助我们更好的思考设计的动机和逻辑 ，比如回答 “为什么选择使用常规方案” ，或是 “为什么要做的和常规方案不同”。
本篇分享的布局形式，只是全局框架设计中的第一步 ，要实现最终的设计还要结合具体组件的设计样式做决定 。所以下篇分享 ，我们就会围绕全局框架的组件展开 ，来分享如何进一步实现特别且有设计感的B端界面框架 。
希望大家能思路打开 ，我们下篇再贱 ！
作者 ：超人的电话亭
