UED TEAM

 转载 作者：lytous 从业这几年，自己写过的和帮人参谋的所谓“设计规范”不少了，这个东西大概在中国的决策层眼里是这么回事儿 – 一帮农民在一块田里种粮食，起先天气不错，土地肥沃，但是不久天气变差了，虫子多了，土地沙化严重，还有几个缺心眼的内鬼偷粮食，这下必须立定一个规范，挑头的告诉他们该在哪儿种，收多少麦子算合格，哪部分的地是留到下一季种的，种出什么样的麦子给奖金，偷懒不干活的怎么处理…… 但我理解的规范不是简单的把一个设计做成一个“行业套路”的量化指标，而是一个综合的品质评估的参考，甚至是一个设计能否面市的决定因素。为此，我们需要拟定一些表格，文档备案，图形参考，交互模板。 同时，设计规范还要成为设计部门或者一个公司对于设计品质的共同价值观，让大家伙都知道这样做出来的是好设计，通过这样的规范教育和交流，形成对设计品质的统一认识。设计规范不是规定要做什么，而是提出这样做是正确的，但是有更好的地方可以改进。 国外设计师管这种做法叫设计工具，是模板化应用的方法（stencil），我们称之为规范，更多的偏向于规则（regulation），却只学习到了量化指标的简单部分。说的严重点吧，我们中国人向来就特别擅长给自己搞个框架（紧箍咒），来约束人的作为与想法，可能有三个原因： 我们不太擅长找到解决问题的严谨逻辑，甚至是已有现成教训的； 我们始终缺乏对于团队成员之间的信任，哪怕是共同合作了多年的； 我们的企业无法承担某些错误带来的后果，甚至是很小风险的。 我们一开始就把一个工具性的东西变成了制度，因此问题便出来了。对于成长期的设计团队来说，建立设计规范需要的是确立一套可用工具，然后在工具的基础上发展成为部门设计品质建设的road map，如果只是弄个“导航按钮间距不得超过10px”这样的规范，就跟小时候尿尿要听到“嘘~~~~”声一样，尿得更快。 我不是跟这儿扯谈，在我看来咱们现在行业里面瞧得见摸得着的优秀的设计规范不多，现在来说说，和大家交流一下： 1. 设计规范达不到预期效果的原因 总是出现问题和错误后才开始拟定和修改规范，缺乏预见性； 规范制定出来后，执行不到位，缺乏力度和奖惩措施，监督控制节奏拖沓缓慢； 在产品设计过程中，不对设计规范做进一步的修订，甚至之前出现的错误也不去改正； 完全教条的根据设计规范设计，比如有些团队做的还是通用设计规范，很多设计师就照着里面的要求重复设计类似的页面，类似的广告，类似的动画，完全豪无特色，没有差异化。- 用心的话，你可以看看现在各个互联网产品的相似程度有多少？我不得不说，那些恶劣的设计规范要负一定的责任。 2. 设计规范最常见的错误 让部门领导者制定设计规范 – 设计规范是共同讨论出来的，在迭代中改进修正，由于国内设计师大多数有“领导恐惧症”，因此这样的规范就算制定出来也是空头支票，甚至有不少领导是很少参与一线工作的。 照搬国外成功团队的设计规范 – 这样的事情多半发生在喜欢“洋为中用”的设计团队中，国内外的设计环境差异很大，产品差异很大，面对的市场差异也很大，所以不要照搬，更不要直接翻译。 把设计规范打印出来贴在座位旁边 – 这是“大字报”，还是“表决心”啊？从我认识的设计师朋友来说，经常看座位旁边的东西只有2种，一是日程表，二是检查手机电池是否充满了。 3. 设计规范的本质是做好人的工作 在我看来，中国的企业只要是有设计部门的，做这个设计规范，最重要的是要和企业管理，团队文化建设绑定到一起，做人的发展建设工作。我们的设计师老实说没那么成熟，也没有过多的设计锻炼，整个不良的规范在哪儿杵着只会让设计师更加不愿意沟通 – “有啥好聊的？不是有规范么，照着做就行了” 设计部门如果真的沟通紧密，在设计过程中有共同价值观，这一个设计的流程是顺水推舟的，也是自然就形成的“规范”，不需要过多的文字描述。我还见过某些公司的设计规范中赫然写着：“一旦出现上述设计制作中A-C问题，设计师个人考评-5分”，OMG，原来你家的产品原来就值5分。 4. 优秀的设计规范要达到什么目的  量化指标： 确定一般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数，一般这是针对新手设计师的，好的量化指标是告诉他经验，比如：建议html文件输出后在ie6,ie7,firefox,safari中做至少2次不同分辨率测试，并将结果添加到《设计规范-参考数据》中；而不是规定他方向，比如：根据产品部要求进行测试修改。 确认设计关键点： 获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。它是一份检验文件，记录过程中的错误，留作以后的经验。并在此可以做出项目和产品设计的里程碑。 规范设计原则： 这个原则有可能是针对单个项目的，也有可能是整个设计团队的指导原则，这个原则要被反复强调，反复实施，团队人员要共同为这个原则负责，比如：“确保在任何项目结束时间前4小时，完成设计输出”，“绝不允许设计粗糙的界面方案，如下图所示说明：XXXXX”等。 设计规范本身也需要可用性： 描述同一个设计要求，可以说：“S级设计师针对该项目phase1部分工作，可控时间不超过2.5循环周期，输出交付件供ISO000459号程序评审”；但这样描写，能够明白的人会更多“界面设计师 XXX 设计该项目界面高保真原型，需在10个工作日内完成，5月22日下午14：00在5号会议室评审”。 千万不要把事情搞复杂，能把事情做简单的人是伟大的，设计规范也是如此。

