首页 > 其他 > 详细

金刚区设计样式

时间:2019-05-07 17:08:41      阅读:115      评论:0      收藏:0      [点我收藏+]

 

 

 

金刚区一般位于首图 Banner 之下的,属于页面的核心功能区域,多以宫格的形式排列展现的图标,一般情况一屏5~10个。

金刚区主要负责着业务导流和功能选择的作用。

金刚区设计样式汇总

1. 面性图标

设计样式:面性图标是我们最常见的图标之一,一般有外轮廓图形和内部的图形(icon)组成;外轮廓一般选用圆形或者大圆角的图形,色彩一般选用邻近色或同类色,细节的处理一般选用具有质感的微渐变。

优点:外轮廓选用了圆形和大圆角的图形,具有亲和力,容易吸引人的目光;色彩饱满具有质感,视觉冲击力强;内部图形(icon)与外轮廓组合方式多样化,能更好的适应业务变化。

缺点:对于类似的业务,图形相似,视觉辨识度低;对于复杂的业务,图形无法表达明确,需要使用文字代替图形,容易造成设计风格不统一。

技术分享图片

2. 图形图标

 

设计样式:纯图形设计,不需要外轮廓的衬托。

优点:设计细节丰富,富有创意,能营造小的场景插画;设计样式多样化,扁平化、2.5D等设计样式。

缺点:对文字信息的依赖性强;图形色彩等细节容易设计过度,例如复杂的图形和大弥散的投影。

技术分享图片

3. 线性图标

设计样式:主要利用图形的结构线进行设计,色彩上基本上以单色为主。

优点:设计上简洁干净,视觉上安静沉稳。

缺点:视觉冲击力较弱;视觉层级不够突出;色彩单调。

技术分享图片

 

4. 线面结合

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

优点:轮廓清晰,视觉冲击力较强;设计细节丰富,富有创意。

缺点:视觉层级繁琐,视觉效果不易把握;视觉效果复杂,不够简洁。

技术分享图片

 

5. 商品展示

设计样式:以当季具有代表性的商品为图例,单独展示或配有背景轮廓。

优点:主题明确,简单粗暴;使用图片,具有感染力。

缺点:缺乏设计感;商品图展示,容易误导用户,让用户感觉只是单纯的商品展示;极其依赖文字注释;商品图经常变动,增加用户对于金刚区模块认知的学习成本。

技术分享图片

6. 节日&主题

设计样式:以当时节日主题设计为主,贴近自身的品牌属性,多以面性图标为主。

优点:设计风格节日气氛浓重;设计细节精致,富有创意;视觉冲击力强;图标风格贴近页面主题,视觉上更统一。

缺点:品类的辨识度较低,比较依赖文字注释;时效性强,只针对较短的时间段内具有价值。

技术分享图片

7. 混合搭配

设计样式:图标&图片混合搭配。

优点:以运营为主,能够突出最近主推的运营活动。

缺点:视觉不统一;频繁更换运营主体,增加了用户的学习成本。

 技术分享图片

8. 文案运营

设计样式:以当前运营活动的文案为主。

优点:突出当前的运营主题;运营活动性强,例如之前的猫狗文案大战;设计风格新颖,通常结合设计主题;设计细节丰富,可发挥的创意点多。

缺点:品类的辨识度极低,用户需要仔细阅读底部文字信息;时效性强,只限用于短期活动。

技术分享图片

如何选择金刚区的样式

现在主流的金刚区的设计图标设计主要分为两种:线性图标和面性图标。

对于金刚区的设计样式选择,我们可以根据产品的特性来进行选择,简单点可以划分为功能型和业务型。

功能型的产品用户的自主性较强,图标较多,所以更加适用于线性图标,因为线性图标视觉上更加安静沉稳,使页面更加统一整体,用户可以根据自己的实际需求对功能进行点击操作。

业务型的产品更加适用于面性图标,因为面性图标视觉冲击力很强,能够快速引导用户点击,完成业务导流的作用。

我们以支付宝和淘宝为例:

支付宝的金刚区的功能较多,选用线性图标能使整个模块更加统一,用户可以根据自己的需求进行点击;而淘宝一个资源品类丰富的电商平台,金刚区需要担任倒流的作用,选用具有较强视觉冲击面性图标能更好的引导用户点击选择。

金刚区设计样式

原文:https://www.cnblogs.com/sjlele/p/10826131.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!