UI设计教程:界面图标创意设计


对于初级接触UI设计的人来说,网络上或者界面设计书上介绍的如何制作UI界面设计和图标制作的很多,但是要谈到创意的专业的UI界面图标创意设计,还是挺少的。
  第一部分:图标创意阶段
  其实这个阶段之前还有个重要的步骤,就是创意准备。
  根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定"用户角色",用来指导界面视觉风格方向、界面内容建构和交互设计等!
  当我们接到设计任务后,我们怎么开始设计图标呢?首先我们要看懂界面需求,对每个功能图标的定义要非常清楚,否则我们设计的结果将导致用户难以理解,这个也是图标设计所关心的可用性问题!这在我博课里引用了Jakob Nielsens Website里面的文章“Icon Usability”,大家可以去看看。差的图标设计最终导致用户界面的操作失败的体验。但视觉审美和可用性有时候存在矛盾的方面,我们不能走极端,只顾及可用性但忽视设计美观的一面,也不能追求设计上的美的需求而忘了这是功能性很强的界面图标,最好是能在两者之间取得平衡!
  理解功能需求后,我们要收集很多关于“词语——图形”之间能转化的元素,用生活中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐:我们会想到,音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢?原则上是越贴近用户的心理模型最好,用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是必要的思维方法!找出物与所指之间的内在含义,这就要求设计师对生活的细微观察,丰富的联想能力。当然这也就是设计的困难点,做好一个图标设计不亚于好的产品创意设计,包括最终的图标制作也是体现设计师能力之处,特别是现在高分辨率的显示设备大量应用,好的界面要得到用户的认可,高质量的图标设计比不可少!
第二部分:草图绘制阶段
   这个阶段就是把我们的创意绘制出来,检验下视觉关系,也就是在视觉方面多在草图上推敲,这样效率高些,避免在渲染完后来后悔。(后悔啥!那就是重来了!)首先要确定我们图标透视,这是关系到一套方案中的每个图标的透视方向,这是在图标设计一致性方面的基本要求,透视统一。然后一步步的添加细节。
图标视觉分析:
  往往一个图标要表达一定的含义就必须组合不同的形态,借助单个形态所传达的内在信息,拼合在一起去传达另外一种信息。例如在设计“导航”功能图标时候:我们第一反应是与卫星有关,但就以单个卫星的外形来传达导航的含义恐怕不狗,于是再联想与导航有关的信息图示:“坐标”“旗帜”“陆地”等。再经过设计师以视觉平衡原理合理的布置他们之间的主次、空间关系。要注意的是:不可随便使用其与要表达功能相关的图形或物体,要经过精心的挑选,最好是大家熟悉、易记的物或形,毕竟我们的目的是要帮助用户更形象的理解计算机程序的内在功能含义,以易记、易懂为前提。也不能借助过多的图形来表达图标含义,过于复杂反而影响用户的理解。
  上图是分析形态组合之间的关系,探索最佳组合方式。形成视觉与功能的统一。

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

 

 

UI界面设计的最理想化概念

对于追求完美的UI界面设计师来说,完美的界面设计其实并不存在,因为UI界面设计对于不同的开发商和产品来说理想的界面有着多种不同的意义。可是为了最终用户,你必须作出最佳选择,因为这种选择在用户从视觉和感知方面接触多媒体时起着重要作用。

用户界面是内容对与其交互者产生最初和持续印象的地方,它包括整个产品的视觉和感觉效果,更进一步,包括对开发设计者的视觉和感觉。用户界面是如此重要,它能决定一个游戏是有趣还是乏味,也可以决定一个参考资料性多媒体产品是有用还是无用。产品内容充实但界面无吸引力或笨拙仍是一种失败,反之,一个令人注目的界面能使很普通的内容看起来比它实际上更有吸引力。界面占据了用户多媒体体验的核心部分。如何组织用户的多媒体体验?它的结构是逻辑的吗?例如交互性是以清晰易懂、因果方式来规划吗?或者它是否更开放,鼓励用户自己去探究?界面显眼到成为体验的一部分吗?或它是否内容突出?你将在这一章看到有关这些界面设计问题的例子。这些决策是产品的其余部分发展的核心,它决定了每一件事情的进度。因为多媒体本质上是计算机程序,界面设计的过程没有给人很好的即兴创作机会。不象任意加人多媒体的单个元素——视频、文本、音频和图象,装配的多媒体产品不易以再编辑一段视频或混合一段音乐的“后期制作”方式修改。界面无论假设如何感觉如何,它是开发商和用户的路径图,但问题有那样多不相同的可能性,你如何挑一个出来?显然,须就每一个项目的特定目标和挑战对上述问题做出回答,解决它们而向最终用户给出你所设计的体验。

 

