首页

Banner设计之平面构成的奥秘

清阳

我之前说过要写一系列专门针对电商的三大构成的文章的,而在上篇文章中我已经给大家梳理了一篇关于色彩的文章:六个步骤细说电商banner图设计之色彩的奥秘,那么今天呢,我就接着要给大家讲一篇关于平面构成的文章好了。

 

在讲之前,我先给大家列一个内容大纲:

一、平面构成的含义是什么?

二、电商Banner图是由什么组成的?

三、我们该如何在Banner图设计中运用平面构成呢?

四、平面构成之于电商Banner图的意义是什么?

五、总结

注:前半部分是给大家讲解的基础知识,后半部分是运用这些基础知识结合实例讲解,所以建议从头到位耐心看完哦,需要些时间消化(经济基础决定上层建筑嘛,前面不看后面也就看不懂了),接下来我们一个个问题来解剖:

一、平面构成的含义是什么?

百度百科的解释是:平面构成是视觉元素在二次元的平面上,按照美的视觉效果,力学的原理,进行编排和组合,它是以理性和逻辑推理来创造形象、研究形象与形象之间的排列的方法,是理性与感性相结合的产物。

而我的理解是:平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言,他可以是抽象的,也可以是具象的,可以是感性的,也可以是理性的,同时它也不是独立存在的,而是伴随着色彩/肌理/光影等而存在的。基本上世间万物,所有我们接触到的或无法接触到的,看得见的或看不见的事物里都有平面构成的运用和身影。

二、电商Banner图是由什么组成的?

Banner组成要素包含4个方面:文案 、商品/模特、背景、点缀物(可有可无)。

1-

而我在之前反复强调过的,Banner的作用是:宣传/展示/广而告之/准确传达信息。

三、我们该如何在Banner图设计中运用平面构成呢?

在前面我们提到,平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言,而Banner中的所有元素(文案/商品或模特/背景/点缀物)其实都可以看作是平面构成里的点线面这些构成元素。

那么,接下来我们就需要了解3个有关平面构成的概念了:

  1. 元素与元素之间的排列关系
  2. 所有元素在一起所体现的构成形式
  3. 了解几个常用的平面术语

接下来,我们分别了解下这几个概念:

1、元素与元素之间的排列关系

它们之间的排列有下面这么几种:分离/相切/重叠/透叠/结合/减缺/差叠/重叠。

2-

  • 分离:形与形之间不接触,有一定距离。
  • 相切:形与形之间的边缘正好相切。
  • 重叠:形与形之间覆叠关系,由此产生上下前后的空间关系。
  • 透叠:形与形有透明性的相互交叠,但不产生上下前后的空间关系。
  • 结合:形与形相互结合成较大的新形状。
  • 减缺:形与形相互覆叠,覆叠的形状被剪掉。
  • 差叠:形与形相互交叠,交叠的部分产生一个新的形。
  • 重合:形与形相互重合,变为一体。

举几个例子: 

3-

4-

5-

6-

2、所有元素在一起所体现的构成形式

从所有元素(点线面)整体看,其构成形式主要有重复、近似、渐变、变异、对比、集结、发射、特异、空间与矛盾空间、分割、肌理及错视等等。

下面我们分别来举例说明:

(1)重复

指在同一设计中,相同的形象出现过两次以上,重复是设计中比较常用的手法,以加强给人的印象,造成有规律的节奏感,使画面统一。所谓相同,在重复的构成中主要是指形状、颜色、大小等方面的相同。比如:

  • 形状的重复
  • 骨骼的重复
  • 大小的重复
  • 色彩的重复
  • 肌理的重复
  • 方向的重复

重复举例:电影《满城尽带黄金甲》剧照

7-

Banner举例: 模特重复排列叠加到背景里,既是一种纹理也是一种模特展示的方式。

8-

(2)近似

近似指的是在形状、大小、色彩、肌理等方面有着共同特征,它表现了在统一中呈现生动变化的效果。近似的程度可大可小,如果近似的程度大就产生了重复感。近似程度小就会破坏统一。比如:

  • 形状的近似
  • 骨骼的近似

近视举例:台湾的一对双胞胎姐妹

9-

小时候

10-

长大后

Banner举例: 相同款式不同颜色的鞋子,大小不一的波点。

11-

(3)渐变

是我常常听说的一种效果,在自然界中能亲身体验到,在行驶的道路上我们会感到树木由近到远、由大到小的渐变。比如:

  • 形状的渐变
  • 方向的渐变
  • 位置的渐变
  • 大小的渐变
  • 色彩的渐变
  • 骨骼的渐变
  • 光影的渐变

大小渐变举例:故宫淘宝前段时间的表情包

12-

(重复+大小渐变)

举个例子:

鞋子的排列方式。

13-

背景的纹理形状。

14-

(4)对比

有时候是形态上的对比,有时是色彩和质感的对比。对比可产生明朗、肯定、强烈的视觉效果,给人深刻的印象。比如:

  • 形状的对比
  • 大小的对比
  • 色彩的对比
  • 肌理的对比
  • 位置的对比
  • 重心的对比
  • 空间的对比
  • 虚实的对比

对比举例:买家秀和买家秀。。。

15-

开玩笑了,我们举个正经的例子吧:照片ps前后

16-

Banner举例:

17-

(5)密集:

密集在设计中是一种常用的组织图面的手法,基本形在整个构图中可自由散布,有疏有密。最疏或最密的地方常常成为整个设计的视觉焦点,他其实也是对比的一种情况,越密集的地方给人感觉距离越远,反之越近。

  • 点的密集
  • 线的密集
  • 面的密集

密集举例:

18-

日本波点女王草间弥生的作品

19-

草间弥生

Banner举例:

20-

22-

21-

(6)发射

