案例分析 | 响应式栅格的布局研究

如何根据设计目标使用合适的网格布局？在这里，我们将研究布局分类，分析它们如何扩展到移动领域。 网格系统是一种系统调整设计、建立层次结构和逻辑的方法。网格系统用于许多好的设计，使设计看起来更加统一和协调。 在当今多设备环境下，响应格栅布局可以创造更流畅的跨屏体验。 文章目录： 1. 单栏布局 又称全屏布局，是登录页面最简单的布局方式。在单栏布局中，我们有足够的空间展示大型图片，以增强产品或品牌想要传达的信息。 在这样的布局设计中，照片或图形会被拉到前景的位置，给用户留下深刻的印象，所以这是主页、简介页、操作指南或展示新产品的一般布局。 下图左侧是WeWork网站主页，右侧覆盖12格栅系统。 1.1 格栅用法分析 单列布局中的每个元素都可以作为单独的模块，因此在移动设备上很容易扩展。Wework网格系统中的列(粉色)和模块(紫色)突出显示在登录页面上。 在页面中，小卡模块和大模块之间的间距是一致的。这个例子表明，单列布局的设计也可以以一种有趣的方式分解页面。 1.2 案例 下图是一些单列布局的案例。试着分析这些网页的网格布局是什么样的？ 2. 双栏布局 它是最常见的布局之一。双栏布局有两个优点：一是保证文本宽度在6-8列，防止文本阅读过长；另一种是将其他元素折叠在侧栏中作为导航或广告。 以8列为主要内容区，另外4列为侧面内容区，使左右两侧均为偶数，有利于后期设计开发。 2.1 案例 这种布局被广泛使用，适用于网站的内页或有大量文本的页面。Mango Learning将左栏导航到不同的章节课程。 Discord网站左侧有一个常见的问题列表，显示当前的问题。 Food