专业设计师:知识越多,效率越高

设计师并不仅仅让设计看起来美观

很显然,用户体验设计师设计用户体验,但是,我们所说到的“用户体验”到底是什么呢?在网络上,当用户使用一个网站或者网页应用的时候,用户的整体体验由很多方面构成:

网页给人的视觉感受
用户是否能达到他的目的
网页响应用户的整体速度
预期是否发生,例如,如果用户认为网页会对自己的操作产生某种形式的响应,但是却并没有,他会感到很失望。

以上只是举些简单的例子。那么什么才是良好用户体验的要素呢?可以这么说,所有的细节都是。

您网站的用户体验并不仅仅是指您的网页看起来如何,或者是当用户点击一个按钮时会发生什么,也不仅仅是指用户完成预定目标的流程,而是包括了一切细节。从用户打开您的网站到离开的整个过程中,他所做的一切和经历的一切都是用户体验的组成部分。用户体验设计师的工作是非常重要的,多方面的知识能使他的工作发挥更大的效用。

用户体验设计师需要知道什么

用户体验设计与用户界面设计并不相同,涉及的方面要多得多。个人认为,用户体验设计师的工作应该包括用户界面设计,以及用户在达到目标过程中的任务流程设计,需要设计师了解可用性测试的知识,了解易用性和一些用户的特殊需求,还需要了解系统的基本功能是怎么在运作的。

最优秀的用户体验设计师能结合多个学科的知识(如设计、开发,心理学)运用到工作中以最大限度地使用户受益。

例如我在Twitter上和Lukas的会话中举过的一个例子,一个用户体验设计师需要知道Ajax如何工作才能更有效地使用它。如果你不知道Ajax如何工作或者服务器请求是如何工作,你又怎么能确定在某些特定的环境中,Ajax方式对于用户体验来说是最好的?Lukas在Twitter上的留言里这么回复:

这恰恰是忽视代码实现而改善用户体验的一个完美的例子;页面刷新会使页面更容易和快速地执行。

正如我在下一段留言里所指出的,Lukas所说的实际上并不正确——在很多情况下,相比整页刷新页面,Ajax请求事实上执行得更快。刷新整页会向服务器发送更多的HTTP请求(例如请求CSS、JavaScript和图片文件),但在很多情况下,Ajax请求仅仅返回一段文本数据,所以它向服务器发送的请求要少得多。在绝大多数情况下,用Ajax请求来发送或者获取数据比整页刷新都要快。

我怎么知道这些的呢?因为作为一个网页用户体验设计师,我需要知道HTTP请求如何工作以及Apache(译注:一种服务器软件)如何响应浏览器端的请求,并且知道当我发送一个Ajax请求的时候服务器端在执行什么样的代码。只有知道这些,才能在使用Ajax或者刷新整页之间选择前者作为解决方案。很多时候我决定用Ajax,正是因为它更快速并且使应用程序更加灵敏地响应用户操作。用户体验的很大一部分来自于用户对应用程序的响应速度的感觉,所以,我使用Ajax是一个以用户为中心的决定,因为我知道这样做能提高用户体验。

如果有些人仅仅从表面上了解Ajax的运作(“页面没有刷新但是执行了某些代码”),那么,他在作出决定使用Ajax而不是整页刷新时候,其实并不完全知道Ajax的运作机制,有什么好处,有什么弊端,对应用程序的性能产生什么作用,以及如何影响应用程序缓存等等。这仅仅是一个在对关键知识没有全面了解的情况下靠拍拍脑门就做出的决定。

设计大师熟悉自己的工具

建筑设计师并不仅仅画蓝图,他们需要知道工程地区的地形地貌、气候特征,以及考虑这各种因素选择什么样的建筑材料才最合适。他们并不仅仅是画图,还需要了解建筑工艺和整体结构,需要对建筑材料和建筑过程有深入的了解,这样才能更有效地开展工作。