是一种常见的自然现象,太阳四射的光芒就是发射的。发射具有方向的规律性,发射中心为最重要的视觉焦点,所有的形象均向中心集中,或由中心散开,有时可造成光学动感,会产生爆炸的感觉,有强烈的视觉效果。

  • 中心点的发射
  • 螺旋式的发射
  • 同心式的发射

发射举例:星轨/水波/观世音菩萨背后自带的光环

23-

水波

24-

星轨(摄影)

25-

每次观世音菩萨出场总是会自带光环(大家小时候应该都比较熟悉这些画风了吧,有点俗气。。)

Banner举例:放射线,使得画面聚焦到中间部分内容。

26-

27-

28-

(7)特异

是指构成要素在有次序的关系里,有意违反次序,使少数个别的要素显得突出,以打破规律性。

  • 形状的特异
  • 大小的特异
  • 色彩的特异
  • 方向的特异
  • 肌理的特异

特异举例:其实各种类似于连连看的游戏,就是这么个原理

29-

Banner举例: 一家人站成一排,个头比较小的那一个就给人一种特异和俏皮的感觉,使画面不那么单调。

30-

(8)空间

  • 利用大小:比如近大远小。
  • 利用重叠:前后/上下等关系。
  • 利用阴影:使物体具有立体感/空间感。
  • 利用疏密:比如间隔越小,越密集,感觉就越远。
  • 利用透视:平行线由宽到窄。
  • 利用色彩:冷色远离,暖色靠近。
  • 利用肌理:越粗糙越近,越细腻越远。
  • 矛盾空间:真实不存在的空间,假想的。
  • 虚实关系:远景/中景/近景。

矛盾空间举例:前段时间非常流行的一款游戏《纪念碑谷》。

31-

空间感Banner举例:画面中的元素可以假想为一些有大有小的点,然后按一定透视空间规律摆放(近大远小)。

32-

由阴影营造的空间感

33-

(9)分割

把整体分成小的部分。比如:

  • 等形分割
  • 自由分割
  • 比例与数量

分割举例:来自大自然的梯田

34-

分割Banner举例: 不同比例大小的色块组成Banner的背景。

35-

商品的排列也可以起到分割画面的作用。

36-

(10)肌理

又称质感,由于物体的材料不同,表面的排列、组织、构造等不同,因而产生粗糙感、光滑、软硬感。比如:

  • 笔触的变化
  • 凹凸不平的肌理
  • 喷绘/染
  • 自带的纹理效果

肌理举例:木材等
37-

肌理Banner举例: 背景采用喷墨+涂色的方式形成了一种很时尚的纹理。

38-

(11)错视

因空间距离或周围环境所造成的视觉差。主要有下面几种:

39-

1.缪勒—莱依尔错视

图中两条线是等长的,由于上下线段两端的箭头方向相反,上线段的箭头占据的空间大,所以上面的线显的较长。

2.垂直线与水平线的错视

大多数人往往把垂直线看的比水平线要长,这是高估的错觉。在水平线长度为8-10mm时,这种错觉最大。

3.透视错视

图中的两条线是相等的。看起来下面的要短,是因为透视的错觉。

4.正方形的错视

标准的正方形左右的边看上去大于上下的边。

5.黑白错视

图中黑白线段,由于白线段明度大,具有膨胀的现象,所以看以来比黑线段长。

6.由于图形结构的影响而产生的错视

图中组成三、四、五边形的边长都相等,但由于周长和面积的不同,产生边长的不同。

7.对比错视

高个子和矮个子在一起,高的会显的越高,矮的会显的越矮。

错视举例:比如虚实手绘拼接,比如有些摄影作品

40-

41-

这里要说明的是,错视在一些视差动画的网页页面里运用的会比较多一些,还有一些app的引导页,这里Banner举例的话可能也不太合适,不过也可以给大家看一下:

比如这个画面里的黄色圆点,同样的黄色圆点,在暗色背景上是很突出的,但在同样是黄色的背景上就几乎看不见了,但其实原点是没变的,只是背景的颜色变了,就导致我们看到了不一样的结果。

42-

3、了解几个常用的平面术语

如下:

和谐统一/对比突出/对称/画面平衡/视觉重心/节奏韵律

和谐统一:

元素与元素之间,或所有元素构成的整体是一种协调的关 系,比如大小/颜色风格等的协调。

Banner举例:整体的明亮色彩,搭配的雨滴小元素,以及雨伞产品和模特装扮,左中右排版方式都看起来很协调统一。

43-

对比突出:

即把2个质或者量反差很大的元素放在一起,使人感觉主体鲜明突出,整体又活跃而统一,比如大小/数量/色彩/形状的对比。

Banner举例:红色模特部分面积比较大,无论是色彩还是面积优势,都使得它在柠檬黄背景上特别突出。

44-

对称:

假设在一个图形中间画一条垂直或水平线后,画面的左右或上下2边是可以完全重合的,则我们称之为对称。

Banner举例:典型的对称构图咯,Bra就是一个对称的形状。

45-

画面平衡:

即元素与元素之间,元素与整体之间的大小/形状/数量/色彩/材质等的分布与视觉上的平衡。

Banner举例:左右两边色彩面积上是平衡的,但是数量和形状上的略微差异,使得画面不那么单调。

46-

视觉重心:

通过对画面中元素的数量/颜色/位置/大小/材质等进行处理,画面中所出现的视觉焦点。

Banner举例:模拟撕纸效果形成的破洞,有一种视觉聚焦的效果。

47-

节奏韵律:画面中的一种或多种元素按一定的规律排列,会产生音乐一般的旋律感。

Banner举例: 鞋子摆放姿势不一样,产生了一种动律感,使画面不单调不呆板。

48-

49-

重点(高潮部分)来了!!!!!

以上讲了这么多知识点,那么结合这些知识点,我总结绘制了一些比较实用的Banner排版

样式,如下图所示:

50-

