菜单
优设网uisdc.com
优设网 - UISDC
首页
设计文章
热门频道
网址导航
培训课程
教程与灵感
设计素材
关于我们
联系我们
文章投稿
意见反馈
广告商务
会员
开通优设VIP星球
尊享13项VIP特权
持续新增
主题打卡挑战
21天带练！告别无效练习
接私单赚外块
VIP优先接，累计金额超百万
优设私房课免费学
价值178元热销课程
你的私人律师
每月可免费咨询30次
开通VIP
领取更多设计师实用特权
投稿
搜索
您还未登录
登录后即可体验更多功能
立即登录
文章收藏
资源下载
提问答疑
我要投稿
栅格系统 话题
首页
设计文章
栅格系统
心理学
收录30篇文章
栅格系统
收录29篇文章
产品经理
收录27篇文章
设计师进阶
收录29篇文章
AE动效
收录28篇文章
UI
用7大章节，帮你从零开始学会栅格系统
本文用7个章节，从栅格的定义到栅格的应用、制定等多个方面，帮你掌握栅格系统的运用。
2022/07/21
ui设计
UI
如何构建一套 B 端栅格体系？我总结了五个方面！
本文旨在通过查漏补缺的形式，讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。
2022/03/26
UI 设计
UI
万字干货！从4个方面完整解析栅格设计
本文主要介绍等距栅格，从概念、结构和设计上更有效解决栅格问题。
2021/11/11
响应式
UI
8000多字！超全面的栅格系统入门手册！
栅格系统不是令人「谈之色变」的超高深技巧，而是设计界约定俗成且广泛运用于平面设计及产品设计领域的设计工具。在涉及到组织信息的工作内容时，合理的使用栅格系统能够从设计效率、设计质量、多角色设计协作等多方面推动设计师的工作。
2021-03-30
ui设计
UI
用超多案例，帮你掌握栅格系统的布局设计
如何根据设计目标选用合适的栅格化布局？本文通过多个案例深入研究，从 3 种布局方式以及栅格用法来了解如何进行栅格系统布局设计。
2020-05-11
UI
UI
这份上万字的指南，帮你学会用栅格系统构建响应式设计
在响应式设计中使用栅格系统是非常重要的，但实际项目中栅格系统到底怎么样运用呢？用一篇万字干货帮你掌握，如何利用栅格系统构建优秀的响应式设计。（文末附作者绘制的 5 套栅格系统库福利~）
2020-04-02
ui设计
平面
学会用栅格系统，普通LOGO秒变高大上！
经常看到很多 LOGO 初看一般，但只要加上了栅格线，感觉瞬间就上了一个档次。那这些栅格线只能拿来展示吗？平时应该怎么看待它，怎么用它？
2020-01-08
logo设计
UI
大厂高手出品！中台组件设计指南：系统布局
本文将为大家分享 Web 端的系统布局，从基本布局初识、网格、布局模块到栅格进行完整链路内容整合，并以简单易懂的案例与大家进行探讨。
2019-12-19
UI
教程
看不懂不会用的栅格系统，这篇帮你彻底掌握它！
经典的栅格系统到底该怎么用？本文用超多案例让你完全掌握这个知识点。
2019-05-17
彩云译设计
教程
新人来收！10分钟帮你掌握栅格系统基础知识！
编者注：看过很多栅格系统的科普，还是看不懂？那本文绝对值得你花十分钟试一下！语言浅显直白，配图清晰易懂，保证轻松学会。
2018-12-24
入门
UI
基础知识！UI设计师需要掌握的栅格设计原理和技巧
编者按：本文适合对栅格系统不熟悉的新人阅读，大量的配图和深入浅出的阐述可以让你快速理解什么是栅格系统。马小晴：我们都知道在平面设计里，运用网格辅助设计，可以让页面富有统一的秩序感和韵律。在网页设计里，我们也需要视觉表现出统一性和一致性，让页面更加专业和系统化；但同时，网页设计相对于传统平面设计也更强调动态化、体系化的思考。
2018-11-22
入门
UI
超全面总结！如何利用栅格系统做响应式设计？
@UX-BOY ：本文主要与大家分享如何利用栅格系统完成后台页面响应式设计，介绍响应式设计的思路与方法。一、什么是响应式？按照本人自己的理解，响应式就是通过合理的设计方案配合规范的技术实现策略，使同一个 Web页面在各个终端（设备）不同分辨率屏幕上都能有最佳的用户体验。
2018-10-04
后台产品设计
产品
超全面！栅格系统及其在后台设计中的应用总结
@UX-BOY ：关于栅格系统的文章不少，但鲜有专门针对栅格系统在后台设计中相关应用的文章。本文希望抛砖引玉，能引起更多同行的交流与讨论。一、栅格系统的目的栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。
2018-09-01
栅格工具
教程
饿了么高级设计师：界面视觉设计 5 要素
一款 App 或 Web 产品，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师，如果连「表现层」的内容都还一知半解就去盲目地学习其他领域，这是不提倡的。这里说的「表现层」是指视觉设计层面，在界面的视觉设计中同样也包含了5个视觉要素：色彩、文字、图标、图片、空间。
2018-04-11
图标
UI
UI 新手福利！iOS系统图标栅格系统全方位解密
今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知，在图标设计中都会使用统一的系统图标栅格系统。那么iOS的系统图标的栅格系统如何定制呢，这篇文章就来独家揭秘iOS系统图标的栅格系统定制的奥秘。
2018-01-04
App图标
教程
基础小科普！3种国内外最常见的响应式栅格
Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统，花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。可当真正需要用到响应式这东西时，在做完竞品调研后，我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统，因为：那两张英文图表对艺术背景的设计师来说真的很难理解。你设计的产品很有可能比 Material Design 的预期更加复杂。
2017-11-27
响应式
UI
新手科普文！每个设计师都该懂的栅格系统基础六要素
以前有很长一段时间，我一直搞不明白到底什么是栅格，听过很多解释之后还是云里雾里的，后来发现有很多小伙伴也都有这样的疑问，所以决定分享一下自己对栅格系统的理解。首先我们必须要对栅格系统有一个基本的认知，我将这四个字拆分开成“栅格”和“系统”两个词来分别解释。关于栅格栅格是由网格演变而来的另一种说法，都是一个意思——格子，所以不要觉得栅格有多高深复杂，如果把他描述成格子，你还觉得它有多难理解吗？
2017-04-23
栅格系统
交互
让设计更高效！正式为大家安利这个好用的「8点栅格」
作为设计师，就算你不使用栅格系统，那你也至少会频繁地接触到“栅格”这个概念。无论是设计网站、杂志，还是app，各类栅格应有尽有。但由于我最近接触到了“8点栅格”，并对其产生了极大兴趣。
2017-03-03
栅格
交互
网页设计中，如何突破栅格的限制又保持协调？
现如今，栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感，他们是让网页变得更加和谐的基础。但是，栅格存在的目的是帮你创造好的设计，当你开始逐渐适应栅格的存在，千万不要被它束缚住。
2017-01-22
栅格
教程
翻天覆地！带你总结互联网设计圈这十年的巨大变迁
编者按：互联网带来的变化是翻天覆地的，这种变化不仅仅表现在它对于外部世界、对于我们生活的影响，它本身的转变则显得更加巨大。而设计领域在互联网的影响之下，变化也非常的明显，也许看了今天的总结，你也会为这种改变而惊叹。十年前的互联网，和现在非常的不一样。
2016-09-01
iPhone
下载
网页的脊梁！20款素质过硬的响应式CSS栅格系统
栅格系统这种东西和许多同类工具/素材一样，“系统”二字让它看起来无比高大上，而实际上大多数的栅格系统只是一系列纵横交错的细线构成。很简单？看起来确实如此。
2015-09-24
css
教程
揭秘！让作品秒变高大上的LOGO网格全方位科普
许多设计都将网格的建立作为设计Logo的第一步骤，网格系统可以助你保持视觉协调、美观、有条理，并明确设计的目标。那么到底LOGO网格是什么，有哪些常规样式，使用网格的好处以及如何使用等问题，今天来一一说清楚。Logo网格为何物？
2015-08-27
ICON
教程
设计师版式宝典！从零开始教你掌握网格系统
编者按：有很多刚入门的设计师并不了解网格系统，也不会利用网格系统来让画面更加有条理，更可以让内容更易读，实际上它是超级实用的工具，今天分享一篇基础教程，手把手带你入网格系统的大门！学会和理解如何排版是成为一个设计大师中超级重要的一部分，有很多刚入门的设计师并不了解网格系统，也不会利用网格系统来校准元素在画面内的位置，让画面更加平衡。网格系统为什么这么好用呢？
2014-09-20
栅格系统
教程
Grid运用实战！帮你轻松掌握Grid的进阶教程
编者按：这是一篇简单的入门教程，适合对Grid 还一知半解的同学阅读，前面的基础知识普及一说就懂，后边的Grid侧边栏实战也能让很多设计师借鉴避免踩雷，不长的文章都是干货，学习下。@Akane_Lee ：我踩到一个没把 Grid 学好的雷orz，特此拿出来笔记下。之前在 《 Grid 的运用：PS外挂》一文中有简单提到 Grid 的运用，但讲得不够清楚，后来活用时遇到个问题：如果你的网页有侧边栏的时候，要怎么设计才符合 Grid？
2014-08-27
栅格系统
教程
提升网页设计感的实用方法：合理利用对齐
利用栅格系统进行对齐，这是很常见的事情。本文谈论的对齐可不是简简单单的左对齐和右对齐，我们谈论的是整体角度上对齐的一些方法。合理的对齐能让你的设计更诱人，也能更方便用户浏览，提供极佳的阅读体验。
2013-12-04
对齐
教程
高手之路！网页设计师应该知道的网格系统
今天我们来聊聊网页设计中的网格系统。网格确保了设计结构的组织分明、结构明晰。我们可以通过网格系统更好的打造设计的信息层级，让设计阅读起来更具有韵律感。
2013-09-28
960网格系统
教程
深入探究photoshop辅助线（附工具推荐）
写说说 辅助线神马的最给力了~~一、你的辅助线的样子是准确的还是随意的？杂乱的辅助线准确又整齐的辅助线 二、辅助线基本操作新增：通常做法是在显示标尺情况下，从标尺处直接拉出辅助线，这种做法不够明确，当视图放大时候经常会发现辅助线并不对齐实际像素。删除：将辅助线拖出文档窗口视图外，就可以删掉辅助线。
2013-06-30
PS辅助线
教程
高手的平面课堂！网格系统的入门基础知识+案例演示
很多同学反馈看不懂网格系统，也不知道应该怎么用，所以优设特意邀请了平面高手@研习设K先生 为大家写一篇网格系统的入门基础知识，附上案例演示，相信看完这篇你绝对能学会了！豪斯先生平面课堂系列：高手的平面课堂！聊聊图文叠加的四种常用技法《豪斯先生平面课堂！
2013-05-22
栅格
酷站推荐
基于栅格的网站设计：附精彩案例和解析
如今，Grid-based（基于栅格的）网页设计已相当普遍，这意味着网页布局混乱的日子就要终结。尽管还无法用肉眼分辨，但我们的确是步入了有序和结构化的时代。栅格布局整体趋于匀称，通常会使网页更加整洁美观。
2013-05-17
优秀网页设计
没有更多文章了
大家都在看
ui设计
文章 894
立即查看
App设计
文章 264
立即查看
经验分享
文章 5006
立即查看
设计史
文章 142
立即查看
职场
文章 136
立即查看
logo设计
文章 187
立即查看
设计圈干货
文章 188
立即查看
版式设计
文章 198
立即查看
设计师干货
文章 218
立即查看
优设读报
2022年08月15日 星期一
01
上周热门文章：《9 个设计师必看的国际顶尖设计网站》
02
茶饮品牌「乐乐茶」形象全新升级
03
微软 iPad 版 Office 将支持 Apple Pencil 的「手写转文本」功能
04
百度地图 16.3.0 版本更新，迎来行业首创「车位级导航」
05
中国空间站任务 LOGO 大赏
查看全部
品牌设计
完整的品牌设计过程
查看专题
专题
已有114.0w位观众
已收录
25
篇持续更新
实战案例！网易考拉品牌升级全过程实录
62296 人阅读
顶级文档！12个值得学习的知名品牌设计规范指南
32559 人阅读
细节
「微博」也推出那年今日系统啦？
熟知QQ空间的各位90后，大概都有过被「那年今日」所支配的恐惧。「微博」也于近日推出了这个功能，会在每天推送给你曾经在这一天写下的微博，功能的Slogan也显得很有人情味——「希望你回忆过去时感到心情愉悦并愿意与他人分享」，分享回忆也就成为了一个固有的功能模块，自动生成的分享文案也带上了「那年今日」入口链接，保证分享链路的完整和闭合。
2021/10/20
洛糊糊
信息呈现
设计问答
全部问答
插画达到什么能力能找插画师的工作？
邀请你来回答
现在是做设计工作，有系统的学习过插画，想尝试一下职业插画师，需要达到什么样的能力才行？
我来回答
优设琅琊榜
查看全部
9.7k
1/9
想让大家记住名字的FCCK
FCCK
你好，我是快乐的小画家
设计神器
全部神器
Window党福利！这才是适合设计师的免费动效神器Pixate
神器推荐
壹周速读：这些UI、平面、视觉的文章没有一篇是吃素的！
神器推荐
压缩图片不求人！5个亲测好用的图片压缩神器推荐
神器推荐
2021年值得收藏的6个免费插画图库网站
神器推荐
课程
爆款课程！零基础C4D实战就业班
涨薪指数
技能点 · C4D
涨薪必备
名师亲授
课程
如何快速创作火爆全网的手绘作品？
涨薪指数
技能点 · 手绘插画
私单涨薪
必备技能
课程
插画学到什么程度，才够接私单赚钱？
涨薪指数
技能点 · 手绘插画
接单涨薪
快速入门
课程
为什么阿里和OPPO超爱这类插画风格？
涨薪指数
技能点 · 手绘插画
高效实战
百万人气
求职招聘
发布职位
交互设计师
北京
本科及以上
3-5年
25k-50k
网站内容运营
武汉
大专及以上
经验不限
4k-6k
微博内容运营
武汉
大专及以上
经验不限
4k-6k
查看全部
行业新闻
发布行业新闻
平面设计必看！盘点 16 个常见的招牌字类型
行业新闻
菌小宝×潘虎，来自外太空的礼物
品牌资讯
可持续发展设计奖杭州论坛完美落幕，共赴低碳生活
活动赛事
查看全部
热门频道
设计专题
热门设计知识精挑细选
查看专题
细节猎人
1分钟小短文揣摩设计真谛
查看猎人
优设读报
行业资讯一站知晓
查看读报
优设琅琊榜
顶尖设计作品聚集地
查看榜单
行业新闻
行业大事小事全知道
查看新闻
设计问答
高手大咖在线答疑解惑
查看话题
