2007年04月06日

如果页面数据是动态生成的,而实现又不知道页面的长度,那么就可以用以下方法来进行强制分页(打印时!!~) 在需要进行分页处输入如下代码:
<DIV style="PAGE-BREAK-AFTER: always"></DIV>

2007年04月03日

作者:小雷 时间: 2004-09-04 文档类型:原创 来自:蓝色理想

美工LOGO设计秘密武器

  说到美工LOGO设计,也许你马上会想到 Photoshop , Coreldraw , Illustrator , Flash 等工具软件,没错,正是因为有它们的存在才让我们将一个又一个的梦想变成现实。有关它们的教学与原理因特网上比比皆是,这里我们就不累述了。现在我们想告诉大家的是其他一些秘密武器:比例;对照;复制;还有精微调整!

  其实把它们当作"武器"抑或是"工具"都是不恰当的,因为它们主要规定了作品的性质,而不是我们熟悉的传统意义上的"软件","平台"的概念。但在实际创作中它们是如此的重要,以致于在日常的工作中,我们常常把它们从传统的创作过程中分离出来并亲昵地称之为"武器"。

  下面我们就这四个问题谈一谈自己的看法。由于篇幅有限我们不可能讲得面面俱到,而且为了便于你对它们的掌握,我们主要用例子,针对一些我们认为平时可能被遗忘或一些错误的认识来阐述我们的观点。

  一、比例:

  1、原理:

  在《牛津现代高级英汉双解词典》中是如此对"比例"定义的:一物与他物在量,大小等方面的比率;部分与整体的关系。而在设计领域我们将这个概念缩小成部件在尺寸或长度上的彼此关系。

  "比例"最重要的原则是遵循客观规律,文字比例要使得其易读,形体比例要使得它不会变形而且特色突出。然而,在这种"自然"的客观规律间还有着大量的细微调整,它们虽然不易察觉却直接影响到设计的最终效果。因此我们不要吝啬时间去调整它们以达到最佳的比例。

  早在希腊与文艺复兴时代的建筑家就开始找寻一个"理想的"比例规则,其中最出名的就是图一所示的"黄金分割"。

图一

  随着现代人审美观念的改变,纯数字的"黄金"比例已不再是放之四海皆行得通的标准;而且现代电脑技术的发达,使得我们可以轻易设计出复杂异常的形体与颜色,它们的交互影响又直接影响到物体比例的感观。因此对于比例的考虑,我们将注意力更多地放在外形,可见性与突出性上面。

  2、示例:

  下面我们将以一个例子来解说如何找到它最佳的比例分割,如图二:

图二

  一个粗略的形体与两个字母如何达到最佳的比例安排呢?很明显,A图中字母与形体的距离太远,造成了整体的断离,因此我们将它们进行缩排,并将字体放大如图B;然后我们再对比一下图D,你会发现有什么不同?图D中的字体是以整个形体的高度作为字高,而图B则是以形体内部的正方形的高度为字高的,图C用红色导线指明了这一点。那么到底是图B还是图D更适合一些呢?

  要注意到,形体与字体都是比较复杂的,形体包含了两个三角形与一个正方形,字体包含两个字同时字体相交,因此如何保持它的协调性就成为关键。图D很明显破坏了整体的协调性,应该进行修改。

  在日常制作中,我们常常采取"内核外壳"的方式解决这类问题。所谓"内核外壳",就是将形体细分成内核与外壳两部分,以内核为标准对其他部分进行协调。这样做是有一定科学道理的,"内核"与"外壳"只是我们人为细分出来的,它们实际上是作为一个协调的整体存在,以此类推,以同一个协调的整体的内核为标准的其他部件也就取得了平衡性。

  运用到图二上,我们将形体细分成内核(正方形)与外壳(三角形),然后以正方形的高度作为字体的高度,最后如图B。图C中红色导线勾勒出的范围就是内核(正方形)的高度,我们看到,这样的比例安排,既做到了LOGO的美观,醒目,同时还保持了高度的协调性。

  这个例子告诉我们找到比例分割的通用法则,那就是:只要有可能,无论什么时候我们都要找到作品中各个元素的相互关系,尽管它有时并不明显;如果能将两个完全不相称的元素安全地变换成一个固定的比例,如一样大或者成倍数关系,那就值得去试试;你可以在脑袋中给作为标准比例的元素添加一根导线,然后将其他元素尽量向这根导线靠拢。事实上,这是一个非常有用的办法,以至于许多专业设计师认为"天地间万事万物都有一根线",因此它们看许多物体就是以那根不存在的"线"为起点的。

  在我们的日常设计中,决定比例规则的工作常常分成两部分:先是尽可能全面地查找作品内部的所有元素;然后找出它们之间的关系并为它们定身制作比例标准。前一个工作往往让我们忘了这样做是为了定制它们的比例标准的目的,只是想尽可能多地找出一些自己感兴趣的东西;而后一个工作往往是我们将手中的任务扔在那里一两天后重新拿起来,脑袋中有了新的想法后才能完成的。

二、对比:

  1、原理:

  比例常常针对着尺寸大小,而对比则可以针对于万事万物,颜色,大小,形状,字体,纹理,等等,没有一件事物不具备对比性。只要你静下心来认真进行比较,你将会惊奇地发现那些外表相似的物体竟然还有如此丰富的对比因素。

  一开始你也许会只是简单地将它们进行对立看待,但实际上所有的对立显示了不同程度的连续性,而正是这对立程度的选择,往往是区别一位设计高手与业余设计者的标准!对比,突出的并不是组件本身,而是组件彼此的关系与它们要传达的交互信息。

  2、示例:

  我们应该如何看待对比?如图三,你可能会告诉我:它们的颜色是对立的,一个是黑色,一个是白色,而其他是相似的。没错,但你的想法太过简单,而这种简单,对我们的实际创作是毫无意义的。

图三

  首先我们要做的是改变对比的对立性,不要把它们当作矛盾的对立体,并且想方设法让对立显得不太尖锐。而通常比较有效的作法是先找出或创建出更多的对立点,然后再力图找到它们之间的对应关系。对应关系的重要性,可以用沟通的桥梁来形容,一旦缺少了对应关系的联系,对立因素就成为彼此不相干的单独的物件,也就真正失去了对比的意义。

  这样说比较抽象,我们就用图三的两个物体来阐述我们的对比经验。

  首先我们通过增添对立因素来分散对立概念:为图三增加尺寸对比,如图四:

