界面设计：为什么你的图标总是缺了点意思？.pdf

我们之前一直讲的都是理论篇，今天来一个关于界面底部图标的实战总 结吧，故事的开始是我们去年年末的时候做的界面练习，我们要完成漫 画类 APP 的首页界面设计，仅仅是由 7 个模块组成的首页设计，我足 足花了将近两个月才做出来一个半成品（想哭一会 o(╥﹏╥)o ）。我们 今天就好好说一下我历时两周，做了四稿才完成的底部图标吧。 做图标的时候整个过程大概分为以下几个阶段： 1. 收到任务 2. 找参考 3. 根据参考执行 4. 被驳回陷入沉思 5. 再次执行 一、收到任务 我们每天在工作中都会收到不同的设计任务，作为正在成长的设计师， 顺利完成这些任务是我们最基本的能力，所以主角登场啦！噔噔噔噔~ 先做一套漫画类的底部图标，师傅觉得 ok 才可以！当时的我觉得很简 单（too naive ），下载了一些漫画类的APP ，认真的构思中。 二、找参考 下载到的漫画APP这个时候发挥了作用，我在找了很多参考，先看看 别人是怎么做的，给你们先展示一下，如下图： 根据参考执行有了这么多参考的我无疑是很自信的，觉得自己肯定会做 的很好，先给你们看一下我第一稿和第三稿（第二稿我没找着，跟第一 稿只有颜色差别） 第一稿： 第一稿是我直接找的某一个APP的底部图标抄的，只改动了一点点， 被驳回的理由是因为外形太常见了，不够特别也不够有趣，我相信应该 很多刚入门的设计师应该也会跟我一样吧，很懒的同时还不会找参考， 全世界那么多参考，偏偏我就能看中最丑那一堆（也可能只有我自己是 这样）。 第三稿： 然后我就改变了方向也吸取了上一次的教训，找一些外形比较特别，并 且把有趣的点定在点击前后图标会有变化的。这个时候的参考已经没有 局限在漫画类的APP上了，我把手机上所有看着外形比较特别的APP 的底部icon都找了一遍，没有的就去花瓣找，给你们看一下我的参考： 虽然还是没过，没过的原因是不够有趣，当时觉得简直是要被逼死了， 要多有趣啊，我的天哪！不过现在回头来看，可能是因为外形不够出彩 同时没什么特点，第三稿的图标与市面上的并没有让人记住的点，同时 也不适合用在漫画类的APP上。 不过当时我的思路不对，思路已经陷入了”有趣”的图标里面，没整明 白就去追波找有趣的图标寻找灵感了。大家应该都有过这样的经历吧， 被驳回的设计因为别人说的点，然后针对某个点来修改，但往往越改越 找不到感觉，于是我要给你们看我当时信心满满的第四稿啦！ 第四稿： 是不是很有趣的，滑板车都出来了，我当时画图标的时候思维限死在了 有趣这个点上了，画完我还挺满意的。 以下是我的参考： 这一稿自然也是没有过，因为细节太多了，老实说我那时的内心就是呐 喊的土拨鼠。想要创新要特别同时还要有趣，真的好难啊，画个图标不 应该这么难啊，也许真的是我的思路和方法有问题。 三、被驳回陷入沉思 正好这时候师傅让我尝试面性图标，因为面性的图标比较好丰富细节， 并且能够发挥的修饰程度比较广泛，比较适合目前陷入瓶颈的我。而线 性的图标比较具有品牌感，非常好规范并且能够设计出一定的基调，比 较考验设计师。 其他的小伙伴都进入到下一个组件了，就只有我，还卡在底部的图标上， 我把所有的小伙伴通过了的图标和参考都拿过来做研究了一下。他们的 图标不复杂，但是又都很有看点，并且也不乏有趣。 很认真的总结了一下，我发现了我的问题在哪里了：外形不够有特征同 时细节太多，放在手机上，没有辨识度的同时还会提高用户的理解成本。 四、再次执行 满足图标的含义同时减少细节，再结合漫画APP的特点，开始寻找新 的图标设计方向，比如：我的图标中有一个社区的图标，参考了很多社 区的图标，都没有外观和表现形式上很特别的，然后我看见了ACfun 的APP图标，同时想到了社区是个提供很多信息的地方，于是带着两 个小包的八卦小图标就诞生啦！ 这是最后通过了的第五稿： 对我来说，最明显的进步就是：在不断试错的过程中，提高了对参考的 审美和筛选，以及在自己产出时加入自己的思考，包括点击前后的趣味 变化，保证自己画出来的图标能够与市面上的有所区 （大家不要太在 意主题色的问题，因为是我们自己画的原型图，没有品牌基因，所以在 刚开始练习的时候颜色是随便定的）。 五、划重点 1. 找到好的，以及合适的参考是一件非常重要的事情。不要拘 泥于现在当前的任务和状态，尽可能地搜集众多优点的图标 参考，参考已有的设计，获取灵感（并不局限在某一类的APP 中，也不要过多的参考飞机稿，这个结