XDash Weblog » ue

低头编程，别忘了抬头赏月

xdash — Wed, 30 Jun 2010 17:43:55 +0000

大致上，一款互联网产品的好坏，可以从其URL结构上窥见一斑。当一款新产品呈现在用户面前时，挑剔的业内人士会从各自视点予以剖析，设计师看界面，程序员看技术，工程师看架构。而好的产品，通常在URL上即给人以精心策划过的感觉。设计师看得出美感，程序员看得出逻辑，工程师看得出层次。皆大欢喜。

豆瓣读书上通常的条目URL形式是：http://book.douban.com/subject/4741216/ ，子域名，主域名，条目，ID，分门别类一目了然（网上专门研究豆瓣URL的帖子 1、2）。街旁把主要页面都划归到 user 和 venue 二级分类下，上帝的归上帝，凯撒的归凯撒。ReadItLater 的域名极尽简短之能事，login页面就一个l，恨不得省到姥姥家去。WordPress 也提供了自定义固定链接功能，按日期、按编号、按标题、按混合方式组织页面结构，供用户发挥个性、厘清组织，或是专门喂搜索引擎蜘蛛。

相比之下，虽然百度贴吧是百度一款较为成功的产品，但域名形式实在不敢恭维，明明是伪静态页面，却偏要弄成 http://tieba.baidu.com/f?kw=wow&fr=tb0_search&ie=utf-8 这样高低起伏、中英混杂还带着参数符的形式。人人网的一段视频分享的地址是这样的：http://share.renren.com/share/GetShare.do?id=2608517510&owner=243810774&ref=minifeed&sfet=110&fin=2 。经过测试，其中很多参数并不必要，仅保留id而删除后面的owner、ref、sfet、fin几个参数，并不影响用户观看视频，对页面呈现似乎也没有什么改变。

我在大一曾经参加过一个WAP手机论坛项目的创业社团，担任程序开发。当时在设计之初并未进行深度规划，只是走一步看一步，今天写个 reg.asp，明天增加了 display.asp，后天需要 user_info.asp，大后天发现 display.asp 放到 bbs/ 子目录下比较好，reg.asp 改为 user_reg.asp 更清晰，最后改得灰头土脸，繁琐异常。

结果，虽然用户在手机屏幕上用WAP访问时并不关注URL，但实际上，地址结构是非常混乱和冗长的，并且我怀疑单在传输URL这一项上，就无故浪费了用户许多字节的流量（当时手机上网还是很贵）。

因此，我想说的是：

1、一款产品是否有诚意，以及是否有可能取得日后成功，从它设计之初对URL的设计，就已能三岁看老。

2、好的URL形式，应该是层级少（三级以内）、简短易记（admin，而不必 administration）、形式统一（字母，或数字，而非二者结合）、内涵一目了然（userid，而不是usernum）。

3、模块化和可扩展性，必须列入产品设计之初的讨论范畴。

4、不要陷入技术 or 设计的二元思维。二者并不矛盾，并不是非得要会用Excel来画超级马力，或是向苹果家族产品看齐，才算融合了技术与设计的真髓。程序员应当有意识地在coding中培养艺术美感（最典型的例子莫过于代码中“留白”对日后解读时的帮助），设计师则需要适度锻炼逻辑思维。二者并不是迥然对立，只是术业专攻的侧重点不同，应是阴阳互补，而非水火难容。

5、产品的用户体验不仅仅是设计是否美观，元件摆放位置是否科学，也包括了是否采用适当的技术、是否有清晰的层次组织、是否有明确反馈、是否能返回满足需求的结果等。那些将体验混同于界面的说法，纯属bullshit。

6、技术宅们，低头编程，别忘了抬头赏月。

您可能对这些文章也感兴趣：

我的经验分享：幻灯片演示中提高用户体验的10个技巧

xdash — Sat, 26 Dec 2009 06:56:56 +0000

如果说在设计学院学广告这么久以来，我学会并且玩得最溜的软件是哪款，不是PS，不是AI，却是PowerPoint。这个学期的原创品牌策划课断断续续进行了三个多月，围绕这个项目，我们团队的PPT陆续制作了8部，其中有一半是我完成的。

