<![CDATA[08SHOW Dribs And Drabs | 网站信息构架、足球]]>

<![CDATA[08SHOW Dribs And Drabs | 网站信息构架、足球]]> http://www.08show.com/blog/ en LBS v2.0.304 Wed, 10 Mar 2010 11:19:13 +0800 60 <![CDATA[还是网页字体这事]]> ]]> Fri, 05 Mar 2010 10:29:54 +0800
前几天做一个项目我们决定使用 font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋体),sans-serif 的字体显示顺序（先别管合理不合理），我们测试了IE6/IE7/IE8/Firefox/chrome/(使用以上几款浏览器访问我们网站的用户加起来占90%以上)，在IE7/IE8浏览器中显示英文和数字时字体有区别（见下图）

http://docs.google.com/File?id=ds4hm4h_247f29z4rcw_b

http://docs.google.com/File?id=ds4hm4h_245ghhkfv8w_b

“Aisleep”和“88”感觉上面有明显的锯齿而下面的感觉粗厚平滑一些。

大家知道，这是因为IE7/IE8浏览器中[属性] > [高级]选项卡 > [多媒体]有一个ClearType(
增强屏幕字体)属性，默认是被选中的原因(见下图)。

http://docs.google.com/File?id=ds4hm4h_249mwgzngdg_b

如果把这个选项去掉勾，那IE7/IE8浏览器显示的字体就和其它浏览器统一了。反之，通过Windows控制面板 > ClearType Tuning 启用ClearType（见下图）

http://docs.google.com/File?id=ds4hm4h_250czp5xgff_b

对于操作系统控制面板没有ClearType Tuning选项的可以通过以下方式实现：

1. 单击[开始]，单击[控制面板]，单击[外观和主题]，然后单击[显示]。
2. 在[外观]选项卡上，单击[效果]。
3. 单击选中[使用下列方式使屏幕字体的边缘平滑]复选框，然后单击该列表中的 ClearType[清晰]。

http://docs.google.com/File?id=ds4hm4h_251d5cvj6cc_b

那以其它浏览器显示的字体就会和IE7/IE8统一了。(注：据我调查大多数XP操作系统默认为“标准”)

接下来会看到一些测试和整理，目的只是为了解字体在不同设置下的特性。这里不会有什么字体的推荐设置，因为我认为字体的设置和你所做项目的具体情况有关，没有什么设置是最好的，只要清楚字体在不同设置下的特性才能在以后的应用中得心应手。

测试：12px和14px的字体大小是中文网页中最常见的；字体family：黑体,宋体,sans-serif,Verdana,Tahoma,Arial,Helvetica(没用雅黑字体，雅黑字体在Vista以后的操作系统才有，但根据网站数据统计80%都是XP操作系统，目前兼容性会是个问题)；文字加粗容易分辨区别，浏览器：IE6/IE7/IE8/Firefox3.6/Chrome4.0。下图显示效果不好，这里访问→http://docs.google.com/View?id=ds4hm4h_241f5cpdkff

http://docs.google.com/File?id=ds4hm4h_258fw4hqkc4_b

整理：
从 ClearType角度：除了IE7/IE8外其它浏览器字体显示效果都是一样的，如何统一所有字体显示效果，方法上面已经说过。

* 黑体：字体大小12px/14px时 ClearType设置有作用（16px/18px/20px时无作用，22px以上会有作用）；
* 宋体（\5b8b\4f53）：字体大小 12px/14px/16px/18px时ClearType设置无作用（20px以上会起作用），所以 12px-18px之间的宋体在所有以上浏览器中能得到高度统一，但粗体的符号显示真的很不理想比如"@"；
* sans- serif：无衬线字，细心的一定发现唯独这类字体上图中出现了三种字体。在IE6和IE7/IE8中区别只是ClearType设置问题，字体其实就是Tahoma(无衬字)，但在FireFox和Chrome中调用的是宋体（衬字）（可设置）；
* Verdana：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。
* Tahoma：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。(仔细观察其实 Verdana和Tahoma字体外形是差不多的，只是单词中字母间距的区别。)关于Verdana和Tahoma再延伸一下，之前看到过根据 Jackob Nielsen用户调研显示，Verdana 字体是易读性最高的，推荐设置为第一默认字体，前提那是英文站点。但在中文站点又要老生长谈中英文排版问题，具体用什么字体要考虑文章中是否有斜体、粗体：
o 当ClearType设置为“标准”时，Tahoma比Verdana锯齿感强，而且Verdana字母的间距较宽的优势会体现出来。

http://docs.google.com/File?id=ds4hm4h_259zzbs57dp_b

o 当ClearType设置为“清晰”时，Verdana和Tahoma效果相近。

http://docs.google.com/File?id=ds4hm4h_260c38n8mgk_b

