UI设计教程之如何绘制扁平图标(1)

来源:网络   作者:热心网友   发布时间:2018-06-16    浏览次数:27
收藏到:

一套ICON系统的定义,是需要很多的步骤和方法论的支撑的,这样做出来的ICON才是有灵魂的。本教程谨代表个人观点,不做企业宣传用途。


一、图标的作用


图标是一种抽象的,跨语言的符号,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。随着信息传播速度和载体的快速增长,图标的使用频率也在不断提高。在设计图标之前,你有没有想过图标的作用何在?通过反复思考,有助于我们设计水平的提升。

经过设计师的总结和提炼,把图标的作用归结为4个点:装饰、表意、趣味和品宣。


1、装饰

是指通过图标对页面进行润色,使页面看上去更加饱满。同时,通过图标增加页面的层次感,使页面各部分内容得以区分。装饰作为图标的基础作用,大多数图标都满足装饰的作用。

例如下图中左侧ENJOY的首页中,icon作为页面的亮点装饰元素出现,在表意的基础上,提高了页面的识别性,在产品品牌推广上功不可没。右侧的饿了么也是一个很好的案例。

左侧:ENJOY 右侧:饿了么


2、表意

图标的第二大功能就是表意,在装饰的基础上有所升华。直白来说,图标的表意体现在对于功能的解释上。互联网经过这几年的快速发展,用户对于一些图标形成了一些约定俗成的认知。我们在进行产品设计时要做到心中有数,使用的时候切忌打破常规。

例如网易云音乐里的分享、下载、播放等icon,和站酷里的阅读、点赞、留言、收藏等icon,对于这些在用户心智中形成固有模式的图标,我们使用的时候可以在此基础上做变形、创新,但如果要打破用户的习惯认知,一定要谨慎。

左侧:网易云音乐 右侧:站酷


3、趣味

能带给人愉悦感受的图标可以称得上很好的图标了,这也就是图标的第三大功能。如果愉悦的同时有很好的表意性,无疑是一个极棒的图标了。

我们来看看QQ下面标签栏的icon是我们很熟悉的一组icon,在不同页面进行切换时,不仅icon有相对应的小动效,而且当选中不同的页面时,中间小人的眼睛也会随之变化,一个微妙的小细节往往是打动用户的关键之所在。

QQ app的标签栏icon


4、品牌宣传

随着互联网ui趋势概念的增强,市面上的产品同质化也越来越严重。那么如何能让自家的产品脱颖而出?其中很重要的因素之一就是品牌塑造。通过icon来进行品牌传达是一种简单有效的方法。

例如咸鱼app很好的将icon结合品牌色,打造了个性化的视觉体验。大众点评的V10改版更是通过整体的品牌升级,重新对UI进行了定义,通过全新的icon展示,传达了年轻化、娱乐化、社交化的产品理念。

左侧:咸鱼 右侧:大众点评


二、背景介绍

本次图标优化的需求来源于积木盒子app的redesign。

图标位置:位于积木盒子app一级页面“发现页”顶部的4个常驻活动入口。

由于本次优化时间有限,仅对这4个icon进行优化。如果优化效果好,会考虑在后期继续优化运营活动页的整体ui。

原有图标样式:

在app中的应用:

结合前面讲到的图标的作用,我们对原有图标进行分析。

我们从标签栏看出,整个app分为4部分,有首页、投资、发现、我的四个一级页面,而我们优化的图标位于发现页的一级页面中。根据图标的4个作用我们来逐个进行分析。


1、装饰

原有图标起到了较强的装饰性作用,细节上非常到位,颜色也很丰富,但仍然存在一定的问题。

与pc相比,app的界面空间很有限,在如此小的空间里,图标大小仅有50pt左右,因此与丰富的细节相比,更看重其识别性。这组icon为面性icon,要求每一个色块清晰可识别,尽可能避免含糊不清的阴影或颜色,使其即使在小屏也能迅速被用户所识别。

统一性欠缺,1、2、4的icon均为圆形icon中主要元素进行破形处理,第3个icon圆形即主元素,点缀的箭头进行破形处理。1、2、3的icon破形部分均有阴影,而第4个icon破形部分没有阴影。


2、表意

表意上基本明确。

“邀好友”为伸出的友谊之手。

“招财奖”利用招财猫为原型,如果再加入抽奖的元素则表意更佳。

“转转赢”利用转轮的元素,很好的表达了转盘抽奖的意思。

“周周乐”用宝箱来表意,虽不是特别贴切,但也不出错。如果结合实际的双色球活动,则表意效果更佳。


3、趣味

本组icon有较高的趣味性,希望改版优化能给用户带来同等程度的愉悦感受。


4、品牌宣传

由于改版对品牌及产品定位进行了全新升级,因此新版icon希望更多的体现出年轻化,色彩上有更高的饱和度,与品牌logo风格更贴近。

另外由于运营活动的更新,希望icon在风格上能有更好的延展性,便于后期相同风格的icon绘制。


总结:

通过以上分析,我们对新版icon提出了4个设计要点,对图标优化的风格定位起到指导性作用:高识别性、表意清晰、贴近品牌、易于扩展


12共2页
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.17xsj.com/shejijiaocheng/shejililun/7352.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!