崇文网站建设：基于Web的网格系统入门

2019.08.16 mf_web

50

网格中有什么？网格式框架是几乎所有网页设计项目的支柱，为您的网站提供结构，以及组织内容，元素和图像的方式。

有各种各样的网格系统，您可以免费购买或下载。如果你有野心，你也可以创建自己的。但有一件事是肯定的，您可以从项目中使用网格系统中受益。（这篇文章中的每个网站示例都有。）崇文网站建设

什么是网格？

新闻周刊

Lamri

新城堡

网格是一组不可见的线 - 垂直和水平运行 - 帮助您指定放置内容的位置。该结构设计成具有相等间距的列和行，每个之间具有边缘（或沟槽）。

网格系统已存在很长时间了。印刷设计师使用它们，并且网格正在进入越来越多的数字设计项目。在网页设计中，许多网格系统以框架的形式出现，框架已成为创建网站的标准格式。

使用网格的好处是它有助于组织内容以创建一致的设计。虽然用户永远不会真正看到您的网格，但在其上进行设计将创造一种流动与和谐的感觉，使您的最终产品在美学和使用方面更容易。

网格优点和缺点

比利让

暴动

红鹿茸

网格系统可以真正帮助几乎任何经验级别的设计人员轻松，一致地完成项目。但是一些设计师仍然不是使用这种技术的完全粉丝。

优点

  • 统一的设计和页面之间的一致性

  • 元素和白色空间之间的设计平衡

  • 防止空间内元素过度拥挤

  • 减少编码，因为您没有从头开始构建框架

  • 嵌套允许框架内的子网格

  • 控制设计和结构

  • 提供设计稳定性

  • 便于移动元素并将它们放置在不同的位置

缺点

  • 有人说网格“扼杀”创作过程

  • 对于内容很少的网站来说可能更难

  • 有些网站最终看起来很相似

  • 网格系统对新用户来说可能很难

网格类型

保罗卡尔弗

MPS

去食物

从历史上看，有四种基本类型的网格 - 手稿，列，模块和层次。再加上当今网页设计世界中最重要的网格系统类型 - 响应。

手稿网格以块的形式发展。这些块确定了设计整体框架中元素的位置。此网格样式适用于大块文本。考虑将其用于包含博客中正文的框架。

列网格正是您所期望的 - 在页面上垂直运行的列。许多网格系统包含用于组织内容的某种类型的列式格式。这是网页设计中的常见做法。

模块化网格是列网格的扩展。它们包括用于组织信息的列和行。（例如，考虑一张桌子。）地铁风格的网站将基于模块化网格。

分层网格是一种更有机的网格格式，它使用一组相似的对象来创建垂直和水平空间。在许多情况下，对象被放置在画布上，然后以某种顺序排列。创建自己的网格或基于文档网格建立系统的设计人员可能正在使用此格式。

响应式网格是网站硬编码的一部分，可以根据设备大小指示网格本身如何缩小或扩展。响应式网格基于百分比来确定大小和位置，而不是硬画布大小。大多数设计人员使用框架来创建响应式网格以节省时间。有许多响应式网格框架可供使用，其中许多是开源的，可以免费下载。

热门网格系统

在网页设计和网格系统方面，您需要注意的一点是响应能力。您很可能希望为项目提供响应式框架。在太多设备类型上查看太多网站以忽略响应式网页设计。

这里有11个流行的网格系统（它们都是免费的）：

引导

引导

目前，Web上使用的最流行的框架。

Zurb基金会

Zurb基金会

该框架对用户来说速度快，速度快，对设计人员和开发人员而言更快，易于学习。

骨架

骨架

该框架是CSS文件的集合，包括可为每个设备扩展的基本960网格。

响应式网格系统

响应式网格系统

这个网格系统就是这样，允许您自定义列数，然后将其插入到您的设计项目中。

CSSWizardry格架

CSSWizardry格架

该网格系统是可嵌套的，可逆的，易于理解和健壮的。

CSS智能电网

CSS智能电网

该网格以流行的960概念为基础，适用于各种设备。

僵局

僵局

此网格通过在行内嵌套单元格来工作，并包括自适应和流体网格选项。

简单的网格

简单的网格

网格系统使用无限嵌套，每个元素一个类，并且易于使用。

金网系统

金网系统

该系统具有“折叠柱”，排水沟，垂直和水平完整网格系统的基线和脚本。

古比

古比

此框架使用由行类定义的网格来创建水平行，该行还分配页面的最大宽度，并使用函数来包含各种页面列。

Unsemantic

Unsemantic

这是流行的960网格系统的响应式继承者。它的工作方式与960类似，但使用的是网格的百分比，而不是静态像素大小。

10个创建自己网格的工具

框架或网格系统可能不是每个设计人员或开发人员的最佳选择。但即使您想设计自己的PSD网格，也有一些工具可以帮助您入门。

  • 来自Elliot Jay Stocks的Photoshop网格

  • 960网格模板

  • 无框网格

  • 来自Joel Beukelman的响应式网格PSD

  • 迈克尔亨宁的Bootstrap响应网格PSD

  • 网格计算器

  • 4 Dyumin Vadim的响应式网格系统PSD

  • 12列网格模板

  • Simon Meisinger的正确Bootstrap网格PSD

结论

你准备用网格设计了吗？既然你有工具还在等什么呢？

什么网格系统是您的首选？在评论中使用该网格系统与我们分享它和您的网站。

崇文网站建设

相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP