在设计行业中也是要遵循一定的规则和规律才能够设计出更美观更符合用户需求的界面效果,今天小千就来给大家介绍一下这个网格系统,学习完之后你能够更好的理解设计、完善设计。

什么是网格系统?

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

网格系统,以及其背后的模数思想在设计史上由来已久,在建筑、平面设计等领域均可见不同的表现形式。而具体到网页设计上,常用的 Column + Gutter (包含内容的宽栏+较窄的间距空间) 源自上世纪 50 年代成熟的瑞士风格平面设计(或称国际风格,International Typographic Style)。

那简单的来说,网格是设计的辅助工具,就是在版面上按照预先确定好的格子,分配文字和图片的一种版面设计方法。

网格系统有什么用?

调节版面气氛:加强版面凝聚力使版面更统一化、整体化,也可使版面内容更规整,使网格在版面中的运用更加灵活。

组织版面信息:网格对版面中的构成元素,文字、 图片等进行有的、有序的编排,使版面中的内容信息更清晰的呈现,使构成元素的编排位置更加的精确,有结构感、节奏感。

提升阅读的关联性:网格系统使版面结构更加清晰简洁,能够有效的保证内容的.关联性,使视觉在浏览时有一个清晰明朗的流程。

确定信息位置:对各项元素的位置进行有效的组织、编排,能使版面内容具有鲜明的条理性、并且可以使版面元素呈现出更为完善的整体效果。

网格的作用可简单的总结以下几点

  1、确定版心位置;2、快速分割版面;3、快速布局结构的作用;4、能够理性、整洁地安排版面元素;

那如何建立网格系统呢?

首先,打开我们的PS软件,点击菜单里的视图下的新建参考线版面;

其次,在弹出的新建参考线版面的弹窗中,根据比例划分版面,将文图形进行比例的综合规划,(横着的线为行数,竖着的线为列数),一般情况下可设置为2的倍数;

装订线我这边是设置的5mm,可根据我设置的数值进行适当调整;

边距则是天头,地脚以及左右页边距,一般为5的倍数;

当设置完成以后,就可以按照网格进行分布排版啦。最后要给大家说,网格只是设计的辅助,在依赖网格设计的基础上一定要要灵活应用哦~让你的设计从此以后具有一定的理论依据支撑!

本文来自千锋教育,转载请注明出处

网格系统设计方法是什么相关推荐

  1. 计算机系统设计 片上系统 pdf,一种基于过程级编程模型的可重构片上系统设计方法.pdf...

    一种基于过程级编程模型的可重构片上系统设计方法.pdf ISSN 11一1777/TP 计算机研究与发展 1000-1239/CN of Researchand Journal Development ...

  2. 在VB.NET中初始化网格实现方法知识讲解

    VB.NET控件的使用方法及实现的功能多样化,可以帮助开发人员轻松方便的实现各种开发中的需求.比如VB.NET初始化网格的操作,就可以通过多列ComBoBox控件的相关操作来实现.大家一起来看看详细的 ...

  3. 实现边坍塌的网格简化方法

    一.算法介绍 关于边塌陷的网格简化方法,SIGGRAPH 有一篇97年的论文Surface Simplification Using Quadric Error Metrics(Michael& ...

  4. 机器学习调参神器——网格搜索方法

    网格搜索方法主要用于模型调参,也就是帮助我们找到一组最合适的模型设置参数,使得模型的预测达到更好的效果,这组参数于模型训练过程中学习到的参数不同,它是需要在训练前预设好的,我们称其为超参数. 超参数的 ...

  5. 复杂结构的网格划分方法比较

    本文转自:公众号有限元仿真分析 原文链接:https://mp.weixin.qq.com/s/t81h7Ucsy_LMZTxVrk7ATw 网格划分是进行有限元分析和计算的前提,也是最费时间最费精力 ...

  6. 二维码扫描讲解系统设计方法

    二维码扫描讲解系统设计方法 测试软件平台进入: http://www.cqu-media.top http://www.cqu-media.com/qrcode.aspx http://www.cqu ...

  7. M×N扫描序列图像拼接、大视场图像拼接、全景图像拼接、2D网格拼图方法、累计误差消除(显微图像/航拍图像等)

    M×N扫描序列图像拼接.大视场图像拼接.全景图像拼接.2D网格拼图方法.累计误差消除(显微图像/航拍图像等) 前言 一.问题描述 二.拼接过程存在的问题 三.4种拼接算法介绍 1.搜索算法 2.最小生 ...

  8. 二十一、动网格Layering方法及实例

    1  概念介绍 我们之前给出的案例计算域边界都是固定不变的,如文章二十的多孔介质.文章十八的DPM模型等,但实际上一些工况下计算域的边界可能发生运动或者变形,如风扇扇叶的运动.齿轮的运动等. 对于计算 ...

  9. 连续变焦光学系统设计方法

    摘 要:本文介绍了连续变焦光学系统的基本工作原理以及光学设计方法的全过程.其中包括变焦和补偿方案的选择.高斯光学各组元焦距分配.外形尺寸计算.初级像差平衡.PW求解.初始结构参数确定.系统实际像差自动 ...

最新文章

  1. notepad++主题
  2. Core Animation放大缩小;CAKeyframeAnimation
  3. Andrew Ng 深度学习笔记-01-week2-课程
  4. ...python の 学习
  5. Storyboard的简单使用
  6. path manipulation怎么解决_干货!终于!解决macOS下pyenv安装python3.8.2缺少tkinter模块的问题!...
  7. linux 驱动日志,Linux上的自由空间驱动的日志轮换?
  8. 服务器搜索文件命令,Centos文件搜索命令的讲解
  9. 【JSP笔记】第四章 JSP内置对象【下】
  10. py实战某股票一周收盘价折线图绘制
  11. 携程景区爬取 + 保存Excel
  12. JAVA巢院小区疫情管控系统计算机毕业设计Mybatis+系统+数据库+调试部署
  13. 移动端实时音视频直播技术中推流和传输详解
  14. Intel_IPP 的基本使用方法
  15. 计算机专业想进国企考研可以考什么,毕业后想进国企,可以报考这些专业,更容易拿到铁饭碗,前途无量...
  16. PyEcharts 基本图表之雷达图
  17. [Job服务] - 自定义计划任务服务
  18. 软件工程师如何估算项目时间
  19. 浅析私有化即时通讯软件的用处有哪些
  20. c语言erfc函数,erfc_数值 | Numerics_C_参考手册_非常教程

热门文章

  1. 关于AM5728评估板
  2. 【华为OD机试真题 C语言】23、按身高和体重排队 | 机试真题+思路参考+代码解析
  3. 与高铁“赛跑”的外卖小哥
  4. 最快的远程控制软件radmin的配置和使用
  5. phpmyadmin for linux,linux下phpmyadmin安装
  6. android 注册广播代码(备用)
  7. python制作圣诞贺卡_个性化的圣诞贺卡
  8. 微博相互关注互粉mysql表实现_数据库设计实现用户关注、被关注、互粉
  9. Python 打包 exe 指南
  10. 软件智能:aaas系统的AI众生-一个脑力原型