网页网格设计基本流程 第1篇
有共性，才有统一，有细节区别，就有层次;防止设计与实现过程中的偏差;设计的各部分，要配合整体风格;不仅页面上各项设计要统一，而且网站的各级别页面也要统一;信息不要太过集中，以免文字编排太紧密;不要有太多分散注意力的点。动态闪烁要适中;页面留白部分，要根据平面设计原理来设计，注意分栏式结构不宜留白;还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好;首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片。
网页网格设计基本流程 第2篇
一个网站最重要的部分就是整个网站的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。有了这明显的实际方向，我们将讨论一些建构网站导航时重要的点。
首先，在网站的导航结构上，投入足够的时间和很多规划是非常重要的。虽然这是常识，但仍然有很多设计师想当然地设计网站导航。摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。在没有CSS的状况下，你的导航设计应该也是可用的，这是基于文字基础的浏览器相容性。你可以尽量去嘲笑文字基础的浏览器，但它们在很多的移动设备上还是流行的。也许更为重要的是，对屏幕用户来说(的情况下)，没有CSS的导航功能照样可用访问。在没有客户端技术情况下(如JavaScript或Flash)，导航功能应该容易进入和使用的。用户可能因安全性或公司政策而没有开启或安装。
所以，制定一个导航系统可以放置的良好位置是必须的，例如放在一个显眼可见的地方。一个好的导航功能，只要网页载入就出现，而不需要鼠标再向下滚动。这是为什么页面要保持干净和简单的重要作用，一个复杂且非常规的设计可能会让用户困惑。哪怕只有一瞬间，用户也必定不会纳闷：“网站导航在哪里?”
最后，对网站建立阶层结构，多层次的管理。确保它在父层与子层之间易于导航。此外，不管在哪一个网页当中，也应该能很容易到达高层的页面(例如网站首页)。最主要的目标就是你的网站导航，尽可能减少操作(动作)，努力而让用户到达他想要浏览的内容。
网页网格设计基本流程 第3篇
说完字体后，我们还需要指出使用正确颜色的重要性。例如，黑色文字在白色背景，如果使用高对比度，橙色背景上的红色文字会令你的眼睛感到紧张。
此外，使用一些对特殊形式色盲的用户友好的颜色(检查工具名为Vischeck，可以测试某些类型的色盲)。
有些色彩组合只适合运用在前景色的部分，而不适合做背景色。举个例子来说，深蓝色的文字搭配粉红色的背景与粉红色的文字搭配深蓝色的背景，都是使用两种一样的颜色，但用在不同的部分则影响了它的可读性和阅读的舒适度。重要的是，不仅要使用良好的色彩组合，而且要把它用在页面中的合适元素上。
网页网格设计基本流程 第4篇
1. 自动播放音乐（在用户不知情的情况下）
2. 超长的页面下载时间。如果页面下载时间超过30秒，很难有用户会喜欢你的网站。
3. 网站页面过长。你认为有多少浏览都有兴趣看你网页中最下面的内容？ 不要试图考验用户的耐心。
4. 过期的信息。很久不更新的信息，很容易让浏览者感到反感，而且在心中也会对你这个网站的品牌形象大打折扣。
5. 孤立的页面。用户不知用什么方法返回首页。这种情况往往是出现在信息提示页或内容调查的结果页上。用户体验不佳。
6. 缺少互动的内容。缺少互动的内容，缺少用户的参与。不能让网友表达情感和思想，那么你的网站也许会变成死网站。
网页网格设计基本流程 第5篇
Banner设计注意点：Banner有动态和静态两种。在浏览网页的过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。设计要点：Banner的文字不能太多，用一两句话来表达即可;广告语要朗朗上口，可以第一时间的让人捕获表达的重点;图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没;图形尽量选择颜色数少，能够说明问题的事物;如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑;尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。
网页网格设计基本流程 第6篇
普通人用几秒钟就决定是否要阅读更多网页内容或到另一个网站。因此，作为一个网页设计师，要有个好方法，能在这珍贵的几秒钟鼓励用户选择前者(看更多内容)。
要知道，如果用户在网页头部看不到感兴趣的内容，没有多少人会向下滚动，去查看整个网页的内容。所以，在网页头部很容易看到的地方放置网站上的重要元素，但也不要过度拥挤在上半部分网页，否则会吓到用户，而不会往下继续看内容。记住上半部分网页设计的卖点：视其为推销员，使人们有购买想法，即他们想在你的网站上看到什么。
网页网格设计基本流程 第7篇
视觉焦点是画面的主题、舞台的主角；装饰元素是群演、烘托氛围的存在。增加装饰元素也就是增加图版率、视觉度
装饰元素的意义：装饰元素又被称为“视觉糖”，包括点、线、面、图标、纹理、阴影等，本身没有什么意义，但是被用来甜化原本无味和无意义的设计，让设计更有“味道”、更丰富。一般在运营设计中，装饰元素可以丰富画面、平衡版面、让整个画面更加饱满、有层次，避免整体效果空洞呆板乏味。
装饰元素的形式：点-线-面-图标
点：包括圆形、方形、三角形、不规则形等，点缀画面，定位元素。可以形成视觉张力，平衡画面，让整体不显得空。
线：线包括直线、斜线、曲线、实线、虚线、开放、封闭等，方向与粗细的变化表达不同的气质（安静/动感、严谨/自由等）。引导视线、划分内容、强调重点、关联元素。
面：包括几何形、不规则形等，表达严谨/自由的气质。可以组织内容、提高图版率，增加画面重量。
图标：图标根据大小可以成为点元素或面元素，比抽象的点线面更契合主题，帮助解释含义。也更容易表达出趣味性、人性化，而不是冷冰冰的理性感、机械感。
肌理/纹理/图案：与元素结合丰富视觉层次、提升整体的质感。
装饰元素的呼应
格式塔心理学的相似法则，人们的眼睛往往将设计中相似的元素视为完整的图片、形状、组合，即使这些元素是分开的，也会被认为是一个整体的。
呼应让整体感更强，让所有的元素为同一个主题服务，而不是各自为政，变成没有方向、目的的“视觉噪音”。
呼应的方式并不是简单的重复，而是重复后发生变化，已形成节奏感。变化的部分包括形状、尺寸、方向、颜色等要素中的一种或几种，既有相似，又有差异。
网页网格设计基本流程 第8篇
将整个版面看作是一个系统，各个元素是系统的要素，元素之间的关系是要素之间的连接，版面的商业诉求、风格定位等是系统的功能、目标。检查时主要考虑整体的和谐、呼应、平衡、生动（陌生化的表达），各元素及关系与整体目标的一致性。
四大原则：即对比、对齐、亲密、重复。
层次的划分、内容的组织：页面的层次划分是否明确，重点是否突出。即整体的骨架、结构是否合理、有逻辑、有节奏感。
留白、呼吸性：留白部分的形状、整体的透气性、以及空间的延伸感、开阔感。如果信息贵阳冗、视线被阻挡、视野受限不够开阔，会让人觉得比较压抑、喘不过气。
细节部分：字体（字体类型、字号、字重、字间距、行间距），分割线（粗细、颜色、分割方式），颜色（冷暖、明暗、轻重、对比度），画面的平衡。
整体的一致性、呼应：整体风格的趋同、协调。版面率、构图、色彩、装饰元素、字体等元素的风格倾向是一致的，让人感觉是一个自然、有机的整体，而不是各种不同的零件强行拼凑出来的。
网页网格设计基本流程 第9篇
让用户看得明白，快速、清晰获取信息
容器整合 —— 信息组织，形成整体，让信息分层，在大的层级上减少视觉触点，更加整体、整洁一些。
局部放大 —— 拉开视觉层次，突出重点，强化节奏。
让用户看得舒服，美观舒适。
呼应 —— 页面内元素、颜色、形式的呼应，整体感更强，更加和谐而非拼凑感。
节奏 —— 形式上有所变化，增加韵律感。避免一成不变的乏味无趣。
饱满 —— 负空间的规整，让整体感觉更加满足格式塔定律中的简洁定律，人们会以最简单的形状来感知内容块。
让用户看得惊喜，形成记忆点。
品牌延展 —— 结合品牌形象，强化品牌认知。
图形延展 —— 将语义图形化，增加趣味性、设计感，让人更加容易理解信息
《版面设计的原理》一书中认为，版式设计是反复进行保持条理与添加变化的工作。
从设计方案的层面而言，设计的流程可大致分为：理解-提取-布置
网页网格设计基本流程 第10篇
一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后问自己以下问题：
1.是否真的需要这个设计么?
2.这是什么组件是做什么用，它如何协助用户浏览?
3.如果我突然删除这个组件，大多数人会希望它“回来”吗 ?
4.如何把这些元素和目标、消息和网站的宗旨互相结合?
此外，尽管它可能是一个超酷的新概念或界面设计模式，但你还是要确保对你的用户而言该设计仍然是方便和直观的。人们习惯于通用性的交互模式、网站功能、和网络接口，如果你的设计的确很独特，确保它不是太模糊和晦涩。 要有创意，但还要保持简单。
网页网格设计基本流程 第11篇
古滕堡图表，又称为对角线平衡法则。因为人们通常都是从左至右、由上往下地阅读，久而久之视线自然会沿着这一路径移动。
第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。
最终视觉区(Final Optical Area)：右下方，视觉流程的终点。
强闲置区(Strong Follow Area)：右上方，较少被注意到。
弱闲置区(Weak Follow Area)：左下方，最少被注意到。
网页网格设计基本流程 第12篇
整体的思路是增加画面的视觉度，提高图版率，减少留白。
常见的技巧：
·增加水印文字作为背景
·增加辅助小元素——点、线、icon、小的文字（网格点，球状点，直线，斜线，波浪线，圆形，方形，不规则多边形，流体形，阵列的线，阵列点）
·增加光影，提升质感
·增加材质、肌理（星空，雾气，云，无意义的图案，纸张质感，石材质感，水波）
·增加色块（大，小，形状），引导视觉中心
·提高主体占整个画面的比例
·增加装饰图案（飘带、框线……）
交互设计简约设计四大法则：组织、隐藏、删除、转移。视觉设计中，组织、删除、对齐、重复是简化页面的几个基本原则。
·增加内容容器，让整体组织关系更加清晰。
·减少字体、字号、颜色（色相、明度、纯度）的数量/变化
·减少分割线等元素，利用间距、色彩、背景等实现模块之间的划分。
·对齐:有形/无形的对齐线
·统一元素间的关系：即重复。风格形式、颜色、元素之间的轮廓关系、背景样式等保持统一来形成整体感；
主要思路是丰富页面，增加页面的视觉度、图版率、跳跃率，减少网格拘束率。优化节奏感、对比。
·选用视觉度更大的背景图片
·增加视觉糖（渐变、阴影、描边、纹理、图标、动效、点线面元素等）；
·增加英文/拼音
·增加色彩的丰富度
·增加质感、纹理、色块等
·增加光影的运用（侧光、逆光……）
·元素角度变化（倾斜产生动感、对称/翻转形成重复与变化）
·增加跳跃率（文字跳跃率、图片跳跃率）
·减少网格拘束率
·强化层次与对比、变化（形态对比、大小对比、色彩对比、远小近大的空间对比、Z轴高低的空间对比，留白空间大小对比）
主要思路是明确主题，建立情绪板（mood board），从页面整体布局、构图、色彩到细节的装饰元素、文字类型及对齐方式等方面，全部向目标风格靠近。同时整体协调、一致、呼应，强化印象。
·版心大小/版面率
渲染节日氛围、促销的宣传类设计，一般采用高版面率，给人热闹、亲切、有张力的感觉。高级品牌、商务宣传一般采用低版面率，给人以稳重、典雅、有距离的感觉。
·构图形式
不同的构图形式，版面率、平衡性、稳定性等会有一定的差异。如发散构图、倾斜构图更有动感，对称构图则更加稳定。
·色彩气质
颜色的种类、数量，颜色之间的相似、类似、对比等关系，对于整个气质有较大的的影响。
·背景/图片的气质
背景/图片的气质，奠定了整个版面的基础风格。
·不同视角对气质的影响
平静、温和的画面，一般采用常规的观察角度，新奇、动感的风格，一般使用特意、不常见的角度（如仰视角度看一个人）。
设计形式是在要素和要素关系上，利用一些技巧，形成陌生化的表达。
位置叠压手法
通过元素的叠压，增加版面的图版率、让画面整体更加饱满、元素更多，层次更丰富，画面整体风格也会更加热闹活泼。
位置叠压的类型：图前文后、图后文前、图文穿插、文字透叠、图文透叠、图片透叠。
标签化式设计
格式塔心理学的同域原则、信息传递中的容器整合。
文字补丁风格
文字下方加上别背景色块，面状化，更加整体、突出、醒目。在复杂的背景中，增加色块也可以增加文字的辨识度。
补丁的类型：色块、描边、形状变化、颜色变化、透明度变化、质感变化（增加肌理、材质）、二维角度变化、视角变化（透视、俯视、仰视）、文字变化（字重、字号、间距等）、位置变化（文字与补丁的位置错开、补丁之间的重叠与嵌套）、组合/结合（各个色块之间、色块与描边之间、各种风格之间）
扭曲形式
对元素的处理形式，扭曲、重复等形式让常规的元素变得陌生。
将版面看成一个系统，《系统之美》中提到系统的三要素：要素、连接、目标。
对应到版式设计中，要素=文字、装饰元素、背景、纹理、色块、色彩等。
连接=元素之间的构成关系，包括分离、接触、覆盖、透叠、联合、减缺、差叠、重合。
目标=版式的风格定位、表达的诉求、信息的优先级。
在样式八要素中，视觉度、字体印象关注的是版面中的要素，即要素的改变对整体风格的影响。图版率、文字跳跃率、图片跳跃率、网格拘束率、版面率、构成的三种类型都是关注的要素之间的连接关系，即个部分之间的连接方式发生变化后，版面的风格气质会随之变化。
对于要素的处理技巧：重复、扭曲、翻转、描边/填充、增加装饰元素、肌理、色块、投影、角版/挖版、改变字体/颜色。
对于连接/关系的处理技巧：对比、对齐、亲密、组织、构图的形式、构成关系、明确主题、整理流向、抑制四角、利用版心线。
在版式设计中，应该以目标为中心，从要素和要素之间的连接入手，逐层优化，每一层都应该是为整体服务的，统合各要素、各层级、子系统，最终达到整体的和谐一致、风格明确。
《七日掌握版面设计基础》
《高效能人士的七个习惯》
文章结构
网页网格设计基本流程 第13篇
链接缺失或者链接丢失可以说是网站的重大错误之一。审核你的网页上链接是否畅通是必要的任务之一，你可以手动检查或是使用Website Link Checker等工具。
该网站的每个滚动的小图片都是一个连接点，上面的图片和文字非常模糊，用户根本不知道展示的是什么信息。
而CTA的设置，要记住清晰明了，不要给用户太多的相同层级的CTA选择，会造成用户困扰。看一下示例：
相同层级的CTA过多则会造成用户困扰，而保留一个则可以突出重点，提升用户体验。下图，就是一个设计不错的CTA。
网页网格设计基本流程 第14篇
《写给大家看的设计书》中，提出了版式设计的4大基本原则：对比、对齐、亲密、重复。
对比能够突出视觉焦点，形成节奏感。让页面更加错落、更有层次、变化，提升文字跳跃率、图片跳跃率，增加版面的视觉度，给人以更强的视觉印象，从而避免呆板、无趣。
对比的目的是突出主要元素，所以首先应该对信息的层级进行区分，然后通过强化与其他元素的差异来突出重点。
冯·雷斯托夫效应（Von Restorff Effect）：也称为隔离效应（The Isolation Effect），在多个相似的对象中，与众不同的那个比其它的更能让人记住。
空间：充满-空置、积极活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放
形式：简单-复杂、美-丑、抽象-具象、清晰-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎
结构：井井有条-混乱无序、排列成序-随意放置、衬线字体-无衬线字体、机械-手工、密集-稀疏
纹理：细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝
位置：顶部-底部、高-低、右-左、上-下、前-后、有节奏-随意、单独-分组、接近-远离、中心-边缘、整齐排列-互不关联、内-外
方向：垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字、正-反
尺寸：大-小、长-短、窄-宽、扩大-收缩、深-浅
颜色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和（深色）-无色（素色）
密度：透明-晦暗、稠密-稀薄、液体-固体
重力：轻-重、稳定-不稳定
（摘自《平面设计原理》一书）
文字：字体、字号、字重、字间距、行间距、方向、颜色、纹理、虚实、描边/填充
对齐能够产生秩序感，让人觉得内容不是杂乱无章的随意处理，而是经过精心安排的，看起来严谨、专业。
《社会性动物》：在一个简单的演示中，阅读用清晰易辩的字体打印出来的论点的人，比阅读同样的内容但用模糊字体打印出来的人更容易相信他们所读过的东西。
设计是一种表达方式，通过对比、清晰大图等形式，与要传达的信息一起，来构建整体的专业感、可信赖感。
同时，对齐让分散在页面中的元素形成联系，增加整体感。通过对齐所产生的“无形的线”会引导用户的视线。
如同格式塔心理学的接近法则所说，同一模块的内容距离上应该更亲近，这样人才会把他们当成一个整体。
在UI设计中，通过间距的大小来划分不同的内容，可以减少分割线的使用，减少视觉干扰，让页面的内容更加突出。
格式塔心理学的相似法则，人们的眼睛往往将设计中相似的元素视为完整的图片、形状、组合，即使这些元素是分开的。
各元素之间尺寸、样式、颜色等一种或多种属性的一致性，可以互相呼应，让版面更加统一，形成整体感。重复也可以形成节奏，增加画面的韵律感。
在重复中增加变化（大小、颜色等），可以避免过度重复带来的单调。在重复的“度”中更好地平衡。
构成是“组装”“组合”的意思，是研究“要素”和组合原则、思维方法。
平面构成的概念要素：点、线、面。
元素之间的关系要素：方向、位置、空间、重心。
形象是指视觉所能见到的事物的外形、特征等，或是设计中借以表达一定含义的视觉要素。形象的存在方式：分离、接触、覆盖、透叠、联合、减缺、差叠、重合。
构成的手法：重复、渐变、发射、近似、变异、对比、集结、特异、空间与矛盾空间、分割、肌理及错视等等。
重复构成：一个或一组相同的单位形不断重复出现的构成。单纯、平静、统一、乏味。
渐变构成：单位形象与编排遵循某一方面做规律性变动的构成。包括：形的渐变、大小渐变、数量渐变、位置渐变、方向渐变、空间渐变、重心渐变等。
发射构成：单位形或编排环绕着一个或几个中心所作的构成。包括：同心发射、离心发射、向心发射。
对称构成：单位形或编排呈对称关系。包括点对称、线对称、近似对称。
平衡构成：对称构成以形的关系为准，平衡以重心的保持和重心感的安定为主。
对比构成：对比构成强调局部与局部的差异性，使整体成为有显著对照关系的构成。
特异构成：特异构成或称突变构成，整体具有某种规则性，局部因为打破规则，而特别引人注目的构成。
比例构成：按一定的比例渐进变化，常见的有等差数列、等比数列、黄金分割比、斐波那契数列等。
分割构成：将一个整体按需划分成不同的部分，如龟裂的土地。分割构成有规则分割、自由分割、功能分割、装饰分割。
群化构成：将简单的基本形，用不同的方法，组合在一起成为新的基本形。
网页网格设计基本流程 第15篇
浏览网站时，我们希望看到页面元素间有清晰和鲜明的对比，保障信息高度可读。而该网站的设计，背景色的相关信息的色系相近，对比度很弱，而一旦图片背景与文字之间的对比很差，文字就会模糊不清。用户不仅可能会错过了一些文本提示，而且更会错过了你想要传达的重要内容。如果没有对比，网站的色彩组合和整体展示都会让我们不知所措。
网页设计的对比可以是方方面面的，比如，字体间的对比突出重要信息和次要信息，色彩间的对比强化视觉效果，留白空间和界面原色的对比使整个界面看起来舒适美观，等等。总之，对比可以帮助我们更好地阅读和理解的信息，你要合理的利用颜色，空间和大小，从而让用户知道如何进行操作。
一个好的具有对比度的网页设计，应该是这样的。
网页网格设计基本流程 第16篇
用户会有不同的需求，根据不同操作流程调整界面设计。让用户控制数据的呈现方式，让用户控制数据的排序方式
其他排序标准包括：
按字母顺序
按可用性
按分类
按日期
按距离
按热门程度
按价格
按相关性
按大小
让用户控制数据显示的数量，构建用户画像以区分具体操作流程，让用户通过新标签页打开页面
网页网格设计基本流程 第17篇
文字也是设计的。设计要点：每一行文字的长度最好20到30个中文字(40到60个英文字母);行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读;标题以H1到H3字号为佳，内文Font size=3到4级为佳;同版面字型最好在三种以内;文字的颜色最好也是三种以内;文字在颜色上要与背景区别;内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果;表格或清单内的字运用相同字型与字体大小，以利辨别。
网页网格设计基本流程 第18篇
图片可以说是你整个网页的门面，一张精美的图片可以给网页设计带来美观舒适的效果，更别提那些用整张美图作为背景图的网页设计了。如果你网站的背景图本身很不错，但却被其他信息覆盖或者破坏美感，这真的是一种浪费。该网站的设计本身很不错，但仔细看，文字和背景图片容易造成混乱。
这里建议使用透明按钮，即在设计网页中的按钮之时，不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面背景合而为一。
网页网格设计基本流程 第19篇
一定要使用响应式设计框架，你的网页或许需要在手机上运行，必须要保证手机上运行和在网站上的运行一样流畅。但是该网站，在手机上加载出来后还是一整个页面，没有自适应。由于该网站没有手机版的视图，因此造成了用户在移动端根本无法使用。我想，或许很多用户和我一样，直接放弃这个网站了。没有自适应的网站，势必会流失很多核心用户及潜在客户。
使用响应式设计的网页设计示范：
网页网格设计基本流程 第20篇
虽然有成千上万的字体，但你真的能用的只是一小部分(至少要等到主要的浏览器完全支持CSS3)。 所以坚持使用网页安全字体。如果你不喜欢网页安全字体，可以考虑利用sIFR或Cufon逐步增强的网页设计。保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，使用户轻松愉快地阅读和扫描内容。
也许一个网页设计师常常犯的错误就是使用不对的字体大小。因为我们想尽可能的将内容都塞在一个网页中呈现，所以我们有时设置字体大小而让用户感觉到不舒服。如果可能的话，尽量保持字体大小12像素以上，特别是对段落内容。虽然很多没有遇到因为字体太小而造成阅读上的困难，但是想想老人家、近视眼和其他类似视觉障碍的族群吧。
网页网格设计基本流程 第21篇
视觉度、图版率、文字的跳跃率、照片的跳跃率、网格的拘束率、版面率、构成的类型、字体印象。
可以理解为表现力、视觉张力。明快的插图，给人强烈的印象，视觉度就高。空灵/安静的照片、纯文字等，视觉度低。
视觉度高，给人的感觉就像是邻家大妈，更加亲切、更具亲和力、“接地气”。适合招募、吸引人参与的活动宣传。
视觉度低，与人有距离感、看上去高冷、专业、没有情感。适合奢侈品、“高大上”的产品格调。
版式设计中，要依据想要表达的风格气质的差异，选择合适的视觉度。
背景纯净度
图片的干净、整洁程度。纯净度高，氛围安静、舒缓；纯净度低，则显得杂乱、喧嚣。与视觉度意思一致。
除文字外的视觉元素（图片、插图、装饰元素等内容）所占面积与整体版面的比率。如纯文字书籍的图版率为0%，全部是图片的杂志图版率为100%。
图版率高，整体更加活跃、热闹，适合快速浏览，适合运营类、报表类等设计（风格也与图片内容强相关，如果图片本身留白较多、风格素雅，则只会放大图片本身的气质，整体风格气质与图片的风格气质更接近。）
图版率低，则更加安静、雅致，偏向于细细阅读，适合阅读、文档等应用的设计。
提高图版率的方法（目的都是增加图形元素、增加图形占比）：
将图片重复化、增加图片数量/面积；
填充底色、增加色彩面积；
将视觉信息图形化（如数字放大作为图形、使用数据图表代替数字、使用图解或符号等增加说明性）；
增加图形（点线面）、图标、纹理、图案作为装饰、背景；
信噪比
主要信息在整体中所占的比例。与“数据墨水比”类似。重点都是强调弱化分割线、辅助元素等，突出主要信息、主要指报。
各部分内容所占尺寸的比率。优先率高，各部分内容尺寸差异较大，具有鲜明的对比，页面内容富于变化，具有动感、节奏感；反之，则给人沉稳、可靠的印象。
跳跃率包括文字跳跃率和图片跳跃率。分别指文字尺寸之间的对比和各图片尺寸之间的对比。
对于图片而言，图片内容本身的气质和跳跃率一起，决定了整个版面的活力/沉稳。即视觉度较低的图片，尺寸放大，也不能体现活力，而是更强调画面的安静氛围。因此，图片的选用与整体的风格气质也应该要和谐一致。
对照片而言，大面积宜用局部特写照片，小尺寸用全局照片。强调大小对比，形成有跳跃距离感的空间，视线移动时会有深度变化，更加错落、节奏富于变化。
开始版面设计之前，首先应该确定布局网格，即栅格系统。
原则上，版面中的元素都要依据网格线放置。这样的版面，是被网格约束住的版面。或者无视网格线，自由配置，形成脱离网格约束的版面。
约束率高体现理性、庄重、严谨，男性化，适合严肃、传统的活动。约束率低则更加自由、随性、女性化，适合轻松、愉悦的氛围。
按照版式设计的流程，一般是先建立条理/秩序：按照栅格系统，依据信息层次排布各个元素，然后是添加变化：根据整体的风格定位适当地制造对比、跳出网格约束。
照片的外形包括角版和挖版。
角版：依据网格约束，四四方方，稳定、权威，适合重要的人物、严谨的规划图。
挖版：退底，去除照片的背景，只保留主体，适合具有亲和力的人物、与背景更好融合的主题。打破网格的约束，更加自由。
角版和挖版的不同搭配、对比，可以在严谨、端正与自由、趣味中调节整体的氛围。例如，如果整体使用角版而显得过于拘谨，可以将某些照片处理组成挖版，增加版面的自由度、透气性。
网格系统/栅格系统
网格系统：通过竖向和横向的参考线，将页面分割成大小一致的格子，通过网格作为参考来构建具有秩序感的版面。
运营设计中，一般使用既有横向又有竖向参考线的交叉网格。
网页设计中，一般只有竖向的参考线，分为内容部分的列和用作间距的水槽，通过构建栅格来划分内容与留白。
栅格系统的作用：整理版面内的元素，让版面的布局更有条理、元素之间的关系更紧密。通过设定规则，在同一系统内部的不同页面之间形成统一。
栅格系统的要素：版面的宽度、列数、列宽、水槽（Gutter）、安全边距。
常用的栅格系统：
960栅格系统（内容宽度为960px，分成12列，列宽60px，水槽20px）
8pt栅格系统（列宽、水槽、安全边距等均采用8的倍数）
版面率是指所有内容在整体画面中所占的比率。版面率比较高时，留白较少，页面整体的利用率比较高，让然感觉丰富、热闹；反之，则给人一种宁静、典雅、高端的感觉。
版心：
版面中，去除天头、地脚、页边距后内容所占的区域。
留白
留白：版面中的空白区域，负空间。
留白的作用：
01 减轻压迫感；
02 改变页面整体的印象：留白多——版面率低，高端、冷淡；留白少——版面率高，热闹、廉价；
03 表现出页面内容之间距离的不同；
04 赋予页面构成以变化，增加节奏感；
05 使页面得到扩展，给人意犹未尽的感觉；
06 突出主体，主体周围留白大，所占的视觉强度也会增加。
留白的注意点：
留白比较完整、规则，页面会更加清晰整洁。
文字的对齐方式：齐行型&齐左型、居中型、自由型。
齐行型&齐左型：齐行型两端对齐，合理的、标准的、面向商业的。齐左型及只是左侧对齐，比齐行型更加自然、自由，比自由型更加规范、标准。
居中型：居中对齐，优雅、高品质、有格调。
自由型：没有一定的对齐中心，有时也依据图片而变化排列的形状，或与图片穿插、重叠。自由的、随意的、有活力的。
字体的类型、字重、字号、字距、行距、颜色、字体跳跃率等，都会影响整体的气质。
如无衬线体感觉干净、现代、简约；衬线体则体现典雅、古朴、时尚的气质；粗体字象征男性化、力量感，细体字象征女性化、时髦、纤细。
明确主题、分开副主题、群化（组合化）、暧昧给人不安的感觉、整理流向、空白时主题的领地、抑制四角、利用版心线。
明确主题：分清主次，区分层级，使空间整洁。明确主题，可以让视线有焦点，而不会无处安放，可以增加安定感。
分开副主题：主题、副主题都应该有各自的空间。整体才会更加平衡、透气。避免压抑、局促。
群化（组织化）：四大原则中的组织原则，格式塔心理学的接近/临近律。将同一类信息组织到一起，让页面信息更有条理，通过形式反映信息结构。
暧昧使人不安：元素之间的关系需要明确，如照片和对应的说明文字、段落与段落之间的关系、不同位置元素之间的关系。
整理流向：视线的移动方向，元素之间应该尽量协调，让视线的移动流畅、有序，而不是相悖、杂乱。
空白是主题的领地：留白的大小，反映了元素的重要程度，留白越大，元素的重要性越强。
抑制四角：四角是版面中最重要的部分，只要在四角配置小的形态，就能安定整个版面。
利用版心线：版心线是隐藏的基准线，沿着这条线进行设计，可以轻松稳定版面。
节奏：在一味的重复中形成差异，形成变化。
对比：尺寸、粗细、颜色等的变化，形成变化。
重点：对于重点的内容，使用差异化的形式来突出，强化主题。
比例：利用斐波那契数列、黄金分割比、白银分割比等，让元素之间的变化更有规律。
平衡：版面的重心应该稳定，增加可靠性、信赖感，而不会让人感觉不安。
融合：即元素之间的呼应，让整体关系更加紧密而不是显得松散、拼凑。同时元素之间应该产生联系，不论是形式、方向、位置还是前后关系上，才像是一个整体。
样式八要素、造型八原则参考：《七日掌握版面设计基础》。
网页网格设计基本流程 第22篇
背景的类型：纯色、色块、渐变、高光点、文字、图片、图形、纹理等。
纯色
纯色的使用，具有强烈的视觉倾向，整体风格气质与背景色的气质接近。
色块/图形
色块的使用可以让整体显得现代、简约，在画面比较空洞时，可以作为背景的辅助元素，让整体更加丰富、耐看。
渐变
渐变色的使用，让整体色彩更丰富/形成光照产生的变化感。细节层次更加丰富。
增加高光点
通过增加光源/高光部分，形成视觉引导，区分层次。
文字
通过将文字放大的方式，可以突出文字的图形感，弱化其作为语言载体的属性。减少视觉重量后，作为背景元素，可以让画面层次更加丰富。
图片叠加
在图片上增加文字、色块等，图版率较大。
质感图片/肌理/图案
叠加质感图片/几里/图案，可以丰富画面，让背景更加丰富、耐看、有品质。可以选用多张图片叠加的形式，结合蒙版、图层混合模式的变化，可以产生多样、奇妙的效果。
图形
图形的设计可以看成是纹理的一种。