网页设计与制作栅格的应用

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 栅格 网页设计

深圳网站建设公司 帮助企业提【tí】升网站形【xíng】象,彰显【xiǎn】公【gōng】司实力【lì】,PC+手机【jī】+微信+小程序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为【wéi】您提供1对【duì】1的专属【shǔ】VIP服务

　　如果【guǒ】你曾【céng】经【jīng】有过关【guān】于设计中网格【gé】的运【yùn】用的疑问， 这篇文章就是为你【nǐ】量身【shēn】定做的【de】。文章中，我们不仅会【huì】介绍基础的理论和术语，还会通过真实的网【wǎng】站例子分析帮助【zhù】你快速【sù】学习【xí】到【dào】网页设计与制作网格在实际运用中的技巧。

　　文章中我们会介绍以下的主题：

　　● 网格是什么

　　● 术语

　　● 三分法则

　　● 12列栅格

　　● 重点突出

　　● 局限性

　　● 脑图

　　什么是网页设计与制作的栅格?

　　栅格【gé】组【zǔ】成了【le】一个【gè】基【jī】本结构，这个【gè】结构可以被理解成【chéng】设【shè】计的“骨架”。 通过辅助线条【tiáo】来编排【pái】和放置设计中的各个设计元素。 这【zhè】样【yàng】做可以使设计稿有【yǒu】体系【xì】地【dì】联系在一起，同时也保持设计的一致性与【yǔ】合理性。

　　栅格可帮助你【nǐ】轻松【sōng】将界面【miàn】上的元素对齐，有效实现一致性。 设计中，有时【shí】候，仅靠感觉【jiào】和大致方向来猜【cāi】测布局的效果可能【néng】不会太【tài】理想。所以正【zhèng】确【què】使用网格【gé】，会让设计【jì】显得【dé】有条理【lǐ】，结构合理，整洁并且思考周到。

　　一个整【zhěng】洁对齐的【de】界面很【hěn】多时候都【dōu】不应该引【yǐn】起用【yòng】户【hù】的注意。少即是多， less is more。 界面设【shè】计中，尝试过于革新的手段反而会【huì】分散用【yòng】户对特定内【nèi】容的注意【yì】力【lì】，从而影响用户的理【lǐ】解。因【yīn】此，不要炫耀设计技巧有【yǒu】多么精妙，确【què】保【bǎo】用户注意力和内容的简【jiǎn】明才应该是重点。

　　如果说【shuō】还有什【shí】么比过【guò】度炫技效果【guǒ】更【gèng】糟糕的一点，可能【néng】是使用完全不符【fú】合常规【guī】布局的基础规【guī】则。一个没【méi】有对【duì】齐的界面很容易给用户【hù】留下草率的印象，这【zhè】样的印象可能会【huì】使用户【hù】难以对你【nǐ】的【de】产品专业度建立起信任 —— 当然，除非不对【duì】齐是你【nǐ】为了创作尝试而专门做的决定【dìng】。

　　术语

　　单元列

　　单元【yuán】列是每个栅格的基本构建【jiàn】块。 一个栅格【gé】由多【duō】个单元【yuán】列构成【chéng】。 下面的BBC示例就是一个【gè】由12个列栅【shān】格。 一个紫【zǐ】色矩形框代表一【yī】个单元列。

　　水槽

　　下图上的黄色【sè】细【xì】条矩形【xíng】表【biǎo】示【shì】将各个单元【yuán】列【liè】分开的装订线。 水槽是制造微小空白【bái】空【kōng】间的一种形式，为栅格提供【gòng】一些的呼【hū】吸空间。

　　栏