图四

  图四看起来效果稍好一点,但还是有着粗糙的人为印象在里面,下面我们通过位置对比进一步分散对立概念,如图五:

图五

  现在又多了一项对比因素:位置,黑色方块在里面,白色方块在外部。图片经过分散锐化而变得有趣多了。

  最后我们再将黑色方块变成圆形,然后在形体下加上公司的名称,一个简单的LOGO就完成了。如图六:

图六

  下面我们再举一个例子进一步地阐述观点:

图七

  图七中的对立因素的连接点在"RWC"三个用于表达中心意思的字上;而对比因素就很多了:背景层尺寸更大,并有虚化效果;前景层小一些,色泽更暗;背景层用小写字体而前景层使用大写字体;背景层中的"W"是处于升格而前景层中的"W"处于降格;字体色彩不一致;等等。正是由于多种对立面的分散锐化,使整个LOGO从矛盾中显得异常协调!

  将对比概念应用到我们在《美工LOGO设计思路》中谈到的具体操作中,可以这样认为:

  1、形体的对比,包括大对小,水平对垂直,方形对圆形,等等。

  2、色彩的对比,包括色相,饱和度与亮度的对比,等等。

  3、字体对比,包括字型,大小写,尺寸等的对比。由于字体发展不平行的特性,使得我们很难在同一个LOGO中应用两种完全不同风格的字型,因此常常在大小写方面做文章,如图八:

图八

  4、收尾工作对比,事实上这方面的对比操作很少,因为它是在所有元素合理放置并定形后才进行的操作,如果再改变对比属性事必造成前期所有工作的重新修订。

 

三、复制:

  1、原理:

  跟对比强调组件的联系一样,复制并不是旨在突出组件的鲜明,而是用以强调一种发展趋向,一种变化顺序。这也从另外一个意义上暗示我们:复制物件最好按照一种线性流程进行定位,或者是直线,或者是曲线,或者是一种较为复杂的交互线程。

  2、示例:

图九

  图九中三个多边形按照圆环曲线定位,重在表现一种对称性。

图十

  图十又给我们指明了另一种定位规则:一般地,重复组件用于表达一定的发展趋向,而且每个组件又有自己比较鲜明的特点(如图十中,每个组件都有其独特的颜色),用上面的对称或圆环曲线定位难于传送合适的趋向意识。因此我们采取简单的直线线程定位方式。

  至于多少个重复组件才能更好地表达我们的意图呢?两个重复组件重在表达一种对称,要表达一种线程或趋向信息,至少需要三个重复组件。三个重复组件的数目采取方式是现在最为流行的方式。另外还有一种比较可行的方式,就是根据LOGO中文字数目的多少决定重复组件的数目,但这种方式并不适合文字较多的LOGO。

  四、精微调整:

  1、原理:

  比例,对比,复制三个工具如果使用得当,我们就可以制作出精美的作品。而专业设计师与新手或业余爱好者的区别,更重要地体现在后期的精微调整上。一个缺少精微调整的形体,初看也许不错,但它的魅力却不能长久,一旦我们多看几眼它就显得平常而繁琐了。而经过精微调整的作品却是另外一种结果,它温暖,恬静,优雅,人性化,我们的眼睛早就忙于去找寻它的奥妙而暇顾及其他:嗯,这组线条是平行的;这种颜色与那种颜色一样;这两组相交线条的交点正是那个圆的圆心;这组字母是以那个形体的底线为标尺的;等等。。。。。。所有这些都是我们下意识的行为方式,可能你自己都没察觉到,不过正是这些下意识就决定了我们对一个LOGO的好坏做出美丑的评定。

  精微调整是一件非常耗时的工作,也没有任何的调整标准。比较可行的办法是:在输出最终结果前多问自己几个为什么,为什么要用这种方式表达出我们的意图?为什么采用这种尺寸,角度,位置?是否还有改善的必要?要记住,如果我们马虎对待我们的作品,它们同样也会马虎对待我们的眼睛!

  2、示例:

图十一

  图十一中有两个精细环节值得提醒:一是斜体字的角度与最下层的深色正方形角度一致,而其他元素都包含在这两个元素之间,增加了这个LOGO的联系与整体性;第二个值得注意的是横竖两根线条并不是一样长的,如果你用尺子量一下你将会发现竖线条比横线条稍短一些。为什么要这样做?这是因为两个文字按横线对比排列,犹如"绑定"在横线上而成为横线的一部分,横线由于增加了重量感而减短了长度感。为了跟它配合,因此只有竖线的长度稍稍小于横线的长度才能真正达到平衡。

  五、总结:

  作为不是总结的总结,我在这里说点题外话:真正要在LOGO设计中取得成功,不是一朝一夕的事,更不是一篇两篇文章就行了。只有当我们把创作当做真正的乐趣,把创作过程当做快乐的灵感之源,才能让我们的观众真正接受并喜欢我们的作品。

 

美工LOGO设计进阶

  LOGO设计往往是非常复杂的,空间感,色彩的调整,各个元素的协调,等等,其工作量丝毫不亚于传统设计,而且只有真正掌握了矛盾与协调的统一性,我们才有资格说到设计,才有资格说登堂入室。与其他艺术设计一样,LOGO设计也是一个不断学习与进步的过程,昨天我们认为是真理的东西,今天不一定就能接受;昨天我们肯定的东西,今天可能会将其完完全全地推翻。所谓的"进阶",就是一个不断破与立的过程。

  下图左边是我们在第一章中完成的LOGO,右边是最新完成的LOGO。它们有什么变化?哪一个更好?后面我们将进行详细说明,力图在这个例子的解说中说明:除了不断地尝试与思考,设计进阶没有其他更好的办法!因此我们本文所要谈到的"进阶",不过是套用了一种比较时髦的说法,重点是通过例子让大家掌握思考的脉络与方法。

