<![CDATA[chunchunliu.bokee.com]]> zh_cn Thu,15 Jun 2006 10:20:06 CST Wed,05 Jul 2006 13:54:14 CST http://www.bokee.com http://reg.bokee.com/account/web/img/logo.gif 博客网 http://www.bokee.com 您好,欢迎访问yunle110.bokee.com <![CDATA[重构、标准、布局]]> .html 重构、标准、布局
 

>
 

近来大家总是在标准上争论不休,其实,这些问题一些相关文章已经说得很明白了。
  以下我就谈谈我的看法。本帖子有太多的“我认为”,说明了我只是想把我的想法拿出来跟大家商榷,或许有太多不对的地方,也请大家一一指出。

  1、我对web标准的理解
  所谓的web标准,在一些教程文章上已经得到结论:结构化标准(XHTML、XML)、表现标准(CSS、XSLT?)、行为标准(DOM、ECMAScript)。这些东西在网上一搜一大把,在这里我就不多说了。我只说我自己的想法:
  a.标准是相对的,有其一定的局限性
  作为标准本身,它也在不断地完善中。我们也可以加入其中完善它,而不是盲从它。没有最好,只有更好。(LeXRus前一阵子说要成立自己的web标准组织,不知道现在怎么样了。)
  b.标准只是被推荐使用,好的标准大家都会自觉去遵守
  我们之所以使用标准,就是因为标准对我们有利。正如现在倡导的ISO9000标准一样,它只是倡导,并不强迫。我认为它对我有用,所以我用它;同样,如果你认为它实在不怎么样,你也可以不用它,标准本身不应该带有任何强迫性。就跟打篮球一样,NBA是24秒进攻,我们是30秒进攻,我们要想加入NBA,就得用人家的规则。还有我们加入“世贸”也是,如果我们够拽,自己成立一个“世贸”,自己发布一套标准,也是可以的。
  c.标准没有明确提到用div还是table
  有些朋友很容易把标准简单地等同于“把table换成div”。我不这么认为,因为table也是符合xml规则的。含有table的页面照样可以通过XHTML1.0的验证。
  d.“div布局”不只是用div进行布局
  我们可以用一切可能的标签(包括table)对页面进行布局,目的就是要达到最优。它只是提出一个概念,一个全新的模式。坛子里也有人说过,“重要的是观念上的更新,而不是代码。”当然,我们的最终目的是代码的更新。
  e.XHTML验证是手段,不是目的
  有时,我们用javascript来生成flash movie代码,以欺骗validator,通过验证。用这种方法,那么没有通不过验证的页面。如果只是玩玩,那是可以的。但是我怕会有些初学者太把validator当回事,甚至认为通过验证是最终目的。我的看法是:validator不过是一个工具,它帮助我们检查我们的页面是否符合标准,仅此而已。最终我们还是得按客户的要求设计我们的页面。
  
  2、我为什么要用标准
  有人会以为使用标准的目的就是为了达到标准。其实,《网站重构》一语道破天机:为了网站能“活”得更长久,为了提高网站的可访性,更为了降低成本,我们必须采用Web标准!这里有三个“为了”,没有一个是为了标准。标准只是手段。
  接触“标准”后,我尝试去做一些符合“标准”的页面。当时,并不是很明确为什么要使用标准,只是出于一种好奇心理。中间也遇到了一些难题,有技术上的,也有观念上的。但是,现在我很乐意用div+css来给客户做网页。
  用了标准以后,给我的感觉就是:代码精简了,维护方便了。
  代码精简,可缩短页面装载时间。就算在当前宽带的条件下,我们也不应该放宽对自己的要求——精简代码(我想这也是每一个程序员对自己的要求),况且现在还有不少的拨号用户,以及手机上网/浏览的用户。这是一个分秒必争的社会。
  严格按照标准,可以获得更高的兼容性。一个合格的网页制作者,他总是试图让网页达到最高的兼容性。当然,他要在效果与兼容性之间取得某种平衡。就像我们现在挑老公:既要有钱,也要靓仔。
  维护方便,我甚至只要修改一下css就可以让整个页面呈现出完全不同的风格。这可以节省不少工作。
  当然,我认为用标准最重要的一点是:向后兼容。用一个专业的术语就是:可持续发展。网络总是在不断地发展中,一个好的网页制作者,总得对未来的发展有一定的预见。就现在我知道的,以后一段时间确实是xml的天下,直到有更好的东西出来取代它。
  每年都有太多的网站为了跟上时代,花不少钱在改版上。因为改版就意味着一切重来,包括代码,甚至程序。
  标准还要求我们把数据交给XHTML(或者html、xml),把表现交给css,两者各司其职,结合起来。

  3、为table平反
  《网站重构》一书出来以后,也许有很大的误读成分,一些朋友把标准跟重构混淆了,甚至等同起来。我没看过这本书,不好做评价。
  “在不改变代码外在行为的前提下,对代码做出修改,以改进程序的内部结构”,这就是重构。我认为“网站重构”兼有“div布局”跟“web标准”的意思。布局讲的是一种方法,标准讲的是一种规范,这是两码事。
  web标准并不是说不用table,我找遍了网上的文章,没有找到一篇文章说web标准反对使用甚至建议不使用table标签,我想它是这样说的:建议不要使用table“布局”,而改用div+cs“布局”。
  拿一个数据表来说,我认为用table来组织它是最好的解决方案。当然,你要用其他办法来实现也是可以的,但是我敢说都没有table来得简单、简洁。(也许有,只是我没找到?)当然,在学习阶段,强制自己不使用表格解决一切问题,还是蛮有用的。

  以上说了这么多,与其说是我的想法,不如说是汇总了大家的想法。但求不贻笑大方,如果能对初学者有所裨益,那就阿弥陀佛了。

]]>
Wed,05 Jul 2006 13:54:14 CST 0
<![CDATA[西西弗的神话]]> .html  西西弗的神话  

                    阿尔贝·加缪   

诸神处罚西西弗不停地把一块巨石推上山顶,而石头由于自身的重量又滚下山去,诸神认为再也没有比进行这种无效无望的劳动更为严厉的惩罚了。

荷马说,西西弗是最终要死的人中最聪明最谨慎的人。但另有传说说他屈从于强盗生涯。我看不出其中有什么矛盾。各种说法的分歧在于是否要赋予这地狱中的无效劳动者的行为动机以价值。人们首先是以某种轻率的态度把他与诸神放在一起进行谴责,并历数他们的隐私。阿索玻斯的女儿埃癸娜被朱庇特劫走。父亲对女儿的失踪大为震惊并且怪罪于西西弗,深知内情的西西弗对阿索玻斯说,他可以告诉他女儿的消息,但必须以给柯兰特城堡供水为条件,他宁愿得到水的圣浴,而不是天火雷电。他因此被罚下地狱,荷马告诉我们西西弗曾经扼往过死神的喉咙。普洛托忍受不了地狱王国的荒凉寂寞,他催促战神把死神从其战胜者手中解放出来。

还有人说,西西弗在临死前冒失地要检验他妻子对他的爱情。他命令她把他的尸体扔在广场中央。不举行任何仪式。于是西西弗重堕地狱。他在地狱里对那恣意践踏人类之爱的行径十分愤慨。她获得普洛托的允诺重返人间以惩罚他的妻子。但当他又一次看到这大地的面貌,重新领略流水、阳光的抚爱,重新触摸那火热的石头、宽阔的大海的时候,他就再也不愿回到阴森的地狱中去了。冥王的诏令、气愤和警告都无济于事。他又在地球上生活了多年,面对起伏的山峦,奔腾的大海和大地的微笑他又生活了多年。诸神于是进行干涉。墨丘利跑来揪住这冒犯者的领子,把他从欢乐的生活中拉了出来,强行把他重新投入地狱,在那里,为惩罚他而设的巨石已准备就绪。

