赞助商
立即赞助

如何从0到1做出一组图标?来看这份实战设计思路总结!

UI设计3年前 (2021)更新 流光
2K 0 0

@菜心设计铺 :图标——界面设计最重要的元素之一。

菜心经常写关图标的教程和感悟,见图标设计在我日工作中占了很大重,我始终坚信够把图标做好,是难得的特长之一。

里拿几个月前做的一版小说模块图标为例(目前已经改版为2.0,等正式上次与大家分享),简单介绍下我的图标设计思路,大纲如:

  • 风格设
  • 创意脑爆
  • 设计执行

一、风格设定

始构思之,我们首先需确图标的设风格,风格可以根据整体产品的设语言推导,需符合目标人群的喜好以及产品的属性。

虽然我们是小说模,但还是附属于漫体系之,前期的种子户还是产原有的漫人群,我将格锁定在原有漫的视觉格之上,大可看当时漫标签栏图标的样式:

如何从0到1做出一组图标?来看这份实战设计思路总结!

由此小说模图标与上图保持一致,设定为「描边与色结合」格。

二、创意脑暴

锁定格之后,就要构思创意了,就是如何在这样的格之表达你的容。

一步很关键,何让图标不普通,大部分因素现在内容表达上(因为风其也就么几种),我的方法是尽量去散核心关键词,让图标的含义标新立异,举两个次图标脑暴的例子。

1. 「人气」图标的脑暴路径

如何从0到1做出一组图标?来看这份实战设计思路总结!

这里词有个小技巧,我会遵循两个原则,「具象」与「二层」。

首先来说具象:其很理,果词汇太抽象,你是很难表达的,比「流行」个词,你是很难表达的,而「火」就很具象,很容易表现。

再来说「二层」:指的就是尽量不要选择核心关键词延展出来的第一层词,因为这些词是大家都能想的,并且用烂的,比如人气直延展出来的「火」、「奖杯」等等。(但是如果你的图标没有文字提示,需要表别确,建议还是使用第一层延伸词,可以在风格上做些差异化表现)。

所以在上两个原则下,我最后设定图标使用「爱手势」,如下图:

如何从0到1做出一组图标?来看这份实战设计思路总结!

为看到有些学把「爱」与「摇滚」手势弄混,所以说下它们区:

如何从0到1做出一组图标?来看这份实战设计思路总结!

希望大家在使用时候不要搞哦!

2. 「完结」图标脑暴路径

如何从0到1做出一组图标?来看这份实战设计思路总结!

也是通过「象」「二层」则,最后使用了商挂的烊门牌这一创来延展:

如何从0到1做出一组图标?来看这份实战设计思路总结!

每个关键词的脑暴都会产生多词,各不相同,需要学会筛选,尽量避开过于抽象或者过于普通的词,避开抽象等于象,可以方便执行;避开普通等于别,如果所有的计都是大家用烂的创,那作品一定会庸,以上就是在脑暴使用的方法。

我们需要让自己出套设计至少有个「特」出现,不然如何体现自己价值呢?

三、设计执行

这步是根据前到灵感图来进设计,我们来看下执比图:

如何从0到1做出一组图标?来看这份实战设计思路总结!

于执需要注意基础细节,前有写过《腾讯设计师结图标设计五维自检法》,有兴趣学可以看下,除此这里再补充,如何让图标做到有细节。

本次设总结了三方法供家参考:

1. 设技法的细节

比如给描增加短线风格:

如何从0到1做出一组图标?来看这份实战设计思路总结!

再比如线条增加面形色块的组合:

如何从0到1做出一组图标?来看这份实战设计思路总结!

2. 根据事物本身特征增加细节

比如个质细节:

如何从0到1做出一组图标?来看这份实战设计思路总结!

3. 俏皮的那一笔

比如书架上歪着的一本书:

如何从0到1做出一组图标?来看这份实战设计思路总结!

再比如一根线条的破局:

如何从0到1做出一组图标?来看这份实战设计思路总结!

当然增加细节的方法有多种,总的目的就是防止图标过于简、简陋,希望你也可以有的一套秘方来进行计,大家互相学习。

最后再看下图标体效吧:

如何从0到1做出一组图标?来看这份实战设计思路总结!

附上过程些稿子,哈哈,吓到你:

如何从0到1做出一组图标?来看这份实战设计思路总结!

于执这块,再怎么说,你不做大量练习与思考也是济于事,这个理毋庸赘言了。

欢迎关注作者的微信公众:「设」

如何从0到1做出一组图标?来看这份实战设计思路总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

截图,是将显示设备上所展示的内容截取下来,所生成可视图像,截图的目的是为了保存特定状态下的界面内容。早在 PC 时代,大...
QQ截图
前言 高德作为国民出行平台,随着用户量的不断增加,业务覆盖也越来越广。目前除了提供更精准的导航服务外,还陆续推出了聚合...
AlibabaDesign
通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点...
App设计
项目背景 随着手机拍摄能力和通讯行业的不断发展,使用手机拍照已经成为人们的一种生活习惯,在这个每天都要拍摄、查看、接收...
一刻相册
每个公司都有着它的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师总能...
logo设计
在 ACG 圈有着这样一种赛事:没有硝烟战火,没有(广义上的)明星参与,没有盛大线下比拼,却能引发广大粉丝疯狂参与,甚至爆...
二次元
项目背景 2019年春节期间,QQ红包运营活动进行了全新改版,将卡券福利、现金奖励打包成福袋形式,并通过年俗小游戏及共享福袋...
QQ空间
macOS Big Sur(版本 11.0)号称是 Mac 有史以来最大更新,一升级后会明显感受到画面变得很不一样。当然新的系统图标部分已经...
Big Sur