B端产品的图标设计应注意哪些细节?

  • A+
所属分类:经验思维

本文来源: 杜小杜(公众号:能呆书房一整天), 共 3744 字

前一篇文章跟大家分享《B端产品图标库设计创意技巧》,今天继续第二篇,总结营造高级感有哪些技巧,以及设计整套图标库需要注意在哪些方面统一规范。

本文目录

1 营造高级感,B端也可以精致又耐看

1。1 描边

1.2 圆角

1.3 混搭

1.4 倾斜

1.5 色彩

1。6 层次

1。7 透气

2 统一规范,脑中始终有品牌意识

2.1 节奏感协调

2.2 视觉重量均衡

2.3 前景和背景

 

1 营造高级感,B端也可以精致又耐看

1.1 描边依据图标的使用场景和风格定位为描边选择合适的粗细:

①按钮图标的表现要简洁有力,描边一般偏粗,也可以使用面性图标或线面结合,增加存在感和召唤力;

②展示图标描边粗细的自由度大一些,但看起来不要像按钮,以免误导用户点击。
简而言之,描边过粗会显得突兀,细节混沌不清;描边过细会缺少重量,感觉太飘,要把握好平衡。

 

B端产品的图标设计应注意哪些细节?

△ 图1.1-1 按钮图标一般描边较粗,也可以使用线面结合、面性图标的方式表现。作者 Niclas Ernst 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.1-2 展示图标的描边可以很纤细,利用背景色块强化存在感。作者 Peter Deltondo 发表于 Dribbble

一个图标也可以有两到三种描边粗细。

B端产品的图标设计应注意哪些细节?

△ 图1.1-3 外框使用粗描边,细节使用细描边。作者 Gloria Qiu 发表于 Dribbble

统一规范时要注意,除了粗细统一(包括多种粗细),描边端点(平头、圆头、方头)和边角(斜接、圆角、斜切)的属性也要保持统一。

B端产品的图标设计应注意哪些细节?

△ 图1.1-4 Adobe Illustrator 描边面板

1.2 圆角

适度的圆角可以赋予图标亲切柔和的气质,但要避免圆角太大,会显得软萌,不符合B端产品中立、冷静的气质。

为保证规范统一,简单图形最好只有一种圆角半径,复杂图形尽量控制在两种以内。

B端产品的图标设计应注意哪些细节?

△ 图1.2-1 圆角适中,风格中立。作者 Guicon 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.2-2 圆角较大,风格倾向于软萌。作者 Rizki Kurniawan Darsono 发表于 Dribbble

1。3 混搭

如果把图标抽象成基础几何形,可以有方形、矩形、圆形、三角形、星形等形状。不同基本形混搭(例如方形+圆形,矩形+三角形),对比相同类型重复(例如方形+方形,圆形+圆形),可以让图标更有活力不沉闷,但要注意构图均衡,避免头重脚轻或者重心偏向一边。

组合形式有嵌套(里外),拼接(上下左右),堆叠(前后)几种。

B端产品的图标设计应注意哪些细节?

△ 图1。3-1 不同几何形的嵌套、拼接、堆叠。作者 Eddie Lobanovskiy 发表于 Dribbble

其实相同类型也可以通过长短、高低、正三角倒三角等组合,形成错落有致的搭配。

B端产品的图标设计应注意哪些细节?

△ 图1.3-2 相同几何形的搭配。作者 Eddie Lobanovskiy 发表于 Dribbble

1.4 倾斜

倾斜可以打破中规中矩的保守感,还可以平衡细长图标和方正图标的视觉重量(关于视觉重量下面章节会详细讲到)。

北京赛车注意不要破坏构图的稳定性,采用相同角度或镜像对称来保证视觉统一。

B端产品的图标设计应注意哪些细节?

△ 图1。4-1 倾斜可以平衡视觉重量,注意倾斜角度的规律。作者 CMARIX TechnoLabs 发表于 Dribbble

1.5 色彩

一旦有了颜色,设计师能够施展的空间可以说非常大了——可以是纯色、渐变色北京赛车、不透明度叠加、不同混合模式的叠加;颜色可以用在填充、描边,也可以仅局部点缀;颜色可以是封闭的、溢出的、内缩的、偏移的……

注意在配色时要有品牌意识,不可与VI手册色彩规范相冲突。为了表现高级感,不要使用太多高饱和度的颜色,否则会有吵闹和冲撞的感觉。

B端产品的图标设计应注意哪些细节?

△ 图1.5-1 多色描边,注意观察外框、细节、特征点分别如何用色。作者 Kyle Anthony Miller 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1。5-2 描边和背景的两种颜色采用正片叠底的混合模式。作者 Ted Kulakevich 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.5-3 部分填充,背景局部点缀,用色透气灵动。作者 Dmitri Litvinov 发表于 Dribbble

1.6 层次

北京赛车设计师们渐渐厌倦了纯粹的扁平效果,开始加入各种轻质感,例如运用光和影增加立体感和深度,使用线条勾勒出等轴测图的透视效果等。

要注意层次和细节多了,统一规范的内容也随之增加:

①阴影和投影:假设光源在固定角度照射(例如正上方、斜上方、侧方),由此产生的阴影和投影应大致在中心对称的位置,即大致围着图标中心旋转180°。

②透视:透视角度一致,常见的角度例如正视图、俯视图、侧视图、现在流行的等轴测图等。一般情况下首先考虑正视图,除非正视图不能表现出对象特征,需要从其他角度补充细节。注意细节增加,图标可辨识度未必提升。

