关于APP中图标设计的思考与总结

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
2739 0 5 2018-03-19

本文内容:认识APP图标、了解它的重要性,结合实例从颜色、图形以及当下流行的设计风向、方法做了大量总结与归类,并对未来设计趋势做出分析!




最近看了一些移动应用的书,也有了些思考。如今眼花缭乱的移动App喷涌而出,一款App想要在这种现状脱颖而出,前提当然是牢牢抓住用户需求,比如我们已经离不开的微信。


在大量主流APP已经成熟的当下,如何战胜竞品、配合用户越来越高的体验要求、彰显用户个性以及引导用户的审美趋向将成为我们值得思考的部分,因此我用本文来记录一些我对于图标设计的思考与总结。



本文主要内容是什么?



一、图标的重要性


二、图标设计风向


三、图标背景颜色的学问


四、图标设计方法总结(结合实例)


五、图标未来国际化设计




一、图标的重要性


图标,也叫Icon,是介于用户和图形界面之间的一个载体。


应用图标类似于平面设计中的品牌Logo,是整个应用品牌的形象,设计成功的图标能给用户优良的视觉感受和操作体验。想一想,当用户在大堆的网站中寻找自己想要的特定内容的APP时,一个能让他轻易看出它所代表的APP的类型和内容的图标会有多重要。比如智行火车票、天气预报、QQ邮箱、美颜相机、QQ音乐、摩拜单车......

Image title

总结:高识别度、设计优良、打磨精细的APP图标才能立于不败之地。




二、图标设计风向


我们早已知道扁平化的设计风格已经走入大众生活中,它被应用在标志、平面、界面以及工业产品等的众多设计中,成为目前主流的设计风向。


扁平化最核心的地方就是摒弃一切装饰效果,诸如透视、纹理等元素,通过抽象、简化、符号化的设计元素来表现。极简抽象、矩形色块、大字体等设计技巧,让Logo干净整齐、简单直接。


近几年来,我们已经见证了图标设计由拟物化到扁平化的过渡,不看不知道,变化就在我们的手机屏幕上时刻都在发生,比如支付宝、蘑菇街、App store等等......

Image title

Image title

Image title


总结:设计优化方向在朝着图形简化、标志简约的扁平化方向发展。


接下来通过实例从底色背景及图形两个方面依次分析图标的设计方法~



三、图标背景颜色的学问



颜色怎么选?


Image title

颜色是有性格的,我从App store应用中,搜集了常用的应用图标,并寻找规律,可以看出应用图标大概有八种主流颜色,分别为白色、蓝色、红色、橙色、黄色、绿色、粉色和黑色。其中红色、白色和蓝色是最常用的纯色背景。



红色代表热情、火爆。

Image title

白色体现格调。

Image title

蓝色代表诚实、信赖、权威。


Image title


其他常用颜色的性格:


橙色给人活力。

Image title

黄色传递温暖。

Image title

绿色代表安全、健康、环保。

Image title

粉色代表甜美、浪漫,多用于女性应用。以美图旗下产品为例。


Image title

黑色象征权威和专业。

Image title

不同的颜色具有不同的性格及冷暖调,用色要契合APP的性能、功用及用户特点,比如女性常用的闺蜜圈APP用的是粉色Logo,试想一下,如果用成黑色的,想必下载量会直线下降。

Image title

总结:社交类APP适合绿色、黄色。女性类APP适合粉色。购物及聚集类适合红色、橙色。工具类适合蓝色。格调或强调专业类适合黑色、白色。


当然,颜色没有固定模式,但了解每种颜色的性格后,不至于造成出现明显的冲突、错误。以上是我总结的颜色规律,你也可以用来参考。




四、图标设计方法总结



了解了颜色的学问,接下来就该想想图形的事儿了。看似形形色色的APP图标,其实都是有规律的,我总结的常见的大致有以下几种:


1、纯文字


可以是首字,可以是首字母,也可以是全称,反正就是全是字儿......

Image title

2、组合


图图组合,比如微博是wifi信号和眼睛组合,wifi万能钥匙是wifi信号和钥匙组合。

Image title

图文组合,即图形和文字组合。

Image title

3、线性


只用线条勾出轮廓。

Image title

4、色块拼接


用句洋气话说,撞色......

Image title

5、插画


有些APP用精美或可爱的插画作为Logo,游戏类APP居多,别有一番趣味~

Image title

6、形象代表


说简单点儿,就是用图形代表APP的名字形象,比如印象笔记,就是用大象代表自己的logo~

Image title


总结:只有总结前人的设计规律,了解更多的设计方法,再加点儿关于产品的创意、寓意在里面,才能以更好的方式定位产品,给人耳目一新的感觉。




五、图标未来国际化设计



随着设计的发展,纯扁平化的图标已经越来越无法满足设计师对图标极致的追求,如今,许多设计师尤其是国外设计师已经尝试在扁平化中加入一些精致的效果,在维持扁平化的基础上,一点点增加图标的耐看度。


目前许多设计已经体现了这一点,例如世界迷雾、会声会影增加了立体效果;PDF阅读器、3D播播VR增加了3D效果;爱看影视、Snapseed和百度理财增加了长投影的光效等......

立体效果

Image title

3D效果

Image title

长投影光效

Image title


总结:


五个方面,从认识APP图标、了解它的重要性,接下来从颜色、图形以及当下流行的设计风向、方法做了大量总结与归类,并对未来设计趋势有了初步认识,以上就是本文的内容。希望对你也有所帮助!


非常感谢这么好看的你竟然读到了这里呢~


欢迎关注我的公众号:薯条小时光

Image title




全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票