经常听大神说设计不需要方，会死板，没有创意。低…等等，但不是。我认为每个元素都应该在正确的环境中使用。相信会有耳目一新的效果。

　　比如我们身边用的电脑，冷库的结构等等。离不开方支撑。杂志经常在文字或图片中加入方形元素来突出或装饰它们。随着技术的发展，设计师会将杂志中的一些元素融入到网页设计中。让网页设计更具创新性。

　　功能

　　再来说说网页中方块的使用。

　　01.分开

　　我们知道，分割的要素主要是线条和人脸。其实正方形/盒子也有分割的功能。如果用在设计上，会让你的作品别具一格。

　　下面的设计作品图片中有很多文案留言，那么多留言集中在一张图片中，那么如何让它们掌握并重复呢？设计师为了让用户清晰地阅读每一条独立的文案信息，加入了盒子的元素，利用大小和对比的关系，有效避免了内容的冲突和杂乱。在这个设计中，图片中的文字也通过添加方框元素有一定的强调。

　　这种设计也有相同的处理方式：

　　02.强调

　　如何让文字内容在诸多元素中脱颖而出？要么削弱别人，要么增强自己。显然，在接下来的设计中，为了让用户第一眼就看到所表达的文本信息，设计师利用盒子的元素进行了强烈的突出。

　　下面的海报设计也应用了盒子的元素，聚焦用户的视觉焦点。既强调了重要信息，又不失画面的美感和创意。

　　03.修改

　　我们在设计一张海报或者一个网站页面的一个段落的时候，有时候画面太细，有的设计师会用其他方式来装饰，但是有的设计师用的是盒子，不一定是完整的盒子，所以整个画面会很独特。再来看设计案例。

　　下面是一组扁平化的VI作品，本来是一张朴素的名片，但是设计师用盒子的一角装饰了一下，瞬间这件作品变得充满了创意。

　　在接下来的网页设计中，原标题在大面积的空白空间中间变薄，导致页面中心不稳定。因此，设计师在标题中加入方框元素进行辅助装饰，有效丰富了标题的展示效果。

　　04、色块对比使版面变得有血有肉

　　设计师使用方形色块，使网站生动创新，使网站的布局有节奏，主次分明，逻辑性强。我们来看看这些设计案例。

　　以下是一个家具网站。设计师用正方形的大小来比较。它使整个画面中间的元素组织得清晰有条理，使用户在视觉上分层，使整个布局简洁明了。建筑公司的以下主页采用方形元素，结合了大小感和层次感，使得整个画面极其稳定，使得原网站上复杂繁多的类目清晰、干净、简洁。同时画面的布局也很独裁。

　　05、信息引导的作用

　　在复杂的海报或网站架构中，使用盒子来引导信息是一种非常有效和新颖的方法。

　　以下网站是左边一个男模的网站。整个横幅都是红色调。为了让用户快速向下浏览，设计师大胆添加了红框，有效引导了用户从上到下的视觉和浏览，同时整个画面也不会头重脚轻。此外，这种处理使得整个版面设计更加新颖，作品更加突出。

　　右边是阿迪达斯的品牌网站。设计师用方块元素作为视觉引导，一步步引导用户的视觉，了解他们所有的产品。

　　下面是一套比较时尚的海报设计，里面的角色都是用正方形的规则来引导和排版的，让用户可以按顺序阅读。

　　06、让单词互相关联

　　以下海报设计，如果按照正常的设计师，一定会按照文案信息和海报架构进行分散排版设计。

　　这样海报的画面要求会更高。如果海报凌乱，文案的可识别性就会降低。为了解决这些问题，设计师选择盒子的元素，用盒子来谈文案信息。然后利用盒子的大小，根据拷贝的主次内容进行合理的组织和分发。这不仅使视觉感独一无二，而且减少了屏幕上其他元素对副本内容的干扰。让用户第一手了解海报需要传达的信息。

　　在下面的海报设计中也使用了盒子元素，这样就可以将复制信息链接并组织在一起。通过改变框的大小，突出显示复制信息的主要点和次要点。视觉上给用户舒适的体验，画面让人难以忘怀。

　　如果我们在设计中充分利用以上表达，我相信我们的设计一定会脱颖而出。所以设计优秀作品不难，难的是你发现优秀作品的规律。当然还有很多值得发现的地方~

　　app应用

　　诉求说的是盒子元素的作用，那我们就来说说盒子方块元素常用的地方。

　　01.网页部分

　　方块方块元素常用于网页的各个部分，可以有效的使网页中的元素清晰等等。所以我们来看看在下面的情况下如何巧妙的使用盒子。

