如何设计一个好的ui图标?

时间 : 2020-01-09 15:20 来源 : 主页 > 平面设计 > 作者 : 糊糊小编 点击:

图标是界面设计中最重要的元素之一。
 
蔡欣经常写关于图标的教程和见解。由此可见,图标设计在我的日常工作中占据了很大的比重,所以我一直认为能够把图标做好也是一个难得的专业!
 
下面是几个月前制作的第一个版本的新颖模块图标的例子(目前已经修改为2.0,正式上线后我会再次与大家分享),简单介绍一下我的图标设计理念,概要如下:



 
 
样式设置
 
 
2.创造性头脑风暴



 
 
三.设计执行
 
首先,样式设置
 
 
在我们开始构思之前,我们首先需要确定图标的设计风格。风格可以根据整体产品的设计语言进行演绎,需要满足目标群体的偏好和产品属性的定位。
 
虽然我们是一个新颖的模块,但它仍然附着在动画产品系统上。以前的种子用户仍然是原创动画人群的产物,所以我把风格锁定在原创动画的视觉风格上。此时可以看到“动画”选项卡栏。图标样式:




 
 
因此,新模块的图标与上图一致,并设置为“笔划与色块组合”的样式。
 
 
创造性头脑风暴
 



 
一旦你锁定了你的风格,是时候想出点子了,也就是说,如何用这种风格表达你的内容。
 
这一步非常重要。如何使图标与众不同?大多数因素都反映在内容表达式中(因为有很多样式)。我的方法是尝试分散核心关键字,使图标的含义不同。这场标志性的头脑风暴有两个例子:
 
首先,“人气”图标的头脑风暴路径
 
这里有一个选择单词的提示。我将遵循“代表性”和“第二层次”两个原则
 
首先,比喻:其实很容易理解。如果词汇太抽象,你就很难表达,比如“流行”这个词,你就很难表达,“火”就很具体,也很容易表达。
 
让我们来谈谈“第二层”:它意味着不要选择核心关键词扩展的第一层词汇,因为这些词汇是每个人都能想到的,而且它们很糟糕,比如流行的“火”、“奖杯”等等。(但是如果你的图标没有文本提示,你需要清楚地表达出来。建议使用扩展的第一层,这可以用来在样式上产生一些差异。)
 
所以在以上两个原则下,我最终将人气图标设置为使用“爱的手势”,如下图:
 
看到一些学生混淆了“爱”和“摇滚”的手势,让我们谈谈它们的区别:
 
我希望你用的时候不要弄错!
 
 
 
第二,“结束”图标的头脑风暴路径

 
它还基于“代表性”和“二楼”原则,最后利用挂在商店里的一扇小嗝门的想法来延伸:
 
对每个关键词进行头脑风暴会产生很多不同的词汇。我们要学会甄别,尽量避免太抽象或太普通的文字,避免抽象等于具体,可以很容易地实现;避免普通等于特殊,如果所有的设计都是对大家不好的创意,那么工作就会很平庸。以上是我头脑风暴时使用的方法。
 
我们需要为我们生产的每一个设计制作至少一个“特殊”外观。否则,我们如何体现我们的价值?
 
设计执行

 
这一步是根据之前获得的灵感图进行设计。让我们看看执行比较图:
 
需要注意的基本细节
 
实施时,我曾写过《图标设计五维自检法》。感兴趣的同学可以看看,除此之外,这里还有一点,如何让图标有细节!本设计总结了三种方法供您参考:


 
3.1设计技术细节
 
 
例如,要向笔划添加短划线样式,请执行以下操作:
 
另一个例子是线条和面片的组合:
 
 
3.2根据事物本身的特点添加细节
 
 
例如,木屋编号的详细信息:
 
 
3.3好玩的一笔
 
例如,书架上的一本书:
 
另一个例子是虚线:
 
当然,增加细节的方法太多了。总的目的是防止图标过于简单和谦卑。希望大家也能有自己的一套食谱来设计,大家互相学习。
 
最后看看图标的整体效果
 
在这个过程中附上一些手稿,哈哈,不要吓唬你:
 