图一

  一、相同点:

  1、3D趋向:

  原图由带3D时空指向的形体与带阴影投射的公司字样组成,较为复杂的形体用多个层次表现出一种运动趋向。新图用简单的层次关系表现出这种带趋向的3D属性。

  2、不对称:

  在两个LOGO中的四方形绕交点呈反时针旋转体现出阴影投射的效果。不过前者多出一个中间变化的过渡(即第二个方形),后者是直接进行投射。

  3、完备的元素组件:

  都由形体与字体组合而成,表达了完整的LOGO概念。

 二、不同点:

  与其说是不同点的对比,不如说是复杂与简化性的对比。事实上,简化性是设计中非常重要的一环,著名的雕刻家Auguste Rodin 曾经把自己的创作比喻成"将所有的素材集中到一块然后去掉所有非基本的元素"。但在实际的创作中,这个"非基本"的标准却很难把握。

  1、平衡与非对称性的矛盾:

  原图中的形体是由三个不同角度的方形构成,传达的是一种运动趋向,多了一个中间过渡;新图只用了两个方形,去掉了运动趋向而采用直接的阴影投射。乍看新图显得很普通,太过简单,但首先它就多了"简单"这个特性!其次它是在去除原图的矛盾后制作出来的:我们已说过,原图表达的是一种运动趋向,而为了表达这种趋向,所有部件必须遵循合谐平衡对称的原则,换句话说,它与原图的非对称性自相矛盾!

  说实话,在创作的最初,这种非对称性是我们比较得意的一点,但在今天看来,它的处理殊为不当。这也总结出一个经验:如果我们的创作中包含由简单的方形或圆形组成的形体,那我们在处理它时得非常小心,特别是有变形过程的方形或圆形!如果有一个元素经过变形处理,那么你得给大家留下一个所有元素都有变形效果的印象(也许其他部件并没有真正变形,只是由于不同角度的光线的投射造成的结果)。

  2、形体与文本:

  在原图的制作过程中我们已感觉到"头重脚轻"的缺陷,采用的解决办法是用阴影投射增强底部的厚实与重量感,但效果并不是很理想;另外,文本与形体的联系,过去我们采用的是"i"字母上的小圆球,好看是好看了,但有一个问题:这个字母不再象文字的一部分,而是凭空"悬"在那里的。

  基于以上的原因,很自然地将新图改成最后拍版的样式,如图二。重点在于去除了"悬"的感觉,并增强了文本的醒目与可读性。

图二

  3、颜色:

  原图我们实际采用了两种色相,黑色与蓝色,中间过渡与阴影由同种色相的不同亮度构成。应该说这种逻辑方式还是很不错的,但有一个问题:对于LOGO设计来说过于复杂!因此在最后的图样中我们取消了中间过渡,并将主色改为较为鲜艳的亮绿色,用以表达一种活力与创新,同时进一步强化了与投影的黑色的不对称性。

  三、总结:

  正如前面我们所谈到的,创作是个抽象的过程,最后决定我们作品质量的是我们的美学与文化修养,以及我们的工作态度,因此要在LOGO设计中得心应手,不断地创作出神来之笔,非一日之寒就能成功的。另外很重要的一点就是善于思考,让自己能在立与破间不断前行,而这些,才是真正的"进阶"之道。

作者:小雷 时间: 2004-09-04 文档类型:原创 来自:蓝色理想

美工LOGO设计思路

  在我们的站点设计中,LOGO常常作为公司或站点的标识出现,起着非常重要的作用。一个制作精良的LOGO,不仅可以很好地树立公司形象,还可以传达丰富的产品信息。在我们有限的调查中我们发现,一个网站首页美观与否往往是初次来访的用户决定是否进行深入浏览的标准,而LOGO作为首先印入访问者眼帘的具体形象,其重要性可见一斑!

  说到设计,我们就不得不谈一下LOGO的传统设计:LOGO传统设计,重在传达一定的形象与信息,真正吸引我们目光的,不是LOGO标志,而是其背后的图象信息。举个例子,一本时尚杂志的封面,相信你首先注意到的是其上漂亮的女士或得体的服装,如果你感兴趣才会进一步去了解相关的其他信息。网站LOGO的设计,跟传统设计有着很多的相通性,但由于网络本身的限制以及浏览习惯的不同,它还带有许多与之相异的特点。比如网站LOGO一般要求简单醒目,在少量的方寸之地,除了表达出一定的形象与信息外,还得兼顾美观与协调。因此,一位优秀的传统设计大师,不一定胜任网站设计;而一位网站美术设计大师,也许只是传统设计中的菜鸟……

  其实,就在我们大谈LOGO设计的时候,感到文字的苍白无力,因为在我们的实际制作之中,很多东西都是难于用语言表达出来的,有时候是种灵感,有时候是种仿效,而更多的时候是通过繁琐的工作与多次的尝试完成的。在实际的设计中没有你非得做什么的限制,更没有放之四海皆准的真理,但也有一些比较普遍存在的问题值得注意,而本文就将围绕这些问题剖析我们的LOGO设计思路。

  为了让大家清楚明白地掌握我们的意图,我们将用一个LOGO的实际制作过程进行阐述。

  一、形体:

  1、原理:

  我们周围的世界首先是一个形体的世界,即使缺少了颜色,光亮,质地等元素,大多数物体还是可以凭其形体辩认出来。因此,我们把它作为我们LOGO设计的第一步。

  通常地,当我们开始进行LOGO设计时都会有一些由真实形体引发的线索:农产品公司可能会在它们的LOGO中放置农作物形体;出版社也许会在LOGO中放置书本形体;电脑公司也许会在其LOGO中放置电脑形体,等等。但在创作过程中少有直接了当进行放置的,艺术创作常常将自然形体与幻想设计集中在一块,LOGO创作则往往通过技术提取与朴素制作来完成。

  所谓"技术提取",就是在LOGO设计中,把实际形体与网站内容相结合,用会意体现内容,用轮廓体现形体。而"朴素制作",则是摒弃不相关的元素信息,力图用最简单的方式表达最丰富的内涵。一个好的LOGO,可以让访问者清楚地知道它的制作原理,但与此同时又能让他感到很难做出同样的效果。如图一,我们可以清楚地看到它是由字母与线条制成,但如何实现它却需要一些精细的工作,如层的运用,字体的镂空,等等。

图一

  2、制作:

  当我们环顾四周时,我们的世界充满了形形色色的物体,但当我们仔细观察后会发现,不论它们的形式有多么复杂,结构多么繁琐,最终我们都可将其归结为一些基本的几何形体。就是这些基本的几何形体,如果处理得当,可以表达出丰富的内容与新意。如果你已有了LOGO的形体概念,那么就可以用这些基本的几何形体去实现它;如果还没有,不妨随意制作一些形体然后通过一定的组织与逻辑进行LOGO制作。

  下面我就用最简单的长方形为例开始制作一个公司的LOGO:

  先制作两个长方形,然后进行移动,缩放,旋转操作,最终结果如图二:

图二

  图二仅仅是两个长方形,没有任何指向信息与空间概念,下面我们为其赋予3D时空与指向概念。如图三:

图三

  图三缺少具体的形体概念,我们可以通过添加(复制)合适的长方形做到这一点。如图四,是不是有一点信笺书轧的味道?

图四

  一个好的形体,还得遵循客观的逻辑定理,一个叛经背道的作品很难真正让人相信并接受。接下来我们给做好的形体加上重力作用,如图五:

图五

  图五的形体给人一个下坠的感觉,现在我们让它停止下坠,这样,形体制作完成。如图六:

图六

 二、颜色:

  1、原理:

  网页的特殊性质为我们的LOGO颜色选择添加了诸如安全色等诸多限制,而其中最重要的是尽量使用最少的颜色。一方面减小图象尺寸,另一方面以免给人过于花哨的感觉。我们应该做到"惜色如金",在进行每一种颜色的选择时都问问自己,是否有选择这个颜色的必要?这种颜色是要传达一种什么信息?

  当然,这种最小原则并不是处处实用,如图七,但我们得注意,它是以不切断色泽平衡为基础的。

图七

  在我们的创作中,LOGO用色同样要遵循客观现实,比如一本书的封面与内页,我们不能填充同样的颜色,即使同样的颜色,也得在饱和度或亮度上加以区分。LOGO用色可以虚拟,但不能背离。

  2、制作:

  继续我们的公司的LOGO制作:

  在这个LOGO中,三个不同角度的方块我们将其当作一个物体的运动过程,根据经验,我们给它们赋予阴影状颜色。如图八:

图八

  好了,现在我们的图标变得具体与有趣了,下面我们给它添加字体。

 三、字体:

  1、原理:

  在实际的设计中,字体的设计往往放在最开始,因为在网络带宽的限制下,不可能用大量的其他图象信息来表达我们的意图,这时我们的字体就得担负更为重要的使命。它常常决定了整个LOGO的风格与形态,因此我们的习惯就是将它放在形体选择前进行制作。

  字体作为设计中非常重要的一环,我们却只是在偶然的场合中提到,这不是因为我们不知道它的重要性,而是因为要谈清楚它是一件非常复杂的事。对于一种字体,我们不仅要了解其历史,还得弄清楚它的应用场合。哪一种字体具有古典风范,哪一种字体比较新颖,哪一种字体在这种场合中更便于阅读,都是专业级的设计师应该考虑到的。

  真正谈起字体的历史,恐怕得追溯到古埃及的象形文字,不过我们不是考古学家,对于那些古老的语言我们只需领会其"象形"就行了。现在我们把字体的范围限制在日常工作中经常用到的字体的圈子里,以免把话题扯得太远了。

  现代史上出现最早的字体应该是在15世纪,在此之前最为流行的字体被称为"blackletter"字体,又叫作"Old English"字体,如图九:

图九

  这种古怪的字体非常复杂,书写与辩认都很不容易,而更为严重的是,它与当时文艺复兴运动提倡的希腊罗马人文主义文化相背离。于是在第一次文艺复兴时期就出现了名为"Antiqua"的字体。它在继承了古希腊与古罗马的字体风格的基础上,增添了大写字母的书写。而正是这种字体,成为了"blackletter"后所有字体的鼻祖。因此也有人把它称作"Old Style"或"Humanist Antiqua"字体。具有讽刺意义的是,这种被称作"老式"的字体却在今天大行其道,无论是Garamond, Minion, 还是Jenson字体,都因为其光亮,整洁,漂亮的轮廓外观与人性化风格而成为今天设计之中的流行字体。另外,这种字体所特有的斜性笔压更增添了其个性化,给人一种手绘的感觉。如图十:

图十

  二十世纪中叶是复兴字体最为盛行的时期,而一种新的字体——"Sans Serif"字体逐渐显示出其强大的生命力。最初它只是少量应用于装饰流程中,随着"Futura"字体严谨,实用,结构化风格逐渐被世人所接受而大量应用到其他作业中。如图十一:

图十一

  减少润饰,更为严谨实用的风格,使其成为仅仅以显示为目的的媒体字体。

  由于两大类字体并不是平行发展的,因此在我们的实际制作中很少会有两种字体混用的情况。一方面会破坏风格的协调,另一方面会使得字体过于复杂。但也有例外,如一个单词中,我们常常为一个或几个字母定制一种不同的字体以使其更为醒目,而其他字母则采用另外一种字体用以完成整个字母的表意。如图十二中的LOGO,一种是更为人性化的Garamond字体,一种是非常严谨的Frutiger字体,却由于没有空间断层的概念而协同配合得很好。

图十二

  LOGO制作中,字体的选择起着相当重要的作用,但选择的标准却是没有定式的,除了告诉你诸如"serif"字体具有古典风味,便于阅读的特点,"sans serif"字体更趋于现代风味等没有用的建议外,我们也没有更多的建议。对于一个LOGO,我们永远不知道倒底哪种字体才是最贴切的,我们唯一可做的,就是不断地尝试,直到找到让我们自己满意的字体。在制作初期这种繁琐的工作可能让你极为不耐,但当你熬过一段时间,你将会发现,无论你的艺术品味还是对事物的观察力都提高了!因此,它是值得的!

  再谈一下字体大小写的问题。一般地,无论是我们的字体还是图象都得保持风格的一致性,因此在字体大小写的选择上也要遵循这个原则。选择大写主要是取其整齐,选择小写主要是图其起伏,千万不要大小写混用!因为大小写的字体,无论是宽度还是高度,以及整个字体风格都会变得格格不入。

  最后谈一下字体放置的问题。字体放置在哪里没有定式,但必须遵循彼此不干扰的原则。图上套字不是个好主意,它本来常常用在脱离不了纸张载体的传统设计中,由于受到它们的启发,现在很多网页LOGO设计也采用这种图上套字的憋脚方式。比较科学的字体放置方式是将其放在紧贴形体的下面,其次,右置式也是不错的主意。

  2、制作:

  在形体的下方我选择了"Times"字体并输入"company inc"字样,全部采用小写,重在图出字样的起伏。如图十三:

图十三

 四、收尾工作:

  1、原理:

  当我们完成LOGO元素的设计与放置后就可以进入收尾工作了,包括诸如纹理,阴影,高光,渐变,透明,渲染等在内的操作。收尾工作往往使我们的LOGO看起来更为专业。

  收尾工作我们常常通过诸如Photoshop之类的图象处理软件完成,这方面的技巧很多,我们就不去讨论了。

  2、制作:

  前面我们讲到字体与图象的互不干扰,但我们又不能让其失去整体概念,因此为我们的字体与图象找到一个完美的结合点是不错的主意。

  在我们实际制作经验中,"i"这个字母实在令人感到亲睐。上部的点可以跟任何图象承上启下,整个字母又可以跟无论是大写还是小写的其他字母相匹配。这里我们也用它作为LOGO承上启下的标记。去掉上部的点,并将其做成圆球状。如图十四:

图十四

  在图十中我们可以看到,上部的形体占据了大部分空间,有点"头重脚轻"的感觉。现在我们为字体加上阴影,力求整个LOGO的平衡性。阴影不一定要用黑色,这应该与我们整个的LOGO信息一致。如图十五,我们的LOGO制作完毕。

图十五

  五、总结:

  无论是网页设计还是传统设计,规则是死的,思想才是最活跃而真切的,真正决定了我们最终成果的是我们自己的文化与美学修养。上面我们做了一个LOGO,旨在让大家领悟一些抽象的制作概念,而不是什么必须遵循的规则。记住那句话,"当一切都被遗忘的时候,你会发现一个新世界"!

2007年03月01日

a) 直接在HTML元素标记中写入: onmousedown="divBlock_event_mousedown();"
b) 将事件函数的句柄赋值给相应的事件:document.onmousemove=document_event_mousemove; (注意赋值的函数名后面并没有括号
c) 使用 attachEvent 方法(对于FF类的浏览器来说是 addEventListener)

2006年10月22日
通用界面指南  

一:遵循一致的准则,确立标准并遵循
无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。
这样得到的好处:

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解

2:降低培训、支持成本,支持人员不会行费力逐个指导。

3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

做法:

项目组有经验人士,确立UI规范:

·美工提供色调配色方案,提供整体配色表

·界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范:

控件功能遵循行业标准,windows平台参见《Microsoft 用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。

根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的

·界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。

·建立合理化文档《UI标准》描述上述规范,

·强行界面设计者理解之,并作为开发准则,

·SQA人员进行监控开发人员是否遵循,及时告诫开发人员。

二:(Color)颜色使用恰当,遵循对比原则:
1:统一色调,针对软件类型以及用户工作环境选择恰当色调:

如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等

2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表

3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,?quot;!,?着重号,以及图标等

4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试

5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。 6:整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。 色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

三:(Resource)资源
一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准

2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格

3:底图应该融于底图,使用浅色, 低对比,尽量少的使用颜色。

4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。

5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。

如:《如何创建XP图标》http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp

附件:Itop outlook howto.doc 描述itop项目中,outlookxp风格图标的制作方法

四:(Font)字体
使用统一字体,字体标准的选择依据操作系统类型决定。

中文采用标准字体,“宋体”,英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来,例如 MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况

ITop采用BCB,所有控件默认使用 parent font,不允许修改,这样有利于统一调整。

·系统大小字体属性改变的处理。

Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题。

这个情况下,应该做相应处理:

1:写程序自动调节大小,点阵值乘以一个相应比例

2:全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。

五:(Text)文字表达
提示信息、帮助文档文字表达遵循以下准则:

1:口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字

2:断句逗号句号顿号分号的用法, 提示信息比较多的话,应该分段,

3:警告、信息、错误 使用对应的表示方法

4:使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

5: 根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为儿童:这可以语气亲切和蔼,老年用户则应该成熟稳重。制定标准遵循之。

六:(STYLE)控件风格,不要使用错误控件,控件功能要专一
有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章

 

·不要错误使用控件,例如:

使用Button样式做TTable的功能,拿主菜单条显示版权信息,

·统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映

 

·一个控件只做单一功能,不复用

很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这些对用户初次理解增加难度,只有用户熟悉后才能理解。 例如

改变红色选项,左边的参数代表不同的设置,可能由于为了节省控件或者编程量,但是只有熟练用户才回使用,这种情况下解决方法:

1:分组,使用双份控件.

 

2:使用TABLE页,给用户很明显的视觉变化

 

 

七:(ALIGN)控件布局,窗口不拥挤,按功能组合控件
1:屏幕不能拥挤

拥挤的屏幕让人难以理解,因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。

让人看上去,不能太拥挤,也不能太松散。

整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。

2:区域排列

一行控件,纵向中对齐, 控件间距基本保持一致

行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。

当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。

3:数据对齐要适当

说明文字,中文版应使用中文全角冒号,纵向对齐时,并按冒号右对其,如图。 纵向控件宽度尽量保持相通。并左对齐。

例如金额等字符穿应根据小数点对齐,或者右对齐

 

4:有效组合

逻辑上相关联的控件应当加以组合,以表示其关联性,反之,任何不想光的项目应当风格开,在项目集合间,用间隔对其进行分组,或者使用方框划分各自区域。

例如: 以下界面,选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围,和入帐方式无关,

则应该修改为: 搜索方式和入帐方式调换位置。以免用户产生误解。

 

5:窗口缩放时,控件位置、布局:

为了使界面不出现跑版或者难看的局面,解决方法:

1:固定窗口大小,不允许改变尺寸,
2:改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。

BCB/DELPHI的VCL中,大部分控件有布局属性:

某些控件拥有alignment属性,可以用来做布局调节:TcustomPanel,Tmemo等,考左靠右靠上靠下以及撑满(Client)属性,用来根据版面自动调节。

大部分控件有属性Anchors,里面上下左右akLeft, akTop等如果为true,则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

 

八:(TAB ORDER)TAB顺序
习惯用法,阅读顺序,从从左到右,从上到下

窗体中控件的Tab按键激活顺序,TabOrder,. BCB/DELPHI中使用窗体设计右键菜单选择taborder设置,VC中窗体RES编辑区域使用ctrl+D

 

九:(ShortcutKey & Accelerator& PopMenu)快捷键、加速键和弹出菜单
·快捷键:

1:全局快捷键菜单中加以描述 CTRL+XXX 并入帮助列表。

2:快捷键写入帮助,特殊说明,并在使用培训时强调使用