至于说Verdana由于字母间距的问题导致中文结合时效果不佳，各位有时间可以看看样稿http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp，对平常的浏览和排版的影响是微乎的（Verdana的字体文章会更长一些），如果我不那么刻意去比，几乎是看不出来的，何况是大多用户（我做过测试把两种字体的文章分开，分别给朋友、同事、家人等不是专业领域的人看，Ta们没有任何意识，并且在我指出字体区别后，他们对我说：“你也太无聊了吧？”）。所以具体用什么字体时，最关键还是考虑字体用在什么对象(系统、访问者)上，然后是字体是否会涉及到的变化：大小、斜体、粗体。
* Arial 和Helvetica：以上浏览器中视觉上几乎是一致的（IE7/IE8中感觉上颜色偏深一些），无锯齿感觉，但和Verdana、Tahoma 比起来整体偏小很多。可以把字体设置的大一些，CSS样式中就会多一行特殊的定义。

参考：

* 使用 ClearType 增强屏幕字体http://support.microsoft.com/kb/306527/zh-cn
* 细说字体 Sans Serif 与 Serifhttp://yx.takeback.net/121/serif-font.html
* 无衬线体http://zh.wikipedia.org/wiki/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93
* 15.3 Font family: the 'font-family' propertyhttp://www.w3.org/TR/CSS21/fonts.html#propdef-font-family
* web-default-fonthttp://lifesinger.googlecode.com/svn/trunk/lab/2009/web-default-font.html
* 微软雅黑http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91[完]]]> <![CDATA[淘宝新登录体验：）]]> ]]> Wed, 03 Mar 2010 17:39:39 +0800
1.登录页比旧版更简洁明了，但左边宣传图的设计实在没有加深我立刻登录的行为，反而让我停顿一会，在仔细看那几个草书写的是什么？放慢了登录行为。那还是旧版右边的内容更好些:)

2.登录框原先的设计考虑安全，现在考虑用户类型。其实说到登录框就要延伸到注册页，而且不仅是淘宝的注册页面还有支付宝的注册页面，淘宝注册页分[手机]和[邮箱]两种，支付宝的个人注册页也是分[手机]和[邮箱]两种，那为什么不整合一个登录框呢？

3[帐户名]其实这个标签取的对于淘宝的注册页面来说挺失败的，为什么？麻烦各位去看看支付宝的注册页面，在输入第一项内容时的提示语，竟然比淘宝本身的注册页面还要对应的多，难怪支付宝在注册的首页中不提“该手机号或者邮箱还能登录淘宝“，呵，纯属调侃！

4.[使用安全控件登录 ],我不清楚大多数用户是否能了解这句话，如果把文字换成“使用更安全的登录”会不会在理解上更好呢?还有使用[使用动态密码 ]，点击后，[帐号名]变成了[会员名]，难道是一定要输入会员名，但为什么Input输入框中又提示[手机号/会员名/邮箱]?

5.在用户输入用户名和密码错误时，是否登录框下面的[忘记密码?]应该变的醒目一些。还有把[用户注册]四个字颜色变成和登录按钮一样的颜色，视觉上这样不仅不会让注册功能显的不明显，而且也不会影响登录的醒目性（因为登录按钮的色块本身较大）！]]> <![CDATA[淘宝评价，当只有一个待评价时]]> ]]> Wed, 03 Mar 2010 16:05:58 +0800

http://docs.google.com/File?id=ds4hm4h_238hfk3v9f3_b

因为目前只有唯一一个待评价，但我点击完那个小的可怜的（1）(为什么这块文字的链接不都做上去呢？)，跳转到了已经买到宝贝的页面，还要再点击一次评价，而且[评价]两字在这里已经不明显了。

http://docs.google.com/File?id=ds4hm4h_239dtsjkggq_b

当[等待您评价]只有（1）个时，页面直接跳转到评价页面是不是更合理呢？！

http://docs.google.com/File?id=ds4hm4h_240ck7m5scv_b

[完]]]> <![CDATA[服务器升级中...网站也可以提供的服务]]> ]]> Tue, 23 Feb 2010 20:36:21 +0800

http://docs.google.com/File?id=ds4hm4h_220fkfp8jhd_b

今天在看朋友的博客，有篇文章里分享照片，不过只提供了照片的链接地址。点击链接就跳转到上图这张页面。哦，原来网站服务器正好在升级，暂时不能看到照片。不过它提供了你另外的一个选择：“2.如果你乐意，挑个游戏玩吧”。意思大致是：网站暂时不能用，但你可能是想看看图片消遣一下的，那就玩玩游戏吧。但对于那些有重要性访问请求的用户是否应该再做一个“保存这次访问请求”的功能，当网站升级成功后通过邮件或者其它可联系的方式第一时间通知用户，这样不仅做深服务，同时也能提高网站的访问黏度！

http://docs.google.com/File?id=ds4hm4h_223d7sz36fq_b

一般是外链过来的用户有这类需求可能性较大，并且用户在点击“保存这次访问请求”时是需要登录的：如果是已注册用户直接登录保存记录（浏览器有cookie记录的用户话会更方便）；如果不是注册用户，那这时马上提拱一个注册页面，关键这类情景下的注册页面尽量简洁，只要输入用户名，密码，和邮箱就行！（等下次，他再次访问时再引导他完善个人资料也不迟。）

