栅格系统 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

栅格系统话题

首页
设计文章
栅格系统

用7大章节，帮你从零开始学会栅格系统

UI

用7大章节，帮你从零开始学会栅格系统

本文用7个章节，从栅格的定义到栅格的应用、制定等多个方面，帮你掌握栅格系统的运用。

2022/07/21

如何构建一套 B 端栅格体系？我总结了五个方面！

UI

如何构建一套 B 端栅格体系？我总结了五个方面！

本文旨在通过查漏补缺的形式，讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。

2022/03/26

万字干货！从4个方面完整解析栅格设计

UI

万字干货！从4个方面完整解析栅格设计

本文主要介绍等距栅格，从概念、结构和设计上更有效解决栅格问题。

2021/11/11

8000多字！超全面的栅格系统入门手册！

UI

8000多字！超全面的栅格系统入门手册！

栅格系统不是令人「谈之色变」的超高深技巧，而是设计界约定俗成且广泛运用于平面设计及产品设计领域的设计工具。在涉及到组织信息的工作内容时，合理的使用栅格系统能够从设计效率、设计质量、多角色设计协作等多方面推动设计师的工作。

2021/03/30

用超多案例，帮你掌握栅格系统的布局设计

UI

用超多案例，帮你掌握栅格系统的布局设计

如何根据设计目标选用合适的栅格化布局？本文通过多个案例深入研究，从 3 种布局方式以及栅格用法来了解如何进行栅格系统布局设计。

2020/05/11

这份上万字的指南，帮你学会用栅格系统构建响应式设计

UI

这份上万字的指南，帮你学会用栅格系统构建响应式设计

在响应式设计中使用栅格系统是非常重要的，但实际项目中栅格系统到底怎么样运用呢？用一篇万字干货帮你掌握，如何利用栅格系统构建优秀的响应式设计。（文末附作者绘制的 5 套栅格系统库福利~）

2020/04/02

学会用栅格系统，普通LOGO秒变高大上！

平面

学会用栅格系统，普通LOGO秒变高大上！

经常看到很多 LOGO 初看一般，但只要加上了栅格线，感觉瞬间就上了一个档次。那这些栅格线只能拿来展示吗？平时应该怎么看待它，怎么用它？

2020/01/08

大厂高手出品！中台组件设计指南：系统布局

UI

大厂高手出品！中台组件设计指南：系统布局

本文将为大家分享 Web 端的系统布局，从基本布局初识、网格、布局模块到栅格进行完整链路内容整合，并以简单易懂的案例与大家进行探讨。

2019/12/19

看不懂不会用的栅格系统，这篇帮你彻底掌握它！

教程

看不懂不会用的栅格系统，这篇帮你彻底掌握它！

经典的栅格系统到底该怎么用？本文用超多案例让你完全掌握这个知识点。

2019/05/17

彩云译设计

新人来收！10分钟帮你掌握栅格系统基础知识！

教程

新人来收！10分钟帮你掌握栅格系统基础知识！

编者注：看过很多栅格系统的科普，还是看不懂？那本文绝对值得你花十分钟试一下！语言浅显直白，配图清晰易懂，保证轻松学会。

2018/12/24

基础知识！UI设计师需要掌握的栅格设计原理和技巧

UI

基础知识！UI设计师需要掌握的栅格设计原理和技巧

编者按：本文适合对栅格系统不熟悉的新人阅读，大量的配图和深入浅出的阐述可以让你快速理解什么是栅格系统。马小晴：我们都知道在平面设计里，运用网格辅助设计，可以让页面富有统一的秩序感和韵律。在网页设计里，我们也需要视觉表现出统一性和一致性，让页面更加专业和系统化；但同时，网页设计相对于传统平面设计也更强调动态化、体系化的思考。

2018/11/22

超全面总结！如何利用栅格系统做响应式设计？

UI

超全面总结！如何利用栅格系统做响应式设计？

