- 设计理论 -

浅析App的“瓷片区”设计

作者:w.t.y 原文出处:海盐社
2018-07-20

19.jpeg

最近在研究App的界面布局细节时,发现很多App首页均存在这样一个功能模块区域,以一种图+文字的卡片形式,把商品从左至右、从上到下在视觉上平铺排列,以展示商品或活动入口。

640.jpeg

这类模块的排列方式,和家里地面铺的瓷砖很像,所以后文暂且将这一模块统称为瓷片区。

640-1.jpeg


在查阅多个App后,可以发现,瓷片区一般出现在App的首页中,以图文等信息的呈现,作为能够让用户更快捷进入下一级子页面的功能入口,起引流用户的运营作用。


下面从排版、文字、配图、背景四方面来分析一下瓷片区的设计要点。


01 排版


瓷片区的常见排版方式有三种。分别为对角线排版、左右排版和上下排版。


1. 对角线排版


这一种比较常见,文字和图片呈对角线上布局。一行显示两块瓷片,单个瓷片形状接近方形,此种文字的信息较多。


640-2.jpeg


2. 左右排版


这种也比较常见。一般在配图为插画、图标时候适用。此时单个瓷片形状狭长,一行显示一块或两块瓷片。


640.png


3. 上下排版


采用上文下图的形式,一般在界面的功能入口较多时适用。此时单个瓷片形状瘦高,一行显示不少于3块瓷片。


640-3.jpeg


为了使版面更加丰富,我个人的建议是适当场合,尽量选择两种排版组合使用,这样在界面的排版上更具有节奏感和变化,而不同的瓷片在满足不同的功能入口上也有所侧重。


640-4.jpeg



02 文字


文字设计的层次感决定了信息的高效传达,通过对文字信息的层次处理可以有效的帮助用户获取信息,提高用户的操作效率。


瓷片区的文字层次主要在字体大小、颜色、字重等地方划分。


640-5.jpeg


如图,一些经验数值表示,主副文案字号建议不小于6px。若运营有要求,在需要侧重的瓷片区上可以做适当的颜色凸显(如图中红色文字),让用户快速的注意到关注点,引导用户去点击该瓷片代表的功能板块。


03 配图


可以说,配图的好坏直接影响了瓷片区作为功能入口的用户点击率。在配图上通常分为实物图和插图两种样式。


1. 实物图


一张高质量的精修图片更能给用户代入感,刺激用户的点击欲望。包括且不限图片的清晰、高饱和、高明度等内容。


640-6.jpeg



这里设计师去找相关的实物图时,对应不同类型App有不同的处理技巧。


比如旅游类App,拍摄房间内景,通过对图片局部裁剪,铺满单块瓷片即可展示必要信息


640-7.jpeg



对电商购物类App,商品的边界各不相同,则必要对其轮廓进行抠图:


640-8.jpeg


如果单个图片不能满足需求,如外卖类App,可选取多个素材(食材)拼贴合成使用:


640-9.jpeg


在处理完成图片之后,需要注意1点细节是统一图片的高度、大小、视觉面积。对此可以在提前画出辅助图形,把各区域的图片高度、视觉面积框定在合理范围。


640-10.jpeg


2. 插图


部分工具类、金融类App较难找到合适的实物图时,设计师需要自制图标或插画,以匹配单个瓷片代表的功能内容,插图的风格可自定,比较考验设计师的手绘能力。


640-11.jpeg


04 背景


单个瓷片的背景,多数以纯色淡背景为主,界面整体清爽,只要能与界面周围的颜色区分开即可。


640-12.jpeg


观察一些成熟方案的背景色,发现背景一般取HSB面板左上角区域为宜。


如果你觉得纯色背景单调,亦可增加些许点缀元素,使视觉效果更饱满,突显品质感。


640-13.jpeg



当一些在产品App的运营活动和时,淡色背景不能体现氛围感,这时瓷片区背景也会采用同色系渐变,(可以参考一些电商类活动Banner设计,这里不展开叙述)以造势,烘托热闹的气氛促使用户点击。


640-14.jpeg


小结

关于瓷片区的设计要点:

1.排版——左右、上下、对角线(宜两两结合)

2.文字——层级拉开;突出重点(大小、颜色、字重等形式区分)

3.配图——精致;大小、高度、整体统一

4.背景——淡色取色画板范围左上角;同色渐变


细节的打造决定界面的精致,瓷片区作为功能入口,其设计好坏,是可以影响用户的点击转化率。从而影响产品的盈利。


作为UI设计师,我们务必深入挖掘界面里的细节。高手和新手的差距,就是从一个个细节点的累积而拉开。



20.jpeg

海盐社.jpeg

喜欢就分享
精选评论