图标设计复盘!我们是如何做好大厂项目的?

去年做了这套图标,忙忙碌碌中半年过去了,今天终于得空来跟大家分享一下我们设计这套图标时的心路历程。

更多图标设计干货:

以下纸花壁纸是需求方提供的素材:

图标设计复盘!我们是如何做好大厂项目的?

我们需要的是基于这张壁纸,延伸出一整套主题图标。

壁纸上所呈现的 是由轻柔的纸张层叠而出的「花」,原是洁白无瑕的纸张在光的照耀下反射出五彩斑斓的白色,它在微风中静静摇曳,仿佛在优雅地起舞。

给使用者带来 轻柔、简洁、优雅 的感受,这就是纸花这套主题的设计初衷。

图标设计复盘!我们是如何做好大厂项目的?

纸花壁纸就是我们做图标的情绪版参考图,我们主要面临的难题是如何提取当中的设计语言 和如何将风格落地。

一、如何提炼壁纸中的设计语言

仔细提炼壁纸中的设计语言,能更好地帮助我们设计主题图标。

这样的提炼能力是我们设计师不可或缺的一项技能,我一般就是从形状、颜色、质感、构成、字体五个维度去提炼一张图。

比如纸花这张壁纸,我们从形状、颜色、质感三个方向去提炼壁纸中暗含的设计语言。

1. 形状:圆润柔和是设计的基础形

轻薄的纸张层叠组合出花的形状,细看每张纸都有着如花瓣般的圆润形态和轻柔质感。

图标设计复盘!我们是如何做好大厂项目的?

所以我们在设计基础型的时候,用到的形状都相对圆润,来增加图标的柔和感。

图标设计复盘!我们是如何做好大厂项目的?

除此之外,我们发现图标结构上也要更多样一些,否则这一套图标就会显得很平。

比如下方这类图标,他们全都只有一层结构,所以看着很平淡。

图标设计复盘!我们是如何做好大厂项目的?

这时,我们可以增加一些图标的结构,这里我们另外增加了两种结构——图形层级叠加、图形分割:

图标设计复盘!我们是如何做好大厂项目的?

2. 颜色:内敛而丰富的颜色,有着低调却耐看的美

低对比度的颜色是整幅壁纸的铺色理念,给画面带来内敛的魅力。

内敛不代表用色单一,如果你去细看纸花的“花瓣”,也有着十分丰富的藏色。

比如亮面里的黄色、玫红色、绿色、蓝色等等:

图标设计复盘!我们是如何做好大厂项目的?

再比如它的暗面,除了暗面本身有蓝有绿:

图标设计复盘!我们是如何做好大厂项目的?

在纸边缘处也有着色相变换:

图标设计复盘!我们是如何做好大厂项目的?

3. 质感:光下的微透明材质与边缘轮廓光

就像阳光透过花瓣照出纹理,纸张在光的照耀下,也能微微透出底部的内容。

图标设计复盘!我们是如何做好大厂项目的?

边缘处泛起的轮廓光,存在感不算强,却能很好地区分背景和主体物的层次。

图标设计复盘!我们是如何做好大厂项目的?

二、设计落地,开始主题图标设计

1. 图标形状:整体圆润且结构丰富

图标设计复盘!我们是如何做好大厂项目的?

① 图形层级叠加

在画图标造型时,有意识的去增加层级。比如说这个时钟的造型:

图标设计复盘!我们是如何做好大厂项目的?

天气图标的层级:

图标设计复盘!我们是如何做好大厂项目的?

② 图形分割

将一个图形从中切开,分割成两部分,这种是平面分割

图标设计复盘!我们是如何做好大厂项目的?

还可以分割得像立体的两个面,就像弯曲的纸张。

图标设计复盘!我们是如何做好大厂项目的?

2. 颜色质感:提取颜色,运用藏色

① 图标底板的颜色

底板颜色我们直接提取壁纸中的主色:

图标设计复盘!我们是如何做好大厂项目的?

如果将这样的颜色直接用作图标的底板,它就和背景完全区分不开。

它应该是更能在背景上凸显出来的颜色。

所以对吸取的颜色进行调整,得到这三个颜色作为背板的颜色。

图标设计复盘!我们是如何做好大厂项目的?

② 运用藏色

为了让颜色上更有细节、更加丰富,背板的颜色不能单一,我们模仿纸花上的颜色过渡,赋予它低调且丰富的色泽。

图标设计复盘!我们是如何做好大厂项目的?

图标设计复盘!我们是如何做好大厂项目的?

图标设计复盘!我们是如何做好大厂项目的?

图标设计复盘!我们是如何做好大厂项目的?

同样,在图标的用色过渡上也要尽量做到丰富,比如这个「天气」图标

图标设计复盘!我们是如何做好大厂项目的?

③ 纸花边缘处的轮廓光和微透的材质

这两个点也给了我们不少启发,将这些运用在图标的绘制上也为画面细节增色不少。

图标设计复盘!我们是如何做好大厂项目的?

三、风格延展

我们将上述的设计语言延展到共 70 多个图标的设计上,保证了主题设计的美观一致性:

图标设计复盘!我们是如何做好大厂项目的?

结语

以上就是关于纸花这套主题图标设计的背后的故事。

既要保持主题的一致性,又要在美观的重要前提下去创新一套不太一样的风格。

创新,这是在每次主风格设定中都让我抓耳挠腮的一点。

收藏 207
点赞 123

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。