Search

天涯博弈

simpleblue for zblog主题发布2008/05/16 1:30:00 上午

simpleblue是在我原本一款基于blogger的风格Simple blue theme上修改的，界面清爽，适合喜欢简洁的朋友使用。

在线预览：http://www.tianya8.net/zblog/

效果预览:

主要特点：

1、将分类作为菜单项目显示
2、 增加了菜单聚焦（定位）：如果您使用这款模板，请注意您的文章分类不要太多，否则菜单可能会出现折行
3、去除多余的装饰图片
4、增加了关于作者的内容，如果您要修改个人信息，请点"修改我的信息"

安装方式：

1、下载simpleblue主题zti文件：下载地址(141.02 KB)

2、启用主题后,在后台首页点"生成导航栏",如果你的分类过多,可删除几行,保存即可.

3、索引重建，文件重建.

如果您在使用该主题时遇到任何问题，请及时反馈给我，论坛不能保证经常在线，可以给我发邮件robert.think[at]gmail.com。谢谢支持！

更新状态：

5月17日：感谢zx.asd将原本修改程序文件进行导航聚焦 和 个人简介 进行了插件化
5月18日：通过css修复了留言板页面的导航聚焦
5月20日：修复右侧RSS订阅框内博客名称显示

标签：

Goodbye to Hello!2008/05/09 2:52:00 下午

Hello是Picasa公司早期的一款面向图片分享的IM，用户可以通过hello与好友直接分享照片，界面优雅并且精简。随着picasa在2004年7月被Google收入旗下，Hello也成为Google的子产品。但是Hello在Google旗下一直没有表现出多大的活力，与其他产品的整合也仅体现在picasa和blogger.com上。但Hello用户数量一直都在低位徘徊，并且其自身定位也过于狭隘，造成了Hello日益“鸡肋”的局面。

很早的时候就用过hello，并且也曾经有段时间使用hello的在线机器人直接发布照片和文字到blogger.com，但是由于存在编码问题一直不能支持中文，于是也就渐渐放弃了。今天在Gseeker上看到Hello即将关闭的消息，赶紧打开hello.com，看到是下面的让人伤感的字句：

HelloAll good things come to an end. So it is with sadness that we say goodbye to Hello.

Hello will be shut down on May 15th.

We originally embarked on a mission to make photo sharing easier and more fun with Hello. We plan to keep carrying that torch in new projects to come.

We hope that you continue to enjoy the other sharing products Google offers including Picasa, Picasa Web Albums and Google Talk.

Keep on sharing!

- The Hello Team



Goodbye, Hello!

Hello只是删除了首页页面，其他页面仍然存在，再来看看hello的简介

标签：

用css进行导航定位2008/05/05 9:31:00 下午

这个不是新鲜的东西，只是刚好有一个同学问我blog上的导航是如何定位（聚焦）的，由此引申一下而已，可能对于新接触css的朋友有些帮助。

天涯博弈是采用blogger.com的ftp功能发布的，由于blogger的模板功能没有标签（分类）的相应标签，所以只好用js来判断当前页面是否是某个标签页，有些麻烦也不是很完善，详细的讲解请见：给blogger的ftp发布增加导航栏标签定位。

这里要讲的当然不是这么笨拙的方法，而是利用css进行轻量级（不需要js判断，也不需要动态脚本控制）并且简便易学的方法，前提是你页面导航链接对应不同的模板页面。

页面示例：http://www.tianya8.net/pages/tutorial/nav/

CSS进行定位的原理在于css的继承性和优先级。

什么叫继承性？简单来说就是子标签内的元素会继承父标签的样式属性，常见的就是在body中定义color:#000；那么由于body是所有标签的父标签，所以页面中层（div）、段落（p）、文本（span）的文字都会继承body的样式，文字颜色为黑色。