@UX-BOY ：本文主要与大家分享如何利用栅格系统完成后台页面响应式设计，介绍响应式设计的思路与方法。一、什么是响应式？按照本人自己的理解，响应式就是通过合理的设计方案配合规范的技术实现策略，使同一个 Web页面在各个终端（设备）不同分辨率屏幕上都能有最佳的用户体验。

2018/10/04

后台产品设计

超全面！栅格系统及其在后台设计中的应用总结

产品

超全面！栅格系统及其在后台设计中的应用总结

@UX-BOY ：关于栅格系统的文章不少，但鲜有专门针对栅格系统在后台设计中相关应用的文章。本文希望抛砖引玉，能引起更多同行的交流与讨论。一、栅格系统的目的栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。

2018/09/01

饿了么高级设计师：界面视觉设计 5 要素

教程

饿了么高级设计师：界面视觉设计 5 要素

一款 App 或 Web 产品，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师，如果连「表现层」的内容都还一知半解就去盲目地学习其他领域，这是不提倡的。这里说的「表现层」是指视觉设计层面，在界面的视觉设计中同样也包含了5个视觉要素：色彩、文字、图标、图片、空间。

2018/04/11

UI

UI 新手福利！iOS系统图标栅格系统全方位解密

今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知，在图标设计中都会使用统一的系统图标栅格系统。那么iOS的系统图标的栅格系统如何定制呢，这篇文章就来独家揭秘iOS系统图标的栅格系统定制的奥秘。

2018/01/04

基础小科普！3种国内外最常见的响应式栅格

教程

基础小科普！3种国内外最常见的响应式栅格

Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统，花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。可当真正需要用到响应式这东西时，在做完竞品调研后，我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统，因为：那两张英文图表对艺术背景的设计师来说真的很难理解。你设计的产品很有可能比 Material Design 的预期更加复杂。

2017/11/27

新手科普文！每个设计师都该懂的栅格系统基础六要素

UI

新手科普文！每个设计师都该懂的栅格系统基础六要素

以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系统的理解。首先我们必须要对栅格系统有一个基本的认知，我将这四个字拆分开成“栅格”和“系统”两个词来分别解释。关于栅格栅格是由网格演变而来的另一种说法，都是一个意思——格子，所以不要觉得栅格有多高深复杂，如果把他描述成格子，你还觉得它有多难理解吗？

2017/04/23

让设计更高效！正式为大家安利这个好用的「8点栅格」

交互

让设计更高效！正式为大家安利这个好用的「8点栅格」

作为设计师，就算你不使用栅格系统，那你也至少会频繁地接触到“栅格”这个概念。无论是设计网站、杂志，还是app，各类栅格应有尽有。但由于我最近接触到了“8点栅格”，并对其产生了极大兴趣。

2017/03/03

网页设计中，如何突破栅格的限制又保持协调？

交互

网页设计中，如何突破栅格的限制又保持协调？

现如今，栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感，他们是让网页变得更加和谐的基础。但是，栅格存在的目的是帮你创造好的设计，当你开始逐渐适应栅格的存在，千万不要被它束缚住。

2017/01/22

翻天覆地！带你总结互联网设计圈这十年的巨大变迁

教程

翻天覆地！带你总结互联网设计圈这十年的巨大变迁

编者按：互联网带来的变化是翻天覆地的，这种变化不仅仅表现在它对于外部世界、对于我们生活的影响，它本身的转变则显得更加巨大。而设计领域在互联网的影响之下，变化也非常的明显，也许看了今天的总结，你也会为这种改变而惊叹。十年前的互联网，和现在非常的不一样。

2016/09/01

网页的脊梁！20款素质过硬的响应式CSS栅格系统

下载

网页的脊梁！20款素质过硬的响应式CSS栅格系统

栅格系统这种东西和许多同类工具/素材一样，“系统”二字让它看起来无比高大上，而实际上大多数的栅格系统只是一系列纵横交错的细线构成。很简单？看起来确实如此。

2015/09/24

教程

揭秘！让作品秒变高大上的LOGO网格全方位科普

