开发人员经常犯的8个设计错误
From :ued.taobao.com
设计师在抱怨开发人员不尊重Web标准，后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率？相信很多网站或软件开发公司都越到类似的问题。
从UED的角度而言，我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过，用户体验不只是UED的事情，而是整个开发团队乃至整个公司需要参与的事情。
我们不能只是抱怨，我们去理解开发人员。同样，我们做出努力，让开发人员去理解我们。
我们努力去先做出改变。（小马按语）
原文地址： 8 Web Design Mistakes That Developers Make
一个优秀的网站是优秀的设计和优秀的代码的结合，你经常发现设计师不得不去理解代码，而开发人员尝试自己去设计。 开发人员花费大学生涯和与其他开发人员一起学习，我可以肯定的说程序员并不是设计师。谢天谢地，我们以前可以评判代码是否重用或者符合正确的OO方法论，但却无法评判美学。 但现在，一个开发人员最值钱的资产就是他对设计的敏锐的理解。
现在据我所知，程序员可能从不需要任何设计的知识（或者说，设计师从不需要了解程序）。但事实是，每一个拥有个人项目、少量客户或是管理角色的程序员都需要设计。甚至，我可以说，显而易见，一个自由工作者最大优势就在于，培养潜在的客户让他们渴望理解整个网站的建构过程。所以一个人正在学习做一个开发人员的同时，也需要学设计（至少尝试去做），以下就是我曾经听说或者犯过的8个错误。
<!–[endif]–>
“我知道什么看起来很好（我有photoshop）”
这是成为差劲的设计师的原因之一。更无可救药的是本来就很差劲了，还以为自己很好。每个好的设计师都有一个度量好设计的“设计标准”，这个经验来自于自己经常看好的设计。你需要把时间花费在看伟大的设计上，诸如TheFWA, FaveUp, Design is Kinky, 和我个人喜欢的 Behance Network 这些网站。你可能也知道如何去挑选设计杂志，比如How或者print（注意两者并不都是美国的，可能更加国际化一些）。就像好的程序员喜欢看（或评论）其他人的代码一样，好的设计师也总是环顾他人的工作成果，无论是站点、广告牌还是菜单。没有一个好的“设计标准”，即使有大量的photoshop滤镜也拯救不了你。
“一再地使用蓝色和白色”
大多数程序员嘲笑一个设计师总是花费大量的时间来为站点挑选精确的颜色。但是，颜色总要比你想象中还重要，并且你不能在站点构建的时候来更改（至少，那时候就不得不花费大的气力）。象很多事物一样，观察一个好的设计师的配色方案是很有帮助的，寻找配色方案最好的一个站点是COLOURlovers.
“我把每样东西都居中”
大多数情况下，将标题、标语和副本的一部分居中很自然。但是通常，将网页上的文字居中就很外行了。左对齐是很保险的做法，但往往最好是视情况而定。更好地是，在photoshop中利用标尺和网格精确地计算你网站的各个部分。这并不意味着你的设计像格子一样，但是眼睛可以注意到理应被排成一行的几部分却没有这样排列的情况（特别是文本）。每个像素都很重要。
<!–[endif]–>
“使用免费的字体…它对于我来说看起来不错”
我曾有一段时间这样想：（a）所有的衬线字看起来都一样（b）没有任何字体值得付钱。我现在把这两条都废除了，去继续学习更多的字体知识，那是一个复杂而美丽的世界。坦诚地讲，如果有一个领域我能成为专家，我希望是字体。你可以只用一点颜色和不错的字体来建立伟大的站点（这只是任何伟大设计的基础）。再次申明，在字体方面要做得更好，需要你多阅读好的站点培养你的眼睛。
“我们可以在那里放置更多的信息”
在拥有程序员和设计师的团队里工作，两者间一个普遍的争论是“空间的利用”，程序员想在页面明显的位置放置尽可能多的信息。设计师争论道，眼睛不可能承受如此多的东西，最好只是在明显的位置只放置logo和标语。尝试去找到最佳的平衡，需要知道（a）杂乱的网站可能没有效果（b）留白不是设计师偷懒 （c）被称作“空”的部分是很必要的，以便突出其它元素。
“我可不想为照片付钱”
槽糕的图片或照片可以毁灭一个合理的网站，同时经过简单处理的伟大图片可以看起来很好。在网页上那么多的资源，没有理由使用差劲的图片。对于非营利站点而言，可以查看stock.xchng 或 Flickr。对于商业的站点，有许许多多的站点，比如iStockPhoto（但是需要了解版权的知识，因为不久后，你可能在其他站点上看到同样的照片了）。最后不要为在诸如Veer这样的站点上找到完美的照片而花费大笔的钱吓坏了。
“我无需询问意见”
更多地询问而不是闭门造车，你会成为你们设计师的最大粉丝（尽管你戴着一副玫瑰色的眼镜）。你需要询问你认识的设计师，以便得到坦诚的评价。不幸的是，我知道大多数被我问过的人，都只是赞誉而非批评。所以让你的自尊滚一边去吧，戴上“知识”这顶帽子。因为这些人是设计师而你不是。然后在你得到了他们的反馈之后，尊重他们、信任他们，并做一些改变。
“无需得到太多细节”
就像你很一般的代码需要等待提高（虽然仍能执行），你也有一些还说的过去的设计，但是离伟大差得远呢。看伟大的设计很容易这样想“这看起来没什么嘛”，但是事实上，伟大的设计花费了很多的时间（特别是对设计的新手）。但是有这些伟大的设计，你只是看到了最终的产品，并不知道设计者期间经历了多少次编辑和修改。甚至，你可能会惊讶于一条分割线会为设计带来多大的不同。当你把所有元素刚放在一起的时候，别以为设计做“完”了。
总而言之，伟大的设计（就像伟大的代码）很耗时间、耐心和技巧——因此，应该得到适当的尊重。尽管作为程序员（或者是内容编辑还是其他的web员工），你可能从不需要设计整个一个站点，但我有一种感觉，或多或少，你不得不做一点设计。如果可能的话，你尽量不要犯以上的错误……
沙发先，坐着慢慢看！
学习!
好东西啊，非常好。很有意思的流程。
另外为什么很多人问起流程呢？因为流程是公司的做事方法，对一个人的工作和发展的影响很大:)
受益匪浅
其实好像大家都是这么干的……
斗胆问一句,贵公司用的Photoshop是正版的吗?有几套正版?
@william：是的，大多数公司都是这么做的，我在文中也提到了两次。只是因为有很多人问我，所以再和大家都分享一下。对一些成熟的公司来说，我们的流程也是非常幼稚。如果发现有什么不好的地方，请不吝赐教。谢谢：）
@dg：是的。所有的软件都要求使用正版。要武装一个设计师的成本确实比较高。
我想，如果我来面试，肯定也会问这个问题。但是我的意思，其实不仅是你所描述的这个工作流程，而是更大的流程。例如产品的总的概念，目标，定义。设计的不同维度上的衡量准则。需求如何来的，从策划到设计的环节，开发者的参与，测试……总之，我会想了解更加big的图景。以及与之匹配的组织结构。不知道能不能透露一二？
牛呈是很重要的~~要不会把人累死的~~
@hax：我从来没有认为设计师问我这个问题是要了解这么大的图景，个人也不认为他们在面试时就了解这些有什么好处。这些东西应该在工作中去了解，在实战中去体会和改进。
花上三五分钟说或是写几篇文章，连皮毛都无法涉及。所以，我还是先写点实际的，大家看了说：“我早就知道是这样了，不过你们这个方法里这点这点还不错，我会去试试”。那已经太太太高兴了！^_^
看了原型，有几个地方想征求下意见：
1.已有多少人收藏和标签的位置要换一下，左面既然是标签云，那么左边自然放标签，同时多少人收藏与右边的收藏人数自然贴近，方便用户点击。
2.多少评论放在收藏数量下面是否会影响产品的特点，收藏和评论有什么关系，如果有关系也和主题有关。所以联合1条来看，先是评论，然后标签，然后更多收藏人数
3.看了图片，愕然发现使用TAG的人其实最少，而原型中显著的位置都是TAG,看来要重新思考TAG 的作用了
4.1，2，3联合看，建议 原型为最简单的 多少人评论，多少人收藏。 TAG 自然废弃，其实对于有搜索框的页面TAG是不是个垃圾功能需要仔细思考，至少不是个主功能
流程只是一部分，另一部分是这个流程中的人，谁能决定什么不能决定什么，谁从哪里开始跟，跟到什么时候结束，等等等等。。。
大部分公司纸面上的流程一样，可实际操作中的人员就千差万别了，这个大概才是更关心的东西…
@wkcow:
1.我不觉得把tag列表和单个收藏的tag放得“近”有什么好处，何况页面一滚也就不近了。它们不是需要关联操作的功能。此外“有xxx人收藏”的文字长短不有太大的变化，这样页面上的图标会对得比较齐，视觉上更清楚一点。
2,3,4.关于tag和评论的重要性，在上线前我们也不是非常有把握，现在上线了，看看用户怎么用就有数了。你很快能看到我们的调整。
你的思路非常清晰，赞！如果你也能得到我能得到的用户数据，就可以少很多“脑力劳动”来“猜”用户的行为，设计的结果也许也会和我的类似：）
@OLDMAN:太对了，所以我在文尾说：“流程”这种东西，只有与环境相匹配才能带来正面的作用。 “人”，是环境中最重要的一个部分。打个比方，如果设计师的能力还没达到一定程度，就强行让他按交互设计、视觉设计这样的流程来做，估计他做出来的东西会更糟：）
嘿，承志：
Axure画完原型图后，是不是只能导成图片格式的？不能导成html？
@小东瓜：可以的，可以导出成HTML，还可以导出成Design Spec形式的Doc文档。装个小插件还可以导出成.chm、
Axure是个非常非常好的工具，有时间的话，我会写几篇文章来介绍它。这玩意儿，除了贵点，真是谁用谁知道啊！hahaha
我在官网上下了一个测试的，好象没找到导成html的？？
@小东瓜：按F5就可以了。
Axure真的很不错，谢谢介绍！
Axure没有找到破解和汉化，软件确实非常帅。
已阅
学习了 赞一个
1。个人觉得把收藏人数和谁收藏了这件宝贝放在一起会好些 起码这两个功能是有关联性的
2。估计会有很多商品标签会空 对用户来说填写了没什么用处，在这个页面上的应用
幻沙 说的有道理。
还有评论数放到主体阅读内容的上面或下班要好点.
谢谢承志！！
Axure………………..我要，我要~哈哈
提供一下
前一段时间，我也到处寻找这方面的资料，油茶研究会发了一些国外的资料给我，相对于国内来讲，国外分得更具体一些。很高兴，今天能看到你们的流程，我以前的一些问题都豁然开朗了。谢谢！
我现在一边做UI一边做前台开发，有时候需求还一直变，现在做美工太累了。
需求人员与设计人员是怎么配合的？因为有需求会变动。
这是很正统的流程,其实在很多非纯软件公司或WEB公司,在流程上还是有细微的区别.不过这个流程很专业,我也希望能在我们公司推广,谢谢!
其实我一直也是这样做的.不过前期需求,即承志所说的原型图,我是用笔画在纸上的,边改边画.
承志，能否把你们的博客加为我的友情链接？
看来要完善一下我们自己的流程了~很有用处的见解~
老问题.to 承志
你们有统计过TAOBAO主页最右上角那个搜索框有多少人点过吗?
再次BI视这个设计.嘻嘻.
另外认为那个合作的彩票项目非常好!利用支付宝的信誉~~~
再另外.相信半年内就会有可以上传视频的所谓WEB2.0的TAOBAO
这一版的皮肤做得有点简单，希望能改进：）
能在这样的团队工作，是种福气。
100分”的完美作品，很有可能没有遵循流程
非常同意这句话！
规则是死的，设计者是活的，用户是活的，打破规则或许才有新的突破！
Axure 现在貌似用这个的很多，不知道你们用Axure 可以做出多复杂的原型，官方可以生成很复杂仿真的原型静态页面 呵呵
请教：怎么在连线上加上标签（yes，no）？看官方的网站上是可以的，但是按F2或者回车都是加不上啊！
就是在flow的情况下，在连接线上加上yes或者no？？？？
@马海涛，sorry，我也不知道。也许用text panel写在边上？^_^
这个blog还有广告喔，不错不错。
可惜没有关联上。。。。。。。。
广告是alimama的，兄弟公司，友情支持，顺带赚钱。haha
你好，像你们说的第一步，如果不把色彩着上去，图片放上去，单单及个方框，客户怎么会觉得满意呢？
因为只有及个框框在那，客户又不懂，只有放上好的色彩和图片，否则客户单单看你的布局是不可能满意的啊
那像这种问题怎么办？
基本上都差不多
可行性分析报告 > 策划文档(草图包含在内) > 评审(修改) > 效果图 > 评审(修改) > xhtml
终于找到了，最早用承志说的text panel发现只能在边上。感觉不爽，然后从官方网站上把其例子视频看了N次，最后也没有发现诀窍。然后把他那个例子文件下载下来然后打开，结果提示版本不对。直接用记事本打开发现官方的文件版本是4.6.0的我的是4.4.1的。所以后来从官方网站上下载了试用版。结果安装上后直接输入就可以了。呵呵。并且注册码还可以继续使用真是太好了。建议你们也更新一下啊！
谢谢楼上的！！
看了您写的东西,感觉很好!
一般的公司同样按这个流程走,
不过中间打折地方很多!
比如
我们的各个同事不会很开明的想看到原形的. UE的设计几乎就是被省掉的.那出来的模型就我这个做界面都觉得问题多多:[可是他们坚持要把界面设计到很靠后一步就是静态页面!到时候又会因为流程想的不够清楚 ,而修改来修改去.修改的理由也非常充分 .修改是必然的因为连我都觉得不合理呢.可是这期间他们把界面设计的时间全部挤掉!用最初设计界面上的物件东补西补的,补出来的界面效果我不说大家也可以想象:(
最后一个很大的平台系统 从设计到作成静态页面的时候不过3.4天而已^而这3.4天还不是连贯的!
到头来还会说界面设计的美工问题:(
我想很多设计朋友都面临这样的现状吧:(
左边的订阅框好刺眼，与整体风格格格不入（无论是样式，特别是色彩），而且辨识性不高~
p.s:一点建议，请勿见怪！（不支持发送的ctrl enter的快捷键的，虽然说是经常灌论坛的老手，会使用快捷键，但是加入这个快捷键对新手也不会造成困扰）
我相信不少面试的人之所以会讯问流程的问题因该是想了解这个流程适合不适合自己工作,能不能让自己的能力更充分的发挥吧,即使不是面试淘宝其他的他们也会问的吧!
说的不错，但不是很喜欢上面的页子：
1、总体分格与taobao有出入，
2、顶部的“博客，收藏”与“所有、宝贝、店铺、博客”两块标签页放在一起感觉很不舒服/
3、上面的两个标签同时出现了两个“博客”？？？？？
4、重心偏右，感觉左边太空。。
5、右侧留空太少，。。
个人意见。。
经常来这，经常看过了就悄悄的走，经常一个人在夜晚回想这些，到底什么才是用户需要的，我们到底是谁而设计。看到淘宝有这么好的团队，真让你心动，相比之下，我们公司却走在了一条错误的路上，一直很想用自己的能力去解决这些问题，但是却一直没有机会。我们的工作流程：无方案上司简单的说下是什么项目 － 设计师，哦是美工尽快完成设计稿 － 然后我们老总看 － 再接着是几个上司再开会确定这项目的发展方向 － 原来做的面页基本不行，美工按要求再改 － 改完后上司再看 － 接着老董再看，推翻上司的想法，坐在美工身边指点设计，要求内容在一屏以内… 面对这些，我不知道大家是否还有心情去做所谓的设计。只是不明白，为何可以做得更好，而却偏偏要往错误的路上要走。太多太多的无奈。流程，呵。对我来说，已将我的工作写成了一种程式。
很好奇一点是，如果完成了所有后，在最终调试的过程中，如果遇到一些页面需要做部分的调动，这部分是还是交给谁去修正呢？按照分工应该是UI的部分给出更正方案，然后交付程式工程师套用，还是直接麻烦程式的部分做调整？我和几个朋友在分工的时候，就遇到了，部分页面是程式部分输出的， 因此要调动也只有UI提出要求，程式那端来更正，这个过程中保持沟通是当时我们之间的一个障碍。。。不知道是否是有更好的方法。。。
and
也曾有人问道我，在写CSS的过程中依据在任一浏览器中保持页面显示一致的原则，所以会在边写css的时候边打开很多个浏览器同时查看效果，淘宝的开发过程也是如此吗？比如装载IE6，IE7，FF等。。。因为是新手，所以想请教一下～～～
问题问的很肤浅。希望表介意。。忽忽
Taobao滴网页都是用DIV CSS做滴？偶在W3C滴网站上查鸟，为虾米米Pass?
//–
http://validator.w3.org/check?uri=http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm&charset=(detect automatically)&doctype=Inline&group=0
//–
This page is not Valid XHTML 1.0 Transitional!
Result: Failed validation, 630 Errors
Address: http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm
对鸟，顺便说一句，Taobao滴宝贝描述页面为虾米不能用DIV CSS(CSS文件在用户自己空间上)做？害得偶还得用PS去剪裁成一块一块再发成TABLE…..ORZ.
我觉得图只能从一个方面表现 所谓的原型,模型 演示版 其实有些东西需要用文档细化的不知道你们这方面做的是不是很多,一个流程很难用几幅图就表示清楚的,我觉得应该多文档从多个角度来表示可能实现起来更贴近策划的原始想法
@Kevin,
1.这种情况我们也碰到很多，我的意见是“具体问题具体分析”，都到了这一步，怎么方便怎么来了。但一定要保证质量，必要地回头修改早期交付物也是有好处的。
2.是的，我们都是同时开很多浏览器一起测试。
@JerryTongCorp,
1.我们认为Web标准是要遵循的，但“校验”不是必须的。商业环境和W3C的“学术”环境还是有差别的：）
2.目前直接让用户上传CSS还是有风险的，比如我可以用CSS浮动一个“五钻”图片来盖住自己的“两心”……
@蚂蚁,
确实是这样，只有图是不行的。所以我们现在还在在努力完善这个流程，目前我们已经在原型之前又增加了一个简短的步骤——“PageFlow”，来识别所有需要做的页面和用户流程。文档和交付物的形式是需要根据公司、项目、团队的实际情况来确定的。
看到这篇文章，对于心中一直疑虑的问题找到了答案，很多东西都要学习，谢谢你们把这么好的东西分享出来，学习！！！
呵呵.还行.学习中!!!!!
＜ｂ＞＜／ｂ＞标签和＜ｓｔｒｏｎｇ＞＜／ｓｔｒｏｎｇ＞
有什么不一样呀？