以上呢,我就先总结这么多,其实所有的Banner版式都是大同小异的,因为我们前面提到,Banner是由文案/模特或商品/背景/点缀物组成的,而所有这些元素就相当于我们平面构成里的点线面,当我们改变这些元素的角度/距离/大小/数量/样式/颜色等,新的版式也就产生了,所以,大家不妨也试试看哦。

四、平面构成之于电商Banner图的意义是什么?

Banner中的所有元素其实都相当于平面构成里的点或线或面,而所有元素所组成的Banner画面其实又是一种情绪和信息的表达,所以我们可以从下面4个方面去理解这个问题:

(1)从活动主题的角度:

当我们拿到一个设计需求的时候,都会需要确定他的设计风格,而这个风格怎么来确定呢?就是要明白他的定位以及服务的人群是谁,了解他们的兴趣爱好,同时我们脑袋里会出现下面这几个关键词:热闹促销/年轻活力/高冷大牌/时尚个性/规矩保守等

我们先看几个Banner实例:

低价热闹促销:画面中会有有比较多的点缀物,也喜欢用大面积的暖色,其目的就是为了营造热闹的氛围,给人热情有亲和力的感觉,板式以上下或者居中排版的方式多点,这种方式的视觉也更聚焦一些。

51-

所以热闹促销的页面可以考虑下面这些排版样式:

52-

年轻活力:这种主题的Banner设计其实跟热闹促销的方法类似,只是说,这种画面里的点缀元素或者模特样式需要表现得显得更加俏皮活力一些,色彩上也会比较艳丽或明亮,营造一种青春活力的感觉,排版方式其实没有什么特别的限制,发挥空间非常大。

53-

所以年轻活力的页面可以考虑下面这些排版样式:

54-

高冷大牌:这种主题的Banner设计重在体现一种一般人买不起,买了之后会显得自己特别有优越感的印象,那么画面中就需要多留白,善用一些简洁的或有棱角的图形设计,切忌用一些比较卡哇伊或太柔美复杂的线条,同时,商品或模特的品质要高,总而言之就是给人一种很贵很高端的感觉(穷人买不起,有钱人买了有面子),这个跟低价热闹促销是相反的。

55-

所以高冷大牌的页面可以考虑下面这些排版样式:

56-

(2)从信息层级的角度:

当我们在做一个banner的时候,如果没有特别的要求,其实我们是有很多个方向选择的,首先问下自己你是想要突出什么信息呢?是突出商品呢?还是突出文字呢?还是突出整体的氛围呢?还是强调整体的协调感呢?还是说强调品牌呢?

一般来说,一个好的Banner首先是要保证信息传达准确,然后再需要保证画面的协调感和氛围的。

那么我先给大家看几个案例举例:

57-

强调品牌(模特也属于品牌的一部分)

45-

强调商品以及SALE

59-

强调整体的氛围(商品融入在氛围当中了)

60-

强调SALE

比如大家可以看到我之前给大家总结的版式,基本上文案信息都是比较突出的,其次商品突出或者强调整体氛围:

61-

(3)从品牌调性的角度

关于品牌这块,可能是很多小商家目前不太重视,也觉得自己用不上的,但是各大电商平台还有一些比较大的电商品牌都已经有这种品牌意识了,所以不管你是在哪种团队里,不防也都了解一下。

我们可以从这几个方面去看待品牌这个问题:风格延续/品牌统一/风格突破

品牌统一:天猫的猫头形象,运用于各个品类的广告当中,这一创意既统一了品牌形象,又非常巧妙。

62-

再比如初语:

63-

一直以来,初语的所有模特,在眼睛那里都有一条白线,虽然不明白什么意思,但是给人印象特别深刻,形成那个了统一的品牌视觉形象,最后大家也看到了初语的新 logo,就是提取了眼睛那里的形象,新logo像下面这样:

64-

而它原来的logo是这样的:

65-

对比发现,品牌形象更加统一了,也更有特色了(虽然会让一些没听过这个品牌的人以为它是卖面膜的,不过对于接触过这个服装品牌的人来说还是很好理解的)。

风格延续:这个在平台的比较大型的活动里里运用较多,比如各个分会场的风格延续(排版样式保持一致,只是改变了颜色和品类商品和文案等)

66-

风格突破:关于品牌的风格突破,可能是因为涉及到品牌升级或者品牌定位的改变,所以需要在设计上配合这一策略,比如说原先你面对的可能是青少年群体,但随着时代的发展,你是继续服务这些青少年群体跟着他们一起成长转型为服务于大龄青年呢?还是继续服务新一代的青少年群体呢?这时候你的用户群体改变了,当然也就意味着风格可能需要作出改变咯。

比如QQlogo形象的升级:

67-

对于这个话题,我们后面再抽出一篇文章单独来讲好了,大家感兴趣吗?

(4)从视觉美感的角度:

当一个Banner在满足了前面几个要求的情况下,如果有能力的话,我们当然还是要做到达到视觉美感的要求的,那么从这个角度看,平面构成之于Banner设计的意义是什么呢?

我们可以看下下面几个关键词:平衡画面/视觉冲击力/画面不单调/富有创意等。

平衡画面:左中右排版

68-

视觉冲击力:放射线,中心聚焦

69-

画面不单调:将产品的方向或颜色做一些不规则的排列,避免乏味

70-

富有创意:拟人化处理画面,营造一种身临其境的场景感

71-

五、总结

以上,我分别给大家讲了这几个知识点:

一、平面构成的含义是什么?

二、电商Banner图是由什么组成的?

三、我们该如何在Banner图设计中运用平面构成呢?

四、平面构成之于电商Banner图的意义是什么?

到此,平面构成之于Banner设计的奥秘我就讲完了,这次的内容量非常大,估计够你们消化不止一周了,而我也没有分为上下篇来写,原因有二:一方面是跟我自己的性格有关,我不太习惯分篇来讲一个知识点,一个完整的知识点不管从哪里切断我都会感觉不舒服,就像你吃一个东西吃得正爽,却被别人告知说:“另一半要留着下次再吃哦”,虽然这样子可以增加大家对下一篇文章的期待,但也会感觉不爽吧(不过为了大家不要吃撑了最好是收藏起来或转发出去,以便后面再细细看)。

本文由 @做设计的面条 原创发布于人人都是产品经理。未经许可,禁止转载。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI设计中可借鉴平面设计技巧

清阳

UI设计是随着智能设备的飞速发展、互联网行业的发展以及农林牧渔传统行业的急于转向而兴起。主要是企业对移动设备交互界面的重视。在企业越来越重视界面设计的今天。传统的平面设计能为现在我们的UI设计提供哪些参考呢,我们能从中借鉴的技巧有哪些?今天就从版式设计说起。

 

版式设计

在UI设计中版式设计不言而喻是非常重要的。版式设计就如同盖房子先要搭好框架一样。一款APP视觉呈现是不是符合商业性并兼具审美。其中的版式设计是其核心。而在平面设计中版式设计也是一个作品的核心。平面设计长时间的发展积淀了相当多实用的技巧和方法。

一、形势方法

版式设计中形势方法指的是、画面的表现方法和原理。说白了就是画面要出什么效果就用什么表现手法而已。平面设计中形势方法可以分为。虚空留白、比例适度、对比调和、变化统一、变异秩序、节奏韵律、重复交错、对称均衡等。今天我们举例分析一下前四个。

1、虚空留白(适合现在极简设计风格)

这种版式设计主要是突出主题,给人以轻松愉悦的感觉。适合文艺范的和有逼格的app界面使用,能够营造出高品质的界面风格。但是如果一旦运用不得当容易出现界面空或单调的感觉。

2、比例适度(协调UI中各部分内容)

平面设计中所说的比例适度主要是整体和部分的协调,采用合理的比例方法,如:黄金比例、等差等比。去协调各部分的关系使各部分要素产生联系。在UI版面布局中正是需要调节和有机的组合各要素在有限的界面里的合理性。

3、对比调和(UI中信息层级的表现)

对比调和在平面设计中是经常用到的,整体版面要调和,局部版面要对比。对比是强调主次关系。对比调和用到UI设计中可以做到设计内容在主次关系的层级化。在统一调和的界面里又充满了对比的小情调。这正是平面不平之所在,也是一个优秀的界面所必备的。

4、变化与统一(是UI突破同质化的一种方法)

变化与统一是形式美法则的总则。是其他方法方式的一个总结。变化所说的就是在设计中要有所创新不能总墨守成规,统一是设计要做到视觉上的愉悦而不是虽然有局部吸引人的眼球但是整体一看却是辣眼睛。变化和统一也许是突破现在APP同质化的一种方法。在现在APP同质化严重的情况下我们能做到APP的风格统一又不墨守成规寻求变化才是营造自己风格的一种方法。

这些平面设计里的形式美法则在UI设计中同样受用。这些表面形式在做banner图构图和创意上也特别有用。

二、版式设计基本类型

版式设计的基本类型有特别多。我们这里着重分析其中对UI设计最有帮助的骨骼型、左右分割、曲线型、满版型这几个基本类型。

1、骨骼型(类似网格构图)

这里说的骨骼型就是在版式构图中,进行横竖向的分栏。能容严格按照分栏排列。版面效果沉稳厚重,井然有序,如果横竖分栏交叉排列还可制造灵动活泼的版面气氛。非常类似网格构图的方法。在UI设计中也很受用,可以很好的规范个元素的位置。(如果你对目前的界面设计一筹莫展,不妨可以试试这种方法)

2、左右分割型(瀑布流)

左右分割不外乎就是把版面左右分开在配之以图文。在UI中的应用是随着扁平化卡片化的兴起,在移动端界面尺寸的限制下,开始进行了信息的分割处理。横向的卡片式布局使得一屏内所看到的信息受到了极大的限制(不利于用户体验,卡片式并非万能)。所以就应用的左右分割的布局。左右分割有利于信息的呈现,可以与瀑布流结合。

3、曲线型(UI方向1)

曲线型主要表现的是韵律和节奏,可能符合一部分小众APP设计界面设计,充满了特色和戏剧性。我觉得有特色的界面设计是这些小众APP的设计核心。可以利用另类的小众的设计做吸引。

4、满版型(UI方向2)

满版设计在平面设计中主要表达大方、舒展的设计风格。在UI移动端界面设计中寸土寸金。现在的扁平化,极简设计风格都在留白提升逼格。但是未来极简设计终将过去,我们面对的还是海量信息。

结束语

版式设计是平面设计的一部分,也应该是UI设计的一部分。这里仅仅是说出了版式设计的一点点内容,部分的形式美法则和版式设计的基本类型。还有很多很多对UI设计有利的点没有发掘。站在巨人的肩上可以看的更远,平面设计就是我们前进的加速剂。

 

本文由 @彪形大汉 原创发布于人人都是产品经理。未经许可,禁止转载。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

作品就要不断打磨,这些细节点都要注意了!

清阳

今天来优化一张作品

今天我们来看一下学员作品并且优化一下!

 

在优化之前,你们能不能看出作品还存在什么问题呢?

 

 

是不是感觉已经是一张完成度很高的作品了,那它能不能更好呢?

 

当然可以!我们来看看如何优化。

 

 

 

第一步 优化构图

 

原图的构图虽然感觉挺有意思,但是并没有做到位,对于新手来说,这种构图也是相对比较难的,前期我建议大家可以选择一些相对不易出错的构图方式,比如元素围绕主体,营造画面冲击力的居中构图。

 

 

1.可以把元素聚集到中心周围,让画面紧凑,饱满,做出向外冲出的效果。

 

 

 

 

 

