菜单
优设网uisdc.com
优设网 - 学设计上优设
首页
设计文章
热门频道
网址导航
培训课程
教程与灵感
设计宝藏
关于我们
联系我们
文章投稿
意见反馈
广告商务
会员
开通优设VIP星球
尊享13项VIP特权
持续新增
主题打卡挑战
21天带练!告别无效练习
接私单赚外块
VIP优先接,累计金额超百万
优设私房课免费学
价值178元热销课程
你的私人律师
每月可免费咨询30次
开通VIP
领取更多设计师实用特权
投稿
搜索
您还未登录
登录后即可体验更多功能
立即登录
文章收藏
资源下载
提问答疑
我要投稿
栅格系统 话题
首页
设计文章
栅格系统
设计思维
收录95篇文章
免费图库
收录89篇文章
职业规划
收录64篇文章
表单设计
收录71篇文章
UI设计师
收录68篇文章
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
优秀网页设计
没有更多内容了
大家都在看
设计细节
文章 135
立即查看
优设大课堂
文章 142
立即查看
网页设计
文章 972
立即查看
设计史
文章 152
立即查看
求职面试
文章 169
立即查看
界面设计
文章 162
立即查看
神器推荐
文章 426
立即查看
动效设计
文章 208
立即查看
UI
文章 147
立即查看
优设读报
2023年02月02日 星期四
01
2023 年香港国际电影节主视觉公布,白鹭为设计主题
02
Google Play 游戏更新 LOGO,游戏手柄与三角形背景融为一体
03
网飞首支 AIGC 日漫风格动画片《犬与少年》开播
04
荣耀 Magic 5 系列 2 月 27 日全球发布:搭载骁龙 8 Gen 2
05
网之易现已开放暴雪国服游戏产品退款通道
查看全部
设计问答
全部问答
35岁普通设计师的出路在哪?
4.8k 设计师围观了该问题
我不是来制造焦虑的,但是焦虑就在那,这个年纪又没有20多岁的时候能加班,卷肯定是卷不过小年轻的,靠的阅历和经验,都是拿经验可以做的那些工作,所以想和大家探讨一下,35岁普通设计师还有哪些出路?
我来回答
设计问答
全部问答
潘虎为凉白开进行包装升级设计,据说设计费高达300万,新版包装你喜欢吗?
7.3k 设计师围观了该问题
微信小程序
今年最热的小程序设计和开发方法
查看专题
专题
已有167.3w位观众
已收录
15
篇持续更新
腾讯ISUX丨超全面的微信小程序初体验(上)
26743 人阅读
做完两个实战案例后,我总结了高效编写微信小程序的方法
26766 人阅读
细节
Nomad Sculpt如何通过细节设计让用户预知操作避免失误?
使用iPad 3D建模设计软件「Nomad Sculpt」时可以发现,在操作界面的「撤消」与「重做」功能下方会显示供用户预估的可点击次数,避免用户工作中因无法复原效果而造成损失。
2022/06/29
龙爪槐守望者
Nomad Sculpt
设计神器
全部神器
关于 emoji,你必须知道这个全能网站
神器推荐
用这个 Sketch 的黑科技,让你快速掌握智能排版!
神器推荐
发现一个新的图库网站!超多高清大图和插画素材免费商用!
神器推荐
这 5 款工具,让设计师工作效率提升 200%!(九)
神器推荐
课程
爆款课程!零基础C4D实战就业班
涨薪指数
技能点 · C4D
涨薪必备
名师亲授
课程
如何快速创作火爆全网的手绘作品?
涨薪指数
技能点 · 手绘插画
私单涨薪
必备技能
课程
插画学到什么程度,才够接私单赚钱?
涨薪指数
技能点 · 手绘插画
接单涨薪
快速入门
课程
为什么阿里和OPPO超爱这类插画风格?
涨薪指数
技能点 · 手绘插画
高效实战
百万人气
求职招聘
发布职位
资深设计师
杭州
大专及以上
3-5年
15k-20k
资深设计师
北京
学历不限
1-3年
15k-25k
资深平面设计师
武汉
学历不限
3-5年
8k-12k
查看全部
行业新闻
发布行业新闻
「大春晚季」品牌授权与版权文创暨「百人千创」合作计划:聚焦版权激发文创活力
活动赛事
喜兔迎年!iGame RTX 4070 Ti 开售,新春礼盒同步发布
新品推荐
为玩家和创作者提供超强动力:GeForce RTX 40 系列设计本发布
新品推荐
查看全部
热门频道
设计专题
热门设计知识精挑细选
查看专题
细节猎人
1分钟小短文揣摩设计真谛
查看猎人
优设读报
行业资讯一站知晓
查看读报
优设琅琊榜
顶尖设计作品聚集地
查看榜单
优设9图
优设爆火的干货频道
查看9图
设计问答
高手大咖在线答疑解惑
查看话题