B端产品的图标设计应注意哪些细节?

△ 图1.6-1 轻薄透气的阴影使线性图标有了立体感。作者 Bipin Balan 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1。6-2 投影使图标有了深度,注意投影的模糊程度和位移距离,交代了元素之间的距离。作者 415Agency 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.6-3 渐变色填充。作者 Daniel Bograd 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.6-4 虽然是线性图标,但通过线条颜色的变化表现阴影和层次。作者 Eddie Lobanovskiy 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.6-5 注意光源方向和阴影位置一致性。作者Ted Kulakevich 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.6-6 透视角度一致。作者 Andrey Kopyrin 发表于 Dribbble

1.7 透气

如果大家喜欢摄影或者中国画,应该能从中感受到精妙留白营造的灵动之感。透气,就是层次之间留有空间。构图时注意画面不要太实,细节不要太满。

B端产品的图标设计应注意哪些细节?

△  图1.7-1 虚线比实线透气。作者 Marina Fedoseenko 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△  图1.7-2 线条采用断点、故意不封闭,且衔接之处留有空隙,以及填充色内缩。作者 HarikaDeng 发表于 iconfont

B端产品的图标设计应注意哪些细节?

△ 图1。7-3 填充偏移。作者 Anthony Gribben 发表于 Dribbble

B端产品的图标设计应注意哪些细节?

△ 图1.7-4 注意色块和黑色描边留有空隙,且空隙间距一致。作者 Kyle Anthony Miller 发表于 Dribbble

注意

在设计中表现高级感,设计师首先要做的是提升自己审美品味,平时多观察,多总结,多积累。
北京赛车 对着好作品不要按部就班的临摹,这样很难深刻理解细节之间是怎样互相影响和牵制的。我的建议是仔细观察原作后自己不看稿再画一遍,然后和原作对比,研究差距在哪里。

北京赛车这个过程不仅要研究表现技巧,更要并琢磨里面的“道”,这样才能真正内化所学并为己所用,而不是浅层次的山寨和抄袭。设计师们也可以从其他领域寻找灵感,比如建筑、摄影、绘画、雕塑、空间设计等等,这里就不展开说了。

另外,设计要有高级感但也要接地气,要冷静克制但也要有亲和力,要严谨中立但也要包容贴心。一切以用户为中心,形式服从功能,不要本末倒置。

2 统一规范,脑袋里始终有品牌意识

除了上面提到的描边粗细、圆角半径、倾斜角度、色彩、光源和阴影等细节需要统一,以下几个方面经常被忽略,但对图标统一性的表现有较大影响。

2.1 节奏感协调

线性图标的节奏由线条和其间距构成,单个图标的线条可以疏密相间,但一整套图标库应该有大致规律,不要某些图标线条都很紧凑,其他图标的线条都很疏离。面性图标的疏密节奏由色块和其间距构成,也是类似的规律。

B端产品的图标设计应注意哪些细节?

△ 图2。1-1 单个图标线条节奏疏密相间,但整体节奏是规律的。作者 Dmitri Litvinov 发表于 Dribbble

2。2 视觉重量均衡

视觉重量均衡不单是尺寸统一,形状、面积、颜色、细节复杂度等都会影响一个图标的体量轻重。比如规则形状比不规则形状(尤其是非对称形状)更稳定,视觉上更重;相同高度和宽度的正方形、圆形、三角形面积递减,视觉重量上也随之递减;深色比浅色感觉沉重(深色背景相反);细节越多,留白越少,画面越满,视觉感觉更重等等。因此视觉重量是多种因素叠加产生的效果,画图标时也要从多个角度来审视和灵活调整。

B端产品的图标设计应注意哪些细节?

△ 图2。2-1 高度和宽度相等,但面积递减,视觉重量递减。

B端产品的图标设计应注意哪些细节?

△ 图2.2-2 通过调整细节复杂度来平衡不同图标的视觉重量。作者 Jaya Prakash 发表于Dribbble。

2.3 前景和背景

当图标由两个图案组合而成时,一前一后的图案分别是前景图、背景图。不管是前景图还是背景图,重复出现的时候要大小统一和位置固定,不要有时在前有时在后,有时在上有时在下。

需要注意的是,前景图会遮挡背景图部分细节,不要遮挡关键细节;另外组合而成的两个图案要适当降低细节复杂度,避免合在一起的时候太过复杂,跟单个图案的图标对比视觉重量太重,破坏视觉平衡。

B端产品的图标设计应注意哪些细节?

北京赛车△ 图2。3-1 前景和背景,大小统一位置固定。Afshin Mhmdi。作者 Afshin Mhmdi 发表于Dribbble

注意

虽然图标设计需要遵循统一规范,但以“整齐划一”来要求图标设计是不合理的,刻板遵守规范可能会产生死板僵硬的感觉。遇到一些特殊情况完全可以灵活处理,只要整体效果协调不突兀即可。
B端产品的图标设计应注意哪些细节?

北京赛车△ 图2.4-1 表现禁用状态时,红色部分有在右上,有时在左下,整体上依旧协调。作者 Martin David 发表于Dribbble

END

今天内容所选的案例并不都是B端产品的应用,也不都是完美的设计,希望大家能取其精华去其糟粕,吸收有价值有营养的部分,而不是刻意模仿。内容如有疏漏和偏颇欢迎各位拍砖~ 下一篇将跟大家分享如何用软件高效画图不怕反复改稿,感谢关注。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: