UI瓷片区设计总结

1年前发布

原创文章 / UI / 观点
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

又到了跟大家分享UI知识的时候了,之前断断续续写了几篇,输出是为了更好的消化学习的知识,也希望能给大家带来一点点帮助。

又到了跟大家分享UI知识的时候了,之前断断续续写了几篇,输出是为了更好的消化学习的知识,也希望能给大家带来一点点帮助。2020年继续努力~今天跟大家讨论的是瓷片区的一些设计知识,文章将从以下几点来展开:

1.什么是瓷片区?

2.瓷片区常见类型有哪些?

3、瓷片区设计要点是什么?

4.总结


一、什么是瓷片区?


瓷片区直白点说就是板块拼接在一起形成的运营位,视觉上像一块块瓷片贴在版面上,所以叫做”瓷片区“。 通过各类促销模式,具有较高的转化率,往往能够提升整个产品的留存率,通常由产品图片+产品文案+背景组成。

如果你对上面的概念还是不太理解,请看下图:


二、瓷片区常见类型有哪些?


瓷片区属于运营内容区,是流量导流出口,适用于平台、电商、金融、娱乐类等产品,目前常见类型有:1.产品实物图片类   2.插图类。


1. 产品实物图片类

优点:识别性高、视觉上更直观、可复用、设计效率高。

缺点:又是无法准确表达信息,对图片素材要求较高。

适用场景:用实物图能更直观的表达内容的产品类型,例如外卖类、旅游类、电商类、租房类等。

为何适用于这些产品:外卖、旅游、电商、租房等是用户购买真实的物品,代入感强、用户可以感知产品的质感、味觉等,举个例子:比如你看到一个色泽饱满的鸡腿实物图片和一副鸡腿插画,是不是前者更能让你垂涎欲滴呢,所以使用真实产品图片是最有效的吸引用户下单的方法。 


2. 插画类

优点:创意性强、具有趣味性、可定制、运营氛围和情感属性强。

缺点:含义表达不是很直接、难以复用、绘制耗费时间

适用场景:偏概念型的产品类型,例如金融类、虚拟产品类、设计类等

为何适用于这些产品:金融类、虚拟产品、设计类这些是偏概念型的产品,有时候会有多个含义融合在一起,这时用插画形式能更好的表达



三、瓷片区设计要点


说了这么多,是不是对怎么设计瓷片区有了更多的期待,下面我们一起来看看:

通过拆解可以总结出瓷片区由:图片/插图+文字+背景+点缀组成,下面我们来一一分析各自的设计要点。


1A.实物图片

1.1全景配图:即配图占据整个瓷片区域,适用于外卖类、旅游类等产品。

配图要求:图片素材要求清晰度高,色彩饱和度高;一般主体占1/2,背景尽量简洁,以突出主体内容为主。


1.2局部配图:即配图占据部分瓷片区域,适用于大多数产品。

配图要求:图片素材要求抠图干净、饱和度高;


1.3图片组合:适用于餐饮类、平台类产品。通过不同素材抠图重新组合,利用多样产品把兴趣最大化,以高价商品带动低价商品。


1B.插图

插图绘制要注意提炼关键文案信息,通过关键词发散绘制关键性元素来表达商品的核心意思。


2、文字


非标签类文字:

主副文案通过大小、粗细和颜色进行区分,主文案字号建议在30~34px,副文案字号建议在24~26px;不同内容板块也可采用不同颜色,但颜色一般不要超过4种;在使用颜色的时候,可以匹配业务特点进行色彩选择,如科技使用蓝色,福利使用红色等。 


标签类文字:

标签也可分为主副文案两个板块, 标签底部颜色选取可以使用图片的邻近色,或者根据业务属性使用情绪板取色。标签一般位于瓷片区域的左上角或左边居中的位置。

3、背景

背景可分为白色背景、浅灰色背景、浅纯色背景、渐变色背景这几种,下面是背景颜色应用场景。

3.1白色背景:


3.2浅灰色背景:


3.3浅纯色背景:背景色通常跟实物图片或插图的主色调邻近


3.4渐变色背景:

a浅色系渐变:选定一种颜色,向白色过渡,颜色饱和度较低、明度较高。

b同色系渐变:同一种颜色,变化饱和度。

c不同色系渐变:色相+饱和度变化


4、点缀

点缀可以丰富视觉效果;常用点缀元素有波浪线、圆形等几何图形;树叶、丝带等烘托气氛的元素。


5.图文排版方式

常见有四种排版方式:上下排版、左右排版、对角线排版、组合型排版: 如对角线和上下排版组合、全景配图和局部配图组合等。


四、小结


以上就是今天分享的所有内容了,我们再来回顾一下:

1什么是瓷片区:运营位

2瓷片区的类型:实物图片类、插图类

3.瓷片区的设计要点:图片/插画+文字+背景+点缀  

图文排版方式:上下排版、左右排版、对角线排版、组合型排版  



35
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息