ui设计培训-图标设计心得!

　　ui设计培训-图标设计心得!

　　成都华信智原ui设计培训老师为大家分享下国外设计师图标设计心得!

　　Eugeniu Clim，Ustwo的交互设计师，为大家分享图标设计心得，其中包括了如何按已有的设计风格进行创作。

　　一个好的图标需要些什么呢?

　　在搜集灵感的阶段你可以谷歌图片，还可以把现实中的物品图形化，还可以去lconfinder上看一看现成的图片。

　　Eugeniu Clim强调，“这只是一个缓兵之计!”如果想要真正的设计好的图标，还是要有一定的方法和流程的，而且这个流程和广为流程的user-centered design是很相似的。Ustwo就曾经为Tesc新一代的Hudl 7英寸安卓平板做过很高级的用户体验设计，其中一部分就是设计了一套图标。

　　了解背景之后，我们来看一下Clim的三步图标设计法。

　　1、探索与发现

　　首先你要列一张简单的表格，写一下每个图标的重点功能，然后再想一下到底用什么图形或符号来代表这些功能。你要做的就是找到图形，图案或者符号，让人一眼就看懂了它的功能。

　　如果要借用现实生活中的物品，线条一定要简洁明了，只要勾勒出具代表性的轮廓，能体现物品的功能就好。针对复杂的图标，略抽象的图形还有符号就会比较适用。在纸上大概画一下草图，你差不多可以进行下一步了。

　　2、设计

　　这一步就像小麦抽壳一样，筛选可以深入设计的象征图案。情绪板(moodboard)可以帮助梳理灵感于想法，然后就可以大概确定设计风格与方向，可能是现实主义或者极简主义，立体风或者扁平风。

　　不要太过于追求细节，太花枝招展了反而掩盖了图标本身的功能识别度。过多的细节会太抢眼而造成功能上的缺陷。

　　3、实践出真知

　　当图标在整体界面测试过后，一定要在听取意见和建议后再进行修改。然后你就一直重复这个测试/修改的环节直到租到满意的图标，或者客户催你交稿。俗话说“活到老，画到老”

　　按已定风格设计新图标

　　三步图标设计法还是非常简单易懂的，不过它只适用于一般情况，那遇到进阶级的图标设计该如何是好呢?Clim又说了，“Tesco就是这样的一个情况，你得按照人家的风格画新的图标。”

　　“理论上来说吧，按照别人的风格接着画应该容易些，就像三步图标设计法中的步别人已经帮你做了。其实是你很傻很天真，要没有攻略的话，提取别人的设计风格就跟破解别人的电脑密码一样难。”“你需要找到别人设计思维里的每一个细节，像颜色是天空蓝还是海洋蓝，字号是5号还是5.5号这些琐碎的细节你都要逐一弄清楚。”

　　另外一个大困难就是要确保成型的风格要很容易拓展延伸到其他主题的应用上。

　　“我们做了两组星星风格的图标，种用在了图标的轮廓上，第二钟和图标整体拧巴在了在一起。”“第二种风格明显要难一些，但是后定稿还是定在了第二种风格上(我们就是喜欢挑战一座又一座高峰)然后我们把后的风格应用在了一些新的图标上，后结果请求搜索Hudl tablet launcher app”

　　通过系统的设计达到设计能能保持一致性，而且要很有逻辑性。“系统性的设计是尤为重要的，光是靠在PS里做个图是不够的”

　　实用于各种图标的设计法则

　　01、图标不等于图画

　　许多设计师都会忽略，在设计图标时，如果一味的追求图画羙，增加很多繁复的细节，便会使得整个图标失去重点。总所周知的设计理论，“形式追随功能”，在这里就可以有良好的体现。一个好的图标，应该做到简约而不简单。

　　02、图标并不是生来平等的

　　有些象征概念光用语言很难描述了，更别说作图了。所有一定要知道，有些图标天生就会比较浅显易懂。所有用户对于某些图标一下子就很熟悉的这种现象完全正常，只要你的图标在短时间内能传达你所要表达的信息就足够了。

　　03、做好课前功课

　　找到一个合适的象征概念是坚挺困难的事情。有些时候你需要去做深层的挖掘和调研才能真正做出有意义的图标。你可以上网站搜索于图标意思相关的近义词，和近义词的图像，也可以去网站找合适的灵感来源做情绪板(moodboard)。

　　04、了解自己做的内容

　　知道你到底要做什么是极为重要的。问你的客户要界面的截图或者找机会把图标放在界面里进行操作测试。不清楚图标在操作界面里面实际应用就好比在暗室里涂颜色。

　　05、提前画草图

　　画草图会节省很多时间，你可以很直观的看出哪个值得深入设计，哪个可以直接pass。画草图也是一个很好的获取灵感的方法，当然如果是很简单的图标，你也可以直接用作图软件来画，因为手绘毕竟不能显示在屏幕上看到的真实尺寸。

　　06、注意那些旧的象征概念

　　有些象征概念背后代表的功能虽然在现实生活中已被替代，但是这些设计概念却因岁月的沉淀变得更有价值。很有代表性的一个例子就是胶卷摄影机图案被用来当做视频聊天的图标。但是要注意的是，也有陈旧的概念会随时间的流逝而被取代，比如用3.5英寸软盘来代表储存文件，还有用CD光碟带表音乐库。所以要避免使用这些被淘汰的概念。

　　07、大尺寸?小尺寸?

　　有两种途径来决定画图标的时候应该选择大尺寸还是小尺寸。大尺寸可以完成更多的细节，也便于缩小之后简化。小尺寸可以选择界面中默认的图标尺寸，然后再进行放大或者缩小。

　　08、创建一个图标组

　　与其单独设计每一个图标，不如把这些图标想成一个大家庭。要注意每个图标的细节要一致，比如边框粗细，圆角曲率，阴影和颜色等。另外还要注意每个图标与图标之间概念的联系。这样在图标真正应用到操作界面的时候就会事半功倍，产生统一的效果与感觉。

　　09、相信你的眼睛

　　不同的图标有不同的形状，尺寸，大小粗细都不一样，所以如果用这些来添满一整个图标那就大错特错了。每一个图标要单独的进行调整来确保视觉上的统一与整齐，在个别的时候，图标的内容还需要调离几何中心一点点。所以不要完全相信像素值，要相信你的眼睛。

　　10、进行组合测试

　　组合测试是进行修改的容易的办法。把所有图标排列组合在一起，任何需要校准的或者视觉上需要改进的图标一眼就能分辨出来了。另一个办法就是将图标的清晰度稍微调低一些，然后扫一眼来挑出需要改进的图标。

　　11、时刻准备着

　　后，坚持自己的设计。在图标设计定稿阶段，大家都会各抒己见，很多时候意见和建议都是相互矛盾的。后定稿可能会被除设计流程外的很多因素所影响。所以尽可能的坚持你自己的设计理念!

　　以上便是成都华信智原从国外一位UI设计师的个人博客翻译过来的，希望对大家有用。