2.可以添加两根前后贯穿空间的光带,增强冲击力,让构图更有张力!

 

 

这样的构图简单并且容易出效果!

 

 

 

第二步 色彩调整

 

1.饱和度:

原版画面中这一层次看起来是不是特别重,导致画面的节奏一下有点乱掉了。而且整体饱和度相对比较高,有点油腻!

 

 

我们要适当降低画面中部分层次的饱和度,这样才会使整体更加高级,可以看下优化之后的效果:

 

 

是不是舒服多了。

 

 

 

2.统一色调:

我们做图的时候主体和环境要有一些呼应,这个飞碟飞碟正面有点太绿了,缺少一些呼应环境的颜色,这样就会感觉和画面有些割裂感,可以增加一些环境色,使其统一呼应到一起。

 

 

我们看下前后优化的对比效果:

 

 

这样就和谐多了!

 

 

 

第三步 优化空间

 

首先我们来看原图,是不是会觉得画面中心有一点空,元素都在外部,导致整体不够饱满:

 

 

所以我们在优化的时候,把元素平均的分布在画面的每一个地方,使空间看起来更加的均衡:

 

 

现在元素虽然均衡了,但是并没有产生前后关系,所以我们让后面的元素更弱一些,分几个层次。

如下图:

 

 

当我们把这样的元素层次放在画面里之后,看起来就会更加的精致饱满,空间感十足:

 

 

 

 

 

第四步 增加画面趣味性

 

其实增加趣味性的方法有很多,比如我们在这个画面融入了很多表情,可以让画面更加生动。

 

除了这样的方法,其实一些小小的改动有时候也可以让画面变得更加趣味一些。

 

比如:

原版的飞碟太正了,显得呆呆的,这个时候我们可以把主体歪一下,一下子它就活泼了。

 

 

 

再比如:

有时候元素直接漏出来显得比较生硬,如果我们利用一层一层的波纹,藏住元素,或许也可以巧妙地增加画面趣味性:

 

 

 

效果还不错吧!

 

最后我们加上文字,看看整体优化前后的效果!这是不是要比之前的稳很多呢:

 

 

 

 

 

总结

 

最后,我们再来总结一些知识点吧:

 

1.构图:构图的时候就要要注意整体的饱满度,画面稳定,元素分得太分散就会不聚焦了。

 

2.颜色的饱和度:主体>元素>背景。

 

3.空间:画面不能太空,要有节奏的把画面每一个角落都照顾到,其次我们要在视觉上有前有后,增强纵向空间上的层次感。

 

4.趣味性:增加画面趣味性除了利用表情以外,还可以用一些微小的变化去实现,比如歪着的可能比正的活泼一点,再比如元素的穿插互动也可以让画面增趣不少,大家可以多多尝试!

 

以上就是今天和大家分享的内容,希望对大家有所帮助!



作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTQ1OTYxMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这几个知识点终于解决了我配色的一大难题!

清阳

 

1.亮色与重色的比例

 

我们在设定界面风格的时候,少不了颜色的配比,但颜色一定是讲究平衡的,其中一个最重要的平衡就是明暗的平衡,如果你的界面全屏都是很亮的颜色,那就会导致非常的刺眼,比如像瑞文同学的这个颜色设定:

 

 

就是过于明亮了,其实当我们的颜色过于明亮时,最常用的一种方式就是,直接用黑色去压住亮色,像下面这组图标的做法一样,减少亮部颜色,直接增加黑色:

 

 

这样就不会那么刺眼了,当我们明白了底层原理之后,再去优化配色,我们看前后的变化:

 

 

这样就会比之前舒服很多,当然,也可以试试头图变成黑色,按钮变成绿色,把重色面积继续加大,但不管哪一种,都会比之前全是亮色要好很多!

 

 

 

2.这个改动可爱了太多

 

小A同学是一个非常有潜力的同学,但是最开始交上来的吉祥物作业,也不是很理想,效果如下:

 

 

话不多说,我们就改动一个点,五官紧凑,看看前后效果对比:

 

 

可爱的程度完全不在一个档次,我们再看看小A同学后面的延展效果:

 

 

比之前强了很多很多倍,就是因为一个五官紧凑。

 

 

 

3.对颜色的敏锐度

 

我们在做练习的时候,很重要的一个锻炼点就是视觉敏锐度,能够敏锐的发现哪里不舒服,这个真的很重要。

 

而视觉敏锐度里面就有一个维度是颜色,比如我们在看下面一兜糖同学做的质感图标作业:

 

 

我们应该快速的看出,第一个图标颜色不是很和谐,没有后面两个那么舒服,主要是那个蓝色有点脏,我们看优化后的三个图标:

 

 

就比之前要统一舒服很多。

 

当我们的练习达到一定量时,敏锐度自然就会提高很多,所以一定要多去练习,把敏锐度这一块提高上来。

 

 

 

4.绿色好难配啊!

 

这是潘子同学的疑惑点:

 

 

他感觉绿色好难啊,第一次交上来的作业如下:

 

 

先不说造型问题,就光说颜色,就有点单薄,也有点太亮了,还有就是颜色比较正。

 

其实我们在配绿色的时候,只要把绿色加一点蓝色,或者加一点黄色就会让颜色好看很多。

 

 

后来潘子同学把颜色进行了优化:

 

 

这样就比之前还要多了。

 

还有包括柠檬同学用的绿色:

 

 

也是比较好看的。

 

这回再用绿色的时候,大家清楚怎么好看了吧!

 

 

 

总结

 

以上就是今天和大家分享的一些知识点啦,大部分是关于颜色的,颜色敏锐度、绿色怎么配,明暗的对比等等,颜色是一个非常重要的视觉维度,希望大家都能重视,并且多多练习。提高自己的色感!

 


作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTQ2NzIzMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

