http://1983ex.com Web Site Development Fri, 26 Dec 2008 14:40:08 +0000 http://backend.userland.com/rss092 en Thickbox - 基于 jQuery，支持 AJAX，轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k，目前还可作为 WordPress 的插件使用。 GreyBox - 创建 iframe 的弹出界面，可使用图片、HTML 及 URL，大小约为 20k。 GreyBox Redux - 基于 jQuery，比 GreyBox 更轻。 Lightbox v2.0 - 最初是为了显示图片设计的，使用了 prototype 和 sciptaculous，所以有些沉重，但对于图片来说很好用。 Lightbox with moo.fx - 基于 prototype，但只能用于图片。 Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。 Multi-faceted LIghtbox - 又一个基于 prototype 的，不过这个为各种可用于 ... http://1983ex.com/archives/133 本文编译自Google Webmaster Blog于2008年11月13日发布的《Search Engine Optimization Starter Guide（搜索引擎优化入门指南）》，这是一份操作性比较强的搜索引擎优化建议，极具价值。 本文是选译自原文中每章节的实践指南（Good practices）部分。跳过示例的原因有二：其一，示例很简单，诸位自己看吧；其二，英文网站的SEO操作与中文网站有所差异，比如对关键字（keywords）的处理等。 本文对会受示例影响的部分做了一定调整。如有版权问题，敬请告知，我会在第一时间进行修改或删除。 创建独特、准确的网页标题（Title） 页面标题要准确的描述对应网页的内容。 请注意：  不要使用与网页内容无关的标题。 不要使用预设或模糊的标题，如”无标题”、”新建页面1″等。 为每个页面创建独特的标题，这将有助于Google将其与该网站上的其他网页做区分。 请注意：  不要在一个网站中使用单一标题命名所有网页。 使用简单、有效的标题，如果标题很长，Google可能只会显示一部分。 请注意：  不要使用过长的标题，这对用户毫无意义。 不要在标题中包含不必要的关键字。 充分利用页面摘要（meta-description） 准确的概括对应网页中的内容，页面摘要可能会作为搜索结果而呈现给用户。 请注意：  不要使用与页面内容无关的页面摘要。 不要使用预设或模糊的页面摘要，如”这是一个网页”、”关于我们”等。 不要以关键字堆砌的方式构成页面摘要。 不要以复制、粘贴全部页面内容的方式构成页面摘要。 为每一个网页设定独特的页面摘要：尤其是在用户搜索你的网域时（如搜索”site:elviscai.com“），不同的页面摘要会极大的方便用户和Google。如果你的网站有成千上万乃至数以百万计的网页，通过手工添加页面摘要几乎是不可能的，此时也可以基于对应网页的内容自动生成摘要。 请注意：  不要对整个网站或较多的站内页面使用单一的页面摘要。 改善URL结构 当用户访问网站时，在URL中包含单词会提升网站内容及结构方面的友好度。用户会更好的记住它们，或更愿意进行连接。 请注意：  不要使用冗长的URL，并在其中包含不必要的参数或会话ID。 不要选择一般的网页名称，如”page1.html”。 不要过度堆砌关键字，如”product-manager-product-manager-product-manager.htm”。 创建一个简洁的目录结构，使用一个良好的目录结构来进行内容组织，可以帮助用户更简单的了解到他身处何地。可以尝试以内容类型作为目录结构在URL中的表现。 请注意：  不要使用过多级别的子目录，如”…/dir1/dir2/dir3/dir4/dir5/dir6/”。 不要使用与内容无关的目录名称。 为每个文件指定一个对应的URL形式，使用户专注于对网页的链接及其内部结构的使用或参考，从而防止用户通过另一个形式的URL访问到该文档（这样会分化该URL的信誉度，译注：对Goolgle而言）。如果你发现人们会通过不同的URL访问相同的内容，使用301重定向的方式将是一个不错的解决办法。 请注意：  不要使子域或根目录下的文件（如”elviscai.com/page.html”与”foo.elviscai.com/page.html”）指向相同的内容。 不要在内部连接结构中混合使用www.和非www.的URL形式。 不要在URL中使用奇怪的大写字母（多数用户喜欢并更容易记住小写的URL）。 让你的网站更易于浏览 创建一套自然顺畅的内容层次，尽力帮助用户更容易的从你的网站上获取他们想要的具体内容。在你的内部连接结构中添加导航页是一件有意义且有效的工作。 请注意：  不要为导航创建过于复杂连接，如：为网站的每一页都加上其他页的链接。 不要过分追求内容的层次（以致需要20次点击才能访问到更深的内容）。 尽量使用文本链接实现导航，以利于搜索引擎对你网站的索引与理解。许多使用不支持Flash或Javascript设备的用户也更喜欢此种方式。 请注意：  不要完全基于下拉菜单、图片或动画实现导航。（许多但不是所有的搜索引擎都可以识别网站中的类似连接，但用户如将通过普通的文本连接访问所有的页面，则会改善网站的可访问性。点此了解Google是如何处理非文本文件的。） 使用路径导航（译注：breadcrumb，也称”面包屑导航”），即网页顶部或底部的一个内部链接序列，它帮助访问者快速返回上一级或顶级的网页。多数路径导航是以某个整体页面（通常为根页）开始，从左至右逐渐深入，列出具体的章节内容。（如：Elvis’ Blog ? 互联网产品管理 ? SEO入门实践指南(from Google)） 为你的网站增加一个HTML的网站地图页及sitemap.xml会很有助益的：前者可以包含所有链接或大部分重要的链接（如果你的网站有成百上千个页面的话）；后者则可以确保搜索引擎识别出网站的页面。 请注意：  不要让网站地图页列出的都是过期或失效的链接。 不要让网站地图页未经组织（如按一定主题）的、仅仅是单纯的列出页面。 请考虑当用户删掉URL中的一部分会发生什么——你应该预料到某些用户可能会以特殊的方式进行访问——他们忽略了路径导航，而是手动删除URL的一部分，希望以此方式访问到更多的内容。例如：他或她正在访问”http://www.elviscai.com/pm/googles-seo-starter-good-practices-guide/”，然后在地址栏中删掉了”/googles-seo-starter-good-practices-guide/”，并按下回车，以为这样就可以浏览上一级的所有文章了。（我的网站可以），那你的呢？或者提供一个404页（用来提示”无法找到网页”的错误信息）？或者提升一级以显示”http://www.elviscai.com/”？ 提供一个有用的404页。用户偶尔会通过无效链接或输入错误的URL访问网站中不存在的页面，此时如果有一个自定义的404页友好的指引用户访问有效内容，将会极大的提升用户体验。404页可以包含之上首页的链接，也可以指向网站中一些很受欢迎或比较重要的内容。Goolge也提供了一个404挂件（Widget），将其嵌入404页会提供自动匹配备用网址等有用的建议。你还可以通过Google网站管理员工具找到那些访问”无法找到网页”的来源。 请注意：  不要让404页被搜索引擎索引（indexed）到（当收到访问不存在页面的请求时，确保服务器上已经配置了HTTP的404状态码）。 不要只是显示”无法找到”、”404错误”等信息，或根本不创建404页。 不要在404页中显示与网站无关的内容。 提供高质量的内容和服务 提供容易阅读的文字，用户更喜欢文笔通顺且易于浏览的内容。 请注意：  不要提供含有太多的错别字和语法错误的文字。 不要以文字置入图片的方式提供内容（这样不利于用户的复制与粘贴，且搜索引擎的无法进行收录）。 围绕主题且有条理的组织内容是很有助益的，它可以为用户提供内容起止的直观印象。按逻辑分段则会帮助用户更快的找到他们想要的内容。 请注意：  不要将不同主题、不分段、缺少章节主题或版面凌乱的内容堆砌在一页里。 使用具有相关性的语言，其中包含的关键字可以帮助用户搜索到你网站的某部分内容。对于某个主题的行家而言，他们所使用的关键字与新手相比差别是很大的。比如说，一个资深产品人员可能会搜索“原型设计工具”，而新手则会使用类似”框架图”等普通的关键字。预先考虑搜索行为的差异，并在写作时推敲关键字的应用（如一些不错的短语搭配），即可产生正面的效果。Google Adwords提供了一个方便的工具可以帮助你了解关键字的趋势，且可挖掘到相关的关键字。Google网站管理员工具还提供了一项热门搜索查询服务，可以查看哪些搜索查询会最常返回你的网页，及哪些网页通过搜索引擎被人点击。 创建新鲜、独特的内容，不但可以保证现有用户的回访，还会带来新的用户。 请注意：  不要提供给用户没有好处的修订版本（甚至完全复制的）内容。（译注：实际上，可以用robots规则控制搜索引擎对修订版本内容的索引行为。） 不要在网站中堆砌重复或接近重复的内容。（点此查看更多关于重复内容的信息） 提供独家、新鲜、有用的内容或服务，如其他网站因资源和能力匮乏而无法提供的那些。也可以写点针对某些原作章节的研究报告，或透露一个激动人心的新闻，或对现有主题进行一些突破。 优先为你的用户提供内容，而非搜索引擎。在保证搜索引擎产生积极效果的同时，应根据用户需求来设计网站。 请注意：  不要针对搜索引擎插入无意义的关键字，这样只会得到用户的反感。 不要频繁出现类似”因操作失误而到达本页”等对用户没什么价值的文字。 不要设置只有搜素引擎才会看到的隐藏文本。 撰写更好的链接文本 使用选择描述性的语言作为链接文本，至少是被指向页面的基本信息。 请注意：  不要使用普遍性的链接文本，如”页面”、”文章”、”点击此处”等。 不要使用与指向页面内容或主题无关的链接文本。 不要直接以URL作为链接文本。（尽管这样是完全合理的，如推广或引用一个新站网址时，但仍不推荐如此应用。） 撰写简短且具有描述性的链接文本，通常是使用一些词组或一个短句。 请注意：  不要撰写过长的链接文本，如使用一个长句甚至是一个段落。 样式化你的链接，让用户更容易的将其与普通文本进行区分。如果用户并不知道这个链接的存在或只是不小心点击了它，那就失去了链接的意义。 请注意：  不要以CSS或文字样式将链接设计为普通文本的样子。 内部链接也要加上文本，不但方便用户的浏览，也会帮助搜索引擎更好的进行索引。 请注意：  不要针对搜索引擎在链接文本中堆砌关键字或使用过长的文本。 不要创建对用户没有帮助的链接。 使用适当的标题（Heading） 就像一篇文章的提纲，适当运用标题是表达主要观点和次要观点的最佳方法。 请注意：  不要用无法决定内容结构的文本作为标题。 不要用标题标签完全替代<em>或<strong>标签（在使用它们更适宜的地方）。 不要无规则的使用标题标签的层级。 要有意义的、适度的使用标题。过多的标题不易于浏览，用户会分不清主题的开始与结束。 请注意：  不要过度使用标题。 不要把整个页面的内容都放进一个标题标签中。 不要忽略标题的结构作用，而只是为了样式使用标题标签。 优化使用的图片 与页面其他优化目标一样，最好使用简短且具有描述性的文件名与alt文本（ASCII编码）。 请注意：  不要使用类似”image1.jpg”、”pic.gif”、”1.jpg”等普遍性的文件名。（但一些拥有成千上万图片的网站则会考虑自动生成这样的文件名。） 不要使用过长的文件名。 不要在alt文本中过度堆砌关键字或使用整个句子。 当使用图片做链接时为其添加alt文本，Google会很容易的明白该链接所指向的网页内容，就像（上文）给文字链接添加文本一样。 请注意：  不要使用过长的alt文本，可能会被判为Spam信息。 不要让网站导航只使用图片链接。 将所有的图片都放在同一目录下，在域名下见一个独立的目录来存放图片（如：elviscai.com/images/），而不是将图片分散在不同的目录或子目录下。如此可以简化图片的路径。 使用常用且普遍支持的图片格式：大多数浏览器都支持JPEG、GIF、PNG与BMP。此外，建议图片文件的扩展名要与其格式匹配。 有效利用robots.txt 简述：可以使用robots.txt来限制搜索引擎索引网站内容（点此查看具体规则）。 有时robots.txt并不能有效防止敏感或私密内容被索引，需要使用多种方法保护。一方面，如果在互联网上出现了对某些URL的引用（如来源日志），搜索引擎则会收录这些URL（只显示URL，不包含页面标题与摘要）。另一方面，有些不遵守规则（Robots Exclusion Standard，）的搜索引擎并不会执行robot.txt中的指令。还有一些好奇的用户会研究robots.txt中的网站目录结构，然后猜测隐藏的网址。所以，通过给内容加密或通过为.htaccess设定密码保护则是更安全的做法。 请注意：  不要让（类似）搜索结果的页面被索引（用户不喜欢从一个搜索结果页中到另一个没什么实际意义的搜索结果页）。 不要让大量自动生成的页面被索引，尤其是相似的内容。 不要让代理服务器创建的URL被索引。 注意链接的rel=”nofollow” 简述： 在链接标签中增加rel=”nofollow”的主要作用即告诉搜索引擎不需要对这些链接进行跟踪。 如果链接至不信任或不想表现的网站（如Blog评论中可能含有大量链接的Spam评论），就可以使用nofollow。 如果某个网页”全部的”链接都需要设定nofollow，则可以在<head>标签中增加<meta name=”robots” content=”nofollow” />。 以正确的方法推广网站 通过Blog发布新的服务与消息，是面向用户群进行传播的一个绝佳方法。其它关注网站或者订阅RSS的网站管理员也会更好的获得信息。 不要忘记线下推广——它依然是物有所值的。比如可以将贵公司网址印于名片、信纸、海报等处。还可以向客户发送关于网站更新内容的邮件通知。 了解社会化媒体网站，那些基于互动与分享的网站，会更容易聚集对某主题感兴趣的用户群。 请注意：  不要企图推送每一条零零碎碎的新消息；应该推广更大且更会引起兴趣的内容。 不要刻意的将包含自身网站信息的内容以人工方式向前推（译注：可能会被判定作弊而受到惩罚）。 将你的网站提交到Google的本地商户中心，如果你所经营的是本地业务，这项操作可以帮助你从Google地图和网页搜索中接触到更多客户。（点此了解更多关于本地商业推广的信息） 积极发展到与你相关的网络社区中，在相似主题的网站上会有相当多的机会。开诚布公的在这些网站中进行交流是很有助益的，一方面通过参与热点话题的讨论可以获得很多针对社区或利基市场的创意，另一方面也可以建立良好的社区关系。 请注意：  不要给所有相关的网站发送Spam链接请求。 不要通过购买其他网站的链接以期获得更高PageRank（这种做法仅能带来流量）。 利用免费的网站管理员工具 暂略 获取Web分析的优势服务 暂略 对网站管理员的一些资源 暂略 译者后记 经过这次翻译，Google的态度印证了一个概念：“SEO是浮云，做好自己的网站才是王道！” 个人观点：在搜索引擎技术还没发展到极致之前，SEO的方向应该是：基于用户体验的语义化网络。 本文主要是意译，第一次做翻译可能会有很多错误，望诸位看官海涵；如有关键的概念性错误，敬请批评、指正，欢迎交流！:) http://1983ex.com/archives/130 一个朋友在做Web2.0的网站，向我征求一些关于UCD方面的建议。我算不上专家，只是有些个人的理解。也可以share一下。 说到UCD（User-Centered Design），可能大部分人首先想到的是网站美工，因为Design这个词往往会让人联想到视觉设计。网站的视觉效果也是所有浏览网站的人第一眼所接触的，优秀的视觉设计能够使用户的视线停留，并且把用户的视线引导到重要内容上。但是，Design还包含了系统设计的含义，也就是说，它包含了系统流程和功能的设计。网站就是一个信息系统，只是把应用对象从专业的操作人员换成了大众用户而已。当然大部分网站是由前台客户操作和后台管理、处理请求的两个部分组成。 就像一个艺术家和一个工程师在讨论Design时一样，艺术家眼里的Design是艺术的、感性的，而工程师眼里的Design是工程的、理性的。UCD正是这种艺术与工程的结合。既注重感性的用户体验，又强调理性的产品流程。 所以，在我看来，UCD主要体现在两个方面： 一方面是显示操作上的友好性，页面布局的美观性、易读性，浏览器兼容性，以及其他一些细节性的东西，比如哪些地方需要提示，提示框怎么出，按钮的布局怎么放，怎样报错比较友好等等。细节问题可以放在网站开发的后期考虑、优化。 另一方面则是产品流程设计，即用户在网站上停留、操作，从用户需求和网站能够提供的产品双向考虑，怎么引导客户获得其想要的东西，这方面影响到整个网站的流程问题，并且也是保持客户粘度、忠诚度的关键本质因素。这个方面需要较早地在开发初期考虑确定，需要大量brainstorm。 http://1983ex.com/archives/128 历经2个多月,终于完成网站的改版了.不论是功能还是界面都有了很大的变化.现在开始琢磨怎样来改网站首页了,以便于网站整体相配合.以下是思考的几个需求点. (下列文字是一边思考一边写的,未经过整理和校正.有可能读不懂.不好意思J) l 需要和网站管理中心的风格相一致,中性简洁,评判标准是不难看,而不是要好看.. 肯定不能让用户感觉你从首页登陆进去后会变成另外一个世界.因此.首页和内页的风格统一是绝对要遵守的. 并且风格要简单.中性.不需要韩风,不需要华丽,不要卡通.要最中性最大众的设计.不要求别人认为说这个页面好看,只要不说很丑就是ok的!任何有带色彩不够中性的东西都做不大.因为有人喜欢卡通就必然有人不喜欢,有人喜欢韩风就比如有人不喜欢.因此中性简洁的页面是最主要的.就像你不会说百度有多好看,google有多好看一样 作为SNS网站.互动是最基础的.因此无需在首页显示太多的内容.我们不希望用户来只是看. 首页不需要人这个要素的引导.有内容信息的引导就是有导向型的.对做成一个平台就很不利.比如你怎么保证选出来的人都是大家都喜欢的?你怎么保证选出来的模板都是大家喜欢的?而且人的展示一多就让人感觉是"交友",是比较大的问题.所以首页不需要太多要素. l 醒目的登陆口和注册入口. 关于登陆口.作为一个SNS网站肯定是最重要的.我们希望用户来这个网站就是先登陆进去.因为只有登陆了才能取到用户的很多信息,才能由此来促进用户的很多互动.所以登陆口一定要很醒目,并且很方便. 关于注册入口.Facebook使用的是把入口直接放在了首页上但是我个人感觉这种做法其实并不好.从用户体验方向来说.一个页面体现一个主要的功能点对减少用户选择,从而提高用户理解度是会有很大好处的.因此我觉的只要有明显的入口即可.就是无论用户是无意撞进来的,还是朋友介绍来的,都很方便的找到注册连接并成功注册 l 让用户在首页就知道51是干嘛的. 无论是无意间撞到我们网站的,还是朋友推荐朋友上来的,其实让用户知道51是干嘛的是很重要的事情.因为即使朋友推荐朋友其实也未必很讲的很清楚. l 以上是主要原则.一定要遵守.以下是几个小原则和思考.能更好的让首页发挥更大的效果. n 使用"媒体报道"模块显示51是个大站 作为一个简洁的首页,其实可能会比较难从信息上了解51是个大站.因此我们可以通过媒体报道的方式.让用户也知道我们51经常上主流媒体,经常上电视.对51整体的品牌应该是有好处的 还有哪些方法可以让用户感觉到51其实是个大公司.而不是那些不知道什么时候就会死掉的小公司? n 如何让用户感觉到热闹? 人是特别从众的群体.因此越热闹的地方就会越热闹.因此我们希望通过一些细节来把这个热闹感体现出来. 比如阿福原先在首页上显示的"每天16万人注册""你注册后就知道为什么每天都有16万的人加入"之类的提示. 再比如姚总提到的.一个比较有趣的wiget来体现51用户一直在不断的活动着.比如做的事情,比如在线? 还有哪些好的细节可以体现51的热闹? n 大幅的图片广告位 总体来说大幅的图片广告位还是需要有的.这对我们的很多信息到达会很有好处.比如大型活动,节日氛围的打造,网站重要的公告等. http://1983ex.com/archives/124 作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。Chada在这基础上增加了三个自己曾经介绍过的工具。 优化/格式化类 1、CSSTidy- CSS Tidy是一个开源的CSS分析和优化工具； 2、CleanCSS- CleanCSS是一个基于CSS Tidy的强大的CSS优化和格式化工具。Chada曾经介绍过这个在线工具，在这里。 3、CSS Optimizer- CSS Optimizer可以通过优化压缩CSS样式文件大小。 4、CSS Analyzer- CSS Analyzer可以帮助你检查你的CSS样式是否符合W3C的认证。 字体类 1、Em Calculator- EM Calculator可以帮助你计算px与em之间的转换。 2、CSS Font and Text Style Wizard- 这个小工具可以很方便地将你的CSS样式呈现出来。 表格类 1、CSS Form Code Maker- 很方便地生成“五颜六色的BOX布局”的表格。 2、JotForm- JotForm是一个“所见即所得”的表格生成器。 导航/按钮类 1、CSS Buttons- CSS按钮和文本在线生成工具。 2、CSS Menu Generator- CSS Menu Generator可以同时生成基于CSS和HTML代码的漂亮的按钮。 生成器 1、CSS Creator- Css Creator是一个可以创建自适应宽度或者是固定宽度的浮动布局生成器，可以生成带有Header和Footer的三栏布局。 2、QrONE CSS Designer- QrONE是一个CSS在线生成与编辑器。 3、Web 2.0 Generator- Web 2.0 Generator可以利用HTML和CSS生成一个完整的网站布局。 4、CSS Mate- CSS Mate是一个在线CSS编辑器。 http://1983ex.com/archives/122 　　美国互联网分析机构Net Applications本周在业内引起了一阵骚动，其发布的一份报告中指微软操作系统市场份额首次跌破90%。基于此行业的反微软情绪最强烈，所以出现此现象并不出奇。 　　据Net Applications公司负责市场营销及战略联盟的执行副总裁Vince Vizzaccaro透露，他们是通过分布在全球40000个网站的软件感应器来统计流量并得出统计数字的。这些统计包括操作系统、浏览器、IP地址、主机域名、语言、屏幕分辨率以及一个参考性搜索引擎。 　　不过，Net Applications在这些统计数字中发现了一些来自Google.com的不寻常现象。这意味着其大部分流量来自Google的员工，而不是使用其搜索引擎的公众。Net Applications的调查发现，来自Google.com的访问者有三分之二并不隐藏自己所使用的操作系统。但是，有三分之一的（操作系统）无法识别。 　　Net Applications的感应器能识别包括大部分最常用的Unix及Linux等几乎所有主流操作系统，其中甚至包括微软最新的Windows 7。这种目前已经在微软总部内部配置使用的操作系统同样能通过识别字符串显示出来。但这种Google的操作系统被故意屏蔽了。 　　“我们从未见过有任何操作系统会去掉用户代理字符串的，”Vince Vizzaccaro对媒体表示。“我相信，只有特意安排才会这样。这种现象我们此前从未在使用代理服务器的网站见过。我能告诉你的就是，在Google网站中出现的人，有很大一部分隐藏了自己的操作系统。” 　　代理服务器并不会造成这样的屏蔽现象，因为它会屏蔽所有东西，这也是Net Applications一直以来观察到的。这三分之一让人困惑的Google访问者中，只有操作系统信息被移除了，而他们的浏览器等信息并没有被隐藏。至于另外三分之二来自Google的电脑系统，它们在浏览网站时所用的操作系统都被识别出来了，大部分用的是Linux。 　　内部试用是很常见的现象，因为这是测试操作系统或其他开发中产品的最好方式。微软就在雷蒙德总部的部分区域配置使用Windows 7，用自己的员工作为测试人员以确保其日常使用正常。微软称这种方法为“坚持自产自用”(eating their own dog food)。 　　到底Google在隐藏些什么呢？Google向提出询问的媒体回复了一份声明，称不会对任何传言和揣测发表评论。但有硅谷观察家相信，它就是传闻已久、以“软件即服务”为导向的Google OS。 　　“我认为他们可能在研究一种应用程序基础架构，因为操作系统是一种让硬件与软件通讯的东西，而Google并不从事这种业务，”Sageza Group总裁Clay Ryder说。 　　“但作为一种建立网络应用程序的基础架构，我认为Google正在开发类似产品，”他继续说到。“他们正不断推出越来越多的免费应用程序，我想他们可能最终还是想用这种传统方式赚取些利润。这样的话，Google想有一个能到处适用的网络应用程序架构是十分合理的做法。” 　　The Enderle Group首席分析师Rob Enderle表示，这样的操作系统很可能是该公司最近发布的手机操作系统Android的一个扩充版。“他们很清楚自己未来的发展方向，那就是一个能承载Google大部分云计算应用程序的平台，”他说。“你可以将它看作是Android概念向PC的延伸。” 　　两位分析师都不认为Google有意在操作系统层面向微软发起挑战，因为它的目标就是让程序与系统层无关。“我从不认为Google会进入桌面操作系统市场，”Ryder说。“这根本不合理。但从网络应用程序架构来看，它不需要依赖硬件，仅仅是在客户端使用，这样要合理得多。” 　　Enderle指出，这将是Google继工具条、Google Apps和Chrome浏览器后之后的最后一项产品，全部加起来就构成了完全由Google提供的完整用户体验。一个用于运行所有这些程序、类似于Android的底层架构是很合理的推断。 　　“仔细想想，如果你用惯了Google的工具，就会发现他们在所有产品中的体验都是Google式的，而不是微软式的，”他说。“这是一种很有趣的策略，我相信它能成功，但现在还不是推出市场的时候，因为Chrome还没准备好。” http://1983ex.com/archives/118 通过一些方法来对产品进行评估和测试，我们才会发现设计、开发中存在的一些问题，然后迭代着再设计和再开发。我记得在 7 月份的话题我写过一篇贯穿整个产品生命周期的用户研究，里面谈到了定性研究和定量研究。为了控制篇幅，本文要谈谈产品面世（上线）后，如何通过定性的用户访谈去评估产品的使用体验。 另外，并不是只有设计师这个职位才有责任和义务去做用户访谈，一般来讲，有经验的产品经理会比视觉设计师来的更有效一些。 准备工作 产品的设计不可能 100% 所有人都喜欢，也不可能 100% 让细分的目标人群都喜欢，我们只要求做到 80%，争取做到 90% 就是优秀了（这里只是打个比方，可能大家对这个比例会持不同意见）。这点可能大家都知道，但很少人有这样的心态。摆正心态之后，用户访谈可能会进行的异常轻松和顺利。 那么在开展之前总是需要准备的，这个阶段的用户访谈大部分是定性分析为主，去了解产品是如何被使用，以及验证传达给用户的体验是否和自己所想的一致，更多情况下，是需要否定自己。准备工作这里就不展开了，无非就是按照设定的角色、目标人群去招募用户，约定时间，准备场地和环境，沏几杯茶或者准备一些饮料，然后就开始朋友间的聊天 :D 用户访谈 通过访谈，收集用户在使用过程中的问题，这是我认为比较有效、可行和可控的方式。而且可以在产品生命周期的各个阶段开展，而不限于是开发阶段还是上线 beta 等。经验告诉我，在实际用户中，有人比你更了解你设计的产品。:D 在访谈进行过程中，轻松并且适时地引导和让用户——实际使用产品的人——发发牢骚，而作为产品设计人员，在这些牢骚中总能挖掘和发现很多有价值的信息。 一般来讲，我们很容易从访谈中涉及以下问题： * 没有我想要的某个功能或者找不到（前期业务流程和需求分析） * 某个功能用起来很耗时间，步骤太多（信息架构、流程） * 我以为 aa 表示的是 bb……（界面文字） * 这个太丑了（图形设计） 同时他们也会提一些建议： * 这个要是放在这里就好了 * 要是我一眼就能看到，不用点进去，那就太酷了 * 因为我想…所以最好提供…的功能 不用觉得他们的问题是多么的具体和细节化，实际上用户只会提这些问题。在访谈中，有一点必须去发现的就是用户对整个产品的印象。以前的一个同事用一个故事提醒了我，我们可以在访谈中加一些偏心理学的测试，举个例子：如果把网站比作人，你觉得是男人还是女人？像自己的孩子还是父亲、母亲？ 访谈记录 关于访谈，还想说的就是最后怎么去记录和整理。如果是一对一的访谈，那么可以靠录音，访谈后再整理成文档。如果有第三人专门记录，那么挺好的（访谈的人可不要太多哦，用户是会紧张的）。至于录像、录制屏幕，我觉得一般也没有太大必要，而且挺麻烦。 整理后的访谈记录应当包括以下部分： * 访谈对象的角色 * 他/她的使用情景和建议（用他/她的原话） * 他/她为什么会这么做和这么建议（这不一定是问出来的，而且大部分情况下最好不要问） * 访谈过程中的一些想法和总结 结尾 最后提一下的是，在一些产品中可以提供一个良好的反馈渠道。为什么说是良好的呢？比如每个网站都有联系我们，先不管大部分网站管理人员处理这些问题不及时，用户即使看到联系我们这个字眼，可能也不想把自己使用中的问题给反馈出来。良好的反馈渠道应该是友善的、方便的和快速的，比如很老套的使用一些小奖励，告诉用户“测试有奖哦~”，这招还是比较有效的，当然更多的也可以结合产品去发挥一些创意。 在这些都做了之后可能收集了一堆问题，然后怎么处理？这可能是大家更关注一些的问题，比如如何面对那 10% 的用户提出的建议。这牵扯到产品定位、品牌传达、商业目标等很多问题，如何平衡、取舍，这又是一个大话题了。我想篇幅有限，以后总有机会可以与大家探讨，或许本期话题中有人已经展开了 :D http://1983ex.com/archives/116 有时会被问到“看看XXX网站如何？”之类的问题。 谈到评估，通常都是指产品级的网站，如果模式很新，了解需要花一定时间。于是，很多人又问“那么你仅从UI/UE的角度看看呢？”首先我们得达成共识，一切花里胡哨都在为功能服务，如果功能满足都成问题，其他就没必要谈了。 举例分步说明，注意先后顺序。 第一，没有足够应用经验，不可能了解网站的功能和结构，如何做出判断？ 初步印象 是否有眼前一亮的感觉？任何元素都可能抓住用户，先入为主。 能否尽快搞清楚，网站提供何种服务，并且能尽快明白，有无注册的必要？ 信息可视化 好页面似一杯鸡尾酒，具有层次感，远近都能看出效果，而不是一坨浆糊。 呈现是否平衡？不相干的元素之间，也可能建立联系，很多不协调的根源，就在这里。 尝试在纯UI的角度深度感知，整体氛围是否和已了解的概念搭配？比如够不够热闹、有没有品位。 通过模块能否分辨出网站？不看Logo还认识网站么？检查内容+界面的相关性。 导航系统 多深入几级页面，是否清晰自己的位置？ 多纵横逛几个来回，是否已经迷路？ 第二，假设对产品有了初步了解，确定自己需要此服务，如何细化尝试？ 功能结构 主体逻辑是否清晰？思路是否顺手等习惯问题。 能满足自己多少需求？只是衡量产品的成熟情况，但不是好坏关键。 有多少创新？让自己意外了，统统记下来。 设计细节 交互设计，挑主要业务流程进行测试，主要看逻辑是否混乱。 视觉设计，不仅仅是图形，字符效果同样需要推敲，也属于深入信息可视化的范畴。 信息设计，内容有没有生命力？情感化等同于催化剂。 客户端技术 交互流畅程度，大量的Ajax技术应用会影响效率。 搜索引擎的优化工作，可以借助Alexa和Google两大工具。 代码质量，看几个代表性页面就可以。 第三，在竞争对手的角度，如何提炼总结？ 产品跟踪 更新节奏，改版中可能会暴露发展方向和一些好创意。 解决方案，重要的不是完美，而是统一，体系才能形成壁垒。 数据挖掘 找准用户群，并在运营的角度进行细分、锁定各自特征值，提供可修正的参考依据。 关注用户忠诚度，不满意就意味着寻求改变。 用户活跃程度和活跃倾向，也是值得参考的重要数据。 我经常参与测试产品，不管是自己的、别人的、感兴趣的、不感兴趣的、见过的、没见过的，大致都可以使用同样的方法体系。把事情做彻底，目地就是搞清楚设计意图。 三个部分阐述，其实也暗合用户理解的本能、行为、反思三层结构。通常，人做事的能力和态度具有相关性，从前边的工作成果，基本上就能评估出后续工作的斤两。 http://1983ex.com/archives/113 当你梦想中的产品终于以一种可见可感受的形态出现的时候，你是不是就可松口气给自己放一个大假了呢？毕竟从用户调研到最终确定视觉方案，这条路跌跌撞撞走过来已经耗费了太多的心力。 但是且慢！事情还远远没有结束，你现在所处的，是产品设计过程中最容易节外生枝的阶段——实施阶段，你现在要关注的，是如何让参与实施的每一个环节都按照你设计好的方向进行。所以你还是先拿凉水冲冲脸，接着进行下一步工作吧。 在真正进入实施之前，你要做的事情之一就是进行一次可用性测试，以了解用户对这个新产品的反应，同时发现一些你所忽略的、使用上的问题。 在之前的设计过程中，我们完成了各种各样的可交付的文档，现在是检验你的准备工作是否完善的时候了。 首先，我们完成了用户调研，并基于所了解的用户分类设计了几个人物角色。那么，你现在要做的，是根据人物角色的属性，找一定数量（通常是每种人物角色找5～7个）的用户过来进行产品的可用性测试和简单的访谈，以了解不同类型的用户在使用这个新产品时，有可能产生的障碍和疑问。 一说到可用性测试，有人脑海里总会浮现出一面单向透明的镜子，摄像机、价格昂贵的眼动仪等等高级设备。如果你还这么想，你已经落伍了，可用性测试早就跳楼大减价，变成一种再平常不过的UCD方法了。你要做的，除了找对合适的用户以外，再做这两件事就好： 1、完成高保真原型。 你在交互设计阶段完成了线框图，也就是我们常说的低保真原型（别告诉我你没有做），而前不久，你们刚刚确定了一套大家都满意的视觉方案。那么现在，你可以和UI Coding、视觉设计师一起，把这两样东西结合起来，做一套最完整的高保原型。 最好不要拿低保真原型给用户做测试。虽然UCD方法并不排斥低保真原型（甚至纸面原型）的可用性测试，但是这会大大增加用户认知和理解的负担，也从一定程度上加大了你和用户沟通的成本，你会发现你总在解释：“这个地方将来可能是这样、这样、这样……”，而测试结论也因而大大地打了折扣。 也不要等产品开发完成以后才找用户做测试。这个道理大家都知道，我就不啰嗦了。总之，高保真原型是开发成本最低，时间最快的产物（当然，这建立在你的前期工作准备得够完善的基础之上），也是进行可用性测试的最佳产物。 2、设定测试任务。 传统意义上的可用性测试，是观察用户使用产品的、最自然的状态。换句话说，就是把用户扔进可用性实验室，然后你藏到一边去偷看用户怎么折腾你的宝贝产品的全过程。如果Web产品的可用性测试你还这么做，你会发现你的用户总是在漫无目的地随手乱点。你希望用户在打开注册界面时的第一反应是输入用户名和密码，他却鼠标轻轻一点从导航就离开了这个页面。你应该因为这个结论而去掉注册界面的导航吗？显然不是。 被召募过来参加可用性测试的用户，尽管有可能是你的老用户，但他们测试时的心理状态和期望值，与他们平时使用你的产品时完全不一样。用户会揣摹你的心思：这帮产品人员想让我测试什么呢？你想让他在详细信息页面看到“注册”时去点击它，他却认为你想让他在这个页面发表一个评论，结果就是你暗暗咬着牙祈祷他早点发现注册按钮，他却在满头大汗地切换输入法。 你要怎么做才能避免这个情况呢？ 之前，我们针对每一个人物角色的目标完成了任务分解，这其中包括任务的重要程度和优先级别。而参与测试的用户，是按照人物角色的属性来召募的。顺理成章地，就应该让这些用户试着在你的新产品上完成他们这类用户最主要、优先级最高的任务，这样你才可能发现他们在完成任务的过程中有可能出现的问题。 你的测试计划可以像这样： －　用户类型：刘贝贝（关注细节的浏览型用户） －　测试产品：新版详情页Beta1.2.07高保真原型 －　测试目的：了解用户对新版详情页的适应时间和主要操作 －　测试任务： 　　1.查看详细信息（任务编号A001）； 　　2.分享（任务编号A002）； 　　3.评论（任务编号A015）。 很简单吧？做Web产品的可用性测试，你只需要做三件事： －　找到合适的用户 －　准备好高保真原型 －　确定要测试的任务 如果你还有时间和资金，也可以准备下面这些： －　一个录制屏幕的软件 －　录音笔 最后，也是最重要的，你需要准备一双敏锐的眼睛。辅助记录的工具固然重要，但是再强大的工具都无法代替你的思考。你最了解你的产品，你经历了整个设计过程，所以你最清楚用户在哪个地方和你的设计的差距最大。睁大眼睛去观察用户的行为吧，看到有疑问的地方一定要第一时间提出来：“你在找什么？”，事后再询问恐怕谁也不记得当时是什么情形。唯一需要注意的是，别问“为什么这么做”，只问“正在做什么”。 最后（一不小心说了两个“最后”，原谅我的啰嗦），在下结论的时候，尽量保持客观、中立的语气：“用户在搜索时没有选择下拉菜单的选项，输入关键词后直接回车。”而不应该这么总结：“用户不习惯在在搜索时点击下拉菜单。”或“用户没有注意到搜索中的下拉菜单。”除非这是用户自己说出来的话。 http://1983ex.com/archives/111 刚看到 Dougal 推荐了几款主题框架，可惜我只用过其中两款，其他的好像也有挺好的，没怎么研究过，这里推荐给大家我用过的还不错的，相信会给你自定义主题带来很多便利！ Sandbox Sandbox 是一个语义 WordPress 主题，其架构相当优秀！支持 Widget，而且内部标签的 CSS 类都是动态生成的，这样就给主题制作者们提供了一个相当便捷的途径去制作自己的主题。举个例子，如果你想在首页实现不同的分类使用不同的 CSS，你只需要在自己的 CSS 里添加 .home .category-life {} .home .category-music {} 这样的语句就可以了，如果你对 PHP 不是很熟悉，很头疼那些烦人的函数，那这个主题无疑是你的最佳选择，基于这个主题，将会大大缩短你的开发时间！ K2 K2 是也是一个高级的 WordPress 主题，其优秀之处不仅仅在于其强大可自定义性，还在于其丰富的功能，K2 自身具备了多种 Ajax 技术，包含存档，搜索等页面，其自带的侧边栏管理系统更是相当强大，新版本中还增加了挂钩，方便主题设计者们自己添加想要的元素，详细介绍可以查看此文。 Carrington 这是刚刚发布的一款 WordPress 主题框架，其定位也很高，如果你想将 WordPress 变成一个 CMS，那么这个主题可能会给你带来一些便利，如果仅仅是普通博客，可能有点杀鸡用牛刀了。如果你对此主题感兴趣，可以查看此文，这个主题的中文说明也正在制作中…… PrimePress 这款 Dougal 介绍的主题我没有用过，在他介绍里，这个主题也拥有相当强大的语义支持，而且也很重视页面设计和结构。它有一个很有趣的特性，自己创建的 custom.css 还可以覆盖原有的 CSS 样式，你可以自己想怎么弄就怎么弄，主题会先读取你的 CSS，此外，这个主题还支持轮换显示页眉图片，好像官方也有文章详细说明如何自定义每个页面的页眉图片。有兴趣的朋友可以去试试。 Agregado 这个主题我也没用过，Dougal 也说这个主题不像上面说的那几个主题那么强大，它主要强调了一个“lifestream”概念，它能方便的获取你在 Twitter、Flickr、Delicious、Last.fm、Facebook 或者其他一些社会化服务网站上更新的信息，并将其显示在侧边栏上，显示的风格也很漂亮，不过好象这个主题也不具备什么框架能力，而且他说的那几个网站好像国人也没多少用的…… 以上几款也是最出名的几款 WordPress 框架了，基于这样的框架来制作主题，应该还是比较快捷的，应该能大大缩短开发时间，当然，也得选用合适的主题框架，我想国内大部分有能力设计的朋友还是比较头疼 PHP 的，这时候不妨试试 Sandbox 或者 K2 框架，也希望有更多人国产设计师加入到 WordPress 行列里来，让中文 WordPress ... http://1983ex.com/archives/109