界面设计师要设计用户习惯的界面设计

我们时常会看到那些设计的十分创意的,有想法的,另类又独特的界面设计。无可厚非,这是一个讲究创意的年代,设计师在界面设计上多做文章是很正常的。但是在讲究与众不同的同时,我们的界面设计师还要考虑到一般用户的使用习惯问题。

  例如,当用户选择了“播放”按钮来开始播放一段视频,但什么都没有发生,他们会认为该网站出了故障,或者会认为网站上的其它“播放”按钮也不能工作。而另一方面,该网站的设计人员也许对于视频为什么不能在用户系统上播放有不同的解释,比如他们会说,用户网速太慢,用户的播放器不兼容,或者用户需要的只是更多的耐心。不过最终的原因是什么并不重要。不要为你的界面辩护。你应当做的是去改正它。

  不要让技术干扰了用户体验。对技术很熟悉的设计人员经常会禁不住尝试一些与众不同的设计和交互方式,以便创建出更为复杂和具有交互性的网站。然而,具有讽刺意味的是,如果技术不能无缝的融入系统,那些使用了最前沿的技术来吸引用户的网站就很有可能反而会使他们离开。

  如果你强烈渴望通过创建一些具有革命性的东西来展示自己的才华,那么就问问自己,如果客户更喜欢使用简单的工具,那么为什么不最大限度的利用这些工具,而非要将一些新的工具强加给他们呢?

  可以想象得到,人们不喜欢付出比他们所必需的还要多的努力。由于这个原因,人们不愿学习新的交互方式。应当坚持使用那些人们已经熟悉并且使用起来很舒服的设计。采用的技术越先进,普通用户就越不熟悉那些交互方式,你就越需要简化设计。

  每当你要对一个标准的界面设计进行修改时,你都应当考虑该修改将会给可用性带来的影响,因为除非这些非标准的设计真的直观和易于使用,否则用户再和它们进行交互式将会遇到困难。如果你想成为炫耀某个华丽设计概念的第一人,那将很可能导致人们无法理解你的设计。你的设计偏离标准越远,你就越有可能令用户感到困惑,甚至更糟糕,你将会失去用户。如果你的设计使人们慢了下来,导致他们出错,或者是破坏了他们的假定,这都将带来毁灭性的后果。如果你必须进行一些非传统的设计,在一定要确保你这样做有充分的理由,同时要对系统进行用户测试,以保证人们可以理解它。

 

软件界面设计的界面评测

通常一个软件界面设计的元素包括界面主颜色、字体颜色、字体大小、界面布局、界面交互方式、界面功能分布、界面输入输出模式。其中,对用户工作效率有显著影响的元素包括:输入输出方式、交互方式、功能分布,在使用命令式交互方式的系统中,命令名称、参数也是界面元素的内容,如何设计命令及参数也很重要。影响用户对系统友好性评价的元素则有:颜色、字体大小、界面布局等,这种划分不是绝对的,软件界面作为一个整体,其中任何一个元素不符合用户习惯、不满足用户要求都将降低用户对软件系统的认可度,甚至影响用户的工作效率,而使用户最终放弃使用系统。围绕界面元素所要达到的设计目的是让最终用户能够获得美感、提高工作效率、易于操作使用系统。

目前在界面元素的选择、布局设计等方面的研究进行得较多,内容涵盖了人机工程学、认知心理学、、美学、色彩理论等方面的探讨。

2.2用户角色

界面需求分析必须围绕用户为中心,不同于客观功能需求分析,具有很大的主观性。虽然,界面设计人员可以按照通行的原则来设计,但是用户个体的文化背景、知识水平、个人喜好等是千差百异的,其界面需求也是相差很大。不同的用户,对软件界面有不同的要求,表达自己要求的方式也尽不相同。而且用户界面要求通常不象业务功能需求那样容易明确、有据可查、可以利用专门工具进行分析。多数用户往往并不能提出明确的、全局的界面需求,其需求同自身主观因素联系紧密,是模糊、变化的。调查用户的界面需求,必须先从调查用户自身特征开始,将不同特征用户群体的要求进行综合处理,再有针对性地分析其界面需求。因此这里引出用户角色这个概念模型。

