从草图到图标-浅谈图标制作过程 - 学院 - CHINAUI.com 优艾网 - 中国人机界面设计门户网站
您的位置:首页 >> 学院 >> 方法理论 >> 从草图到图标-浅谈图标制作过程
从草图到图标-浅谈图标制作过程
来源:Chinaui 作者:KARSON 发布时间:2008-07-16

 从草图到图标-浅谈图标制作过程

 1为什么制作图标

及图形化解释说明事物

一个简单的购物行为的图标表现形式

 

 

 

 下面我们用淘宝商城中的购物流程的图标设计来说明下我个人制作图标的制作过程

淘宝商城购物流程图
搜索/浏览商品 >> 加入购物车 >> 结帐/付款 >> 收货/评价 >> 获得积分

首先进行资料的分析和采集

 

 

2在纸面上绘制草图

  

(1) 在纸上(而不是用软件)绘制出你的设计概念和细节。当你打开某个绘图软件之前就应当已经准备好去实现你的想法。

 

(2) 用软件绘制图标。
即使你可能希望最后的图标看上去就像一幅照片,从一张真正的照片着手却很可能是一个失策的举动。手工绘制图形能允许更大的弹性,便于在一个很小的空间里表现某个概念。手工绘制同时还能让你对细节、透视、光影效果、纹理等方面进行必要的控制。

 

3秀出你所有的想法

  

  

4 测试 调整 选出最合适的

  

 

,错误都出现了,透视!角度!搞不懂是什么东西?!

以下列出了一些设计图标方面的建议。

 

透视和投影是一个好的图标最重要的组成部分。使用一个来自图标上方的光源。

 

使用人们能容易辨识的图像。避免把精力花在那些次级的方面。例如对于邮件图标来说,一张邮票肯定会比一个乡间邮筒要容易辨识得多。

 

力保简单性。尝试用单一的物体来捕捉图标代表的动作或行为。从基本形状开始着手。

 

明智地使用色彩。不要只是为了让图标更有色彩而添加颜色。平滑的渐变色绝对比单纯的色块要有效。

 

用实际的尺寸来设计工具栏图标(32×32)。对于其它图标来说,集中完善你的128×128尺寸的图标,然后从它再进行缩小加工。把图标中的各个元素单独缩小然后再把它们混合在一起,这种做法比直接一次性把整个图标缩小要好得多。

 5 图标的制作规范

 

 

 

 

(1) 各种图标所描绘的角度和阴影被用于展现物体在现实中所本来具有的样子。所有的元素都有一个通用的光源。不同的透视角度是通过变换假想中的摄像机的位置来实现的。

(2) 在这里我们的图标被描绘成它们好像搁在你面前的架子上。就好像它们背后有一堵墙,而物体都是垂直放置。在物体后面有适当的投影

 

6 放在实际的页面中看你的图标

  

7 延伸这个设计

 

 

ok,以上只是个人的工作经验的总结,一定有很多的不足,希望大家多多指教交流,本文部分内容参考了Apple人家交互指南中的图标篇,在此向APPLE致敬!

 原文地址:http://hi.baidu.com/karsonie/blog/item/e5b6550657acf67e0208819a.html

 

相关阅读
推荐文章
热点文章