·加速键:

1:使用非破坏性缺省按钮,回车、ESC键的正确使用 一个窗体,有默认加速键,如回车表示激活当前窗口设置为default的按钮动作,esc表示关闭窗口。

在调用default按钮动作和关闭动作时候,不应该做有破坏性的操作,避免用户错误操作产生危害程度,例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时,应该屏蔽esc,或者做退出提示,告诫用户是否保存提交。

2:可接收动作控件必须拥有加速键,统一加速键描述(&A)

为结合键盘使用,可操作控件都应该有加速键,加速键定义准则,为英文单词第一个字母,如果同一窗体重复则用第二个字母,以此类推,则加速方式为alt+这个加速键,用统一的方法标识在界面中,如XXX(A) 或者wps的 A.XXX 英文可直接在字母下标识下划线 Cancel,

对于无法像button一样显示快捷键的Edit等控件,则在Edit描述的Label中显示快捷键。

·弹出菜单

辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户,所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十:(ACTION)用户交互
1:disable而不是not visible

要使一个功能有时允许有时不允许用户使用,则这个控件的不能随便隐藏,应该使用disable属性进行表示,以免用户发现控件失踪后措手无策

2:窗口弹出位置要明显

点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。

3:执行动作要提示

给用户一个视觉感受的同时,写程序的时候应该注意用户的交互感受,UI作为人机对话的工具,用户做了任何动作,应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显,但不应提示过长,可以有以下几种方法:

当用户点击按钮等动作进行一个工作时:

1:弹出交互对话框让用户点击确认。

2:改变UI中控件参数提示:(处理不用用户确认的提示,有一定延时,或者用户按键后自动清除。)

如:改变标题栏字符串,显示“信息:提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。

 

3:听觉提示:

在确定有声卡,用户可以听到声音的时候,发出特殊声音提示。一般作为重要提示的辅助。声音不应过长,紧急错误提示应该短促,频率较高,成功提示应该舒缓,轻松。等等……

 

十一:(HELP)联机帮助:
什么时候要帮助,什么时候不要帮助

1:系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述 2:特殊操作、特殊功能界面,在界面上加控件直接连接到对应的HELP文件中

3:特殊设置详细,应该在界面上用简洁明了的语句说明,或者是好用Tiptool,并由第二步帮助

帮助文档:

结构化,按功能模块划分

必须阐述功能通过什么方法可以在软件中实现

帮助文件是帮助用户更好的使用软件,措辞要恰当、简捷、通俗易懂,每一句话都应该有目的,帮用户解决问题

帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持,网址连接、信箱地址、电话号码绝对不允许无效。

十二:发行时阐明规则
对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表

 

 

 

 

附录:
美工何时参与进来:

美工作为界面美化的主要人员,不但拥有艺术设计、包装设计的才能,还应该穿插整个项目,给界面程序设计人员提出系统参考意见。

1:软件设计前期,美工参与需求了解,分析同类软件界面有缺点,提出主色调、典型界面风格、以及构思整个美术包装等。

2:界面原型设计过程中,与开发人员共同修改、商榷最终表现样式,以及确立UI标准。

3:程序开发过程中,提供标准风格的资源文件(icon,cur,bmp等),并总结出统一风格的资源的设计过程,形成规范文档* .

4:产品化方面,协助制作帮助文件、网站风格以及参与制作,制作附带宣传图片、动画、产品包装、海报等。

□ 作者:Bruce   2003-1-7 11:00:07

转自:http://www.lanxuan.com/ui/view_ui.asp?id=83

界面设计技巧  

    最好的程序界面就是用户无需去阅读*作手册就知道该如何使用的界面。 

原则 

1.一致性 
   如果你可以在一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。 

2.设置标准并遵循它 
   可以参数一些工业标准,如IBM的界面设计规范或MS的设计规则,它提供了90%你所需要的规范。 

3.设置向导 
   如果用户使用了一个功能后,不知道如何做下一个,他们就会放弃。如果*作流程和手工工作流程一致,用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。 

4.提示信息必须恰当且规范 
   提示信息必须容易理解并且口径统一,比如“您输入了错误的数据”、“用户编码不能超过8位”。一致的措词,提示信息还应该出现在一致的位置,如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一,比如有时提示“用户输入了错误的数据”,有时提示“您输入了错误的数据”,有时又提示“纳税人输入了错误的数据”,这样会使用户无所适从。 

5.借鉴好的程序 
   多了解同类软件的界面,并加以分析与了解,直到能够区别好的用户界面与差的用户界面。但不能够机械的模仿别人的界面。 

6.功能的统一 
   有一些很常用的功能,如添加、修改、删除、查看,同一个软件中,这些功能应该有相同的*作方法。举个例子,几乎我们所有的程序中都有*作员管理这一块功能,但没有一个功能最完善统一的模块可供调用,结果虽然程序员间相互复制这个模块,但经过修改后,每个程序的*作管理都不相同。 

7.变灰的功能 
   有时有些功能不可用,最好不要删除这些按钮若项目,而是使他们变灰为不可用状态,这样有助于用户理解整个程序的功能。 

8.默认按钮 
   使用不具有破坏功能的默认按钮,在每个窗口中,为了方便用户,一般都定义了一个默认按钮,当用户敲回车键时可以快速执行某功能,但有时用户会不小心按错回车键,这时候执行了默认功能后,不能产生不可还原的*作,比如删除或保存。 

用户界面规范 

 

    最好的程序界面就是用户无需去阅读*作手册就知道该如何使用的界面。 

原则 

1.一致性 
   如果你可以在一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。 

2.设置标准并遵循它 
    可以参数一些工业标准,如IBM的界面设计规范或MS的设计规则,它提供了90%你所需要的规范。 

3.设置向导 
   如果用户使用了一个功能后,不知道如何做下一个,他们就会放弃。如果*作流程和手工工作流程一致,用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。 

4.提示信息必须恰当且规范 
   提示信息必须容易理解并且口径统一,比如“您输入了错误的数据”、“用户编码不能超过8位”。一致的措词,提示信息还应该出现在一致的位置,如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一,比如有时提示“用户输入了错误的数据”,有时提示“您输入了错误的数据”,有时又提示“纳税人输入了错误的数据”,这样会使用户无所适从。 