许多设计都将网格的建立作为设计Logo的第一步骤，网格系统可以助你保持视觉协调、美观、有条理，并明确设计的目标。那么到底LOGO网格是什么，有哪些常规样式，使用网格的好处以及如何使用等问题，今天来一一说清楚。Logo网格为何物？

2015/08/27

设计师版式宝典！从零开始教你掌握网格系统

教程

设计师版式宝典！从零开始教你掌握网格系统

编者按：有很多刚入门的设计师并不了解网格系统，也不会利用网格系统来让画面更加有条理，更可以让内容更易读，实际上它是超级实用的工具，今天分享一篇基础教程，手把手带你入网格系统的大门！学会和理解如何排版是成为一个设计大师中超级重要的一部分，有很多刚入门的设计师并不了解网格系统，也不会利用网格系统来校准元素在画面内的位置，让画面更加平衡。网格系统为什么这么好用呢？

2014/09/20

Grid运用实战！帮你轻松掌握Grid的进阶教程

教程

Grid运用实战！帮你轻松掌握Grid的进阶教程

编者按：这是一篇简单的入门教程，适合对Grid 还一知半解的同学阅读，前面的基础知识普及一说就懂，后边的Grid侧边栏实战也能让很多设计师借鉴避免踩雷，不长的文章都是干货，学习下。@Akane_Lee ：我踩到一个没把 Grid 学好的雷orz，特此拿出来笔记下。之前在《 Grid 的运用：PS外挂》一文中有简单提到 Grid 的运用，但讲得不够清楚，后来活用时遇到个问题：如果你的网页有侧边栏的时候，要怎么设计才符合 Grid？

2014/08/27

提升网页设计感的实用方法：合理利用对齐

教程

提升网页设计感的实用方法：合理利用对齐

利用栅格系统进行对齐，这是很常见的事情。本文谈论的对齐可不是简简单单的左对齐和右对齐，我们谈论的是整体角度上对齐的一些方法。合理的对齐能让你的设计更诱人，也能更方便用户浏览，提供极佳的阅读体验。

2013/12/04

高手之路！网页设计师应该知道的网格系统

教程

高手之路！网页设计师应该知道的网格系统

今天我们来聊聊网页设计中的网格系统。网格确保了设计结构的组织分明、结构明晰。我们可以通过网格系统更好的打造设计的信息层级，让设计阅读起来更具有韵律感。

2013/09/28

960网格系统

深入探究photoshop辅助线（附工具推荐）

教程

深入探究photoshop辅助线（附工具推荐）

写说说辅助线神马的最给力了~~一、你的辅助线的样子是准确的还是随意的？杂乱的辅助线准确又整齐的辅助线二、辅助线基本操作新增：通常做法是在显示标尺情况下，从标尺处直接拉出辅助线，这种做法不够明确，当视图放大时候经常会发现辅助线并不对齐实际像素。删除：将辅助线拖出文档窗口视图外，就可以删掉辅助线。

2013/06/30

高手的平面课堂！网格系统的入门基础知识+案例演示

教程

高手的平面课堂！网格系统的入门基础知识+案例演示

很多同学反馈看不懂网格系统，也不知道应该怎么用，所以优设特意邀请了平面高手@研习设K先生为大家写一篇网格系统的入门基础知识，附上案例演示，相信看完这篇你绝对能学会了！豪斯先生平面课堂系列：高手的平面课堂！聊聊图文叠加的四种常用技法《豪斯先生平面课堂！

2013/05/22

基于栅格的网站设计：附精彩案例和解析

酷站推荐

基于栅格的网站设计：附精彩案例和解析

如今，Grid-based（基于栅格的）网页设计已相当普遍，这意味着网页布局混乱的日子就要终结。尽管还无法用肉眼分辨，但我们的确是步入了有序和结构化的时代。栅格布局整体趋于匀称，通常会使网页更加整洁美观。

2013/05/17

优秀网页设计

没有更多内容了

大家都在看

设计细节

文章 135

优设大课堂

文章 142

网页设计

文章 972

设计史

文章 152

求职面试

文章 169

界面设计

文章 162

神器推荐

文章 426

动效设计

文章 208

UI

文章 147

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营