微软于3月推出了Internet Explorer 8 Beta 1 for Developers中文版，主要是针对开发者。添加了不少新功能，其中二个比较受关注：Web Slice（网站订阅）和Activity（活动内容服务），当正式版发布后加上微软一贯的作风在操作系统上捆绑销售，估计对一些RSS提供商有相当大的杀伤力，并想独吞浏览器市场，结果如何，我们拭目以待吧！ 如果你有兴趣，看看http://ie8.163.com/ IE8的这二个新功能方便实用，而且对开发者来说，技术上不用学习什么新语言。主要是用类和XML文件组成。下面分别介绍一下实现方试： 一、Web Slice（网站订阅） <div class=”hslice” id=”theSlice”> <div class=”entry-title”>Title</div> <div class=”entry-content”>This is Content </div> </div> 其中类hslice，entry-title，entry-content和ID是必需的，当然你定义样式完全可以用另外的类，class支持多引用的，如class=”hslice  oneSlice”。除了这几个必需的外，还可根据具体需要设置如结束时间、带宽、HTTP 身份验证等都有预定的类来实现，具体查看官司开发文档http://www.microsoft.com/windows/ie/ie8/welcome/zh-cn/default.html。 二、Activity（活动内容服务） 这个比起Web Slice稍微复杂点，首先每个具体活动要调用一个XML文档，然后在页面里用一个简单的脚本来调用，分别如下： <script type=”text/javascript”> var function addActivity(index) { if (navigator.userAgent.indexOf(‘MSIE 8′) == -1) { alert(‘请首先安装IE8.’); } else { window.external.addService(“stock.xml”); } } </script> 脚本比较简单。 XML文档有特定的关键词： <?xml version=”1.0″ encoding=”GBK” ?> [...]