5.借鉴好的程序 
   多了解同类软件的界面,并加以分析与了解,直到能够区别好的用户界面与差的用户界面。但不能够机械的模仿别人的界面。 

6.功能的统一 
   有一些很常用的功能,如添加、修改、删除、查看,同一个软件中,这些功能应该有相同的*作方法。举个例子,几乎我们所有的程序中都有*作员管理这一块功能,但没有一个功能最完善统一的模块可供调用,结果虽然程序员间相互复制这个模块,但经过修改后,每个程序的*作管理都不相同。 

7.变灰的功能 
   有时有些功能不可用,最好不要删除这些按钮若项目,而是使他们变灰为不可用状态,这样有助于用户理解整个程序的功能。 

8.默认按钮 
   使用不具有破坏功能的默认按钮,在每个窗口中,为了方便用户,一般都定义了一个默认按钮,当用户敲回车键时可以快速执行某功能,但有时用户会不小心按错回车键,这时候执行了默认功能后,不能产生不可还原的*作,比如删除或保存。

□ 作者:ChinaUI 整理    2003-2-11 10:19:38

1引言 1.1设计说明 本文档是对系统界面设计风格进行描述,和用户交互的最终界面在《详细设计说明书》中设计和解释。 1.2概念和定义 用户界面:又称人机界面,实现用户与计算机之间得通信,以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI:即图形用户界面,一种可视化得用户界面,它使用图形界面代替正文界面。 1.3用户假定 将使用本系统的用户定义为:对应用程序或计算机的一般用法有一定了解,用户希望界面符合WINDOWS9X特别是OFFICE97风格,对易用性、简洁性有比较高的要求,对界面快速交互没有很强的要求(即不希望通过命令方式快速交互)。 2用户界面设计规范 2.1用户界面设计原则 本系统坚持图形用户界面(GUI)设计原则,界面直观、对用户透明:用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 界面设计员应该明白软件中用户是所有处理的核心,不应该有应用程序来决定处理过程,所以用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把*作流程强加给用户。 界面设计必须经过确认才能完成。 2.2界面一致性 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 1)显示信息一致性标准 (1)标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号(10号); (2)日期:正常字体、宋体、白底黑字、3-D lowered; (3)对齐方法: l 左对齐:一般文字、单个数字、日期等 l 右对齐:数字、时间、日期加时间。 (4)分辨率为800*600,增强色16色 (5)字体缺省为宋替、五号、黑色 (6)底色缺省采用灰色 这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用,因此开发者应当注意在同一软件中表现形式的一致性。 2)布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。 在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下,再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 布局力求简洁、有序、易于*作。 3)鼠标与键盘对应原则 应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一些必要的按钮和菜单项。 但是,许多鼠标的*作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代(或其它方式)。又如在一个窗口中有两个数据窗口,可以用鼠标从一个数据窗口中将一项拖出然后放到另一个中。如果只用键盘,就应当在菜单中设置拷贝或移动的菜单项。 4)快捷键 在菜单项中使用快捷键可以让使用键盘的用户*作得更快一些,在西文Windows及其应用软件中快捷键的使用大多是一致的。本系统中应用的快捷键在各个配置项上语义必须保持一致。 面向事务的: l Ctrl-D 删除 l Ctrl-F 寻找 l Ctrl-I 插入 l Ctrl-N 新记录 l Ctrl-S 保存 查询/列表: l Ctrl-O l Ctrl-R 其它: l Ctrl-C 拷贝 l Ctrl-H 帮助 l Ctrl-P 打印 l Ctrl-V 粘贴 l Ctrl-W 关闭 l Ctrl-X 剪切 MS Windows保留键: l Ctrl-Tab 下一窗口 l Ctrl-Esc 任务列表 l Ctrl-F4 关闭窗口 l Alt-F4 结束应用 l Alt-Tab 下一应用 l Enter 缺省按钮/确认*作 l Esc 取消按钮/取消*作 l Shift-F1 上下文相关帮助 其它快捷键 其它快捷键使用汉语拼音的开头字母,不常用的可以没有快捷键。 2.3向导(WIZARD)使用原则 对于应用中某些部分的处理流程是固定的,用户必须按照指定的顺序输入*作信息,为了使用户*作得到必要的引用应该使用向导,使用户使用功能时比较轻松明了,但是向导必须用在固定处理流程中,并且处理流程应该不少于3个处理步骤。 2.4系统响应时间 系统响应时间包括两个方面:时间长度和时间的易变性。用户响应时间应该适中,系统响应时间过长,用户就会感到不安和沮丧,而响应时间过短有时会造成用户加快*作节奏,从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长,低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间上坚持如下原则: 响应时间长度 界面设计 0-10 秒 鼠 标 显 示 成 为 沙 漏 10 到18 秒 由微帮助来显示处理进度 18 秒 以 上 显示处理窗口,或显示进度条 一个长时间的处理完成时 应给予完成警告信息 响应时间的易变性 界面设计 用户感觉不到 不考虑 用户稍微感觉到 由微帮助提供易变性说明 容易性大而且时间绝对差别大 显示易变性提示 2.5用户帮助设施 常用的帮助设施有两种:集成的和附加的。集成的帮助设施一开始就是设计在软件中的,它与语境有关,用户可以直接选择与所要执行*作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间,增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。 本系统提供这两种帮助设施,设计和实现时遵循以下原则: 1) 进行系统交互时,提供部分帮助功能,即:提供主要*作的帮助 2) 用户可以通过帮助菜单、F1键和帮助按钮(如果有的话)访问帮助 3) 表示帮助时根据需要提供三种方式的选择:另一个窗体、微帮助和指出参考某个文档 4) 用户如何回到正常交互方式有两种选择:返回键和功能键 5) 帮助信息的构造:采用分层式帮助 6) 微帮助提供:由状态栏提供,或控件上的提示文本 2.6出错信息和警告 出错信息和警告是指出现问题时系统给出的坏消息,本系统对于出错信息和警告应该遵循以下原则: 1) 信息以用户可以理解的术语描述; 2) 信息应提供如何从错误中恢复的建设性意见; 3) 信息应指出错误可能导致那些不量后果,以便用户检查是否出现了这些情况或帮助用户进行改正; 4) 信息应伴随着视觉上的提示,如特殊的图像、颜色或信息闪烁。 5) 信息不能带有判断色彩,即任何情况下不能指责用户 2.7命令交互 由于本系统用户是WINDOWS用户,故本系统不提供命令交互。 2.8一般交互原则 本系统一般交互遵循以下原则: 1) 一致性:菜单选择、数据显示以及其它功能都应使用一致的格式。 2) 提供有意义的反馈 3) 执行有较大破坏性的动作前要求确认 4) 在数据录入上允许取消大多数*作 5) 减少在动作间必须记忆的信息数量 6) 在对话、移动和思考中提高效率 7) 允许用户非恶意错误,系统应保护自己不受致命作物的破坏 8) 按功能对动作分类,并按此排列屏幕布局,设计者应那里提高命令和动作组织的内聚性 9) 提供语境相关的帮助机制 2.9信息显示原则 本系统信息显示遵循以下原则: 1) 只显示与当前用户语境环境有关的信息; 2) 不要用数据将用户包围,使用便于用户迅速吸取信息的方式表现信息; 3) 使用一致的标记、标准缩写和可预测的颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源; 4) 产生有意义的出错信息,见2.6; 5) 使用缩进和文本来辅助理解; 6) 使用窗口分隔控件分隔不同类型的信息; 7) 高效地使用显示器的显示空间。 2.10数据输入原则 本系统数据输入遵循以下原则: 1) 尽量减少用户输入动作的数量; 2) 维护信息显示和数据输入的一致性; 3) 交互应该时灵活的,对键盘和鼠标输入的灵活性提供支持; 4) 在当前动作的语境中使不合适的命令不起作用; 5) 让用户控制交互流,用户可以跳过不必要的动作、改变所需动作的顺序(如果允许的话)以及在不退出系统的情况下从错误状态中恢复; 6) 为所有输入的动作提供帮助,见2.5; 7) 消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。 3用户界面设计更改和追加说明 3.1更改说明 更改本用户界面设计时应该征得所有开发者的同意,所有开发者应该按更正后的原则修改和设计用户界面。 3.2追加说明 追加本用户界面设计时应该发布给所有开发者,所有开发者应该按追加后的原则修改和设计用户界面。 □ 作者:Shawls 2003-2-11 10:14:46

