赞助商
立即赞助

用四个步骤,帮你学会金刚区图标的设计方法

UI设计3年前 (2021)更新 流光
2.6K 0 0

编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型表手法什么?哪些设点?本文从4维度一一揭秘。

文章目录:

  • 什么金刚区?
  • 金刚区的意义和功能是什么?
  • 刚区图标常见设计类型和表现手法?
  • 金区图标该从哪几个纬发做设计?
  • 金刚图标设计时有哪些注意要点?

一、什么是金刚区?

金刚区是一个页面中头部的重要位置,是页面的核心功能区域,表现形式为行排列的宫区图标。

比如淘宝app 首页banner(广告幅)下两图标,饿了么卖app 首页banner下两图标、支付宝app 首页头部4个图标是刚区。

用四个步骤,帮你学会金刚区图标的设计方法

二、金刚区的意义和功能是什么?

金刚区的位置通常是位搜索框、banner之下,而且金刚区区域通常占据屏幕22%~25%的大小且位屏幕头部,从用户阅读屏幕内容的视流来说位置至关重要,而且是聚合各类子板块的口,为各个子版块分内容引导流量。所以其重要不言而喻,产品要让用户通不同类型展示方式的组件找到相应的功能,而图标具备精炼高度概括内容的特,而且图标的识别度大文字,所以金刚区的设计通常以图标+说明文字为主。

我们都知,app图标也是构成个品设计语言要部分,图标展示形态,采用配色,图标设计层、设计手法、设计细节都在影响着个品设计语言走。所以在设计刚区图标时候也是值花很多心思在上。

三、金刚区图标的常见设计类型和表现手法?

刚区常见设计类型有3:

  • 面图标
  • 实性图标
  • 线性图标

下我们过案例来逐分析他们设计手法和设计亮。

1. 淘宝APP——性图标

为淘宝个业务线很多,涵盖也很多,所以刚区部分是1排5个图标,共2排也是10个图标。5个图标也是下业内图标数量极限了。再多话势必会显很拥挤,而图标识性会打折扣。

用四个步骤,帮你学会金刚区图标的设计方法

△ 淘宝8.0.0

淘宝APP金区组成:圆形+务说明+图形+名称

纵观多种案例,会发现一个问题,为什商类APP 金刚图标多为圆形呢?来一起思考一下。从圆和方的直观受来讲,圆给人一种亲近柔和的觉,而正方形有4个棱角会让人觉生硬显得有距离。在计上来讲,方形的图标还需要考虑四个棱角部的计不然会显得空,圆形会显得更加聚焦内容,如下图。而且如果一排5个宽和高相同的圆形和方形图标,方形图标面积大所以会显得拥挤一些,所以金刚图标圆形居多一些。

用四个步骤,帮你学会金刚区图标的设计方法

颜色:底板是从左右0度的渐变,左边的颜色和右边的颜色属于同一色系。在色相,度,饱和度上等数值上都有差别,但不会让渐变的个颜色相差的别显。视觉官上是左边的颜色比右边的颜色「亮」一些。

造型结构:图标下结构。方图标的业务明描述,告知用户这板块什么的,除了第一图标外,其余的图标业务明均2字,用简短的词去描述、高度概括子版块内。因淘宝的受众用户人群众多,龄跨度也较,金刚区的识别性绝对的第一,所以会图标写业务明。

图形:图标的下方是和子版块相关的图形,不因为淘宝的业务众,风也不一,所以没有将下方的业务图形做成完统一的风。但在设计风上是扁平化的图标,没有添加阴影高光等立效果。

2. 京东APP——面图标

用四个步骤,帮你学会金刚区图标的设计方法

用四个步骤,帮你学会金刚区图标的设计方法

△ 7.1.6

京东APP金刚区组:超椭圆底板+业务字设/图形+板块称

超椭圆形状介圆形和方形之间,而相比圆角矩形又显得很灵活生动饱满。

用四个步骤,帮你学会金刚区图标的设计方法