我们已经明白:西西弗是个荒谬的英雄。他之所以是荒谬的英雄,还因为他的激情和他所经受的磨难。他藐视神明,仇恨死亡,对生活充满激情,这必然使他受到难以用言语尽述的非人折磨:他以自己的整个身心致力于一种没有效果的事业。而这是为了对大地的无限热爱必须付出的代价。人们并没有谈到西西弗在地狱里的情况。创造这些神话是为了让人的想象使西西弗的形象栩栩如生。在西西弗身上,我们只能看到这样一幅图画:一个紧张的身体千百次地重复一个动作:搬动巨石,滚动它并把它推至山顶;我们看到的是一张痛苦扭曲的脸,看到的是紧贴在巨石上的面颊,那落满泥士、抖动的肩膀,沾满泥士的双脚,完全僵直的胳膊,以及那坚实的满是泥士的人的双手。经过被渺渺空间和永恒的时间限制着的努力之后,目的就达到了。西西弗于是看到巨石在几秒钟内又向着下面的世界滚下,而他则必须把这巨石重新推向山顶。他于是又向山下走去。

正是因为这种回复、停歇,我对西西弗产生了兴趣。这一张饱经磨难近似石头般坚硬的面孔已经自己化成了石头!我看到这个人以沉重而均匀的脚步走向那无尽的苦难。这个时刻就像一次呼吸那样短促,它的到来与西西弗的不幸一样是确定无疑的,这个时刻就是意识的时刻。在每一个这样的时刻中,他离开山顶并且逐渐地深入到诸神的巢穴中去,他超出了他自己的命运。他比他搬动的巨石还要坚硬。   如果说,这个神话是悲剧的,那是因为它的主人公是有意识的。若他行的每一步都依靠成功的希望所支持,那他的痛苦实际上又在那里呢?今天的工人终生都在劳动,终日完成的是同样的工作,这样的命运并非不比西西弗的命运荒谬。但是,这种命运只有在工人变得有意识的偶然时刻才是悲剧性的。西西弗,这诸神中的无产者,这进行无效劳役而又进行反叛的无产者,他完全清楚自己所处的悲惨境地:在他下山时,他想到的正是这悲惨的境地。造成西西弗痛苦的清醒意识同时也就造就了他的胜利。不存在不通过蔑视而自我超越的命运。

如果西西弗下山推石在某些天里是痛苦地进行着的,那么这个工作也可以在欢乐中进行。这并不是言过其实。我还想象西西弗又回头走向他的巨石,痛苦又重新开始。当对大地的想象过于着重于回忆,当对幸福的憧憬过于急切,那痛苦就在人的心灵深处升起:这就是巨石的胜利,这就是巨石本身。巨大的悲痛是难以承担的重负。这就是我们的客西马尼之夜。但是,雄辩的真理一旦被认识就会衰竭。因此,俄狄浦斯不知不觉首先屈从命运。而一旦他明白了一切,他的悲剧就开始了。与此同时,两眼失明而又丧失希望的俄狄浦斯认识到,他与世界之间的唯一联系就是一个年轻姑娘鲜润的手。他于是毫无顾忌地发出这样震撼人心的声音:尽管我历尽艰难困苦,但我年逾不惑,我的灵魂深邃伟大,因而我认为我是幸福的。索福克勒斯的俄狄浦斯与陀思妥耶夫斯基的基里洛夫都提出了荒谬胜利的法则。先贤的智慧与现代英雄主义汇合了。

人们要发现荒谬,就不能不想到要写某种有关幸福的教材。哎,什么!就凭这些如此狭窄的道路……但是,世界只有一个。幸福与荒谬是同一大地的两个产儿。若说幸福一定是从荒谬的发现中产生的,那可能是错误的。因为荒谬的感情还很可能产生于幸福。我认为我是幸福的,俄狄浦斯说,而这种说法是神圣的。它回响在人的疯狂而又有限的世界之中。它告诫人们一切都还没有也从没有被穷尽过。它把一个上帝从世界中驱逐出去,这个上帝是怀着不满足的心理以及对无效痛苦的偏好而进入人间的。它还把命运改造成为一件应该在人们之中得到安排的人的事情。

西西弗无声的全部快乐就在于此。他的命运是属于他的。他的岩石是他的事情。同样,当荒谬的人深思他的痛苦时,他就使一切偶像哑然失声。在这突然重又沉默的世界中,大地升起千万个美妙细小的声音。无意识的、秘密的召唤,一切面貌提出的要求,这些都是胜利必不可少的对立面和应付的代价。不存在无阴影的太阳,而且必须认识黑夜。荒谬的人说,但他的努力永不停息。如果有一种个人的命运,就不会有更高的命运,或至少可以说,只有一种被人看作是宿命的和应受到蔑视的命运。此外,荒谬的人知道,他是自己生活的主人。在这微妙的时刻,人回归到自己的生活之中,西西弗回身走向巨石,他静观这一系列没有关联而又变成他自己命运的行动,他的命运是他自己创造的,是在他的记忆的注视下聚合而又马上会被他的死亡固定的命运。因此,盲人从一开始就坚信一切人的东西都源于人道主义,就像盲人渴望看见而又知道黑夜是无穷尽的一样,西西弗永远行进。而巨石仍在滚动着。

我把西西弗留在山脚下!我们总是看到他身上的重负。而西西弗告诉我们,最高的虔诚是否认诸神并且搬掉石头。他也认为自己是幸福的。这个从此没有主宰的世界对他来讲既不是荒漠,也不是沃士。这块巨石上的每一颗粒,这黑黝黝的高山上的每一颗矿砂唯有对西西弗才形成一个世界。他爬上山顶所要进行的斗争本身就足以使一个人心里感到充实。应该认为,西西弗是幸福的。

  阿尔贝·加缪(1913-1960)法国存在主义小说家、戏剧家。1957年获诺贝尔文学奖。杜小真译 ]]>