一个好的用户体验，哪怕是服务器升级时也能做。[完]
]]> <![CDATA[joyo同时间段下的单，区别在哪？]]> ]]> Sun, 21 Feb 2010 16:13:18 +0800

http://www.08show.com/blog/uploads/201002/21_161759_.png

2月19号晚上由于种种原因在joyo下了两个订单，晚半小时下的那个订单，今天收到货了！为什么早半小时的，没有任何音讯呢？明明两本书都有货啊，尚未发货也给我个理由什么的吧？未处理给我个理由吧？思前想后，觉的两个订单除了下订时间有半小时左右的区别，还有一个原因就是这个早半小时的订单我多加了一个备注：

http://www.08show.com/blog/uploads/201002/21_161645_001.png

2009.2.23注：终于忍不住给joyo.com打了电话，他和我解释了一大堆，主要内容是25号之前会给我个明确答复！
2009.2.24注：今天已经收了到两本书！[完]]]> <![CDATA[体验-手机淘宝网充话费]]> ]]> Sun, 21 Feb 2010 00:12:10 +0800

http://docs.google.com/File?id=ds4hm4h_210dx7kqzc9_b

01.打开手机淘宝网登录后，进入“充值”（省略图），正好在搞充值话费活动，加深充值行为的兴趣。

http://docs.google.com/File?id=ds4hm4h_191d9g7w992_b

02.再仔细一看，一直没明白获“全年话费”的概念，但能明白应该是有机会能拿到额外的话费。进入“我要充值，我要全年话费”（手机淘宝网页上，只要是蓝色文字就是可点击的。统一性！）

http://docs.google.com/File?id=ds4hm4h_190dqrxdcdr_b

03.选择好充值选项，点击“快速充值”。

http://docs.google.com/File?id=ds4hm4h_192fk75tzgz_b

04.由于手机是手指触摸屏和输入法设计界面的问题，导致在输入“确认号码”时焦点不方便选中。像这类有 input框的交互页面，触摸屏手机有这类输入法界面是比较多的，将页面设计的稍长一些，页面底部留个100像素的空白，这类问题就基本可以解决。

http://docs.google.com/File?id=ds4hm4h_195hmxn56z4_b

05.选择“在线付款”

http://docs.google.com/File?id=ds4hm4h_196dtfvnznq_b

06.等待...

http://docs.google.com/File?id=ds4hm4h_197dzzvm8d9_b

07.进入支付宝，选择支付方式，看到熟悉的“卡通付款”，进入"卡通付款"

http://docs.google.com/File?id=ds4hm4h_199fgncsjdk_b

08."您好，！" 没有我的名字，应该是BUG！但接下来“选择卡通”这一步，既然只有一个银行选项为什么不直接默选中呢，让我多一步操作！输入支付密码，点击“确定”......页面载入时...嗯!...看到最下面一行的“wappaygw-1-2”是什么意思呢？

http://docs.google.com/File?id=ds4hm4h_201dg2hg9g6_b

09.显示了一个莫名其妙的提示，我只按了一次“确定”按钮哦。就算出错啦，也应该给我一个返回上一步的操作按钮或者建议我使用“短信支付”的提示按钮。现在，要不让我退出？要不让我去支付宝首页？

http://docs.google.com/File?id=ds4hm4h_202w465bkdp_b

10.好吧我再试试，回到刚才的选择支付步骤，选择“短信支付”

http://docs.google.com/File?id=ds4hm4h_207rfbrvffj_b

11.秒速收了一条短信,回复130

http://docs.google.com/File?id=ds4hm4h_205f8dkdm79_b

12.支付成功！

http://docs.google.com/File?id=ds4hm4h_2068946qcf9_b

13.追加。在我充完话费后，中国移不动和充值商家没任何回复，那我这钱到底是充了没有呢？！！！

手机：MEIZU M8
浏览器：UC浏览器V7.0
输入法：A4
[完]]]> <![CDATA[32年了！中国3：0韩国]]> ]]> Wed, 10 Feb 2010 20:24:01 +0800 跳回到专业来，都是一个中国队赢韩国的比赛新闻，有觉的什么不同吗？光一个标题就能看出谁更专业一些，但不适合入门球迷明白。

http://www.08show.com/blog/uploads/201002/10_202437_32.png

http://www.08show.com/blog/uploads/201002/10_202441_32.png

http://www.08show.com/blog/uploads/201002/10_202445_qq32.png

http://www.08show.com/blog/uploads/201002/10_202452_32.png

]]> <![CDATA[提高网站公信度的10点准则]]> ]]> Sun, 24 Jan 2010 15:53:53 +0800 原文： http://credibility.stanford.edu/guidelines/index.html

1.方便核实信息的准确性。如提供第三方的链接来认证信息来源。如下图

http://www.08show.com/blog/uploads/201001/24_155003_fireshotcapture068__news_sina_com_cn_c_20100122_171119526333_shtml.png

