设计之家
设计365
设计之家|平面设计素材|PSD分层图库|PSD分层素材|PSD分层模版|广告图库|PSD图库|PSD格式|PSD设计素材|PSD源文件|PSD免费下载|VI模版|VI模板免费下载|POP海报
    商城首页 | 平面设计素材 | 韩国矢量图库 | 网页模板(欧·韩) | Flash源代码 | 婚纱儿童 | 地产专题 | VIS/CIS | 影视动画 | 付款方式 | 版权说明
    三维模型 | 字体设计 | 建筑装饰 | 营销策划 | 潘通色卡 | 设计图书 | 免费下载 | 移门图库(荐) | 站点地图 | 联系方式 | 站内新闻网站建设
热门关键词: 韩国 花纹 模板 PSD 分层 矢量 VIS CIS 网页 Flash 包装     高级搜索
 
目前位置:首页 > 新闻中心 > 浏览新闻
界面图标创意设计教程
出处: PSD分层源文件 平面设计图库 网站模板 房地产素材 韩国花纹图案 VI模版  发布日期: 2012-02-16 15:34:38 

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

这个过程比较长,自己只能分阶段的准备好,发上来!快毕业了事情很多,多多谅解!
今天把部分草图放上来!创意说明后续准备.

第一部分:图标创意阶段

其实这个阶段之前还有个重要的步骤,就是创意准备.

根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定"用户角色",用来指导界面视觉风格方向、界面内容建构和交互设计等!(这个内容以及超出这个话题.)

当我们接到设计任务后,我们怎么开始设计图标呢?首先我们要看懂界面需求,对每个功能图标的定义要非常清楚,否则我们设计的结果将导致用户难以理解,这个也是图标设计所关心的可用性问题!这在我博课里引用了Jakob Nielsen's Website里面的文章“Icon Usability”,大家可以去看看。差的图标设计最终导致用户界面的操作失败的体验。但视觉审美和可用性有时候存在矛盾的方面,我们不能走极端,只顾及可用性但忽视设计美观的一面,也不能追求设计上的美的需求而忘了这是功能性很强的界面图标,最好是能在两者之间取得平衡!

理解功能需求后,我们要收集很多关于“词语——图形”之间能转化的元素,用生活中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐:我们会想到,音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢?原则上是越贴近用户的心理模型最好,用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是必要的思维方法!找出物与所指之间的内在含义,这就要求设计师对生活的细微观察,丰富的联想能力。当然这也就是设计的困难点,做好一个图标设计不亚于好的产品创意设计,包括最终的图标制作也是体现设计师能力之处,特别是现在高分辨率的显示设备大量应用,好的界面要得到用户的认可,高质量的图标设计比不可少!(难啊!现在对GUI设计的理解还只限于平面美工,管理者的意识往往关系到一个行业是否正常发展。我们的工作要得到认可,需要大家的共同努力!)

 

第二部分:草图绘制阶段

这个阶段就是把我们的创意绘制出来,检验下视觉关系,也就是在视觉方面多在草图上推敲,这样效率高些,避免在渲染完后来后悔。(后悔啥!那就是重来了!)首先要确定我们图标透视,这是关系到一套方案中的每个图标的透视方向,这是在图标设计一致性方面的基本要求,透视统一。然后一步步的添加细节。如下图所示:

 

在这个阶段我们还要检查下元素之间的组合方式(有文字,大家点击看吧,打字很累啊!)。如下图:


点击放大

图标视觉分析:

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

上图是分析形态组合之间的关系,探索最佳组合方式。形成视觉与功能的统一。

第三部分:草图渲染阶段

等我们把前面的过程走完了,心里有底了。自己觉得草图已经很清楚的表达了自己的想法,并且也能与功能信息密切的吻合,(我一般是把画好的图标作个现场测试,给同学或同事看,同时问他是否能理解我画的图标含义)那就开始伟大的渲染工程吧!这里要说下工具问题,很多人都问,要用什么工具来画图标,我的回答是,只要能画出来,达到目的,什么都可以,哪怕是手绘后扫描再编辑。一般我们用PHotoshop、Illustrator、Firework等软件来绘制,这要看你的习惯,以及对软件的熟悉程度。我用的就是比较偏的软件Xara Xtreme pro,这是个矢量软件,功能强大,速度快。但软件体积很小,功能比较专注于绘制,绘制方式自由,只要你有艺术功底,就可以绘制漂亮的图标。下面我会以过程方式讲述Xara绘制图标的过程。

时间紧,简单的把前面的草图图标设计用XARA制作个最终效果!先放个简单过程,以后补上完整的!

分类 新闻标题 时间 查 看
  设计咨询     共享店铺-首页自定义模板代码+PSD背景图淘宝... 2012-7-6 查看
  设计咨询     如何将AI文件转换为PSD文件... 2012-7-6 查看
  设计咨询     名片分层模板素材PSD... 2012-7-6 查看
  设计咨询     PSD&素材&新增AUTODESK有关网站... 2012-7-6 查看
  设计咨询     2012年7月平面设计素材图库大促销... 2012-7-5 查看
  设计咨询     设计之家网站与哈尔滨seo城城正式合作... 2012-3-20 查看
  设计咨询     茶包装的设计要点... 2012-2-24 查看
  设计咨询     小册子折页方法... 2012-2-23 查看
  设计咨询     界面图标创意设计教程... 2012-2-16 查看
  设计咨询     设计理论:连贯式设计... 2012-2-9 查看


矢量图库
PSD分层素材
优优素材网
秀未来设计
中国设计网址大全
psd素材
展台设计
平面设计素材
平面设计素材网
更多链接
移门图库
4A广告设计
4A广告设计网
名片模板
哈尔滨驾校团购中心
PSD分层源文件
SU草图大师论坛
标志设计
汽车点火线圈
更多链接
展板模板
设计书店
设计图库
设计之家中文网站目录更多链接 
 
 
 
 
 

Copyright © 2007-2008 北京东方照生科技有限公司 设计之家 图库网 版权所有 All Rights Reserved 
全国各城市支持货到付款! (2-3天送到!)  只需提供收件人,详细地址,手机号。
 服务QQ :765905476给我发信息   
 24小时热线电话: 158 4600 6774(王)       
 版权信息: 设计之家    信息产业部备案: 黑ICP备07500731号  免责声明

回到页面顶部
设计365-2009PSD实用分层源文件专辑  09分层年鉴  设计密码二  花纹图库  展板设计师  图行天下-创意风暴  2009画册年鉴  2009PSD分层图库最新第2版 
Baidu