50
网格中有什么?网格式框架是几乎所有网页设计项目的支柱,为您的网站提供结构,以及组织内容,元素和图像的方式。
有各种各样的网格系统,您可以免费购买或下载。如果你有野心,你也可以创建自己的。但有一件事是肯定的,您可以从项目中使用网格系统中受益。(这篇文章中的每个网站示例都有。)崇文网站建设
网格是一组不可见的线 - 垂直和水平运行 - 帮助您指定放置内容的位置。该结构设计成具有相等间距的列和行,每个之间具有边缘(或沟槽)。
网格系统已存在很长时间了。印刷设计师使用它们,并且网格正在进入越来越多的数字设计项目。在网页设计中,许多网格系统以框架的形式出现,框架已成为创建网站的标准格式。
使用网格的好处是它有助于组织内容以创建一致的设计。虽然用户永远不会真正看到您的网格,但在其上进行设计将创造一种流动与和谐的感觉,使您的最终产品在美学和使用方面更容易。
网格系统可以真正帮助几乎任何经验级别的设计人员轻松,一致地完成项目。但是一些设计师仍然不是使用这种技术的完全粉丝。
优点
统一的设计和页面之间的一致性
元素和白色空间之间的设计平衡
防止空间内元素过度拥挤
减少编码,因为您没有从头开始构建框架
嵌套允许框架内的子网格
控制设计和结构
提供设计稳定性
便于移动元素并将它们放置在不同的位置
缺点
有人说网格“扼杀”创作过程
对于内容很少的网站来说可能更难
有些网站最终看起来很相似
网格系统对新用户来说可能很难
从历史上看,有四种基本类型的网格 - 手稿,列,模块和层次。再加上当今网页设计世界中最重要的网格系统类型 - 响应。
手稿网格以块的形式发展。这些块确定了设计整体框架中元素的位置。此网格样式适用于大块文本。考虑将其用于包含博客中正文的框架。
列网格正是您所期望的 - 在页面上垂直运行的列。许多网格系统包含用于组织内容的某种类型的列式格式。这是网页设计中的常见做法。
模块化网格是列网格的扩展。它们包括用于组织信息的列和行。(例如,考虑一张桌子。)地铁风格的网站将基于模块化网格。
分层网格是一种更有机的网格格式,它使用一组相似的对象来创建垂直和水平空间。在许多情况下,对象被放置在画布上,然后以某种顺序排列。创建自己的网格或基于文档网格建立系统的设计人员可能正在使用此格式。
响应式网格是网站硬编码的一部分,可以根据设备大小指示网格本身如何缩小或扩展。响应式网格基于百分比来确定大小和位置,而不是硬画布大小。大多数设计人员使用框架来创建响应式网格以节省时间。有许多响应式网格框架可供使用,其中许多是开源的,可以免费下载。
在网页设计和网格系统方面,您需要注意的一点是响应能力。您很可能希望为项目提供响应式框架。在太多设备类型上查看太多网站以忽略响应式网页设计。
这里有11个流行的网格系统(它们都是免费的):
目前,Web上使用的最流行的框架。
该框架对用户来说速度快,速度快,对设计人员和开发人员而言更快,易于学习。
该框架是CSS文件的集合,包括可为每个设备扩展的基本960网格。
这个网格系统就是这样,允许您自定义列数,然后将其插入到您的设计项目中。
该网格系统是可嵌套的,可逆的,易于理解和健壮的。
该网格以流行的960概念为基础,适用于各种设备。
此网格通过在行内嵌套单元格来工作,并包括自适应和流体网格选项。
网格系统使用无限嵌套,每个元素一个类,并且易于使用。
该系统具有“折叠柱”,排水沟,垂直和水平完整网格系统的基线和脚本。
此框架使用由行类定义的网格来创建水平行,该行还分配页面的最大宽度,并使用函数来包含各种页面列。
这是流行的960网格系统的响应式继承者。它的工作方式与960类似,但使用的是网格的百分比,而不是静态像素大小。
框架或网格系统可能不是每个设计人员或开发人员的最佳选择。但即使您想设计自己的PSD网格,也有一些工具可以帮助您入门。
来自Elliot Jay Stocks的Photoshop网格
960网格模板
无框网格
来自Joel Beukelman的响应式网格PSD
迈克尔亨宁的Bootstrap响应网格PSD
网格计算器
4 Dyumin Vadim的响应式网格系统PSD
12列网格模板
Simon Meisinger的正确Bootstrap网格PSD
你准备用网格设计了吗?既然你有工具还在等什么呢?
什么网格系统是您的首选?在评论中使用该网格系统与我们分享它和您的网站。
崇文网站建设
最新文章
2019.08.16
崇文网站开发:用户体验和信用卡付款表格
2019.08.16
崇文高端网站建设:如何进行可用性启发式评估
2019.08.16
崇文做网站:失去对命令行的恐惧
2019.08.16
崇文网页设计:页面预加载动画的示例
2019.08.16
崇文网站建设:基于Web的网格系统入门
2019.06.18
崇文高端建站:利用寿司的力量改善你的设计
2019.05.27
崇文建站:WordPress中的条件变量和数据库查询
2019.05.27
崇文高端网站设计:分享日常中一些设计资源和工具
2019.05.27
崇文企业网站设计:WordPress 3.5它提供了什么?
2019.05.27
崇文网站开发公司:2019年流行网页设计趋势综述
随机推荐
2019.05.27
崇文做网站:将模板转换为WordPress主题
2019.06.18
崇文高端建站:利用寿司的力量改善你的设计
2019.08.16
崇文网站建设:基于Web的网格系统入门
2019.08.16
崇文做网站:失去对命令行的恐惧
2019.08.16
崇文网站开发:用户体验和信用卡付款表格
2019.08.16
崇文高端网站建设:如何进行可用性启发式评估
2019.05.27
崇文企业网站设计:WordPress 3.5它提供了什么?
2019.05.27
崇文建站:WordPress中的条件变量和数据库查询
2019.05.27
崇文网站开发公司:2019年流行网页设计趋势综述
2019.05.27
崇文高端网站设计:分享日常中一些设计资源和工具