2. 网站有一个真实且有实力的合作对象或支持平台。如提供一个合作对象的网站链接地址，并且在合作对象的网站上也能方便的找到对你们网站的相互认证信息。其它还有提供你们公司的真实照片及合作对象的照片。如阿里巴巴的旗下站最底部。如下图

http://www.08show.com/blog/uploads/201001/24_154945_fireshotcapture067www_net_cnwww_net_cn.png

3.突出您的组织、网站内容、提供的服务的专业性。团队中是否有专家？提供服务的对象并提供服务该对象的证明。网站所属公司的背景。别提供外部链接，这样会有很多不确定的因素发生而降低网站的可信度。

4.网站有高素质的运营团队在支持。网站和运营团队背后有真实可靠的人才并提供人才的照片和简介。如现在很多网站都有UED的博客

5.方便用户联系到您们。清楚的提供您们的联系信息，如：电话号码，公司地址，电子邮件。如下图，网站的底部一般都可以找到联系方式。

http://www.08show.com/blog/uploads/201001/24_155022_fireshotcapture069www_glass_cn.png

6.网站设计要专业 (适当的迎合商业目标)。我们发现用户会快速的主观评估网站的视觉设计。在设计网站时要注意布局、版式、图片等风格的一致性。视觉设计应符合网站的目的。

7.网站易用性和有用性。根据研究，网站赢的用户信任主要就是网站的易用性和有用性。但现在很多网站运营者只是为了满足个人喜好或者展示一些技术能力去设计网站，他们忘了真正的网站使用者。

8.保持网站内容的更新。那些经常有内容和评论更新的网站，更容易得到用户对网站的公信度。

9.适当的安排网站的广告内容。尽量避免使用广告。如使用广告，明确区别这是广告内容。避免弹出式广告。广告文案明确，直接，真诚的，相关的（个人另加的一点）。

10. 无论多小的错，避免出现。大多数用户认为文章排版的错误（细节到如错别字，文字排序），失效的链接是最影响网站公信度。在您平时运营网站的时这些问题同样需要注意。

以上内容个人理解翻译，如有值得商榷的地方，希望完善！[完]]]> <![CDATA[《Web信息架构》-搜索系统]]> ]]> Thu, 19 Nov 2009 02:22:21 +0800

[网站需要搜索功能吗？]

1.网站内容量多。
2.研究搜索系统时，忽略导航系统，分轻重。（当然也些网站是以搜索系统以为主导）。
3.花时间做搜索结果的优化。
4.如果你没有做搜索系统的技术、人才资源.....
5.你的用户可能宁愿浏览也不要搜索，也有时用户需要搜索功能的优先级较低。
6.考虑预算，成本。
7.搜索让用户和制作者了解现在网站上目前只有哪些内容。
8.通过搜索日志，分析数据、搜集数据（用户实际想得到什么，如何表达需求）。
9.固定搜索功能在网站上的位置，比较导航栏边上，这些可能用户会有搜索需求的地方。
10.梳理网站动态性更新。保持网站的分类和即时性结果。比如今天在博客里写了一篇[关注2010世界杯]的文章，明天朋友来访问博客时，搜索“足球”，文章[关注2010世界杯]就会出来。

[搜索系统详解]

重点是研究影响搜索系统效果的因素。影响搜索系统的效果的因素涉及：搜索数据的配置方式、搜索界面、结果排序、反复查询、高级查询、整个搜索系统与用户的交互过程。

[搜索不是一种IT玩意]

与涉及设计搜索系统的各部门人员沟通，团队合作。

[选择要搜索什么]

哪些内容应该做索引以供搜索？

建立搜索区域，内容的同质性：在特定的情境中用户想搜索最新足球新闻，不要加杂篮球新闻在其中。
让什么可以搜索：每一个文件和记录都有某种结构，这些结构会储存在内容组件中：就是内容的元素，通常比文件本身小。结构中某些东西可以被搜索引擎使用，如作者姓名；而某些可以被忽略掉，如每页底端的法律声明。
网站中“好”(推荐)的内容：这个概念类似于TaoBao中搜索"apple"时，商城的信息会列信息列表的最上面。

[决定搜索区域]

当用户搜索某一搜索区域时，他通过表明只对特定信息感兴趣，理想情况下网站中的搜索区域对应用户的特定需求，得到更好的搜索效果。

网站本身性质及内容的分类来做区域的搜索条件，比如DELL网站按选择用户类型，搜索相关电脑产品的主题（找驱动，找维修点等）。这样搜索页面是以新的，有目的方式重新组织页面，提供用户以不同的搜索界面，说白了就是我们平时看到的网站[高级搜索]。

