我们从不阅读

界面设计有一条准则：为快速阅读而设计。用户面对web页面上的文字时，往往是一目十行的，就像他们刚刚拿到报纸时所做的一样。一些研究指出，用户通过快速扫描找到感兴趣的内容，再进行细致阅读。 有些时候，用户可能没有耐心读超过10个字的说明！ 这是豆瓣的一段说明文字。它很克制地停留在不起眼的右上角，没有太多花哨的文字修饰。我很欣赏豆瓣的界面，然而每当我碰到他们的说明时，几乎在0.01秒的时间内我便会果断关闭或忽略。即使在我将它截屏存储成图片时，我仍然不知道这段文字具体意思是什么。幸运的是，豆瓣是一个友好的网站，它们需要超过20个字说明的地方不多；即使不仔细阅读，它也不会粗暴地警告你：“对不起，你不能xxxx，请阅读我们的说明”。 对于传统的论坛来说，管理员们的管理任务要比web2.0模式下复杂得多。为了维持正常的秩序，论坛中可能会有一套长期积累下来的规则。这些规则并不一定就符合网络上的普遍惯例，所以即使是老网民初次到达论坛，也需要进行一定时间的规则学习。这样的管理模式并不是界面设计开发者能够改变的。我们面临的问题是如何让用户们更自然地注意到这些规则，并且更好的理解其中的重点。 一般来说，界面会面临数百字 数十条的规则，其中有多处需要强调。编辑的习惯往往通过五六种颜色、加粗来表达“强调”，并且可能额外加入符号。面对这样一堆文字，我们要如何入手呢？我像大概可以从下面几步开始 1 自己读懂规则。界面设计师首先要理解界面中要传达的信息。和相关的人员沟通，了解哪些是重点信息，哪些是次要信息。了解用户的需求，这些信息当中，哪些是对他们不可缺少的，哪一些是可以在其他界面表达的。 2 根据理解的语义，为所有的文字分段、分条。沟通后适当的精简、合并文字，调整顺序。可以将一大块的说明分散到实际相关的功能界面中（在需要时显示）。 3 挑出需要强调的信息，同样是沟通后尽量精简。为这些强调信息分类，用一些更规范、更聪明的方式来突出（有限的颜色、文字大小、小图标⋯⋯）。 这是早前做的一个活动的规则说明页面。其实这段规则也是我自己写的⋯⋯尽量每一行短一些，几行就能说完一件事情，从用户可能感兴趣的角度来说⋯⋯ 这是表单页面，上方的说明文字是模仿了淘宝常用的强调方式。 原谅我表单内容比较随意的设计⋯⋯当时还没有太明确的界面设计意识。 插播一个开心网的应用界面： 尽管这些应用我都装了，但我从来没看过它的文字说明。只需要图标＋标题我就能决定要不要安装它，至于怎么用，装上试试就知道了。目前为止开心网还没让我觉得自己是个不看说明的傻瓜。 这是会员服务的页面。我觉得最好的方式还是不要看文字说明就能完成任务，用图形来说话。并且避免用户犯错的可能，让用户能够放心尝试学习。

Kill IE6？

昨天一个朋友的QQ被盗用。她说一直改不了QQ密码，在腾讯的提交密码修改页面，始终显示不出验证码，让我用自己的电脑帮她修改。我心想，莫非是高级黑客程序，不允许上腾讯网站修改？介于曾经遇到过国内各种****的只兼容ie6的web服务，我毅然打开了ie6来完成朋友的嘱托。不料同样遇到了验证码无法显示⋯⋯果断换firefox⋯⋯几分钟后完成修改任务。 在2009年的调查中，ie6在中国国内依然占了60％的份额。根据我们网站对访客useragent的统计，ie6的比例也在60％以上。ie7、ie8各自占了11％左右。而在国外（尤其是亚洲以外），ie6的占有率年年下跌，2009年仅有10％。最有中国特色的情况是，各个网银几乎都是只支持ie。而作为互联网企业，相信所有的前端工程师都非常的希望干掉ie6，我们真的可以做到么？从我个人的角度来看，我甚至更想kill ie7！ 早些时候，国外就已经有轰轰烈烈的“kill ie6”倡议。不知道腾讯是不是也响应了这个号召，并没有考虑修改密码功能对ie6的兼容。web界面是人与网站的接触面，是一个用来沟通的接口。作为工作的人，我们有很多的抱怨，我们恨不得点一个按钮就能直接从效果图生成页面。然而界面本身应当是能包容很多用户，而不是责怪他们，或者倡导他们去改变什么，不管他们是不是还坚持用着ie6。更何况还有60％的人依然在使用着呢。 Kill IE6?恐怕还要再等些时候了！

