栅格系统 | 优设网

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

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

2020-05-11 Clip设计夹 UI 栅格布局

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

在响应式设计中使用栅格系统是非常重要的，但实际项目中栅格系统到底怎么样运用呢?用一篇万字干货帮你掌握，如何利用栅格系统构建优秀的响应式设计。

2020-04-02 IvanZheng ui设计 响应式设计

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

经常看到很多 LOGO 初看一般，但只要加上了栅格线，感觉瞬间就上了一个档次。那这些栅格线只能拿来展示吗?

2020-01-08 Kanhaiya Sharma logo设计 栅格系统

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

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

2019-12-19 熊细辉Neo UI 中台系统

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

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

2019-05-17 Christie Tang 彩云译设计 栅格布局

细节大揭秘 全部细节

「小宇宙」App如何做好移动端输入的细节体验

用户体验小宇宙Android

「麦乐送」页面控件小圆点的创新应用

手势交互麦乐送微信小程序

新版「Behance」上超有仪式感的趣味交互

微交互 Behance iOS

「荔枝FM」是如何设计一个体验超赞的录音功能的？

手势交互荔枝FM iOS

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

编者注：看过很多栅格系统的科普，还是看不懂?那本文绝对值得你花十分钟试一下!

2018-12-24 蜗牛醒入门 栅格布局

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

编者按：本文适合对栅格系统不熟悉的新人阅读，大量的配图和深入浅出的阐述可以让你快速理解什么是栅格系统。马小晴：我们都知道在平面设计里，运用网格辅助设...

2018-11-22 马小晴入门 栅格布局

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

@UX-BOY ：本文主要与大家分享如何利用栅格系统完成后台页面响应式设计，介绍响应式设计的思路与方法。一、什么是响应式?

2018-10-04 UXBoy 后台产品设计 后台系统

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

@UX-BOY ：关于栅格系统的文章不少，但鲜有专门针对栅格系统在后台设计中相关应用的文章。本文希望抛砖引玉，能引起更多同行的交流与讨论。

2018-09-01 UXBoy 栅格工具 栅格布局

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

一款 App 或 Web 产品，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师，如果连「表现层」的内容都还一知半解就去盲目地学习其...

2018-04-11 彭彭图标 字体

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

今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知，在图标设计中都会使用统一的系统图标栅格系统。

2018-01-04 UI 酷设计 App图标 IOS

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

Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统，花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。可当真正需要用到响应式这东西时，在做完竞品...

2017-11-27 Z Yuhan 响应式布局 栅格系统

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

很多同学反馈看不懂网格系统，也不知道应该怎么用，所以优设特意邀请了平面高手@研习设K先生为大家写一篇网格系统的入门基础知识，附上案例演示，相信看完这篇...

2017-05-22 程远栅格 栅格系统

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

以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系...

2017-04-23 程远栅格系统 经验分享

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

作为设计师，就算你不使用栅格系统，那你也至少会频繁地接触到“栅格”这个概念。无论是设计网站、杂志，还是app，各类栅格应有尽有。

2017-03-03 程远栅格 栅格布局

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

现如今，栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感，他们是让网页变得更加和谐的基础。

2017-01-22 陈子木栅格 栅格布局

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

编者按：互联网带来的变化是翻天覆地的，这种变化不仅仅表现在它对于外部世界、对于我们生活的影响，它本身的转变则显得更加巨大。而设计领域在互联网的影响之...

2016-09-01 陈子木 iPhone 响应式设计

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

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

2015-09-24 陈子木 css 栅格

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

许多设计都将网格的建立作为设计Logo的第一步骤，网格系统可以助你保持视觉协调、美观、有条理，并明确设计的目标。那么到底LOGO网格是什么，有哪些常规样式，使...

2015-08-27 程远 ICON logo设计

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

编者按：有很多刚入门的设计师并不了解网格系统，也不会利用网格系统来让画面更加有条理，更可以让内容更易读，实际上它是超级实用的工具，今天分享一篇基础教...

2014-09-20 程远栅格系统 网页设计

热门频道

设计专题

细节猎人

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

优设读报

行业资讯一站知晓

设计话题

高手大咖在线答疑解惑

行业新闻

行业大事小事全知道

设计大赛

