上一章 快速入口的设计

瓷片区的设计

UX百科编辑部2023-12-19 发布
907人在学·13条笔记
收藏

瓷片区是由多个展示内容要素的区域组合而成的组件,因为它的布局很像瓷砖贴片,所以得名瓷片区。

瓷片区本质上也是用于跳转到下级页面的按钮,所以很多人分不清瓷片区和快速入口之间的区别。除了样式上的差异外,瓷片区更类似商超中的展柜,将具体内容展示给用户,而且会根据运营需要定期更新,有很强的引导性,吸引用户关注并点击,往往会进入和展示内容关联的详情页或运营活动页面。

而快速入口在相同版本中内容是保持不变的,指向的页面也是固定的,是方便用户根据自己需要去查找、点击的被动型按钮,用于跳转到产品的重要页面或功能。

因为它们两者作用的不同,所以很多应用中的页面会同时包含它们,是非常容易识别的。

瓷片区的设计首先也是确定区域大小,区域的宽度由设计风格决定,可以是通栏也可以减去左右页边距,而高度的制定则更多使用预设尺寸而不是适应尺寸。应该做多高主要由模块的内容数量和权重决定,数量越多权重越高做得越大,反之则越小。

然后是对内容瓷片的布局排列进行定义,主流瓷片区包含 3-7 个瓷片,且瓷片之间有权重高低的差异,常见的布局形式如下:

确定布局以后,再确定内间距,置入内容到不同的瓷片中去,瓷片中最常见的元素包括标题、副标题、展示图。复杂点的还可以包含价格、标签、更多、倒计时等元素,根据项目的需要来决定。

在瓷片区内的字体,标题字号通常在 13-16,只有特殊的设计风格才会使用大于这个尺寸的标题。而副标题通常只在 10-12 这个范围内,一方面要和标题有对比,另一方面要够小才能放进更多的文字。

而填充进瓷片内的展示图,通常都是经过处理的白底图,删除不必要的背景,仅保留主体图形。在设计过程中可以使用 PS 等工具自己做抠图导出 PNG,也可以在花瓣等网站中查找已经处理好的透明底素材图(要再查看大图模式中复制)。

除了使用白底图外,也可以直接填充完整的图片,比如在旅游、摄影类的应用中就很常见。

瓷片去有很大的设计空间,可以做的很复杂、新颖、富有创意,但这需要有一定的经验支撑。新手首先要掌握的是以最基础的样式输出,能更好的展示内容,激发用户的点击欲望。

课后作业

可以通过完成对下面空白区域的瓷片区设计进行实践,入门瓷片区的设计,其中文案可以自己修改,要使用什么展示图也可以自己选,保证最终展示效果合理即可:

以下是用于检查和校对的原图:

907人在学·13条笔记
收藏
已学会
25人已学会
下一篇动态卡片的设计
动态卡片是用于展示用户发布的动态、评论的卡片式组件,包含用户的基本信息和发布的图文信息,也是非常常见的组件。 动态卡片的设计的主要要点,是确定内部包含几个模块,以及多少信息。最常见的模块包括用户、动态、操作、评论四个,如下图所示。不同的需求和场景,会有不同的模块组合和顺序,就需要自己去总结了。 确定...
本章笔记
仅看自己
logo
UX小学生发布于 2024-05-04
瓷片区设计字体的大小规范
在瓷片区内的字体,标题字号通常在 13-16,只有特殊的设计风格才会使用大于这个尺寸的标题。而副标题通常只在 10-12 这个范围内,一方面要和标题有对比,另一方面要够小才能放进更多的文字。
回复
sumi发布于 2024-03-11
瓷片区字体,标题13-16,副标题10-12
在瓷片区内的字体,标题字号通常在 13-16,只有特殊的设计风格才会使用大于这个尺寸的标题。而副标题通常只在 10-12 这个范围内,一方面要和标题有对比,另一方面要够小才能放进更多的文字。
回复
sumi发布于 2024-03-11
瓷片区的大小判定标准
应该做多高主要由模块的内容数量和权重决定,数量越多权重越高做得越大,反之则越小。
回复
凯尔队长发布于 2024-02-25
快速入口定义
快速入口在相同版本中内容是保持不变的,指向的页面也是固定的,是方便用户根据自己需要去查找、点击的被动型按钮,用于跳转到产品的重要页面或功能。
回复
凯尔队长发布于 2024-02-25
瓷片区的定义
瓷片区本质上也是用于跳转到下级页面的按钮,所以很多人分不清瓷片区和快速入口之间的区别。除了样式上的差异外,瓷片区更类似商超中的展柜,将具体内容展示给用户,而且会根据运营需要定期更新,有很强的引导性,吸引用户关注并点击,往往会进入和展示内容关联的详情页或运营活动页面。
回复