在制作中深切体会到，PPT的制作过程中如果有意识地融入一些用户体验设计的技巧，完全可以简单有效地提升整体质量。观看你PPT演示的观众，就是你的用户。要用PPT打动他，说服他，震撼他，从而达到使用幻灯片进行演示的目的。

这里以前天完成的“CHAN界概念体验馆”原创品牌策划项目的最终提案PPT为例，谈谈我个人对幻灯演示制作的态度和心得：

1.整体设计风格的统一

跟网页制作一样，PPT的风格也要遵循统一，包括配色、字体、排版风格、语言风格、图片风格等。这在我看来应当是检验一个PPT是否合格的底线。就算上网down了现成模板，至少也应该配合主题将其进行合理改动，而不能简单地本着拿来主义的精神直接使用。

例如这次的PPT，我采取了简洁稳重而不失高雅的配色方案：大面积的白和少量的深灰。于是我的所有页面制作都统一服从这个风格：

2.设计风格与内容的统一

形式应当服从于内容。关于品牌策划的内容演示，就不该用销售报表的演示模板。新颖活力的原创项目，就不该用深沉死板的配色方案。中国风的文字叙述，就要摈弃Office自带的剪贴画。

由于我们这次的提案项目完全出自团队异想天开的原创构思，结合现代科技的活力与传统文化的禅意，因此整体风格简洁大方，但在细节上却做足现代感的文章。例如上面那张封面图，就是一朵充满机械质感的莲花，它很好地体现了科技与人文的统一，开篇即让观众眼前一亮。

另外进度条的设计（圆角、Web2.0流行配色）、字体（微软雅黑），也符合目前网络流行的审美标准。

比如下面这个内页：

3.大量留白

PPT演示最怕的就是大段的文字。制作者应当从台下观看者的角度换位思考：如果换作我，能够忍受那么大段大段的文字，或是巨细靡遗的表格吗？

记住，PPT只是工具，台下的那帮不明真相的围观群众，与其说是观众，不如说是听众。你要做的是将大量信息通过听觉塞进他们的大脑，间接配合以PPT的视觉化传达，切不可本末倒置。

我将所有页面的字体都控制在一定限度内（请参考Twitter的140个字符），即便是需要较多文字的页面，我也进行了空格、分行、项目标签

等视觉方面的优化，使之不那么压迫视觉：

4.具有视觉冲击力/创意/趣味的配图

平庸的图片无法吸引观众的眼球。选择一些具有视觉冲击力、富于创意、充满趣味的配图，能让你的PPT成为一件艺术品。

我个人通常有个喜欢，在网上乱逛时碰到好图都会随手另存为下来。因此每当需要时，只要在本地硬盘里浏览一番，一定能找到适合的好图。另外我也比较喜欢去Flickr、deviantArt等网站搜索需要的图片（当然是得用英文关键词的）。

看下面这个例子。《星球大战》里的风暴兵推着帝国的金币财源滚滚，我将它解读为“创业故事”，切合文案且不失趣味：

4.去掉你的音乐！

在两种未经准备的情形下，我最恨听到音乐：一是在浏览网页时（比如随手点入了一个新浪的文艺青年博客）；一是在正儿八经进行PPT演示时。除非特别需要，或是融入了某些新颖运用的巧思，否则请停止做不必要的事情。

配音乐并不能让你的幻灯演示意境更优美，就像把幻灯片的页面点缀上吉米的插画并不一定就为它增添了几许浪漫氛围，相反，会让人觉得不够专业。如果仅仅是出于个人喜好而播放只有自己听过的小众歌曲，那就更加糟糕。

最惨的是，如果音量控制不当，BGM很可能盖过你的演说辞。

5.PPT的演示环境对效果的影响

由于PPT演示多在室内进行，其显示效果受采光环境、设备仪器效果、距离观众远近等物理因素印象，因此仅仅在电脑屏幕前反复确认自己的PPT完美是不够的，还要考虑到演示现场的客观环境。