用户角色是指按照一定参考体系划分的用户类型,是能够代表某种用户特征、便于统一描述的众多用户个体的集合。用户调查的目标是通过调查分析用户特征,将每个不能建立模型的单一用户归纳为集合,将用户集合定义为角色模型,同时赋予不同的优先级别,了解记录其界面需求。用户的需求调查和其特征调查即用户角色定义,往往同时进行。调查的方法有很多种,如直接交流、资料统计、表格调查等。用户角色定义的原则是有代表性、同系统功能有关并有利界面的需求分析。一个用户角色可能包括大量的用户个体,他们对于界面的要求可以按照一定的界面模型进行定义。在一个软件系统中,用户角色定义时所依据体系可以多种多样,一个单一用户可以属于不同参考体系下的不同用户角色,但是一个用户角色要求能够代表一种界面需求类型。如收银员就是按照用户工作职位划分出来一个用户角色,如果按照操作计算机的熟练程度,属于收银员角色中的系统用户又可以分为:熟练用户、生疏用户。

用户角色定义就是人机工程学理论在软件开发过程中的一种应用。用户角色的确定可以根据系统需求方提供的用户资料和行业经验,如美学观念、用户计算机水平、用户工作内容等对用户进行初始角色定义,然后在需求调查过程中进行修正扩充。

之所以要定义用户角色,是因为不同的用户角色在需求分析过程中的需求目标不同,侧重点也不同,甚至互相矛盾。在一个大型系统中,需求分析人员面对的用户只能是众多单一的用户个体,他们的需求千奇百怪。只有明确了用户角色,需求分析人员才能在纷乱复杂而又不甚明了的用户要求中理出脉络,依据用户角色不同的优先级别,平衡众多用户需求中的矛盾,抽象出完整的GUI界面模型。

2.3需求变化

我们知道用户对于界面通常只能提出基本的要求,而且提出的要求也不一定科学,因此如何诱导用户在项目进行中尽早明确自己的需求,是任何需求分析人员都会面临的问题。

用户对目标系统的认识和需求的变化过程如下图所示:

用户根据自己想象中的理想系统向分析开发人员提出自己的要求。开发方实现目标后交给用户,在系统实施运行后,用户将实际目标系统同自己想象中的理想系统对比,同时目标系统的使用会刺激用户修正想象中的理想系统,然后提出新的需求。由于软件界面的评审因素同用户的心理状况、认识水平有很大关系,所以对于软件界面,用户只有在使用过之后才能知道是否符合自己的操作习惯,颜色、字体等界面元素是否满足自己的要求,从而提出更明确的要求。

2.4界面原型

由于在软件开发前期,用户的界面需求很模糊,甚至没有自己的理想模型,用户提出的要求就很难量化,结果很容易被需求分析人员忽略。因此在用户角色定义完成后应用快速原型法来设计用户界面,可以帮助用户尽快完善自己的理想模型。

利用界面原型可以将界面需求调查的周期尽量缩短,并尽可能满足用户的要求。快速原型法是迅速地根据软件系统的需求产生出软件系统的一个原型的过程,其主要好处是可尽早获得更完整、更正确地需求和设计。利用界面原型,用户可以很感性地认识到未来系统的界面风格以及操作方式,从而迅速作出判断:系统是否符合自己的感官期望,是否满足自己的操作习惯,是否能够满足自己工作的需要。需求分析人员可以利用界面原型,诱导用户修正自己的理想系统,提出新的界面要求。

因此,界面需求分析的步骤可为:确定所涉及的界面元素,分析用户特征并定义用户角色,依据用户角色的界面需求设计界面原型并不断改进完善。

3需求分析结果

3.1面向用户的分析结果

用户角色的优先等级是将不同用户的要求进行综合处理的重要参考依据。不同用户角色对界面的要求体现在界面元素的属性上,界面元素构成用户界面。界面元素的属性不同,最终的界面风格就不同。同一个系统中的不同用户角色,面对界面原型,提出的要求可能产生冲突,需求分析时依据用户角色优先级别的不同,对界面原型作出对应修改。

不同用户角色的需求在目标系统中实现方法也有不同。用户需求是否目标系统中得到体现,取决于实现用户需求所带来的成本、效益,并不是所有的用户界面需求都会体现在系统界面中。界面同用户联系紧密,在特定情况下,可以利用培训用户的方式使用户满足系统的要求。

友好的目标系统应该是同用户的理想模型接近甚至一致的,因此需求分析最终应该充分明确用户的潜在需求,并将用户需求在目标系统中实现。在需求分析过程中用户面对的始终是感性的可视化的实际运行界面,因此界面需求的结果就是满足自己要求的目标系统界面。

3.2面向设计人员