厨师并不仅仅是把各种食材配料堆在一起然后祈祷上天就可以变出美味的大餐,他们需要对食物以及不同人群的口味有深入了解。

陶艺师并不仅仅是雕刻出漂亮的泥坯,他们还要烧制泥坯成型。他们需要知道关于上釉、温度和烧制的科学工艺,才能像制作艺术品一样来完成他们的工作。

正如建筑设计师、厨师和陶艺师一样,用户体验设计师也需要知道关于网络环境和媒介的知识。网页设计师设计网页,并且熟知可以将他们的设计图最终实现成用户界面的HTML和CSS。如果他们不懂得HTML和CSS,那么他们并不是真正地设计网页,因为他们的设计不会考虑网络环境的制约。当一个自诩为网页设计师的人对网络媒介并没有深入了解的时候会出现什么情况呢?在对自己的设计将如何影响用户体验缺乏足够了解的情况下做出的决定,无疑是很糟糕的。举个例子:

设计师A传给HTML/CSS开发人员B一个用户界面的设计图稿。这是一个由多种元素组成的复杂的界面,每个框的每个角都是圆角,并且有3种不同的边框,还加上了阴影效果。设计稿上的字体都是设计师专用的字体,而没有任何用户电脑上默认的网页字体。

这个例子里,由于设计师对于网络环境的一些局限并不熟悉,他们选择了大量给用户体验带来负面影响的素材来做设计。为了实现那些框的圆角,并且考虑到框会随着里面内容而被撑大,你需要增加HTML标记,CSS和图片来实现。复杂的边框样式?意味着更多的代码标记和图片。阴影效果?那简直需要一摞的具有半透明特殊效果的PNG格式的图片。自定义的设计字体?你可能需要用到“可伸缩Inman Flash替换”技术来实现了(译注:即sIFR技术,可参考百度百科:http://baike.baidu.com/view/1311052.htm)。

使用大量额外的代码标记、图片、Flash文件和javascript仅仅为了实现一个对用户来说并没有多大益处的效果。用户在看到他们期望看到的网页之前需要下载许多字节的数据。加载页面额外的耗时仅仅因为对网络媒介缺乏了解的设计师在设计网页的时候脑袋中并没有考虑网络环境和网络媒介的局限性。

这是否意味着你在网页上不能实现一些漂亮的界面效果呢?当然不是,看看网上有那么多看起来漂亮的网页,运行起来也很漂亮。但是那种绘画风格浓重的网页,体积难道不是都很庞大并且很慢?难道不是有很多对用户体验并无好处的视觉效果?事实上他们并不是那么漂亮,并且这也不应该是你设计网页的方式。

你不需要是专家

要理解Ajax请求如何工作,并不意味着你需要为实现Ajax请求去亲手编写JavaScript代码,或者研究Apache服务器的进程处理,但是你需要对它足够理解,才能对它的用途作出合理的判断。正如建筑师在选择各种建筑材料时,并不会因为某种材料看起来比较酷而选择它,他们在做出选择时会综合考虑各方面因素,例如材料的结构硬度、价格、以及缺陷等等。他们在对材料足够了解的基础上作出合理判断,合理选择材料以使物尽其用。

网页用户体验设计师做出以用户为中心的高质量的决策也需要对网络环境和媒介有充分了解。如果一个用户体验设计师想要使用一个复杂的交互模型,例如拖放效果,他需要了解程序实现的这种效果应用在网页上的局限。网页上的拖放和桌面应用的拖放并不相同,因此你需要知道为什么不同,有哪些不同,以及如何正确有效地应用它。如果你时常被网页应用的速度问题所困扰,那么,了解一些关于页面加载执行JavaScript文件的字节数方面的知识就显得非常重要了。你还需要知道身体有残障的用户(译注:例如无法进行精确的鼠标操作的用户)如何来使用网页,以及如何让他们也能使用那些拖放功能。在用户禁用JavaScript的情况下,你知道如何去应对。

做出一个关于设计的决策并不像看起来那么简单。这个决策的制定需要基于很多相关因素,如设计、开发、结构、可用性以及易用性。用户体验设计师的工作需要从整体上考量各种情景和环境因素,以尽可能地使自己的工作卓有成效。是否掌握足够的和自己的决策有关的知识,直接决定着用户体验朝好的或者负面的方向发展。

这有助于你成为专家

掌握足够的知识来做出一些以用户为中心的好的决策,当然非常好,但是如果能对知识有更加深入、高级的了解,则是最好不过的了。如果你作为一个用户体验设计师,希望在某个界面中使用拖放,如果你能实现整个交互的原型,真切感受一下拖放操作的整体体验,对你的工作将会是非常有帮助的。实践出真知,如果你没有动手去用过一个实际的界面,有些东西你很难真正了解。在设计工作之前能够制作出一个实际的界面原型,及时发现一些你所不了解的东西,这是对你的工作是非常有价值的。

随着Apple操作系统的演化,他们的用户交互方式也在不断改进。在Apple公司最新操作系统Leopard以及Apple的许多最新应用中,动画效果和更高级的用户交互方案已作为用户体验的一部分得到运用。如果Apple公司的用户体验设计师完全不了解动画的核心实现,他们就不可能运用Keynote和Flash之类的应用技术来实现动画效果,那么,他们发布的某个用户界面版本很难有实质上的更新。实际上,Apple公司的视觉界面设计师应该知道Flash和Keynote并能用它们来实现用户界面。呃,用户界面设计师应该知道如何编写ActionScript代码才能开展工作?我想是的,如果你不会,那么你团队中会这些技术的那个同事工作上就会比你更加出色。

看看那些那些创建Mac和iPhone应用程序的设计师,他们对于自己设计的界面是如何开发实现的都很精通。设计师们研究Cocoa(译注:Apple的面向对象开发环境,用来生成 Mac OS X 的应用程序),以期能够创建iPhone的界面,因为一个优秀的iPhone界面设计,关键部分并不仅仅是视觉效果,还包括交互行为。iPhone开发上最成功的设计师应该是这样的——他们熟悉设计和开发的知识,并且深入地知道两者的局限制约。看看iPhone吧,他非常轻便,节能,并且没有键盘。整部机器其实就是一个最大的制约,你首先需要知道这些限制是什么,才能在这个平台上获得成功。

用户体验设计师对你来说意味着什么?

现在,对于各种从事网页工作的人有如此之多的头衔,这让我感到滑稽可笑。你可能被称作界面设计师、界面工程师,视觉设计师、用户界面工程师,信息架构师或者用户体验设计师。甚至,你还会被叫做可用性工程师、可用性测试工程师、网页设计师,或者网页工程师。有着这么多的头衔,并且这么多的职业技能需要互相跨越,那么,我们怎么知道用户体验设计师和用户界面工程师的工作如何来进行划分和衔接呢?

我只能结合自己职业生涯中的成功之处来谈一谈自己的看法,那就是,尽可能地学习和自己的工作平台有关的知识。在网络上,我的工作是设计用户流程、交互方案、用户界面模型,所有的HTML/CSS/Javascript雏形,并且有时候还需要把这些原型放到后台与数据库连接。我从开始设计网页入手,学习了HTML和Javascript,然后学习了CSS、jQuery和Prototype框架,再到后来学习了PHP、MySQL和一些Ruby编程的知识。只要有机会我无处不在学习,因为,对于那些与你做出正确决策有关的知识,当然是越熟悉越好。如果你掌握的信息越多,能获得真实体验,并且很深入地了解相关知识,那么你作出的决策会更加正确,你的网站和应用程序对用户来说也更加地友好。

当你需要作出一些重要的,以用户为中心的决策的时候,你掌握的知识永远不会嫌多。掌握越多的知识,你看待问题就会越全面。

文章来自网络,网友翻译,本博推荐。

英文原文:Designers Who Are Technical: The More You Know, The Better Your Work

anymoore.com永久域名启用

    这些年换了不少域名,反反复复也没有满意的,当然自己也没有真正认真的写过博客,国内外各大BS都留下了ENimo到此一游的痕迹,我成了真正的垃圾制造者,这么多年的占茅坑不拉史挺丢人,从今决定投入WP门下,开始整合零六年来能整合的所有博文.

     anymoore会变强大,正在变强大…

完美主义的悲哀

完美主义者的某些X一直为人诟病,其自身也显现一种病态,完美主义者追求凡事尽善尽美,不遗余力的去完善他的产品,产品的开发周期远胜过它的维护周期。
每画一个圆他渴求是宇宙中的绝对球体,每一个椭圆他希望离心率为0.618,要么反反复复的修正完美直到极致,乐此不疲。完美主义者需要广阔的知识面所以要学的东西很多,要求的极度苛刻,使得凡事必躬亲,常被折磨得人模狗样注定不会活得太轻松。
纯正的完美主义者不是病态是变态,因为在他们无法容忍丁点污点,追求唯美,可以吹毛求疵。也许过分追求并不是好事,我们只谈设计,设计需要完美,完美主义者最忌讳的粗制滥造。
完美主义者,继续低调的高歌.

世界靠懒人来支撑

世界靠懒人来支撑,马云给雅虎中国员工的精彩演讲。

今天是我第一次和雅虎的朋友们面对面交流。我希望把我成功的经验和大家分享,尽管我认为你们其中的绝大多数勤劳聪明的人都无法从中获益,但我坚信,一定有个别懒的去判断我讲的是否正确就效仿的人,可以获益匪浅。
让我们开启今天的话题吧!
世界上很多非常聪明并且受过高等教育的人,无法成功。就是因为他们从小就受到了错误的教育,他们养成了勤劳的恶习。很多人都记得爱迪生说的那句话吧:天才就是99%的汗水加上1%的灵感。并且被这句话误导了一生。勤勤恳恳的奋斗,最终却碌碌无为。其实爱迪生是因为懒的想他成功的真正原因,所以就编了这句话来误导我们。
很多人可能认为我是在胡说八道,好,让我用100个例子来证实你们的错误吧!事实胜于雄辩。
世界上最富有的人,比尔盖茨,他是个程序员,懒的读书,他就退学了。他又懒的记那些复杂的dos命令,于是,他就编了个图形的界面程序,叫什么来着?我忘了,懒的记这些东西。于是,全世界的电脑都长着相同的脸,而他也成了世界首富。
世界上最值钱的品牌,可口可乐。他的老板更懒,尽管中国的茶文化历史悠久,巴西的咖啡香味浓郁,但他实在太懒了。弄点糖精加上凉水,装瓶就卖。于是全世界有人的地方,大家都在喝那种像血一样的液体。
世界上最好的足球运动员,罗纳耳朵,他在场上连动都懒的动,就在对方的门前站着。等球砸到他的时候,踢一脚。这就是全世界身价最高的运动员了。有的人说,他带球的速度惊人,那是废话,别人一场跑90分钟,他就跑15秒,当然要快些了。
世界上最厉害的餐饮企业,麦当劳。他的老板也是懒的出奇,懒的学习法国大餐的精美,懒的掌握中餐的复杂技巧。弄两片破面包夹块牛肉就卖,结果全世界都能看到那个M的标志。必胜客的老板,懒的把馅饼的馅装进去,直接撒在发面饼上边就卖,结果大家管那叫PIZZA,比10张馅饼还贵。
还有更聪明的懒人:
懒的爬楼,于是他们发明了电梯;
懒的走路,于是他们制造出汽车,火车,和飞机;
懒的一个一个的杀人,于是他们发明了原子弹;
懒的每次去计算,于是他们发明了数学公式;
懒的出去听音乐会,于是他们发明了唱片,磁带和CD;
这样的例子太多了,我都懒的再说了。
还有那句废话也要提一下,生命在于运动,你见过哪个运动员长寿了?世界上最长寿的人还不是那些连肉都懒的吃的和尚?
如果没有这些懒人,我们现在生活在什么样的环境里,我都懒的想!
人是这样,动物也如此。世界上最长寿的动物叫乌龟,他们一辈子几乎不怎么动,就趴在那里,结果能活一千年。他们懒的走,但和勤劳好动的兔子赛跑,谁赢了?牛最勤劳,结果人们给它吃草,却还要挤它的奶。熊猫傻了吧唧的,什么也不干,抱着根竹子能啃一天,人们亲昵的称它为“国宝“。
回到我们的工作中,看看你公司里每天最早来最晚走,一天像发条一样忙个不停的人,他是不是工资最低的?那个每天游手好闲,没事就发呆的家伙,是不是工资最高,据说还有不少公司的股票呢!
我以上所举的例子,只是想说明一个问题,这个世界实际上是靠懒人来支撑的。世界如此的精彩都是拜懒人所赐。现在你应该知道你不成功的主要原因了吧!
懒不是傻懒,如果你想少干,就要想出懒的方法。要懒出风格,懒出境界。像我从小就懒,连长肉都懒的长,这就是境界。

再次感谢大家!

PS:懒出个性,把懒当做创作的原动力!

CSS设计遇到的IE6-7 FF兼容性问题

直接从自己空间COPY过来的,排版上可能会有点乱。

 

1.概要
1.所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7FF 共用
height: 100px !important;

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
</style>

注意:*+html 对IE7的兼容必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

2最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略
(随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.注意写法.声明位置需要提前.)

<style>
#wrapper {
width: 100px!important;
width: 80px;
}
</style>

