导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« UCDChina书友会第四期(11.18)南京站红绿灯倒数器的人性化思考 »

当标题不能显示完整的时候

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

今天刚看到ChinaUI.com新改版的网站,觉得优艾网是越来越漂亮了,这次的变化的确是挺大的。一早大概的看了一下就关了,后来晚上又打开看时发现个问题。也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的。我想很多网站都遇到这样的情况。为了视觉效果不得不进行截字显示以满足网站的整体视觉效果。通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量。另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截。

在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着。这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后台已经完成,所以输出的内容是残缺的。而第二种是通过CSS或是JS做出的一种障眼法。把一定长度以外的内容隐藏掉。以达到需要的视觉效果,好处就是他可以保留完整的数据内容,不足之处可能是非IE浏览器截的字并不完美。比如Firefox常常会有截半个字的尴尬现象。

我想提出的问题是:"标题的不完整是否会影响用户的点击动机?"我斗胆提出这样的论断:标题的不完整将在很大层度上影响用户是否会点击该条信息的动机。我们这里就用优艾网中的一条新闻标题来作分析。网站中有这样一条新闻标题"美国发明用户界面新技术 对着吹",这是一句被机械性截掉的标题。面对这样的标题我们的好奇心是否被勾引起来,当然有可能。但是我们的理解可能是这样的:"美国发明了用户界面的新技术,对着吹……这是个打假新闻。可能是两家公司在吹牛。"如果是这样那么这种八卦的新闻我就没兴趣了。然而这个完整的标题应该是:"美国发明用户界面新技术 对着吹气就能操作计算机"对于这样的标题我就比较有兴趣,我想知道这个吹气为什么就能操作计算机呢,这是我从来没想到过的事。这样我就会有极大的兴趣去点击查看这条新闻。我们可以比较发现,其实最容易勾起我们好奇心的其实是"吹气操作"。这是新技术的核心。也是这个新闻的核心内容。

当然有时候截字是必需的,否则整个网站就会显得很杂乱。那么现在一般的解决方法就是在链接上加入"title"属性。遇到这种语义不清楚的标题时我通常是鼠标悬停查看提示区中的文字以获得比较完整的标题信息。从而完成我是否点击该新闻的判断。但是可惜的是优艾网标题链接中的title属性与标题内容是一样的,如此一来title属性的意义大减。

我们在设计的时候当然是尽可能的把标题显示完整,如果因为特需原因没办法显示完整的时候要尽可能的使title属性是完整的。还有虽然CSS的截字在Firefox中是有缺陷的,但是我还是觉得截字的事应该由CSS来完成。至少这样我们可以得到一个完整的HTML信息文档。当无CSS的时候至少我们同样可以看得到完整的信息内容。

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 1.愆伏
  • http://taozhe.net/log/
  • 说的有道理,标题被截掉确实会影响点击。我们不妨换个角度来看看截字的问题
    1、为什么标题要这么长?使人一目了然的标题应该都不会太长
    2、为什么给标题留下的空间是那么小,非要用截字来处理?
    这说明什么呢,说明了平时咱们看东西眼界得宽点,不能光盯着表现层面看。呵呵
    如果眼界窄,那标题就得截窄了
    站在岸上的鱼 于 2007-11-20 13:13:26 回复
    我不同意一楼兄台的观点:
    1、中国的汉字虽然博大精深,但未必所有的标题都能用很短的一句话来概括;
    2、给标题留的空间是由设计的版面来决定的,没有多少站会做成一列占一个整屏的。
    3、眼界的宽窄不能通过标题的长短来衡量,我们更应学会的是通过针孔看世界。
  • 2007-11-20 13:13:26 回复该留言
  • quote 3.振之
  • http://www.andymao.com/
  • 曾记得陈贤安(Realazy)写过一个JS用来精确截字。做得非常之好,如果有兴趣研究这些可以去安安的博客上去查找一下!
  • 2007-11-20 23:33:44 回复该留言
  • quote 5.振之
  • http://www.andymao.com/
  • 截取很简单,只是把多出宽度以外的内容隐藏掉。配合宽度使用 overflow:hidden;

    还有是截掉字数后面后面加个省略号,以提示内空是被截掉的。
    -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
    不过这个Firefox不支持,Opera与IE都是支持的!
  • 2007-11-21 12:57:50 回复该留言
  • quote 6.清风
  • http://www.kisswind.com/kwblog
  • 学习了,我认为题目还是尽可能简短,语意明了即可,如果说了一半没说完,又不像自然的悬疑,那访客会感到无趣,呵呵,还请多多交流
  • 2007-11-21 17:48:17 回复该留言
  • quote 7.vsky
  • http://www.v-sky.com/blog
  • 在客户端截字虽然能够保证网站的完整信息流,但绝大多数用户是不会主动来浏览裸奔的页面的,这里讨论的这个可用性意义似乎不大。要么你就放弃FF的用户,用CSS截字,(JS做这种工作始终是个消耗),要么就服务端截,完整信息用title来表述
  • 2007-11-27 8:36:13 回复该留言
  • quote 9.葫芦居士
  • http://www.gourdboy.com
  • 我认为门户网站都是设立两个标题字段,一个标题是专门用于首页显示的,而新闻内页的完整标题则在另外一个字段。也就是添加新闻的时候要设置两个标题内容,一个短的,一个长的,而不是靠程序自己来截断
    cash 于 2008-1-4 13:40:50 回复
    可我现在只看到一个E-Dragon CMS有这种设置。
  • 2008-1-4 13:40:50 回复该留言
  • quote 10.iu99
  • http://www.zdser.com/xiaoqiang
  • 标题的不完整确实会影响点击。
    要不然你看网易的标题,都是经过编辑精心加工的。还加个副标题。尤其以新闻频道最突出了。不过都是些走低俗路线的伎俩。
  • 2007-12-2 1:55:09 回复该留言
  • quote 11.纯真
  • 当说到这个问题时,延伸至另一个问题,就是当标题被截取时,需不需要用"..."来表示还有更多的内容?
    我曾经在我们的团队中讨论过这个问题:
    我的观点:
    1.觉得"..."不需要,如果当一个标题限制30个字符的话,那"..."就占了三个字符,而这时当标题是28个字符的时候就也出现了相应的"...",所以就觉得不好。
    2.当标题全部都很长的时候,我看到后面的都是三点,这样会比文字对齐更美观吗?
    3.比较赞同本文所说的给标题加上tilte属性
  • 2007-12-4 11:19:17 回复该留言
  • quote 13.一个好想法
  • 看到本文忽然有了个想法,我也很支持用CSS来截字用TITLE显示更详细的,但是如果能在HOVER状态加横向滚动出详细内容岂不更好?
  • 2008-1-11 15:13:34 回复该留言
  • quote 16.sunny
  • http://www.sunnnny.com
  • 我觉得可行,鼠标悬停的时候再开始横向滚动~~此时用户关注的是此条信息,而不是整个页面。
    sunny 于 2008-5-14 17:18:02 回复
    晕,怎么回复突然都弄到上面去啦?
  • 2008-5-14 17:16:54 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Jonmax.com. All Rights Reserved.

Search

最新评论及回复

最近发表

资助者链接