UI金刚区图标怎样做?

69天前发布

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

今天跟大家分享一下金刚区图标的一些设计方法,希望能帮助到大家哦~

今天跟大家分享一下金刚区图标的一些设计方法,希望能帮助到大家哦~



1.什么是金刚区?


金刚区是页面的核心功能区域, 是聚合各类子板块的入口,为各个子版块分发内容。一般位于页面中头部位置,展示样式为多行排列的宫格图标。一般为2-3行,每行4-5个,内容多的时候可左右滑动。

比如饿了么首页banner下的图标、支付宝首页的图标。

undefined



2.金刚区图标常见设计类型


金刚区常见的设计类型有5种:

1.面性图标:有底板和无底板

2.线性图标

3.线面结合图标

4.实景图图标

5、节日/主题图标 


 1、面性图标

a.有底板

设计样式:底版形状一般使用圆形或大圆角的图形,颜色一般饱和度较高,内部图标风格样式统一。

优点:有底板的图标色彩面积更大, 视觉冲击力更强。

缺点:对于类似的业务,因为图形相似,视觉识别性不高。

举例:

1、房产平台类应用-安居客

undefined

组成:微渐变超椭圆底板+面性图标

颜色:底板是从上到下0度的渐变,上边的颜色和下边的颜色属于同一色系,渐变的两个颜色相差不会特别明显。上边的颜色比下边的颜色浅一些,整体饱和度较高。

内部图标:设计风格上偏扁平化,整体以白色为主,添加了阴影渐变等立体效果。


2、文教知识类应用-得到

undefined

组成:圆形托底+线性图标

颜色:底板采用灰色,文艺清新,符合产品定位;

内部图标:使用黑色为主橙色为辅的线性设计,传达温暖的产品气质。

 

3、阅读类应用-喜马拉雅

undefined

组成:圆形渐变底板+面性图标+文字

颜色:因为喜马拉雅是情感应用,金刚区设计上更注重场景打造,底板是从左下到右上45度的渐变,左下的颜色和右上的颜色属于同一色系。整体饱和度较低,更加文艺清新。

内部图标:设计风格上是扁平化的图标,添加了阴影内阴影高光等立体效果,视觉层次更丰富细腻。


a.无底板

设计样式:没有底板衬托,纯图标设计,设计样式更加多样化。

优点:设计细节丰富,富有创意,能营造小场景插画。

缺点:对文字信息的依赖性强,图形色彩等细节容易设计过度,轮廓复杂不一,统一性较差。 

举例:

1、音乐类应用-酷狗音乐

undefined

音乐类产品金刚区设计相对较为朴素,重功能入口,弱视觉效果。因为音乐需要给用户营造舒适安静的倾听环境,而不是缤纷热闹的消费环境。 


2、主流电商产品-京东、淘宝、拼多多

undefined

电商产品习惯于营造热闹的氛围,去底板设计可以放大图标细节,图标的造型感更强,色彩饱满丰富,符合产品希望用户消费的特点。

 

 2、线性图标

设计样式:利用图形外轮廓线条进行设计,色彩上基本以单色或双色为主。

优点:视觉上简洁干净、安静沉稳。

缺点:视觉冲击力较弱

举例:

银行金融类应用-招商银行


undefined

银行金融类产品习惯于营造稳定、安全的环境,使用线性图标设计沉稳、简洁,给人安全感,符合产品行业特点。


   

 3、线面结合图标

设计样式:由线和面组成,通过面加强视觉冲击力。

优点:设计细节丰富,富有创意。

缺点:视觉效果不易把握。

 

 4、实景图类图标

设计样式:以具有代表性的商品为图标,单独展示或配有背景底版。

优点:使用图片可以带来真实、可靠的感觉。而且还可以将运营方需要主推的商品换成图标为板块带来流量。

缺点:商品图片会时不时更换,用户认知压力较大,最终还是会依赖文字信息辨别入口。

举例:

生鲜超市类电商产品-叮咚买菜、天猫超市

undefined

组成:底板+商品实景图

此类产品考虑到用户人群较广,采用商品实图有种商品货架的感觉,降低用户学习成本,展示更接地气。 

金刚区图标大多采用两件物品进行摆拍,而在两件物品的组合上选的是大小对比大的物品,这样更能营造层次感,空间感。


 5、节日/活动主题图标 

设计样式:以节日或活动为主题设计图标,多以面性图标为主。

优点:节日气氛浓重,设计细节丰富,富有创意。

缺点:时效性强,只针对短时间内使用,识别度较低,比较依赖文字说明。

 


3.金刚区图标区分样式设计


有些产品会根据业务需求区分推荐应用和普通应用。区分设计能使推荐应用得到最大程度突出, 缺点是推荐个数有限。

1、旅游订票类应用-同程旅行 、携程旅游   

undefined

两款产品金刚区均采用区分式设计,但是形式大不一样。 同程旅行相对携程来说,业务较轻,因此金刚区设计较为常规,推荐应用部分采用圆形底板+面性图标,其他应用则采用线性图标设计,整体设计层次分明,简单清新。携程旅游业务体量大,纯金刚区已不能满足其产品需求。因此结合瓷贴设计,突出推荐应用。


2、主流外卖平台产品-美团和饿了么

undefined

饿了么和美团外卖都是区分类型设计,推荐应用单独一列,其余应用列两行。

图标设计上,推荐应用均采用底板+插画图标设计,自选应用采用去底板+插画图标设计。金刚区图标的颜色总体给人鲜艳明亮的感觉,来表达食物的新鲜美味。图标造型采用比较写实、精致的插画,充满食欲感。 美团外卖推荐应用图标采用破形设计,视觉更抢眼,内部图形插画细节更明显,识别性更强。     



4.金刚区图标推荐设计


根据业务需要,产品会对金刚区某个板块进行推荐设计,常见的主要有2种方式:


1、添加标签

给想要推荐的模块添加标签是最常用的方式。如下图所示:

undefined

2、添加微动效

给应用图标添加动效,使用图标动静对比来吸引用户视线、进而达到推荐的目的。这种方式适用于强推少量应用图标的时候使用。因为过多的动效会使页面显得杂乱,反而会降低推荐的效果。



5.金刚区图标设计注意要点


1.设计尺寸:合理的金刚区图标尺寸一般为80-100px左右,外环:内环=0.618视觉效果更佳。

2.颜色:采用渐变色时,渐变的两色要在同一色系内,整体金刚区图标底板色的饱和度和明度要尽量做成视觉统一。

3.差异性:金刚区图标在设计上最好要与竞品有一些差异度,通过对自家产品app的整体视觉语言设计让用户对我们的产品有一个明确的记忆,增加产品的辨识度。如贝壳找房APP金刚区图标采用扁椭圆形状,区别于常见形状,增加了产品记忆点。

undefined


4、设计样式选择:

不知道大家在做金刚区图标时会不会纠结使用什么风格,这里分享一个方法,我们可以根据产品的特性来选择,主要可以划分为功能型产品和业务型产品2类。

功能型产品:用户的自主性较强, 线性图标更加适合,因为线性图标视觉上更加安静沉稳,页面更加统一整体,如支付宝的金刚区图标。

业务型产品:面性图标更加合适,因为面性图标视觉冲击力更强,能够快速引导用户点击,完成导流的作用。如我们经常逛的淘宝APP金刚区图标。


当然这个方法不是绝对的,只是一个参考,在我们没有思路的时候可以试试这么做。


图片素材来源于网络和应用截图,仅用于学习交流

 更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】

- END -




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

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

    文章信息

    • 文章标签

    没有新消息