例如，采光环境对PPT的影响。如果在密闭且较暗的房间中演示，那么一般而言对比度适当的PPT都能较好展示（除非你用浅背景色+浅前景色这样的配色，这样很容易眩得人眼前一片空白）。而隔光效果较差的室内，深背景色+浅前景色的配色，观看效果较好。

再例如，如果PPT演示时台下观众坐成好几排，那么就得考虑到最后一排观众的视角。通常他们坐的较远，受环境角度和前面观众背影影响较大，想看到投影幕布下端的内容比较困难。一视同仁地照顾好这些观众就是我们提升用户体验的宗旨之一。为此，在制作PPT时，我通常选择在确保页面安排符合黄金分割比例的同时，尽量将内容靠上放置，而空出页面下方，如图：

6.提案与比稿是一种博弈

学广告的人都知道，向客户提案一般采用PPT形式，几组竞争对手依次展示自己的项目方案，客户（甲方）看毕所有候选方案后，选择最满意的一组。Deal。

这时，制作PPT不再仅是做好自身内容这么简答，因为你不是一个人在战斗。要揣摩竞争对手可能的思路风格，避免思路僵化、套路雷同，而是尽可能跳出他们的维度，寻求自己的阵地，从而让自己从千篇一律缺乏创意中脱颖而出一枝独秀。

学一点心里学和博弈论会有比较大的帮助。但也别太过前卫。真正聪明的人不是比别人领先几百步（比如哥白尼、布鲁诺就因为理论太过fashion而杯具了），而是能比别人多预想一两步。

鉴于我们这次原创品牌的提案是最终提案，我预想到其他组很可能卯足力气极尽华丽之能事地将PPT做到极致，因此我另辟蹊径，回归简约，跳出了大众口味的审美框框，结果就像封面的那朵莲花一样，濯清涟而不妖，淡雅别致。

低调奢华，阿迪王。

7.互动与共鸣

提问回答、派发奖品、载歌载舞、指名道姓等，这些PPT演示中常用的手法，运用得当，立竿见影，运用不当，过犹不及。因此还请深重考虑。

我个人更倾向于一种内敛而冷幽默的方式——激发台下人的共鸣。这共鸣来自另一个维度，比如他们可能是你项目的VC，冲着商业目的而来，期待着你的PPT为他们呈现良好的商业前景；而事先做足功课的你，了解到这个VC很喜欢科幻，那么你就可以用上我之前那招（星球大战风暴兵推着金币的插图）来调动起他活跃的神经，使他觉得与你更有共同语言，自然也就更亲近，更容易聆听。

再比如这次我PPT演示中的一个插图，我用了《生活大爆炸》中的Sheldon，于是看过这部剧（我们班看过的同学不少的）立刻会心一笑：

记住，是有计划有预谋地激发共鸣，而不是自作主张地输出价值观。否则你收获的可能不是会心一笑，而是会心一击。

8.创意与亮点

不怕冒险，就怕创意它没有爆点。看看围绕你的演示内容，能做出什么创意玩法来（一定要别人无法复制的）。

比如，在介绍团队成员时，我事先让大家统一在线制作了卡通头像（FaceYourManga）。

再比如，谢幕前，我使用了奥巴马的一张马赛克拼贴。起初大家并没有意识到它与我们的CHAN界项目有何关联，直到右侧的“CHANJIE”字样飞入，大家终于明白——奥巴马童鞋在2008年一直不遗余力倡导的“CHANGE”，原来被我们篡改成了“CHANJIE”（看上去和读起来都很像，不是吗？）。

9.细节！

细节决定成败，被人重复过无数次的观点，在我看来是金科玉律。我向来对细节苛求完美，在制作幻灯片时，会为了检测是否符合黄金分割而拿把尺子凑到屏幕前反复丈量，会为了纠结某段文字用12px还是14px而纠结半个小时拍板，会为了找寻一张合适的配图而在Flickr上流连几个小时，会在正式演示前寻找可能的内部人员进行alpha、beta测试…