3.margin加倍的问题,一个IE6都存在的BUG
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
        display:inline; //使浮动忽略,曾经就在这里出错,摸了半天后脑勺
}

4.另外加上一段IE6对PNG透明支持不好的JS解决代码
function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
        {
       var imgID = (img.id) ? “id='” + img.id + “‘ “ : “”
       var imgClass = (img.className) ? “class='” + img.className + “‘ “ : “”
       var imgTitle = (img.title) ? “title='” + img.title + “‘ “ : “title='” + img.alt + “‘ “
       var imgStyle = “display:inline-block;” + img.style.cssText
       if (img.align == “left”) imgStyle = “float:left;” + imgStyle
       if (img.align == “right”) imgStyle = “float:right;” + imgStyle
       if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle    
       var strNewHTML = “<span “ + imgID + imgClass + imgTitle
       + ” style=”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
        + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
       + “(src='” + img.src + “‘, sizingMethod=’scale’);”></span>”
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, );
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all.currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
   //alert(mypng);
            document.all.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+mypng+“‘, sizingMethod=’crop’)”;
            document.all.style.backgroundImage = “url(”)”;
   //alert(document.all.style.filter);
         }                                              
      }
   }
}
if (navigator.platform == “Win32” && navigator.appName == “Microsoft Internet Explorer” && window.attachEvent) {
window.attachEvent(“onload”, correctPNG);
window.attachEvent(“onload”, alphaBackgrounds);
}

5.只要记住IE7=*,IE6=_,然后按照先Firefox后IE7,最后IE6的顺序进行编写,一般就可以保证大部分用户浏览正常了。

IE5到IE8多版本共存调试浏览器

http_imgload1

基本上可以放弃以前装N个浏览器来调试的方案,IETester就能完全胜任,目前该软件还存在一些BG,不过不伤大雅,现在暂时支持IE5.5—>IE8beta1,已经很不错了,具体信息大家去官网看,强烈推荐给从事WEB设计的兄弟姐妹们!

官方地址:
http://www.my-debugbar.com/wiki/IETester/HomePage