Tue,04 Jul 2006 15:07:43 CST 0
<![CDATA[平面设计师张行谈设计:汉字编排技巧]]> .html 作者: 张行
出处: 蓝色理想论坛
责任编辑:bigroc
本文中我们说说汉字编排的问题。

  先要说一说汉字与拉丁字母的区别,字母是一种纯粹发音符号,每个字母本身并没有意义,单词的意义来自于这些字母之间的横向串式组合,而汉字的组字方式是以象形为原始基础,也就是每个字都具有特别的意义,一个简单的字可能在远古时代就代表了一个复杂的生活场景,因而它也是世界上最形象的文字。两者之间的阅读方式和解读方式都有本质的不同,因此,汉字的编排不能照搬英文的编排方式,它们两者之间在编排上有一些客观的区别。

  首先就是同样字号的实际大小不同,英文因为都是字母,字母的构成结构非常简单,一般在印刷上3号大小的英文都能清晰可辨,而汉字因为结构的复杂,在印刷上5号字已经接近辨认极限了,因而在设计时汉字因为要考虑可阅读性,在设计中就不如英文的字号大小灵活多变。还有英文字母线条比较流畅,因为弧线多,所以画面容易产生动感,这一点上比汉字生动多变。

   第二就是英文编排容易成"段",因为英文每个单词都有相当的横向长度,有时一个单词就相当于中文一句话的长度,单词之间是以空格做为区分,所以英文在排版时,哪怕是一句话,也大多做为"段"来考虑编排;而这点中文就完全不同,中文的每个字占的字符空间一样,非常规整,一句话的长度在一般情况下是不能拆成"段"来处理,所以中文在排版的自由性和灵活性上比不上英文,各种限制严格得多。虽然现代设计中有大量的对汉字进行解构的实验作品和商业作品,但总体来说,还是不能大量推广,毕竟,这种实验牺牲的就是人们习惯的汉字阅读的方便性。汉字的整体编排容易成句、成行,视觉效果更接近一个个规则的几何点和条块,而英文的整体编排容易成段、成篇,视觉效果比较自由活泼,有更强的不连续的线条感,容易产生节奏和韵律感。

  第三就是英文的篇幅普遍比相同意义的汉字的篇幅要多,在设计时,英文本身更容易成为一个设计主体,而且因为英文单词的字母数量不一样,在编排时,对齐左边那么右边都会产生自然的不规则的错落,这在汉字编排时不太可能出现的,汉字编排每个段是一个完整的"块",很难产生这种错落感。

  第四,汉字的编排规则比英文严格复杂得多,比如段前空两字,标点不能落在行首、标点占用一个完整字符空间,竖排时必须从右向左,横排时从左向右等等,这些规则也给汉字编排提高了难度。而英文段落在编排时只能横排,只能从左向向,段前不需空格,符号只占半个字符空间,这给英文编排提供了更大更灵活的空间。这些区别在设计时都需要特别注意,不要照搬英文的排版模式来编排汉字,处理不好就会不伦不类!

   那么对于汉字,究竟应该以一种什么样的原则和原理来进行编排才能使字、句、段、篇看起来美观清晰呢?本人在实践中,有一些经验可以拿出来与大家商讨,我在进行汉字编排时一般遵循的流程是:理解——分类——粗排——精确细排——校对

  1、理解

  在进行文字的编排之前,首先要理解文字的内容。我见过很多设计师只注重版式美现而不关注文字内容,把文字一拿到手就开始编排,从不考虑文字在说什么,他们的原则是文字一定要服从于版式需要。这是不正确的设计方法,对于一篇文案稿,如果我们不去理解它的表述内容,就很容易本末倒置。

  一个标题,究竟用什么字体?用多大字号?横排还是竖排?这些是由整体版面气质和文字表述的内容所共同决定的,而不是按我们的惯性思维理解,标题一定要大,要突出,要用粗壮的字体。

  我们要深刻理解文字到底在说些什么,才能为我们选择字体字号提供依据,才能让文字的视觉感受与表述内容保持统一,才能为我们选择合适的插图提供指导方向。当然这种理解不是表面性的理解,还是真正吃透它所表达的意思,有时一些文字的意义是指东道西的,表面上是说这件事,其实它真正想表现是却是另一个道理,这就需要设计师有较强的理解能力。

   2、分类

  分类也就是把我们理解的文字段分成几个层级,并为其分配相应的占用空间和大致的视觉位置。谁是主标题,谁是广告词,谁是副标题,谁是内文,内文的组成结构是怎样的,是否需要进行视觉归纳或者是内容归纳等等,把这些问题搞清楚了,我们就可以为把这些文字分类成几个层级。

  第一级是最重要和突出的,比如主标题、广告词、副标题等,第二级是对第一级的辅助说明或者是次于第一级的,比如内文和某些特别需要强调的电话号码等,第**是最次要的,比如跋、通联、页码、旁注等等,一般情况下分成三个层级就足够了,但有时会有一些很专业的技术图表和技术参数类的文本编排就另当别论了。

  需要特别说明的是,这种分类并不是绝对的,只是一个模糊、大概的基本轮廓,可以让我们了解到编排对象的在版面中的功能和意义。

  最后要做的就是为各个层级的文字内容分配视觉空间,如果有插图配合的话,应该同时考虑插图和文本的空间占用(在这个过程中,最容易出现的问题就是,很多设计师喜欢先把插图定位得很死,把空间都计算好了,在编排文字的时候发现文字的空间不够,这时只能到处找多余的空间把文字硬塞进去,或者牺牲文字的字号大小来妥协,最后的效果就是到处都很挤,到处都不合理,这些对于新手来说要特别注意,文本的容量和插图的容量一定要同时考虑,在有必要的时候一定要对插图的空间进行调整,不要舍不得,整体效果永远都要比局部的效果重要)。

  这里的空间分配的原则就是:每个文本元素都一定要有相对独立的空间,要让它看起来本来就应该在那儿,那块空间本来就是为它而留下的,而不是让人感觉是没有地方放了硬塞在那儿的。这是一个考验设计师整体调控能力的过程,因为空间是固定不变的,而每个元素之间又是互动的,A元素的空间多一点就意味着另一个B元素的空间就会少一点,那么如何让其占用空间均衡合理,要需要从版面美感、视觉流程、表述内容、版面风格、阅读习惯等多方面去考虑,千万不要过早为它下定论,多实验几次才能找到最佳解决方案。

]]>
Wed,21 Jun 2006 11:41:56 CST 0
<![CDATA[国外的UE设计师招聘要求]]> .html 我们正在寻找一名高级用户体验设计师加入我们的产品设计团队。We are looking for someone to join our growing Product Design group as a sr.
user experience designer. 


指责包括产品创新,界面视觉引导,原型设计,与开发一起推动设计实现。Responsibilities include producing innovative,visually appealing human interface designs; creating design prototypes;working with developers to make designs a reality. 


我们需要这个人可以独立工作,和团队成员合作,交流各种想法,画出原型,参与产品整个的周期。We need someone who can work independently, engage team members, communicate ideas, create  prototypes, and finally work with team members throughout the release cycle of the product. This position reports to the Principal Designer.

日常的工作包括:Day-to-Day Activities:
* 基于人机交互、图形化设计、界面设计和其他相关理论,进行设计。Generate designs based on common sets of HCI, graphic design, interface design and other relevant theories
* 画出不同层次的原型:纸上的,框架的,可交互的网页,Flash的。Create prototypes at different levels of fidelity: paper, wireframe,interactive HTML, and Flash
* 到不同的部门演示概念和想法,组织反馈意见。Present ideas and concepts to x-functional teams and incorporate feedback accordingly
* 生成视觉元素比如icon,边框,用户控件,窗口规范,图形化的布局Create visual elements such as icons, borders, custom widgets, window treatments, and graphical layouts
* 同产品设计团队合作去发展一些重要附加值的概念,还有修订产品。 Collaborate with Product Design team to develop concepts of key additions and edits for the product
* 同商业方面的专家、市场部沟通,确认设计并得到认可。Communicate designs to business specialists and marketing team members for validation and buy-in.
* 同开发人员沟通,提供明确的定义和执行的方向。Communicate designs to development and provide definition and direction during implementation
* 同质量控制部门沟通,提供在测试阶段需要的清晰理解。Communicate designs to quality control and provide clarifications during the testing phase
* 同首席设计师和产品设计团队一起工作,符合内部设计流程和标准。Work with Principal Designer and Product Design team to evolve internal design process and standards.
* 需要1/10的时间出差。This job requires 10% travel

资格条件:Qualifications & Requirements:

* 在应用程序的交互设计方面(界面设计,产品设计)有4-5年的工作经验。在web应用和桌面应用方面有扎实的经验。4-5 years experience in application interaction design (UI Design, Product Design); solid experience with both web applications (not web sites) and desktop applications
* 设计、人机交互、可用性专业或者可以展示对设计的理解、交互设计理论和实践的能力。Education in design, HCI, usability or ability to display formal understanding of design and HCI theory and practice
* 理解室内产品设计的生命周期。Understand in-house product design lifecycle
* 优秀的交流技巧:书写和口头。Good communication skills: written and verbal
* 了解基于浏览器和客户端的技术(HTML, Java, Flash,.NET)。Knowledge of browser-based and desktop technologies (HTML, Java, Flash,.NET)
* 原型技术,包括DHTML, Dream Weaver, Flash或类似的。Prototyping skills using DHTML, Dream Weaver, Flash, or similar
* 有开发和运行可用性测试的经验。Experience with developing and running usability testing
* 有行业研究经验(Cooper的目标导向设计方法优先)Experience with field research (goal-directed method by Cooper is preferred).
* 可以使用设计过程描述清楚问题如何产生以及如何解决,无论是独立工作还是和团队一起。Should demonstrate ability to use design processes for problem definition and solution creation while working individually and with a group
* 可以创造出图形元素:icon,控件,窗口,边框,数据布局。Ability to create graphical elements: icons, widgets, windowing and boarders, data layout

]]>
Wed,21 Jun 2006 11:39:49 CST 0
<![CDATA[什么是信息架构(information Architecture)]]> .html UI设计流程及讨论结果提到了信息架构这个词,什么是信息架构呢?

http://www.ch.fhl.net/ct/000076.html提到:

信息架构,原文是information architecture,简称 IA。它是从数据库设计的领域中诞生的,理查德.所罗.乌曼创造出这个名词,后来在由路易斯.罗森菲尔德 (Louis Rosenfeld) 与彼得.默非(PeterMorville) 两位图书馆学者将他发扬光大!

给出了一个定义:IA 的主体对象是信息,由信息建筑师来加以设计结构、决定组织方式以及归类,好让使用者与用户容易寻找与管理的一项艺术与科学。

按我的理解,通俗一点的讲,信息架构就是合理的组织信息的展现形式,例如一个电子相册,注册的时候需要体现怎样的说明,单个相片,一个专辑,整个相册的内容以及它们之间是怎样的关系。IA不是以页面分类的,却是体现在不同的使用过程中的。信息是主体,所以研究信息之间的联系就是非常重要的工作。(仅代表个人观点)