颜:底板采用的是从左上到右下的斜45度渐变,左边的颜和右边的颜属同一系,渐变柔和变化不是很明显。

造型结构:在刚区图标设计上,京东也是将图标识性放在了首位,大部分图标使用板块业务说明文来进设计,再叠加个弧形过渡,让图标内图形看起来像是从个空延展到了另个空,增加了设计感不失趣味性。

图形:务相图形或字体设计,且均添了投影,营空间感增设计细节。有一点需要注意的是,如「京东超」这个图标的右上角是了促销标签的,利户贪宜的心里,是吸引户点击的一种手。但是此处建议做字体的倾斜,试想一,金区有8个图标,每个图标上都有一个字,每一个字都向右倾斜4~8,那么你会感觉整个金区都是「倾斜」的。

3. 饿了么APP

用四个步骤,帮你学会金刚区图标的设计方法

用四个步骤,帮你学会金刚区图标的设计方法

△ 饿么8.3.1

饿了么APP刚区组成:轴测图立体图标+板块名称

颜色:金区图标的颜色总体给人艳明亮的感觉,来表达食物的美味。就像我们生中吃的食物生蔬菜一样,如果颜色看起来脏脏的,怪怪的,一点都给人的感觉,那么你肯定放心吃它。

造型结构:饿了采用的是2.5D轴测图的形式做的立体图标。常规图标不同,这的计法会展示图标3个不同的面,细节丰计,能在同类竞品中脱颖而出。而且这种计法所画出来的图标更加贴近真实食物的形。

外卖食类APP 的金刚区图标应该尽以观度主,其次识别度。什么这样呢,我们试一场景。当打外卖类APP 的时候通常肚子饿了,了「吃」的这一层身体的欲望,那么不同的板块选食之我们首先就选金刚区图标,除非用户 APP之脑海中已决好了吃什么,直接下单。否则,金刚区图标的设影响对用户的吸引程度。

你的一印象看到整的图标非常精致美观,你的潜意识也得里面的东西应该很,反之亦。

图形:为2.5D设计手法画出来图标是3个,所以细节相比正常图标来说会多,那么没必要再个图标添加样底板了,那样做会显图标很复杂,不够精简。而也会降低图标识度。

4. 盒APP——实性图标

用四个步骤,帮你学会金刚区图标的设计方法

△ 盒马4.0.0

盒鲜生APP刚区组成:实物实+统圆形底板+板块名称

颜色:的配色依然是务色,如「海水产」的色是海蓝。但有一点要注意,色要与实物实拍图有区别,看起来像是融为一体的感觉。而且为了营感颜色应明亮一些。

用四个步骤,帮你学会金刚区图标的设计方法

结构:实拍实物摆放角为从左上向右的斜45。此处采了「破格」的设计手法,实拍物一小分「冲」了圆形,空间感很强。

图形:金刚图标大多采用件物品进行摆拍,而在件物品的组上选的是大对比的物品,这更能营造层次,空间。

类似的实拍性金刚区图标还小米品、网易考拉。

用四个步骤,帮你学会金刚区图标的设计方法

△ 小米品2.5.1

拍物做图标的处是以带来,靠的感。而且还以将运营方需要主推的品换成图标为板块带来流量。

5. 京东金融、支付宝——图标

用四个步骤,帮你学会金刚区图标的设计方法

△ 京东金融4.9.10

用四个步骤,帮你学会金刚区图标的设计方法

△ 支付宝10.1.35

两个APP 是钱包和支付有关,钱包级别的应用要给用户带来安、靠的感,所以在金刚区的视上的设计尽量克、简洁。图标在此应用最适合不。

四、金刚区图标应该从哪几个纬度去设计?

1. 辨识度、识别性

图标辨识度优于文字。

还有一意思是在图标的设计上要与竞品有一差异度。要让自身产品在市场中有「存在感」和「存在率」,存在感即我们通对自身产品app 的整视语言设计从而让用户使用我们的产品和竞品时有一个明确的忆区分,比请你在脑中回忆「闲」app 的颜和「京东」app 的颜,果你用两款产品,么你以轻易的回忆闲的品牌是黄,京东的品牌是红。回到金刚区,你只看到下面组图标就能道是什么app,对么?

