版式设计中的网格系统

设计师的工作不是随便把图片和文字摆一摆这么简单，在每次创作时，用到的设计元素可能是有限的，无非就是一些图形、图片和文字，这时，一些更具体化、细节化的东西就尤为重要，用什么字体，文字的字间距、行间距，这些看似繁琐的工作却有很大的学问，我们要遵循设计的基本原则，然后用这些设计元素的不同组合方式打破网格的局限性，不要过于依赖电脑的默认字体、默认行间距。

1、为设计对象建立一个合适的网格

网格不是一个固定的模式，必须根据不同的方式进行改变，要符合设计的基础架构；

2、把握节奏韵律

版式的节奏感及韵律，来源于排版设计中的疏密间隔安排，就好比音乐里的节拍，也是组织内容的一个重要单元，我们要注意通过疏密控制使对象形成画面节奏的和谐感受，建立一种视觉和谐美感；

3、体现层级

任何一个版面或界面都存在着层级关系，并且具有主次之分，在设计时，应该把这种层级关系通过编排的手段还原出来，做好层级关系的核心作用，能够提升文本、图片等元素的视觉线索，从而获得更好的画面清晰度，使内容更加容易阅读。

（以上观点部分有所借鉴，仅供参考，侵删）。

步骤如下：

1，需求调研

2，需求分析

3，概要设计

4，详细设计

设计方案内容包括：网络拓扑、IP地址规划、网络设备选型等等。

扩展资料：

网络工程设计原则

网络信息工程建设目标关系到现在和今后的几年内用户方网络信息化水平和网上应用系统的成败。在工程设计前对主要设计原则进行选择和平衡，并排定其在方案设计中的优先级，对网络工程设计和实施将具有指导意义。

1，实用、好用与够用性原则

计算机与外设、服务器和网络通信等设备在技术性能逐步提升的同时，其价格却在逐年或逐季下降，不可能也没必要实现所谓“一步到位”。所以，网络方案设计中应采用成熟可靠的技术和设备，充分体现“够用”、“好用”、“实用”建网原则，切不可用“今天”的钱，买“明、后天”才可用得上的设备。

2，开放性原则

网络系统应采用开放的标准和技术，资源系统建设要采用国家标准，有些还要遵循国际标准(如：财务管理系统、电子商务系统)。其目的包括两个方面：第一，有利于网络工程系统的后期扩充；第二，有利于与外部网络互连互通，切不可“闭门造车”形成信息化孤岛。

3，可靠性原则

无论是企业还是事业，也无论网络规模大小，网络系统的可靠性是一个工程的生命线。比如，一个网络系统中的关键设备和应用系统，偶尔出现的死锁，对于政府、教育、企业、税务、证券、金融、铁路、民航等行业产生的将是灾难性的事故。因此，应确保网络系统很高的平均无故障时间和尽可能低的平均无故障率。

4， 安全性原则

网络的安全主要是指网络系统防病毒、防黑客等破坏系统、数据可用性、一致性、高效性、可信赖性及可靠性等安全问题。为了网络系统安全，在方案设计时，应考虑用户方在网络安全方面可投入的资金，建议用户方选用网络防火墙、网络防杀毒系统等网络安全设施；网络信息中心对外的服务器要与对内的服务器隔离。

5， 先进性原则

网络系统应采用国际先进、主流、成熟的技术。比如，局域网可采用千兆以太网和全交换以太网技术。视网络规模的大小(比如网络中连接机器的台数在250台以上时)，选用多层交换技术，支持多层干道传输、生成树等协议。

6，易用性原则

网络系统的硬件设备和软件程序应易于安装、管理和维护。各种主要网络设备，比如核心交换机、汇聚交换机、接入交换机、服务器、大功率长延时UPS等设备均要支持流行的网管系统，以方便用户管理、配置网络系统。

7，可扩展性原则

网络总体设计不仅要考虑到近期目标，也要为网络的进一步发展留有扩展的余地，因此要选用主流产品和技术。若有可能，最好选用同一品牌的产品，或兼容性好的产品。在一个系统中切不可选用技术和性能不兼容的产品。

