赞助商
立即赞助

从零开始学!B 端产品图标绘制指南(细节篇)

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

前篇文章《从零开始学!B 端品图标绘制指南(创篇)》跟大家享了图标设计的创意阶段,今天继续二篇,总结营造高级感有哪技巧,以及设计整套图标库需要在哪方面统一规范。

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

1. 描边

依据图标的使场景和格定位,为描边择合适的粗细:

  • 按钮图标的表简洁力,描一般偏粗,也可以使用面性图标或线面结合,增加存感召唤力;
  • 展示图标描边粗细的自由大一些,但看起来要像按钮,免误导户点击。

简言之,描过粗会显得突兀,细节混沌不清;描过细会缺少重,感觉太飘,把握好平衡。

从零开始学!B 端产品图标绘制指南(细节篇)

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

从零开始学!B 端产品图标绘制指南(细节篇)

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

一个图标可有两到种描边粗细。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 外框使粗描边,细节使细描边。作者 Gloria Qiu 发表于 Dribbble

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

从零开始学!B 端产品图标绘制指南(细节篇)

△ Adobe Illustrator 描边面板

2. 圆角

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

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

从零开始学!B 端产品图标绘制指南(细节篇)

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

从零开始学!B 端产品图标绘制指南(细节篇)

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

3. 混搭

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

组合形有嵌套(里),拼接(上下左右),堆叠(前后)几。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 不几何形嵌套、拼接、堆叠。作者 Eddie Lobanovskiy 发表于 Dribbble

其实相同类型也可以通过短、高低、三角倒三角组合,形错落致的搭配。

从零开始学!B 端产品图标绘制指南(细节篇)

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

4. 倾斜

倾斜可以打破中规中矩的保守感,还可以平衡细图标方图标的视觉重。

注意要破坏构图的稳定性,采相同角或镜像对称来保证视觉统一。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 倾斜可平衡视觉重量,注意倾斜角的规律。作者 CMARIX TechnoLabs 发表于 Dribbble

5. 色彩

一旦有了颜色,设计师够施展的空间可说非大了。可是纯色、渐变色、透明叠、同混合模式的叠。颜色可在填充、描边,可仅点缀。颜色可是封闭的、溢的、缩的、偏移的……

注意在时要有品牌意识,不与 VI 手册彩规范相冲突。

为了表现高,不要使用多高饱和度的颜色,否则会有吵闹和冲撞的觉。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 多色描边,注观察外框、细节、征点别如何用色。作者 Kyle Anthony Miller 发表于 Dribbble

从零开始学!B 端产品图标绘制指南(细节篇)

△ 描边和背景的种颜色采用正片叠底的混模式。作者 Ted Kulakevich 发表于 Dribbble

从零开始学!B 端产品图标绘制指南(细节篇)

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

6. 层次

计渐渐厌倦了纯粹的扁效果,开始加入各种轻质,例如运用光和增加立体和深度,使用线条勾勒出等轴测图的透视效果等。

要注意层和细节多了,统规范内容也随增加。

阴影投影:假设光源固角度照射(例如方、斜方、侧方),由此产的阴影投影应致中对称的置,即致围图标中旋转 180°。

透视:透视角一致,见的角例如正视图、俯视图、侧视图、现在流行的等轴测图等。一般情况首先考虑正视图,除非正视图表现对象特征,需要从他角补充细节。注意细节增,图标可辨识未必升。

从零开始学!B 端产品图标绘制指南(细节篇)

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

从零开始学!B 端产品图标绘制指南(细节篇)

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

从零开始学!B 端产品图标绘制指南(细节篇)

△ 渐变色填充。作者 Daniel Bograd 发表于 Dribbble

从零开始学!B 端产品图标绘制指南(细节篇)

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

从零开始学!B 端产品图标绘制指南(细节篇)

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

从零开始学!B 端产品图标绘制指南(细节篇)

△ 透视角一致。作者 Andrey Kopyrin 发表于 Dribbble

7. 透气

如果大摄影或者中国画,应该从中感受到精妙留白营的灵之感。透气,就是层次之间留有空间。构图时注意画面要太实,细节要太满。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 虚线实线透气。作者 Marina Fedoseenko 发表于 Dribbble

从零开始学!B 端产品图标绘制指南(细节篇)

