界面设计:为什么你的图标总是缺了点意思?

图标设计,找到合适参考十分关键。不要拘泥于当前任务状态,过于拘束于同类产品设计风格,寻找更多优秀图标参考,从中汲取一些合适元素以及创作灵感,或许你设计就能更上一层楼。

我们之前一直讲都是理论篇,今天来一个关于界面底部图标实战总结吧,故事开始是我们去年年末时候做界面练习,我们要完成漫画类APP首页界面设计,仅仅是由7个模块组成首页设计,我足足花将近两个月才做出来一个半成品(想哭一会o(╥﹏╥)o)。我们今天就好好说一下我历时两周,做四稿才完成底部图标吧。

做图标时候整个过程大概分为以下几个阶段:

收到任务 找参考 根据参考执行 被驳回陷入沉思 再次执行

一、收到任务

我们每天在工作中都会收到不同设计任务,作为正在成长设计师,顺利完成这些任务是我们最基本能力,所以主角登场啦!噔噔噔噔~先做一套漫画类底部图标,师傅觉得ok才可以!当时我觉得很简单(too naive),下载一些漫画类APP,认真构思中。

二、找参考

下载到漫画APP这个时候发挥作用,我在找很多参考,先看看别人是怎么做,给你们先展示一下,如下图:

根据参考执行有这么多参考我无疑是很自信,觉得自己肯定会做很好,先给你们看一下我第一稿和第三稿(第二稿我没找着,跟第一稿只有颜色差别)

第一稿:

第一稿是我直接找某一个APP底部图标抄,只改动一点点,被驳回理由是因为外形太常见,不够特别也不够有趣,我相信应该很多刚入门设计师应该也会跟我一样吧,很懒同时还不会找参考,全世界那么多参考,偏偏我就能看中最丑那一堆(也可能只有我自己是这样)。

第三稿:

然后我就改变方向也吸取上一次教训,找一些外形比较特别,并且把有趣点定在点击前后图标会有变化。这个时候参考已经没有局限在漫画类APP上,我把手机上所有看着外形比较特别APP底部icon都找一遍,没有就去花瓣找,给你们看一下我参考:

虽然还是没过,没过原因是不够有趣,当时觉得简直是要被逼死,要多有趣啊,我天哪!不过现在回头来看,可能是因为外形不够出彩同时没什么特点,第三稿图标与市面上并没有让人记住点,同时也不适合用在漫画类APP上。

不过当时我思路不对,思路已经陷入”有趣”图标里面,没整明白就去追波找有趣图标寻找灵感。大家应该都有过这样经历吧,被驳回设计因为别人说点,然后针对某个点来修改,但往往越改越找不到感觉,于是我要给你们看我当时信心满满第四稿啦!

第四稿:

是不是很有趣,滑板车都出来,我当时画图标时候思维限死在有趣这个点上,画完我还挺满意

以下是我参考:

这一稿自然也是没有过,因为细节太多,老实说我那时内心就是呐喊土拨鼠。想要创新要特别同时还要有趣,真好难啊,画个图标不应该这么难啊,也许真是我思路和方法有问题。

三、被驳回陷入沉思

正好这时候师傅让我尝试面性图标,因为面性图标比较好丰富细节,并且能够发挥修饰程度比较广泛,比较适合目前陷入瓶颈我。而线性图标比较具有品牌感,非常好规范并且能够设计出一定基调,比较考验设计师。

其他小伙伴都进入到下一个组件,就只有我,还卡在底部图标上,我把所有小伙伴通过图标和参考都拿过来做研究一下。他们图标不复杂,但是又都很有看点,并且也不乏有趣。

很认真总结一下,我发现问题在哪里:外形不够有特征同时细节太多,放在手机上,没有辨识度同时还会提高用户理解成本。

四、再次执行

满足图标含义同时减少细节,再结合漫画APP特点,开始寻找新图标设计方向,比如:我图标中有一个社区图标,参考很多社区图标,都没有外观和表现形式上很特别,然后我看见ACfunAPP图标,同时想到社区是个提供很多信息地方,于是带着两个小包八卦小图标就诞生啦!

这是最后通过第五稿:

对我来说,最明显进步就是:在不断试错过程中,提高对参考审美和筛选,以及在自己产出时加入自己思考,包括点击前后趣味变化,保证自己画出来图标能够与市面上有所区别(大家不要太在意主题色问题,因为是我们自己画原型图,没有品牌基因,所以在刚开始练习时候颜色是随便定)。

五、划重点

找到好,以及合适参考是一件非常重要事情。不要拘泥于现在当前任务和状态,尽可能地搜集众多优点图标参考,参考已有设计,获取灵感(并不局限在某一类APP中,也不要过多参考飞机稿,这个结论适用在任何组件里面)。 确定图标样式,既然确认要做面性图标,就开始做面性图标设计思考,必要时借助辅助工具来确保图标大小视觉一致,以及小细节设计规范保持统一。 可能大家会觉得这篇文章说实操性不是很大,其实我最想表达是找到好参考很重要,但是前提在于你有一双发现好参考眼睛,而这也是需要练习和试错才会知道什么样参考和输出才是合适

参考引文《品牌基因法做图标——实战篇》

 

本文由 @潘团子 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处: 界面设计:为什么你的图标总是缺了点意思?