在做UI工作时,不可避免的要大量设计功能图标,那么如何快速高效设计好呢?小U来给大家介绍点“私家菜谱”,并且用大白话给你讲,希望能让我们这些UI设计师在工作时提高自己的工作效率!
首先在设计之初,需要做的就是理解此功能图标的含义以及应用场景,换句话说——这个功能图标到底是做什么用处的?其实也没有多高深,更细质地讲
1、看你所设计的产品他的基调是什么的。比如说偏男性的app,就不要使用紫色粉色这些代表女性的色彩也不要使用太柔和的线条,这些都是在所需要理解的范畴中。
中性偏男性的图标设计偏女性柔和的图标设计2、功能是做什么的,并且进行联想。比如设计“我的”功能图标,一般而言代表形象就是“人”,而不会是其他的什么,当然你还可以发散思维去做水果类系列图标,把各种图标都设计成水果,只不过“人”的识别度和可理解度比较高,降低了用户的学习成本以及提升了用户产品体验度。需要在设计之初考虑周全哦~
以“人”为形象的图标设计3、如果对当前所设计的图标不是很清楚应该以什么样的方式去呈现,那么请首先问清楚产品经理或者相关工作人员,这个功能图标的含义,在理解清楚以后去进行设计,千万不要想当然哦~当然你还可以去“阿里巴巴iconfont”去搜索图标,看看别人的设计是否可以有借鉴之处。
阿里巴巴iconfont以上这些就是我们在设计图标前所必须走的三个步骤。准备好这些基本内容以后,下面这些细节部分你就要HOLD住咯~~~
一、图标尺寸
图标的尺寸到底应该设计成多大的!不要像你的头一样大哦~~
目前主流尺寸有16×16,24×24,32×32,48×48,64×64,96×96,×,×,×,×,×…
你可以根据所设计的界面尺寸合理进行选择。比如在设计iPhone端时,建议选择24×24
1x;pad端时,我在设计的时候用了24×28,所以纯属经验之谈哈,还是要看你在设计时的场景以及系列图标的统一性。二、图标类型
其实这个东西,很多人把他分成很多类型,比如线性、面型、多色型、单色型等等,我的建议是,每个型都有其优势和劣势,要针对性的使用。比如要考虑这个图标在点击和未点击时的状态转换,要考虑整个页面的统一性等等。
考虑点击和未点击状态转换的话,其实所有这些类型的如表归根结底,基本都是线性和面性图标进行转化。看几个大神的转换方式
△JoryRaphae△Sebo三、切图
在命名的时候怎么命名呢?一般来说都是这样的:模块_类别_功能_状态.png,对于如何切图,其实现在来说很多插件可以帮你大忙,比如摹客等等很多这些都可以直接上传你的设计稿,对你进行标记过的icon进行导出。
比如我,最常用的设计软件时ADOBEXD,设计时就将icon打组命名并进行标记,安装摹客插件后,只要上传自己的设计稿,就可以直接下载啦~不要太方便
直接下载icon好啦,这些最基础的东西你搞懂了,我相信,就不会那么慌啦,至于更细致更专业的知识,小U下次再分类给你们讲~~
未完待续