怎样的人适合做信息架构呢?

这类人通常有“分析倾向”,同时对研究人本身以及他们的行为有很浓的兴趣。

要从事信息架构,不但要有钻研的精神。而且要学会"sell yourself"(推荐自己),因为对于这样一个不是马上就能看到结果的领域,你要通过展示,让大家明白它的重要性。

在国外,信息架构也仅刚刚起步。

"Remember that this is still a new field," says Rosenfeld. "To break in, you won't be expected to have 20 years' experience or even any sort of certification -- in fact, there is no such thing."------infomation architect

“记住,这还是一个新的领域”Rosenfeld说。“要打破这个,你不需要有20年的经验或者任何形式的认证。事实上,现在还什么都没有。”

恩,空白的领域,才有更多的机会。

"their impact could mean that the demand for information architects will soon outstrip the supply."------infomation architect

“这意味着对于信息架构师的需求大于供应。”

 最后这句,算是激励。

===========负责的分割线============

  PS:在IAWiki 里的一张有趣的图,盲人摸象。很形象,也很贴切的说明了一个道理:无论是互动设计,体验设计,知识管理等,都接触的是这个系统的一个点,而整个面的呈现需要大家一起去描绘。要收集尽可能多的信息,从而做出更符合要求的产品。

1143451201157_1876.gif

]]>
Wed,21 Jun 2006 11:36:01 CST 0
<![CDATA[Web标准有感]]> .html 经过2个月的Web标准(Web Standards)学习后,按标准重构了自己的聆听小区。其实准确来说还没有完全按标准,主要是语义化方面还符合得不好。

刚重构完聆听小区时,经常到蓝点的论坛上看看关于Web标准的帖子,然后也有些自己的感想,零零散散地作了些回复。现在把这些感想集中起来收于本文,权当对前一段时间Web标准学习的总结。本文可能谈Web标准的缺点会比较多,因为其优点现在铺天盖地,不需要我多说。无法接受Web标准的缺点的读者不建议阅读本文。

  1. Web标准的效率:熟悉了Web标准以后,单人效率确实很高,但如果团队开发,要求每个人都熟悉标准不是一件容易的事,需要一定的时间。

  2. Web标准的兼容性:目前浏览器极不统一,同一代码在不同浏览器中一致(不包括文本界面下的浏览器等特殊浏览器)应该是建立标准的目的之一,但目前这实现不了,于是为了兼顾标准又兼容各种浏览器,弄出了各种小技巧,结果是使本来简洁下来的代码又变复杂了。有人甚至声称,用Web标准就是为了相同的代码在不同浏览器中有同一效果。事实上以目前的浏览器形势,table布局得到的同一性比div+css大得多。至于以后浏览器对Web标准兼容性可能会普遍改善是后话。

  3. 有人问:“标准应该是提倡表现和语义分离,如果我用table排版,然后所有的table属性或表现均用css,这算不算符合标准?”

    我的解答是:这样做表现和语义是分离了,但是语义用得不对,所以还不算合标准。html标签除了span和div可称为无特定语义外,其它标签都有特定语义,像table就表示表格。标准除了提倡表现和语义分离,还提倡正确使用语义标签,就是该是文档最高级标题,就用h1,该是文章段落就用p,该是表格就用table,只有在无法用已有特定语义标签表示语义的情况下才用div/span。尽管table+css可以实现布局,尽管div+css可以实现p,尽管span+css可以实现strong,但这些都不符合标准。

  4. 从上面这一点可看出,很多Web标准教程都误导了初学者,我也曾经被误导过。

    初学时不懂什么是Web标准,有的说简而言之就是XHTML+CSS标准,又有的说简而言之就是用div+css布局替代传统的table布局。于是我以为在XHTML中取消了table标签,但查XHTML的官方规范,查了半天没有发现不能用table的地方。不久又看到一篇文章叫《使用DIV之后,什么时候使用TABLE》,说是table标签仍要用来展示表格式数据,这就使我更加困惑了。

    事实上,把Web标准简称为XHTML+CSS标准或div+css布局标准都是严重的错误。Web标准由很多标准组成,所以其英文Web Standards是复数的。Web标准的成员主要有:XHTML、CSS、DOMWCAG。其中代表WAI的WCAG,尤其其中的语义化要求(即要求正确使用语义标签),是Web标准的精华所在,但却又经常被人们忽视。div+css的布局,正是WCAG的要求。table+css布局不违背XHTML,也不违背CSS,但却违背WCAI。table作为表格的语义,只应该用在展示表格式数据的场合而不应该用来布局,这就是WCAI的语义化要求。由于在Web标准的理解上出现了偏差,忽视了WCAG,于是就导致了下一点问题。

  5. 经常看到有人强调Web标准与美观不冲突,然后列举若干漂亮的网站。其实不强调我倒没有留意这个问题,大家都强调,反而引起我探究了一下Web标准与美观究竟是否冲突。

    我认为,Web标准与美观确实是有冲突的。其冲突不体现在XHTML上(XHTML只是对HTML的代码形式加入了要求,使得形式上符合XML规范,以前HTML可以用的东西,基本上XHTML也可以用),更不体现在CSS上(CSS的美化功能令人叹为观止,自然不会跟美观过不去),而是体现在语义化上。当完全从语义化出发写好一个XHTML之后,再考虑布局、美化,选择的余地就不大了,除非你加些冗余的div标签来增大css美化的选择,但这样又不符合语义化要求了。

    21andy在蓝点论坛上提出了学习Web标准要先学好语义化,其中举了如下一个例子:

    标准的内容代码为:
    <h1>I love SEX</h1>
    <p>I very very very love SEX, and go to bed with beautiful Girl</p>

    当为了使这段内容适应设计的表现,如为圆角的区域,可以在设计的时候改成这样
    <div>
    <h1>I love SEX</h1>
    <p>I very very very love SEX, and go to bed with beautiful Girl</p>
    </div>
    以让CSS有设计的余地,而不是在制作内容页的时候,就把这个DIV写上.

    于是我就对这个例子提问到:后来又人为地加个div是否说明表现与内容始终不能彻底分离,语义化离现实的网页设计还有差距呢?

    21andy承认了这的确是Web标准还不尽人意的地方。

    我建议大家再认真研究一下那些被用来证明Web标准与美观不冲突的漂亮网站,它们很可能能通过XHTML验证和CSS验证,但有多少个能符合WCAG?有多少个是真正语义化地使用HTML标签?

    如果语义化要做得很好,恐怕就只能像W3C上的各种文档那样纯粹白纸黑字了。

  6. 旧有的HTML和现在的标准,前者更像艺术创作而后者更像书写正规文件

    艺术创作,当然可以形式多样,充分发挥艺术家的想象力,想怎么样就怎么样,管它龙飞凤舞,管它水彩水粉油画,只要最后出来的效果能令观众拍手叫好,这就是好作品,即使水彩水粉混用一气。

    正规文件,当然要强调其正规性、规范性,例如国家法律,有条有理,有章有法,又例如W3C那些易用性(WAI)达到两个A三个A的网页,都是白纸黑字,规规矩矩。

    艺术创作总是会牺牲一些欣赏者的,聋人听不到音乐,盲人看不到美术作品,文盲的人读不懂诗歌散文。自然,旧有的HTML也要牺牲通过PDA、手机、阅读机“看”网页的欣赏者。

    正规文件总是要努力到达它应该到达的每一位读者、观众、听众。不管是盲人、聋人还是文盲,都要接受学习国家各种法律法规,不管是通过读、听、摸或者其他形式。

    Web标准不是万灵药,至少现在还不是。一个简单的例子:Web标准的易用性总是强调照顾盲人使用阅读机;那么现在要做一个毕加索抽象画的在线展览,每一幅画作为网页内容当使用img标签,试问其alt和longdesc属性怎样写才能使盲人无损接受抽象画的信息呢?

  7. HTML与XML虽然都以ML结尾,虽然都是用尖括号“<”和“>”来表示标签,但这两个东西骨子里有很大差别。XML只有内容,而HTML一直以来是用来展示网页的,当然以表现为主,内容次之。现在Web标准硬要把HTML往XML上靠,把表现全部甩给CSS,不是说不可以,但是恐怕不是短时间内能够实现的。

    Photoshop也有文字工具,为什么我们不用Photoshop写文档?Word也能处理图像,为什么我们不用Word做平面设计?

