Technically Well-designed Webpage?

昨天在Twitter上抱怨了下南方周末网页上的文字Copy功能被改写的问题,之后看到了似乎是网站开发者或者相关人士的一些推(这个这个,还有这个),作为同一个城市里的同行,我认为有必要更进一步说明一下这个问题,也算是为这个我比较喜欢的网站的一点微薄贡献。

首先说明引起我注意的问题,因为Twitter的字数限制,我没法把问题讲的特别清楚,这里可以补上:

1. 有问题的页面:南方周末网站几乎所有文章页面,例如这个
2. 我的主要工作环境:Mac OS X 10.6,Safari 4.0.5浏览器(加最新的WebKit内核);
3. 我的测试环境:Mac下加测Chromium最新开发版本,Firefox 3.6.3;另在Windows XP和Windows 7下测试最新版本的IE 8、IE 9、Firefox和Chromium。

首先看看我的主工作环境下的情况,我录了一段视频,以便手边没有Mac电脑的朋友参考,点击下图在线观看

或者直接下载全屏大小的视频文件(1440*900,约5MB)。

p.s. 从视频中可以看到南周在我的Top Sites中占了很前面的位置,是我经常去瞄一眼的网站,所以不是我有意挑刺儿 XD

这个页面的问题是:

1. 选中文字,Copy的缺省快捷键(Cmd+C)被禁用,按该快捷键无任何效果。
2. 选中文字并在选中块上点右键,缺省右键菜单的行为被覆写,改为显示自定义的菜单。
3. 使用该自定义菜单中的“复制”功能,无法正常复制选中的文字,只能得到一个空行和“【南方周末】本文网址:[网页URL]”。

然后我用同样基于WebKit的Chromium测试(我猜开发者应该是基于Windows下的Chrome或者Chromium开发这一功能的),这次结果较好:

1. Copy的快捷键仍然禁用,右键菜单仍然被覆写,但是。。。
2. 使用自定义菜单中的“复制”功能,可以复制选中的文字,后面加换行和“【南方周末】本文网址:[网页URL]”字样。

我猜这个效果应该是开发者的本意。

再测试Mac下的Firefox,发现这个浏览器下所有功能都是缺省的,没有被改写或者禁用。

因为南周网站页面上的所有脚本都经过压缩混淆,所以无法轻易的分析其实现方式。

Windows下各浏览器的表现与Mac下类似:Firefox仍然是干净的;Chrome/Chromium与Mac版本表现相同;IE下无论Ctrl-C快捷键还是缺省菜单都工作,但是Copy到剪贴板的内容都会在选中文字之后加上“【南方周末】本文网址:[网页URL]”字样。

说实话,我可以理解保持自己内容的版权信息的愿望和努力,所以对于设计者的初衷我们就不评论了,这里我只想由此出发,从纯技术视角来说说我对于“设计良好的网站”的看法——仅是一家之言,南周网站的设计和开发者大可大度一点(说实话,南周的页面布局和内容都是相当好的,没啥可说的)。

我心目中(技术上)专业的、设计良好的网站应该具备的最重要特征就是,以用户为中心,高度关注用户体验的设计,包括这样一些特征:

高度结构化

内容、功能区域划分合理,易于重排、组合和个性化。这不仅可以方便用户优化自身的使用体验,还可以帮助开发者更快的进行布局优化、开发跨不同设备的专用显示版本。

跨浏览器兼容

现在主流的浏览器主要是包括:IE系(IE 7/8/9/)、Gecko系(Mozilla、Firefox以及其它变种)、WebKit系(Safari、Chrome/Chromium)、Opera。由于相关规范和Web开发框架的不断发展,目前要实现相当好的跨浏览器兼容性并不是太难,就看是不是看重这个事情。这说白了是对待细分客户群的态度问题,没有对错,只看投资者的观念和态度。

尊重缺省行为

浏览器的缺省行为(快捷键、鼠标操作和手势、Back/Forward历史管理等)代表了用户在90%以上时间里习惯的事情,网站改变这些缺省行为不仅不尊重用户而且会带来用户体验上的下降,降低用户持续访问网站的欲望。目前互联网信息高度饱和,各种信息获取渠道高度发达,除了内容,用户体验是吸引用户的最重要手段,不可轻视。

顺便说一句,个人认为“在当前窗口打开链接”也是一种缺省行为,现代浏览器都提供了标准的“在新Tab打开链接”、“在新窗口打开链接”的快捷方式,并不需要网站自作主张。

兼顾多种浏览设备

最近三网融合炒的挺热,我个人不太看好智能家电在近期的发展,但是移动互联网已经是最近几年最热门、发展最快的领域,我很高兴的看到广州的一批媒体都走的很前:南周是最早拥抱iPhone等新一代智能手持设备的主流媒体之一,而网易也是最早针对不同手持设备提供多种定制浏览界面的主流门户(这方面新浪落后多了)。

如果在页面的组织上实现了良好的结构化,要实现针对特定设备优化的浏览体验并不难,只要抽掉功能区域,针对特定显示设备重新设计就好。而一旦做到了,会大大增加网站的可浏览时间(毕竟大部分人坐在电脑前的时间有限,而揣着手机出门坐车这类无聊时间不少)。

面向信息重组

这里说的重组包括分享(Share)、聚合(Aggregate)和混搭(Mashup)。现代互联网的信息发布,正在逐步走向细分,信息的原始创造、信息的重组(以便面向个性化的信息消费人群)、信息的评论(通过用户实现信息的自我再创造)等环节会变的越来越专门化,每个媒体都要想清楚自己的核心价值和定位,选择最有价值的方式来强化之。无论怎样,设计良好的网站应该支持自己的信息消费上下游更容易利用自己提供的信息产品,所以应该有API或者RSS一类的内容摘要索引,来方便这种上下游的协同,从而更好的延展自己的市场价值。

说回南周页面的这个小毛病,我觉得有几个值得考虑的问题:

1. 我相信这不是为了防盗版防拷贝,因为根本起不到这个作用,真要盗版盗链岂会被一个快捷键或者右键菜单阻止。
2. 最要命的一点是:针对所有WebKit内核的浏览器禁用了拷贝的缺省快捷键,这无论是个by-design的“特性”还是个bug,都希望能尽快修复。
3. 在拷贝的内容后加上版权和链接信息,这个属于“有时有用”的设计,比如选一段文字拷贝,然后发去微博,这个设计好像还不错;但我仍然不认为用这个取代浏览器的缺省行为是个好主意,这个功能属于页面,不属于作为页面容器的浏览器,跨界的操作总是会带来很多问题的。试试在页面上增加一个分享工具栏?应该会更友好(这个其实也很常见了,EverNote、Twitter等都有这类实现)。

5 Comments

  1. Samson

    我现在用Chrome的5.0.375,Mac OS 10.5.6,复制功能正常,不知是不是开发人员据你的idea修复了?估计是出于版权考虑,还是有很多野蛮人直接复制粘贴不问出处,然后,正规的媒体转载时直接转了抄人家的那个出处,我follow了twitter上@1yon,一网站编辑,他称屡屡遇到此问题,可能南都因此弄了个菜单。

    另想问一下,如果Safari换了Chrome的Webkit,浏览效果就会和Chrome一样吗?

  2. Neo

    To Samson:

    第一个问题,截止到目前为止,这个问题的状态和我正文中描述的相比还没有任何变化。

    第二个问题,理论上是的。我就是用Safari+WebKit nightly build,仅看WebKit版本比Chromium用的还新,不过差别不大(当然JS引擎是不同的)。

Leave a Reply

Your email address will not be published. Required fields are marked *