　　有了之前【qián】的【de】铺【pù】垫，我们【men】就可以了解一【yī】些更有趣的内容了。 多个单元列和装【zhuāng】订线一起便形成【chéng】了一栏【lán】，这【zhè】些栏实【shí】际上是从策略的角【jiǎo】度将内【nèi】容材【cái】料放置在其中的容【róng】器。这些栏看起来【lái】似乎很禁锢，事实上【shàng】在有调理的约束下设计会产生【shēng】更多【duō】自由的空间。约束条件可以【yǐ】帮助你决策元素放置的【de】位置，同时【shí】还能【néng】使这个过程容【róng】易并且【qiě】快捷。

　　在下面的示例中，你【nǐ】会看到【dào】三种不同的【de】栏【lán】在【zài】布局上起作【zuò】用。 每个栏的大【dà】小【xiǎo】分别受着制【zhì】约【yuē】，或是为了适用不同【tóng】形式的内容，或【huò】是【shì】形成强调作用来裁定。

　　就像例【lì】子中呈现的，布【bù】局中有很多方式来混合不同形式的内容和设计元【yuán】素【sù】。通过排列这些栏，界面上【shàng】可【kě】以形成坚【jiān】固的结构【gòu】。另一方面，良好的对齐又让设【shè】计产生【shēng】了一【yī】致性和有【yǒu】序性【xìng】。 这【zhè】些益【yì】处单【dān】是通过设【shè】置几个单元列和一些视觉约束【shù】就能【néng】轻松实【shí】现，是否让你觉得事【shì】半功倍呢?

　　区域

　　不同的内容栏【lán】排在一起就形【xíng】成了一【yī】个区域。这些【xiē】区域又将整【zhěng】个页【yè】面水平划分。让页面上【shàng】所有【yǒu】的区域【yù】都等高是个挺好的保持整洁的【de】办法【fǎ】，虽然在【zài】现【xiàn】实设计【jì】中【zhōng】并不是这么容易【yì】实现。所以【yǐ】，如果等高的区域既【jì】可【kě】行又【yòu】契合你的设【shè】计要求，那自然是再好不【bú】过。但是要【yào】是不能【néng】实现的话，就将目光放在宏观一些的【de】设计要求上吧【ba】。

　　三分法则

　　“三分法则”就是通过使用【yòng】一【yī】个简易栅格，来确【què】保在界面加入元素的时【shí】候会放置在某【mǒu】个三【sān】等分的行上。这样【yàng】的布局会更看起【qǐ】来更使人愉快， 比如在摄影当中，三分法则就是个【gè】十分常用的【de】方法。但是，尽管这个方式可能是【shì】一【yī】个很好的设计起点，也通常能够帮你做出正【zhèng】确【què】的选【xuǎn】择，我还是【shì】建议【yì】你在具【jù】体【tǐ】情【qíng】况【kuàng】下【xià】具体分析它是否【fǒu】是最合适的解决办【bàn】法。

　　人【rén】们有时【shí】候高谈【tán】阔论【lùn】三分【fèn】法则中的【de】“神奇【qí】交叉点”可以【yǐ】如此这般提升你的设计，但我更建议理性地对待这【zhè】个说法。说【shuō】三分法则是一个长青不败的【de】设计【jì】“法则”是件容易的事情， 尤【yóu】其【qí】这【zhè】一法【fǎ】则也非常容易【yì】去【qù】遵循。但是事实上，无【wú】论是从数学的角度还是人【rén】类对“美”的【de】认知来讲，三分法【fǎ】则都没有什【shí】么特别之处，而且【qiě】也绝对不是神奇的。

　　另一个【gè】重要【yào】的基【jī】础便是，并非所有人都以【yǐ】相同的【de】视觉方式来感知世界【jiè】。 我们【men】都不同。 当【dāng】我【wǒ】们看世界【jiè】时，我们不是机器，也不会全都去硬生生重复【fù】数字比例精确【què】而带【dài】来美感， 以Reddit为【wéi】例。 他【tā】们看起来像是会去在意“神奇【qí】交叉点“吗?