△ 线条采断点、故意封闭,且衔接之处留有空隙,及填充色缩。作者 HarikaDeng 发表于 iconfont

从零开始学!B 端产品图标绘制指南(细节篇)

△ 填充偏移。作者 Anthony Gribben 发表于 Dribbble

从零开始学!B 端产品图标绘制指南(细节篇)

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

8. 注意

在设计中表现级感,设计师首先要做的是升自己审美味,平时多观察,多总结,多积累。

对着品不要按部就班的临摹,样很难深刻理细节之间是怎样互相影响和牵的。我的建议是仔细观察原,自己不看稿画一遍,和原对比,研究差距在哪里。

这个过程不仅要研究表现巧,更要琢磨面的「道」,这才能真正内化所学并为所用,而不是浅层次的山寨和抄袭。

设计师们也可以从其他领域寻找灵感,比如筑、摄影、绘画、雕塑、空设计等等,这里不展开说了。

另外,设高级感但也接气,冷静克制但也亲力,严谨中立但也包贴。一切以用户中,形式服从功能,不本末倒置。

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

除了面提到的描粗细、圆角半径、倾斜角度、色彩、光源阴影细节需统一,以下几方面常被忽略,但对图标统一性的表较影响。

1. 节奏感协调

线性图标的节奏由线条其间距构,单图标的线条可以疏密相间,但一整套图标库应该致规律,不某些图标线条都很紧凑,其他图标的线条都很疏离。面性图标的疏密节奏由色块其间距构,也类似的规律。

从零开始学!B 端产品图标绘制指南(细节篇)

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

2. 视觉重均衡

视觉重均衡不单尺寸统一,形状、面积、颜色、细节复杂度都会影响一图标的体轻重。比如规则形状比不规则形状(尤其非对称形状)稳,视觉重;相同高度宽度的方形、圆形、三角形面积递减,视觉重也随之递减;深色比浅色感觉沉重(深色背景相反);细节越多,留白越少,画面越满,视觉感觉重。因此视觉重多种因素叠加产的结果,画图标时也从多角度审视灵活调整。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 高度宽度相,但面积递减,视觉重递减。

从零开始学!B 端产品图标绘制指南(细节篇)

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

3. 景背景

当图标由两图案组合时,一一后的图案分别景图、背景图。不景图还背景图,重复出的时候小统一置固,不时时后,时时下。

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

从零开始学!B 端产品图标绘制指南(细节篇)

△ 前景和背景,大小统一位置固定。作者 Afshin Mhmdi 发表于Dribbble

4. 注意

虽然图标设计需要遵循统一规范,但「整齐划一」来要求图标设计是合的,刻遵守规范可会产生死僵硬的感觉。遇到一些特殊情况全可灵处,只要整体效果协调突兀即可。

从零开始学!B 端产品图标绘制指南(细节篇)

△ 表现禁状态时,红色分有时在右上,有时在左,整体上依旧协调。作者 Martin David 发表于Dribbble

总结

今天容的案例并都是 B 端产的应,都是美的设计,希望大取精华糟粕,吸收有值有营养的分,而是刻意模仿。

欢迎关注者的微信众号:「能呆书房一整天」

从零开始学!B 端产品图标绘制指南(细节篇)

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

相关文章

橙子的橙子:记得刚开始学美术的时候,都是从临摹开始的,等到一定的阶段才开始写生,照着实物画。这个过程根据个人能力有长...
ui设计
最近有不少读者朋友来问我一些B端面试相关的问题,其中有想转行B端的,也有正任职于B端的,我发现即便是有一定相关经验的...
B端
如果要开发应用或制作网站,我们通常会寻找适合的免费图标,如此一来就能减少开发成本,也能更快制作出符合期待的界面,像之...
useAnimations
本文将结合贝壳平台B端产品特点,针对当前使用频率高的列表编辑模式进行归纳和抽象,重组典型可复用的交互行为与功能流程,促...
App列表
背景 QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级...
3D图标
前不久我在讲标签栏专题的时候,有聊到过一次图标。(前文已提及到部分规范,本文将直接引用,为防止新读者理解脱节,建议先...
UI
有趣的灵魂万里挑一,人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场,用户对...
ui设计
编者按:图标类型千变万化,实际上万变不离「线性、面性、线面结合」3个方面, 再结合 「透明度、渐变、颜色叠加、质感、多维...
图标理论