看完就会！中国风的首页UI原来是这么做的！【杰视帮】

看过了去年双十一的品牌海报，大家最大的感受是什么？

 

卷？

如果用视觉化的语言去转译卷的含义，或许可以用风格化这个词来概括。

 

不论是合成、三维还是手绘，不管是平面、动效还是建模，各大品牌神仙打架，集众家之所长，本质上，就是为了突出一点：

 

品牌风格化。

 

一个品牌风格化的建立，可以让其在同类竞品中脱颖而出，成为消费者心智中的优先选择。

 

如何在视觉层面强化品牌风格化？

除了占比最大的主图海报，在机制区铺货区的细节设计上其实同样重要。

 

主图是一记重拳，第一时间让消费者感受到品牌。

下方的UI设计则是重拳后的补刀连环击，让消费者深刻地记住品牌。

双十一双十二的内卷后，在年货节，你又打算如何破卷？

 

俗话说，读书破万卷，虽然这句俗话绝不是这么用的，但多看多学，确实可以跳脱内卷。

虽然我们平时都热衷于看一些头部品牌神仙打架的主图设计，但在实际工作中，最折磨人的，往往是那些不被人注意的机制区、铺货区的UI设计。

 

今天，我们就来解决一些实际的痛点。

 

以黄老五2021年货节的首页UI设计为例，给大家分享一个中国风的UI设计小技巧。

当然，为了让大家真正达到【看完就会】，所见即所得的境界，今天的小教程，将由我们的靳轩老师给大家掰开了揉碎了仔细讲解。

剩下的时间，有请~

今天给大家带来一个实用的商业设计小技巧，帮助大家用15分钟的时间，做出这种中国风的卷轴横幅。

首先我们先新建个矩形，选择好位置后，适当的左右两侧保留卷轴的位置。

我们再次给到曲线，在他上方提亮处理，做出过渡感，不会显得我们这个很平。

还是缺一些质感，比较是这种横幅卷轴，怎么可能没有肌理呢，找到一个合适的材质，我们改为柔光贴上去。

还是不够，可以去色改为线性光再次加强这种颗粒感，适当压暗，再提亮上面的刚开始部分。

把要做卷轴上下的边缘做出来，有一点点显得平了些。适当的给一些内阴影和投影，呈现出立体变化。

现在关键时刻了，做卷起来的感觉，有内卷内味了。

他们是一样的材质哦，记得和底板做成一样的，然后又发现了，平平的，要记住哦要有光影变化才不会显得没有体积感。

用矩形工具做出高光感觉，图层给到滤色模式，让有一些光的照射感觉，在矩形里面我们适当羽化一些即可。

上下把卷轴的位置做出边缘感，记得画出来体积变化，有明暗变化。包括边缘的高光和底部的暗部小细节，都不要忘记哦。

接下来的环节，要想好卷起来的部分，可以尝试拿起手中的纸卷一下，感觉勾这个形状有点难，慢慢来，做出形状后我们在对颜色进行调整。

我们接下来对，上下的色带进行提亮处理，做出光的过渡感觉，对一些夹角位置增加明暗的小细节，再次对底板的这块进行压暗处理，强化质感。直接复制出来把右侧的也放上。

记得卷轴这个位置要有暗部哦，复制当前的形状，改为正片叠底，边缘适当羽化一些，做出暗部的影子。

我们按照层次来分来写上我们的问题信息，包括标识，也是同样的打上去，选择好适合的字体。

我们对字体进行图层样式调整，添加内阴影和投影，改变字体的体积变化，要不然这样有点平。标制也是一样的哦。

把字体做出光影过渡，曲线进行提亮处理，最好在加一个材质降低点不透明度。基本上对字体的处理就完成了。

这样，一个匹配节日调性与国风产品属性的卷轴UI就制作完成了~

有同学会觉得：

 

“一个这么不起眼的小装饰，用得着这么大费周章吗？”

 

就像开头所说的，华丽的主图只是为了让消费者发现品牌，穿插在产品中的UI与装饰设计才是让消费者记住品牌的关键。

 

一个六位数的页面需要一张好的主图，但只有好的主图是值不了六位数的。

 

 

在接下来的时间里，我们会邀请课推官小伙伴们一起，给大家带来更年货节海报设计的教程，或许能解决燃眉之急~

 

今天的卷轴算是第一道开胃菜，你学会了吗？