烟盒集

这些只是全部当中一个不起眼的小方案。 浮云中的另一部分⋯⋯没有数过一共做了几个，但是大部分都有些“不堪回首”。

心动不如行动——说说Call to Action Button

Call to Action Button，即“行动召唤按钮”，指的是界面上那些勾引用户去猛戳它的按钮。它往往代表着这个界面的核心使命——让用户进行某个行动。我们常常能看到Call to Action Button被用来代表注册、下载、购买⋯⋯ 心动不如马上行动，这是电视直销里的广告词。电视直销总是使用各种手段来勾引用户，他们会在屏幕下方用大号字体标注订购电话，用各种视觉语言让你注意到这个电话。我们很难想像会有谁对电视直销产品动了心，却不知道打哪个号码。广告的制作人很明白，一定要突出“行动召唤”！我们的Call to Action Button就像那个订购电话，需要多花点心思。 这是一篇翻译的文章：行动召唤按钮：实例与最佳实践 Call to Action Button在国外的网站中已经很常见，处理的方法也很丰富。中文页面的几大杯具是：中文字体没有起伏，远看就是一大块；信息密度超级大，页面又长又挤；广告多，动画多，喜欢闪⋯⋯这些都非常不利于处理好Call to Action Button。 还是那个鸡冻人心的世界杯活动页面，在首页，它的核心使命是让用户参与竞猜。而在竞猜页面，我们又希望参与的用户顺便也去论坛多聊聊，增加黏度。所以我为两个页面分别设计了Call to Action Button： 这两个按钮的初始设计是照着firefox的下载按钮来的。它的特点是： 1 不规则的形状、高质量图标，吸引用户注意，同时加强品牌印象（主题） 2 明确告诉用户，点了这个按钮会得到什么结果 3 提供了附加说明信息，针对用户可能最想知道的问题，马上提供了解答 不过最后，第一个按钮算是失败了，我很没原则的把这个样式用到了好几个表单里（时间紧张不想再设计新的样式了）⋯⋯果然是无节操党⋯⋯以后会注意的！

糟糕，我不会买错了吧！——如何避免用户押错队

买彩票，最杯具的事情是什么？不，不是中不了大奖，而是明明500万元大奖的号码和昨天打算买的一个不差，你却不小心涂错了号码！ 这种错误对于用户是灾难性的。所以为了世界和平，我们应当尽量避免我们的用户遭受这样的打击。 世界杯活动是以竞猜的形式进行的。每一场比赛开赛前48小时，用户需要选择胜负关系和净胜球。一开始，程序给我的原始页面输出是这样的： 11日22:00 南非（A） 墨西哥（B） 净胜球数 胜负关系：A胜， B胜， 平局 净胜球：0个，1－2个， 3－5个， 5个以上 很多用户可能难以在短时间（1－3秒）内做初选择，他们需要记住谁是A谁是B。人脑的短暂记忆容量恐怕只有大约5个单词或者几个字，如果碰上斯洛文尼亚vs阿尔及利亚，用户恐怕还得反复回去对照。而那些过于自信或者抢时间的用户，他们只能凭着感觉走。押错队伍的几率变大了。 让我们做一个简单的调整： 11日22:00 南非（A） 墨西哥（B） 净胜球数 胜负关系：A胜， B胜， 平局 净胜球：0个，1－2个， 3－5个， 5个以上 尽管没有任何排版，似乎不那么容易出错了！ 最终这份表单我是这样设计的：用颜色和排版体现队名和字母A B的关系。在竞猜结果那里也用了不同的颜色区分正误（还有图标的大小），这样显得更有感情一些。 正如之前文章提到的，这个专题的时间很紧迫，大概只有2天的时间，其中又有大部分时间用于调整那些静态的企业信息展示的页面。这个真正和用户打交道的页面只留给我2个多小时的时间实现并且与程序对接。确实还有很多地方不够完善。用了一些算不上什么的小技巧。 至于结果，还算欣慰。这次活动或许是我们几年来最成功的一次，有5万多人次参与竞猜，每天都有上千的讨论帖发表，没有人反映他押错了队伍。并且因为明确的颜色区分，表示正确的“绿”和错误的“红”成了论坛中短期的流行词。常常有人抱怨他“全红”，希望能“绿”一下，甚至有人认为是抽多了国内烤烟才导致总是猜错（因为国内烤烟包装大部分是红色的），号召大家抽“小熊猫”（绿色）。还真有人实践了！当然他们不会意识到这和一开始的设计有什么关系，界面设计就是这样，隐形便是成功！ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 附上同样是世界杯活动的另一个表单。这是个以下注为形式的活动，需要突出剩余筹码和一些规则、通知。