　　我不否【fǒu】认当你【nǐ】的图片或设计在适【shì】合三分法则的情况下，它是一【yī】个【gè】很好的准【zhǔn】则，或者至少可以是，但是我认为无需太重视这些【xiē】法则。设计中，只要有道理就【jiù】可以打破规则。相【xiàng】信自己的直觉，以自己在设计【jì】中学到的技巧和经验作为基准，做你【nǐ】觉【jiào】得对【duì】的事【shì】情。用【yòng】尼采的话【huà】来说，就是设【shè】计中的“没有什么是【shì】真【zhēn】的，一切都被允许【xǔ】” 。哲学上，这个立【lì】场是否正确可以被一直【zhí】讨论下【xià】去【qù】 — 也应如此【cǐ】。但是在设计中，它代表【biǎo】着一种坚定探索你的【de】创造力的【de】准则，并【bìng】且在探索【suǒ】中【zhōng】，没有任何【hé】“神奇交【jiāo】叉点”能限制【zhì】你。

　　自由发挥，打破规则，找点乐子【zǐ】，如果你很【hěn】幸运【yùn】的话【huà】，说不定【dìng】还会找到一套全【quán】新的网页设计准则【zé】!

　　黄金分割(神圣比例)?

　　趁着我们在讨论设计中“神奇【qí】”的【de】事物，让我对【duì】另一个相【xiàng】关【guān】的话题也展开【kāi】一下：长期以来，人们一直认【rèn】为使用黄金比例(“神圣”比例)会给人【rén】眼带来一些特殊，令【lìng】人愉悦的感觉。但目前为止【zhǐ】，也有了不少的【de】实验以充【chōng】分的理由质疑这【zhè】些【xiē】现代化之【zhī】前的假【jiǎ】设【shè】。

　　这个问题【tí】的裁【cái】决【jué】还在进行中，而且【qiě】看样子可能【néng】会持续很长【zhǎng】时间，但是【shì】它不应【yīng】该【gāi】使我们放弃以开放的态度【dù】来质疑这些【xiē】传承下来的假设。我们应该【gāi】在【zài】思维上超越这些“神圣”的东西。或许因为【wéi】黄金比例【lì】在自然界重复【fù】率很高，一段时【shí】间【jiān】内认定它是美的标准【zhǔn】是【shì】合理的。可是话【huà】说回来，在【zài】没有确凿的【de】科学依据之前，就它本身依然很【hěn】难形【xíng】成决定【dìng】性的标准【zhǔn】。黄金【jīn】比例也【yě】许【xǔ】是美的【de】标准，也许不是，但是我不希望它仅仅因此而成为一【yī】种理【lǐ】所当然，甚至【zhì】形成设计的基础。

　　十二列栅格

　　现在回到更具体范围来，我【wǒ】想通【tōng】过【guò】一个非常通用的网格使用方【fāng】法来帮助【zhù】你形成你的第一【yī】个【gè】布【bù】局构建体系。十二列栅【shān】格是个很好【hǎo】的助手。

　　为什么十二列栅格那么方便? 对于网页设计与制作初学者来【lái】说，这个栅格可以【yǐ】同时被【bèi】作为三，四和六列栅格使用，所以它足【zú】够灵活，处【chù】理各种不同的内容材【cái】料【liào】的时【shí】候游刃有余。 最重【chóng】要的【de】是，使用中你【nǐ】可【kě】以将【jiāng】它【tā】以对称的形式和不对称【chēng】的形式【shì】来【lái】使用 -- 这样的可【kě】能性【xìng】为设计提供了很多选择，无论你【nǐ】选择使用传【chuán】统的，安全【quán】的布局还是【shì】超出简单对称的动态布局【jú】。

　　让我们看一下使用了这个栅格的高灵活度的几种布局：

　　四列栅格

　　四列网格的【de】主【zhǔ】要【yào】优点是它【tā】很简单，它有很强的【de】平衡界面能力以【yǐ】及可靠【kào】性。 这个例子【zǐ】里面每个栅格跨越三个列。 它的缺点【diǎn】是过于对称的【de】特点有时候让【ràng】它看起【qǐ】来【lái】有些无聊。

