查看完整版本: UI乐园——界面图标创意设计之交流。

UI乐园——界面图标创意设计之交流。

[quote]注：在网上看过很多设计师的图标制作过程,基本都是偏向技法的介绍.其实在图标设计过程中除了技法之外最重要的就是图标创意了,但这方面的系统介绍网上倒是很少.借这次实际的界面设计项目,来分享下我自己对界面图标制作创意阶段的方法的理解.并以丰富的图例来阐释自己的想法!以次作为图形界面设计师交流的引子!欢迎大家进来交流!
Iconfans
[/quote]

大家好！我是来自[url=http://uiclub.blogbus.com/logs/10356446.html][color=#000000]UI乐园[/color][/url]的jameguilin。这是我以前在自己博客（[url=http://uiclub.blogbus.com/logs/10356446.html]UI乐园[/url]）上写的一篇文章，已经被很多网站转贴过。不过这是我自己第一次转贴到贵地，和大家分享交流。
      
        在网上看过很多设计师的图标制作过程,基本都是偏向技法的介绍.其实在图标设计过程中除了技法之外最重要的就是图标创意了,但这方面的系统介绍网上倒是很少.借这次实际的界面设计项目,来分享下我自己对界面图标制作创意阶段的方法的理解.并以丰富的图例来阐释自己的想法!以次作为图形界面设计师交流的引子!欢迎大家进来交流!

[b]第一部分[图标创意阶段[/b]
其实这个阶段之前还有个重要的步骤,就是创意准备.
      根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定"用户角色",用来指导界面视觉风格方向、界面内容建构和交互设计等！（这个内容以及超出这个话题.）
       当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标设计所关心的可用性问题！这在我博课里引用了Jakob Nielsen's Website里面的文章“[url=http://www.useit.com/papers/sun/icons.html][color=#ca6888]Icon Usability[/color][/url]”，大家可以去看看。差的图标设计最终导致用户界面的操作失败的体验。但视觉审美和可用性有时候存在矛盾的方面，我们不能走极端，只顾及可用性但忽视设计美观的一面，也不能追求设计上的美的需求而忘了这是功能性很强的界面图标，最好是能在两者之间取得平衡！
      理解功能需求后，我们要收集很多关于“词语——图形”之间能转化的元素，用生活中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐：我们会想到，音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢？原则上是越贴近用户的心理模型最好，用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是必要的思维方法！找出物与所指之间的内在含义，这就要求设计师对生活的细微观察，丰富的联想能力。当然这也就是设计的困难点，做好一个图标设计不亚于好的产品创意设计，包括最终的图标制作也是体现设计师能力之处，特别是现在高分辨率的显示设备大量应用，好的界面要得到用户的认可，高质量的图标设计比不可少！（难啊！现在对GUI设计的理解还只限于平面美工，管理者的意识往往关系到一个行业是否正常发展。我们的工作要得到认可，需要大家的共同努力！）

[url=http://www.deviantart.com/download/67764636/icon_sketching2_by_jameguilin.jpg][img=300,270]http://tn3-2.deviantart.com/fs19/300W/f/2007/293/4/8/icon_sketching2_by_jameguilin.jpg[/img][/url]   [url=http://www.deviantart.com/download/67764722/icon_sketching_by_jameguilin.jpg][img=300,270]http://tn3-1.deviantart.com/fs21/300W/f/2007/293/a/9/icon_sketching_by_jameguilin.jpg[/img][/url]

[url=http://www.deviantart.com/download/67764553/icon_sk_1_by_jameguilin.jpg][img=300,270]http://tn3-2.deviantart.com/fs20/300W/f/2007/293/4/d/icon_sk_1_by_jameguilin.jpg[/img][/url]   [url=http://www.deviantart.com/download/67764792/icon_sketching6_by_jameguilin.jpg][img=300,270]http://tn3-2.deviantart.com/fs20/300W/f/2007/293/c/6/icon_sketching6_by_jameguilin.jpg[/img][/url]

[url=http://www.deviantart.com/download/67765981/icon_sketching_08_by_jameguilin.jpg][img=300,270]http://tn3-1.deviantart.com/fs19/300W/f/2007/293/3/a/icon_sketching_08_by_jameguilin.jpg[/img][/url]   [url=http://www.deviantart.com/download/67765940/icon_sketching_07_by_jameguilin.jpg][img=300,270]http://tn3-2.deviantart.com/fs19/300W/f/2007/293/6/6/icon_sketching_07_by_jameguilin.jpg[/img][/url]

[b]第二部分[草图绘制阶段]
[/b]
      这个阶段就是把我们的创意绘制出来，检验下视觉关系，也就是在视觉方面多在草图上推敲，这样效率高些，避免在渲染完后来后悔。（后悔啥！那就是重来了！）首先要确定我们图标透视，这是关系到一套方案中的每个图标的透视方向，这是在图标设计一致性方面的基本要求，透视统一。然后一步步的添加细节。如下图所示：
[url=http://www.deviantart.com/download/67765867/icon_sketching_10_by_jameguilin.jpg][img=300,270]http://tn3-2.deviantart.com/fs21/300W/f/2007/293/0/1/icon_sketching_10_by_jameguilin.jpg[/img][/url]
在这个阶段我们还要检查下元素之间的组合方式（有文字，大家点击看吧，打字很累啊！）。如下图：
[url=http://www.deviantart.com/download/67765765/icon_sketching_9_by_jameguilin.jpg][img=300,270]http://tn3-2.deviantart.com/fs19/300W/f/2007/293/4/a/icon_sketching_9_by_jameguilin.jpg[/img][/url]
[url=http://tn3-2.deviantart.com/fs19/300W/f/2007/293/4/a/icon_sketching_9_by_jameguilin.jpg]（点击看大图）[/url]

[b]图标视觉分析[/b]：
　　往往一个图标要表达一定的含义就必须组合不同的形态，借助单个形态所传达的内在信息，拼合在一起去传达另外一种信息。例如在设计“导航”功能图标时候：我们第一反应是与卫星有关，但就以单个卫星的外形来传达导航的含义恐怕不狗，于是再联想与导航有关的信息图示：“坐标”“旗帜”“陆地”等。再经过设计师以视觉平衡原理合理的布置他们之间的主次、空间关系。要注意的是：不可随便使用其与要表达功能相关的图形或物体，要经过精心的挑选，最好是大家熟悉、易记的物或形，毕竟我们的目的是要帮助用户更形象的理解计算机程序的内在功能含义，以易记、易懂为前提。也不能借助过多的图形来表达图标含义，过于复杂反而影响用户的理解。
　　上图是分析形态组合之间的关系，探索最佳组合方式。形成视觉与功能的统一。

[b]第三部分[草图渲染阶段][/b]

      等我们把前面的过程走完了，心里有底了。自己觉得草图已经很清楚的表达了自己的想法，并且也能与功能信息密切的吻合，（我一般是把画好的图标作个现场测试，给同学或同事看，同时问他是否能理解我画的图标含义）那就开始伟大的渲染工程吧！这里要说下工具问题，很多人都问，要用什么工具来画图标，我的回答是，只要能画出来，达到目的，什么都可以，哪怕是手绘后扫描再编辑。一般我们用PHotoshop、Illustrator、Firework等软件来绘制，这要看你的习惯，以及对软件的熟悉程度。我用的就是比较偏的软件[url=http://www.xara.com/products/xtreme/?v=pro][color=#ca6888]Xara Xtreme pro[/color][/url],这是个矢量软件，功能强大，速度快。但软件体积很小，功能比较专注于绘制，绘制方式自由，只要你有艺术功底，就可以绘制漂亮的图标。下面我会以过程方式讲述Xara绘制图标的过程
[url=http://www.deviantart.com/download/68509861/ICON_design_by_jameguilin.jpg][img=300,636]http://tn3-1.deviantart.com/fs20/300W/f/2007/302/6/e/ICON_design_by_jameguilin.jpg[/img][/url]
[url=http://tn3-1.deviantart.com/fs20/300W/f/2007/302/6/e/ICON_design_by_jameguilin.jpg](点击查看大图)[/url]

全文完，这是个大概的过程，欢迎大家讨论。特别是有使用[url=http://www.xara.com/products/xtreme/?v=pro][color=#ca6888]Xara Xtreme pro[/color][/url]软件的朋友，欢迎交流使用心得！

:) 呵呵，真是巧啊！你的这篇文章写的不错。在chinaui上看过，已经被我转载过来了~~哈哈

很荣幸能来iconfans！我想目前论坛里也有不少会员对Xara Xtreme pro这个软件感兴趣。


[quote]
部分大图和相关回帖：[url=http://www.iconfans.com/thread-327-1-1.html]http://www.iconfans.com/thread-327-1-1.html[/url]
[/quote]

:$  集思广益，还得感谢你们这些能把行内人圈起来的先行者、实践者！ 支持iconfans！！希望办成国内最好的icon、ui 设计的交流平台。

很多地方都看过这个教程，确实很不错！

感谢分享~~~

非常棒的教程,收藏回家晚上好好学学

不错，希望这样的教程以后能多点...

希望能多点xara x在UI方面的教程~~~~~~~~~~~~~

图片打不开类..........................