搜索区域的分类方法：内容种类、用户、主题、地理位置、年表法、作者、部门(这些分类方法都是死的，不同的网站还是要根据不同的需求去分类，比如taobao搜索中还会分促销宝贝，爱心宝贝，全球购，货到付款。(如图1)

图1

[对什么内容做索引]

就是选择哪些内容被搜索到并在搜索的结果中显示出来。
1.文章主体(最好是和关键字相关的部分文字内容)。
2.标题。
3.URL。
4.网站名称。（特定的情境中，比如Google中搜索时）
5.链接。(也有可能是文字链接)
6.图像链接。
7.图像的替代文字。
8.说明。
9.关键词。
10.远程锚文本。
附其中几点也符合网页对搜索引擎的优化。

[搜索算法]

模式匹配算法：查全率和查准率
查全率＝搜索出来的相关文件（集合中的所有文件）
查准率＝检索出来的相关文件（集合中的相关文件）
看这节的内容还是看Google黑板报[科学与技术],[中文网站管理员博客]来的实用,深刻。

[查询辅助工具]

增加查询效果的工具，通常用户看不见这些工具（说白了就是一些提供搜索帮助的技巧的功能，比如你在taobao搜索，由于字打的快输入了“诺鸡亚”，搜索结果首先会显示“诺鸡亚”结果为0，但会提供一个更正并提示你找的是不是“诺基亚”，并列出“诺基亚”的相关内容，可惜现在还不会，都只是些不相干的提示）(如图2)

图2

拼写检查工具：用户拼错术语时，自动样正搜索术语，把正确的结果搜索出来。
语音工具：通过发音，同时搜索发音相同的字、词、单词。
词干搜索工具：搜索含有相同词义的术语。(就是词义联想)
自然语言处理工具：检查语法的本质，你是想“下载”文件，还是“浏览”文件，窄化搜索结果。
爱控词表和叙词表：第9单细述：啥眼-_-!
以上功适而用之。

[展示结果]

显示哪些内容组件，以及如何分类，如何列。

显示哪些内容组件

对那些已经知道自己要找什么的用户而言，就显示代表性的内容组件，协助用户区分搜索结果，如用户搜索“《Web信息架构》”，搜索结果应该是相对于狭隘；对那些不确定自己找什么的用户，可以从描述性的内容组件，对搜索结果产生一种联想，如用户搜索“送礼”，搜索结果应该广义很多。
在搜索结果显示的内容相同时，应用多显示一点相关信息作再作区分，如用户搜索“《Web信息架构》”，搜索结果中还会附加此书在不同店的不同价格。(如图3)
图3
组织好每一个文件中有哪些内容可用以及内容怎么用，帮助直接得到搜索结果，如用户搜索“杭州外婆家”，结果有会有电话号码和地址。(如图4)

图4
显示的内容没多少组件，则加强搜索术语的搜索结果中的视觉重心，如用户搜索的关键字总是在搜索结果页中变粗，变红，总之变的醒目。

要显示多少文件？
控制每条搜索结果的内容，给出总的搜索结果数量，数量多的话设计导航，排序方式等交互功能

[列出结果]

排序(sorting)各排名(ranking)

按字母排序：图书类
按年有排序：即使新闻类（从新到旧）。还有一种是历史(从旧到新)
按相关性排名：

搜索出的文件中含多少个查询字符串中的术语？
术语在文件中出现的频率。
术语出现的位置。例如，相邻？同句？同段？
术语出现在何处，出现在的标题比出现在正文中相关性要高。
查询术语出现所在文件的受欢迎程度（PR值）。

不同的相关性排名对不同的搜索目如何更有意义？文件A可能比文件B排名高，但B相关性高，为什么？因为B是引用参考文件，具有真正的相关性，而文件A只是一份很长的文件，碰巧有很多查询字符串中的术语。所以同类文件的异质性越高，就是更要小心使用相关排名？还提到[人工处理结果]，[给结果打分]这些相关性排名方法。
根据受欢迎程度排名：网站PR值，指向页面A的链接越多，越说明页面A越有价值。比如网上有两篇同名同内容的文章A和文章B，有100张页面指向文章A，有10页面指向文章B，那文章A会显示的比文章B靠前。
当然提供指向链接的这张页面本身的PR值也很重要，比如有100张页面指向文章A，也有100页面指向文章B，这时文章AT 和文章B的前后显示顺序就要考虑这些张页面本身PR值了。是的，这种做法不适合小型网站！
用户或专家排名：通过用户的评价或者专家的分析决定排名。比如口碑上找“川菜”，这种通过用户评价规划搜索出来的结果很具有参考性，当然这些评价中也可能会有托。
按订单付费排名：以前b干这事，G也干，不过G干的比较厚道。

[分组结果]

主题类型群组去分组结果，为结果提供情境，选择最感兴趣的目录，就能缩小浏览范围。(如图5)

图5

[导出结果]

打印：一种保存的概念，这个好像有点超出讨论搜索系统的范围，感觉话题用[网页快照]形式更好。
寄送：这个感觉又是讨论购物车，收藏类的概念。
储存结果：有些情况下，用户想保留搜索本身，而不是结果。这个是类似google alerts,rss的概念。有些用户可能不会用这些功能，他们只保存了搜索结果的URL链接：如用户收藏了某个链接，用户在下次通过收藏夹访问这个链接内容有所更新。

[设计搜索界面]

影响搜索界面的外在不确定性因素：
使用通俗的查询语言。
用户搜索时提供的关键字越少对他们来说越方便，但搜索结果他们不希望打折。
高级搜索的一些功能，可以内嵌到搜索引擎里面。如Google对用户想要什么种类的结果（通过相关性算法）以及他们希望结果怎么展示（使用受欢迎程度算法），做了很多假设。

[搜索框]

用户在看到搜索界面时，会联想他的功能及使用方式，尽量让网站的搜索方式跟着大众化的搜索方式走。比如一般网站搜索都支持同时输入两个关键词这样的搜索条件（两个关键字之间加空隔）(如图6)，用户当然也希望在其它网站搜索时，也可以用这种方式搜索。
图6
当用户第一次使用你网站的搜索，在看到搜索结果的界面时，是提示和帮助用户如何继续纠错及进一步操作的好时机。比如在WJS搜索图6的内容，你会发现(如图7)图7
别把搜索框和其它的INPUT框放在一起，保持独立性和统一性。
节省空间，在你需要为搜索类型分类的情况下，可以使用下拉列作为一种搜索条件(如图8)

图8

试着去研究了解用户会在搜索前对搜索的一些想法，可以让你在设计简单的搜索界面时设定一些默认值。

[高级搜索]

高级搜索有总比没有好。把搜索引擎各种高难度的搜索功能放到高级搜索页面，让那一小部分用户在需要时仍能使用。但是，设计搜索界面的目标是让多数搜索者无需要访问高级搜索页面(做成看上去比较复杂的界面)。

[支持修改功能]

在结果页中重复搜索：在搜索结果页出来后，搜索框中显示最初的搜索字符串，让用户可以修改，而不是重新输入。
说明结果来自何处：让人搞清楚搜索出来的内容是什么，来自哪些分类，然后决定扩展或者窄化搜索？(如图9)

图9
说明用户做了什么：让用户了解情况。在搜索结果中体现出刚才搜索时所设置的内容，并提供可修改的的功能。如(图10)

图10

在使用高级搜索时所设置的一些特殊内容，再看(图11)，用户可以对应并修改刚才所选择过的内容，并且提供更多的选择窄化结果，并得出精确的结果。

图11

整合搜索与浏览：搜索时会检索出目录和文件，浏览时会导致搜索框被设定为该区域。用户选择一本书，相应的搜索分类就进入“图书”的类。(如图12)

图12

[用户被绊住时]

当结果太多或者结果为0时怎么办？
结果太多：可以让用户通过更深入的需求去精确要求、排序内容，从而筛选并按要求显示。如(图13)红色区块部分

图13

结果为零：“无尽头”的策略解决这种问题，除了第2条前半句比较靠谱，其它感觉比较“无厘头”

修改搜索。
提供搜索技巧(如图7)或其他其它改进搜索的建议。
浏览的工具(包含网站的导航系统和网站地图)。
搜索和浏览无法动作，就提供联系方式。(完)

]]> <![CDATA[《Web信息架构》-导航系统]]> ]]> Sun, 15 Nov 2009 01:47:49 +0800 导航系统的分类：全站、区域、情境式、辅助性导航。

