当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 合理的设计title的可用性

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 合理的设计title的可用性


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 73 ::
收藏到网摘: n/a

最早大家都没有给链接加title的习惯,后来因为w3c标准普及,又集体加上了title。从一个极端走到另个极端,于是出现很多怪异现象。两方面,第一a标签内title不是必须使用,第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签。

抛开标签语义、搜索引擎友好等因素,在纯用户角度找几个场景来分析。

列表内容被截断后通过title显示完整,此时如果没有被截的链接,也会被再显示出来。试想本来已经看清楚的信息,触发又提示一遍,传达是不是感觉很婆妈。如果没有截的链接控制不输出title,效果或许合理很多。或者title在此时根本就不应该?印象中英文好站似乎很少做列表截取。

BXNA蓝色经典title图示

最典型类似对icon图示的辅助说明,可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作,如果图形传达到位,完全可以使用icon代替,更多交互场景请参考臭鱼在06年完成文字还是图标的总结。

Yahoo首页选项色块title图示
Delicious条目选项title图示

在导航系统的各条目中,title主要作用是做补充说明。同时也对应可访问性原则中,要求导航传达清晰简洁的建议。用户感兴趣后操作触发,再title提示更多详细,强调信息引导而不是推送。

CNN导航title图示
YUI导航title图示

还有种做目地指引之用的案例,明确告知用户这个链接做什么?到哪里?在某些容易引起误会,或者不是很清晰的地方效果比较好。另外title不在a标签内也有广泛应用,典型如表单。可以为用户提供更精准、得体的操作指引,并且我想一定程度上可以代替明文提示。

wordpress标题、分类title图示
Google Reader搜索title图示
Ticker雅虎title图示

学以致用,顺手给评论模板加了条语句。上次改的时候本想写出来,又感觉多余,现在好多了。准备动手评论的用户,自然会看到,并且这么土的语句也没有兼容性问题。

WP评论title图示

相应的不良应用不再图示举例,互联网上不胜枚举,深入分析语义和用法不仅能纠正错误、开拓思路,而且能贯通很多理论上的困惑。总结起来,title并不像seo从业者鼓吹的那么简单,在用户角度除避免与文字、图形重复传达,主要有三类用途:

  1. 描述非文本内容
  2. 补充说明文本内容
  3. 操作指引

前文主要纠正title用法上的几点误区,其实除链接和表单的常规标签用法。在内容组织方面还有大潜力待发掘,比如写网志经常会有针对词、短语说明的需求,最常见的做法是用括号,或者高级点用title来写。

其实这样也不彻底解决问题,在title做“补充说明文本内容”作用时,用括号的场景可能有解释、简写缩写、前后补充等等,这些人际功能产生的内容模糊机器不懂。如何区分并准确转化为机器语言?在讲究语义化的HTML标准里,有更恰当的标签来做这些工作。

简写缩写说明

HTML4.01中分别有<abbr>与<acronym>两个标签来表示缩写,区别在于<acronym>是英文首字母缩写,<abbr>是名称缩写。应用分别如下:
<acronym title="Portable Document Format">PDF</acronym>
<abbr title="Minimum">Min</abbr>

但在HTML5.0与XHTML2.0中,<acronym>变成不赞成使用的标签,而推荐<abbr>代替。因为<acronym>容易与<abbr>混淆,它们用法之间是互相包含的关系,很多英文名称缩写其实就是首字母缩写,比如CSS的全称是Cascading Style Sheets。“千鸟,是一叶千鸟的简称。”这句话如果用代码来阐述:
<abbr title="一叶千鸟">千鸟</abbr>

专业术语说明

针对不同知识领域读者时,有时会大量用到专业术语或特殊短语,但不属于简写、缩写范畴。这时可以使用HTML提供的<dfn>标签,比如:
<dfn title="Mozilla公司推出的网页浏览器">Firefox</dfn>
<dfn title="Microsoft web browser">Internet Explorer</dfn>

W3C不建议大量使用,当首次出现新术语时,应定义样式与普通文本分开,促进读者理解,而从那以后也不需要再对此术语进行标记了。道理类似不要重复在一篇内容内,做多个同样链接。

按照这个思路,我觉得HTML应该提供个叫做<translate>的标签,用以针对翻译词汇的说明。尤其在专业技术领域,外来词汇特别多。比如,要解释UCD的全称(User-Center Design)可以用<abbr>,但中文翻译(以用户为中心的设计)呢?老用括号太不专业了。