UI设计 | 金刚区图标设计的 10 大风格,总结总会有收获

金刚区作为产品功能架构重要的组成部分,是设计师重点发挥的区域,也是风格切换最为活跃的。而金刚区图标是最重要的表现对象,设计师在图标设计上面耗费心力,出现了丰富多样的视觉表现风格

金刚区作为产品功能架构重要的组成部分,是设计师重点发挥的区域,也是风格切换最为活跃的。而金刚区图标是最重要的表现对象,设计师在图标设计上面耗费心力,出现了丰富多样的视觉表现风格。

体验了众多产品之后,这里为大家精选了金刚区图标设计最突出的 10 个风格,通过这些案例带给大家感官体验层面的更多灵感启发。

晶白风格的扁平突破

晶白风格是通过白色质感来实现的,通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计,使得更有层次感。

相较于扁平化的图标设计来说,晶白风格更有层次感和质感,作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外,也会随着背景或者环境色的变化融入色彩渲染,呈现出更丰富的设计细节。

晶白风格图标就是通过两端白色渐变,配合两端颜色不透明度来进行深浅控制,也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现,灵活性非常高。

超全总结!金刚区图标设计的 10 大风格

磨砂玻璃质感的运用

磨砂玻璃质感的设计表现是近些年较为流行的设计趋势,被广泛运用到视觉设计的众多领域。在 UI 场景中作为视觉感强化被普遍应用,其中在图标设计上的表现尤为突出,呈现出了众多的优秀案例。

金刚区作为产品架构中的重要组成部分,也是更新较为活跃的部分,对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用,也是因为这一类风格具有典型的特点视觉张力,能够形成比较大的视觉差异,带给用户不错的感官体验。

磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现;如果是 PS 和 AI 等没有背景模糊功能的软件,则可以通过模糊度结合剪切蒙版来实现。实现的方法很多,大家可以多多尝试,这是一类比较容易掌握的图标风格。

超全总结!金刚区图标设计的 10 大风格

强化图标微质感的深入

图标设计从写实到扁平,再到微质感,都在不同的时期进行改变,通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大,在年轻化的趋势中显得过于繁琐,而介于写实和扁平之间的微质感被深度探索。

微质感的深入可以使得图标风格突出,质感和层次感强化了图标的立体空间感,在整个界面中可以形成视觉差异。可以体现出模块的重要性,也是图标设计感体现的一种方向。

通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果,多图层刻画来强调图标质感和层次感。

超全总结!金刚区图标设计的 10 大风格

2.5D 风格的巧妙结合

2.5D 也称之为伪三维,在前两年非常流行,作为插画风格延伸出来的,当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子,通过原子的数量分布形成 2.5D 场景。

将 2.5D 风格结合到图标设计中,可以使得图标更容易形成立体感,设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合,很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可,设计的驾驭度很高。

2.5D 风格的图标很容易掌握,只要绘制好基础原子部分,就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制,大部分场景都是基于立方体、圆柱体等基础造型进行变形。

超全总结!金刚区图标设计的 10 大风格

三维的立体感强化

三维类的图标设计相较于 2.5D 风格来说,空间感和透视角度更加深入,光影的变化更加丰富。图标设计中的三维立体感强化,对于设计师的要求更高,掌握一个三维软件需要一定的学习成本。

随着 C4D 等三维软件的走热,掀起了一股学习热潮,并运用到金刚区图标设计中,带来的视觉效果也是非常不错的。较强的空间立体感和光影效果,在界面中的视觉呈现尤为突出,也能带给用户更好的感官体验。

超全总结!金刚区图标设计的 10 大风格

插画风格的简化融入

随着用户对于感官体验的升级,风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。

通常矢量风格的插画类图标比较常用,由于图标占比限制,不合适表现特别繁琐的插画风格。可以是微场景的插画表现,或者是局部元素的插画表达,这一类图标风格将会在未来被广泛运用,以此来提高图标设计的视觉差异化表达。

超全总结!金刚区图标设计的 10 大风格

立足于品牌的图标设计

立足于品牌做设计,这是设计师需要深入探索的方向,而金刚区图标设计亦是如此。品牌基因融入到图标设计中,可以辅助突出产品的品牌感,也能形成设计表达的差异化。

品牌基因化的图标设计具备一定的特征性,也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中,或者品牌色作为图标配色点缀;也可以提取品牌 LOGO 辅助图形形成基因图形,融入到图标造型设计中;也有结合吉祥物来突出品牌感的,融入吉祥物造型、局部图形、轮廓图形等;如果有形角度无法提炼,也有提取品牌文化、服务特征、用户群体特征、行业特征等,从中提炼关联性的图形融入图标设计中,以此来强化品牌感。

品牌作为设计的思考起点,不仅可以输出差异化的设计作品,也能串联起整个项目设计的规范。

超全总结!金刚区图标设计的 10 大风格

造型叠加丰富色彩搭配

如果觉得质感一类图标表现力比较繁琐,但是又不想只是简单的线性或者面性图标,造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。

通过图形之间叠加丰富图标造型,叠加部分配色的调节丰富图标色彩搭配,形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢,带来不错的感官体验。

这一类风格的图标可以通过布尔运算设计图形部分,颜色的叠加效果可以通过图层样式实现,也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸,大家可以尝试不同的形式去进行配色,选择符合主题的图标配色效果。

超全总结!金刚区图标设计的 10 大风格

动效图标强化局部差异

微动效运用到图标设计中尤为普及,特别是在金刚区模块,可以作为突出功能的强化。动效图标已经视为一种独特的表现力,相较于静态来说更有吸引力,也能带给用户更加趣味性的感官体验。

在金刚区模块中,动效图标通常是用于区别特殊功能,或者需要重点突出的服务或者主题活动等。不改变整体图标的风格,只是动态和静态的区分,需要个别做动效,形成表现力的差异才能达到重点突出的目的。

作为设计师来说,动效也是需要掌握的基础技能,可以提高我们的设计表现力,也能将交互动作表达得更清楚。

大厂出品!10个值得学习的微动效案例设计

动效在 UI 设计场景中的运用强化了感官层面的体验,也使得交互设计更加易于理解,通过动效辅助功能操作的理解度。

阅读文章

超全总结!金刚区图标设计的 10 大风格

超全总结!金刚区图标设计的 10 大风格

主题化图标风格普及

随着情感化设计的普及,金刚区图标在特定主题节日也会进行氛围强化,主题化图标设计越来越多。

比如在春节、中秋节、国庆节、端午节等场景中,根据主题设计图标更能体现我们是有温度的产品。可以是主题元素的融入,或者主题氛围感的渲染,要嘛就是主题文案的融入,形式已经是非常丰富了。虽然不同节日主题效果各有差异,不过这一类主题化的图标设计,已经成为非常普及的风格特征。

除了节日主题以外,根据运营需求也会进行主题化强化,众多自定义主题活动也会结合到金刚区图标设计中。这一类视觉表现力比重较大,视觉感统一性较强,带来的视觉张力和感官体验都非常不错。

超全总结!金刚区图标设计的 10 大风格

小结

金刚区在产品中就像百变金刚一样,随着众多因素而变化,是更新迭代较为活跃的。图标设计的风格也是丰富多样,本文仅是抛砖引玉,总结了 10 个较为流行的图标设计风格或者趋势。

希望这些案例总结可以加深大家对于金刚区图标的风格认知,大家也要继续体验探索,总结出更多风格特征,强化我们的图标设计能力。

0+1

评论0

平台产品顾问
找服务、文章投稿、广告投放