由于应用快速原型法后可以直接通过改进原型得到目标系统,而不必从头做起,所以一般可结合表格法一起进行分析,以利于形成准确的需求说明书。表格法就是将软件界面的构成元素分解为不同类别的最小单位并加以描述,按照划分后的元素单位拟定不同的设计方案,列出详细表格,用户可以按照描述说明作出自己的选择。如以下表格:

字体及大小
标题文字
小四
宋体加粗

输入框文字
五号
宋体

菜单文字
五号
宋体

命令文字
小四
宋体

帮助文字
五号
仿宋


表格的设计原则为以界面元素为基本内容,依据用户角色和系统功能进行合理分割,能够全面、准确描述界面风格。其内容可以固定为三个部分:平面设计、交互方式定义、功能模型定义。平面设计包括视觉设计、听觉设计等,通常是用户直接可以感受到的界面元素,能让用户从心理上获得舒适感、愉悦感。交互方式定义指计算机系统及软件系统同用户交流信息的方式,包括鼠标、键盘等的使用,是否有命令模式,是否有语音输出,信息显示方式等内容。功能模型定义是指根据每个用户角色要完成的一系列工作和任务,将对应系统功能按照一定的优先级建立成特定的模型,按照这种模型来来组织界面布局,方便用户完成一系列工作。实际上,大家用得很多的菜单和导航功能就同用户角色的工作系列有关。

利用表格形成文档,目的在于方便交流,并在设计人员和用户之间建立一座沟通的桥梁。

 

UI设计的成功之处

UI设计的成功之处在于设计师能够高度掌握整个界面程序与用户的关系,还要包括视觉元素和操作在内的各种元素都要统一。在完成UI设计时,我们要问自己一些基本的问题。

你的 UI 是否高度一致?

用户来到你的站点,脑子里会保持着一种思维习惯,你的 UI 需要保持一致,以免用户的思维方向被打乱。比如,如果你的某个品目下的产品可以拖放到购物车,那你站点中所有产品都应该可以这样操作。将按钮放到不同页面相似的位置,使用相契合的配色,使用一致的语法和书写习惯,同时,让你的页面拥有一致的结构。


用户能自由掌控自己的操作吗?


你应当分析一下,自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为,确保他们能从某个地点跳出,能够毫无障碍地退出。那些在用户离开前弹出窗口的行为是 UI 易用性的一个大问题。


你知道谁是你的用户群吗?


要设计有效的 UI,必须对你的用户群有所了解,不同的用户阶层对不同的设计元素有不同的理解,17~25 岁年龄段的人,和 40~55 年龄断的人有不同的喜好。你的 UI 设计必须针对你的用户群进行设计。


你是否有足够的预防错误的措施?


应该尽可能检查程序中的错误和 BUG,虽然你可以弹出一个窗口告诉用户发生了什么,但为了更好的用户体验,最好减少这些东西。Beta 测试是消减错误的最好方法。


你是否首先将最重要的东西展示给用户?


将重点放在重要的内容上面,首先为用户展示最重要的内容,以便用户更好地理解你的内容。


你的设计是否简约?


很多站点的设计十分简约,简约设计可以增强 UI 的易用性,可以让用户不必关心那些无关的信息。你的 UI 应该是这样的,它的功能很强大,但设计很简约,拥挤的界面,不管功能多么强大,都会吓跑用户。


你是否使用了视觉提示?


如果你使用了 Ajax, Flash 一类的技术,当内容在加载的时候,应当提供视觉提示,应当始终让用户知道目前在做什么。


你的 UI 是否有操作提示?


你的用户是否靠自己研究或 FAQ 文档学习如何操作?你应当在 UI 现场提供简单的操作提示,比如,使用 jQuery 在你的各个 UI 元素上显示操作提示。


你的内容是否清晰?

确保你的文本准确,清晰,易懂。


你如何使用色彩?

色彩是 UI 的重要元素,不同的颜色代表不同的情绪,你对色彩的使用应当和站点以及主题相契合。还应注意,有的用户是色盲,你应当考虑到他们的感受。色彩的使用应该一致,一旦选定了某种配色,就应该在整个站点一致使用这种配色。


你的 UI 是否大象无形?

UI Engineering 曾经说过,”最好的设计不是用来看的,是用来体验的"。这意味着,你的 UI 应该让用户去体验,而不是放一些花哨的东西给用户看。UI 设计越简单,用户体验越好,不要滥用设计元素,不要使用拥挤的界面。


你的 UI 是否有良好的结构?

你的 UI 中,各个元素应当放在他们应当放的位置,总体结构应当清晰,一致,相互关联,那些不相关的东西应当单独放置。

 

UI设计的术语描述