综上所述,在Web标准的现阶段,我的建议是:

  1. 遵循XHTML规范和CSS规范;

  2. 至于语义化,在语义明确的地方选择准确的语义标签;网页设计中难免有些元素语义含糊不好选择准确的语义标签,此时不应拘泥,大概用一个,或者就用div或span;

  3. 设计网页时不建议写纯语义化的XHTML后再布局美化,这样极度限制思维;建议从布局入手写XHTML,然后用CSS美化;不要被标准限制了思维。

]]>
Wed,21 Jun 2006 11:33:30 CST 0
<![CDATA[我对“用户体验”的重新认识]]> .html 我过去关于用户体验的理解,完全关乎于用户对产品的操作方式。我认为有良好用户体验的设计,必须要在功能性与易用性之间找到趋向完美的平衡点。
基于这种认识,我没办法赞同iPod系列中的任何一款是在“用户体验”上胜出的。但事实如何大家都知道------iPod热销,并且全世界都说它成功就是因为超群的“用户体验”。

当我拿着别人的iPod的时候,总觉得是个噩梦:为什么如此糟糕的东西,会被公认为“great consumer experience”?我愿意接受自己的思路有问题,但我的问题出在哪里?
后来张亮同学说我是因为习惯了电脑上听音乐的方式,所以对播放器希望有更多的控制和选择,而大多数用户未必如此。
不错,这应该是一个方面。但还不是全部:如果创新公司出一款功能和操作都很简单的播放器,会热销吗?恐怕非但不会,还要被大家笑掉大牙。

还是要返回自己身上找原因:虽然看不起iPod的交互设计,但是我心里喜欢它吗?sure------如果上天给我免费的、同档次的Zen和iPod选择其一,我一定选iPod。这是诺曼说的情感化设计的力量吗?

由是得出目前的结论:

  • 马斯洛需求有很多层次,不管在哪个层面发力,都是有可能取得“great consumer experience”吧,未必一定要纠缠在功能和使用的问题上吧。
  • 我想我有点明白了:为什么建设品牌和创造用户体验是不可分割的。
    因为消费品牌有很多是建立在和消费者的情感连接上的,而情感化设计也包含在用户体验中。
  • 不能小瞧情感化设计对用户体验的改观。
    对于我个人来说,就是要提醒自己,不要钻到功能主义的胡同里去。

写到这里,返回头查查用户体验(User Experience)的定义到底是什么,恍然惊觉,原来品牌、情感这些因素早在其中了。

]]>
Wed,21 Jun 2006 11:18:38 CST 0
<![CDATA[web2.0网站如何设计UE/UI]]> .html 今天说说web2.0和1.0在用户体验方面的不同之处,但是,这只是我浅薄的理解,希望可以得到各位资深的实践者们的提点。其实以我的积累,应该是远远不够的。

用户体验包括四个因素:品牌,功能,usability和内容。现在大家常常误认为:用户体验=易用性(或者可用性/usability)。其实不然。

web2.0最不缺的是功能,每一个创业者都是认为自己发现了用户的某一种需求,而市场上没有任何产品可以去满足,因此觉得自己可以开发出具备某些功能的2.0产品。。这方面,不多说什么,只是说一点,细分用户群,必定会成为竞争趋势。。仔细研究了用户群,深入挖掘他们的特点和需求,在最开始就做到高的粘着力,是否更好了?

在品牌上,很多人对这一点的忽略,导致了用户体验的整个盲目。现在我问你,sina,sohu和网易,有什么差别?普通用户可不清楚,都是门户网站。。好像网易开发游戏,sohu还开发了搜索,sina,好像经常做赞助活动。。这就是品牌么?现在问你Nokia和Moto有什么差别?你能回答吧。。品牌和用户体验的关系,是互相影响的。。你用Nokia,发现它简单朴实,好用,还抗摔。就是样子有点。。那么nokia的品牌形象排除了价格因素后就是这样,简单朴实好用机身抗摔,样子一般了点。。现在如果有人推荐你,某个品牌,它是如何的有趣个性时尚,然后你一使用,发现:切,哪点特别的,跟Nokia差不多,还不如买Nokia。。失败了吧,因为品牌没有独特的个性,带来的用户体验期望值和现实落差,将会让你的目标用户转头而去。。网易相册和其他的相册,有什么差别。。和flikr反正是大大的不同。。

在内容上面。虽然说,web2.0是用户参与,很多网站的内容都是用户来建设。。但是在用户参与之前,你要想,用户为什么要参与。。只因为我没有日记本,你给我一个日记本,我就一定要用你给的这个来写么?用户是否参与,参与程度多少,这些都取决于你现在的内容。。你现在是空的。。鬼知道你这个网站是不是快黄了,我干吗要在这写啊。。你现在很多,但是都是转载的,没几个用户在写。。骗我么?我写了根本就没有几个人看。。好,现在你的内容很多,用户也开始很多了。。但是,天啦,这些内容也未免太广告性了吧。。。或者,用户想,我写了你会不会到处转载啊。。你们这的用户素质怎么样啊。。。而且,形式上,你的品牌,说一点关联性,品牌你标语说时尚个性,网站样子看上去土拉吧唧的,马上用户的信任度就降低了。。

Usability,网站当然要好用了,很迅速的完成内容提交,或者找到目标内容,这是当然的。。但是不是随便一个你觉得交互方式很流畅的网站,都可以完全拷贝复制。幸亏世界如此丰富,不然我们做交互设计的,就跟做数学公式一样了,多没意思,一个套路。。不同的用户,习惯不同的交互方式,他们喜欢什么样子的,这便是用户研究里面要做的一部分工作。。这样的研究结果,帮助你的交互设计具备了自己的个性。。usability测试的结果,是要知道你的目标用户群的看法,发现的问题,而不是科学研究,三步如何变成两步。

]]>
Wed,21 Jun 2006 11:16:23 CST 0
<![CDATA[再次体会到“流程很重要”]]> .html 针对yahoo的工作流程,进行了讨论,明确了流程是怎样的。今天更加深刻的体会到,这个流程是多么的重要。还好,是一个小东西,但是返工让我更加明确,流程中强调的每一个环节都不可缺少,而且每个环节都要做到细致。

总结一下:

1.跟产品负责人的交流中,信息架构要做详细。
  这是第一步,也是非常重要的一步。一定要明确产品负责人看产品的角度,把握住所做产品的目的,不能弄清这些问题,在后期会出很大问题的,“良好的开始是成功的一半”。同时也要注意的是,要有意引导这个流程,你不去向负责人索取信息,那么对方也不知该提供怎样的信息。于是在制作的过程中,就容易臆断,与产品经理的期望效果越偏越远。确认信息时不要怕麻烦,要相信,产品负责人也是乐于进行讨论的,因为他也要在开始就心里有底。

2.作为一个UE的角色,要将自己看问题的角度表达出来。
  我在制作的过程中,更多的想到的是用户体验,尤其是usability。而产品经理站在他的角度,所需要体现的也许会不太符合usability的原则。这时,一定要表达出这个易用性的错误表示出来,然后让产品经理去权衡。

3.在制作过程中,与产品经理进行适当的沟通,确认当前进度。
  在制作过程中,不可避免的还会产生一些问题,比如说布局,风格等。这些问题一定要分步骤的确定,不要一下子就将细节全做完了,那样很可能造成无用功。(这个问题在前面的文章提到过,重申一下,因为确实重要)

4.常反思,在工作中所出现的问题。
  所遇到的问题,如果出现过两次,那一定是因为自己没有反思和总结。问题都是可以解决的,甚至是可以避免的。告诉自己,“不应该在同一个地方跌倒两次”,遇到问题不可怕,重要的是下次遇到之前,能够绕得开。

  总之,流程对于避免重复劳动,有着相当大的作用。同时,可以使team中的其他成员,更了的理解你的职责。
  

]]>
Wed,21 Jun 2006 11:12:00 CST 0
<![CDATA[网页Web设计流程 ]]> .html
2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;

