译者：蒸个豆腐
门牌号：http://www.zcool.com.cn/article/ZNDI5ODA0.html
写在后面：
电商历经了一一年的产业发展早已渐渐成形，因此早已产业发展出了自己的商业模式和艺术风格。但对于B2C的结构设计艺术风格绝大多数人还逗留在起初的用货品拼凑+文本重要信息+各式各样支离破碎的效用。而这一年各B2C公司早已非常倚重结构设计了，而且结构设计艺术风格也渐渐迈向简约以至Becoming的艺术风格。这种变动是随著B2C的急速产业发展，更为倚重商品的商品品质而变异的。
上面从3个方面来说呵呵怎样做Becoming的结构设计，每一里头都有一些具体内容的习题。
先看呵呵Becoming结构设计的事例：
这是镰刀T1的网页结构设计，虽然好些人都不讨厌Shajapur，但我真的他有对结构设计独有的一种自恋的自恋，不论是智能手机的外形（各式各样等距）还是控制系统UI的结构设计，我真的作为结构雕塑家我还如果多向他自学呵呵。返回网页结构设计这类，他们来预测呵呵这个网页的结构设计。
一、无与伦比的开本
可能我们开始写字的时候就碰触和自学画法了，而画法就是开本结构设计的此基础。但他们常常忽视了对画法和开本的无与伦比崇尚，一般他们协进会说，相差无几看著难受xml，不过对结构雕塑家的潜能晋升为他们还需要更为倚重开本的结构设计。
上面是两个开本结构设计的基本功：
1.翻转——最基础但也最重要
上面图A、B、C是对网页重新排版，图D是原有的结构设计。虽然总体看起来都还可以，但他们仍然可以很直观的看出来，图A的画法有些头重脚轻，让人感觉中心偏下；图B的智能手机主体物有种对文案的挤压感，让人真的压抑；图C的智能手机和文案成为90°的夹角，让人真的有种阻碍感，不顺滑；图D的结构设计很好的协调了主体图与文案的关系，因此给人一种从远及近的中距离纵深感。整个画面中间翻转更能最大限度的突出主体——智能手机。从镰刀的网页结构设计中他们可以观察到，这种排版方式是中间翻转，不论是横向还是竖向。
再看两个中间翻转的例子：
上面的结构设计家也是用的中间翻转方式，大写的V视觉冲击力非常强，而左上角的Logo重要信息和右下角的重要信息成为对角形式，让人感觉画面非常平衡而又稳定。
小米2015年的新品发布会海报也采用了中间翻转的形式，让关看者很容易的就聚焦到中间“新年礼物”的重要重要信息上。
上面的图例是左右排版方式：
由此他们总结出翻转的开本的两个特点和作用：
A、视觉聚焦；
B、强化网页统一性和条理性；
C、对视觉的导向作用。
2.对比——让画面不再平凡
作为简约以至Becoming的结构设计来说，对比非常重要，对比可以让人非常快速的阅读到重要重要信息，也可以让版面的结构设计有节奏感，让画面看起来不乏味。
上面的结构设计是小牛N1和一加3的结构设计，这两个结构设计是典型的左右排版。右侧放货品图片，左侧排列简单而有用的基本文案重要信息。而左右两边的图片和文案重要信息的大小对比要要根据货品的属性来决定的。例如，一加智能手机主要体现智能手机的外形和质感，所以放置2个占比面积较大的智能手机，搭配最基本的文案重要信息（只有智能手机名字、价格和购买按钮）。
上图是文案与货品的面积对比。
这个结构设计则与一加和小牛相反，文案面积很大，但他们的视觉中心依然是手表，因为实物的照片常常会更为吸引人，这就是对比。但还有一个对比不知道我们看出来没有，就是文案里的对比，标题选用大而粗的字体，其他重要信息则放的很小，大能又快有准的看清标题的内容，另外因为字体大小和粗细的变动让人感觉有节奏感。
3. 有“气质”的留白
Becoming结构设计里的留白非常重要，最典型的是无印良品的结构设计，它是把留白应用到现在结构设计里最好的典范，但我真的他们中国人才是留白的“老祖宗”，国画就是非常典型的例子。
上面他们来做个对比，他们把图上的一些不必要的复杂背景和文案给去除。主要是让商品主体和主要重要信息展示的更为清晰和明确。
再做更进一步的精简，增加留白的面积，使商品和商品信息更为清晰的传达出来。
上面是其他一些事例他们可以试着自己预测呵呵，注意留白不一定就是白色。
二、精致的颜色
在B2C结构设计中，对颜色的把控非常重要，在某种情况下对颜色控制的好坏直接影响着网页的逗留时间。一些经验不足的结构雕塑家常常会对颜色的把握非常头痛，颜色脏、配色不好看、用色过多等都是经常出现的问题。在Becoming的结构设计中更需要对颜色做减法，因此急速的调节细微的明度、饱和度和颜色的搭配，正是这些细节的调节才会让Becoming的结构设计更为耐看。
2.让结构设计快速出“彩”的方法
在Becoming的网页里，颜色常常用的非常谨慎，而他们第一步就需要选择主色调。
这里有几种选择颜色的方法：
A、黑白灰主色调+亮色辅色；
通过提取出的颜色他们可以看到，上面的网页结构设计中采用了黑白灰做为主色调，使用亮黄色为辅色，虽然亮黄色为辅色，但人们第一眼常常会注意亮黄色，而结构雕塑家把70%off的折扣重要信息的字体颜色选为亮黄色也是对折扣重要信息的强调。
耐克和小牛电动车的网页结构设计的颜色选择都是使用了这个方法，因此小牛为是让画面不单调，背景使用了素色黑白灰的一些图形元素，这样既让画面丰富起来又不会使颜色过多而显得杂乱。
B、选择货品主色调作为整体画面的主色调；
上面的图是Motox的网页结构设计，网页的主色调（背景色）使用了智能手机背壳的颜色，这样可以强调货品色彩，给购买者留下非常深刻的印象。
耐克的结构设计同样是采用这个方法，一般来说厂商想要特意退爆款会选择一种爆款的颜色或配色，而耐克这样结构设计的网页也是更好的展示了这个货品的独特的特点，让人们在任何地方看到这种颜色都会回想起耐克的这款鞋。
C、使用的颜色不要超过3种。
通过上面的事例他们发现，这些结构雕塑家所用的颜色都不会超过3种，而做为极简结构设计有时候只使用2种颜色，甚至只用黑白灰的变动来进行结构设计。
2.看似很复杂的颜色搭配其实很简单
在Becoming结构设计中，颜色的搭配需要非常用心，因为画面的颜色搭配简单时，即使稍微有点不协调也会被放大很多，因此他们需要了解颜色的两个属性：色相、饱和度、明度，还有对比色、相近色等概念。
对Becoming结构设计的配色也有两个方法：
A、 统一明度和饱和度；
下图中的明度和饱和度非常协调，既不真的哪个颜色过亮也不真的哪个颜色过暗。虽然是不同的颜色，但整个画面也是非常协调统一的，他们现在预测呵呵画面的颜色。
他们来看呵呵，上面4个圆形中的颜色是我从图片中提取出来的，上面4幅图是颜色的位置和参数，主要看颜色的位置，就是每幅图的圆圈位置。
他们看到图中有两条线，这两条线就是代码这4个颜色的明度，可以看到绿色和橘色的明度位置非常相近，黄色和深蓝色的明度位置也很相近，绿色和橘色占整个画面的绝大面积，因此整个画面看起来是非常协调的。
而饱和度就是越接近色板的右上角饱和度就越高，他们看到除了深蓝色，其他3种颜色都处于饱和度比较高的位置，因此位置比较靠近。
我们可以用这两幅结构设计来实验呵呵，自己亲手解构呵呵配色的明度和饱和度。而我真的做为结构设计师对颜色的细致理解是非常有必要的。
B、控制颜色的层次；
所谓颜色的层次他们依然用小牛电动车的图来预测，可以看到所有的颜色都提取出来后圆形中的颜色。
这样他们很容易的就能看出来颜色的层次，灰色系有7个层次，而红色系有4个层次，正因为这样的层次让整个结构设计显得非常丰富，因此有立体感而不至于太“平”。
三、考究的字体
文本在B2C结构设计中的位置极其重要，它承担着直观重要信息传播的用途，例如活动网页的折扣重要信息、货品宣传页面的卖点重要信息、货品的优惠价格、文案内容的表现等。而在Becoming结构设计中，字体的选择更为讲究。
1.选用符合整体结构设计艺术风格的字体
字体也是有自己的外貌、性格和艺术风格的，当字体的艺术风格与结构设计完美的融合在一起的时候，会给整个结构设计加分不少。
上面的两张图是“什么值得买”的闪屏网页，他们来仔细观察呵呵眼镜、相机与字体（文案）的关系。眼镜和相机的款式都是非常复古的，有种民国时代的感觉，因此结构雕塑家选用了一种仿古字体来配合图案，给人非常统一的感觉，配上精彩的文案就会给人一个民国时期的场景，这也可以叫带入感。如果他们把图中的字体换成非常现代的艺术字会怎么样？
换了字体后可以看出，虽然每一字体单独看都不错，但与配图放在一起就感觉非常的不搭，立刻失去了文案和图片想要传达的那种“工匠”的感觉。
英文的选择也是如此，看上图，英文Animal Prints是动物图案的意思，你会发现右侧的女性人物如果是穿着一条连衣裙的，因此我猜测这是卖女性服装的一个Banner，而且是属于比较成形的那种（看模特身材就能看出来），因此在选择字体的时候如果选择偏细腻柔美的字体，而不是黑粗体。
来看看下图，感觉是不是差了很多？
上面再来看几组图例，试着自己预测一下。
2.选用字形结构简单的字体
这一一年出现了一些结构复杂，字形极其夸张的字体，个人认为尽量少用甚至可以不用。字体是一门非常专业的门类，很多结构雕塑家还不能很好的驾驭一些字体，不论是普通的B2C结构设计还是Becoming结构设计最好使用字形和结构都相对简单的字体。
这个结构设计可以看到整体就是以文本为主来组合结构设计的，无论英文还是中文，都使用了字形非常简单的字体，加上字体这类的大小粗细使画面非常有节奏感，而且不会真的全是字。从这他们可以引出另一个理论，在某些情况下字体即是重要信息传达的载体，又是一种艺术图形。
上面来个反面教材：
这里他们先不说这个专题结构设计的画法、颜色，只说呵呵文本，除了9.9元比较明显的突出了卖点以外，其他基本都非常杂乱，字体的字形被改的面目全非。因此提醒我们，在没有潜能把握字形的时候千万不要自行修改甚至结构设计字体。
上面再来看看现在争相模仿的苹果：
苹果比较“牛”，为了自己的商品结构设计了一套字体，刚开始有些人说各式各样丑，但是还是被绝大多数人接受了因此获得好评，原因无非就是简单好用。这也是现在这个快速产业发展的社会最需要的，尤其是B2C行业。
自带6种粗细字体完全满足一般需要
3.“牛叉”的中文本体
这里说中文本体“牛叉”，不仅仅因为我是中国人，他们可以数数中国有多少种字体，每种字体都有自己的历史背景，例如隶书，平民是不能用的，魏碑是专门刻在碑上的字体等。而且中文也是唯一一种成为艺术的文本——书法。可能有些人真的中文本体或书法字体看起来很老旧，不现代，上面他们用实例来证明这是错的。
上面的网页是真功夫的结构设计，很明显，中文的书法字体是做为一种艺术图形来传达和表现的，因此结合一些相关元素（辣椒、调料、蔬菜、粮食等）突出“味道”的主题，因此很容易就能看出是美食类的网页。
英文也可以结构设计成书法体，表现更有张力，更为符合勇士的感觉。
小米电饭煲的“新国货”也采用了书法字体，让平淡的网页有了生机，因此这种字体也透漏这一种做成新国货的“野心”
总结
其实Becoming结构设计是结构设计产业发展进程中的必然结果，这是一种优化的过程，也就是做减法，把不必要的，干扰重要信息传达的元素删除掉，保留最基本最为有用的东西，我这次的教程也从排版、颜色、字体三个方面来具体内容的讲解了怎样做Becoming的结构设计，同样这些内容也适用于一般B2C的结构设计。其归根结底，好的结构设计的基本原理是不会变的。
目录
1．无与伦比的开本
1.1翻转——最此基础但也最重要
1.2对比——让画面不再平凡
1.3有“气质”的留白
2.精致的颜色
2.1让结构设计快速出“彩”的方法
A、黑白灰主色调+亮色辅色
B、选择货品主色调作为整体画面的主色调
C、使用的颜色不要超过3种
2.2看似很复杂的颜色搭配其实很简单
A、统一明度和饱和度
B、控制颜色的层次
3.考究的字体
3.1选用符合整体结构设计艺术风格的字体
3.2选用字形结构简单的字体
3.3“牛叉”的中文本体
—
同学们，都学会了吗？
——————–
近期原创好文推荐！
——————–
越努力，越幸运。
这里是庞门正道。