专业承办设计赛事活动

微信小程序

今年最热的小程序设计和开发方法

就在上个月，微信小程序的用户突破6个亿，如此庞大的体量，让很多公司跃跃欲试。不过很多设计师和工程师之前没做过微信小程序，不知道如何开始，本专题为此而生，从基础知识、官方指南到实战技巧、案例复盘都有，让新手快速掌握微信小程序的设计和开发方法。

查看专题

LOGO设计

收藏这个专题，不想学会都难！

本专题里，网易和百度的高手会先带你熟悉设计流程，由平面设计大神K先生教你更高阶的设计技巧，最后给你一份全面的LOGO合格检验标准。如果没灵感没时间也不怕，我们将灵感和自动设计LOGO 的神器一起打包给你了！

查看专题

菜单 优设网 - UISDC

栅格系统已发布文章25篇

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

2020-05-11 Clip设计夹 UI栅格布局

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

2020-04-02 IvanZheng ui设计响应式设计

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

2020-01-08 Kanhaiya Sharma logo设计栅格系统

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

2019-12-19 熊细辉Neo UI中台系统

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

2019-05-17 Christie Tang 彩云译设计栅格布局

「小宇宙」App如何做好移动端输入的细节体验

用户体验 小宇宙Android

「麦乐送」页面控件小圆点的创新应用

手势交互 麦乐送微信小程序

新版「Behance」上超有仪式感的趣味交互

微交互 Behance iOS

「荔枝FM」是如何设计一个体验超赞的录音功能的？

手势交互 荔枝FM iOS

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

2018-12-24 蜗牛醒 入门栅格布局

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

2018-11-22 马小晴 入门栅格布局

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

2018-10-04 UXBoy 后台产品设计后台系统

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

2018-09-01 UXBoy 栅格工具栅格布局

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

2018-04-11 彭彭 图标字体

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

2018-01-04 UI 酷设计 App图标IOS

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

2017-11-27 Z Yuhan 响应式布局栅格系统

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

2017-05-22 程远 栅格栅格系统

2020年适合设计师学习的设计技能 大课堂

从入门就业到进阶高薪！18般武艺这里应有尽有

行业名师真材实料 优设 8 年专业品牌

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

2017-04-23 程远 栅格系统经验分享

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

2017-03-03 程远 栅格栅格布局

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

2017-01-22 陈子木 栅格栅格布局

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

2016-09-01 陈子木 iPhone响应式设计

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

2015-09-24 陈子木 css栅格

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

2015-08-27 程远 ICONlogo设计

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

2014-09-20 程远 栅格系统网页设计

热门频道

设计专题

热门设计知识精挑细选

细节猎人

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

优设读报

行业资讯一站知晓

设计话题

高手大咖在线答疑解惑

行业新闻

行业大事小事全知道

设计大赛

专业承办设计赛事活动

优设读报 2020年5月30日 星期六

设计师讲师10-15k

深圳学历不限经验不限

荔枝微课

平面设计师5K-10k

武汉学历不限经验不限

姓会

课件界面设计师面议

北京本科及以上3年以上

学而思网校

坚持每天画画的人，到底是怎么做到的？

高效实战画风惊艳

为什么他设计的 LOGO 价值上万元？

职场技能高效实战

菜单优设网 - UISDC

2020-05-11 Clip设计夹 UI 栅格布局

2019-12-19 熊细辉Neo UI 中台系统

用户体验小宇宙Android

手势交互麦乐送微信小程序

手势交互荔枝FM iOS

2018-12-24 蜗牛醒入门栅格布局

2018-11-22 马小晴入门栅格布局

2018-04-11 彭彭图标字体

2018-01-04 UI 酷设计 App图标 IOS

2017-05-22 程远栅格栅格系统

2020年适合设计师学习的设计技能大课堂

行业名师真材实料优设 8 年专业品牌

2017-04-23 程远栅格系统经验分享

2017-03-03 程远栅格栅格布局

2017-01-22 陈子木栅格栅格布局

2016-09-01 陈子木 iPhone 响应式设计

2015-09-24 陈子木 css 栅格

2015-08-27 程远 ICON logo设计

2014-09-20 程远栅格系统网页设计

优设读报 2020年5月30日星期六

优设专题全部专题