| Burning Shootin...'s profile燃烧流星BlogLists |  Tools  Help |
我们到底需要多么美丽的网页？—从google的设计风格说起近来google的一系列动作让人眼花缭乱，gmail、gtalk…通观google的界面，g氏风格如此强烈，极劲简洁之能事，甚至是略现粗糙。 你是否琢磨过为什么google的设计风格会是这个样子？－－－几乎没有设计，只是使用不同的大小的文字排版，在必要的时候加一道黑线。 如果你是一名网页设计师，你是不是也抱怨过人家为什么能够使用这样的设计，而自己的公司老板或客户却完全不能接受这样的设计，以至于你根本不敢做这样的尝试，因为那样你很可能马上就丢掉工作，只是会给你的老板留下很糟的印象－－－这个家伙根本不会设计。那样做无异于自杀。 是的，我也在琢磨，直到我想到了前苏联的两种轻武器：AK47和ppsh41（波波沙冲锋枪）。 请相信我，我不是在信口开河或者哗众取宠。先让我们来回忆一下这两种武器： ppsh41（波波沙） 这两种武器有着一些相似的特点： 现在回到刚才google的问题上来，google的简单、朴素的风格同样存在着类似的特点： 1.制造成本低，对于网站产品来说意味着设计成本低，同时简单朴素的设计使得用户下载文件量小，保证了浏览速度，也减轻了服务器的负担。使产品开发商和用户的成本都降低了。 2.宽容度高，对于网站意味着可访问性高。简单的设计即使不完全按照web2.0的标准进行页面制作，在不同的浏览器上页面表现的差异也不会很大。提高可访问性的价值在Zeldman的《网站重构》一书中已经进行了充分的说明。 3.维护简单，对网站来说有利于更多的设计师协同工作。修改别的设计师的设计稿会更加容易，同时多位设计师的作品可以更好的统一风格。 4.容易操作，使用者容易掌握。 当你在家休息的时候，你会穿什么样的衣服呢？最舒适的。也许是一件穿了多年的绒衣，或许还有已经开了线的秋裤。它们显然不象你的正装那样赏心悦目，可是有什么关系呢？不幸的是，我们现在大量的网页设计更追求表面视觉上的绚丽，apple风格的水晶效果，特殊的字体，牵强的使用icon，背景花纹…… 如果继续用服装来类比网页设计，那么这样的网页更像动物园服装批发市场里的廉价的时髦的外套，到处是金色的拉链，人造皮毛做装饰，故意显露针脚的缝纫，或许还有个“US ARMY”的徽章。穿着这样的服装是中学生廉价的张现个性的需要，而一个网站是为用户服务的，开了线的秋裤才是更合适的。 虽然，我自以为已经有充分的理由把网页设计的更简单些了，但是，和其他设计师一样，我也仍旧无法这样做，因为毕竟看这篇文章更多的还是设计师，而不是老板，尽管他们在家的时候也穿开了线的秋裤。 web设计师可以走得更远思考web设计师的出路问题，先看看历史： 而事实上呢？ 当然，在这里并非要矫情具体的职位名称，回到最初的问题，web设计师的出路在哪？ 更高的高度在哪？ 互联网的成本我想写这个话题已经很久了，但是一直没敢去写，其一是资历尚浅，也许几年后回头看看自己现在的想法觉得很幼稚；其二是我没有在一流的互联网公司工作过，我经历的都是创业公司，这种经历可能会对我的观点有不小的影响。不过昨天我受一个朋友托付给他们公司的站点提点意见，看了那个网站之后心里又想起这个话题，所以今天写出来，我来抛砖，就等着诸位来补玉了。 我经常遇到一些其他行业的人跃跃欲试的想做个网站挣钱，在他们眼中做网站成本很低，但是很挣钱，即使不能挣钱上市也可以骗骗VC弄点钱花。也不时的听说某某找人投了几十万要做网站，拉几个弟兄，豪言壮语几年做到盈利，几年上市IPO，反正总之是告诉你这是他妈的万里挑一的发财好机会，错过这个村就没这个店了，结果是钱花光了，没几个人注册，最终剩下几台破电脑和一堆鸡肋的页面。。。。 传统行业的人在进入互联网行业之前总是过于轻视了一个网站的成本，他们只看到了一些显性的成本，却低估了背后的隐性成本，所以最终他们会发现花几百万可以在南京路上开个日进斗金的店面而到了网络上也许连1万都赚不了，殊不知盈利的要素其一在于收入增长，其二在于成本控制，一个例子是：Craiglist员工不足30人，去年成本约为1000万美元，但是去年营收却接近1亿美元[盈利9000万美元]，Digg有70多名员工，去年成本约为1400万美元，营收却只有850万美元[亏损中]。两者公司价值相差很大。我们今天不说收入，只说成本。 他们到底低估了哪些成本？以下几点是根据我自己亲身经历或遇到而总结的，每一条我都可以找出若干个例子来证明，所以基本上可以说是有普遍性。 1.人员开支 没人怎么做开发，没人怎么去运营，没人谁去做销售？人员开支会在网站成本中占据相当的比重，这点他们都可以看到，毕竟也是在传统行业有过成功经历的人，不可能没有这眼光，但是他们眼中的人员就是：程序员、美工、运营，略懂一些的会再找个策划，完事。 2.硬件支出 硬件支出这块基本上他们会严重低估的，因为很多人如果不是这个行业的话是不了解一个网站的原理的，在他们眼中一台服务器最多再加个独享带宽就可以解决所有问题了，所以就会出现例如“10M独享能不能做成个youtube这样的站点？”的问题了。 3.开发成本 非常严重的被低估，在他们看来花个几万块钱把需求提的尽善尽美来外包做出一个站点然后就可以一劳永逸的解决问题了，可是哪家优秀的网站会是靠外包做的呢？即使是出钱养一个UI（不对，他们会说是美工）和几个程序员来自己做，也是想当然的认为这就没问题了，认准一个网站就给我照着它抄吧，但是抄到最后总发现还是有问题。当然有问题了，一个完整的开发流程需要多少个角色，需要多长的周期？瀑布模型？哦不，他们会觉得有了程序员就可以搞定一切问题的。 4.推广与运营 这块基本上他们是看不到的，因为他们会根据自己的体验作出判断，他们对于一个网站的认知只在于那一个浏览器窗口和页面，却没有看到这背后的东西。所以我在文章开头说的昨天看到的那个行业网站很恐怖(只能用这个词来形容了)，基本上把整个阿里巴巴给完全抄过来了，哦，还抄了淘宝的一部分。后来我问朋友有多少人在运营这个站点？答曰不到10个，没有推广与市场预算。我。。。。。。。。 他们看不到这些成本，所以他们觉得挺多的几百万就轻飘飘的砸进去却连个响声都听不见，这种例子实在是太多，尤其是在民间资本过于发达的浙江，从某种程度上来说是阿里巴巴的成功误导了这群人，更应该说是成功以后的阿里巴巴误导了这群人，马云更应该把那个家庭作坊式的管理混乱的那个拿到钱后四处扩张惨败而归最后缩回杭州的阿里巴巴讲给他们听听，而不是让他们觉得找十八个人租两件民房捣鼓一个站点就可以再整出个1688来！！！ 我越来越觉得以后是不会有纯正的互联网公司了，互联网早晚会和传统行业完全融合在一起，成为一种工具。到那时，理性的人们也不会去冲动的去有出点钱折腾个网站去上市的想法了，这个行业还是很年轻，互联网的一代还没有成为这个社会中掌握财富的中间力量，这种情况在未来的几十年中应该会逐渐的消失。 这也算是我们这个年代的一个特色吧！ 搜索关注度：金三角理论无独有偶，2005年3月1日美国两家搜索营销公司Did-It,Enquiro和研究眼睛轨迹的公司Eyetools公布了他们对搜索引擎自然排名和竞价排名位置的研究报告。研究的结果同样地证明眼睛运动的F形状模式，而这个模式更加真实地体验在人们使用搜索引擎时候观察搜索结果的习惯。这个眼睛活动的区域，被称为“金三角”，也就是最能吸引搜索者注意力的搜索结果页面上的三角区域。之所以被称为“金三角”，是因为如果把你的网站出现在这个区域，你的网站就足以吸引最多的搜索者的目光，你就能得到他们的访问。
这个“金三角”研究结果最先在2005年1月的纽约搜索引擎战略大会的报告会上公布。Enquiro公司的高德·豪奇科斯说，“以往的研究声称人们是在考虑之后再决定去点击那个搜索结果的。但我们最近进行的几个，包括这个最新的研究发现，人们并不是想了想再去点击一个链接的。人们很快地做出决定，而这个决定是根据人的眼光落在哪里而进行的。这纯粹是你的网站在搜索结果中所处在的位置来判断的。这就同房产销售一样，好地段的房子就不愁卖不掉。” 这一研究目前是基于50名测试者的参与进行的，说服力上不够强。因此，这个研究完成的是第一阶段，还有陆续的发现有待进行。图1是研究中一个Google搜索结果页面的截屏。
图1 Google搜索结果页面截屏 （Enquiro公司授权刊登，2006年5月4日）
研究人员在加州旧金山的一个眼球轨迹实验室里请了50个人来观察五个搜索引擎的搜索结果。Google被选用为实验的搜索引擎。从图4看到，红色、橘红色和黄色构成了明显的三角。这个三角区域的红色，也就是最受关注的区域，是搜索结果页面最上端的一条竞价排名广告和自然排名广告的前两位。 其次，自然排名的第三位和第四位的一部分被画在橘红色，也就是比较受到关注的区域。再其次，黄色区域也就只是染指了第四位，接近第五位。这里，研究者特别画了一条很粗的红色界线。界线下端的区域色彩则变得很暗，既人们的目光懒得去光顾。比较浅的绿色，才涉及自然排名的第六位，而再朝下的第七位到第十位（最底）则几乎得不到眼睛的重视。同样，右边的竞价排名只有第一位和第二位也只是受到浅绿色的关注，其他的广告则没有人们目光的注视而显得一边黑暗、无人问津。 研究人员披露了人们眼光对搜索结果页的自然排名和竞价排名的浏览轨迹也是呈现F形状。上面杰柯伯·尼尔森的研究发现也和这个实验的结果吻合。同样，这个“金三角”研究的重要发现是，搜索引擎优化被证明了远比竞价排名对网站的推广更具有现实意义。这个从下面的搜索结果自然排名的关注程度排列便可说明。关注程度以50名测试者中有多少人去看搜索结果排列的各个位置来决定关注程度。100%为最高，各个自然排名位置所受到的关注程度依次如下： 自然排名的关注度 搜索结果第1位： 100% 搜索结果第2位： 100% 搜索结果第3位： 100% 搜索结果第4位： 85% 搜索结果第5位： 60% 搜索结果第6位： 50% 搜索结果第7位： 50% 搜索结果第8位： 30% 搜索结果第9位： 30% 搜索结果第10位：20%
从这个百分比排列可以看出，在自然搜索结果的排列中，排名第一位到第三位都完全受到重视，而从第四位和第五位开始，关注程度急剧下跌，排名在第十位和第一位的相差高达五倍。 那么对在搜索结果页面右侧的竞价广告，人们的关注程度又如何呢？ 这个关注度，直接决定广告商在Google上面购买竞价广告的投资效果。研究发现，这个效果和自然排名相差悬殊，基本上是左侧自然排名的一半。数据如下： 右侧竞价排名管搞关注度
第1位广告： 50% 第2位广告： 40% 第3位广告： 30% 第4位广告： 20% 第5位广告： 10% 第6位广告： 10% 第7位广告： 10% 第8位广告： 10%
右侧广告一共只有8位。而广告最高的两位是出现在搜索结果页面最上端的，所受到的关注度也是100%，等同于自然排名的前三位的100%关注程度。然而，要获得这两个最高位，所投入的费用也是最大的。 因此，与其不停地投资在竞价广告，不如一次性投资在搜索引擎优化而获得自然位置的前列。但是，由于Google和其他搜索引擎的商业宣传，绝大多数刚刚接触网络营销的人不知道搜索引擎优化才是成功营销的决定性措施。许多人花大量的广告费，依赖右侧的竞价排名来吸引访问者到达自己的网站。
浅谈无结果页面反馈提示交互设计接着上个话题“谁为用户买单”聊下去。有一种页面大家都很熟悉，就是当用户使用搜索引擎搜索关键词后，如果数据库没有找到匹配的结果，所提供的反馈提示页面——专业上我们称其为“无结果页面”。 GOOGLE的无结果页面
BAIDU的无结果页面
首先拿两家专业搜索引擎网站为例,在可用性与用户体验方面,它们都是做的不错的.信息类的搜索引擎,搜索出的结果用户最关心:是否是准确的,是否是很多,是否是快速的.谷歌有条宗旨就是让用户快速找到需要的信息,并快速离开网站.所以他们把无结果页面也做的那么干脆——不好意思没您找的信息,要么快速离开,要么调整关键词,要么使用谷歌推荐关键词.百度的无结果提示貌似前几行和谷歌差不多,只有最后两行:提供搜索帮助链接,希望通过系统帮助的形式为用户解决问题,实在还是不能解决怎么办?请用户自己创造它吧——百度贴吧. joyo Amazon
Amazon.com
eBay.com
以上是国外知名的电子商务网站,先说说卓越Amazon,当它用户搜索不到产品信息时,它提供用户一个反馈建议的入口,让用户尽情的宣泄自己的不满,打出了一张同情牌.能不能根本解决问题只有用户自己知道......再说说Amazon,它就聪明多了,先把无结果页面分成两种情况:1.能尽量匹配上的就尽量匹配,提供一个推荐的搜索相近词和相近词的搜索结果,还有一个反馈搜索建议的入口;2.实在没有匹配上的了,告诉用户没有结果,推荐一些其他畅销商品-比如畅销书籍.最后说下eBay,它的方式就更五花八门了,首先它会有礼貌的提醒用户没有搜索到结果,用户可以选择从结果中查询,或者点击高级搜索去扩大搜索范围.最后实在找不到了,没关系,用户可以把自己的需求添加到商城里让更多的卖家看到买家的需求.可谓贴心之极. 谈了那么多网站的无结果页面设计,说到底它们还是有一些通用模式的,我还是想原引一个HP的例子来具体说明无结果页面的布局. HP.COM
亚足联新Logo的设计过程
亚足联在去年12月时公布了他们最新的Logo标识以满足新的和不断扩大的一代足球爱好者。以下是从老logo到新logo的演变过程。
因为我根本不熟悉亚洲足球，所以我对老Logo所表达的意思完全不明白，只知道它是个奖杯的设计，并且它看起来有点不令人喜欢。
当看到新Logo时，由于某种原因，它吸引着我但又有些排斥，我不喜欢它的3D造型方式，讨厌Rotis Semi Serif字体，并且我不能忍受“AFC"文字没有和下面两行文字居中，但是，我能明白它为什么要这样设计，我发现它能很奇妙地引起人们的兴趣，也许是因为新logo想表现出从原来静止的奖杯logo中破壳而出的的踢球者吧，下面这张图也不错的说明了设计的含义。
Logo 在不同背景下的表现
单色Logo在不同背景下的表现
互联网产品的用户体验看着"很美"这几年来，我们这个行业一直都在谈用户体验，以用户为中心的设计。“用户体验”是指用户访问网站的界面、功能、相关信息的可读性、操作的方便性，交互性等方面的过程中建立起来的心理感受，用户在产品服务过程中的印象和感觉是否满意等。大家都知道用户体验在产品中的重要性，我们集团各子公司也都建立了UCD流程。借用阿里软件的1张UCD流程图： 但真正做产品的都有体会，固然大家都知道用户体验很重要，但如果按上图的流程在项目中从头到尾实施起来还是有很多制约瓶颈。特别在互联网行业，互联网产品开发时间短，变化快,高速发展无标准是其特点。项目中时间摆在那，商业利益摆在那，如果不计成本的做下来，项目的pm，pd想必早跳脚了。这让设计师有时候不得不感叹用户体验看着“很美”。左边是用户，右边是商业，设计师需要去保持两边的平衡。当商业需求与用户体验发生冲突的时候，用户体验设计师有时不得不做取舍——用户体验有时必须先满足商业需求，或者屈尊于技术可行性。这就是用户体验设计师不得不面对的现实。。。。。 之前我们部门的分享会上大家讨论过这个话题，怎么去做互联网产品的用户体验？如何尽量好的去达到用户，商业，技术三者的统一？如何快速迭代的开发产品？这边我先抛砖谈谈看法。 首先用户体验师必须去学着了解产品背后的商业背景、读懂BRD,PRD,将产品规划中必须达到的目标和你认为有碍于用户体验的点抽取出来，去挖掘需求背后的目的。 其次UCD流程中一些影响到产品发展的关键点应该尽量去实行。 在概要阶段：用户体验师要把PD需求文档中抽象的功能转化为用户需求。通过选择通过做概念图、信息架构（建立层次逻辑关系）、建立用户场景（了解服务的人群，更好审视产品）等方法来定产品的大方向。 在详细设计阶段：设计有完善交互流程的原型demo（这个阶段如果条件允许可以进行低保真demo的可用性测试，把产品交互上一些问题尽早的暴露出来。）在原型评审后跟进视觉设计。在前端完成页面后，最好进行次高保真的可用性测试，确保不会在开发好后才发现产品有大问题。
由于很多项目时间紧急，可能都没法进行可用性测试，设计师首先要会审视自己的设计哦！ 下面介绍一些基本的可用性原则和规则： 7±2 原则 由于人类大脑处理信息的能力有限，它会将复杂信息划分成块和小的单元。根据乔治A米勒（George A. Miller）的研究，人类短期记忆一般一次只能记住5-9个事物。这一事实经常被用来作为限制导航菜单选项到7个的论据；然而关于神奇的“7，加2或者减2”还是引起了激烈的讨论。因此目前还不清楚是否7±2原则能、可能或应该应用到web中。米勒的研究 2秒原则 一个松散的原则，即用户没有必要对某些系统响应等待2秒以上的时间，比如应用程序转换和开始的响应时间。选择2秒有点武断，但确是一个合理的数量级。可靠的原则就是：用户等待时间越少，用户体验越好。[可用性优先] 3次点击原则 根据这个原则，如果用户在3次点击中无法找到信息和完成网站功能时，用户就会停止使用这个网站。换句话说，这个原则强调明确的导航，逻辑架构和后续站点的层次结构。在大多数情况下，点击的次数是无关紧要的；真正重要的是，游客总是能知道他们现在在哪，他们去过哪，他们接着将会去哪。如果用户感觉他们对该系统如何运作有个充分的了解的话，甚至10次点击，用户都会觉得OK。 80/20原则（帕累托原则） 帕累托原则（也被称为重要少数法则和因素稀疏原则）指出，80%的效应来自20%的原因。这是商业中的基本经验法则（“80%的销售额来自20%的顾客”），但也可以应用于设计和可用性。举例来说，我们可以通过确定那些贡献80%利润的20 ％的用户、客户、活动、产品或程序，并最大限度地注意对他们适用，来显著提高效应。[帕累托原则在维基百科] 8个接口设计的金科玉律 作为接口设计研究的成果， Ben Shneiderman提出并收集了一些从经验中启发而来，适用于大多数交互系统的原则。这些原则适用于用户接口设计，也适用于网页设计。
费茨定律 由保罗费茨（Paul Fitts）发表于1954年，费茨定律模拟了人类活动，以目标距离和目标规模大小为函数，预测了迅速移动到目标区所需时间。该法通常应用到鼠标的移动，访客就必须从A点移动到B点。例如，这个规则对于如何放置内容区域，以更实用的方式，最大化内容可及性和提高内容点击率，是非常重要的。 倒金字塔 倒金字塔是一种在文章开头表达总结文字的写作风格。这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。就像尼尔森的支持 满意 网络用户不喜欢用最佳方式找到他们寻找的信息。他们对最合理和最健全的解决问题方案不感兴趣。相反，他们永远扫描他们认为“足够好”的quick’n'dirty解决方案。在网络中，这种方式准确地描述了用户的满意：用户使用一个“足够好”的方案解决问题——即时在长远看来一些替代方案能够更好地满足他们的要求。 有效网页表单的八条规则(3)5. 主动沟通 保证你的表单中使用以用户为中心的友好语言. 这里有个小窍门可以写出平常谈话般的文字: 避免和你的用户真正交谈。 如果你想知道别人的名字, 你不会盯着他们的眼睛用呆板的措辞问, "全名". 那实在是太恐怖了. 如果你要得到积极的回应, 你会笑着说, "你好, 你叫什么名字?" 记住试着用更加人性化的措辞来代替"全名"这个标签, 比如, "你的名字"。 6. 把表单分成划分成许多小的部分 在小范围内交换想法和意见是沟通的一种方式. 大家互相介绍自己. 你描述自己的职业, 其他人发表评论或者提问题. 你重复说过的内容, 或者回答他人的问题会收到更多的回应. 一次有意义的充实的交谈, 信息是源源不断的, 一来一回的。 网页表单作为另外一种沟通的方式, 也是同样的道理. 你也许要问许多问题, 但是那并不意味着你要把他们一股脑的给读者. 试着用水平线, 色块, 有意义的图片, 或者用标题字把信息分割成为容易阅读的小集合. 如果, 以上的办法都行不通,把你的表单分成许多页, 在顶部加上进度条, 如此一来, 用户就能够知道他们还差多少没有完成。如下图：
7. 使用有意义的, 关联上下文的错误信息 你的出错信息应该可以清楚的表明哪里出错, 并使出错的部分突出出来.毕竟, 没有人喜欢在表单里面搜索被遗漏的字段。 8. 当用户点击提交按钮时, 他们会自以为已经完成了, 打算离开. 基本上他们会说, "这是你要的信息, 再见." 如果是一次真正的交谈, 你会和他们握手, 然后说, "再见", 再离开, 或者通过其他方式告诉他们谈话结束了. 你的表单也会做同样的事情. 它有没有引导用户到达某个页面, 告诉他们, "感谢你的提交! 我们不久之后会联系你.", 就这些了! 在设计网页表单的时候要记得这些规则, 你一定会惊讶于表单的质量的大幅提升以及收获的大量反馈。 原文链接: http://www.wpdfd.com/issues/87/eight-rules-for-effective-web-forms/ 有效网页表单的八条规则(2)2. 让你的表单适应它的风格 每个表单都应该符合它要表达的形势或情况. 当你在计划着设计表单的时候,问问自己下面的这些问题: 你打算问什么问题? 为什么问? 你的网页设计在有表单和没有表单的情况下分别是什么样子? 表单中有没有用户要填的信息,或者有没有他们想要填的信息? 你的回答会对你的表单样式和内容的设计有所帮助。 3. 用你所需 当你犹豫不决是否在表单中添加元素的时候, 问问自己是不是可以不需要这个元素. 如果回答"是", 就不要使用。 重置按钮通常是不必要的表单元素. 这个本应消失的历史残留品却依然出现在表单中, 甚至是将来的表单设计. 想想看, 当你想要修改表单信息的时候,输入框里面有什么内容其实并不重要, 那么有什么必要清除所有的信息呢? 4. 在必要的时候才使用简洁的描述 你也许要解释一下在表单中收集相关信息的原因, 特别是用户不愿分享的信息，比如电话号码或者电子邮件. 这样做不仅消除了用户的疑虑, 也保证了数据的正确性。 任何描述和评论都要简明扼要. 你也许还要用不同的颜色, 字体大小, 或样式来区分他们. 过犹不及, 毕竟你不希望这些描述索然无味或者明显超过表单的其他部分. 这是一个提供印刷服务的表单, 很有效的利用了描述来说明表单的作用。
有效网页表单的八条规则如果你正从你的用户那里收集信息, 没有比网页表单更简单和直接的办法了。一份有良好设计的表单可以提供有价值的信息, 相反, 他们有可能把用户吓跑。明确了这一点之后, 每个设计师就应该知道一些设计网页表单的规则。 文章中所有的实例都是用CoffeeCup Web Form Builder生成的. 1. 保守性的搭建, 并带有目的性的设计表单 我们要面对的现实是没有人喜欢花大把的时间填写表单. 保持表单的短小精悍并且剔除绝对不必要的或者不会提供实际收效的表单元素. 保证表单的每个部分都对整体起到了推动作用, 这样用户会感谢你。 你的表单结构应该和表单内的元素一样具有功能性. 当设计表单样式的时候,要记得, 至少在西方国家, 人们的阅读习惯是从上到下, 从左到右. 他们也经常用Tab键在表单各个元素之间移动. 你的设计应该通过元素摆放的合理性和标签的语义性来实现. 当然, 永远不要让你的表单看起来分散或杂乱无章——保证所有的元素都均匀的分隔开, 并且排列整齐。 下面是一些标准表单, 你可以用来作为出发点, 设计出更加有创造性的表单: 标签左对齐, 输入字段垂直罗列：
这个表单的特点是标签左对齐, 输入框整齐有序的从上到下排列. 我们的眼睛能够很容易的捕捉表单元素, 特别是当你问到一些用户不太熟悉的问题时。因为他们可以很顺利的从上到下阅读问题列表而不被输入框打断, 他们会更专注于你所问的问题. 但是这个样式会延长填完表单的时间, 因为视线在标签和输入框之间移动会占据大量的时间。 标签右对齐, 输入字段垂直堆叠：
右对齐的标签能够更容易区分和阅读, 并且剔除掉了标签和输入框之间那些不合适的空间. 但是, 却使阅读更加困难. 它不那么吸引人, 而且看起来不整齐。 标签顶端对齐：
顶端对齐的标签可以使填写表单更加迅速和容易, 因为眼睛不需要在标签和输入框之间来回移动. 这种样式也让你把相关的字段放在一起, 节省了空间。
如何量化用户体验UE(How To Quantify The User Experience)量化用户体验有四个互相关联的重要因素: 1． 品牌(branding)
一个客观的衡量和分析工具，能帮助你的客户提供有实事依据的建议。而不是推测的意见和观点。我们在这篇文章中的探讨能帮助你： 1． 尽可能的去除你的主观偏好。 衡量用户体验 用户体验正如上面所说的4大重要因素。但是我们如何量化和徇这些看似无形的元素呢？ 我们把我们的分析分成四部分，每个用户体验元素为一个部分。对每个元素我们创建一系列的描述和参数，有针对性的考查网站。每个描述分类1-X个级别，我们在这个范围内给每个描述打分，等到你完成了第一部分的分析，你应给四个部分的描述分别打分。
文章中的示例分析，在每个元素中仅用了5个参数，因为我们设20分一个档，最大分值为100，在每个元素中如果我们加上另外五个描述/参数每个元素就是10分一个档，下面就是有关每个元素和描述/参数的概要。 一．品牌 用来衡量网站品牌的描述包括： 二、功能性 功能性包括所有的技术上的及屏幕之后的流程及应用，它伴随着为所有最终用户提供互动服务。而且有时对公众和管理员都有意义。 用来衡量功能性的描述包括： 1． 用户及时获得对其查询和提交信息的反馈。 三、使用性 使用性包括 一般意义上的对所有网站的内容和特点的易用性。在可能之下的二级主题还包括导航的友好性。他们包括： 1． 网站防止错误发生，并帮助使用都从错误中恢复。 四、内容 内容指网站的实际内容，文本，图片，多媒体等到，以及其结构，信息体结构。 1． 连接密度带来的清晰度和简单的网站浏览。 结果： 首先，将每个元素的价值相加，因为每个元素设定了一个最大和为100的量级，我们得到的是一个百分比的分数。最好的方式是通过一个蜘蛛图来展示。
通过分析获得创意 文中描述的分析和方法的优点在于它们能迎合你的特定客户。可根据需要加入其它考察元素。 这个分析平台使你能在你选取的某一元素中增加权重，比如你的客户是一个生产商，它非常侧重品牌和外观及氛围。毫无疑问你可以修改衡量体系，给予品牌元素更多更好的侧重。给于可通知性少些侧重。 面试题问： 分析以下两个页面，分别提出简要的分析，指出优缺点，至少包含以下两个方面内容： 1、颜色、样式等角度 2、网页内容结构的角度 （面试时请带您的答案前来，我们期待您有更好的答案！） 梅兰芳的页面没换，章子怡的页面换了，这里也没有保存截图，所以不贴了 答： 一，描述： 二，版式，颜色
1.“概览”这里的导航栏容易被忽视，位置过于靠页头。大小比例不合适。如果能下移10个像素，效果会比较好。 2.投票这个功能是首屏最醒目的功能。从虚线以上的部分开始，这个位置占了首屏大约1/10。尤其梅版式中，在深背景下的亮度很高，第一视觉基本被投票栏占据。是需要用户进 入以后就参与互动么？
3.梅板块里，左侧梅兰芳的图片有一点小问题，背景有很大一块黑色，和页面的黑色背景融到一起去了，我觉得如果能加一个合适的颜色边框会更好。避免素材和页面混淆的问题 。
4.章子怡的版式，颜色，在整体性上更好，主次能够突出。视觉中心是从左侧过度到右侧的。用户由图片到文字，由形式到内容的引导更符合使用原则。
5.章页面里的热门明星一栏略显唐突。配色偏重。 6.视频区的图片，和剧照的图片几乎没有区别，应该把视频的图片加上一枚带有播放按钮的水印。透明度30%。让用户在第一时间了解到这张图片的下一步是可以播放的。
7.左面图片和文字的间距明显太挤了，和右侧的行间距难以协调。 8.细节上，有更多的提升空间，主要在文字的背景色，局部配色，图片边框，大小文字索引，文字颜色，局部版式这些方面。
三，内容
1.梅，“你可能还喜欢”的位置有待商榷，用户可能看到这个栏目的时候还没有了解自己是不是喜欢梅。或者还没有看完梅的介绍，已经跳转到另一个页面了。可以把这个小栏目 下移，让用户更充分了解梅的内容以后，适时的引导用户进入下一个专题。
2.主要演员这个栏目可以上移，或者直接包含到概览里面吧，明星脸能更直观的介绍内容。 3.有个评论的功能会更好。虽然利用率会比较低，可以把贴吧的东西转过来一点么。或者让他们去贴吧，最好是新开窗口。 4.剧情介绍其实没有那么重要，想了解的剧情的一定会自己找到，但是更多人，主要是低端用户，才不管剧情是什么，他们要看的只是明星。 5.总体上好像少了点什么。首屏左侧的大图片，做成轮播的会很棒，每张图片上面可以再放些大字。让整体看起来更有活力。 6.用类似cms这种技术来做成一个娱乐专题，确实可以节省很多时间，提高我们的效率，但是一个好的娱乐专题，靠一个固定的板块模式想表现充分是很难的。会有越来越多的用户
由低端变为中端和高端，他们才能提供更高的用户粘性。
User Experience用户体验（User Experience，简称UE）是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。 用户体验主要是来自用户和人机界面的交互过程。在早期的软件设计过程中，人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发，而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计，其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大，牺牲人机交互界面便是唯一的出路。这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。至于客户服务，从广义上说也是用户体验的一部分，因为它是同产品自身的设计分不开的。客户服务更多的是对人员素质的要求，而已经难以改变已经完成并投入市场的产品了。但是一个好的设计可以减少用户对客户服务的需要，从而减少公司在客户服务方面的投入，也降低由于客户服务质量引发用户流失的机率。 现在流行的设计过程注重以用户为中心。用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证（1）对用户体验有正确的预估（2）认识用户的真实期望和目的（3）在功能核心还能够以低廉成本加以修改的时候对设计进行修正（4）保证功能核心同人机界面之间的协调工作，减少BUG。 在具体的实施上，就包括了早期的focus group（焦点小组），contextual interview，和开发过程中的多次usability study（可用性实验），以及后期的user test（用户测试）。在设计--测试--修改这个反复循环的开发流程中，可用性实验为何时出离该循环提供了可量化的指标。 二、用户体验设计师的职责主要有哪些？ 用户体验设计师——user experience design，国外叫UED，国内也简称UE设计。 我们来分析一则国外的UE设计师招聘要求，看看你还需要欠缺什么吧： 我们正在寻找一名高级用户体验设计师加入我们的产品设计团队。 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 用户体验设计管理金字塔： 用户体验设计目标是什么？最重要的是要让产品有用，这个有用是指用户的需求。苹果90年代出来第一款PDA手机，叫牛顿，是非常失败的一个案例。在那个年代，其实很多人并没有PDA的需求，苹果把90％以上的投资放到他1％的市场份额上，所以失败势在必然。 其次是易用，这非常关键。不容易使用的产品，也是没用的。市场上手机有一百五十多种品牌，每一个手机有一两百种功能，当用户买到这个手机的时候，他不知道怎么去用，一百多个功能他真的可能用的就五、六个功能。当他不理解这个产品对他有什么用，他可能就不会花钱去买这个手机。产品要让用户一看就知道怎么去用，而不要去读说明书。这也是设计的一个方向。 设计的下一个方向就是友好。最早的时候，加入百度联盟，百度批准后，发这样一个邮件：百度已经批准你加入百度的联盟。批准，这个语调让人非常非常难受。所以现在说：祝贺你成为百度联盟的会员。文字上的这种感觉也是用户体验的一个细节。 视觉设计的目的其实是要传递一种信息，是让产品产生一种吸引力。是这种吸引力让用户觉得这个产品可爱。“苹果”这个产品其实就有这样一个概念，就是能够让用户在视觉上受到吸引，爱上这个产品。视觉能创造出用户黏度。 前四者做好，就融会贯通上升到品牌。这个时候去做市场推广，可以做很好的事情。前四个基础没做好，推广越多，用户用得不好，他会马上走，而且永远不会再来。他还会告诉另外一个人说这个东西很难用。 用户体验设计经常犯的错误是，直接开发直接上线。很多人说，互联网作为一个实验室，我一上线就可以知道结果了。这当然也是一个正确的理念。但是在上线之前有太多的错误，那么就会大大地影响事态结局。一开始的时候就能很准确地作出一些判断，作出一些取舍，在互联网这个实验室里，才能够做得更好。 用户需求是根本，但用户需求不一定是功能 百度在半年前推出空间，从功能上来说它比较其他同类产品没有什么特别大的变化，就是三个最基本的功能：上传文章，上传图片，交友。这三个功能，所有博客都有做，而且有更多的功能。但是那个时候，大部分的博客，不管是CSP还是门户网站，都不能解决一个问题：速度。性能很不稳定，文章上传了，可能登录就进不去了，可能上传的东西没了。其实用户最基本的需求，就是速度和稳定性。百度虽然才做博客，但百度有很大的平台，有很多的服务器，有很大的流量，完全可以从稳定性和速度上把这两个用户体验做好，其次再做一些功能。很难用的产品注定会失败的，这个是非常关键的。 百度的搜索，可以用五个字归纳：快准全新稳。每一个字可以分解成很多小项，跟所有的搜索引擎PK，每一个字后面都代表着一种用户体验。一个博客一推出来就有几百个链接，几十种功能，很多网站说我可以这样做，国外都是这样做的，像MYSPACE做得很成功，我就把它照搬过来。但是很多中国用户其实跟美国用户是不一样的，中国70％的人是30岁以下的，以娱乐为主，而不是信息搜索为主。而美国是70％是30岁以上的，非常成熟和理性的这一类。很多功能拿到中国，中国人是不会用的。这就是你增加越多的功能，你就越增加产品的复杂性。 怎么完成易用性这个任务 百度就有一个专门做易用性这样的团队，每天请各种用户来做各种各样的调研。 特别提出，不要忽视文字的力量。当年的EBAY，注册一个EBAY的帐户，第一步第二步第三步。第三步，原来是这样说的：“你只要在你的邮件确认一下你就成功了”。这样一句话，很长。但是用户不是一个一个字去读，他是扫描，他一眼扫过去，他的意向可能就是成功了。把成功两个字记住他就走掉了，不会再去确认这个邮件了。EBAY后来改成五个大字，叫“快要成功了”。五个大字，非常大。有户一看，我没有成功，我要做什么事，下面写邮件。所以几个字就让EBAY提升了10％到20％的注册率，相当于每天给他带来一百万的最终价值。 怎么能让用户爱上你的产品 可以通过视觉去改善，去提供一种感觉。这就是为什么百度和Google要做节日LOGO的原因，因为搜索这个产品也是太普通了。节日的时候做做LOGO，用户产生一种感觉、情感，黏度会更好。这一类的东西我们都可以从视觉上去提高。 百度节日LOGO： 用户体验是一个多背景的梯形团队 为什么多背景呢？首先你要了解用户的需求，这不是很容易的事情。先要从社会学，人类学，心理学角度大量研究。然后需要技术人员去模拟UI的技术或者是后台的技术。视觉体验，又要从工业设计这个角度去看。这些事都要不同背景不同类型的人去做。同时还要分工程师，产品经理。甚至一些公司高层、市场部的人都要在一起工作。为什么说是梯型呢？因为第一要了解各个专业的人，他们知道些什么东西，你怎么跟他们合作；第二就是更专业。两方面都要去共同发展。这样整个联系在一起，就变成一个完整团队。 另外一点很重要，UE设计并非由用户体验部来设计。百度成立用户体验部，是因为用户体验部可以协助其他部门更专业、更系统地去做用户体验这件事。 百度每天几亿的流量，稍微做一点改变，就可以得到很大的提升。比如说百度搜索结果的摘要，你加两个字或者是减两个字可能就影响到一百万的收入。百度首页上之前的一句话叫“把百度设为首页”，最早是“设百度为首页”，就改一个字，每天会增加几千个以上的点击量。用户体验部要做的是指挥，而不是独自做专业的事，要让所有的人一起来思考问题，是跟其他部门在一起工作，提供给其他部门更专业更系统的用户体验信息，协助所有的人员来做这个事情。 相关名字解释及缩写 用户体验， 英文叫做User Experience，缩写为UE, 或者UX。 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度 一篇不错的文章： http://www.fullsearcher.com/n2005815135618735.asp 以用户为中心的设计， 英文叫做User-Centered Design 缩写为UCD 基本概念：http://www.uicom.net/blog/attachments/200603/ucd90879645/ucd.htm 信息架构，英文叫做information architecture，缩写为IA。 它是一个整理信息，斡旋信息系统与使用者需求的过程，主要是要将信息变成一个经过组织、归类、以及具有浏览体系的组合结构。 这样的结构性设计将使得使用者对于信息的内容存取更直接，让使用者的任务更容易完成，它也可说是在结构与分类上的艺术与科学，可以帮助我们寻找信息并且予以管理。 交互设计，英文叫做Interaction Design 交互设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。 交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此，人的因素应作为设计的核心被体现出来。 HCI：human computer interaction人机交互 用户界面 - User interface 图形界面 - Graphics User Interface 在人和机器的互动过程中，有一个层面，即我们所说的界面。 从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。 有效的界面设计经常是预见的过程，设计目标是开发者根据自己对用户需求的理解而制定的。 优秀的界面简单且用户乐于使用，这意味着设计需适应硬件的局限。 易用性 - Usability 是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品 Usability Engineer 使用性工程师 Handset User Interface 手持设备用户界面 (HUI) human computer interaction人机交互(HCI) Man Machine Interface人机接口(MMI) |
燃烧流星A burning shoting star |
|||
Send a private message
Subscribe to RSS feed
Tell a friend
Add to My MSN
Add to your network
Sign up for alerts|
|
