深度挖掘瓷片区的设计要点

Recommanded by editor
北京/UI设计师/6年前/10562浏览
深度挖掘瓷片区的设计要点Recommanded by editor

关于UI界面瓷片区设计的要点分析以及案例展示...

一、什么是瓷片区?

瓷片区是指以图片加文字方式呈现的运营位。

例如淘宝APP中聚划算、有好货的运营位,叮当快药APP的限时免费专区,京东7fresh APP的今日秒杀也是瓷片区。





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

瓷片区属于运营内容区,适用于平台、电商、金融、泛娱乐化产品,属于流量导流入口,不适用于工具化产品;目前常见类型有实物图片类、插图类和淘宝类。


1、实物图片类

  • 优点:高识别、代入感强、可复用,设计效率较高。

  • 缺点:对图片素材要求较高。

  • 使用场景:对实物图有较大需求的产品类型,例如外卖类、电商类、旅行类产品。



2、插图类

  • 优点:可以高度概括瓷片区的运营含义,精美的插图有助于提升产品的细节品质和趣味。

  • 缺点:一对一,难以复用,比较耗时。

  • 使用场景:虚拟产品类型、金融产品类型、教育产品类型,部分活动界面,对风格有明显要求的。




3、淘宝类(千人千面)

  • 优点:高频输送内容,与浏览数据时时对应,千人千面。

  • 缺点:其他产品难以复制,具有技术壁垒。

  • 使用场景:电商类、大数据、私人订制类。




三、瓷片区的组成部分

瓷片区的组成有图片或插图、文字、背景和点缀。



四、瓷片区设计要点

接下来我一一挖掘它的设计要点。


1、图片或插图

全景配图:

即配图覆盖整个瓷片区域,适用于外卖类、旅游类产品。


配图要求:

图片素材要求高质量,色调明亮,饱和度高;画面主体占面积1/2,背景简洁,呼吸感强。



局部配图:

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


配图要求:

图片素材和插图要求高质量;抠图干净,图片素材色调明亮,饱和度高;插图绘制注意提炼关键文案信息;统一图片或插图的高度和视觉面积;外卖类、电商类的配图可将不同的图片素材进行组合,避免单一素材的单调感。


2、文字

非标签类文字:

主副文案通过大小、粗细和颜色进行区分,不同业务板块可采用不同颜色,但颜色不要超过4种;主文案字号建议在30~34px,副文案字号建议在24~26px;图文排版方式有对角线分布、上下分布和左右分布。


标签类文字:

常用于旅游类、外卖类产品,标签分为主副文案两个板块,标签分为彩色标签和黑色透明标签,结合业务属性和想突出的文案,分别对应不同的标签;文案一般位于瓷片区域的左上角和左边垂直居中的位置。


3、背景

白色背景:电商普及,属于百搭型背景;

纯色背景:尽可能跟图片或插图的主色调邻近;

浅灰色背景:近似于乳白色,和底板有微差即可;

渐变色背景:选定一种颜色,向白色过渡;

同色系渐变:同种颜色,饱和度发生变化;

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

四、小结

本次内容共分为三部分:第一部分了解到什么是瓷片区;第二部分是了解了瓷片区的分类,以及对应的优缺点及使用场景;第三部分是关于瓷片区的不同设计要点,例如配图、文字、背景,到点缀四个方面入手,瓷片区其展示多用于卡片类展示,并且多用于首页第一屏,其占据板块较多,所以在运用瓷片排版时一定要考虑当前产品与展示的内容是否匹配,包括用户目标的受重点是否需要瓷片区。

123
Report
|
287
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
UI
UI
UI
UI
作品收藏夹
UI
1534
00学习资料
00学习资料
00学习资料
00学习资料
作品收藏夹
平台
平台
平台
平台
作品收藏夹
产品思维
产品思维
产品思维
产品思维
作品收藏夹
文章
文章
文章
文章
作品收藏夹
大家都在看
Log in