哀悼与团结的曲线 来源：Google 黑板报 2008年5月22日 上午 10:07:00 发表者：中国工程研究院工程师方坤 汶川大地震——这场三十年来降临在华夏大地上最大的一次灾难，令整个中国陷入巨大的震惊与无比的悲痛之中。仅仅在几天之前，”地震”仿佛还是一个与你我无关的字眼，”汶川”也不过是厚厚的地图集中一个无人知晓的偏僻的所在。而在今天，一切都改变了。 当我们依照惯例整理和分析谷歌搜索引擎的流量数据时，一条从未见过的曲线出现在我们面前。当意识到发生了什么事情时，我们的眼睛湿润了。      2008 年 5 月 19 日 14 时 28 分，全国人民默哀三分钟，悼念在汶川大地震中遇难的同胞。 中国网民——他们中很多人如此习惯于通过谷歌来搜寻生活、工作和学习中所需 的各种信息。而在这一刻，他们——中国网民，散布在九百六十万平方公里神州大地上的中国网民，说着标准普通话的中国网民和带着四川、陕西、河南、浙江、广东、安徽、贵州、福建口音的中国网民——在这一刻，他们全部放下手中的键盘和鼠标，立起身来，低下他们的头颅，为他们的祖国，为他们的同胞。那一刻，庄严，肃穆。 所有人都这样做了；没有人监督，也不需要监督。这条谷歌搜索流量的曲线说明了一切。 在那一刻，谷歌的全体员工也放下手中的工作，齐聚会议室，为地震中遭遇不幸的同胞致哀，为我们多灾多难的民族祈祷。但我们的数据仪没有停止工作，它默默地记录下这条笔直下降的流量曲线。 2008 年的磨难把我们如此真切的凝聚在一起，2008 年的磨难让我们如此接近的与国家靠在一起。 如果机器也会思想，如果我们的数据仪也能读懂这条曲线背后的含义，它也会流泪吗？ 或者，它更应该感动？因为它看到—— 一个伟大的民族，在巨大的悲痛中低下她的头颅。而当她擦干眼泪，她的头颅扬得更高。

   闭关开发了奥运资料库一个月，跟体育 奥运频道和产品部一起搞得天昏地暗的，产品终于成形了。过程艰辛，但也体会很多。写了几个字跟大家分享一下。 ————————————————————————————-    很多成功的产品研发一般都遵循四个阶段：需求，设计，开发和测试。    需求    当然就是编辑们通过市场调查，客户反馈，或者直接的知识经验，来制定产品功能技术，页面互动，等等的需求方案与功能架构。    设计    这一步就是把需求转化成直观呈现的形式了，主要也就是我们设计师的工作了，当然编辑和技术是必不可少的（关系到数据等方面）。完成优秀的设计往往需要对对编辑提供的资料方案，作细致研究。对形形色色信息表达，功能展现，人性互动，等等做整体规划设计，然后再进一步对设计原型加以充分分折，反复尝试和修改（这个过程是最难，也是最重要的）。可以说一句，如果一个设计在开始阶段和结束阶段大致相同，那可能就算不上什么设计了。    开发    这个阶段就是把具体的设计套上程序成为产品的步骤了。在这一步，对于大项目来说，其实有需要的话是可以提前的。而我们在这里就只需要补充一些功能实现过程中遗漏的小页面，和小修改。    测试   到了这里，要么小修改，小完善。 要么回炉，呵呵，甘就大镬咯！ ————————————————————————————-    在第二个阶段的设计，时间都花在这里了，讲下我的体会，有四个点。    基本需求设计    从你拿到编辑的资料，不管你设计的平淡还是华丽，这不是重点。重点是你的设计有没有满足它最基本的功能性需求。如果不能达到，那在这个层次以上的设计几乎没有价值。比如，国家库首页上，国家信息，新闻，图片，表格等基本表现。基础好了，就可以延伸更深层的互动和补充。    可靠设计    必须设计有稳定的表现样式，不容易出错，或者一个简单的错误结果造成很严重的后果。比如，运动员数据榜，刘翔的跟姚明的明显是不一样的。设计一个样式却能兼容不同的内容，这才是好设计。    可操作设计    也就是用户体验这老话题了。排版布局零乱，主次信息表现混淆，色彩运用不到位，图标按钮意思隐讳或歧义，等等都会造成操作难度变大或错误。用户体验的好坏也就关系到了这个产品未来命运。    由于用户群广，有时会因为不同年龄层的用户操作习惯争吵，但取决于大多的。大到一个板块内容的排放，小到一个按钮的放置，都需要严谨的考虑。    现在才发现一个产品有“新手帮助”这种说明页的，跟它的用户可操作性是成反比的。    创造性设计    到了这步就是精亦求精了。属于拓展与延伸。这个就是很高深的了。哈，省了，没话说。其实创造等同于摸索，创出来可能是对的也可能是错的，但能摸就是进步了。                                                             ————————————————————————————-    视觉规范    由于这个产品是资料库，包含了全世界国家，运动员，运动队，几十个大运动项目，几百个小项目，还有赛程赛果，新闻，图片，视频等等等等资料信息，两个字“复杂”。哦，都是公司买回来的，应该非常非常的贵。听说一共四家买了，一个央视买了，一新浪，一搜狐，再就是我们网易了，央视肯定是做新闻用的啦，其他三家应该都是做产品的了，到时有得比了。    哦，资料信息杂多了，视觉规范变得非常重要了。    [...]

   <style type=”text/css”> body {background:#fff; padding:0; margin:0; font-family:”宋体”; font-size:12px;} ul {list-style:none;width:800px;height:25px;margin:20px auto;} li {float:left;width:105px;height:25px;text-align:center;margin:0 -8px;display:inline;} a { float:left;width:105px;height:25px;top:0;left:0;background:url(bg.png) center 0 no-repeat; color:#000; text-decoration:none;} a:hover {background:url(bg.png) 0 -25px no-repeat;width:105px;position:relative; color:#bc2931;text-decoration:underline;} .active {background:url(bg.png) 0 -25px no-repeat;width:105px;position:relative;} </style> <ul>  <li><a href=”#”>菜单</a></li>  <li><a href=”#”>菜单</a></li>  <li><a href=”#” class=”active”>菜单</a></li>  <li><a href=”#”>菜单</a></li>  <li><a href=”#”>菜单</a></li> </ul> 有三点需注意： 1、li中的负边距，实现叠加效果 2、hover中的position:relative 3、a是内联元素，要触发haslayout，可以使用float:left来触发 不足之处： “菜单”字样文字有限制，背景图无法自适应。 由于IE6不支持透明的PNG图，圆角要处理成像素化。 [...]

CSS hack浏览器兼容一览表 CSS hack是指我们为了兼容各浏览器，而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表，显示了各浏览器对css hack的支持程度，对我们制作兼容网页非常有帮助。

     08年3月17日，公司足球比赛网站快乐VS客服队如期在天河公园上演。      我个人对自己上半场的安排打个85分，下半场打30分。上半场防守进攻一切如自己预料，也取得了满意的2：0的领先，中场休息时，由于我换人失误，导致辞下半场形势大转，一度被对手压着来打，形势混乱,比分也被追为较为接近的1：2，场下的我真是后悔莫及啊。还好，大师不负众望，在一次角球中力压对手一记狮子甩头头球破门，从他破门后的表情来看，爆发的力量是多么的可怕，而这一进球也给正在势头上的对手致命一击，最终有惊无险的取得了3：2的比分结果。      最终我总结了一下：安排球员上场不是分猪肉，不能为了做老好人而失去了团队的整体力量和规划，不然会得不偿失，这在工作中团队建设又何其不是呢？ 下面是几张比赛照片：（感谢欢姐为我们义务拍照）   E罗和大师   全队合影   颇有大将风范   无影脚

4月17日快乐足球队3:2击败对手！！！更多精彩请点击这里！！！

多拍网一些很酷flash演示动画的源代码！做图片演示非常好!大家慢慢享用 http://www.zcool.com.cn/jscode/index.html   下载地址         

虽然目前 Chrome 的扩展生态系统还没有 FireFox 那么强大，但也有不少优秀的扩展都已经从 FireFox 移植到了 Chrome 平台，Chrome 官方扩展中心现在也已经有了数千枚扩展，其中有很多扩展都可以为我们的日常工作带来便利，比如接下来我们要给大家分享的8个可以更加方便的在一个团队中分 享资源或者交流的 Chrome 扩展。 书签/链接共享 Xmarks Bookmarks Sync 是一个非常流行的书签及密码同步服务，它提供一个简单的方案帮助你为你的团队同步你喜欢的网站，需要注意的是这个扩展仍然在 Beta 阶段。 Delicious 可以很方便的将链接保存到你的 Delicious 帐户中，它最大的优点就是可以直接将链接分组管理，比如你可以将营销方案的链接分享给销售团队，将 CSS 资源分享给设计团队等等，这个扩展也还在 Beta 阶段。 Shareaholic for Chrome 这个扩展主要用于将链接分享到你的社会化网络、博客或者IM，如果你的团队使用社会化网络的话推荐安装这枚扩展。 Evernote 是一个非常实用的用于记录笔记的应用，另外如果你想使用分享笔记的功能，也可以同你的团队分享你的笔记内容，而 Clip to Evernote 扩展则主要是提供一个更简单的方式保存链接、文字摘录以及图像到你的 Evernote 笔记本。 文件共享 Drop.io 是一个非常优秀的文件分享服务，而 Drop.io for Chrome 这个扩展可以帮助你更加快速的创建新的保存/分享文件的页面，以及直接从一个网页上抠出文件添加到“Drop”中。 DropBox 这枚扩展主要是给用户提供一个直接访问 Dropbox 帐户的功能，以让用户更加简单的分享文件或者同步，需要说明的是这是一款非官方的第三方 Chrome 扩展。 交流 LiveChrome [...]

上期书友会分享了工具，大家发信给我说希望能够写篇博文来分享，PPT还不够他们使。好吧，我再啰嗦一次。我不想和大家具体去讨论一个工具如何如何 使用，具体有那些细节功能，我相信，工具只有在亲自使用、体验、完成工作任务才知道是否合适、好用、够用。在这里，我系统的和大家分享一下，到底会用到那 些软件、工具、平台，在全局上面有一个了解。工欲善其事必先利其器，好的工具软件可以大大提高工作效率，工具各有优劣，大家按需取之，我分享的主要是 Windows平台。

位置服务曾经一度陷入僵局，但是Foursquare的出现则让人们重新燃起对于位置服务的热情。长远来看，其最大意义在于它是一款真正脱离桌面浏览器而全面依赖手持终端的产品。

首先安装Gtalk的视频和语音聊天插件，支持Windows XP以上系统、Mac OS X 10.4以上系统和Linux，基本上是电脑就能装：

2009年二月Android程序开发者Arron La推出要价0.99美元的「Advanced Task Manager」程序在Android Market上面上架，这也是第一批上架的付费程序之一。这个程序的功能很简单，就是把Android正在进行中的程序给关掉，当然这样的功能在现今的Android操作系统已经不值一提，直接内置其中了。

Web界面设计

封皮上是这样描述本书的：想知道怎样在今天的Web上创造伟大的用户体验吗？……本书以当前最流行的Web站点为例，介绍了两大良行之有效的Web界面设计模式。如果你想构建或重构站点，并希望站点以丰富的交互为特色，那么本书就是你出奇制胜的宝典。

记得问过身边的一些开发工程师(非前端)缓存要分几个层次，从哪里做起，答案很多，比如反向代理缓存，DNS缓存，memcached，数据库缓存等等，确实很完整，不过好像漏掉了我们用户跟我们联通的最根本的工具浏览器，确实好似很少有人把用户的浏览器当作是web站点的组成部分来看待

若干年前，曾见《霸王别姬》的一名主创人员接受采访说，这片子的编剧、美术、造型、化妆、摄影、剪接、音乐、演员、导演等等，整个主创班底都是当时业内最牛逼的人物，又能全情投入，不成功没有天理。即便换一个导演，电影也能同样放在殿堂里受后世供奉。

作为交互设计师在设计线框图原型的时候，熟悉常见的web设计模式很有帮助，做到“心中有数”才能创造出符合需求，用户熟知操作方式的界面来。所谓“没有必要重复发明轮子”，模式往往容易解决常见问题，正确的模式能帮用户熟悉界面、提高效率。

位置服务曾经一度陷入僵局，但是Foursquare的出现则让人们重新燃起对于位置服务的热情。长远来看，其最大意义在于它是一款真正脱离桌面浏览器而全面依赖手持终端的产品。