如何用栅格系统布局页面？

什么是栅格系统？主流网站如何使用栅格系统？如何用栅格系统布局页面呢？如果很着急，需要马上使用栅格，可用：http://grid.guide在线栅格工具，快速生成栅格使用。没那么着急，想系统的了解栅格系统，便于以后更灵活的应用，可以查看以下内容。（阅读以下内容，需要15分钟）目录：什么是栅格系统主流网站如何使用栅格系统如何用栅格系统布局页面影响网页设计的两大因素一、什么是栅格

业界 2018年12月16日

干货分享：如何更好地使用栅格系统

栅格系统在UI设计和前端开发中是被应用的很广泛一套体系，但真正能掌握并很好运用的人却不多，本期我为大家找到这篇干货文章，分享原作者通过多年实战收获的经验总结，一起来学习吧！环顾身边常见的优秀设计很多都使用了栅格系统，你可能非常赞同在界面中使用栅格系统，但却没有人告诉你应该如何使用它们。印刷中也会用到栅格，但就本文而言，我主要想讨论的是用于PC和移动设备上的栅格系统设计。紫色

产品设计 2019年05月14日

栅格系统基础六要素

温馨提示：这是一篇非常非常基础的关于栅格的文章，如果你已经对栅格系统有了深入的理解， 就不用浪费时间看这篇文章了！以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系统的理解。首先我们必须要对栅格系统有一个基本的认知，我将这四个字拆分开成“ 栅格 ” 和“ 系统 ”两个词来分别

交互体验 2017年04月24日

6千字，栅格系统使用指南

一、栅格的历史可以追溯到古希腊和古罗马时期的建筑设计中。在建筑设计中，栅格是一种用于规划和布局建筑物的结构性元素。在古希腊和古罗马的建筑设计中，建筑师们使用栅格

产品经理 2024年05月10日

为什么移动端设计中不使用栅格系统？

我们都知道做网页相关的项目，不管是 C 端的还是 B 端的，往往都会应用响应式布局，用了响应式布局，就肯定要做栅格系统，才能确保响应式的正常执行。但是，移动端要

产品设计 2023年11月16日

如何运用栅格系统设计一个Logo？

栅格线真的只能拿来装逼展示吗？有什么目的呢？平时应该怎么看待它，怎么用它，这篇文章或许能给你答案，一起来学习吧。经常看到很多LOGO初看一般，但只要加上了栅格线，感觉瞬间就上了一个档次。记得有个比较出名的例子就是锤子手机的Logo，是不是觉得右边的栅格线加上之后，瞬间高大上了很多。那这些栅格线真的只能拿来装逼展示吗？有什么目的呢？平时应该怎么看待它，怎么用它，这篇文章或许能

产品设计 2020年01月09日

交互规范：栅格系统让页面元素间距更统一

1. 什么是栅格系统1.1 网格单位栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。在网页设计中经常将网格的大小定义为8，不仅符合偶数的思

交互体验 2023年07月22日

别再说不懂栅格系统了

一、栅格系统的定义讲解栅格系统之前，先来了解一下什么是栅格系统。不妨来看看百度百科跟维基百科是怎么解释的：百度百科：栅格系统英文为“grid systems”

产品设计 2023年08月05日

栅格篇 | 不会栅格系统？拿走这篇零基础使用指南！

在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时还在不同系统及不同尺寸的设备上保持良好

产品设计 2023年08月08日

利用栅格系统，构建优秀的响应式设计

一、写在前面今天，90％的媒体互动都是基于屏幕的，通过手机，平板电脑，笔记本电脑，电视和智能手表来与外界产生联系。多屏设计已成为商业设计中不可或缺的一部分，响

产品设计 2023年07月22日