　　以下是一个旅游网页。整个网站使用了大面积的方形元素。通过利用这些方块的大小，改变长宽比，使布局交错，使得整个网页的信息分类清晰，富有节奏感。部分商城网站还融入了广场元素，有效管理和整合各类商品信息，同时方便网站适应不同的港口设备展示：

　　02.btn按钮、搜索、表单等

　　网页中常见的按钮，其实近几年比较流行的鬼按钮(透明按钮)都是借用了大量的方块元素，而实心按钮也是使用方块元素。让我们看看使用这些元素的情况。

　　除了渐变背景是内容之外，下面整个页面色彩鲜艳清新。在高饱和度的蓝色背景上点缀一幅世界的点状地图作为纹理，使其不显得单调。

　　不同大小的内容向左对齐。以下设计师设计了在按钮上带有框架元素的ghost按钮，使得整个文字内容更加透明。

　　这个网站使用视频作为背景，访问者只有通过不断变化的背景才能了解组织的工作流程。通过调色后的背景视频，不影响前景Logo，设计师利用边框元素设计了鬼魅按钮，让整个网站看起来灵动而优雅。

　　以下是网站中的指南。整个画面干净优雅，有浅灰色的背景和文字，加上一定的留白。在这里，设计者使用正方形元素来设计实心按钮，这使得用户能够引导新页面。

　　以下网站使用正方形/方框元素来设计表单和搜索框。形式部分使原本复杂干扰的文案信息清晰，画面简洁。搜索框的视觉增强导致用户进入网站搜索内容。

　　03.照片

　　如今，越来越多的方块/正方形元素出现在网站图片中。以下案例是图文结合的标准设计案例。为了平衡图片和文案的左右，设计师增加了方框/方块元素与图片结合。一瞬间，整个画面变得富有设计感。

　　在接下来的案例图片中，为了统一和协调多张图片，设计师还加入了盒子的元素，向用户传达了三块内容的系统关系，让原本素雅的图片变得丰富多彩。

　　一个角色如何简单的让他在平面上有立体感？在接下来的案例中，设计师采用了框架元素，并将其与人物相结合，使得没有空间感的头重脚轻者变得稳定而富有层次感，同时也抓住了使用者的视觉。让原始的普通页面更有创意。

　　04，文本

　　复杂文案单调，太枯燥，没有层次感？我们来看看盒子/方块是如何解决这些问题的。

　　在下面这种情况下，设计师在设计排版这个文案的时候，如果材料有限，图片无法摆放，如何让它们富有设计感，左右平衡？于是设计师把左边的文字和方框元素结合起来，轻松解决了这个问题。在下面的案例中，设计师如何巧妙的利用方块元素来连接横幅和内容？应该放在横幅上的文字放在方形色块上，既突破了传统的布局架构，又引导用户从上到下阅读信息。

　　下面这种情况，横幅里的文案只有一句话，和其他产品搭配。设计师利用盒子元素将零散的文字变成一个整体，让瓶子靠在文字上，给人一种更安全、更稳定的感觉。

　　在下面这种情况下，设计者使用方框元素将一个图形和一个文字结合起来，使整个文字的密度对比度增强，即使没有画面，也能瞬间提高整个画面的创意。

　　没什么好说的，还有很多应用，等你去发现。

　　05、VI标志

　　如果方块的元素在VI中组合，有意思吗~

　　以下是1手机的Logo。通过组合盒子的一部分，两边的线条将用户的视觉引导到。即使是不了解这个品牌的用户，也能快速阅读理解这是1(个人观点)。

　　匹配整个画面，大量的空白空间，左上右下的视觉规律，让画面简单但不简单。

　　类别

　　这里就不做详细分析了~主要原因在于大家的灵活运用。

　　01.盒子之间的组合

　　盒子/盒子的组合一般用在复杂繁多的文案内容中间，起到相互关联的作用，使彼此更加紧密。

　　02、正方形和盒子的组合

　　这种方式已经流行起来，它的主要作用是装饰单调的物体，丰富画面的美感，平衡左右关系。通常，图片或文字出现在方框和方块之间。

　　03.用于标签零件

　　表单、按钮等。都不是例子，大家都知道~

　　04.大盒子/正方形

　　大方框/方块主要用于海报，或者网页的结构等信息内容。

　　主要功能是协调、强调、区分等等。

　　05.不完整的盒子/方块

　　这类元素往往与文案结合展示，用户的视觉中心主要是通过盒子的线条引导到作者想要表达的内容。