我理解的网格系统(之一)

您所在的位置:网站首页 网格设计排版海报怎么做 我理解的网格系统(之一)

我理解的网格系统(之一)

2024-07-17 07:58:02| 来源: 网络整理| 查看: 265

我理解的网格系统(之一)——多列网格 9月 14, 2017 发表于: 视觉设计. 评论 Sponsor

在网格系统中,其实理解起来非常的容易,讲起来特别轻松,但是应用是一个比较难的过程,目前我理解的网格系统分别为多列网格系统/模块网格系统/一个字的网格系统/模块网格系统+一个字的网格系统,基线网格系统共五个环节。如果你平时用倒的排版不多,简单的多列网格系统足够你用。

多列网格就是通过纵向分栏,2栏以上都可以理解多列网格系统,多列网格系统为基础的网格系统。

文章作者:文成武 个人主页:http://yiyeyao.zcool.com.cn/

那么有的人理解,认为先建立网格系统,然后才确定文本,实质网格系统只是一个工具,在页面上建立网格系统,不只是为了摆放和规范各种文字和图象元素的需要,而是旨在通过看不见的网格重新梳理信息并赋予信息清晰的逻辑和内在的韵律。

网格适用于 VI、网页设计及平面广告上进行排版。那么我通过以下简单的案例来诠释多列网格系统。

+01

我首先截图几张其他设计师设计的第一张图,封面。

大感觉分析

01  /  没有视觉冲击力

02  /  文字层级不明确

03  /  文字组合不理想

深度分析

是什么原因导致没有

冲击力

A-没有一些比例关系 (简称为通、直、白)

B-文字没有层级关系 (简称为傻、大、粗)

C-装帧方式没有足够的新颖感觉

封面用了12栏网格系统,在网格系统中没有严格的一定要用多少栏,但是网格数目越多,也就是你的版式越精细,但是3、4、5、6栏中最好用的就是6栏。

封面没有细节的讲,因为这个封面的大问题在文字层级和位置关系后期讲文字层级关系可以细讲。

左边文字部分和右边比例为:1:1.4=(5栏:7栏)

1.4是日本的白银分割,因为在书籍设计中,我觉得遵循1:1.4的关系较多,也是比较舒服,比如日本的一些建筑,还有我们这个开本的比例都是这样的比例关系,当然行间距和字号的关系尽量遵循1.618的关系。

采用了独特的裸背装,在形式上就打破了第一个很平淡的问题,当然信息的层级也很重要。

+02

我首先截图几张其他设计师设计的第二张图

大感觉分析

01  /  没有视觉冲击力

02  /  对齐方式不统一

03  /  版心不明确

04  /  版式不饱满

05  /  版式没有细节

06  /  层级和文字的间距都不对

当然这个大家可能看不到,文字太模糊

深度分析

是什么原因导致没有

冲击力

A-内文没有一些比例关系 (简称为通、直、白)

B-没有分析层级关系 (简称为傻、大、粗)

做好基础规则,基础边距   边距比例关系为  / 1.5:1:1:1

A

我们现在解决第一个问题,如何让内文有比例关系

这里我所用的工具是网格系统

这里是12栏,最早喜欢3栏,到后来的5栏,现在的12栏

栏即12栏,(平均分配)6是一个很特殊的数字,既能比单数整除也能比整数整除(个人建议用12栏)。

B

我们现在解决第二个问题,怎么样搞清楚层级,层级粗讲。

作为客户和用户的角度,如果那表现了来讲,客户想表现的层级应该是a>c>b,我们在网格系统里面变化。

设计虽然做了,但是人物没有细节,比较粗糙。

我们缩小客户图片,文字层级拉开

1.中文字体 / 博雅宋   台湾细明体

2.西文字体 / Garamond Premier Pro

3.内文字号 / 8.5pt

4.文字间距 / 8.5ptX1.8

5.网格系统 / 12栏

6.栏 间 距 / 5mm

做了调整,但是a部分,不够跳跃,我只能做加法运算,b部分属于正常,c部分虽然分栏,但是没有破掉网格系统。

我继续做a部分的加法,c部分的破图,细节的增加。

网格系统在于建立,但是也在于破掉网格系统,这一点几乎支撑我了好多设计,包含去年的项目微软和央视的都一样的规则道理。

+03

我们改第三张图,下图为设计师的原图。

进行更改,然后网格破图,注意红色序号的地方都是上下左右对齐关系的。

更改方案一

更改方案二

任然遵循网格系统,只是在局部应用了客户的书法局部。

+04

我们改第四张图下图为设计师的原图,剩下的这几个我就不仔细讲解了。

更改方案一

更改方案二

+05

我们改第五张图,下图为设计师的原图。

更改方案一

+06

我们改第六张图,下图为设计师的原图。

更改方案一

最后的更改部分展示

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com 交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。 赞助商链接 与 排版 相关的文章 网页排版如何进行版式布局设计?(专业的网页布局设计分析) 网页排版如何进行版式布局设计?(专业的网页布局设计分析) 平面构成基础知识与技巧指南,非科班出身也能学会 平面构成基础知识与技巧指南,非科班出身也能学会 10个排版小技巧,让排版瞬间变高级 10个排版小技巧,让排版瞬间变高级 什么样的版式能让作品有层次感? 什么样的版式能让作品有层次感? 日常高频使用的10个文字标题排版技巧 日常高频使用的10个文字标题排版技巧 8款黑白文字与图形编排设计作品,非常实用! 8款黑白文字与图形编排设计作品,非常实用! 赞助商链接 设计达人微信交流社区:shejidaren888 喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。 版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。 « 全新 iPhone X UI 设计指导 大神的 LOGO 草图是这样画的 » { 发表评论 } 点击这里取消回复。 推荐书籍 艺术的故事艺术与审美入门之书 DON'T MAKE ME THINK设计师必看 《移动应用UI设计模式》手机APP设计 《设计心理学 全四册》高阶技能! JavaScript权威指南(第5版)只能说牛X 《见微知著》Web用户体验入门书籍 最新文章 直播礼物UI设计教程:塑料感包装设计技巧 封面图大揭秘!我如何从1000张站酷文章封面中提炼出BANNER设计神技! 总监亲授高效学习法则,让你的设计能力飞跃! 设计师私单秘籍:四年接设计私单心得全步骤大公开! 两年工作经验胜过五年老手?揭秘职场设计师的超速成长秘籍! AI自动剪辑工具:FunClip,一键视频编辑从未如此简单 大神推荐 设计接单 免费AI抠图 PS/C4D/版式教程 设计导航 无广告AI搜索 100本设计书籍PDF PS网页版 精品素材 “” 标签AIGC AI教程 AI绘画 banner CSS3 illustrator教程 jQuery logo Midjourney photoshop photoshop教程 UE UI UI KIT UI素材 UI设计 UX 中文字体 创意 创意设计 图标 字体 字体设计 工具 平面设计 排版 插画 摄影 海报 海报设计 海报设计教程 版式设计 用户体验 笔刷 纹理 网页素材 网页设计 色彩搭配 色彩理论 英文字体 设计师 设计理论 设计趋势 设计风格 配色 赞助商


【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


    图片新闻

    实验室药品柜的特性有哪些
    实验室药品柜是实验室家具的重要组成部分之一,主要
    小学科学实验中有哪些教学
    计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
    实验室各种仪器原理动图讲
    1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
    高中化学常见仪器及实验装
    1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
    微生物操作主要设备和器具
    今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
    浅谈通风柜使用基本常识
     众所周知,通风柜功能中最主要的就是排气功能。在

    专题文章

      CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