用四个步骤,帮你学会金刚区图标的设计方法

2. 强调性

金刚区图标通常 app 的首屏出,置于搜索框、banner之下,且金刚区图标通常会占据屏幕五分之一或者四分之一的小,还起各子版块分发引流的重作用,所以设的重应该比金刚区图标下方的内区:UGC、瓷片区内重一些。

3. 识意性

了两的垫后,金刚区图标还需可识意性,通俗讲,能让用户到看其形明其意,这一点很重,即使画的再好看,用户看到图标后需仔细思考图标的含义到底什么的时候这图标就失败的(特殊况除外),因图标的作用就了文字之辅用户识别,人脑对图片的敏感度于文字。图标表意,高度概括明文字,如果实合的图案那么可以京东一样,将单字拿出,去一些字体基础的设。

用四个步骤,帮你学会金刚区图标的设计方法

△ 飞猪9.0.5

4. 趣性

相当于考试时候的加题了。不不扣分,了加分。如图的飞猪APP 趣性的出让整体的金刚区图标加的动灵活,多渐变多色彩的应用会给一种旅途出游很愉的感觉。不死板便增加了与用户的亲密感。于用户首次使用产品时消除陌的距离感,增加用户使用产品时的安全感。

五、金刚区图标设计时有哪些注意要点?

用四个步骤,帮你学会金刚区图标的设计方法

△ 贝壳1.8.0

用四个步骤,帮你学会金刚区图标的设计方法

△ 支付碑

金刚区图标常用法:45°渐变底板+白色面性图标+微投影

网上流传一种做法,图标底板之上的图形区域范围是底板乘以黄金比例0.618的结果。但纵观市面上的案例,此做法的少之又少,而且设计来也没有特定的数值,具情况要具应用,而且习惯操容易让自己的思陷死角。

底板上图形设计区域约占底板区域50%~65%,45°渐变可以让图标看上去更加有设计感,渐变两色要在色系,渐变不要过于明显。体刚区图标底板色饱和度和明度要尽量做成视觉统。白色性图标会使图标体看上去更加简约,接。有些稍复杂图形在做白色性图标时可以做些渐变在上,或者做些透明度变化,如上图贝壳APP和前支付宝口碑APP。在图形上加些底板色色系投影上去,造些层感空感,切记不要让投影过于明显和颜色脏。

当然,并非一定要做统一圆形的面性图标。带的异形图标,线性图标都可,具体还得看务需求,如果需要金区视觉效果很重的话可考虑线性图标,更的轻量、简洁、格调。

欢迎关注作者的公众号:「趣玩计吧」

用四个步骤,帮你学会金刚区图标的设计方法

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

2016 年的时候,我意识到一个很重要的问题:我一直都没有实现自己的目标:学习新技能、结识新朋友、保持身心健康,等等等等。...
ui设计
很多设计师经常说,现在扁平化风格盛行,很难做出亮眼的设计。因此,我把我一直都在关注的杂志风格,做一次分享。关于杂志化 ...
ui设计
找图标这个事情,对于设计师而言,其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载,而且设计师自己改和设计都...
ICON
最近发现有很多童鞋关心如何从UI进阶到UX的问题。那么我以一个非科班出身的UI到大厂资深UX的经历,不带黑话用4k字作文给大家...
ui设计
@孔雅轩LineVision :引领初中级设计师摆脱「纠结设计」的弯路,通过对层次感的了解可以将有限的技法用在最该用的地方。 ...
ui设计
橙子的橙子:有个朋友拿了他做的界面,问我哪里需要修改,他总觉得不对劲,但不知道要怎么改。我把这些建议量化成可执行的标...
App设计
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计
一、使用栅格 界面上的 icon 一般都能近似成一个基本形式,比如各个方向的长方形、圆、三角形、正方形。如果你把他们进行模糊...
ICON