我甚至还为自己的所有PPT制作统一部署了行动准则。比如对于所有插入的块状图片，为了增加其友好性、提高页面的嵌入度，我会用PowerPoint2007给它们应用上“投影”这个样式。也许观众在观看时根本不会发现这区区几个像素的灰色宽条，但实际上心理早已欣然接受。

此前百度的搜索框用户体验胜于Google，不就胜在那区区的6个像素吗？

10.完整打包

请记得完整打包PPT，包括嵌入所用到的字体。否则，一旦你用的字体在演示用机上不存在，那再好的设计都会走样，使效果大打折扣。

对于特别重要的页面，我一般为求稳妥，甚至会用PowerPoint2007的字体转存为图片功能，将它们保存成外部图片，再重新导入替换原字体（我是不是很折腾 — — ）：

以上就是我在制作PPT的经验心得。本次CHAN界原创品牌最终提案PPT的在线幻灯演示，我已经上传到巴巴变相册，想看的朋友请点击这里。

文末推荐两个值得参考的博客：

1.淘宝UED（http://ued.taobao.com）

个人认为是业界最好的UED团队博客，内有大量图文生动的用户体验设计经验技巧，稍加消化完全可以移植到PPT的制作。

2.PPT设计及其他（http://pptdesign.blogbus.com/）

PPT设计的各类优秀理念、经验、资源汇总。

请充满Power地讲出你的Point！

您可能对这些文章也感兴趣：

博客氛围营造漫谈

xdash — Sat, 27 Jun 2009 17:07:00 +0000

Web2.0使互联网由传统的单向信息推送转换为由用户产生内容并交流分享的互动性平台。在此进程中，我们更加关注精准营销，关注体验研究，关注用户在我们的网站上的一举一动及其背后的细微心理变化。

最近手头的几个网站/博客的case涉及地方专业门户和电子商务领域，由此也让我产生了探究新生网站/博客如何媲美既有成熟网站以争夺自身市场份额的好奇。

除了采用SEO、公关、广告投放等常规手段外，我的关注视角锁定在网站氛围的设计营造上。通过查阅资料、比较同类网站和亲身实践，现以博客为例，浅谈网站氛围营造的手段及其效果。

一、基础设计知识的运用

尽管同其他任何事物一样，出位的博客需要具备自己的特色，但这与恪守基础的设计理论并不违背。不同色彩传达的含义、色彩之间的配搭组合、版面布局的技巧、留白的作用、字体大小及疏密排列、重点信息突出的方法、怎样的图片更具吸引力、如何引入细节处的一些巧思等技巧，都值得专业Web设计师和非专业的网站制作爱好者学习掌握。

缺乏经验的新手制作者往往有这样一些误区：

认为色彩越丰富越好；认为页面内容越满越好；大量加入java特效和widget挂件；片面追求个性而使网站显得不伦不类；大量堆砌广告；网站各页面风格混乱，缺乏统一性，等等。

以上种种，皆可以通过学习常用的设计知识予以弥补。在进入设计学院之前，我进行网站设计也是靠跟着感觉走（幸好感觉也还不错）。在进行了两年的专业熏陶后，我的设计风格有了比较系统的转变，对过去犯下的错误有了深刻的认识，也对如何确立一个网站的设计有了更加成熟的见解。

现在的我认为，在网站建设者技术实力越来越高，创建网站成本日益低廉的今天，网站制作者能否适当掌握一些基础设计知识，对于网站整体氛围的确立有着比较重要的影响。

看看淘宝UED和腾讯CDC，二者在整体风格上均是遵循清新简洁的设计理念，而呈现的效果让人非常舒服。仔细分析二者在留白、对比色、灰色的运用、字体图片版式等方面的构思，不过也是基础设计理论的诠释升华而已。

二、网站更新情况

没有人会喜欢一个死气沉沉行将就木的网站，博客尤其如此。几周甚至几个月不更新，博主往往给人以“不负责任”的态度感受。如果用户几次登陆看到的都是同样的缺乏新鲜感的界面，那么很可能这个网站已经被用户暗自划了个小黑叉。