而css的优先级是一个越讲越复杂的东西，在这里我们不讨论css选择符优先值的算法，有兴趣的可以参考W3C组织的CSS优先级文档。在这里只需要明白如p span{color:#000}的优先级高于span{color:#f60}，当在样式表中同时出现上面两行样式时页面中的span元素颜色实际上是#000。

聪明的你可能已经了解，我们要做的就是对于导航链接先写就一个通用的样式，然后再针对具体页面为某个链接增加优先级，这样在某个页面的某个链接就能以其他的样式呈现。

1、html结构

下面是一个基本的导航标签：

<ul>
<li class="home"><a href="index.html">HOME</a></li>
<li class="blog"><a href="blog.html">BLOG</a></li>
<li class="about"><a href="about.html">ABOUT</a></li>
</ul>

2、通用样式

ul{ padding:0; margin:0;}
ul li{ background:#000; text-align:center; padding:3px 15px; margin:0 1px ; float:left; list-style:none}
ul li a, ul li a:visited{ font:bold 14px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none}

3、关键部分

在您的index.html的代码中找到<body>标签，为其命名写为<body id="home">

4、定时当前页面的导航链接样式

在您的样式表里添加一行：

#home .home{ background:#ccc}

为什么要这么写呢？

在第二步里，我们在css里为链接定义了通用的样式，这样导航的三个链接都具有相同的外观，而在index.html里有独有的元素id——home，并且该元素是li的父级元素，所以#home .home{}的优先级要高于ul li，这样在#home .home{}里定义的样式将重写ul li里预定义的样式。因此在index.html页面上，第一个class名为home的链接样式将与其他不同。

与此类推，在blog.html和about.html中分别为body命名id，则在不同的页面对应的链接将具有不同的样式。

完整的样式表如下：

ul{ padding:0; margin:0;}
ul li{ background:#000; text-align:center; padding:3px 15px; margin:0 1px ; float:left; list-style:none}
ul li a, ul li a:visited{ font:bold 14px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none}
#home .home{ background:#ccc}
#about .about{ background:#ccc}
#blog .blog{ background:#ccc}

按照css的简写原则，后面三行可以写为一行：

#home .home, #about .about, #blog .blog{ background:#ccc}

如此，一个轻便的css定位就基本完成了。运用css的继承和优先级特性，您可以为不同的页面对应的导航设置丰富的样式，重要的是，您不需要用脚本来复杂的控制导航定位（聚焦），需要做的只是为不同的页面增添一个父级ID，以及为您的导航链接分别定义class名（定义id也可）。

说明：为什么是为body命名ID？

事实上，您只需在导航链接的任一父级元素命名ID均可采用这样的方式来书写样式表，但显然我们在页面中最容易修改也最容易标记的就是body标签，并且尽管你的页面标签非常复杂的变化，但是body标签却是永远存在的，因此，选择在body上加id是有更多的优点的。

标签：

新闻资讯的用户需求引导2008/05/04 5:41:00 下午

近期在做的一个产品功能用户需求报告，报告在分析过程引入了一个用户角色以更形象化描述用户的心理和行为，大致分析了综合性新闻网站的用户对于内容的基本需求和增加用户粘度的交互可能性。

下面是报告中的一个小节，也是重要的总结，概括了用户基本需求的逻辑和优先级，尝试对于新闻页面的信息组合进行一定的指导。发出来是作为一个范例仅供参考，对于该分析的讨论也欢迎您通过留言或Email和我讨论：robert.think@gmail.com

------------------------

将用户的零散的、偶然的、非线性的需求在概念层次上进行概括和分解，下面是一个简要的需求分析图：

ra

在新页面浏览大图

用户在具体页面的需求可以概括为基本需求（目的需求）和延伸需求（隐形需求）。获取资讯本身仍然是用户关注的核心，作为功能延展的“深度阅读”、“导航”、“互动表达”主要是为延长用户贡献价值、增强用户粘度，甚至为吸引用户注册而进行的必要的引导。作为用户需求的各个方面，按照需求的优先级可以粗略排列如下：

1、新闻内容；2、相关新闻；3、评论及参与评论；4、智能推荐；5、分类导航及搜索；6、其他交互行为（收藏、分享、邮寄等）；7、广告及其他聚合内容

标签：

UCD=专注用户任务+用户体验2008/05/01 8:09:00 下午

UCD（user center design，用户为中心的设计）往往在讨论中被误解为是按照用户的喜好来设计，比如目标用户群的个人喜好常常被作为设计风格的重要依据。这也很重要，但只是对UCD的某种误解。

以用户为中心的软件流程

以用户为中心，准确来讲应该是以用户的任务为中心。单纯满足用户的喜好、符合用户的使用心理只是一个表层的需要，设计的根本仍然在于满足用户的需要，这种需要不仅仅是视觉的美观、操作的流畅，更重要的是在于用户能否完成任务，能否获得有价值的讯息。

如果用户能在网页上获取重要和有价值的信息，那么就能更大程度上忍受广告和不美观的界面。因此，信息架构和交互模型才是设计的核心，视觉设计的目的是使得交互模型能够更好的呈现给用户。

抓虾验证码：{ZHUAXIA25fa17fbbf1d92e85142ba469c91cd46Union}

标签：

流程设计分析：简要、创新2008/04/27 12:22:00 上午

“删繁就简三秋树，领异标新二月花”——郑板桥用这两句诗来形容诗文、绘画创作上的原则：简要、创新。诗文绘画是然，设计同样如此。

删去旁枝，保留主干

简易的流程图是流程设计的开始如果把流程设计看做交互设计的一部分的话，那么流程设计无疑是其中最重要的部分。流程设计在定义上已将细节的、琐碎的界面设计去除，而保留产品的交互流程，简单而言，就是将产品的功能“流”分解以适应用户的心理模型的过程。

这要求产品设计人员对于产品有深入的理解和透彻的分析，在删繁就简的情况下迅速把握产品的核心和要点。但显然很多产品设计人员缺乏这方面的观念或能力，在设计产品时只关注细节的优化，而忽略了产品交互的核心流程。

在进行产品的策划或者改进的时候，不妨将所有细枝末节的、便利性的、补充性的流程步骤删除，保留产品最核心的功能流程，然后分析这个流程是否能够满足用户的需要，是否能够达成预期目标。

如此才能分析产品的清晰脉络，也才能就产品的改进和优化提出有实质性的建议。

产品的创新很大程度上就是交互流程的创新

AJAX或者Flex其创新的实质都在于改变了传统的产品交互流程。以Gmail为例，创新也就意味着对现有的产品的交互流程进行优化或革新，使得用户界面更够更友好、简便和强大。

产品策划或设计人员常常注重了产品功能的描述，忽略了功能的交互流程设计。往往由于时间和项目进度的关系，产品设计人员常常只是给开发人员提供一个简单的功能需求，而没有提供完整和合理的功能交互模型，开发人员仅仅从技术层面去实现该功能，因此开发出来的产品得到的评价经常是——“不好用”或者“不会用”。

这一方面要求产品策划或设计人员能够在功能需求之外，更多的考虑功能模块的交互流程，另一方面也需要认识到，技术上的无差异和产品功能的同质化日趋严重的情况下，产品的优势也往往体现在交互流程的创新。

如果enter键本身就是输入的命令，那么为什么要用户用鼠标去点击一个“发送”按钮，Gtalk对此做了勇敢的尝试，并且证明了：符合用户的使用习惯并非总是最优设计。

注意：本文仅仅是对于流程设分析方法的一点见解，并非探讨流程的设计方式。

标签：

Feedsky博客圈，被忽视的价值2008/04/25 1:45:00 下午

feedskyFeedsky的博客圈功能推出之时，我曾经报以了很大的信心，尽管这个圈子功能还十分弱，弱到仅仅成为一个多RSS烧录工具，但仍然让人看到feedsky在信息组合上存在的价值。

简单来说，如果feedsky仅仅把注意力集中在RSS托管服务之上的话，那么商业目标最终也就只能在和RSS托管服务契合松散的话题广告和RSS广告上做做文章。然而，当博客圈推出来之后，这种创新和突破就有了可能。

feedsky的资源是什么？不仅仅是RSS，不仅仅是一堆网上的xml文章数据，更重要的是feedsky有着忠诚（这种忠诚源于选择的匮乏）的用户群。这些用户的价值不仅仅是某个服务的使用者，他们还有着更大的价值。

feedsky有着做SNS的必要条件，更有着其他SNS无法比拟的资源：大量可用的、可分析和可再组合的信息资源。而现在feedsky的状态就相当于，你用一个小利头凝聚了大批的追随者，然后就放之任之。

为什么我认为feedsky的博客圈功能是一个突破点？

首先feedsky的博客圈不同于其他的博客合作组织（Blog Network），feedsky的博客圈是建立于真正的兴趣，并且是基于草根的话语聚合。而其他的Blog Network大多是通过人气和知名度的博客的文章聚合，尽管后者有着更高的公信力、并能提供更加高质量的资讯，但feedsky的博客圈能将博客合作组织的建立成本降至最低，促进博客合作组织的广度发展，作为一个Blog Network的托管服务显然比做纯粹的RSS托管更有价值。

其次，但也更重要的是，feedsky是真正的基于互联网维度、跨平台的Blog Network。为什么这么说？其他的blog合作组织基本上是团队协作，其形式仍然是多人共同管理，而feedsky的博客圈已经可以忽略用户的重复劳作，从数据聚合的角度真正把Blog Network导回到“聚合”这个原本的目的。

举例而言，知名的博客合作组织Creative-Weblogging其实质仍然是传统媒体，阅读者只是单向的获取资讯，而无法为这个组织贡献内容和产生互动。如果feedsky的博客圈能够继续完善功能，为其赋予更多权限和职能，则博客圈能够引起更多的关注和参与度。与facebook之类的SNS不同的是，feedsky博客圈更多的是一种“使用-吸引”的推广模式，而借助于feedsky在中文博客圈的使用广泛性，这种优势毋庸置疑。

然而，似乎feedsky现在正将全部注意力集中在话题营销这个短期看来能支撑其服务的营收方式。无论是技术上还是规划上都忽略了其博客圈的潜在价值，其现在博客圈和刚刚推出时的功能几乎未有改进或变动。如此真是让人惋惜。

标签：

blogger Template模板:Simple blue下载2008/04/15 5:55:00 下午

这是根据天涯博弈第二版修改后的模板风格，适用于使用blogger.com（包括通过ftp发布）的blog。css仅调用了3张图片，图片地址是在tianya8.net上，您可以下载后保存到您的图片存储空间上，修改css中相应图片路径即可。

模板截图：

simple blue

模板下载 | 模板预览

模板使用方法：

点击上面“模板下载”下载simpleblue.txt文件到本地，将文件内的所有代码复制粘贴到您的blogger.com管理面板里的blog模板区域内即可。如果是采用ftp发布的blog，需要重新发布整个blog。

建议：

如果您采用ftp发布的形式，并请您的blog日志较多，建议将页面内的style样式导出为独立的css文件后再引用。这样，当你需要修改模板的某些样式的时候，就无需重新发布整个blog。

声明：本模板发布采用CC协议授权，自由使用，但请保留底部“theme by 天涯博弈”的文字及链接。

标签：

用户体验的核心是交互设计2008/04/12 4:09:00 上午

下午在会议室用by的笔记本连接投影仪设备，四个人去调试都无法让设备按预想的状况工作，最后只好叫来技术人员调试。当然浪费了20分钟时间和我们都缺乏使用经验有关，但更重要的是产品的交互流程存在问题，问题的后果都是一样——用户体验差。

  • 当用户连接了投影设备的时候，为什么系统程序不提示发现新设备，并给出新设备的设置引导？
  • 为什么把设置方式深藏到显示的高级设置中？
  • 为什么不把用户当前目标/任务显性化？

做硬件的只关注硬件的性能，做系统的只关心系统的平台兼容性，真正把硬件与系统结合的易用性都放到脑后了。

优化交互流程的途径很多，比如windows系统针对即插即用的硬件设备连接后进行设置引导；次，或者由设备厂商随设备提供相应的管理程序，以便用户可以直观的通过程序来检测和连接设备。

像投影仪这样通用的商业设备，竟然还需要专门的技术人员来指导使用，由此可以看出这类产品存在多么严重的缺陷和不足。

标签：

给blogger的ftp发布增加导航栏标签定位2008/04/09 10:12:00 上午

天涯博弈即是使用blogger.com的ftp发布功能发布的blog。在喜爱blogger简洁、优雅的同时，却也为一些blogger的不足烦恼。

比如blogger.com新版增加的标签功能对于ftp发布来说其实是一个鸡肋。首先，页面模板没有LabelPage这个标签，因此无法针对标签文章页面增加内容和设计；其次，标签文章页面只能显示该标签的最新20篇文章；再次，每次发布带有标签的日志，所有的标签页面都要重新发布一次，效率很低。

在天涯博弈上，blogger的标签是作为分类来使用的。所以，你会发现每篇日志基本上只使用了一个标签。而在近日的首页改版中，标签被正式添加到顶部的导航栏了。这就存在一个可用性问题，如何在浏览标签页时，顶部的导航栏菜单能够聚焦，也就是说该标签菜单背景色切换为红色？

location

由于模板中不能判断标签页，也无法设置在模板页显示当前标签，因此只好采用javascript来进行。由于标签页都是存储在你ftp上的labels目录，并且以固定的标签编码作为页面名称，比如我的“社会”标签，发布后对应的标签页名称为56S+5Lya.html。既然如此，我们只需要在页面加载完成后判断这个标签页的名称是否对应某个菜单项就可以聚焦了。

实现方式：为导航菜单的各项增加id，如我的命名方式：

<li class="home" id="L0"><a href="/">首页</a></li>
<li class="blog" id="L1"><a href="/labels/56S+5Lya.html">社会</a></li>
<li class="blog" id="L2"><a href="/labels/5LqS6IGU572R6KeG54K5.html">互联网</a></li>
<li class="blog" id="L3"><a href="/labels/5b2x6KeG5YWz5rOo.html">影视</a></li>
<li class="blog" id="L4"><a href="/labels/6ZiF6K+7.html">阅读</a></li>
<li class="list" id="L5"><a href="/labels/6ZqP56yU5bCP6K6w.html">随笔</a></li>

实现的js代码：

var cLocation = window.location.toString();//获取当前页面url地址如http://www.tianya8.net/labels/56S+5Lya.html

function changeStyle( idx ){
if(idx!=-1){
document.getElementById("L"+idx).className = "curr";
}
}//如果属于标签页或首页，则将对应的菜单项添加样式

function location_url(){
var former_start = cLocation.lastIndexOf( "/" );
//var former_mid = cLocation.lastIndexOf( "/" , former_start+1);
var former_end = cLocation.indexOf(".html" )
var former_name = cLocation.substring(former_start+1, former_end);
return former_name; // return "/somedir.html"
}//截取文件名（不含“.html”）

function getCurrentPageSubmenu(){
var shortName = location_url();
//alert(shortName);
switch ( shortName ){
case "56S+5Lya" : return 1; break;
case "5LqS6IGU572R6KeG54K5" : return 2; break;
case "5b2x6KeG5YWz5rOo" : return 3; break;
case "6ZiF6K+7" : return 4; break;
case "6ZqP56yU5bCP6K6w" : return 5; break;
case "home" : return 0; break;
default : return -1; break;
}
}//为如果是标签页或首页，则返回相应的值

var curSMenuID = getCurrentPageSubmenu();
changeStyle( curSMenuID.toString() );

标签：

firefox拯救地球2008/04/07 10:38:00 下午

话说公元2008年，地球又一次面临被蓝色幽浮统治的危机。而这一次，地球人不再孤独。欢迎你们，地球的守护者，人类的好朋友，Robots!

他们带来机器人给人类的美好问候：

  • 机器人不能伤害人类，或者放任人类被伤害。
  • 机器人看见人们无法相信的事情。
  • 机器人是有趣的塑料好友。
  • 机器人有咬不得的闪亮的金属屁股。

在地球，他们更发现了他们梦寐以求的火种“Firefox”。于是带着Firefox的力量，笨重的他们终于能遨游天际，勇敢的反抗蓝色幽浮的统治。

这一次，我们终将胜利！

firefox1

firefox2

firefox3

firefox4

想看到Robots给地球人的问候？

请升级您的firefox到 firefox3 beta 5，然后在地址栏输入“about:robots”即可看到他们发送给您的秘密信息。

想一起加入保卫地球的行列，马上下载firefox！

标签：

web2.0之“关系”2008/03/31 9:49:00 上午

A：你们的首页为什么要放会员列表？
B：可以增加用户之间建立联系的通道啊。。。
A：用户与用户之间建立联系是通过“物”，用户之间的“邂逅”性联系其实是应该淡化的。
B：你的意思是说，这些好友列表没有存在的价值？
A：有一定的价值，但是这种微弱的价值是否能提升用户体验？如果增加一项功能无助于增加用户体验，那么就不应该上。
B：但是你看youku、tudou、56在首页都有推荐用户，这样一方面是可以直接促进用户点击建立用户之间的联系，另一方面也可以提升会员之间的竞争意识，能在首页被展示的用户能够获得极大的成就感。。。
A：说有一定的价值就是因为后面这点。国内的网站总是希望在首页增加更多的入口，内容的入口、信息的入口、会员的入口，这沿袭了过去网站的一条观念：首页就是内容的索引。在过去这种理解或许有意义，但作为web2.0的网站，这样的认知就有不少问题。


web2.0的核心模式是用户贡献内容，而通过内容建立用户与用户之间的社会关系。因此，网站在流程设计时就应该将这作为贯彻的理念，通过“物”而连接的用户关系是更普遍也是更长久的。具体而言，就是将焦点集中于“物（照片、视频、blog）”，充分展开用户因“物”而获得关系的渠道，将用户之间的互动建立于“物”之中介。

在首页放最新用户列表或推荐用户列表，这在大多数网站都已经成为习惯，似乎并不需要论证存在的合理性，但这本身就是一种很无效的工作——当用户面对一个陌生ID组成的用户列表，点击一个头像或ID能否能将用户引入到一个他感兴趣的地方？这种“邂逅”所能建立的用户价值有几许？没有内容或者兴趣无关引起的挫败感和糟糕的体验可能占据更大的部分吧。

在这方面douban做的太有借鉴意义了。douban的“猜你喜欢”、“谁读这本书”、“喜欢这本书的人常去...”解决了用户引导的问题，通过“物”的关注点来统计用户偏好，而通过相似的用户偏好，将用户与用户之间的“邂逅”更为有效。

标签：

设计之细节2008/03/28 5:20:00 下午

区别于艺术，商业网站设计之美往往来自于细节。

一般来说，用户在使用你的网站的时候，是以理性的、实用性的角度来观看，他们更主要的需求是在于自己的目的（任务）是否能更快更方便的达到，审美只是一种次之的心理需要。（当你使用baidu搜索的时候应该不会想，baidu为什么不在页面加个背景图...囧）

只有在需求能够得到满足的前提下，用户对于这个网站才会建立起是否具有美感的体验。如果目的无法完成，那对他来说就是一个烂网站，不管你的页面有多么漂亮...

相应的，不好的页面设计往往只是因为缺少细节。

1、减少用户的操作

第一个例子：百度的搜索框

当用户在输入框输入搜索关键词后，忽然发现自己原本要搜索的是贴吧里的内容，那么他会怎么操作？点击“贴吧”标签。早期百度的处理是，仅仅切换当前搜索类型为“贴吧”，甚至原本搜索框里的关键词都被清除了。那么用户只好重新输入关键词然后搜索。

但现在你在百度上再进行这样的操作，会发现这个流程已经被优化了。

让用户减少操作完成任务

这就是细节，让用户少操作，那么用户就会更喜欢你。

其实这个例子是百度跟google学习的（百度是个勤奋的孩子），而采用了新界面的google首页，这个细节已经失去意义了（是否是一种退步？）。

第二个例子：提示信息

这个例子来自于前公司的一个页面。很多网页搜索框都会显示下面这样的提示信息，但当用户点击输入框或者输入框获得焦点的时候，用户仍然需要将输入框内的文字一一删除。提示固然是好，但当用户需要操作的时候，提示信息应该清楚，避免干扰用户的操作。

降低提示信息的干扰

这个输入框即是ldm的建议，很细节的设定，非常感谢。

2、给用户自由使用的权利

所以的产品都会有一定的使用限制，比如不能将锂电池丢进火里，也不能把干燥剂吃下去，但在合理的范围内，用户需要被尊重，也需要自由。

为什么你得页面firefox下一塌糊涂？
为什么你的播放器在MAC上就不能工作？
为什么你得IM协议不开放？
......

有人对IE死心塌地，有些人对firefox趋之若鹜，更有人喜欢用手机浏览你的网页，那么专注于细节的你就应该考虑这种种影响。给用户自由使用的权利，也就意味着你的产品要在多种情况下都能使用。

“任何成功的法律都是用来保护小部分人的，它的标准语法应该是‘不得通过法律限制××权利’；同样地，软件和服务应该‘不得阻碍Linux和Mac用户的使用’。（via Blog on 27 floor ）”——诚哉斯言！

3、可以把用户看的很懒，但不要以为他们很笨

傻瓜相机的成功成为很多人的口头禅，要把用户当傻瓜。

事实上，我在浏览网页和在现实当中都不希望被人当成傻瓜。所以，为傻瓜的设计在很大程度上成为“臃肿的设计”、“繁复的设计”。很多网站打着web2.0的旗号为自己的页面不断的增加没有必要的提示和功能描述，生怕有人低智商不懂。

UCDFEED上的结论很好，“好的设计能在一定程度上减少寻求帮助的机率”。也就是说，你的设计足够合理，那么就完全可以避免用户的错误，减少很多不必要的提示。

如下面网易通行证的注册表单的第一项，用户名的填写。这里的规则算是有些复杂，因此提示的非常详细。但是提示的详细并不意味着就能防止用户的犯错，因为用户只有在遇到问题的时候才会去看帮助。

网易的注册用户页面就是典型的提示冗余
  • 如果你要求最多18个字符，那么为什么又允许用户输入25个字符？
  • a-z是英文字符难道用户都不知道的吗？

一定的技术改进，比如限制用户输入的字符类型以及限制输入框最多18个字符，那么用户就可以在错误刚刚之时就知道错误，避免发生错误之后才提示的信息滞后。


4、视觉的细节在某种条件下更为重要

正如前面所说，视觉的细节可能是作为评价的最直观的指标，但这也是最应该

1、功能细节

正如我之前所写的，只有在目的能够达到的前提下，用户对于这个网站才会建立起是否具有美感的体验。也就是说，当网站的基本功能能满足用户的需求的时候，你得界面设计将产生至关重要的影响。在网站同质化愈趋严重的情况下，界面的美观和易用性就成为关键之处。

至于怎样叫美观，见仁见智，但对细节的感官体验却相当一致。

对比一下百度hi和msn的ui界面：

baidu hi和live messenger圆角的精致程度对比

至少hi在圆角上的处理缺乏细节，因此呈现锯齿状。而恰恰是这些小细节让hi的界面让人感觉（引用某位同事的话）“很奇怪”。

尤其是当你的产品在面临竞争的时候，视觉细节往往更是基本用户选择的主要原因。

标签：

photoshop之 damn button2008/03/26 1:31:00 下午

基本上每天都户有误操作点击到这个damn button！

photoshop dead button

到底是ps本身的交互设计有问题，没有防止错误发生机制，还是adobe就是利用用户的错误点击来增加adobe网站的浏览量？

以此为记！

标签：

VANCL及其他PPG模式复制者的机会2008/03/23 1:44:00 下午

PPG网站也去看过多次，只是从来不曾购买，毕竟PPG上的衬衫动辄两百元以上（还是打过折扣之后），再加上像我这样简单随便的家伙一年到头都不会穿几次衬衫，显然不会成为PPG的目标客户。

这次在VANCL上买polo衫却是因为feedsky的话题广告赠送现金券。VANCL的呼叫中心（callcenter）做的比较到位，网上下单之后的2个多小时即有客服人员电话确认订单，并承诺在48小时内发货。第三天在公司收到送货上门的polo衫，质量做工看起来不错，款式约略朴素成熟。

PPG在2007年的风头让人们突然有发掘了互联网直销的又一处金矿，于是中国互联网的克隆精神又一次焕发勃勃生机。男装作为新一轮的互联网直销模式的供应产品是有着很多先天优势的：男装利润率较高，而款式相对较少变化，在存货和设计上就能减少很多成本，这与女装有着很大的区别。再加上男性普遍更能接受非传统的购物模式，也使得男装更适合成为直销产品的借力点。

网上有关PPG的新闻经常会引发各样的争议，比如PPG的资金链问题、库存问题，以及2008年大幅缩水的广告，让人看到PPG在光环背后存在的危机。VANCL作为后起之秀，在运作模式上看两者有相当的可比性，无论是直销的产品、网站结构、UI，以及客服服务、配送环节都基本相似，如果说二者有根本的不同，那也就在于推广和营销的方式的区别。

按业界的说法PPG是采用的DELL的直销模式，全方位的广告营销，使得PPG严重依赖巨额的广告投入，这也是PPG步入困境的主要原因。而VANCL则因为陈年的“卖书”经验而被普遍认为更关注互联网本身的营销能力，这或许是VANCL由卓越而继承的更为灵活的B2C经验。

当然，无论是PPG还是VANCL以及其他的模式复制者，都还处于这个新型市场的探索者的位置，一方面是需要对这个市场有更多的理解，另一方面则需要不断的培育扩大消费群。互联网的电子商务能力远非发掘，如PPG、VANCL等类型的网站完全可以获得更大的生存空间，现在的问题只是看谁能走到更远。

标签：

不要“做”产品2008/03/21 2:19:00 下午

互联网仍然是在“做”的时代

你一定在身边听到过说要把某个产品的流量或者pv做到多少多少，把某个产品的用户量做到多少。或许这样的工作报告已经司空见惯，似乎这就是产品的终极目标。

这多少有些本末倒置。流量、pv的核心价值在哪里？——仍然在于用户的长久价值。如果只是为了多几个pv，多几个流量，不如把公司搬到美国去做色情网站。

让用户用你的产品，根本的问题在于寻找自身产品的价值或者优势，有什么别人没有做到的，有什么是自己做得比较好的，这才是你得产品的核心竞争力，才是用户选择你的真正原因。流量或许能带来短暂的盘面利益，但在有限的时间里更改专注的是你的用户需求和产品优化，而不是想着每天有多少pv。

低劣的产品，推广的越好，死的也就越早。

兴趣：持久的推动力

为什么做一个产品？有时候是因为迎合需要，有时候是因为竞争姿态，有时候却只是因为别人有，所以我也要有。

很多产品人员习惯横向比较，看看自己竞争对手的同类产品做的如何如何，然后就树立了自己的目标，要超越谁，要向谁迈进——这样狭隘的视线也就难以突破自身产品的局限。

说个简单的道理，如果你做一个产品只是为了迎合用户的需求，而没有自身的需求，那么你也就不可能理解你用户。在做一个产品之前，你首先要让自己也成为用户。还站在开发人员的角度来想问题是会偏离事实的。

产品人员首先要对自己的产品感兴趣，这样才能成为产品持久创新的动力。

标签：

博客搬家里的用户体验2008/03/14 4:21:00 下午

小王搬家——

输入了博客地址(http://blog.sina.com/test)，点击读取博文按钮，日志比较多，于是耐心等待........... 等...........等.............终于等到日志读取完毕，200条！并且全部都是乱码的标题！咦？怎么没有下一步？往下滚、滚、滚， 终于滚到末尾页面，有搬家的按钮了。全选日志，然后点击“搬家”按钮：

您没有登陆不能搬家，请登录后再操作！

啪，鼠标就被小王丢到地上去了！

小王还会来这个博客吗？我相信他不会再来了，不管这个博客以后能够做的多好，糟糕的用户体验再一次将用户拒之门外！不是用户放弃了你，而是糟糕的用户体验让用户无法选择你！

这里存在用户体验中典型的几个问题：

没有交互思想的界面是死的、或者即将死去的！

大多数做UI的设计师都被认为（甚至自己也认为）UI就仅仅是用户界面的美好、修饰，而忽略了UI所涵盖的更重要的交互设计。一方面设计的时候缺乏对产品策划的深入参与和了解，另一方面也缺乏用户心理的把握，于是做出的设计往往就是漂亮的界面，却是糟糕的交互流程。

流程，流程，还是流程！

为什么流程很重要？因为用户的所有操作都可以看做是一套流程，如果流程紊乱，用户就会不知所措。优秀的交互流程能让用户用最少的时间来完成目标，并且能避免和防止错误。对于多步的交互而言，Step by step永远比让用户自己摸索要好。

设计模型和用户的心理模型

在交互设计中，最多也最可能出现的问题往往在于设计模型与用户的心理模型不匹配。一方面缺少交互设计的经验，一方面缺少心理学的基本常识，设计师手下的设计模型往往与用户的心理模型有很大的出入。

设计人员往往从专业的角度来想，“这还不简单吗？”，“用户不会那么傻吧？”，“这样很明显啊”，因此在设计的时候是从自己是如何来使用这个产品的角度出发，忽略了用户的真实需要。

实际上，用户想的可能是，“快点告诉我该怎么做？”，“按钮在哪？”，“还要点几次才能看到木子美的照片啊？”

错误反馈

对于网页而言，到底什么才是好的用户体验？我认为，好的用户体验不仅仅是用户看了赏心悦目、内容清晰一目了然、操作简单方便，还有就是让用户不怕出错。而后者常常是容易被忽略的。用户不担心出错是因为产品的引导清晰，用户很难犯错——即使犯错，也能有很好的错误反馈处理。

举个例子，你早上8点跑到天河城想去购物，门口挂着牌子，“非营业时间禁止进入！”。尽管吃闭门羹的的原因是在于自己没有打听好营业时间，但你仍然会觉得 不爽。如果将牌子上的提示语改为“对不起，本商场的营业时间为9：30—21：30，欢迎届时光临！”那么你还会将自己的错误转嫁给天河城吗？

错误反馈的原则应该是不仅仅指出错误，更需要对用户的错误给出解决方案。一句“您没有登陆不能....”就把用户吓跑了。

——这是最近写的一份某网站博客服务的用户体验报告的部分内容

标签：

互联网就是未来2008/03/06 4:35:00 下午

501010734_f41b5e77c0_o面试的时候被问道：为什么想从事互联网行业？我承认在回答这个问题的时候有点头脑发热，因为想到了太多。

99年刚进大学那会儿，别说是对互联网，对计算机的认识都等于0。经常拿出来跟朋友打趣的一个故事：第一次进学校的计算机室不知道怎么开机，于是问旁边的师兄，师兄没说话，帮忙按了一下power键，于是滴的一声响起，颇觉神奇。

那个年代，互联网纯粹是个新生事物，每次去上网都要带着《计算机应用基础》，因为附录两页有一些国内外的bbs、新闻公告板、网站地址索引，很多还是纯粹的ip地址形式，域名对于我们来说都是一团雾水的概念。

今昔对比，不由得让人感慨：在不到十年的时间里，互联网对于社会生活的渗透和颠覆是如此之广、如此之深。如果把互联网看做一场革命，那么这场革命的确是令人叹为观止！

互联网已不再是新技术的一个幻影，甚至都不再仅仅是现实的延伸，互联网已经与社会生活紧密结合，互联网的成长引领着社会生活的变迁。如果工作就是生活，生活就是工作，这何尝不是最让人引以为傲的未来。

标签：

人肉引擎，民意执法还是侵犯隐私？2008/02/11 3:43:00 上午

超级人肉搜索引擎启动 “高干MM”露馅，这样的新闻又一次出现在视线里。人肉引擎似乎又一次取得了战果，将众人的敌人衣衫褪尽暴露于太阳底下，这就是“民愤”的升华了。

不知道为什么，这让我想起的竟然是《西西里的美丽传说》里的镜头：带有不怀好意的、私愤的人煽起群众的火焰，将暴力施加在无辜的受难者身上。而这让人不能接受的暴力都起源于一个正义的口号：民意。连赵本山都要在春晚上说，嘿嘿，民意。

民意是一个很动听的词语，尤其是在争取民主与自由的道路上，但民意很显然的并不是褒义词，当然也不是贬义词。民意，是一个无关是非黑白的概念。作为一个个人，当你与大多数人意见相同时，你觉得这是群众的眼光是雪亮的；但当你与大多数人都意见相左时，你就突然发觉多数人的暴力是怎样的可怕——尤其，当你发现民意原来大多是盲目和偏信的时候。

网络世界也是现实的，尽管个体的行为往往表现为性格弥补，但网民的群体行为与现实中十分相似，甚至更加突出。在现实世界中，个体可能会表达意见，但不一定会参与群体行为；但在互联网上，通过社区、论坛、bbs、博客、即时通讯等社会化工具，群体行为被放大了，你会发现发表个人意见和参与群体事件是同样的行为。因此，一个在现实中可能会被淡忘的新闻事件，在互联网上可能引起地震。这是好事，也是坏事。

好，在于通过互联网，传统媒体的垄断地位逐渐丧失，而公众获取信息的方式更加有效而直接；坏，则在于在缺乏尊重个体自由的氛围下，群体暴力往往会施加于无辜的个体身上。人肉引擎不过是这个阴暗面的一个体现而已。

对于对手的不尊重，因此将对方的个人信息公之于众，力图造成对手“过街老鼠，人人喊打”的局面，甚至对对方的现实生活产生影响，就变成了群体暴力的惯用和合理方式。说是合理，是因为很多网民甚至会认为这是正确和有效的方式。尤其是人肉引擎掀出“罪大恶极”的虐猫事件女主角之后，人们突然发现，原来可以通过这样的“非暴力”方式来道德执法。

在没有隐私保护概念的中国互联网，注册用户数据可以任意买卖，所有网站的隐私保护协议形同虚设，调查一个人的真实信息并且公之于众就不是什么大不了的事情。

只是从“高干mm”事件里，我看到一个可怕的互联网现实。不尊重别人，拿着被人的个人隐私当对手的小辫子而作为制胜攻略，已经不仅仅是道德，而是触及法律的底线。“小朋友，我不想爆太多，别逼我”，这样的话语已经不是温柔的劝告，而是恐吓和威胁了。

我们不能因为一个人说过什么就认定一个人罪恶，任何人都幼稚过，都错过，任何人都有可能被人肉引擎一次，也许在那个时候，你才会明白这一切。

标签：

狗眼看报( 2008/01/22 )2008/01/22 11:29:00 上午

时评:变味的“散步”

交错《解放日报》的这篇评论对上海市民以“散步”这种温和的方式来表达对市政府项目的反对和抗议，这是在厦门市民反对PX项目之后的又一次民主事件。在这两次群众表达自己意见的事件上，我们的确看到民主的进步，在某种程度上，人们由只关注自身利益，转变为关注自身群体的利益，并且能够以平和开放的心态来要传达自己的意见。

这篇评论不知道出于何人之手，评论员相比写出这种低水平的评论员文章也是有够烂的。当然，这种事情谁最反感，当然是政府了。哇塞，上海人不得了了，明明就是群众集会游行嘛？怎么不走流程，先向有关部门申请先？长此以往，国将不国了！

而在《解放日报》上的这篇文章除了让我相信政府的黔驴技穷，我看不出其他。

从“很黄很暴力”看网络“灰色文化”

cctv采访图片“很黄很暴力”事件的确有些出人意外，在以前看cctv的新闻的时候，看到这样的新闻，都会联想起我们那地方电视台整天放的什么药广告，往往都是找几个老爷爷老奶奶，手拿药盒，然后背书般说这药咋好咋好。所以当一则本该被自己嘲弄过去的伪新闻突然之间变成网络流行语，确实让我感慨！互联网就是创造变革的驱动力！

我就是搞不懂，这些教授学者们一个个是不是都是昧着良心说话，还是真的看不明白这个事件的究竟？总是把事件整理为“网民暴力对一个13岁小女孩的不道德的攻击”。

难道他们真的不懂，这其实是公众对于“样板”新闻的一次公然嘲弄和讽刺？

一次次的，这些主流媒体在屏幕上大言不惭，一次次的，为了政府的的某个红头文件，这些垄断性的媒体变着法的“没有新闻，就创造新闻”。我真的想说，cctv你也太配合了吧？！

到底是谁灰色？是政府手里的cctv，还是网民口里的“很黄很暴力”？

标签： ,

new z-blog theme/zblog 模板2008/01/10 3:20:00 上午

delicious share

一直在犹豫要不要放弃blogger.com的ftp发布，因为最近一段时间blogger.com的评论系统几近瘫痪，经常都无法打开评论页。当然，除了感谢伟大的GFW实在是无话可说。

z-blog看起来是一个比较好的选择，容易上手和也容易制作模板，当然更重要的是它是基于asp的。但网上的zblog模板资源比较少，所以准备自己动手做一款，已经想好了名字“delicious share”。除了名字相似，这个和del.icio.us完全无关。

标签：

[分享]珊瑚虫案腾讯忽悠了谁2007/12/27 1:23:00 下午

珊瑚虫案腾讯忽悠了谁

"我们看陈寿福律师所提供的证据，北京市第二公证处出具的公证书，应该是做的保全证据。这些证据表明:

·腾讯公司曾经在自己的官方主页上提供珊瑚虫QQ的下载；
·腾讯公司官方曾经邀请陈寿福参加其QQ2005新版发布会；
·腾讯公司内部人员曾向陈寿福征询需要何种技术接口来方便珊瑚虫QQ的开发。

......这样，侵犯著作权罪中的“未经著作权人许可”这样一个重要的犯罪要件就已经不成立了，陈寿福也应该是无罪的。"

大跃进中的“救命书记”

"有一天，李树棠走在大街上，听到广播中传出父亲的声音，“当时是在开三级干部会，广播大喇叭，远近都听得见。就是说要老百姓把坛坛罐罐装满。因为粮食不够吃，就要自己存粮。还有什么‘人怕出名猪怕壮’，他也在大会上也讲过的，好像就是要大家闷头干，莫吭声。”"

标签： ,

befunky:极具个性化的照片卡通化服务2007/12/21 3:08:00 上午

早就从wappblog上开始关注的网站befunck已经开放注册了。befunck是一个提供照片卡通化和虚拟形象定制服务的网站。照片卡通化服务是免费的，而虚拟形象定制则是部分收费。

未标题-3

照片卡通化(cartoonizer)的服务基于flex技术构建，使用起来非常简单方便：用户可本地上传、提供网络图片地址或者通过摄像头在线拍摄来提供照片。将前面文章中一张华南虎的照片卡通化后，有种美式漫画的硬朗风格。

查看：原始照片    卡通化后图片

类似的服务

1、msn cartoon

之前msn出品的cartoon，可以对照片中的头像进行分析，转换为卡通头像。

优点：灵活、有一定的定制性，速度快，界面华丽
缺点：生成的头像图片最大为128px，应用范围不广，需按照ie插件

2、vectormagic

基于flex的在线程序，功能十分强大，可以将图片矢量化后提供下载。矢量模式分为照片级和标志级别，并且可以选择是否需要清晰边缘。标志级的矢量转换效果很好，对于要求将图标快速矢量化的设计师而言，实在是一个福音。

优点：功能强大，操作流程清晰
缺点：无法控制矢量化的参数

标签：

互联网生存大考验2007/12/20 1:41:00 上午

事件回放：

近日来，赶集网用户在赶集网发布信息之后，很快就会收到58同城或者酷讯发来的手机短信，称58或酷讯有更多的资讯和更适合他们的内容。这种短信骚扰让众多赶集网用户十分反感，已经有不少用户在论坛发布帖子来表达他们的不快。

如果说十年前的互联网还是一片未曾拓荒的世界，当互联网展现商业价值一面的时候，也就不可避免的卷入利益漩涡之中。每天都有新的网站上线，也都有新的网站下线，上上下下之间，互联网体现了优胜劣汰的自然法则，也让所有的网站都面临着生存考验。

bahe一个朋友说，他们以前做手机游戏的时候，新公司没人。没人怎么办？好办，直接到竞争对手的公司楼下，等到公司下班的时候，直接就在门口挖人。这种手段和56的短信挖人性质上没有什么不同，在互联网上这种“挖人”被看作恶性竞争，但在现实中，这样的“挖人”就被叫做策略。

表面上看，同类型的网站的竞争很大程度就是用户量的竞争.这是一个很直白的指标，就像商城卖东西一样，谁卖的多，也就说明谁的产品更好。所以一个网站在卖掉自己前，都要告诉别人我的用户量有多少。但互联网价值天平的杠杆的不确定性在于，用户的转移成本太低了，因此决定孰胜孰败的并不完全在于用户数。

(像上面的例子)如果那个公司的薪水福利不错，并且公司职员关系融洽又合作紧密，又何需担心别的公司来挖角？对赶集网而言，如果能将网站的功能持续优化，不断改进，将功能和用户体验做到让用户更加满意，谁又能挖走你的用户呢？

决定一个商业网站命运的因素很多，但关键的因素无外乎下面几个：

1、产品：服务是否迎合了用户需要，一个技术很先进，也很酷，但用户根本不需要的网站，其结果很可能就是喧哗的问世，寂寞的牺牲；
2、资金：是否对于盈利有合理的预期，如果需要培养市场或较长的盈利周期，充足的资金是重要条件；
3、服务：是否能与时俱进，保持旺盛的生命力，能够有不断改进和超越的勇气和能力

对于赶集网或者58这样的互相较劲的网站来说，能否生存不在于用这种方式多转换几个用户，而是从核心问题——如何让自己的服务更迎合用户需求，如何不断改进自身服务——来着手。这才是“王者之道”。

没必要把58这种抢用户的手段呼为罪恶，既然是开放的互联网，就无法避免这样的事情发生，即便不是58的短信骚扰，也可能是办证、放贷的短信骚扰。只是赶集这样的炒作态度，会让人觉得赶集担心自己的生存了——这实在是杞人忧天。

如果58用这样的方式就能争取到赶集的用户，那说明赶集网也就那么回事；如果赶集网对于自己的产品足够自信，这件事就无需炒作，由他去——还可以告诉被骚扰的用户：如果您不慎被56骚扰，欢迎您登录56.com，试用后告诉我们您对我们赶集网有什么改进的意见或建议！

话题广告也不能做无病呻吟!

（图片：拔河  来源：上海八中物理组）

标签：

购物中心(mall)与网站设计2007/12/12 3:21:00 上午

设计流程其实和生活有很多可以相类比的地方。

比如说对于城市里的超级购物中心（mall）而言，空调温度开店越低，人流量越大，但同时顾客的停留时间也会越短。相对于网站设计来说，越是色彩鲜明和对比度高的页面，越是让人眼前一亮，吸引人们的注意（焦点），但同时也会缩短用户在网页上了浏览的时间（视觉疲劳）。

当然这个例子是类似的例子，但也有一些相反的例子。

同样拿购物中心l来说，一般在入口处都是销售体育用品或者特殊用品专门店，而服装、生活用品等在销售上较为重要的商品却在mall的深处。

因为一方面对于购物中心而言，重要的是吸引用户在购物中心进行全方位的购物，因此在设计店铺轨迹的时候可以刻意引导顾客能光顾到其他商品，起到分散顾客的路径的作用，但用户并不会因此而失去目标。

另一方面则是在于顾客尤其是女性顾客而言，购物是一种生活方式，也是一种享受，因此在进入购物中心的时候，他们的策略并非是最快和最优的路径，恰恰相反，他们要进行的是一种较为复杂的轨迹，因此鲜见购物的女性在门口买完东西就走的情况。因此，在购物中心门口的商家其实占据的是销售的劣势。

以此来对照网站设计，我们却发现这是两种完全不同的交互。人们打开一个网页同样是带有某种目的，只是面对网页时人们更容易失去耐心，因此在网站的导航和布局上，最重要的核心的内容能够在首页展示就变成了标准。这与现实中的购物中心对照，则会发现网站设计其实并非简单以用户为中心，而是以交互（流程）为中心的。

标签：