　　常见【jiàn】的设计的需求会【huì】有一个【gè】主要部分排版需要强调的内容，然后一个侧【cè】栏来【lái】放置次要【yào】内容。 在下面的第【dì】一个示例中【zhōng】，你可以看到第一列用于品牌【pái】宣传，中间两列用于【yú】主要内容【róng】，而最后一列用【yòng】于不【bú】太【tài】需【xū】要突出显示的内容【róng】。

　　三列栅格

　　这个栅格的每栏都包含了4列，由于它是一【yī】个【gè】不对称【chēng】的网格，因此【cǐ】涉及【jí】的方面【miàn】更多【duō】一些，所【suǒ】以使【shǐ】用中，需要【yào】用【yòng】更加聪明【míng】的方式在设【shè】计【jì】中找到平【píng】衡点【diǎn】。 像这样的不对称布局通常被认为更活跃，更熟练的技术【shù】运用。当然【rán】这个说【shuō】法可以而且应该受到质疑!

　　六列栅格

　　文中的例子里，这个六【liù】列栅【shān】格每栏【lán】跨【kuà】越两个单元【yuán】列，这使它比三列栅格更有【yǒu】挑【tiāo】战性一些。

　　它将三列【liè】栅格中【zhōng】每一【yī】列另外拆分为两列。 六列栅【shān】格给设计带来更多【duō】选择和机会，让你可以更【gèng】方便地【dì】微调【diào】较小的【de】细节。如果你需【xū】要设计一个内容非常丰富并且【qiě】需要存放大量信【xìn】息【xī】的网【wǎng】页，六列栅格是个【gè】明【míng】智的起点。 但由于【yú】它是个【gè】更有难度的网【wǎng】格，我不建议【yì】在第一个项【xiàng】目就开始使用【yòng】它。

　　组合

　　设计中，你还可以【yǐ】考虑合并【bìng】使用不同【tóng】的栅格。组合也是【shì】十二栏栅格作为一【yī】个界【jiè】面辅【fǔ】助系统非常方便的【de】原因。 它能轻松地【dì】将【jiāng】三，四和【hé】六列的栅格整齐地组合【hé】在【zài】一起。

　　重点

　　平衡而简【jiǎn】单的布局通常比过于【yú】复杂的布局更让人舒适。 对立面是，设计中需要注意不要太【tài】过安全，否【fǒu】则设计可能会显得无聊【liáo】。 为了强调某些【xiē】内【nèi】容【róng】，可以尝试【shì】让它脱离栅格或通过大小来实现突显(例如，通过合并【bìng】列【liè】)。 这样可以【yǐ】有效地引起用户的兴趣【qù】并【bìng】在【zài】主要【yào】设【shè】计【jì】元素中【zhōng】形成更好【hǎo】的层次结构【gòu】。

　　Breaking out of the grid to create emphasis can either massively improve your design by highlighting essential pieces, or it can look really, well, dumb. Wallpaper did a great job at breaking out from the four columns and heavily emphasize the video they want you to watch.

　　通【tōng】过让【ràng】某些特定元素脱离栅格的方式来实现重点的【de】突出，要么【me】会让你的【de】设计非【fēi】常出【chū】彩，但是不【bú】够高明的使用【yòng】则会让设计看起来很【hěn】笨拙。 Wallpaper在突破四列栅【shān】格的表现方面【miàn】做得非常出色，并【bìng】且也很有力地强调出了【le】他们希望【wàng】用【yòng】户【hù】观看的视频。

　　但是过多【duō】地破坏栅格【gé】的【de】节奏会导致【zhì】布局【jú】看起来残破【pò】，不完【wán】整【zhěng】，或过分强调了太多零碎的【de】内【nèi】容。因此在使用这个方式的时候需【xū】要小心，以免内容不明【míng】确，用户无法记【jì】住【zhù】重点信【xìn】息。