许多号称行业门户、地方门户的网站，往往仅凭观察其各个板块最新一篇文章的更新日期，即可对其专业程度有所了解。浮躁的网站更新频率并不固定，甚至当建站者发现网站没有前途是即采取“弃站”。而相对专业的网站则背后依托一支运营团队维持日常维护，更新频率较有保证。

在Web2.0时代，产生内容已经不像过去那么复杂。如果对于完整撰写一篇博客文章缺乏足够的时间或灵感，至少可以通过使用微博客输出挂件、阅读网摘插件、随机阅读分享插件提醒博客读者你的存在。

此外博客最近留言者的留言时间也成为判断网站活跃度的重要标准。对于数周不更新的博客，如果在近日之内仍有读者针对过去某篇文章发表评论（并且最好被博主回复），那么博客氛围不至于过于沉闷。如果一个博客及其衍生平台近期的时间轴上缺乏任何形式的新鲜信息产出，那么极容易被用户判定为死站。

三、让你的用户感觉被重视

博客应当是互动的媒体，而非博主一个人的自说自话。让你的用户感觉到为重视，让他们有事可做，才能增强用户的参与感与满足感，改善用户体验。

例如Twitter这样的微博客网站，会在用户注册之后推荐一些活跃“推”客，供新手follow交流。8box这样的音乐网站，会在注册过程中对用户进行音乐口味测试，并在注册后推荐适合用户口味的音乐（豆瓣也类似）。

引伸到博客，我认为可以一个简单的方式是在侧边栏建立一个“您可能会喜欢”之类的模块，推荐本博客中对目标用户价值较高的文章，使用户可以快速定位，并在第一时间对博客的内容定位、价值输出产生好感。

你还可以在博客中给出其他社交网络的联系平台，例如twitter、饭否、校内，抑或Email、QQ、Skype等传统网络点对点联系方式。使用户获得进一步了解你、了解你的网站的机会。

四、留言评论内容质量

“好。”“路过。”“顶。”“飘过。”——如此种种留言并不会为一个博客增色多少，即便数量再多，只能说明博主人缘不错，但并不代表网站的氛围与价值达到了同样程度。

氛围良好的博客，应当在用户的留言评论中，同样体现出价值传播的力量。针对博主的漏洞进行见解性地补遗，对博主的错误言论进行针锋相对地驳斥，回答博文中抛出的问题，对其他留言者进行点评和回馈。有效的用户留言评论会为一个博客增色不少。

cnbeta和可能吧就是两个典型的网站，二者内容质量很高，而评论也很精彩，值得作为对正文的补充材料一读，往往收益更丰。

网站版权的声明体现了内容作者对于自身合法权益的重视和对他人著作权的应有尊重，一定程度上反映了网站的形象和专业程度。

基本的做法是网站下方的copyrights说明以及文章来源的原作者信息和链接。进阶一些的博客会在醒目处标明网站遵守的网络协议。譬如本博客右侧个人信息下方就清楚地标明，“本博客采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可，遵守 BLOG IN REAL NAME 实名博客之潜规则”。

现在我的博客订阅RSS同样增加了版权说明部分。我使用的是better feed这款wordpress插件，它允许用户定制可视化的个性feed。

六、博客广告

广告也能增强博客的氛围？没错。但这牵涉到投放广告的质量和内容。

设计别致、养眼动态的广告，能使博客显得更加生动有趣，内容丰富。煎蛋顶部的小格子和右侧的RAYWOW TEE广告，色彩绚丽，设计独特，符合煎蛋活泼、生气的感觉。而少了首页那些制作精巧内容特别的广告，MSN中国也与一般CMS搭建起来的信息网站无异，甚至更难看。

而广告、广告内容与站点定位无关、广告设计丑陋、广告显示方式影响阅读，是应当坚决避免的。网上的反例有很多，在百度上随手以“网赚”为关键词搜索就能收获一堆，或者来看看这个页面，它的广告方式还不是最令人作呕的。

最后，关于网站氛围的营造，推荐来自Tencent CDC官方博客的这篇文章。