三步教会你ui设计中图标怎样进行原创设计
2018-10-14 本文已影响126人
649af00cdc60

很多时候大家在设计app的图标是不是都去阿里图标网站下载
完了就直接拿来使用了。。。
嗯,我想说的是,如果客户要(gei)求(qian)不(hen)高(shao)的话
那这样做是没什么问题的
但是对于一些要求比较高的客户,我们应该怎样进行图标的原创设计呢?
我们来举例说明
比如,我们要做一个“人脸识别”这样的图标
设计成面型图标,这样在底下我们需要设计一个配色
第一步 关联产品的色彩信息
我们需要配一个怎样的底色?
可以通过图标所表达的产品类型去查找
比如人脸识别它属于什么类别?
很容易想到高科技领域对吧
那么ok,立刻打开搜索引擎,搜高科技

嗯,看来关于高科技的玩意
大家都比较认可冷色调
这样我们可以确定下来
背景底色选择青蓝色调
第二步 产品联想场景
人脸识别我们往往会联想到怎样的场景?
如果想象不出来,那么我们可以继续去搜索引擎

通过观察,我们可以总结一个规律
大体上说到人脸识别,大家能想象到一个方框,然后来一条扫描线,扫描一张人脸的画面
那我们是不是可以开始创作设计这个具体的图标了呢?
No,这个时候除非你有很深厚的图标设计功底
要不然所花的时间还是非常巨大的
第三步 参考成熟图标设计
登录阿里图标网站,搜索人脸识别相关的图标
去参考一些成熟的图标

果然,不少图标的设计跟我们之前搜索的图片得到的联想十分接近
摒弃掉那些跟我们图片不大相符的参考
好了,所有的准备工作都做的差不多了
接下来就可以打开Photoshop操作
(不会ps操作的同学,可以关注公从号:PS学习部落,回复:PS基础教程)


ok,到了这里,大功告成
不要忘了,多设计几个方案给甲方客户选择
推荐阅读: