交互与前端
上周二，从卓越定了三本书，《Designing Interactions》、《和谐界面——交互设计基础（英文版）》和《About Face 3》。今天新书终于到手，开心死了。 这本Designing Interactions的印刷质量不错，读起来也很舒服，外文书从手感上都是物有所值。接下来时间就得狠狠啃了！ 周末和benny在咖啡厅坐了两个下午。我基本上算主动加班。嗯，光是整理改版需求就写了整整一大张。对着之前看过的信息架构的那些东东，好好地思考了几天，确实有不少新的理解。 ps. 这两天都喝的都是cappuccino，事实上我也不知道点什么别的好，回来随手画了个图标，不是太成功。 pss. 希望日本安好 psss. 卓越的发货系统很奇怪⋯⋯
10月份有机会从零开始设计一整个企业网站。借此机会用上了心仪已久的960 Grid System。我们四年前的旧网站也即将改版，原来设计的宽度是1000px，我们打算今后都统一到960px，同时用上960 Grid System。下面整理了使用960 Grid System时考虑的一些问题，菜鸟们共勉。 为什么是960px？ 一直以来，网页设计师都希望寻找一个理想的页面宽度值，既能适应大部分屏幕，又尽可能的在一行显示更多的信息。 我们首先会考虑的是全屏自适应，但这并非一个好的解决方案。一方面，需要做一个能适应各个宽度的设计，从背景图片，到每个栏目标题的文字长度，都需要考虑到适应多变的宽度；另一方面，也是最致命的一点，相比英文单词，中文方块字是没有起伏的，用户对文字位置记忆的依赖性更大。自适应宽度也就意味着一行显示的文字数是不定的，阅读中文文字块时很可能很难一下找到刚才读到的那个地方现在到哪去了。因此，固定页面宽度比自适应更常用。过去，信息闭塞独立思考的我们会考虑用主流屏幕宽度－20px（IE中左右边框＋滚动条的宽度）。在1024＊768的分辨率下，页面宽度应该为1004px。但过不了多久，很多人便意识到，有一个更好的宽度——960px。 960 ＝ 2^6*3*5。与1004这个无厘头的数字相比，960能够被12、15、16、24整除，得数分别为80、64、60、40，这些数字听着就和谐而且靠谱。因此960非常适合于使用栅格设计系统进行网页设计。 为什么要用栅格设计系统? 栅格设计系统，即Gird System（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 栅格设计系统在印刷出版物的排版设计中十分普遍，网页设计常会从印刷排版中汲取灵感。在网页设计中采用栅格设计系统不单能够继承工整简洁的风格，还能大大的减少设计的工作量；从前端工程的角度来说，这种排版方式优点不言而喻：天然的规范性和可重用性。从整个团队来看，使用栅格设计系统能简化工作流程，便于交流，也便于分工和统一风格。 这是使用3＊3的网格的960px页面设计草图，来自“The Principles of Beautiful Web Design”。 960px是唯一的么？ 960是否是唯一最优的页面宽度呢？当然不是。目前使用栅格系统的页面的宽度并不严格就是960px，也可能是950px，例如yahoo的YUI框架就是950px。关于网页栅格系统设计的介绍可以看看TaobaoUED的这篇文章。1024＊768也不会永远是主流分辨率，随着分辨率的发展，下一个较优宽度很可能是1440（2^5*3^2*5），或者是一个没有分辨率的时代，页面能够按比例自动缩放（就像现在在移动版safari看到的那样）。另外，好的设计和创意常常需要打破规则，栅格设计系统也并非网页排版唯一可用的风格，在主流之外会一直存在一些很优秀的非960px页面（尤其是全flash网站）；有时候人们会议论他们seo上的缺陷，或者兼容性、用户体验不够好，但从艺术的角度上他们依然很优秀。 为什么用960 Grid System？ 960 Grid System是由Nathan Smith开发的CSS框架，有12列、16列、24列三个版本。CSS对于很多程序员来说可能完全不屑于优化，但它确实和其他的程序代码一样需要架构和优化。即使运营的是一个很小的网站，适当地组织、重用CSS代码能够节省相当多的时间和成本。CSS框架正是那个能让你在每个网站都屡试不爽的东西，把那些无聊重复的工作都交给它们吧，把自己的精力集中在怎么创造更令人动心的设计上！ 而且，960 Grid System不仅仅提供了CSS框架，它还提供了可打印的缩略图表，Firewofks、Phototshop、OmniGraffle 和Vision的模板源文件⋯⋯你可以让项目组的很多人都用上它。 它也能为你减少了很多兼容性问题，它支持被yahoo评为A级别的浏览器： 用960 Grid System做出来的东西好看么？ 这个问题很有现实主意色彩。使用960 Grid System创造好网站的能力毋庸置疑，在它的网站上列出了许多成功案例。此外，wordpress用户熟悉的WooThemes也用了960Grid System。 具体到中文的环境中，每个设计师都有自己的判断。例如我自己觉得16列的网格系统比较适合中文企业网站，你可能会有别的看法。但是并不是用了它就一定能创造出令人满意的网页。“Frameworks are merely tools that help people achieve solutions, not the … [Read more…]
原文链接：10 Best CSS Practices to Improve Your Code 第一部分链接：[翻译] 10 Best CSS Practices to Improve Your Code（10个改善CSS的最佳实践）- 1 4 有用的命名习惯 你会注意到上面我声明了两个列的id，我管他们叫col-alpha和col-beta，为什么不叫col-left和col-right？请总是考虑到将来的编辑。 下一年你可能需要重新设计你的站点，把左边的列移到右边，你不该就为了调整位置而在HTML中重命名这个元素并在样式表中重命名id。 当然，你可以就把左边的列移动到右边并且保留#col-left的id，但是那多让人困惑？如果id是“左”，人们应该会希望它将一直在左边。之后这没为你留下太多空间去移动周围的东西。 CSS的一个主要优点就是分离样式和内容的能力。你可以完全不用碰HTML，只修改CSS，就能重设计站点，所以不要用限制性的名字弄脏了CSS。用更通用的命名习惯，并保持一致。 让具体的位置或者样式的词语原理你的样式和id，一个.link-blue同样会让你话费更的工作，或者在客户要求你把那些蓝色的链接修改成橙色的时候让你的样式变得真的很糟糕。 按照他们是什么，而不是他们看起来的样子为元素命名。例如，.comment-blue和.comment-beta比起来就不太通用了，.post-largefont比.post-title更局限一些。 5. 用连字符取代下划线 比较老的浏览器可能对CSS中的下划线支持不太好，或者完全不支持。为了更好的向后兼容，请养成使用连字符的习惯。用#col-alpha而不是#col_alpha。 6. 不要重复自己 用组合元素代替重新声明样式来尽可能的重用样式。如果你的h1和h2都用同样的字体大小、颜色和边距，用逗号组合他们。 如下： 你也应该尽可能使用简写。请永远寻找机会组合元素并使用简写声明。 你可以比较以下两种写法： 明白css解释这些简写的顺序是非常重要的：top,right,bottom,left。一个大的顺时针圈，从正午开始。 同样的，如果top和bottom，或者left和right属性是相同的，你只需要写两个： 这条声明将top和bottom的margin设置为1em，left和right的margin为0。 7. 优化为轻量级的样式表 遵照上面的技巧，你能真的减少样式表的体积。体积越小，加载越快，并且更易于维护更新。 删掉那些不需要的，尽可能的用组合来合并样式。小心使用封装好的css框架，你很可能继承了一大堆不会用到的东西。 另一个为css瘦身的快速技巧是：你不需要为0指定单位。如果一个margin设置为0，你不需要写0px或者0em。0就是0，不需考虑丈量单位，css能够明白。 8. 为Gecko编写你的基本样式，然后为Webkit和IE做调整 把你自己从排除故障的头疼中拯救出来，先为Gecko浏览器（Firefox, Mozilla, Netscape, Flock, Camino)写css。如果你的css在Gecko中工作得很好，它也很可能在Webkit（Safari, Chrome）和IE中也没有问题。 9. 验证 请使用W3C的免费CSS验证。如果你遇到问题，你的布局不像你想要的那样工作，CSS验证器会在指出错误方面给你很大的帮助。 10.保持屋内整洁 … [Read more…]
原文链接：10 Best CSS Practices to Improve Your Code 为什么我们的CSS变得一团糟——我们真的很容易陷入这样的困惑中。 有时这是一开始就马虎编程的结果，有时是由于后期多重的附加代码（hacks)和修改造成的。 无论是哪种原因，这都不是无法避免的。写出干净，超级可管理的CSS很简单，只要你走对了路，你的代码会更便于今后的维护和编辑。 写出更轻巧、更快并且更不会让你头疼的CSS，以下这11个技巧将会提高你这方面的能力。 1.保持条理性 像任何事情一样，让自己保持条理性（有组织）是值得的。采用清晰的结构，而不是随心所欲地组织id和class（别想到啥就写啥）。 这会有助于你在心里记住CSS的级联性，并让你的样式表能够利用样式继承。 首先声明最通用的item（id class或者是html element），接下来是稍微不那么通用的……依此类推。这让你的CSS能适当地继承属性，当需要的时候，重写一条特殊的样式会更容易。将来编辑CSS时也会更快，因为它遵循着一个易于阅读的逻辑结构。 用一个对你来说最好使的结构，同时在心里想着将来的编辑和其他开发人员。 重置和重写 链接和字体 主布局 二级布局结构 表单元素 其他杂项 2.标题、日期和签名 让其他人知道谁写了你的CSS，什么时候写的，以及如果有问题可以联系谁。在设计模板或主题时这非常的有用。 稍等片刻…那些色标数字是咋回事？多年以来，我发现，简单列举出我的样式表里常用的颜色，在初次开发和后期编辑时真的非常有帮助。 这节约了你打开Photoshop从设计图里吸一个颜色，或者在这个网站的风格指南（如果这个东东存在）里查颜色。如果你需要那个特定的蓝色的HTML代码，只需要翻到注释处复制它就行了。 3.搞一个模板库 一旦你选定了用一个结构，剥掉所有不通用的并把文件存成一个CSS模板，以便将来使用。 你可以为多种用途保存多个版本：两栏布局、博客布局、打印、移动等等……Coda(OSX的编辑器)有一个优秀的Clips特性能让你很简单的做到这些。很多其他的编辑器也有类似的特性，不过甚至是一批简单的文本文件也能很好地工作。 每次都从头开始重写每一个样式表是很疯狂的，特别是每个都是采用一样的约定和方法。
界面设计有一条准则：为快速阅读而设计。用户面对web页面上的文字时，往往是一目十行的，就像他们刚刚拿到报纸时所做的一样。一些研究指出，用户通过快速扫描找到感兴趣的内容，再进行细致阅读。 有些时候，用户可能没有耐心读超过10个字的说明！ 这是豆瓣的一段说明文字。它很克制地停留在不起眼的右上角，没有太多花哨的文字修饰。我很欣赏豆瓣的界面，然而每当我碰到他们的说明时，几乎在0.01秒的时间内我便会果断关闭或忽略。即使在我将它截屏存储成图片时，我仍然不知道这段文字具体意思是什么。幸运的是，豆瓣是一个友好的网站，它们需要超过20个字说明的地方不多；即使不仔细阅读，它也不会粗暴地警告你：“对不起，你不能xxxx，请阅读我们的说明”。 对于传统的论坛来说，管理员们的管理任务要比web2.0模式下复杂得多。为了维持正常的秩序，论坛中可能会有一套长期积累下来的规则。这些规则并不一定就符合网络上的普遍惯例，所以即使是老网民初次到达论坛，也需要进行一定时间的规则学习。这样的管理模式并不是界面设计开发者能够改变的。我们面临的问题是如何让用户们更自然地注意到这些规则，并且更好的理解其中的重点。 一般来说，界面会面临数百字 数十条的规则，其中有多处需要强调。编辑的习惯往往通过五六种颜色、加粗来表达“强调”，并且可能额外加入符号。面对这样一堆文字，我们要如何入手呢？我像大概可以从下面几步开始 1 自己读懂规则。界面设计师首先要理解界面中要传达的信息。和相关的人员沟通，了解哪些是重点信息，哪些是次要信息。了解用户的需求，这些信息当中，哪些是对他们不可缺少的，哪一些是可以在其他界面表达的。 2 根据理解的语义，为所有的文字分段、分条。沟通后适当的精简、合并文字，调整顺序。可以将一大块的说明分散到实际相关的功能界面中（在需要时显示）。 3 挑出需要强调的信息，同样是沟通后尽量精简。为这些强调信息分类，用一些更规范、更聪明的方式来突出（有限的颜色、文字大小、小图标⋯⋯）。 这是早前做的一个活动的规则说明页面。其实这段规则也是我自己写的⋯⋯尽量每一行短一些，几行就能说完一件事情，从用户可能感兴趣的角度来说⋯⋯ 这是表单页面，上方的说明文字是模仿了淘宝常用的强调方式。 原谅我表单内容比较随意的设计⋯⋯当时还没有太明确的界面设计意识。 插播一个开心网的应用界面： 尽管这些应用我都装了，但我从来没看过它的文字说明。只需要图标＋标题我就能决定要不要安装它，至于怎么用，装上试试就知道了。目前为止开心网还没让我觉得自己是个不看说明的傻瓜。 这是会员服务的页面。我觉得最好的方式还是不要看文字说明就能完成任务，用图形来说话。并且避免用户犯错的可能，让用户能够放心尝试学习。
昨天一个朋友的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： 这两个按钮的初始设计是照着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万多人次参与竞猜，每天都有上千的讨论帖发表，没有人反映他押错了队伍。并且因为明确的颜色区分，表示正确的“绿”和错误的“红”成了论坛中短期的流行词。常常有人抱怨他“全红”，希望能“绿”一下，甚至有人认为是抽多了国内烤烟才导致总是猜错（因为国内烤烟包装大部分是红色的），号召大家抽“小熊猫”（绿色）。还真有人实践了！当然他们不会意识到这和一开始的设计有什么关系，界面设计就是这样，隐形便是成功！ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 附上同样是世界杯活动的另一个表单。这是个以下注为形式的活动，需要突出剩余筹码和一些规则、通知。
前些天我有些纠结，每次逛一圈互动设计的社区都有一种想死的感觉。一是从平面或者动画的视觉角度而言，和国内交互设计师差距实在是太大了，令我羞愤难当。二是即使是我觉得很有差距的作品，在评论里仍有很多尖刻的批评⋯⋯真是杯具啊。 忽然回过神来，那些成功的“互动设计”作品并没有引起我强烈的想要为之奋斗的欲望。我甚至都不知道什么是“互动设计”，听起来很像“交互设计（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！
benny说我写的东西太没条理了，好吧，这次我就尽量一点一点的来说。 gallery是网站中用于显示产品的所有照片的页面。产品照片是通过这样的流程产生的：网友自主提交－>管理员人工审核－>设计手工加上水印－>上传。gallery已经有3个版本，下面会仔细地说说这三个版本，纪录我在做这些工作时候的考虑，从中总结一些可用的方法。 gallery v1.0 启用时间：2006.6-2009.10 页面元数据： – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 2009年bing的图片搜索提供了一种新的界面设计模式——无翻页的缩略图列表（即用一个页面将所有的缩略图列出来，摒弃盛行数年的“分页”模式），分页模式产生于那个屏幕小、用户对信息掌握程度低的年代，它将大量的信息切割成用户容易消化的长度，一段一段的推给用户。时光飞逝，2010年的今天，屏幕变大了，用户页习惯了在屏幕上阅读大量的信息，一个页面呈现所有的信息对他们来说理解起来没有那么困难了。分页反而给他们增加了点击的负担。现在看来我们在4年前就已经有这种理念了嘛⋯⋯Orz⋯⋯ 因为我们并没有一个“缩略图”集合页面，所以“查看大图”的页面也需要至少提供一种提供给用户“浏览全部照片”的可行途径。现在看来，第一版gallery是一个非常“简单”、“实用”的作品，在这个页面能直观地看到所有的缩略图。这个页面并不是我设计的，它工作了相当长的一段时间。 gallery v2.0 启用时间：2009.10-2010.7 页面元数据： – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 v2版本的元数据与v1时并没有变化。改版的起因是我们计划在此页面加入“用户评论”功能。在v1中，每个页面都会在页面下方显示全部图片的缩略图，“用户评论”只能放在这个不定高度的缩略图列表之下，大家感觉这样不太合理。我们同时也希望这个页面“用起来更方便一些”。v2的主要改动在于： 将产品名称单独放在页面顶部中间 将缩略图放入一个固定面积的“窗口”中 将上述窗口放到当前图片（原图）的右侧。 在v3里我又将这个窗口挪回了大图下方⋯⋯ o(>。<)o…… 后来我也扪心自问，为什么要放在右侧……我其实只是参考了无节操百度的图片搜索。更深层的原因是： 大图的宽度仅有800px，小于主流宽度960px，完全有空间在右侧加入缩略图列表；右侧的列表能减少用户浏览图片时垂直方向的滚动；同时，用户在查看大图时就能看到这个列表，他们可能马上就意识到还有其他很多图片可供查看。 带有缩略图的，尺寸很大的“上一张”、“下一张”按钮。这两个按钮是相册潜规则了吧，用户习惯了……所以大大方方show出来吧！ gallery v3.0 启用时间：2010.7-？ 页面元数据： – 产品名称 – 当前图片(1024px × 768px) – 其他图片的缩略图 任何一次改版都可以看成是要解决某些需求，在v3的设计前，我意识到首先要整理一下我们的需求。 1 gallery页面改版需求分析 1）用户的需求 用户进入这个页面的原因，往往反映了用户的需求。我会经常尝试通过“列出页面入口”的方法来了解用户“为什么而来”。进入gallery页面有三种方法： 点击product页面仅有的一张产品图片(该图片尺寸为240px … [Read more…]