对于这一条的实施,不管别人怎么说,你没有做很多的实践和思考,这个道理不言而喻。效果图如下:
 
以下图标也共享,但它们是扩展版本。切入角将略有不同。
 
本次改版的背景非常简单:在调整主页整体结构的同时,主图标的设计语言也改成了一般性的,由于时间的限制,小说图标还没有来得及改变,所以本次改版的设计目标是一个,而第一个版本的图标则改为多边形。
 
最初,我认为直接从线性表单改为填充表单就足够了。几分钟就可以完成,但没想到效果会这样改变:
 
调整后,我们得到:
 
为什么不好看?
 
我也不知道!
 
在这种情况下,去寻找更多的参考资料,分析和分析其他人的优秀作品,比如下面的谷歌图标:
 
为什么人们看起来如此美丽和娇嫩?
 
我个人认为最大的原因是它有更好的透气性。之所以透气性好,是因为它采用了多种元素的组合,并使用了大量的白色空间与色彩进行对比。
 
在这种分析下,我重新构思了图标,并在头脑风暴阶段直接对其进行了重新思考(因为原来的图标是一个元素,很难将其拆分为两个元素进行组合)。
 
为了独特,我选择的图标的含义如下(尽量避免使用不好的词):
 
书架:两本书相依
 
热:抱着爱
 
免费:雪糕筒(这个想法来自于雪糕筒通常有一个下半价,或者买一送一的活动)
 
结束:太阳黑子持有结束标志
 
最终执行效果如下:
 
如何设计一组从0到1的用户界面图标?_系统全面的平面设计培训和自学课程建议,全部在平面设计学习日记网(www.xxriji.cn)上进行
 
新版本的图标还采用了多种元素的组合,图标内部有很多白色空间,让图标更透气。
 
除了透气之外,我还将一些“类似生活的内容”融入到图标中,如手、品牌形象、拟人书籍等:
 
使图标更可爱,情感和充满故事感。
 
此外,图标上还添加了一点小细节:
 
一般来说,当我们在做一组事情时,我们都希望有一个贯穿始终的主题。这种解释方式更有说服力和说服力。
 
例如,在上面这组新颖的图标中,设计关键词是温暖、情感和可爱。在这个概念下,我把温暖转化为阳光作为一种视觉语言。
 
但是太阳是怎么落下的呢?当时我能想到的是亮点和投影,这次我用了long pro
 
充满光线的投影:
 
当然,为了让图标更轻,投影不应太重,只需播放点睛之笔:
 
此外,前文提到的NoneAs,为了体现可爱的主题,它融入了手和品牌形象等生活元素(整体图形相对圆润,避免尖角),这也是贯穿主题的一条路径。
 
有很多方法,它们都是不同的。其根本目的是希望每个人在设计时都有一个正确的想法!
 
整个设计过程几乎是一样的。事实上,调整细节需要很多时间。图标有了大致的方向和思路后,就需要不断的修改和修改。
 
颜色的组合、特征之间的距离、元素之间的大小关系等等,都需要不断调整,真正考验我们的是这些细节。
 
下面是两个增加可爱度的实用建议:
 
① 紧凑型功能
 
一般来说,缩小五官之间的距离可以让表情更可爱,在一定程度上,尤其是口鼻和眼睛之间的距离:
 
② 脸红
 
一般来说,在我的印象中,只有可爱的东西才会脸红。五大三厚的大师傅加了一个脸红,咦~,想不到!
 
因此,在绘制可爱的图像或表情时,请考虑添加腮红:
 
但是,我没有添加它,因为这次有太多的元素。
 
第四,最后
 
读千卷书,行万里路!别走,白白读这本书。
 
读上千篇文章,练上千个练习题!没有练习,文白看起来。
 
以上仅供参考。最后,你必须依靠自己去锻炼和探索。。。
 

么达日语学习教学

慧学韩语学习教学

慧学韩语logo慧学韩语logo
旗下品牌
慧学韩语
么达日语
众趣电商
众趣设计
支付方式
电话购买
网上支付
现场支付
淘宝店铺
售后服务
退款说明
温馨提示
意见反馈
关于众趣
关于我们
联系我们
版权信息
加入我们