3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;

4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;

5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;

6.内容流程,客户的书面材料利用各种网页技术(CSS、JAVA、FLASH),有机的和相关的图形整合在一起;

7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;

8.交付]]>
Wed,21 Jun 2006 11:07:42 CST 0
<![CDATA[界面设计规范]]> .html 界面测试
界面测试(红鬃野马)作者:flowingice

我在工作中总结了一些有关界面设计与测试的规范,与大家共享。 界面设计与测试规则
界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的*作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。
目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。

1:易用性:
按钮名称应该易懂,用词准确,屏弃没楞两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确*作。

易用性细则:
1):完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
3):按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。
5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 
6):同一界面上的控件数最好不要超过10个,多于10个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab
8):默认按钮要支持Enter及选*作,即按Enter后自动执行默认按钮对应*作。
9):可写控件检测到非法输入后应给出说明并能自动获得焦点。
10):Tab键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项,并支持Tab选择。
13):选项数相同时多用选项框而不用下拉列表框。
14):界面空间较小时使用下拉框而不用选项框。
15):选项数叫少时使用选项框,相反使用下拉列表框。
16):专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。
2: 规范性:
通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则:
1):常用菜单要有命令快捷方式。
2):完成相同或相近功能的菜单用横线隔开放在同一位置。
3):菜单前的图标能直观的代表要完成的*作。
4):菜单深度一般要求最多控制在三层以内。
5):工具栏要求可以根据用户的要求自己选择定制。
6):相同或相近功能的工具栏放在一起。
7):工具栏中的每一个按钮要有及时提示信息。
8):一条工具栏的长度最长不能超出屏幕宽度。
9): 工具栏的图标能直观的代表要完成的*作。
10):系统常用的工具栏设置默认放置位置。
11):工具栏太多时可以考虑使用工具厢。
12):工具厢要具有可增减性,由用户自己根据需求定制。
13):工具厢的默认总宽度不要超过屏幕宽度的1/5。
14): 状态条要能显示用户切实需要的信息,常用的有:
目前的*作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一*作需要的时间较长,还应该显示进度条和进程提示。
15):滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
16):状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。
17):菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
18):菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。
19):右键快捷菜单采用与菜单相同的准则。


3:帮助设施:
系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。

帮助设施细则:
1):帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明,让人困惑)。
2):打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。
3):*作时要提供及时调用系统帮助的功能。常用F1。
4):在界面上调用帮助时应该能够及时定位到与该*作相对的帮助位置。也就是说帮助要有即时针对性。
5):最好提供目前流行的联机帮助格式或HTML帮助格式。
6):用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。
7):如果没有提供书面的帮助文档的话,最好有打印帮助的功能。
8 ):在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

4:合理性:
屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。

合理性细则:
1):父窗体或主窗体的中心位置应该在对角线焦点附近。
2):子窗体位置应该在主窗体的左上角或正中。
3):多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。
4):重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
5):错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
6):与正在进行的*作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。
7):对可能造成数据无法恢复的*作必须提供确认信息,给用户放弃选择的机会。
8):非法的输入或*作应有足够的提示说明。
9): 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
10):提示、警告、或错误说明应该清楚、明了、恰当。
5:美观与协调性:
界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

美观与协调性细则:
1): 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。
2): 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
3): 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
4): 按钮的大小要与界面的大小和空间要协调。
5): 避免空旷的界面上放置很大的按钮。
6):放置完控件后界面不应有很大的空缺位置。
7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。
8): 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows界面色调。
9): 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
10): 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
11): 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。
12): 如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。
13):对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。
14): 通常父窗体支持缩放时,子窗体没有必要缩放。
15):如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

6:菜单位置:
菜单是界面上最重要的元素,菜单位置按照按功能来组织。

菜单设测试细则:
1):菜单通常采用“常用--主要--次要--工具--帮助”的位置排列,符合流行的Windows风格。
2):常用的有“文件”、“编辑”,“查看”等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。
3):下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。
4): 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。
5): 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。
6): 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。
7): 菜单深度一般要求最多控制在三层以内。
8): 对常用的菜单要有快捷命令方式,组合原则见8。
9):对与进行的*作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。
10):菜单前的图标不宜太大,与字高保持一直最好。
11):主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。
12):主菜单数目不应太多,最好为单排布置。
。7:独特性:
如果一味的遵循业界的界面标准,则会丧失自己的个性.在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

1):安装界面上应有单位介绍或产品介绍,并有自己的图标。
2):主界面,最好是大多数界面上要有公司图标。
3):登录界面上要有本产品的标志,同时包含公司图标。
4):帮助菜单的“关于”中应有版权和产品信息。
5):公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

8:快捷方式的组合
在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户*作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。 
菜单中:
1):面向事务的组合有: 
Ctrl-D 删除 ;Ctrl-F 寻找 ;Ctrl –H替换;Ctrl-I 插入 ;Ctrl-N 新记录 ;Ctrl-S 保存 Ctrl-O 打开。
2):列表: 
Ctrl-R ,Ctrl-G定位;Ctrl-Tab下一分页窗口或反序浏览同一页面控件;。
3):编辑:
Ctrl-A全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z撤消*作;Ctrl-Y恢复*作。
4)文件*作:
Ctrl-P 打印;Ctrl-W 关闭。
5):系统菜单
Alt-A文件;Alt-E编辑;Alt-T工具;Alt-W窗口;Alt-H帮助。
6):MS Windows保留键:
Ctrl-Esc 任务列表 ;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用 ;Enter 缺省按钮/确认*作 ;Esc 取消按钮/取消*作 ;Shift-F1 上下文相关帮助 。
按钮中:
可以根据系统需要而调节,以下只是常用的组合。
Alt-Y确定(是);Alt-C取消;Alt-N 否;Alt-D删除;Alt-Q退出;Alt-A添加;Alt-E编辑;Alt-B浏览;Alt-R读;Alt-W写。
这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。 
9:安全性考虑:
在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的*作也会因没有存盘而全部丢失。


