你必须知道的8种金刚区设计样式

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
28501 17 439 2018-10-30

感谢 海盐社 的小伙伴 @角马、洋洋Leony对这篇分享的帮助,希望可以对看文的大家能有一些帮助。

Image title

前言


当我们设计一款 App 的时候,大家在考虑页面布局和设计细节的时候可能最头疼的就是金刚区的设计,金刚区作为页面的核心功能,承担着产品功能导航和业务导流的任务,想要设计好金刚区却难点重重。所以今天要和大家分享的内容是关于金刚区设计样式的汇总,以及它们的优缺点。


目录


1.金刚区的定义

2.金刚区的作用

3.金刚区设计样式汇总

4.如何选择金刚区的样式

5.总结


Image title


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


Image title


Image title


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


Image title


Image title


a.面性图标


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


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


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


Image title


b.图形图标


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


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


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


Image title


c.线性图标


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


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


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


Image title


d.线面结合


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


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


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


Image title


e.商品展示


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


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


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


Image title


f.节日&主题


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


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


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


Image title



g.混合搭配


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


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


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


Image title


h.文案运营


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


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


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


Image title


Image title


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


Image title


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


Image title


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


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


Image title


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


Image title


1.金刚区是页面的核心功能区域,负责为各个业务导流,并起到运营的作用。

2.金刚区的图标设计广义上包括:线性图标和面性图标。

3.金刚区的设计形式的不同,利弊也各有所不同,我们在选择金刚区的设计形式的时候要根据实际自身的产品属性进行分析判断,从而更好的服务产品。



全部评论:17

  • 秦能补拙

    2019-06-27 15:36

    https://www.jianshu.com/p/22cebbbed4d9竟然跟这篇简书的差不多啊,请问是同一位作者么?

  • advance_焕

    2019-04-16 09:48

    看到汽车之家那个界面,上方功能性图标乍眼一看以为是支付宝,到金刚区发现不对,应该是京东金融,到最后一看原来是汽车之家,到下载APP之后发现没有这个界面,感觉很奇怪,不知道是哪里出错了

  • 米饭_

    2018-11-20 11:48

    做好自己再评论人家吧,做个设计还喷起来了

  • 小海1994

    2018-11-06 12:01

    金刚区之所以叫金刚区是因为这里的内容可以随时根据业务需求权重去调整 就跟百变金刚一样 所以叫金刚区。这里的设计样式也是根据首页功能强弱来决定的,例如支付宝整个首页功能都是比较重要的,所以金刚区设计的简洁一些。而淘宝因为金刚区业务很重要 所以设计丰富一些。

  • lovesmart

    2018-11-06 11:34

    所以,知识点在那里?看完了不知道说了个啥

  • 发现最美的

    2018-11-05 11:06

    海盐社到底是一个什么样的组织,什么文章都能推荐,毫无营养. 我觉得可以

  • 姜正_

    2018-11-02 15:44

    @设计师_萂味: 首页寸土寸金,考虑到实际业务,不得不尽量放置更多的业务为产品其它模块进行导流。

  • 设计师_萂味

    2018-11-02 14:54

    个人不喜欢这样的电商界面,界面太满,东西太多太复杂

  • 蓝胖子_

    2018-11-02 13:55

    节日主题那个红色的,确定是小红书吗?

  • 姜正_

    2018-11-01 14:35

    @DarlingMarch: 火眼金睛,赞一个

  • DarlingMarch

    2018-11-01 14:22

    我只想说,每个标题下面那行小英文都有错误……噗噗,

  • VikesTan

    2018-11-01 10:35

    @莫妮卡在隔壁: 传销组织

  • 董汽水

    2018-11-01 10:25

    请不要以自己浅薄的认知再误导新人了,你对金刚区的理解,和普通人有什么区别。不对,应该改个词,叫误解。

  • UIDX小气师兄

    2018-10-31 17:40

    @莫妮卡在隔壁: 真相了 而且还能推到首页= - =

  • 莫妮卡在隔壁

    2018-10-31 16:23

    海盐社到底是一个什么样的组织,什么文章都能推荐,毫无营养

  • 茶小沫

    2018-10-31 11:52

    可以看下黑桃A写的,也是介绍这个金刚区

  • Caleb

    2018-10-31 10:12

    搬运工???

  • 龐偉PWDS

    2018-10-31 09:18

  • 橙子的橙子

    2018-10-30 22:02

    特意路过来瞧一下....

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票