UI界面设计——界面设计不存在美工  

      人类社会逐步向非物质社会迈进,互联网信息产业已经走入我们的生活。在这样一个非物质社会中,网站与软件这些非物质产品再也不象过去那样紧紧靠技术就能处于不败之地。工业设计开始关注非物质产品。但是在国内依然普遍存在这样一个称呼“美工”。“工”的意思就是没有思想紧紧靠体力工作的人。这是一个很愚昧的做法,愚昧在于称呼职员美工的企业没有意识到界面与交互设计能给他们带来的巨大经济效益,另一方面愚昧在于被称为美工的人不知道自己应该做什么,以为自己的工作就是每天给界面与网站勾边描图。

  本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴,是一个科学的设计过程,理性的商业运作模式。而不是单纯的美术描边。

  UI的本意是user interface也就是用户与界面的关系。他包括交互设计,用户研究,与界面设计 三个部分。本文主要讲述用户研究与界面设计的过程。

      一个通用消费类软件界面的设计大体可分为五个步骤:
1需求阶段
2分析设计阶段
3调研验证阶段
4方案改进阶段
5用户验证反馈阶段

需求阶段

  软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。

  除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。

分析设计阶段

  通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲和,放松与cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作标点的风格,我们设计出数套不同风格的界面。

调研验证阶段
www.dolcn.com
  几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。

  测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。


  例如:
  数据收集方式:厅堂测试/模拟家居/办公室。
  测试时间:X年X月X日X日。
  测试区域:北京、广州、天津。
  测试对象。某消费软件界定市场用户。主要特征为:
  对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高;
  电脑使用经历一年以上;
  家庭购买电脑时品牌和机型的主要决策者
  年龄:X-X岁;
  年龄在X岁以上的被访者文化程度为大专及以上;
  个人月收入X以上或家庭月收入X元及以上;
  样品
  五套软件界面
  样本量:X个,实际完成X个。


  调研阶段需要从以下几个问题出发:
 用户对各套方案的第一印象
 用户对各套方案的综合印象
 用户对各套方案的单独评价
 选出最喜欢的
 选出其次喜欢的
 对各方案的色彩,文字,图形等分别打分。
 结论出来以后请所有用户说出最受欢迎方案的优缺点。
   所有这些都需要用图形表达出来,直观科学。

方案改进阶段

  经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不能换皮肤的应用软件或游戏的界面)将方案做到细致精美。

用户验证阶段

  改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。

  经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。

□ 作者:怒放   2003-6-9 16:30:02

UI设计流程探讨  
确认目标用户
    在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。
    用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
    例如:对于科学用户和对于电脑入门用户的设计重点就不同。
采集目标用户的习惯交互方式
    不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。
    当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
提示和引导用户
    软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。
    对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。
一致性原则
设计目标一致
    软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。
    例如:如果以电脑操作初级用户作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。
元素外观一致
    交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
交互行为一致
    在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。
    例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。
    对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。
可用性原则

可理解
    软件要为用户使用,用户必须可以理解软件各元素对应的功能。
    如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。
    例如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。
可达到
    用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
    用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。
    要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。
    可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)
可控制
    软件的交互流程,用户可以控制。
    功能的执行流程,用户可以控制。
    如果确实无法提供控制,则用能为目标用户理解的方式提示用户。
 
    上面的文章提到了UI设计的原则,并且对此做出了一些所谓的定义。大家要明白,本人对UI设计的研究时间不长,这些原则只是个人体会。
 
□ 作者:涩->味小刀    2003-4-3 16:00:50 

 
2006年08月04日

css 之 ime-mode

css 之 ime-mode
语法:
ime-mode : auto | active | inactive | disabled
取值:
auto : 默认值。不影响ime的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
inactive : 指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
disabled : 完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime

说明:
设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(ime)状态。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 imemode 。
示例:
input {ime-mode: auto; }

所以当某个文本域不需要中文输入的时候,我们可以通过设置 ime-mode 属性值为 inactive 或者 disabled,减少错误的可能性。同样的我们可以设置那些需要中文输入的文本域的 ime-mode 属性值为 active。

通常C/S的业务系统,都会注意输入法的控制问题。开发基于B/S的业务系统,也一定会遇到同样问题,ime-mode相信可以帮上忙。不过 FireFox 并不支持这一样式单属性。

自苏沈小雨制作的《CSS2中文手册》。