Sherlock

最近看的，bbc迷你剧——“Sherlock 2010”（《新福尔摩斯》)。只有三集，但是看得狠过瘾。这年头，爱情喜剧神马的已经不吃香了，悬疑推理才是王道。福尔摩斯是一盘被一遍一遍翻炒的饭，那边华丽丽的小萝卜.唐尼＋裘德.洛基情大电影才刚落幕，邻居的柯南小盆友还在无耻地装嫩连载着，bbc版炒出的味道和谁都不一样。这是一个发生在2010年的故事，一个现代的福尔摩斯。片头闪过了伦敦眼、繁华了百年的街道（我忘记叫神马了）、放大镜、一堆堆字迹，这是在2010，奇妙的是，那种黑暗的感觉却一点没有少～ 这是微缩景观么？总之狠好看～ 贝克街221B的新住客——一个初看狠奇怪的福尔摩斯。他喜欢发短信，喜欢google，喜欢gprs，有一个叫推演论的个人网站，喜欢去人家blog留言纠正拼写错误，毒舌，以攻击他人智商为乐，高功能反社会人格⋯⋯右边那个在写blog的就是新华生，是的，他有一个blog ”Dr. John. H. Waston”，影响较大的博文包括”A Study in Pink“⋯⋯华生是从阿富汗回来的军医，用iphone，发短信略慢⋯⋯和过去的华生一样，他用手枪。（还有，他就是银河系漫游指南里的那个毛巾挫男） 如果柯南道尔活在21世纪，他是不是也会塑造这样的福尔摩斯？不管什么时代，他的精神都不会变。但是纠结的是，这部短剧的下一季竟然要等到明年年底，残忍啊。

互动设计是神马？