图片海报不会做?6种方法提高形式感!

清阳

在任何时候,海报的图片处理都是设计师不可避免的一个步骤,运用对色调的处理,构图的改变,甚至于风格化处理来调整图片,使之能够更加的适合版面,我们今天分享的就是通过对图片的处理来塑造不同风格海报的设计。

 

01-

酸性液体金属效果处理

酸性风格它的体现形式通常是镭射纹理,金属玻璃材质,3D物体材质等,其中很多人都好奇金属玻璃材质的做法,也就是如何将普通的图片转换成酸性图片,接下来我们将讲解酸性图片效果的处理方法,二话不说,先上效果图:


步骤一/step 01

导入已经抠好的素材,快捷键ctrl+shift+u作去色处理

 

 

步骤二/step 02

ctrl+j复制一层,ctrl+i反向一下,并设置模式为【差值】,ctrl+e合并这两个图层,这一步骤要重复2-3次左右,会形成这样的效果,做好后的效果有点丑,但是没关系,我们接着往下做。

 

 

步骤三/step 03

将图形转化为智能对象,执行命令:滤镜-模糊-表面迷糊(数值自定,具体数值可以自行修改,主要将黑白部分过度更加柔和一些)

 

 

步骤四/step 04

执行命令:滤镜-风格化-油画(数值自定,这一步骤可以将黑白之间的过渡更加柔和,形成液体金属的最终效果)

 

 

步骤五/step 05

执行命令:滤镜-滤镜库-塑料包装(数值自定,这一步骤还是处理黑白之间的过渡,使之更加柔和),最后可以调整一下亮度和对比度,使之与金属更加相似。

 

 

步骤六/step 06

最后排版上文字,海报就完成啦。

 

 

 

 

 

02-

复古潮流风艺术海报

半调网屏模式作为印刷中的重要方法,有着其特殊的处理艺术效果。在ps中,通过色彩模式可以将图片的效果处理成半调网屏的像素状效果。它有着复古潮流的艺术效果,下面我将讲解如何在ps中给图片添加半调网屏艺术效果,同上,先上效果图:


步骤一/step 01

在PS中导入图片,在这种潮流海报中,我们追求特殊风格海报设计,可以在抠图时故意粗糙的抠图出来,并执行命令:图像-调整-黑白

 

 

步骤二/step 02

执行命令:图像-模式-灰度,再次执行命令:图像-模式-位图,调整参数像素设为300,方法使用半调网屏,点击确定;

 

 

步骤三/step 03

在上一步点击确定后出现以下界面,频率越小,效果越强烈,越大效果越轻,角度设置像素格的旋转角度,形状可以自行尝试选择,我这里选择的是菱形;

 

 

步骤四/step 04

我们需要把位图模式转换成RGB,需要执行两次命令,第一次执行:图像-模式-灰度,第二次执行:图像-模式-RGB

接着是将弄好的图片去掉白色底背景,在通道面板,按住ctrl键,鼠标左键点击其中一个通道,得到白色选区,快捷键:ctrl+shife+i反选选区,快捷键:ctrl+j复制图层,隐藏下面的图层,得到了一个半调网屏的图片。

 

 

步骤五/step 05

最后排版上文字,就可以得到一张复古潮流艺术风海报。

 

 

 

 

03-

炸裂风格图片处理

接下来休息下,我们来做一个非常简单,但又非常好看且具有形式感的图片处理方法,炸裂风格图片海报,调整比较细的方块可以有刺绣效果,非常具有视觉冲击力,同时也能使版面产生非常强烈的层次感与形式感。先看最终效果:


步骤一/step 01

只需将图片导入PS,执行滤镜-风格化-凸出,这里可以自行调整参数

 

 

 

步骤二/step 02

在版面上排版图片和文案,这样一张炸裂风格的海报就做好了。

 

 

 

 

 

04-

长虹玻璃风格海报

长虹玻璃效果顾名思义,就是像玻璃样式的效果,他能给人一种朦胧的美感,与“模糊”有点类似,它比较适合潮流时尚的一些产品海报设计时使用,尤其在电商海报中特别常见,接下来我们来详细讲解这种效果的做法吧,先上效果图:


步骤一/step 01

在ps中新建一个画布,填充一个50%的中性灰,用矩形工具绘制一个细长的矩形,填充颜色为黑白的线形渐变;

 

 

步骤二/step 02

复制渐变的矩形框,填满整个画布,全选复制出来的矩形框,邮件转换为智能对象,快捷键ctrl+shift+s存储为psd文件,注这是后期用来置换的文件

 

 

步骤三/step 03

在画布中倒入我们准备好的图片文件,复制一层,执行命令:滤镜-模糊-高斯模糊;

 

 

步骤四/step 04

执行命令:滤镜-扭曲-置换,在跳出的页面设置水平和s垂直比例都为50,置换图:拼贴,未定义区域:折回,点击确定后选择刚存储的用来置换的文件;

 

 

步骤五/step 05

将刚才线形渐变的矩形置于最上层,混合模式改为柔光,并且调节下透明度,这样长虹玻璃效果就完成啦。

 

 

步骤六/step 06

选取工具选择需要的部分执行蒙版,就可以得到一半有玻璃,一半没有玻璃的效果,然后排版上文字,海报完成!

 

 

 

 

05-

3D炫彩海报

3d炫彩海报适用于科技,创意等风格呈现时使用,它的本质是将一张图进行一种3d化处理,制作起来也是相当的简单,且特别能提升版面的形式感与立体感,制作非常简单,我们一起来做下呗,老规矩,先上图:


步骤一/step 01

 

首先我们需要找一张颜色特别丰富的图片,最好是像这种发光的海报,执行命令:滤镜-扭曲-旋转扭曲,设置相应的数值

 

 

步骤二/step 02