浏览器的导航特点

考虑浏览器环境，其实浏览器上已经有后退、前进、收藏、设为首页等功能，但有时候在页面本身的浏览情境当中也最好要放这些功能，比如在浏览一篇文章，到了结尾能看到[收藏]、[关闭]、[返回]等功能可以方便不少用户看完后其它意图的操作。还有就是区分有无链接的文字样式，区分是否浏览过文字的样式（这些其实是编写CSS样式范围内的）。

建立情境

最典型的例子用户随便从Google搜索到一张网页，当点击进入页面后，就算是进入了一个情境中。情境中应该告诉用户这是在哪里？（我在什么位置，这是什么网站），这里有什么（页内标题），用户下一步能做什么（能看，能下载，能购买），还能去哪里（栏目，本栏页内导航），以上几点类似于《Don't make me think》中内页的6点基本要素：1.站点ID、2.页面名称、3.栏目下一级栏目、4.页面导航、5.“你在这里”指示器、6.搜索。

改善灵活性

网站中各栏目之间的内容可能保持垂直的排列方式，但用户在访问内容时要考虑Ta们可以会随时跳转到其它栏目的二级、三级页面中，保持横向和纵向的导航，注意不要导航辅助功能的设置。提供增加的情境和灵活性，弥补等级式系统的不足之处。

全站导航系统

全站导航系统就是要在网站上的每一页都会展示的导航系统，可直接连向重要的区域和功能，无论用户在哪个层次中。全站导航保持一致性，以密集且重复来访的用户为中心，进行设计和测试。

值得一提：具有情境式的全局导航系统，这类导航不仅告诉你这里有什么内容，还告诉用户正在哪块内容中。（图1）

图1

区域导航系统

