562
那些年我们页面上用过的“花儿”
TA的每日心情
郁闷2017-2-10 09:38
签到天数: 5 天
[LV.2]偶尔看看I
店铺dudan10威望2 发消息文章导读：不得不说，在很多类目的页面里，不管是日常页面还是促销页面，都频频使用过各色各异的“花儿”元素，用得好，可以让页面扑面迎来生机感，也可以因“花儿”的风格，营造可复古/可清新/可童趣/可潮流感满满的氛围。正文：那么“花儿”风格那么多，我们怎么跟自己所做的产品结合在一起呢？下面我们就来分解说明一下这方面的运用与玩法吧。首先我们将这次的内容进行分层：①什么样的页面会用到花儿元素；②花儿元素作为点缀装饰的作用；③花儿元素的表现形式；④花儿元素怎么使用？⑤花儿元素的使用注意事项。一、什么样的页面会用到花儿元素事实上，也许可以用排除法来列举不需要用到花儿元素的页面，因为会使用到花儿元素的页面实在太多了，女装/男装/美肤化妆品/家装家居/首饰配件/内衣/鞋靴等等，很多设计师的硬盘里估计也收藏了不少有花作为或主体或装饰的页面，我们可以看下几张案例：
可以看到，花儿作为页面元素之一，大多为女性产品所用，但哪怕是男装这类页面也会使用到，搭配颜色与花儿的风格，便可呈现别具一格的页面效果。二、花儿元素作为点缀装饰的作用除了花作为商品会具有主体展示的机会，更多时候是作为装饰点缀，那么当花儿元素所谓装饰点缀的作用有哪些呢？(一)、节日、促销气氛点缀增加活动氛围，营造刺激下单欲望；(二)、季节氛围渲染通过不同节气增加这个节气的相关花元素，让消费者仿佛置身其中；(三)、与主体产品产生关联引导尤其是化妆品或保健品，材料成分来自植物精华，使用相关材料的花元素，容易让消费者产生关联引导，对产品的概念也会加深。(四)、作为点缀元素使画面具有饱满感，丰富页面并且通过素材的处理实现页面上的虚实/大小/远近关系展现。(五)、配合文案，传达文案氛围同样的，我们同个几张案例来解释不通的作用所展示出来的特性：
三、花儿元素的表现形式因为花的形式很多，我们在选择这方面的素材时，往往更要慎重，如果素材方向选择不当，会导致页面呈现出怪异的感觉，了解花儿元素的表现形式，能有助于我们在寻找素材时更有方向性地与产品进行组合，营造更好的美感。一般来说，通过素材提取法，我们把花儿素材可以进行细化划分：(一)、实体花瓣，多为原材料、大背景
(二)、手绘风格又可以细分为a.版画风b.水彩风格c.矢量图形d.国画韵味；
手绘往往能在素材原创性上面做得更易有自己的风格。(三)、产品、模特本身提取
不管是模特头顶上的花环，还是衣服上的花图案，都可以作为不错的元素延展进行页面的元素补充，从而使页面饱满丰富。(四)、不同材质：剪纸、刺绣、立体形状、后期处理
花的形态通过不同的材质来表现，会让画面更有不一样的风格。四、花儿元素怎么运用好？根据花儿元素应用的场景不同，可以归纳的使用手法也会做出区分：第一种情况，当花儿元素作为主体；第二种情况：花儿作为装饰。那么，当花儿元素作为主体时，一般有几种情况呢？a.字体设计b.主题所需c.产品本身
花元素与字体结合，经过处理能很好传达出层叠感，与当下时尚感。而主题所需则是因活动本身要求所设计，还有因产品本身就是花，那么页面的主体都会围绕产品去做。那么我们着重要说的还是花儿作为装饰的时候，应该怎么去设计好版式。
(一)、包围式通过将素材进行背景搭配的包围样式，将页面填充饱满，且更易营造整体氛围，这种方式要注意的是将素材处理到符合画面的松弛有度，避免太满的素材引起画面杂乱且抢去产品的主体地位。(二)、穿插式通过元素与产品/模特的前后穿插能营造页面的层叠感，并有效点缀留白区域。(三)、底部铺开或顶部铺开式这类方式可应用与产品平铺的状态，能够让产品周围的元素饱满但又不致使页面太丰富，能够有更多的区域和空间去做主题表达。(四)、虚实点缀式这类展现方式所应用的花素材会比较少，往往只是做一些点缀，让画面不那么死板，多一些灵动，并通过虚实结合，让画面有空间感。五、花儿元素的使用注意事项？虽然花儿素材很好用，但是经常会出现简单的内容被实践之后，往往出现更不该出现的错误，那么花儿元素要使用的时候，应该注意什么呢？(一)、风格统一因为前面我们也提到，花儿素材的表现形式很多，所以在同个页面使用时，应该要注意素材的风格统一。(二)、与产品风格、调性统一产品自有本身的产品调性，我们在使用素材时要考虑到素材是否匹配到产品的风格，是否符合消费人群的口味，避免出现高端消费人群但是配上十分卡通的花瓣素材这种情况。(三)、花儿素材的比例因花儿素材很容易丰富页面，但也很容易抢眼，占了产品的主体视觉，所以在使用时要注意比例大小的问题。总结：好的素材不仅让你的页面锦上添花，也能让你的产品表现因此而更出色，如何针对花儿素材去给页面加分，需要更多的尝试，通过思考1.什么样的页面会用到花儿元素2.花儿元素作为点缀装饰的作用3.花儿元素的表现形式4.花儿元素怎么使用？5.花儿元素的使用注意事项最后更新：2017-08-28 12:02:44