　　局限性

　　关于栅【shān】格经常【cháng】出现的【de】问题之一，便是在设计中，什【shí】么时候才【cái】应该【gāi】使【shǐ】用栅格，答案是： 所【suǒ】有时候【hòu】! 选择栅【shān】格永【yǒng】远都是个好决定【dìng】，因为【wéi】它【tā】们【men】有助于保持设计平衡，层次结构，页面【miàn】整齐和一致性。

　　总是有一个【gè】争论，认为栅格限制了设计。 栅【shān】格虽然会形【xíng】成限制，但【dàn】是【shì】这种限制是一件好事，因为它实际上【shàng】可【kě】以促进【jìn】创造力的发生，还能用有建设性的方式【shì】指导【dǎo】设计决策【cè】。 所以，这样的限制事实【shí】上是【shì】当【dāng】你【nǐ】开始一个项目时很好【hǎo】的起点。当你有了外界设计【jì】限制时【shí】(例如客户提供给你的广【guǎng】告的【de】大小【xiǎo】尺【chǐ】寸)时，便同【tóng】时有了一个栅格来围绕【rào】它进行设计。 你【nǐ】对栅格的【de】选择可以也应该要考【kǎo】虑到这【zhè】些限制。

　　在【zài】下面《华尔街【jiē】日报》的示例中，可以看到标记【jì】绿色的【de】广告尺寸是设计师通过栅【shān】格的协【xié】助来【lái】做的设计【jì】决定。

　　脑图

　　使用栅格很成功的情况下，它应该【gāi】也会【huì】帮【bāng】助你构建网站和它包含的各【gè】个【gè】页【yè】面的思维模型。 这同时也意味着同一个网站【zhàn】的各个页面【miàn】的【de】结【jié】构不应完全不同—— 调【diào】整每个页面使【shǐ】其有共同点来实现一致【zhì】性【xìng】应作为设计计划的【de】一部分【fèn】。

　　让我们再来看一【yī】些【xiē】Etsy成功【gōng】解决此问题的示【shì】例【lì】。 但是这次，我们集【jí】中【zhōng】讨论栅格如何满足其对不同的【de】内【nèi】容需【xū】求，以及在【zài】需要的时候如何将它们逐页地混【hún】合在一起。 我认为他们在【zài】保持某【mǒu】种【zhǒng】一致【zhì】性方面做得非常【cháng】出色。这种一致性创造了统【tǒng】一的印象，还将页面整齐【qí】地绑在【zài】一起。这样一来，用户在浏览的时【shí】候，全程都有指引，并且也明【míng】白对不熟悉的页面应该有什么样期望。 他【tā】们的思维导图是【shì】健【jiàn】全的，因此不会出现任【rèn】何【hé】结构上【shàng】的意【yì】外来破坏【huài】用户【hù】体验。

　　他们为【wéi】页面创造了一个【gè】很好的节奏，加上简洁的重复【fù】使用，他们的栅【shān】格【gé】看起来很优雅【yǎ】大方。

　　最后的想法

　　总体【tǐ】而言【yán】，系统地规划内容排版是整篇文【wén】章主题【tí】的关键【jiàn】。 要【yào】将各种形式的内容【róng】捆【kǔn】绑在【zài】一起，一致【zhì】的栅格是最【zuì】有效的工具。统一的栅格【gé】会建立一个强【qiáng】轴【zhóu】，这【zhè】个强轴会引导用户的眼【yǎn】睛和动作(例如视【shì】觉锚点)，将你设计的各个【gè】部分绑定在一起并产生凝聚力，建【jiàn】立【lì】更牢【láo】固的【de】关系。 保持设计的【de】简【jiǎn】单! 让你【nǐ】的设计更易于构建和维护。

• 上一章：怎样制作设计出颠覆式的网页
• 下一章：设计网站你应该了解的几个点