当用户进行某个栏目中后，可能该栏目还会分很多小栏目，把这些小栏目列出来，方便用户可以立刻浏览那些内容，有些网站会把全站导航和区域导航整合成一致且统一的系统，如下拉菜单。和全站导航一样，在同一个站点中他们的表现形式最好一致且统一的。

情境式导航

进入目的页面后，会有一些内容指向特定的网页、文件、对象。比如网站上的“相关文章”，“喜欢这个商品的用户也会喜欢”，“同类TOP10”，要注意[情境式全局导航系统]主要是说明所处的位置，[情境式导航]是说明在这张页面内容的情境下，有什么相关内容可以告诉并提供链接给用户（称外部情境式导航链接，玩概念：）。比如你在Joyo买《精通CSS》这本书，在介绍这本书的页面中，总会有一些链接是指向与CSS类的其它书籍。还有一种是在文章叙述的文字中放链接（称内联情境式导航链接，玩概念：）。

实践嵌入式导航

认识到全站、区域和情境区导航元素都在大多数网页上同时共存，如何在网站中整合好。不过这个问题可能涉及到：网站栏目多少、页面结构复杂度、实现一些效果的JS程序、交互过程相关这些。

辅助性导航系统

包括网站地图、索引、指南。确保大型网站可用性和可寻性的关键。
网站地图：1.强化信息层次，使得用户熟悉对内容的组织方式。2.对了解网站用途的用户，则便利其快速、直接访问内容。3.避免让用户承担太多信息，协助用户。网站地图强化层次感，探索感。网站地图有一个很实在的好处,当你在搜索引擎中找到某个网站，它可以直接把你带到相关的栏目中。（图2）

图2
网站索引：就是将网站的内容以关键词、词汇、标签按一定顺序(字母，笔划)排列而成。内容之间可以没有等级关系。方便已知条目的寻找，比如歌星中找“曾轶可"，只要有找首字首拼音“Z”就可以。
对小型网站可以利用你对内容了解的知识来决定要引入哪些链接，来创建索引。
对大型网站首先用户从索引中选择术语，再从以该术语为索引的文件清单中选出想要的。

指南:网站的新手指南。设计指南原则1.指南要短。2.无论何时，用户都能离开指南。3.允许用户在指南中，前进，后退的自由移动。4.指南的设计目的是回答问题的。5.截图应该明确，具有把重点功能放大的效果。6.如果指南有好几页，要目录。

向导和配置器：主要是协助用户选择配置产品细节（图3）

图3

高级导航方法

个性化和定制化：个性化(猜测用户想要什么。在特定环境中会运行的很好，但在用户体验时，就会失败)就是针对个人的行为、需求、喜好提供剪裁后的网页给用户。如网上买书时，会有“推荐同类书籍”，可能有些推荐的书你已经买过并看过了。定制化(用户告诉我们想要什么。但有时候用户自己都不知道他们要需要什么)是给用户直接控制权，可以针对展现格式、导航和内容选项的组合做调整。如Google　Reader。

可视化：让用户可能采用可视化的方式浏览GROXIS。(在网上浏览博物馆网站时就像逛现实生活中的博物馆一样身临其境的感觉，想了想谷歌音乐的[挑歌]栏目可能比较类似这种概念)

社会化导航：用户上网的需求点、兴趣点可以从观察其它用户行为中推论出来的基础上。比如说一些人上论坛，微博时就是看最近有什么网络话题，关注一些热门的标签，标题；而这类标签，话题主要是通过搜索日志、使用量统计数据、顾客数据库等站长统计软件中获得。（其实这也是情境式导航，只不过作者用这类导航的产生方式来归纳：这类导航的内容是通过用户的行为统计产生的，就成了[社会化导航]了）（完）]]> <![CDATA[《Web信息架构》-标签系统]]> ]]> Fri, 13 Nov 2009 01:26:34 +0800

http://www.08show.com/blog/uploads/200911/13_013511_fireshotcapture016www_sina_com_cn.png

图1(典型的标签)

这个例子可能会觉的这类标签比较简单，容易理解，但要为一些相对专业性的网站做这类标签就抓狂了，比如：金融，医药，教育，政府（如图２）。

http://www.08show.com/blog/uploads/200911/13_013517_fireshotcapture017www_hangzhou_gov_cn.png

图2(看到这类标签，能想到哪些内容会在相应的标签中呢？)

标签的分类

情景式链接：简单说指定的类中放相关的内容。比如看到挂着[化学品]三个字的仓库，没进仓库前就可能联想到三聚氰酸、苏丹红这类。反过来，如果先进仓库看到三聚氰酸、苏丹红，等走出仓库却看到 [食品仓库]时，一定会让人费解。再比如一个论坛的[股票]栏目和一个财经网站的[股票]栏目，在这两个不同情景下（前一种讨论股票后一种观察股票），一个标签的概念就会更让人容易理解。

标题：比如文章的题目、新闻列表的编号、项目符号(CSS中list-style-type)、图片，这类标签还能区分内容的结构层次。比如注册时的第一步，第二步；读文章时的第一节，第二节。