执行命令:3d-从图层新建网格-深度映射到-平面,把3d面板里面的预设改为【未照亮的纹理】

 

 

步骤三/step 03

在3d里面调整合适的角度后,在图层面板选择图层,点击鼠标右键-栅格化3d,快捷键ctrl+t将图层调整适合大小;

 

 

步骤四/step 04

最后排版上文字,海报就完成啦!

 

 

 

 

06-

塑料薄膜风格海报

最后一种是塑料薄膜风格海报,这种效果相对来说比较复杂,所以放在最后一个说,虽然不涉及图片处理,但是对于海报设计来说可以说是锦上添花的一种存在,他能让海报具有一种光泽的质感,使其更显层次感和形式感,这种海报在店招海报或者产品海报中比较实用,废话不多说,来一起来做下吧,还是老规矩,上效果图


步骤一/step 01

我们需要新建一个空白图层,填充黑色,执行命令:滤镜-渲染-云彩

 

 

步骤二/step 02

执行命令:滤镜-液化,这里你可以随意一点画,这是将塑料膜的纹路画出来,这是我画的样子;

 

 

步骤三/step 03

执行命令:滤镜-滤镜库-艺术效果-绘画涂抹,画笔类型选择火花,这一步是将黑白颜色区分开来;

 

 

步骤四/step 04

再次执行命令:滤镜-滤镜库-素描-铬黄渐变,这一步同样是为了是将黑白颜色区分开来,只不过这次的效果更加明显;

 

 

步骤五/step 05

点开通道面板,按住ctrl键,随意单机一个通道,得到选取,回到图层面板,快捷键ctrl+j复制一层,图层模式改为滤色,调整适合的透明度,最后在下面加上图片,排版上文字,海报就完成啦!

 

 



作者:欧阳威John
链接:https://www.zcool.com.cn/article/ZMTUzNzA0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这排版确实专业,这次不献丑了!

清阳

今天来继续聊聊慢热视觉课里的排版部分,分享一些小干货给大家:
 
 
 
1.主体和画面对比:
这排版确实专业,这次不献丑了!
 
 
 
同学排版做的不错,但是主体和背景的对比不足,导致怎么画面有些闷闷的。 所以我们可以提亮背景,加强背景和麦克风的对比这样画面就不会那么闷了。
 
 
像下面这些都是画面对比不足导致画面闷闷的或者层次拉不开的问题画面:
 
这排版确实专业,这次不献丑了!
 
 
 
 
我们可以在中间加一层亮色隔开,也可以增强画面的对比:
 
 
这排版确实专业,这次不献丑了!
 
 
 
 
 
 
2,整体画面的结构比列:
 
比如下面的这张画面,整体可以分ABC三个部分。
这排版确实专业,这次不献丑了!
 
 
 
 
 
问题就在于A/C的体量太一致了,觉得整个画面很臃肿。怎么调整呢?其实我们可以适当调整占比,拉开A/C的差距,比如缩小C的占比,这样整个画面就更有主次了:
 
 
 
这排版确实专业,这次不献丑了!
 
 
 
 
实际效果,顶部的标题和底部的信息拉开了主次,整个画面才有了更好的节奏感:
 
 
这排版确实专业,这次不献丑了!
 
 
 
 
 
 
3.排版的延续性
 
看看下面的两个案列:
这排版确实专业,这次不献丑了!
 
 
 
左边的排版感觉,就是排版和主体元素有很强的分割感,右边的排版就比较连贯。
 
 
 
 
要去除这种感觉,我们需要像右边这种,在中间区域增加一些和排版同色系的图形或者文字来起到延续的作用,这样整个画面才能连贯起来,不会有分割感。
 
 
 
 
4.局部排版的比例节奏
 
拿下面这个排版举例:
这排版确实专业,这次不献丑了!
 
 
 
 
他的文字和英文太相近了,看起来就像三根柱子,毫无变化:
 
 
这排版确实专业,这次不献丑了!
 
 
调整的有主次变化,我们可以缩小其中一根,再加一些错位:
这排版确实专业,这次不献丑了!
 
 
 
表现到字体排版上就是:
 
这排版确实专业,这次不献丑了!
 
 
节奏感是不是就好多了呢?
 
 
 
 
5.排版的疏密节奏
我们来看下这一份作业:
这排版确实专业,这次不献丑了!
 
 
整个画面非常密集,特别是背景排版全是各种小字密密麻麻布满的整个画面,就导致了整个画面非常密集。
 
 
其实这里我们需要整体画面你的节奏感,一般来说我们背景的密集程度要和主体有所联系,一般来说我们主体是我们画面中最复杂的部分,其余部分如点缀元素、背景等的复杂度都要弱与主体,这样才能很好的突出主体。
 
 
 
我们可以用一些大块面的字体去大面积概括画面,不要用很小很碎的字体去堆叠:
这排版确实专业,这次不献丑了!
 
 
气质是不是一下就上来了呢?
 


作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTY0MDUxNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

当客户说'不够高级'时,我用这两招让设计秒变奢侈品视觉

清阳

今天我们视觉课上有同学的作业画了一个唱片机,有很多的问题,我们来看一下。
修改前:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
修改后:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
给家分享一下修改的心得和注意事项。
 
 
1.结构比列
 
