做网站知识

广州做网站盘点下:网页设计中栅格的应用 !

新闻资讯 发布时间2020.11.24.浏览数:919

广州做网站盘点下:网页设计中栅格的应用 !

广州做网站盘点下:网页设计中栅格的应用 !

如果你曾经有过关于设计中网格的运用的疑问, 这篇文章就是为你量身定做的。文章中,我们不仅会介绍基础的理论和术语,还会通过真实的网站例子分析帮助你快速学习到网格在实际运用中的技巧。

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

● 网格是什么

● 术语

● 三分法则

● 12列栅格

● 重点突出

● 局限性

● 脑图

什么是栅格?

栅格组成了一个基本结构,这个结构可以被理解成设计的“骨架”。 通过辅助线条来编排和放置设计中的各个设计元素。 这样做可以使设计稿有体系地联系在一起,同时也保持设计的一致性与合理性。

BBC

栅格可帮助你轻松将界面上的元素对齐,有效实现一致性。 设计中,有时候,仅靠感觉和大致方向来猜测布局的效果可能不会太理想。所以正确使用网格,会让设计显得有条理,结构合理,整洁并且思考周到。

一个整洁对齐的界面很多时候都不应该引起用户的注意。少即是多, less is more。 界面设计中,尝试过于革新的手段反而会分散用户对特定内容的注意力,从而影响用户的理解。因此,不要炫耀设计技巧有多么精妙,确保用户注意力和内容的简明才应该是重点。

如果说还有什么比过度炫技效果更糟糕的一点,可能是使用完全不符合常规布局的基础规则。一个没有对齐的界面很容易给用户留下草率的印象,这样的印象可能会使用户难以对你的产品专业度建立起信任 —— 当然,除非不对齐是你为了创作尝试而专门做的决定。

术语

单元列

单元列是每个栅格的基本构建块。 一个栅格由多个单元列构成。 下面的BBC示例就是一个由12个列栅格。 一个紫色矩形框代表一个单元列。

水槽

下图上的黄色细条矩形表示将各个单元列分开的装订线。 水槽是制造微小空白空间的一种形式,为栅格提供一些的呼吸空间。

有了之前的铺垫,我们就可以了解一些更有趣的内容了。 多个单元列和装订线一起便形成了一栏,这些栏实际上是从策略的角度将内容材料放置在其中的容器。这些栏看起来似乎很禁锢,事实上在有调理的约束下设计会产生更多自由的空间。约束条件可以帮助你决策元素放置的位置,同时还能使这个过程容易并且快捷。

在下面的示例中,你会看到三种不同的栏在布局上起作用。 每个栏的大小分别受着制约,或是为了适用不同形式的内容,或是形成强调作用来裁定。

就像例子中呈现的,布局中有很多方式来混合不同形式的内容和设计元素。通过排列这些栏,界面上可以形成坚固的结构。另一方面,良好的对齐又让设计产生了一致性和有序性。 这些益处单是通过设置几个单元列和一些视觉约束就能轻松实现,是否让你觉得事半功倍呢?

广州做网站公司选三行网络—— “匠心精琢、凝聚经典”是三行网络公司的设计理念,每一件作品无不是三行网络公司设计团队的倾力倾心之作。无论策划、创意还是视觉设计,三行网络公司设计团队均力求完美,而这样的完美不仅是视觉的享受,更是商业价值、品牌理念与视觉的共荣之作!三行网络专注于上海、深圳、北京、苏州、东莞、 宁波、广州、厦门、天津、青岛、成都、重庆、杭州、无锡、 南京、佛山、郑州、金华、西安和大连外贸网站建设推广-英文网站设计制作-谷歌独立站定制开发

此文《广州做网站盘点下:网页设计中栅格的应用 !》由三行网络公司原创,转载请保留原文链接,谢谢!
关键词标签:广州做网站盘点下:网页设计中栅格的应用 !    (PC+手机)响应式网站建设

15989229398(微信咨询)

专业做网站 · ¥明码实价!


匠心打造精品,用心成就经典!携手客户共创双赢!
© Copyright 广州三行网络科技有限公司
粤ICP备案号:09210325