导航系统的标签：这个比较常见，就是网站栏目名，关键要分类好相应栏目所包括的内容和取好这个栏目的名字，尽量用一些互联网上常见的匹配，比如[公司新闻]就公司新闻，别写什么[大事记]，[搜索]就搜索，别写[寻找]，别玩概念。如果一定要玩概念，书中还介绍了范围批注的一种方法，就是花时间介绍网站各个[栏目名]的意思，不过现在大多网站通过[网站地图]更清楚的分清栏目的所包括的内容。

索引术语：将网站中的内容纯粹通过一个个标签的形式组织并列出来，方便有目的用户找到相关标签或让没目的用户看到推荐标签，比如（图3），不过还有一种意义是通过设计好的标签，方便搜索引擎寻找，说白了就如同在GOOGLE搜索关键字的作用(keywords)。

http://www.08show.com/blog/uploads/200911/13_013521_fireshotcapture018flickrwww_flickr_com_explore.png

图3（这就是书中例子的变种）

图标型：通过图形来说明文字表达的内容，这类用法在专业性强的网站上比较受用，所在的情景范围越小就越能突出图形所代表的文字内容。比如你在旅游网站上看到飞机类的图标会想到什么？在一个门户网站上看到飞机类的图标又会想到什么呢？

设计标签

尽量窄化范围：这是通过减少网站所涉及的范围，整理网站栏目概念，甚至减少网站内容。

开发一致的标签系统，而非标签：比如网站首页的栏目和内页的栏目包括命名和顺序都应该是一致的。

一致性会受到很多因素的影响：风格（标点符号，大小写）、版面形式（内容页的文章有一致的风格）、语法（口气一致）、粒度（代表特定内涵）、理解度（帮助用户想到网站能提供的给Ta内容）、用户（为不同的用户独立设计标签系统，即使这些系统说的都是同样的东西）

标签系统的来源

你的网站：做网站时的资料，比如公司要把那些资料，内容放到网上去，按资料属性分分类，按资料格式分分类，按资料作用也分分类，还有，标签＝目的地的标题＝目的地网页的TITLE。

找同行竞争对手：向QPAI学习做BE TO SEE

受控词表及叙词表：这概念就是些专业的人给一些特定领域制定了一些精确的表达方式，并且词汇通常是公开的，而且被广泛使用。比如有“沙发”，“可爱多”，“生男生女都一样”这类也算吧

创建新标签系统

内容分析：分析文章有代表性的内容，现在QQ空间和蓝色在你写完文章的时间，都会提取这类分析标签。

内容作者：让作者或者文章相关的研究人员来定义标签，然后专人来统计分析标签。

用户代言人及主题专家：找用户代表，或者和用户有直接接触的部门、专家，从用户的角度发言。收集资料找出他们认为用户会想在些网站上找到什么。从一小群用户开始，就可以产生足以为网站做索引的标签。我们对用户（外行）有点了解，所以可以做出能适合他们的术语（例如：“种菜”替换“寂寞”）与了解用户需求的人一起工作。

直接来自用户：开放式卡分类：可以为现有内容按主题分成各自的类别，然后，再为这些类别命名标签。

封闭式卡片分类：是根据现有的类别区分主题，然后再将内容排序到这些类别。对封闭卡片分类面言，一开始要询问用户，说明他们认为类别标签所代表的意义，然后和你自己的定义互相比较。

自由列表：选出关键重要的项目或畅销产品，让新用户或者使用者对项目或产品瞬间想出一些字眼予以描述。排列分析字眼，寻找模式和使用频率。

间接来自用户：搜索日志分析：获取用户实际使用的标签信息，通过哪些关键字搜索来本页中。
标签分析：如图（3）

调整和微调
设计的标签系统必须时常调整和改进。标签代表用户和内容之间的关系，这种关系时常变动。进行用户测试，定期分析搜索日志。(完)]]> <![CDATA[《Web信息架构》-组织系统]]> ]]> Tue, 10 Nov 2009 17:41:49 +0800 组织系统＝组织体系+组织结构

组织体系＝说白了就是具体到研究单个页面内容的排列方法如何更合理性、可用性，操作性。
页面内容涉及包括：网站首页、分页、列表、表单、搜索结果页面等页面中各元素之间的布局。

组织结构＝说白了就是研究网站每个页面之间的逻辑关系，主要体现在交互功能上。
逻辑关系涉及包括：网站地图、交互过程、数据库结构、标签分类。

组织体系
精确性：按年月，地理，字母等地球人有通用标准的名词。
模糊性：每个人对每件事都有自己的认识和表达，如何做好这类用户的整合，通过分主题类(概念)、任务(目的)、用户(需求)、隐喻(联想)、混用(前面几个适而用之)。

组织结构
等级式：自上而下的做法，简单的说让公司来做网站地图，引导用户使用网站。
数据库模式：自下而上的做法，简单的说让大多数用户的习惯或者说问题所产生的数据，再通过这些数据来引导和解决用户进行使用浏览网站。

以上仅个人认识，欢迎交流：）(完)]]>