安全性细则:
1):最重要的是排除可能会使应用非正常中止的错误。
2):应当注意尽可能避免用户无意录入无效的数据。
3):采用相关控件限制用户输入值的种类。
4):当用户作出选择的可能性只有两个时,可以采用单选框。 
5):当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
6):当选项特别多时,可以采用列表框,下拉式列表框。
7):在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的*作。
8):对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
9):对可能发生严重后果的*作要有补救措施。通过补救措施用户可以回到原来的正确状态。
10):对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
11):对错误*作最好支持可逆性处理,如取消系列*作。
12):在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的*作。
13):对可能造成等待时间较长的*作应该提供取消功能。
14):特殊字符常有;;’”><,`‘:“[”{、\|}]+=)-(_*&&^%$#@!~,.。?/还有空格。
15):与系统采用的保留字符冲突的要加以限制。
16):在读入用户所输入的信息时,根据需要选择是否去掉前后空格。
17):有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

10:多窗口的应用与系统资源:
设计良好的软件不仅要有完备的功能,而且要尽可能的占用最底限度的资源。
1): 在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。

2):在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS系统资源。
3):关闭所有窗体,系统退出后要释放所占的所有系统资源 ,除非是需要后台运行的系统。
4):尽量防止对系统的独占使用。

]]>
Wed,21 Jun 2006 11:02:33 CST 0
<![CDATA[UI设计的定义以及定位]]> .html UI设计的定义以及定位
  作者:LuckyZ,原出处:ChinaUI论坛
  
  界面设计(UI Design),交互设计(interactive design),可用性研究(usability research),人力因素(human factors),信息结构工程师(information architect)
  
  在美国,这些工作职位的区分并不是很容易。也许不同的公司有不同的职位名称和工作重点,但是有一点可以肯定,他们设计的产品与人类都有有强烈的互动性。
  
  在与国内同行探讨中,不止一次有朋友将自己的设计作品Email过来,希望得到我的意见。打开Email,看到的只是一个截图(Screenshot),就有些纳闷,UI设计怎么能用静态的图像来表现呢?虽然我也接受过一些正式的色彩和Layout训练,可是凭心而论,可能我没有什么资格对那些作品发表评论,因为他们的确色彩搭配赏心悦目,Layout结构合理,个人风格突出,我只能说,朋友,Good Job,但是你错过了UI设计中最重要的部分。UI设计不只是给人提供视觉上的享受,真正UI设计的好坏,必须要设定一个任务,从头至尾使用一遍才能知道。 UI的概念是动态的过程,是逻辑的推理,也是各种状况的预测。如果衡量UI设计只有一种标准,那就是用户体验(User Experience). 用户体验是以用户为中心的设计(UCD/User Centered Design)中最重要的一个部分,强调的是过程,是软件对用户行为(User Action)产生的反应与用户期待值的误差测试,也就是说,这种误差越小,也就越符合以用户为中心的设计原则。
  
  在西方,UI行业的兴起要归功于以计算机为主的高科技迅速发展,尤其是视窗操作系统的普及,然而广义的UI概念在十七世纪的工业革命阶段就已经开始,只不过,把易用性带入机械的设计还是一种无意识的举动,再加上当时几乎所有的工业程序都是由熟练工人一手操办,就更加减弱了易用性设计的能见度(visibility).
  
  在我从事UI设计的最初两年之中,对于UI的定义有个极大的转变,这也从而影响了我的设计风格。在我的定义里,只有两种用户,过程为主的用户(process oriented end user),和结果为主的用户(result oriented end user).

   过程为主的用户的典型例子是电玩族,他们追求的终级目标就是视觉听觉的冲击和享受,最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的,绝大多数设计师都有深厚的美术功底。然而,与结果为主的用户设计相比,它的市场和受众都要小的多。
  
  结果为主的用户不在乎用什么样的方式完成任务,但是任务必须以最短的时间,以最简洁的方式,最精确的运算结果来完成。这些用户通常是工业化软件的受众,工作环境以大型企业为主,软件最终运算结果对于企业的运行和管理有着重大的意义,稍有偏差,可能会对企业产生重大损失。对于此类用户的产品设计人员来讲,绝大部分部分时间可能用在设计任务的逻辑流程(logical task flow),以期最大幅度的符合人脑的思考方式和认知过程(cognitive process)。
  
  平面设计(包括icon, logo, button, etc.)至多是UI定义中很小的一部分,也是微不足道的一部分。并不是我轻视它,在以前的论述中已经提到过,目的为主的用户对于完成任务的欲望已经大大超出了对色彩的挑剔。同时,视窗和JAVA环境下的开发更多的朝着工业化和标准化的方向迈进,这已经给专攻色彩和搭配为主的人没有留有太多的发展余地。
  
  在这里花了很多时间探讨对UI的定义,虽然知道我的看法对一些同行来说是偏激的,最主要的目的是要传达一个讯号,从业者以及业界对于UI的定义可能会决定UI在中国有多大程度的发展,甚至存亡,如果把它转换成眼前的利益,则是UI设计师能否在企业中受到与工程人员同等的重视,以及福利。也许你会说,中国有自己的国情,美国的东西未必能在中国行的通。其实即使是在美国,不是所有的公司都会有专门的UI组,很多工程部门对UI存有偏见,错误的认知,甚至轻视和嘲讽。人机交互科学在美国已经经历几十年的发展,过程从未顺利过。然而,随着学术界将此门学科正式列入大学,己及研究所课程,业界更多投资在将研究成果转换成生产力的过程中,人力因素(human factors) 已经逐渐形成自己一个清晰战略发展态势。
  
  UI在中国发展需要是一个自上而下的推动性改革。中国的软件开发已经很大程度上与西方接轨,我们没有那么多时间让真正意义的UI慢慢渗入开发过程。
  
  在中国,将一个新的概念或产业名称带入产品开发,并使其发展壮大,最大的源动力应该是投入的回报率。这也是许多同业人推荐将UI设计带人尝试性的项目,用成功的案例来让更多的企业信服并采纳用户为中心的设计方法。
  
  然而,能够找到一个有效的商业环境,让相仿产品在其他方面势均力敌,最终凭借UI设计的优势胜出的案例几乎是不可能的。
  当一个产品成功打入市场的时候,人们看到的是其强大的功能,上乘的质量,周密的市场策略,合适的价格定为,甚至是美观的包装设计,而很少有人会将亲和性的界面设计放在功劳簿上。
  
  界面设计所倡导的是可用,易用,然而在消费者心中可用,易用是理所当然的,所以当产品具有了以上优势,设计因素会被忽视,而当一个产品因设计不良出现问题,可用和易用便会被揪出来大加鞭挞。
  
  为弥补设计不足的印象,或者说给UI设计找一个正当性,于是某些企业更加强调UI设计中德美观和创意性,而忽略了易用的开发投入。这在短期中可能会有帮助,因为色彩创意是看得见模的着的东西,会对客户有暂时性的心理暗示,然而长期来讲,会因忽略易用而使产品冠上消极的印象在长时间内很难消除。而对UI错误的定义则可能会导致从业人员沦为产品后期装饰和创意而无法参与产品的早期开发。
  
  毫无疑问,UI设计优势在产品竞争中扮演的重要角色是无庸置疑的,但是,这种优势实现和意识都是长期性的,而非短期行为。他意味着需要相当长的时间让客户了解到,但是一旦形成此种心理上的优势,就会在很长的时间内存在,会将易用的心理暗示代入整个产品的后续开发甚至整个品牌。
  
  UI以及相关行业在中国的发展应该不是自下而上的,受制与消费者缺乏与之相关的概念要求以及作为专门学科未在大专院校及研究部门广泛设立的现实,无法由消费者和终端用户推动这一行业的发展。
  
  时间上,中国的硬件配置,软件开发技术与西方不相上下,我们没有那么多时间让真正意义的UI慢慢渗入开发过程。
  
  当然UI设计的定位有一个很大的利益分配的问题。任何一个新兴行业的兴起都是以另外一个较老旧的行业作为牺牲代价。在我们们所说的较理想的设计环境中,它所意味或暗示的东西是目前正在作真正意义上UI设计或结构的那一批人将不得不放弃现有的资源,这些难题不是能用技术来解决的,也无法经由一些人的呼吁,或者几个个别的案例来说服即得利益的一批人放弃手中的资源。
  
  在企业内部研发部门需要一批能够从战略角度和长期利益出发认识到UI设计重要性的高级管理人才,从而将UI设计在产品生命开发周期中正式的程序化,制度化,创造工程与设计部门共同探讨产品的早期设计的机制和公司文化,并主动向客户宣传用户为中心的设计理念,增加UI设计的能见度。同时,当UI设计不再被外界偏视为装饰性的行业,同时不被本公司的工程部门轻视时,与之相关的培训和大学科研部门也会加大投资力度,培养出更专业的人才,行成良性循环。
  
  当然,如何将UI设计合理有效的整合到产品开发过程当中以期产生最大生产力,在美国也是一个未知数的课题。不同公司根据开发部门大小,产品特性,公司文化等总结出适合自己的一套东西,很难说哪一种更好。我在近两年参与旧金山湾区交互设计特殊兴趣小组(
www.baychi.org)活动时,曾非正式的访问了硅谷几家企业的资深设计师,这其中包括IBM,Adobe,Google, 和WebEx,
  他们代表了不同大小,行业,设计平台,以及公司文化。我将在以后的文章里将采访的内容作一个总结,与大家分享。
  
  从业人员的培训是至关重要的,培训方向应该是从实践到理论。
  
  人机交互科学是跨学科的科学,包括了计算机科学,心理学,社会学,人类学,以及工业设计。同时,根据UI部门分工细致程度,对背景要求也不一样。在中国尚无任何一家高等院校提供人机交互学学位教育的情况下,对从业人员的在岗教育显得格外重要。
  
  其中有数次跟国内同行交流中,听到最多的抱怨是对设计总体格局缺乏控制权,或者只能在有限空间发挥自己的设计理念。这里面固然有程序上的问题,但我的总体感受是,许多设计师把自己的工作范围定义在了狭小的空间而未能在业务的广度和宽度上拓展自己的知识。UI设计本身有很多共通的地方,然而,今年来高科技的发展,已经将计算机科学分工更细,每一门附属学科每天都在变化。也许穷尽一个人毕生的经历,也只能对某一学科略知一二,所以我无法想像,作为一个UI设计师如何能在不了解产品和技术的情况下参与与工程部门的决策,如何能在只了解颜色和构图的基础作出精彩的设计,毕竟,我们的产品不是给人看得,而是给人用的。
  
  目前大部份UI从业人员没有受过正规人机互动教育已经是不争的事实,从实用的角度出发,由实践到理论的培训方法也许更加快速有效。

]]>
Wed,21 Jun 2006 10:55:59 CST 0
<![CDATA[UI设计流程及讨论结果]]> .html UI设计流程及讨论结果

工作方法和工作流程有时候会决定产品的成败。
 
以前我也是对这些国外公司提出的一些工作流程不屑。国情不同,环境不同。
但是随着参与的项目增多,当你想提升产品质量、提高工作效率的时候,会努力自己整理一套认为合理的工作流程,并将工作逐步的细化。
突然发现,原来和那些以前自己不屑的流程是非常相似的。
 
昨天发现这篇文章,我觉得对我们,尤其是UI team还是有很大的帮助的。
 
看看雅虎网站项目工作流程
 
总结起来就是:
1. 产品制作人,写产品计划书。
2. 用户体验研究员,作调查分析。
3. 信息建构师,设计产品架构。
4. 互动设计师,作出互动流程。
5. 视觉设计师和用户界面设计师,作出页面视觉设计。
6. 前台工程师,前台开发。
7. 后台工程师,后台开发。
8. 用户体验研究员,做用户测试确保质量。
虽然我们现在没有相应的专职岗位,但不代表相应的步骤不需要做。
 
 
 
总结近几天UI team参与的几个项目,或多或少都走了一些弯路。
大量的“返工”是这几个项目中都出现的问题。
 
虽然这几个项目都在初期找到相关人员做了比较长时间的讨论。但是最终确定下来的需求并没有明确到点。
而且在后续的工作中,没有进行需求细化和分析工作。导致search首页设计风格完全背离了产品负责人的初衷。设计师理解的“娱乐风格”显然不是那个样子。
 
这里我想强调的,就是在产品负责人层面,需要需求明确,而且要确认设计师正确理解了你的需求。
产品定位、功能点、相应文案资料。需要在讨论会上都确定下来。不要在后面边想边做。
既然确定了,在后续的进程中,就不要随意的修改。这是对产品的负责,也是对你本人和设计师的尊重。因为你是第一步,你的每一个思想,都将决定产品将来的成形的样子。你的后续修改,需要考虑一下成本了。
考察设计师是否合格,可以看他的作品。那考察产品经理是否合格,就要看他这一砖拍下去,是不是砸得准了。
 
对设计师,你需要一层一层地推进,逐步核对确认,保证你没有偏离正确的方向。
视觉设计是比较靠后的一步,之前的调查分析、信息架构、交互流程有没有做?有没有确认?如果这些都不确认,直接设计出来页面,一旦偏离了正确方向,那返工的痛苦只能自己忍受。
拿search这个项目举例。产品方面已经多走了一步,提供了一些可以参考的调研数据(虽然不是很具体,但是已经能够显示大致趋势),同时还画出了建议的结构图,相当于帮你进行了信息架构和交互流程。
那你需要做的第一步就应该是完善这些数据,制定详细的页面原型。提交确认。
这一步确认无误之后,再考虑视觉设计。该用什么风格、什么主色调。再提交确认。
然后才是细节如何修饰等等。
 
虽然目前咱们部门,这几步都要一个人来做。但是对这一个人来说,需要明确步骤,把自己当作多个人方式去做。每一步中要钻进去专心研究,然后要不时的跳出来,看看你钻的方向是否正确。
你的工作应该是按步骤整体推进式的,而不是一条线、一个单一页面走很远,再回过来顾及其他。
 
 
另外,我们需要的是设计师,不是美工。
设计师和美工的区别是“思想”。设计师在作品中融入自己的思想,美工则是他人的思想。
这里我也想希望其他同学配合一下,设计师的工作过程中,不要一堆人站在旁边,指指点点。这样你们培养出来的人永远不会成为设计师,导致的是以后所有的东西,都还是需要你投入大量精力参与设计部分。
 
对于设计师本人,也要掌握工作技巧。你的作品可以先在小组内交流讨论,吸取一些小组人员的建议,完善后,召集相关人员ppt演示,同时收集大家意见,再修改。最后ok。
不要改一版一个mail,这样对大家是浪费时间,同时大家看mail时都不是来专心思考你的作品,所以提出的建议难免周全,对你自己也不会有太大帮助。
 
ppt演示的方式,可以让设计师自己进一步完善自己的思想。因为你需要为演示作准备,为大家可能提出的问题准备答案。这个思考过程,产品本身也会不断完善。
  
好了,mail写了这么长,其实也是不应该。只是在推荐雅虎的工作流程时,结合近期的工作多想了一些,索性就写下来了。
毕竟UI team还很年轻。需要大家的关心不断成长 ^_^
 
感谢同学们看完这么多文字。
不妥之处,可单独找我交流。共同进步~
]]>
Wed,21 Jun 2006 10:52:58 CST 0
<![CDATA[网页设计跟平面设计有区别吗? ]]> .html 一天, 有人问我在公司做什么?
我说:"主要也就是负责网页设计和网站建设的工作吧。"
他说:"那你的平面也应该很厉害咯?"
我说:"一般般吧。"
他说:"做网页不跟做平面差不多吗?"
我沉默了一会儿,说:"还是有一点区别的。"

网页设计跟平面一样,这是大多数人的理解。它们到底一样吗?


先来看看网页设计跟平面的共同点:
1. 都需要良好的视觉表现
2. 做网页设计和平面设计的人都需要有良好的审美能力
3. 它们都是在平面上做设计,而不是空间中做设计
我想,可能正是因为第三点,大家都把他们混淆了。

那么它们之间到底有什么不同呢?
1. 设计理念的不一样
平面设计的核心是品牌。它要以品牌为出发点去设计,要在视觉上100%体现品牌的魅力。
而网页设计的核心是用户。网站的目的是与用户100%沟通,是要实现某些特定的功能,这有点像电脑中的软件。那么网页设计其实是一种UI设计,也就是所谓的界面设计,要以用户的操作习惯为出发点去设计,换句话说也就是要设计得人性化,让用户使用得更方面,长时间盯着网页看也不觉得累。这也就是为什么众多门户要用白色做为页面主色调的原因,因为白色看久了不会造成眼睛疲劳,而鲜艳的颜色看久了会眼困!

2. 颜色运用的区别
平面设计可以使用成千上万种颜色,换句话说可以使用所有颜色,但是网页设计不行!网页设计中规定了240种安全色,也就是说只能使用这240种颜色才能使网页更加漂亮,更加有兼容性。

3. 特殊的要求
网页设计不仅仅是在做设计,更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。我们往往看到门户站的网页都是大量的文字,这其实是为了减少页面的打开时间。韩国的网站喜欢用大量的图片、FLASH,那是因为韩国的网络带宽全球第二,它有那个条件去大量的实现视觉冲击!而目前的中国不行!

4. 最后说一点,就是很多人觉得做网站就要做得很绚丽,很好玩。其实这些人是把做网站和做网络广告给弄混淆了!
我们平时看到很多品牌的网站,很绚丽、很好玩、甚至很有创意。但是别忘了!那其实是网络广告而已!虽然那表面上是个网站。网络广告的目的跟其他广告一样,为的就是宣传品牌形象、介绍产品功能等等。但是网站不一样!一个网站是要实现某些具体的功能,也就是说网站是要功能>美观,而网络广告是要美观>功能。

希望大家能从这篇文章中知道平面跟网页的区别,不要下次再跟别人说:"网页跟平面是一样的!"之类的不专业的话了!

文章来源:X设计联盟

]]>
Fri,16 Jun 2006 14:10:04 CST 0
<![CDATA[我在博客有家了]]> .html  我已经在博客网落户了,欢迎你时常过来看看,大家多多交流哦。我会在这里记录我的工作也会记录我的心情与你分享。也希望你记住我的地址,你可以把她添加到你的收藏夹(Ctrl+D),也可以把她复制下来告诉你的朋友们

 我的博客地址:  http://chunchunliu.bokee.com

]]>
Thu,15 Jun 2006 10:20:07 CST 0