网页设计中方框元素的应用 摆脱呆板方形也能美

网页板块

　　方框方形元素，经常运用于网页中的各大板块，它们能够有效的将网页中的元素变得条理清晰等，那么我们来看看下面一些案例是如何巧妙的运用方框。

　　下面一个旅行网页。整个网站用了大面积的方形元素，利用这些方形的大小和改变长宽比例来错列排版，使得整个网页信息分类明确，节奏感十足。

  一些商城网站也融入了方形的元素，有效的管理和整合了各类商品信息，同时也利于网站适配不同端口设备展示。

常见按钮

　　网页中常见的按钮，其实近几年开始流行的幽灵按钮(透明按钮)就是大量借鉴了方框元素，当然实心按钮也采用了方形元素。下面我们来看下运用了这些元素的案列。

　　下面整个网页色调明亮清新，除了渐变的背景就是内容。高饱和度的蓝色背景里有点状的世界地图作为纹理点缀，使之不显得单调。大小错落的内容靠左对齐，下面设计师在按钮上利用了框型的元素设计了幽灵按钮，使得整个文字内容搭配更加通透。

图片

　　现在越来越多的方框/方形元素出现在网站图片中，下面案例是一个标准的图文结合的设计案例，设计师为了让图片和文案左右两边的视觉平衡，于是加入了方框/方形的元素与图片进行结合。瞬间整个画面变的富有设计感起来了。

文字

　　复杂的文案排版起来单调，过于平淡，无层次感?哪么我们来看看方框/方形是如何解决这些问题的。

　　下面案例中，设计师在这段文案进行设计排版的时候，如果素材有限不能放图片，如何才能让它们变得富有设计感，左右平衡呢?于是设计师将左边的文字与方框元素结合起来，轻松的解决了这个问题。

搭配

　　下面案例中，banner中的文案只有一句话，搭配其他产品。设计师利用方框元素，将分散的文字变成了整体，所以使瓶子靠在文字上，给人更安全稳定的感觉。

VI logo

　　方框方形的元素如果放在VI 中结合，是不是很有趣～

　　以下是1+手机的Logo ，通过结合了方框的一部分，两边的线条将用户的视觉引导至+的图形上去，即使在不了解这个品牌的用户 也能够快速的阅读了解这是1+(个人见解)。搭配整个画面，大量的留白，左上-右下的视觉定律，让画面变得简约而不简单。

残缺的方框/方形

　　这类元素往往结合文案一起展示，主要通过方框的线条将用户的视觉中心指引到作者想要表达的内容。更多网页设计信息请看：网页设计方形元素有什么作用？色彩对比有血有肉