浅谈WEB端布局框架的思考与设计(2)

2. 分层逻辑

基础层为常置的的功能底层，是提供稳定性和可预测性、必不可少的层级，具体有顶部导航模块、左侧导航模块等。

内容层可分为常置展示层，具体有主内容模块、左右内容模块等。

叠层为动态出现的功能顶层，始终叠加在基础层及内容层上方，是链接上下体验流程的模块，具体有抽屉模块、弹窗浮层模块。

四、常用的基础布局与扩展布局

本文主要梳理基础层、内容层相关模块所组合的布局框架。在查阅相关文章和书籍后，我们总结出了Web端三种基础布局和五种扩展布局。

1. 上下布局

这种布局常用在Web端首页，上半部分为导航或页眉模块，下半部分为主内容模块。简洁明快，干扰信息少。随着屏幕、设备的不同，内容模块可设计成固定宽度或横跨整个页面两种视觉布局。

IBM Design首页即采用上下布局，黑白视觉系的顶部导航及大面积的主要内容模块展示图使得页面设计干净清爽，有足够强的视觉表现力。IBM设计师同时采了用响应式设计，控制好屏幕分辨率断点，使该官网在任意设备下浏览都能达到最佳的用户体验。

2.左右布局

左右布局常出现在欧美国家的设计网站，视觉冲击力强。

Atlassian Design统一采用了左右布局，页面左边为全局侧边导航模块，其他 部分为主内容模块。从交互体验以及用色搭配等视觉层面分析，Atlassian整体 布局结构清晰有条理，用户按照从左至右的视觉顺序浏览并可快速理解内容，精美绘制的插图更是让网站充满了吸引力。