为什么要建立这样的网格系统，怎样在网格系统的帮助下快速解决设计中的问题，使设计更具功能性、逻辑性和视觉美感。网格系统的应用意味着：系统化和清晰化，集中精力看透关键问题，用客观取代主观，理性看待创造和制造产品的过程，将色彩、形势、材料进行结合，从建筑角度来驾驭内外空间。网格应用于广告、折页、书籍、空间布置、企业识别系统等领域。 字体样式 书中给出8～72点字的印刷大小，8至12点字最适用于书籍正文。常用的优雅富有艺术性的英文字体有Garamond 、Caslon、Bodoni、Walbaum，Berthold、Helvetica 、Folio、Univers无衬线体可以制作出易识别的版面。Times字体是为《泰晤士报》的印刷尔设计的字体。Helvetica字体共13个字号，在字母“c、e、g、s”的收尾处进行了处理，字母开口更开放，字母“G”更简洁，垂直笔画更简洁、易识别。另一个常用的无衬线英文字体Univers，除了有细体、中等体、半粗体、粗体，还有正体、斜体。 栏宽 栏宽不仅是设计形式的问题，还涉及到文本易识别性。让文体轻松被阅读就不能忽视字号大小、行的长度和行距。对于正常印刷品来说与人眼的距离为30-35cm，字号的设置要考虑到这一距离，并考虑到字间距、行间距。对于读者用户来说，阅读困难就代表视觉传达、记忆过程中质量的降低，行短读起来太累，因为需要不停的换行，行长眼睛需要保持在一条很长的水平线上，眼睛会觉得吃力。所以合适的栏宽至关重要，可以产生令人愉快的阅读节奏，让读者愿意继续关注、阅读接下来的内容。 行距 行距和行长一样需要格外注意。行距太高、太矮也会影响版心，进而影响文章的易读性。行距太矮会削弱阅读速度，因为读者会通过眼睛同时接收上下两行信息，而眼睛无法精准对焦在过分接近的两行字上，所以每一行文本周围都应该留有适当的视觉空白区域。如果读者视觉无法对焦，阅读起来更容易产生疲劳。相反，行距太高视觉很难将两行文字联系起来，文本灰度显得太重，丧失了视觉上的清晰度和平衡感，让人产生无助感。版面中，通常有3种到4种或更多字号组成，针对不同字号的行距分别调整，行距决定版面中的栏宽是否具有阅读性。 页边距 经典排版作品页边距是根据黄金分割或者数学公式精确计算出来的。页边距在版面中所占比例过小，读者会觉得页面过于饱满，在拿起印刷品使手会遮挡不得文字、图片信息，影响阅读。页边距过大，会造成奢侈感，导致文本稀疏，总也读不完的感觉。比较舒服的页边距是由天头-切口-地脚-订口的比例为1.5:2:3:1，但这一比例不适合单页，因为内容呈现少造成成本太高。 页码 页码必须同时满足功能和审美的需求。从心理学上看，页码被设置在版心的中轴线上，版面会显得更稳定；如果页码设置在外沿时显得更生动。无论页码如何设置，只要页码在版心附近，那么必须对齐版心中的文本行。 正文与标题字体 如果想要达到突出标题的目的就必须使用混合字体，标题与正文采用相同字体可以保持字体风格一致。不同字体在进行混合使用时，不能使用风格相近的两种字体，比如：Helvetica不与Univers混合，Garamond不能与Bodoni进行混合使用。在排版设计中使用各种不同字体，这些字体必须能被轻松的识别，不同字号也能提供清晰的层级关系。中等体、半粗体、粗体三种字重灰度有明显的差别，中等体呈现淡灰色，半粗体呈现中灰色，粗体呈现深灰色调。字重和字号上的清晰对比可以上，阅读变得更高效和简单。 版心结构 在确定版心之前，需要明确设计的性质和目的，确定版心类型与尺寸，尽量按照比例绘制草图，这就要求设计师必须掌握各种字体形态及字体比例关系。版面设计不仅需要考虑版心高度和宽度，同时要考虑字号、文本数量、文本、栏数，明确字号、行长、页边距等基础信息才可以进行下一步设计。 网格结构 在设计开始前，需要搞清楚开本、字体、印刷方式、图版率、纸张品质，其中分栏数是需要考虑的重点之一。三栏的分栏方式可以自由变化，缺点是栏宽相对较窄。工作中，报纸采用的栏数较多，书籍最多两栏，不管怎样，栏数的确定要结合内容来确定。 企业形象设计中也需要用到网格系统。 当代书籍等编排设计中要求设计师逻辑、系统地组织版面中的文本与图片：1.标题字号和位置保持一致，应用同一款字体 2.副标题字号一致，与上下文保持相同的距离 3.所有版面中的文本、插图使用统一网格系统 4.所有照片风格一致 5.同类型表格、数据图形、字体、颜色 5.分割段落使用一行、两行、多行，不能使用半行，否则下一行的文本错位不齐。 公司需要使用一套统一的设计形式和色彩系统诠释自己的企业形像，并将这些规范制成VI手册共公司成员参考，在企业形象设计运用网格系统前要考虑到将来与公司相关的所有文件，这些设计法则始终贯通于印刷品、出版物、表单、对外通告、电视媒体传播、展会展览等得到统一呈现。网格设计为所有印刷品的设计奠定了基础，包括所有宣传手册的封面和内页，字体、字号也要保持一致。书中列举一系列公司宣传物料如何利用网格系统的案例。 每个人有不同的学习方式和人生目标，学习是个人修炼的过程，别人的方法不一定适合自己，只有能使自己长时间持续下去的、恰当的方法才是好方法，而不是盲目照搬。

