• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 专业科班方法!帮你学会网格工具这个理性的排版利器

专业科班方法!帮你学会网格工具这个理性的排版利器

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含排版布局,排版设计,栅格,经验分享等相关知识,希望在学习及工作中可以帮助到您

@设计便利店:平时在做排版设计的时候是不是经常遇到这种情况?把画面的文字或元素左摆摆,右排排,方向键上下左右微调,眯眼看大效果,全凭感觉调了一两个钟头后,自己都麻木了,判断不了是好是坏,最后导出一张自己感觉貌似还可以的版本。其实,学习网格是可以完全改善这个问题的。

01. 页边距设置

在讲网格之前,我需要先提一提页边距的问题。很多人在设计版式时都忽略了页边距,页边距是对版面整体效果产生很大的影响。页边距太小,会给人很压迫,透不过气的感觉,页边距过大又会导致文本稀疏,阅读体验不完整的感受。

先看看几种常反的错误,第一种,版心偏低,导致整体画面下沉,且有种要掉出画板的感觉

第二种,页边距设置不合理导致版心偏高,第一二种的页边距设置是一样的,所以这样的设置不大合理。

第三种,是最最常见的,尽管设置页边距合理,但过于均匀对称,会导致画面呆板,总觉得缺少了点什么。

第四种,这种设置是比较合适的,我们的阅读习惯是从左到右的,这样的设置比较舒服。右边间距比左边大1倍,下边的设置也是,比上边大一倍。不过需要说明,设置前不盲目,还是要先判断这样的设置是否符合自己的设计需求,这个适合一般文学出版物,杂志,海报之类。

02. 8格网格用法

大家可以看到上面那个示例,把内容分为8个版块,这就是网格最基本的用法,叫做8格网格系统。

8格网格是最容易上手的,只需要通过对8种不同尺寸的图片和文字信息进行组合,就可以解决许多简单的问题,这时如果能再加上一点设计师的小小想象力,画面就已经很生动了。

8格网格一般已经满足了基本版式需求,上图中,有4种窄长的图和4种宽幅的图片,根据实际情况配合设计,随后唯一要注意的,就是设计选择图片和字体的能力了。

03. 20格网格用法

20格网格系统给设计师排版更多的可能性,拓宽了思路。

排版是的终极目标,是信息整理和信息合理传达,一级,二级,三级,让阅读者有一种满意的视觉感受,而不是单纯的视觉冲击。

网格系统给我们一个科学的办法来留白,国画中留白讲究的是气韵、呼吸,而我们的版式中一样需要呼吸,上面的例子中,段落与段落之间大量的留白,却又有科学依据在背后支撑,虽然文字特别多,但是给人的感觉特别舒服。

当有了网格之后,设计师在排版之前会有意识挑选图片了,和按照比例需求进行裁切。

如果图片与图片的间隔是均匀的,那么无论是图大图小,都是有一种舒适感。读者的阅读是可以引导的。

如果把上面这几张版式抽象一下来看,其实就只有正方形和长方形,这样简洁利索的画面会有一种大气感。这里特别提醒,在图片过渡到下一张图或者下一段文本,中间可以加插一小句文字,不让视觉跳跃太突兀。

△ 其他20格网格系统使用案例

不管8格,20格,还是32格,没有高级或者基础之分,只有合不合适。选择符合设计需求的网格系统,提高设计效率才是我们的目的。

「专业科班训练方法」

  1. 《专业科班的方法!设计师在工作中通过哪些方式获取灵感?》
  2. 《专业科班的方法!设计一个LOGO 的常规思路和流程是怎样的?》
  3. 《专业训练方法!如何设计一张高品位高水准的海报?(大量实例)》
  4. 《专业科班方法!平面设计里怎样提高作品的视觉冲击力?》
  5. 《专业科班方法!一套完整的中文字体是如何开发出来的?》
  6. 《专业科班方法!写给视觉设计师的印刷基本知识和技巧》
  7. 《专业科班方法!平面设计中如何把握比例?》

欢迎关注作者的微信公众号:「设计便利店」

设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 如何提升界面品质感?来看这篇超全面的总结!
  • 想让文字更出彩?试试通过切割文本来创造视觉吸引力
  • 我们观察到,2018年网页文本字体的设计趋势有这7种
  • 设计作品集网站的时候,如何善用超大字体元素
  • 这8个字体设计和排版技巧,是2018年的设计趋势
  • UI新手排版入门!最容易上手的6个排版套路
  • 格式塔原理中的接近性原则是如何影响排版设计的?
  • 这8条走心的建议,帮你设计出更加优秀的排版
  • 专业科班系列!超实用的标题排版小套路
  • 用一个实战案例,教你学会复杂界面的布局设计

相关文章

  • 2018-08-23这款独特的紫色,是为你指引2018年设计方向的年度潘通色
  • 2018-08-23收福利!5个不为人知但干货超多的交互设计公众号
  • 2018-08-23背后的故事!手机QQ的一键消除红点功能是怎么诞生的?
  • 2018-08-23超全面!一个完整的交互设计稿有哪些必备元素?
  • 2018-08-23用这个方法,让你的设计方案轻松通过! 
  • 2018-08-23饿了么高级设计师:界面视觉设计 5 要素
  • 2018-08-23通过这5个AR APP,帮你一窥现实增强技术的应用
  • 2017-08-06从image/x-png谈ContentType(s)
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:倒金字塔法则
  • 2018-08-23AI教程!手把手教你绘制线条装饰风格海报

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 非常棒的Web标准学习资源收集推荐
    • 腾讯实战案例!如何用服务设计打造未来银行?
    • 实战案例告诉你,用户调研报告应该怎么写?
    • 视觉实验!一个让设计师大开脑洞的好方法!
    • 学会插画的这四种玩法,能让你的UI体验更优异
    • font-family 中文字体的英文名称小结
    • 基础小课堂!从零开始教你做高保真原型图+UI 设计规范
    • 想做大数据可视化?来看腾讯高手的实战案例!
    • 编写高质量代码 Web前端开发修炼之道 书摘精要
    • 网页前端开发小细节

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有