我们先从结构比例上来观察,唱片的大小不合适,超出了唱片机的范围。唱片也没有厚度,显得很单薄。最后是唱片机的高度很低,这样导致了最后的整体效果有些扁扁的,不够饱满的和立体:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
所以我们需要把这些比列问题先调整出来。收回唱片的范围、增加唱片的厚度、增加唱片机的高度:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
通过结构比列的调整,整体可以看到明显地变得更稳定和饱满了。
 
 
2.结构组合
原来的作业里,在唱片机侧面增加了旋钮来作为装饰:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
但是这样加有几个问题。
第一个是,左右两边都是旋钮,这样在视觉上会很重复。
第二是,占比都很小,整体看起来就会很小气,不饱满。
看下我们修改后的:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
左边的一排旋钮,我们减少成了一个大旋钮和一个显示屏:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
而右边呢,我们可以直接不加东西,如果一定要加也尽量区别于左边。比如可以加一个播放状态:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
这样是不是就更丰富饱满了呢。
所以我们在这些周围加结构装饰的时候呢,一定要注意饱满度,然后是尽量用不同的类型去修饰,减少重复性。
 
 
3.颜色调整
还有一个比较大的问题,那就是颜色了,原来的颜色整体都有些闷闷的,不够高级,左边旋钮的颜色也比较跳脱:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
再分析一下他的颜色选择:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
可以看到基本是同一个颜色单纯变化了明度和饱和度。
那我们修改后的颜色呢:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
可以看到有明显的色相变化,但是饱和度和明度基一直在中间最顶部,没有做变化。这样才能让我们的的颜色始终保持干净通透。
原本比较跳脱的按钮颜色也改成了和身体一致的颜色,这样就不会显得跳脱了:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
 
 
4.细节表现
原来的作业,唱片基本就是黑色,没有光感:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
这种比较中心的元素不应该平平无奇,而是要想办法增加更多的细节,这样才能好看,才能吸睛!
矩形工具拉一个蓝色块:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
用透视工具拉变形成两个倒三角:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
剪贴蒙版到唱片上,然后调整羽化值20左右,就得到了贴合唱片的光感:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
用同样的方法,多做几条光:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
新建图层填充一个中性灰,然后使用滤镜-杂色-添加杂色功能做出这个素材:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
使用叠加模式,透明度45%把这个素材叠加在唱片上以增加颗粒感:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
接下来,我们还要加强光感对比:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
在箭头位置都加入了更亮的颜色去提亮,让整体的光感更通透和明亮,就不会像原来这样整体闷闷的了:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
最后我们再来看一下完成后的效果:
辛辛苦苦做的设计,被客户说没质感,结果两招就搞定了!
 
 
 


作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTYxNzExNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

快速提升设计气质的7个版式技巧

清阳

掌握一些有效的技巧,有时能事半功倍。

排版的技巧有很多,而且随着设计的发展,每过一段时间都会有一些新的技巧流行起来,葱爷今天要给大家分享的这7个技巧,也是近几年比较流行,且容易上手、容易出效果的排版技巧。

 

比如给英文或者中文标题选择一个笔画很粗的无衬线字体,然后在它上面加一个或几个比较潦草、笔画较细的手写英文单词,就能得到一个很不错的效果。

 

由于识别性不高,手写的英文单词最好是无关紧要的,主要是为了起装饰作用。
在此基础上还可以进行色彩搭配,而且颜色对比最好要鲜明一点,这样就建立起了强烈的粗细对比、大小对比、刚柔对比、色彩对比等。适合在海报设计、画册设计、网页设计中使用。

undefined

 

 

 

你是不是常常发现自己设计好的版面太过规矩,或者有点空、缺乏细节?而增加一个用英文排成的圆圈就可以解决很多类似的问题。

 

 

因为这个圆圈文字能与版面中的图片以及其他文字块形成轮廓对比、面和线的对比、曲和直的对比等。为了让其不太孤立和单调,最好最好把它叠加在图片或其他文字上面。
组成圆圈的文字字体可以是衬线体、无衬线体或者手写体,但字号不宜太大,精致、秀气一点比较好看。

 

 

在正常的排版中我们都知道,字间距和行距都不能太大,而且间距要比行距小,而在文字比较少、版面比较空的情况下,我们可以把一些不是很重要且字数比较少的文字,采用大间距、大行距的方式排版。

 

 

这么做等于是把单词或者句子拆成了整齐排列的一组“点”,这样它就能与版面的其它元素形成点、线、面的对比,可以增强版面的设计感,而且能覆盖比较大的空间,起到装饰的作用。

 

 

这是类似于摄影中双重曝光的技巧,只不过把外轮廓图形换成了文字,所以这既是一个排版技巧,也是一种设计形式。
为了效果比较好,用于填充图片的文字通常是字号较大、笔画较粗、字数较少的标题文字,图片也要选择质感好、颜值高的,如果是具象的图片则要尽量保证重要部分的完整性和识别性。

 

 

 

 

 

不是说要把文字做立体字,而是把文字按照一定的结构进行组合,或者把文字变形处理,从而达到三维效果。
由于文字常见的状态是扁平的,所以当打破文字这种常规的状态,将其图形化、赋予三维效果时,就会具有很强烈的视觉冲击。在使用这一技巧时要注意文字的识别性。

undefined

这一技巧同样也适用于标题排版,字体同样要选择笔画较粗的无衬线体,而且字号要大,描边字与无描边字的字号要统一或者比较接近。
这种效果比较好的原因是,描边文字与无描边文字组合在一起,可创造出鲜明的线面对比、虚实对比、轻重对比。为了保证文字的识别性,文字的描边不要太细,也别太粗。

undefined

在图片为人物、动物,或者产品的设计中,可以把最主要、或者质量最好的一张图片去底,并且拉大,然后再搭配1-2张比较小的方形图片,这样就能形成鲜明的大小对比和轮廓对比,效果也是不错的。
这种排版方式在网页设计和画册设计中很常见。

 

 

 

 

总结

 

怎么样?以上的7个版式小技巧还不错吧,赶紧去试一试。你们可能也发现了,其实它们都是巧妙运用了设计中的对比原则,比如大小对比、粗细对比、点线面、平面与立体对比、轮廓对比、虚实对比等等。所以熟练掌握对比非常重要,你也可以在对比的基础上,尝试出很多有趣、好看的排版技巧和设计形式。



作者:葱爷
链接:https://www.zcool.com.cn/article/ZMTE0NTUwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档