见版式设计形式三种、古典版式设计五百前德谷登堡代表些欧洲图书设计艺术家所确立版式设计形式具典雅、均衡、称特色直沿用至今种设计形式特点:订口轴左右两面称字距、行距具统尺寸标准、脚、订口、翻口均按照定比例关系组保护性框文字油墨深浅版内所嵌图片黑白关系都严格应标准二、网格设计网格设计于20世纪30代起源于瑞士运用固定格设计版面:版高宽栏、二栏、三栏至更栏由规定定标准尺寸运用标准尺寸控制安排文章、标题图片使版面形节奏组合未印刷部印刷部背景网格设计比例、力场、、向、称、均衡、空白、韵律、比、割等艺术规律运用达理想设计效网格设计风格形离建筑艺术深刻影响运用数比例关系具紧密连贯、结构严谨等特点考虑网格结构忽略灵应用网格种约束物导致布局呆板现代设计创造性应用网格设计尤重要三、自由版式设计科技突破激光照排技术产自由版式设计诞发展前提特别计算机制版技术普及使自由版式设计股阻挡潮流自由版式设计代表物美设计师戴维·卡森改变字体书写规律突破原版式设计认识传统设计界限创划代设计新观念自由版式设计必定自身形式规律版疆界性、字图体性、解构性、局部非阅读性字体变性1.版疆界性自由版式设计既同于古典式结构严谨称同于网格设计栏目条块割依照设计象文字、图形内容随所欲自由编排实物所占空间与空白间隙同等重要所谓、脚、订口、翻口让读者产丰富想像空间2.字图体性文字作图形部文字图形作幅绘画作品运用形式美节奏、韵律、垂直、倾斜、虚实等手完达字图体文字叠加、重合等增加空间厚度层 ‘3.解构性指古典排版秩序肢解、破坏重组新型版面与艺术创作、平面设计现代主义思潮脉相承4.局部非阅读性现代设计更高境界追求功能美与谐结合例戴维·卡森文字作虚化处理通文字旋转、重叠使其表达意义功能弱化非阅读部高信息量环境简化部信息强化另部特别需要信息达两者高度统艺术手5.字体变性指设计充运用各种各字体形式使设计充满代

UI设计师设计一款APP的时候，最先要制定一套完善可行的设计规范，其中包含定义颜色、文字、图标、结构、布局、间距等要素。但是很多设计师往往会忽视一个重要的东西，那就是网格系统的构建。网格系统可以说是整个页面的骨架，它将页面中所有的设计元素高效有序地组织起来，从而让整个APP的设计具有 高度的一致性 和 规律性 ，提高设计师工作效率，避免凭感觉做设计。

1、栅格系统（grid systems），也叫“网格系统”。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。 2、栅格系统运用固定的格子设计版面布局，风格工整简洁。 1、概念：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 2、优点：使用栅格设计，可以使网页的信息呈现更加美观易读，更具可用性。 3、原理：通过设置不同的n、i、A值划分网页的区块，实现标准化的灵活设计。 4、局限性：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到遵循栅格了。 1、苹果下浏览器的默认宽度为960px。在 1024 x 768 的分辨率下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，为 960 x 650。可见设计师们都不约而同选择960px的页面宽度。 2、目前大部分大型门户网站的首页宽度为950px/960px。绝大多数显示器都支持 1024 x 768 及其以上分辨率，为了有效的利用屏幕宽度同时保证栅格的灵活度，960就成为网页栅格系统中的最佳宽度（可以实现较多组合）了。当然，随着分辨率的提高，以后可能会流行更高px的页面宽度。——部分内容整理自网络——

栅格实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

下面就介绍一下 Bootstrap 栅格系统的工作原理：

•“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

•通过“行（row）”在水平方向创建一组“列（column）”。

•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

•类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

•通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）

比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。