“方块理论”是“化繁为简”的东西，因为这是一个新的理论，所以大家不凡多看几次，相信慢慢就会了解了。它可以让设计师把复杂的
设计理论，系统地讲出来，方便设计师与需求方沟通、让提案更加得心应手，而它更重要的一点是，可以让设计师快速地提高设计水平。
接下来我们继续通过不同的案例，继续深挖“方块理论”的实战能力吧。
好的作品是具有较高的商业价值的。首先，大家必须明白，无论是因个人兴趣创作的作品，还是以商业目的创作的作品，都必须是对
品牌或企业产生直接或间接的经济效益，才可以称得上是成功的作品，卓越的作品，伟大的作品。
同时，根据作品永远是为了品牌服务的观点，任何作品首先都需要从品牌角度分析，并结合“方块理论”实战。而我们应该如何去理解
“作品永远是为了品牌服务”这个观点呢？我想通过两个例子来解释一下：
案例一：草间弥生的绘画作品是成就她个人的，她本身就是一个“品牌”。从“品牌论”的角度来看，她是成功的，卓越的，伟大的。
宇宙万物的基础，故此我们可以把她的作品看作是由多个圆点组成的方块。接着我们再结合”方块理论”来分析她的作品：我们知道”方块理论”
另外重复、叠加、元素、肌理、破局等技巧被作者灵活运用（用许多不同大小的圆点组成的南瓜你一定有印象吧），大大小小的方块组合在
一起达致画面的平衡。当我们在分析别人的作品时，你都可以使用”方块理论”来进行快速的分析，从而提高你的审美能力。
草间弥生的作品中表现出她极高的个人天赋，同时你也可以用”方块理论”将其作品的表现方式一一进行合理的分析，因此可见，
案例二：陈幼坚最让人熟悉的设计是“可口可乐”的中文标识，你也是可以用”方块理论”来进行分析：你可以把“可口可乐”
每一个字看作是一个方块，每个方块既有对称也有互动，从而组成动感平衡的感觉。
2003年，陈幼坚对可口可乐中文标识进行了再设计，这是可口可乐中文标识自1979年进入中国以来首次大的变动。陈幼坚通过对
“COCA-COLA”英文标识的仔细研究，发现其中的飘带和衬线笔划弧度的设计可以成为中西方两种字体风格相互映衬的契合点，
经过巧妙的构思与反复的修改，为了和英文标识中斯宾塞（Spencerian s cript）衬线字体相互协调，他将之前传统的中文汉字改编设计成了
弯曲流畅的“斯宾塞式”中文字体。从形式上看，多层次的飘柔丝带设计，和飘带中的银色边线，使标识更加富有时代感，经过微妙的调整和
添加之后，原有的视觉元素被激活起来。从色彩构成上看，底色色彩为红色，字体色彩为白色银边，高纯度的红色与白色形成鲜明的对比，
而银色边线则起到了降低饱和度的作用，再加上富有韵律的银白色飘带设计，使整个标识更加富有动感效果。
经过陈幼坚的创意设计，使可口可乐新的中文标识既有中国特点又兼具国际风范，让人一眼就能认出可口可乐家族的新成员。陈幼坚一直不断
地发掘各种独特的创意思维，把已有的设计在自己的思维模式中进行解剖与重构，使作品完全脱离原本的面貌，诞生出新的意义和内涵。
总的来说无论是艺术创作作品、品牌设计作品，还是其他的商业作品，都可以通过”方块理论”进行分析，但无论如何，大家都必须要清楚
地记住一点，成功的作品永远都是为品牌服务的，所以它们都需要突出品牌的重要性。 （更多精彩内容请关注我的微信公众号：种梦。）
在设计行业中，平面设计是所有设计的基础，它是由字体、版式、色彩与个性化四个部分构成的，它也是网页设计、UI设计、电商设计、
动漫设计甚至服装设计与建筑设计等的基础。所以无论你从事设计中的哪一行业，建议优先把平面基础学好学扎实，这样对你的职业生涯
接下来我们通过两个案例，结合”方块理论”从实战角度出发，去分析关于平面设计的排版套路。
这个系列的作品是《奥迪》品牌与我的原创品牌《NESKY》相结合，形成一个独立的世界观 ，这是当初我在设计作品时的构想。
结合”方块理论”来分析的话，首先从平面构成来说，三个作品的构图模式是一致的：视觉中心主体方块（A）占的面积最大，
主体方块（A）由两块组成，左边方块A1是《奥迪》的汽车，右边方块A2是与之互动的《NESKY》品牌元素，左上角是次主体方块（B）
是主题文案，最下面左右对角是辅助方块，分别有两个品牌的信息，三个方块组成了基础的平面构成形式。在主体方块里，左右两个方块A1、
A2是互动关系。A1的内容延伸出了A2的内容，而A2的元素是从小到大的排列，最终组成了一个三角形。之前我也提到过，所谓的”方块理论”
从色彩构成上来说，它是基于品牌特性的，因为是系列性的作品，从最初构思的时候，我就已经想好“海陆空”三个主题画面：
第一幅作品是“天空主题”的，因此主色调是蓝色，然后因为是“天空主题”所以加入了大量的白。我也曾经说过，蓝色是一个冷色调，
但也有明度、饱和度高低之分，表达出来的气氛完全不一样。在这个作品中我选择的是明度较高的蓝色，会比较“轻”，因为它更加接近白色。
说完画面整体的颜色，我们再具体看看主体方块，A1是车身的颜色灰白色，灰色在所有颜色中是保持中立的颜色，它可以跟任何颜色搭配，
是万能的颜色搭配王之一，而A2的颜色是由渐变色构成的，大家可以看到它是从粉红色渐变到绿色，再渐变到紫色的过程，这些颜色的渐变
过渡是平衡的和谐的。在中间作为过渡的绿色既能跟粉红色形成了对比，也能与同为中间色的紫色相融合，形成一个渐变色的三角型互动画面。
次主体方块的颜色主要就是根据“天空主题”搭配的，而辅助方块也是。
我们接下来，再从立体构成上分析：这个作品虽然是大部分都是由三维元素组成的，但我在之前原创文章也说过，无论是平面还是三维的作品，
它都是基于平面的。所谓的“立体”是通过物体的阴影、光面、暗面、景深形成的。在这个作品中，A1与A2形成了互动的前后关系、而在A2
里面各个人物的位置、比例与其他物件在空中停留的位置、角度等，形成了立体构成关系，如果大家把它们都单独看成是一个个独立的小方块，
大家会发现，它们都是基于画面平衡的，它们之间是有互动的，因此你可以通过”方块理论”去分析优秀的作品，去理解它们之间的互动关系，
从而快速地提高自己的审美能力，创作出更加优秀的作品。
由于《奥迪》系列中的作品构图都是大致相同的，所以接下来的两个作品，我主要分析的是它们色彩构成，先说“陆地主题”作品，
它是用夜晚来表达的，但在画面中并没有使用纯色的黑，以免显得单调而乏味，而是用了高级灰——一个接近黑色的颜色。
在主体方块（A）中的A1跟之前的主题是一样的，这里就不再重复叙述了，而A2是一个从绿色开始渐变的，绿色从粉红色渐变到紫色，
这跟“天空主题”比较接近，红色与紫色是近邻的颜色，而绿色与红色、绿色与紫色，前者是对比色后者是近邻对比色，两者同样具有强烈的
另外从元素的细节来看，左上角次主体方块（B）中，LOGO的用色跟A2的渐变色也是相互呼应的（具体的方块布局请参考“天空主题”）。
“海洋主题”作品虽然都是用了蓝色的主色调，但跟“天空主题”不同的是，它的明度是比较低的，比较接近黑色，是深海的颜色。
在色彩构成上是蓝色为主，在主体方块（A）A2中，在蓝色的主色调中加入黄色这个近邻对比色，产生出较为强烈的视觉冲击力，
而黄色与粉色是近邻色关系，在画面中可以产生和谐的效果。在整体画面中，蓝色与粉红色也是近邻互补色。
值得一提的是，为了使画面感觉更加的通透，在左上角次主体方块（B）中，LOGO的用色并没有跟A2的渐变色保持一致，而是使用了
与整体画面蓝色相呼应的，蓝色加白色（具体的方块布局请参考“天空主题”）。（更多精彩内容请关注我的微信公众号：种梦。）
《五行》系列作品在平面构成与立体构成上都是比较一致的：作品在平面构成上相对简单——最外层背景是一个最大的辅助方块，
主体方块在画面中心，视觉中心位置，次主题方块在画面四周，形成一个从内到外延伸的趋势。
虽然作品从平面构成上来说，相对比较简单，但是作品的细节部分是可以无限扩大的。要时刻记住，细节决定成败。在立体构成上，
这个系列的作品都使用了景深，从画面中形成了前、中、后的对比关系，制造出较为有视觉冲击力的空间感，以达致画面中的平衡。
色彩构成是五行系列作品中较为重要的组成部分，首先作品是以“五行”为主题的，五行包括：金、木、水、火、土，它们是相生相克的关系，
正如我上文所述，无论是基于品牌的创作商业非商业作品，还是纯碎为了展示个人能力的个人作品，最终都是为“品牌”服务的。这个在你用
配色之前，必须清楚地明白。再说回五行系列，整个系列的作品配色都是基于五行中的五种元素而展开的，“金”用金色，“木”用绿色，
“水”用蓝色，“火”用红色，“土”用褐色，这些颜色上的划分，在还没有开始创作之前就要规划好。
另外，从“方块理论”中的“技巧与细节”上我们在继续分析：系列中多次使用了“方块理论”的“技巧与细节”的“重复”技巧，如“火”
主题作品中，把主体的三维花，通过缩小放大，放置画面中多个位置形成景深效果，再结合“叠加”技巧在三维花加入火光形成一个符合主题的元素。而在作品的背景中使用了火光的肌理，进一步加强画面感，另外系列中多次使用了“破局”去把五行这个系列有机得串联起来。如“金”
主题作品，因为金生水，因此画面由金球生出了流动的液体，而在系列中的其他作品也使用了类似的手法，如“木”主题作品中，
由木球生出了火光等等。
总结：平面设计是一切设计的基础，通过以上的两个案例想必大家都已经对”方块理论”有了更加深入的了解，在面对世上千变万化的设计作品，
大家都可以用”方块理论”进行系统化的分析，在提高自身审美能力的同时，逐步形成自己创作的思路。
（更多精彩内容请关注我的微信公众号：种梦。）
三、网页（UE）/UI：设计是与用户沟通最好的桥梁，更是数据驱动下的结果
网页（UE）、UI绝对是当前最火的设计行业之一。网页设计是平面设计的延伸，是将平面设计的基础技能应用于网络上，是即时的、
是有交互性的、是会产生联系的。UI设计是基于网页设计、基于互动延伸出来的，是数据驱动下的设计类别。它弱化了传统平面设计上，
艺术层面的表现，而增强了数据驱动下，符合用户习惯的设计。
接下来我们通过两个案例，结合”方块理论”从实战角度出发，去分析关于网页（UE）设计与UI设计的排版套路。
接下来我们使用”方块理论”分析一下《彼得的蜜蜂》在网页设计中的排版套路。
《彼得的蜜蜂》线上线下都有销售渠道，线下主要以分销为主，线上主要以淘宝为主，为什么要说这个呢？我一直强调，所有的作品都
是为品牌服务的，而成功的作品是具有商业价值的，而如果你连品牌如何赚钱，品牌的用户属性都不知道，那如何做出成功的设计呢？
关于品牌这块我会在下文具体通过几个案例述说，我们继续说回《彼得的蜜蜂》的网页设计部分。《彼得的蜜蜂》需要突出“养蜂人”
这个概念，自然、安全、简约、有趣是其品牌关键字，同时网页不需要有购物功能，主要以传达品牌核心为主，所以在设计上更多考虑的
首先我们使用栅格系统把页面布局规范起来，所谓栅格是由网格演变而来的，它类似于我们小时候学练字的小本子，而所谓系统就是规则，
通俗一点来说栅格系统就是“设计师用格子制定规则”。（更多精彩内容请关注我的微信公众号：种梦。）
页面总宽度：在国内一般情况下，网页宽度为1920像素，高度根据实际需求而定，当然如果为了适应更多的4K、8K显示器
用户可以把宽度设置得更加宽；
最佳（安全）可视范围：网页主视觉的最佳可视范围宽度一般设置为960-1120像素，设置可以保证大部分用户在较为舒适的情况下浏览网页。
列数：网页被纵向分为若干等份，一般常规的做法是分为12列（如果12列除不尽，那就16列，12列并不是唯一的标准），移动端一般分为6等份；
列宽：1920宽度的网页纵向12等份，每一份的宽度为160，而160由两个内容组成，一个是列宽120，一个是间距40；
根据栅格系统，我们已经为网页布局制定了规范，接下来我们结合品牌述求使用”方块理论”对网页进行规划设计。在规划设计时要注意
层级关系中的方块比例，导航栏尽量轻一点（次主体方块B），简约一点会更加符合现代人的审美要求。然后就是主体方块与其他
主体方块A在画面的视觉中心位置。它是网页中的最为重要的视觉中心，是表达品牌精神最佳的位置，所以建议可以使用多图互换
形式展示，把品牌精神充分地表现出来。
次主体方块C使用了“绝对对称”， 为了打破绝对对称的沉闷感，使用了“方块理论”的“破局”技巧在每个小方块上都有一些装饰性的品牌元素。
次主体方块D使用了左右排版的方式，左边是人物右边是字体，在右边的字体中，也分了上中下三层。次主体方块E同样是使用了“绝对对称”，
把画面平均分层了6等份，每一份都用颜色去区分。同样的每一份就是一个小方块，小方块加入了一些装饰性的品牌元素来“破局”，
以达致画面平衡。其余的次主体方块都是大同小异，这里我就不再重复了。
案例主要是针对网页设计中“方块理论”的实战探索，而关于网页设计中的其他相关内容例如流程、规范、细节等，大家可以查看之前发布的
母婴品牌，品牌主要元素为蜜蜂与蝴蝶，因此会以黄色为品牌主色调配以红色，但是大量黄色会让人觉得刺眼，所以会使用大量其他颜色降低
用户的视觉审美疲劳，并增加趣味性。故此在网页设计上也会延续着品牌相关的设计属性。（更多精彩内容请关注我的微信公众号：种梦。）
恰巧，两个品牌都与蜜蜂有关，都是以黄色作为主色调。不过《彼得的蜜蜂》是以自然、安全、简约、有趣的母婴产品为卖点，从色彩构成上
主色调饱和度较低，明度较高。而《疯蜜》走的是高端成熟女性路线，在整一个品牌视觉中，不会出现太多的颜色，《疯蜜》主要是使用黄色
与高级灰两种颜色为主色调，从色彩构成上主色调的饱和度较高，明度中等。
以下是一张关于《疯蜜》视觉元素的展示，而这种关于品牌调性的元素将会延续到UI设计里。
我之前也说过，UI更倾向于用数据来驱动的，因此为了适应大部分用户的使用，UI的设计会更“方块化”，有明显的条条框框，
设计上更保守一点,其实只要是符合用户使用习惯，用户体验良好就行了。
UI登录页面是最常见的交互之一，我们来看一组登录页，第一个画面是上中下结构，第二个画面是上下结构，第三个画面也是上下结构。
我们使用“方块理论”对齐进行划分。划分后我们可以清楚地看到，这一组登录页的主体方块都是在视觉的中心位置，都是占据画面中大面积的，
我们再进一步分析，上文说过《疯蜜》有属于自己品牌调性的元素，所以可以通过添加元素让画面更加有趣，此处的元素属于画面中的辅助方块。
我们在看下一组登录页，在一个画面中，主体方块不一定是居中的，方块可以通过层级关系达致平衡，我们首先使用“方块理论”对这一组三个
画面进行划分。大家可以清楚地看到主体方块统一在左上角，而底部是次主体方块，背景是辅助方块。主体方块与次主体方块并没有对称，
而两者都是通过与辅助方块的“相对对称”达致平衡的。我们再进一步分析，三个画面的主体方块A与辅助方块C，都是使用了“相对对称”
达致画面平衡，而为了使画面的空间感加强，我们可以预留多一点的“透气”位，就是我们经常听到的留白（留白适用于广大的设计作品，
关于留白的要点下文有详细说明）。辅助方块C，右边是留白的，中心位置也有大量的留白，你可以把留白的位置看作是“虚”位，
把主体方块A看作是“实”位，把整体看作是“虚”和“实”之间的平衡关系。
而次主体方块B与辅助方块C同样也使用了“相对对称”达致画面的平衡，而有点不同的是，因为其是一个按钮是需要产生交互的，
所以其位置需要符合用户的手势习惯。其实，在数据化驱动的UI设计中，团队合作是最为重要的，而不是走什么创意路线。一般情况下，
设计师都是按产品经理的原型图来进行设计的，而相对来说登录页面设计、HTML5设计等可以走一定的创意路线，例如HTML5可以加入炫酷
我们以上两个案例主要是针对UI设计中”方块理论”的实战探索，而关于UI设计中的其他相关内容例如流程、规范、细节等，大家可以查看
与立体构成主要是考虑方块之间相互作用下，如何达致画面中的平衡。如下图，大家可以试着使用学会的“方块理论”知识去分析一下这个画面。
总结：网页（UE）/UI是平面设计的衍生，是将平面设计的基础技能用于网络上，是即时的、是有交互性的、是会产生联系的。“方块理论”在应用的时候与平面设计相似，只是平面设计讲求是平面构成平面原理，而网页（UE）、UI讲求的是数据驱动设计，两者有明显的分别，在设计的时候要加倍留意。
由于文章篇幅较长，为了提供更佳的阅读效果，文章分上、下两集发布。下期我将从电商、插画、品牌VI视觉重塑等方面对”
方块理论“进行详细阐述，请大家关注我的微信公众号：种梦。
最后，我想说写出一万多字的原创文字实属不易，希望我的文章，对大家往后的设计生涯有所帮助。希望大家多多支持我，多多支持种梦订阅号，同时积极参与《种梦人每周一练》，在每一次练习中逐渐提升自己的设计水平。同时，现在“种梦”还有免费的设计分享直播，欢迎大家来收听。
![[致奋斗的你]TANGPION](https://img.zhisheji.com/Fk_B53cYb4RjlpM-_tz02-mCHuNB?imageMogr2/quality/100/sharpen/1/thumbnail/290x/crop/!290x180)
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
Tommy子言
全部评论()