ui设计时使用不同的术语描述相同的事物是最让人迷惑的,而改变人人都已经熟悉的术语也是有害的。这两种情况都使得程序难以讨论、描述,以及归档。甚至使它难以编程。

界面设计中需要命名的

下面是一些需要命名的、与界面有关的典型对象:

● 程序本身;

● 程序使用的文档类型;

● 用户利用程序执行的主要操作;

● 所有的窗口、对话框和属性表;

● 主程序窗口中的使用区域;

● 认为非标准的屏幕对象、命令、属性、交互、或者技术。

简而言之,用户可以看到或需要与其进行交互的、显示在菜单、工具栏、窗口、对话框、状态栏、联机帮助或文档中的任何内容都需要有一个名称。当然,您将会使用已存在的标准屏幕对象的名称。例如,您不需要命名常用的对话框,因为它们已经拥有名称。

用用户的语言说话

使用软件面向的用户所熟悉的词语,除非您的软件是为了程序员设计的,否则应该避免使用计算机行话,而应用常用的单词代替。例如,对绝大多数用户来说,常用单词"separator"(分隔符)就比技术术语"de·imiter"(定界符)要好得多。如果必须使用技术词汇,那么应采用那些用户可能知道的术语。

 要避免的术语

也有些术语是千万不要用在您的用户界面中的。尽管"execute"执行、"ki··"(杀死)、"terminate"(结束)、"fata·"(致命的)和"abort"(中止)这样的术语在程序员文献中是完全可接受的,但完全应该避免出现在其他的文字中。

 

重在设计理念的UI设计转变

理解UI设计的真正涵意,是从最早的设计静态页面开始,到设计商业应用网站,后来开始设计电子商务网站,到网络软件,--一个做网站新手谈谈建站初期的体会---建站心得---网站制作教程网-,到windows/JAVA 软件。开始时也是比较喜欢亮丽的色彩和和很眩的界面,时间长了设计理念也有了很大的改变。

  网上很多朋友把自己的精品力作拿出来供大家拍砖,心里就一直纳闷,UI 设计怎么能用静态的图像来表现呢?真正UI设计的好坏,用flash制作网站 --刚注册的域名做网站半个月PR涨到4经验---建站心得---网站制作教程,必须要设定一个任务,从头至尾使用一遍才能知道。 UI的概念是动态的过程,是逻辑的推理,也是各种状况的预测。

  当我每接受一个项目的时候,大概要花30%的时间搜集整理和分析用户的需求,40%的时间在黑板和白纸上钩画任务的流程,20%的时间完成界面视觉设计,10%的时间跟用户作易用性测试。

  即使20%的视觉设计也是非常工业化和标准化,flash网站制作,在颜色处理和Layout上遵循windows和JAVA 的惯例。其实仔细想想这种要求是很合理的。无论你设计的产品是什么,最终目的是盈利,制作flash的网站 --谈谈一个新手站长做网站的曲折经历,而盈利就要满足客户的需求,客户需要就是用产品完成某个任务,而不是欣赏那种酷酷的设计感觉。

  了解了这些我们就可以在设计过程中合理的分配自己的时间,当然并不是说视觉并不重要,而是有先后之分。现有易用的界面,在仔细推敲如何使它更加美感。在这里我并不认为平面设计或图标设计算是真正的UI设计范畴。UI的概念是提供一个界面供人类和非人类的程序代码互动交流。想一想你们的音响系统,想一想你们的手机,想一想你们汽车的控制表盘,flash网站模板下载。最后谈一谈UI设计师的工作重点。我有一大部份时间是跟程序师,市场部和终端用户打交道。我设计的产品最终要通过程序师去实现,所以了解程序师的工作习惯,flash网站模板欣赏,有一点程序的概念,和良好的沟通技巧是非常重要的。   同时,作为UI设计师要有很强的理解能力。如果你设计的是QQ 或媒体播放器,可能并不需要花太多的力气了解产品的功能,但如果你设计的产品用户是企业而非个人,那就要努力了。  自从Visual Basic 的始祖Alan Cooper站出来为UI大声疾呼,UI设计师毕生的时间都在向工程部门证明自己的存在是必需而不是奢侈。

 


Page 1 of 7
  服务地区:上海 江苏 浙江 安徽 山东 福建 广东 江西 杭州 苏州 北京 深圳 广州 天津 大连 无锡 香港 台湾 新加坡 日本 美国 英国 法国 德国 意大利  
 
导航: 多媒体设计开发   软件界面设计   手机界面设计   网站设计   图标设计   VI设计   角色及短片设计