金刚区作为产品功能架构重要的组成部分,是设计师重点发挥的区域,也是风格切换最为活跃的。而金刚区图标是最重要的表现对象,设计师在图标设计上面耗费心力,出现了丰富多样的视觉表现风格。
体验了众多产品之后,黑马哥为大家精选了 金刚区 图标设计 最突出的 10 个风格,通过这些案例带给大家感官体验层面的更多灵感启发。
晶白风格的扁平突破 晶白风格是通过白色质感来实现的,通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计,使得更有层次感。
相较于扁平化的图标设计来说,晶白风格更有层次感和质感,作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外,也会随着背景或者环境色的变化融入色彩渲染,呈现出更丰富的设计细节。
晶白风格图标就是通过两端白色渐变,配合两端颜色不透明度来进行深浅控制,也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现,灵活性非常高。
磨砂玻璃质感的运用 磨砂玻璃质感的设计表现是近些年较为流行的设计趋势,被广泛运用到视觉设计的众多领域。在 UI 场景中作为视觉感强化被普遍应用,其中在图标设计上的表现尤为突出,呈现出了众多的优秀案例。
金刚区作为产品架构中的重要组成部分,也是更新较为活跃的部分,对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用,也是因为这一类风格具有典型的特点和视觉张力,能够形成比较大的视觉差异,带给用户不错的感官体验。
磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现;如果是 PS 和 AI 等没有背景模糊功能的软件,则可以通过模糊度结合剪切蒙版来实现。实现的方法很多,大家可以多多尝试,这是一类比较容易掌握的图标风格。
强化图标微质感的深入 图标设计从写实到扁平,再到微质感,都在不同的时期进行改变,通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大,在年轻化的趋势中显得过于繁琐,而介于写实和扁平之间的微质感被深入探索。
微质感的深入可以使得图标风格突出,质感和层次感强化了图标的立体空间感,在整个界面中可以形成视觉差异。可以体现出模块的重要性,也是图标设计感体现的一种方向。
通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果,多图层刻画来强化图标质感和层次感。
2.5D 风格的巧妙结合 2.5D 也称之为伪三维,在前两年非常流行,作为插画风格延伸出来的,当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子,通过原子的数量分布形成 2.5D 场景。
将 2.5D 风格结合到图标设计中,可以使得图标更容易形成立体感,设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合,很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可,设计的驾驭度很高。
2.5D 风格的图标很容易掌握,只要绘制好基础原子部分,就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制,大部分场景都是基于立方体、圆柱体等基础造型进行变形。
三维的立体感强化 三维类的图标设计相较于 2.5D 风格来说,空间感和透视角度更加深入,光影的变化更加丰富。图标设计中的三维立体感强化,对于设计师的要求更高,掌握一个三维软件需要一定的学习成本。
随着 C4D 等三维软件的走热,掀起了一股学习热潮,被运用到金刚区图标设计中,带来的视觉效果也是非常不错的。较强的空间立体感和光影效果,在界面中的视觉呈现尤为突出,也能带给用户更好的感官体验。
插画风格的简化融入 随着用户对于感官体验的升级,风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。
插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。
通常矢量风格的插画类图标比较常用,由于图标占比限制,不合适表现特别繁琐的插画风格。可以是微场景的插画表现,或者是局部元素的插画表达,这一类图标风格将会在未来被广泛运用,以此来提高图标设计的视觉差异化表达。
立足于品牌的图标设计 立足于品牌做设计,这是设计师需要深入探索的方向,而金刚区图标设计亦是如此。品牌基因融入到图标设计中,可以辅助突出产品的品牌感,也能形成设计表达的差异化。
品牌基因化的图标设计具备一定的特征性,也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中,或者品牌色作为图标配色点缀;也可以提取品牌 LOGO 辅助图形形成基因图形,融入到图标造型设计中;也有结合吉祥物来突出品牌感的,融入吉祥物造型、局部图形、轮廓图形等;如果图形角度无法提炼,也有提取品牌文化、服务特征、用户群体特征、行业特征等,从中提炼关联性的图形融入图标设计中,以此来强化品牌感。
品牌作为设计的思考起点,不仅可以输出差异化的设计作品,也能串联起整个项目设计的规范。
造型叠加丰富色彩搭配 如果觉得质感一类图标表现力比较繁琐,但是又不想只是简单的线性或者面性图标,造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。
通过图形之间叠加丰富图标造型,叠加部分配色的调节丰富图标色彩搭配,形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢,带来不错的感官体验。
这一类风格的图标可以通过布尔运算设计图形部分,颜色的叠加效果可以通过图层样式实现,也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸,大家可以尝试不同的形式去进行配色,选择符合主题的图标配色效果。
动效图标强化局部差异 微动效运用到图标设计中尤为普及,特别是在金刚区模块,可以作为突出功能的强化。动效图标已经成为一种独特的表现力,相较于静态来说更有吸引力,也能带给用户更加趣味性的感官体验。
在金刚区模块中,动效图标通常是用于区别特殊功能,或者需要重点突出的服务或者主题活动等。不改变整体图标的风格,只是动态和静态的区分,需要个别做动效,形成表现力的差异才能达到重点突出的目的。
作为设计师来说,动效也是需要掌握的基础技能,可以提高我们的设计表现力,也能将交互动作表达得更清楚。
大厂出品!10个值得学习的微动效案例设计 动效在 UI 设计场景中的运用强化了感官层面的体验,也使得交互设计更加易于理解,通过动效辅助功能操作的理解度。
阅读文章 >
主题化图标风格普及 随着情感化设计的普及,金刚区图标在特定主题节日也会进行氛围强化,主题化图标设计越来越多。
比如在春节、中秋节、国庆节、端午节等场景中,根据主题设计图标更能体现我们是有温度的产品。可以是主题元素的融入,或者主题氛围感的渲染,要嘛就是主题文案的融入,形式已经是非常丰富了。虽然不同节日主题效果各有差异,不过这一类主题化的图标设计,已经成为非常普及的风格特征。
除了节日主题以外,根据运营需求也会进行主题化强化,众多自定义主题活动也会结合到金刚区图标设计中。这一类视觉表现力比重较大,视觉感统一性较强,带来的视觉张力和感官体验都非常不错。
小结 金刚区在产品中就像百变金刚一样,随着众多因素而变化,是更新迭代较为活跃的。图标设计的风格也是丰富多样,本文仅是抛砖引玉,总结了 10 个较为流行的图标 设计风格 或者趋势。
希望这些案例总结可以加深大家对于金刚区图标的风格认知,大家也要继续体验探索,总结出更多风格特征,强化我们的图标设计能力。
研究微软 Fluent 图标规范后,我总结了这9个知识点! 最近我在学习使用 Figma,会在社区查找一些大厂的设计系统文件学习,看到一篇微软 Fluent 系统图标规范文档,还挺详细的。
阅读文章 >
6大章节!图标设计基础知识全方位入门指南 前言 做好图标设计是一个入门级 UI 设计师的必备技能之一,图标是界面中非常重要的组成部分,在实际的工作中,即便是一些工作多年且有一定经验的设计师,也很难保证自己设计的图标有多么完美。
阅读文章 >
欢迎关注作者的微信公众号:「黑马家族」