前些天我有些纠结，每次逛一圈互动设计的社区都有一种想死的感觉。一是从平面或者动画的视觉角度而言，和国内交互设计师差距实在是太大了，令我羞愤难当。二是即使是我觉得很有差距的作品，在评论里仍有很多尖刻的批评⋯⋯真是杯具啊。 忽然回过神来，那些成功的“互动设计”作品并没有引起我强烈的想要为之奋斗的欲望。我甚至都不知道什么是“互动设计”，听起来很像“交互设计（Interactive Design）”，而实际上又不是。看起来这是一个流行在国内的设计（广告）圈子的词，以我所见过的作品来理解，我先擅自下个定义： 传统媒介上的广告在互联网上的延伸。多用大量的flash动画表现，内容常常为广告、活动。它并非是界面设计中的某一个环节，更像是广告营销的网络产品的整个设计过程。 互联网比传统媒介的广告有什么优势？ 成本低，而且用户随时随地都能自主获取 能够反馈用户的操作（鼠标、键盘）做出酷炫的动画效果 用户能够成为信息发布者。以此为基础开展活动能得到及时的反馈。 我想这其中2、3条应当是“互动设计”与传统广告相比显著的不同点。 而实际上“互动设计”是什么？我只能先求教于伟大的维基百科，维基告诉我： 交互设计，又称互动设计，(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。 维基认为互动设计就是交互设计，看来维基是不知道的。我应该找万能的百度知道。全知全能的度受说： （友情提示：这整段话可以直接被忽略，我想你和我一样都看不太懂） 互动设计是一个新的领域：是审美以及文化、技术以及人类科学的融合。他所关心的设计是包含这些技术是否能给予服务，以及和他们互动经验的质量。 人类的生活就是一个互动和生活。从出生开始，我们就和人们以及我们所处的环境，使用我们的感官、我们的想象、我们的情感以及我们的知识直接进行互动。 但是到今天，计算机以及电传沟通允许人们间接的互动。透过我们和其它的以及我们所处的环境进行互动，互动技术已经变成一个媒介；以及他们已经转换我们生活的各个层面。 正如工业设计让机械符合我们的互动，建筑让我们在城镇中来符合社交生活的质量，互动设计以互动的气数来符合我们生活，并且就像是建筑以及工业设计，他们也是关心文化以及技术。 互动设计也显示出新的商业模型，他需要被发表这些服务以及经验。 在这世界上每个人都拥有12的计算机芯片；从而同现在在幼儿园要离开学校开始，没个人都将拥有数千个芯片。在如此复杂、以及和这些技术互动的世界中将会定义他们居住的生活质量。在如此复杂、好的互动设计的世界中未提得数字技术更容易进入到各个年龄层、以及他们的教育之中。 尽管百度百科中通篇都在解释“互动设计”而非“交互设计”，但我还是没有明白它指的是什么。在百科的最后，甚至给出了一个更骇人的定义： 他们称呼关键的人为「使用者接口发展者」，我相信这是和在网站世界中的「互动设计师」是相同的人。 好吧，我们终于可以从「使用者接口发展者」中提取出，互动设计师应该就是用户界面开发人员（User Interface Developer）。互动设计或许可以理解为用户界面设计。 回到之前的现实，我认为现在社区中大量讨论的用户界面设计更多是广告营销产品，甚至90％是flash动画来表现的广告和活动。社区中的讨论主要集中在策划、营销、视觉体验。这更像是在讨论一个传统的广告，不是么？只不过它被放在互联网上了。而我们平时理解的“用户界面设计”，常常是包含“前端实现”、“视觉设计”、“交互设计”、“信息架构”多个环节的工程性的东西。至于那些策划营销应该是在系统范围之外的～当然在用户界面设计中依然要体现策划营销的精神和目的。 单就设计社区当中所说的“交互设计”，我依然希望现在的情况能够有所变化，不要只是广告营销指导、设计师程序员执行的另一种广告，而应该成为一个吸取多领域精华的产品。 在人与互联网之间，好的表现形式并非只有flash。互联网用户拥有电视机前所没有的主动权，它们可以任性地点开这个超链接，也随时会点击窗口上的关闭键。他们或许更喜欢“我要做什么”的模式，而非“你们像让我做什么”。那些酷炫的动画，带着强烈自信，认为用户一定有兴趣继续看下去。实际上在那漫长的flash加载过程中就可能流失相当一部分人。或许有人说，那么我们将flash再优化一些，loading时间更短，不就行了么？再短也比不上纯html呀⋯⋯5秒的延迟对于一部分想要获取信息的人来说已经是忍受的上限。更重要的是，展示动画是一种“想让用户做什么”的模式，即使加入了鼠标键盘响应互动，也改变不了这个本质。 现在有了web2.0，有sns，有了90后，似乎一切都有了一些变化。有人说，用户喜欢展示自我，喜欢个性，我们结合web2.0讨好他们吧！互动设计作品中，很大一部分是在线活动，活动不外乎几种类型：上传照片、上传视频、上传文字、有奖问答、游戏。且不说这样千篇一律的活动是否真能达到目的，这样的活动是否就能够激起人们的参与热情？我仍然坚持flash长动画并不是一个好的吸引人参与的表现方式。况且，上传自己的照片或者视频就能让用户有很强烈的融入感么？还是纯为了活动奖品而特意去做（这就又陷入了那种“你们想让我做什么“的模式）。 要说现在最红火的活动是什么？前些日子恐怕得是”全民调戏凡客“吧⋯⋯我不知到这个活动是否和凡客有关，如果不是，凡客真该向发起活动的人付钱。尽管没有什么奖品，有着各种各样爱好的人们还是乐于参与。有讽刺时政的，有关于娱乐圈的，有体育圈的，有很正经的，有很YY的⋯⋯ps好的简直像凡客的官方版，ps不好的依然有一种强烈的戏谑意味，总是能找到让你印象深刻的～后来在公交车站看到韩寒的那个凡客广告，忽然发现相比广大人民群众，这个文案做得真得好苍白～这个活动没有flash，没有炫目的动画和华丽的介绍文字，你甚至不会留意到参与活动时用户界面的存在⋯⋯⋯⋯我想这才是我理想中的用户界面设计。当然，这样的概念也很契合凡客网站的风格～～再次呼吁凡客给活动发起人付钱吧！ 这张照片来自喵啦个咪哒 (这种阵容的巴萨在我手里都能输球)。虽然不算很好的作品，但旁边那个酱油瓶深得我心，gj！

Designing Interfaces－那些书本教会我们的事

Designing Interfaces中文版 它是关于界面设计模式的。在网上看到有人抱怨它太过简单，没有意义，对此也挺无语的⋯⋯至少它对我来说已经很够用了。一个模式的价值并不在于你把它记在脑子里，而是投入实用。在遇到碰到那些恼人的环境时，我们往往已经把各种需求利弊分析得很清楚，此时只需要它浅浅的点明，引入某一种模式便是顺理成章的了。况且我也并不认为Designing Interfaces仅仅是在蜻蜓点水，实际上它只是不愿说得太细。无论如何界面设计都只是一个相对较新的领域，那些准则并没有明确的对与错，具体的方法也五花八门，真正的细节还是需要我们自己去探求～ 一目了然 传说中的界面入门圣经。对于观念上的启发非常大。适合于界面产品开发相关的任何人阅读。它很薄，也很有趣。它的主旨就像它的标题一样（这个主旨确实是从头到位都被贯彻了），界面应当是”Don’t Make Me Think”的。在我看来它依然是一部“观念”上的启蒙书，在实际工作里，我们往往会体会到过程并不能那么完美，但即使不完美的过程依然能得出能够接受的结果。总之，学习他们的精神，走我们自己的路吧。 瞬间之美 如果这本书有腰封，我想一定会被写上《Don’t Make Me Think》作者最新大作或姊妹篇。但实际上它们的内容并不一样。《瞬间之美》更像介于《Don’t Make Me Think》和《Designing Interfaces》的过渡教程。作者漫不经心地带领我们走过一个个界面，述说着他思考和工作的过程，我们会发现一个让人心动的界面是如何从观念变成现实的。

面包机

搬家以后晓行同学赞助给我们的面包机，今天第一次用。感觉做了一个月任务还是没集齐原料～（忘记买柠檬了）～经过近4个小时的等待，第一个蛋糕出炉了～～皮烧得有点厚～不过味道还不错。最后来个近景～ PS: 前两天特地骑回家来收EMS的快递，送来的就是这个啦——某烟的世界杯纪念版，果然很山寨啊～不过只要有小花的盒子就够啦～来，跟我那囧囧有神的电脑桌面很同步吧～～

http协议复习笔记摘要

基于网络的应用永远离不开网络，尽管工作内容大部分在前端，也不可避免地需要了解网络。上周工作中，我不止一次地想要再复习复习http。周一时，我们讨论用wml还是xhtml mp制作wap网站页面。负责服务器段程序的小盆友有些担心他原l来针对wml做的一些东西要重来了。我突然有点蒙，但还是告诉他用xml还是xhtml mp并不太影响他的工作，只影响我的工作，服务器和客户端之间的沟通主要是遵守http协议，他那边需要改动的不大。接下来的工作涉及到需要判断客户端可接受的mime类型、客户端是否为移动设备的问题，这些需要通过读取http请求报头中的内容。周五碰到最大的问题，恐怕一部分还需要通过http内容来解决：我们的编码为utf-8的页面在ucweb下显示乱码，opera mini和nokia自带浏览器正常，目前不知如何解决。距离计算机网络的考试结束大概有四年的时间，当时这门课程并不太受重视，而现在看来真怀念书里的那些东西。周末特地花了一些时间把http部分重新复习了一遍。 1. HTTP是什么 http即超文本传输协议，是一个应用层的协议。它由两部分实现： 客户端程序 ————– 服务器程序      |——交换http报文——-| http规定了报文的格式和交换方式 1). web文档 web文档由对象组成。对象即文件，可以是html、图像、多媒体⋯⋯对象可以通过url寻址。 2). url 主机名／路径名 3). 浏览器 web应用的用户代理，实现了http协议的客户机端 4). web服务器 用于储存web对象，实现http的服务器端 2. http采用tcp传输 clint 《》 socket —tcp—-socket 《》 server （《》表示投递、获取数据） 3. http是无状态协议 因此需要保存状态时，需要通过cookie、session等才能实现 4. http三次握手 client：发起tcp连接 client：通过连接发送http请求 server：接受报文，取出文件，封装在http响应报文中并发送 server：通知tcp断开 client：收到响应报文，tcp关闭。提取对象，读取，得到另外n个对象的引用（例如其他的图像、css文件） client：对每个引用重复前4步 http并不关心client如何解释web页面，client往往会并行连接n个连接。 5. http报文格式 这部分其实是我现在最需要复习的，结果摘录得太多了⋯⋯干脆就不放上来了。下面是一些对于前端来说可能比较有用得一些参考说明： List of HTTP status codes List of … [Read more…]