BMTD 's Yard of Fun

Technology, Sports, Music, Chinese Essays

Browsing Posts tagged web 2.0

谈谈 web 2.0 网站页面设计的共性,以及海龟网可借鉴改进的地方。

当然,现在海龟网的最大问题还不在于界面,而是稳定性/鲁棒性、速度、性能可扩展性(scalability)等,以及一些最迫切的功能的实现。所以龟网技术力量目前的重点不在于此。

Web 2.0 界面设计共性

强调内容,强调互动的web 2.0 时代,网页设计师们不约而同采取了一些设计原则。。。通观现在典型的web 2.0网站,可以总结出web 2.0网站页面设计的共有特性如下:

(1) 简单即是美。

这是一个重要原则。

页面不靠花里胡哨的图形而是靠内容吸引人。复杂的界面设计逐渐回归于简单, 让访客专注于网站内容而不是被网站的界面分散了注意力

应该让人感觉网站不错很牛B,而不是让人感觉网站的设计师很牛B。

(2) 页面布局:

----越来越多的网站采用1-2 列 (1-column or 2-column) 的设计, 决不能超过3列。

而在一两年前,3-4 column的网站还大行其道--这世界变化真快哈

--- 页面居中排版 (center aligned)

页面内容居于中间,而不是靠左、右;

页面宽度固定, 而不是占满整个浏览器。

大家想想,你觉得界面不错的网站是不是大多数这样子?

--- 有足够的空白来分隔不同区域

在这之前的web design, 比较讲究”第一屏“的重要性,也就是不用滚动或翻页就能提供给用户尽量多的信息,这也是为什么许多网站在小小的地方密密麻麻地堆砌了一大堆的东西—这样的布局容易让用户觉得疲惫,眼花缭乱头晕眼花。。。

今天由于滚动轮鼠标的普及,上下滚动对于大多数用户来说已经非常方便不再是浏览的障碍,因此越来越多的网站敢于使用简单的布局而让内容从上往下走.

(3) 大的字体

使用较大的字体,让浏览者的眼睛舒服。

使用比一般内容大很多的字体来显示需要突出注意的内容。

(4) 鲜艳而有强烈对比的色彩

明亮强烈的色彩是许多web 2.0网站的另一个共性。。。用对比强烈的色彩来分隔不同区域,或者突出重要的内容。

蓝色、橙色等被大量使用,但最为代表性的是一种柠檬绿--号称web 2.0的代表色。

当然颜色不能到处滥用。。。例如,背景色一般需要柔软中性的色彩。

这里是一个别人总结的 web 2.0配色表:

http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette

(5) 巨大而醒目的LOGO

这是一些例子:

关于logo使用的字体,更多使用平滑、圆润的字体,例如VAG Rounded (AKA Rundschrift),Helvetica Rounded, Arial Rounded, Bryant, FF Cocon等。

(6) 经常使用渐变色 (Gradiants)

(7) 大量使用圆角 (rounded corner)
例子:

(8) 偶尔使用3D效果

(9) 网站上使用一些可爱的图标 (icon)而不用现成的照片 (stock photo),尤其是那些千篇一律的素材照片, 容易给人小公司试图mimic大公司的印象。

web 2.0 图标的例子:

Cute icon from Patrickhaney.com

Cute icon from Patrickhaney.com
Cute icon from Iconbuffet.com

设计上的大忌

一般来说,需要避免

(1) 闪烁的图形, 例如动画GIF文件。一闪一闪的实在是很烦人--当然很多在线广告靠这个吸引眼球,但有个度的问题。

(2)100%纯flash的网站

最主要的问题是SEO。其次还有兼容性的问题。

(3)不使用 CSS的网站

(4)看得见的表格线

关于海龟网的页面风格

海龟网没有专职或者专业的页面设计、美术人员,在美工方面比较业余,尤其在海龟论坛方面,为了照顾习惯于旧版asp论坛的老用户而尽量保持与老论坛相同的风格。但由于与老论坛结构的不同,同时大量新功能的增加使得现在的论坛界面比较杂乱,风格也不统一,视觉上也不美观。

我们认为,上述web 2.0的界面风格,尤其在简单、易阅读、大字等符合海龟网一贯的设计思路,因此我们会针对这些现有的问题,吸取上述思路的精华结合海龟网的现状进行改进。。。不管是web 几点0 也好,总之希望会在不久后有个简单快捷易用而又大方美观的海龟网。

当然,现在海龟网的最大问题还不在于界面,而是稳定性/鲁棒性、速度、性能可扩展性(scalability)等,以及一些最迫切的功能的实现。所以龟网技术力量目前的重点不在于此。

参见在下其他海龟网/BBS/web 2.0 系列帖子:

海龟网 与web 2.0

海归论坛设计的主导思想是内容和用户的便利始终在最重要的位置,虽然由于资源的限制目前还有许多不尽人意的地方,例如界面不整齐美观,一些功能使用不太方便或者不直观等等,但是这些都是一直在努力完善的。在这不断
改进的过程中也借鉴吸收不少web 2.0的思想和相关功能, 但决不是赶时髦为了web 2.0而web 2.0, 而是为了为用户提供更好的服务。

除了现在已有的功能,我们计划的改进(所谓”改版第二阶段“,)中下列的跟web 2.0 相关:

— 提高用户参与程度

理想情况是 everything is editable by users, end users are able to control the data they created;

好处在于:

大家对论坛/网站管理有更大参与,对内容更有决定权;
网站管理人员的负担可以减轻。
网站管理更加民主,减少由于网友与网站管理人员个人口味不同导致的纠纷,以及潜在错误。

具体来说,我们的计划(有些已经在做, 有些还只是计划)包括:

(1)由用户评分选精华和糟粕

除了现有斑竹推荐的导读之外,超过预定积分值的用户也可以对帖子进行评分(1-5, 或者简单地送鲜花还是臭鸡蛋)。一个帖子有超过预定数目的不同网友进行评分,并且分数达到精华值则自动被标记为用户推荐精华,并且在首页显示。反之,若帖子得分低于垃圾铁上限,则被自动送入公开的垃圾版。

这与Digg的做法有点类似。无痕也提过这方面的建议。

(2) 擂台区

这个是固若GinTonic大虾的建议,我们觉得很好;做法与用户评分类似,只是目的稍微不一样:用户评选将发生口舌战斗的帖子送进擂台区。

详细可见贴:

http://www.haiguinet.com/bbs/viewtopic.php?p=975868

(3) 文章分类

现在的论坛是自上而下的”专题"(taxonomy); 但是问题是许多文章不一定属于我们预定义的专题。一个自然的想法是借鉴folksonomy,由用户输入
帖子相关的关键词。但是单纯由作者标记的关键词表也有问题,一是不一定准确, 二是同一个意思有太多同义词造成关键词太多; 一个办法
是类似”Collabulary“的办法,即关键词由多个用户产生--除了文章作者,其他有权限的用户也可以标记帖子的关键词。

这跟wiki有点类似:一个作者可能解释某个词语不够准确,但是与其他作者的合力作用下总的来说趋于权威的答案。

-- 社会网络功能

BBS本身就是一种社会软件。除了在网上就感兴趣的话题进行公开讨论交流,提供进行social networking的平台也是另一个海归网将提供的服务.

这种社交活动可以是商业目的(拓展人际关系和社会网络),或者一般交友,甚至纯粹婚姻目的的男女交友。

海归网的用户与一些其他网上社区一个重要的不一样的地方是:许多网友之间的交流不仅仅是在网上,而且在实际生活中也是好友或商业伙伴. 这其中不少人的结识正是通过海归网的桥梁作用.

这说明海归网初步具有作为交友平台的功能, 而我们将强化这一点,提供一个类似linkedIn的半封闭的海龟俱乐部服务. 但是这并不是要取代公开的海归网社区,而是海归网社区的一个延伸.

海归俱乐部与一般SNS网站不同之处在于网上网下虚实结合: 与各地的海归社区组织(例如京沪等地的吃吃喝喝俱乐部等,甚至新成立挂名海归网的连锁俱乐部/酒吧/分舵) 的成员和活动有机结合. 具体如何实行有待进一步的讨论决定和计划.

-- 用户界面的改进

一句话,尽量在保证功能不缺的情况下使界面更简洁,用户的操作更加方便快捷。如果必要,将会应用更多AJAX技术, 提升用户体验和加快浏览速度(已经用了一点ajax,例如论坛页上的用户profile popup).

另外界面许多地方需要改进,例如页面布局、大小和速度,上传图片界面,一些操作的简化,树形显示和表格形显示的改进等;

(1) 关于 web 2.0定义

web2.0 是最近一年来的Buzz word,可是什么是Web 2.0没有一个标准的定义;虽然网上最常见的是 Tim O’reilly的"what is Web 2.0",但确实有点众说纷纭。

从这些五花八门的定义归纳一下, 流行的关于web 2.0的特性有:

-- 用户有更多的交互和参与;
-- 内容的产生和发表更多地依靠草根网民而不是网站的专职内容编辑人员;或者说网上内容的产生更加分散,更加民主。
-- 网站的推动和发展力量是依靠独特的有价值的数据和内容
-- web 作为一个计算平台, 基本在浏览器上可以完成一切任务(象传统的字处理,购物甚至网络游戏等等。。)
--web 1.0 静态页面居多, web 2.0 主要是动态产生的内容
-- 社会网络效应
-- 更好的用户体验
-- web 2.0 网站的流行不需要专门的推广宣传。

还有一个经常被与web 2.0相提并论的词是longtail现象。

从技术上来说,大部分公认的web 2.0网站应用一个或多项这些技术:

--programmable web, 通过web services等技术提供公开的API;
— 通过RSS等手段进行信息聚合
— Tagging (Folksonomy): 用于信息的分类--与传统自上而下的分类系统不同,folksnomy是由网民根据自己判断给内容加的分类标签。
--社会软件功能:要点在于信息的共享,社区,blog, social networking, social bookmark等。
-- Rich Ineternet Application: 利用Ajax等技术实现类似桌面应用程序的界面。
--页面: 格式严格well formed的 html 代码,例如 validated xhtml; 利用CSS控制外观。
— Mashups: 利用现有的其他网站(通过公开API)提供的服务, 利用这些数据创造出新的应用--例如许多把google map用于其他用途的网站。
--microformats :例如 XFN
— 用户自己可以控制和网站编辑内容

跟semantic web的关系: (以下这段话摘自 wikipedia)

Access to consumer generated content facilitated by Web 2.0 brings the web closer to Tim Berners-Lee’s original concept of the web as a democratic, personal, and DIY medium of communication.

我的理解来说主要是tagging和microformats的大量应用使web 2.0向着semantic web的方向迈进了一小步。

(2) 现在哪些站是公认web 2.0的

从上面归纳的这些看起来,web 2.0几乎包括了所有当前流行的网站技术,也就是说只要是现在热门的,”先进“或者任何新鲜的东东统统都算web 2.0:

--除了众所周知的flickr, del.icio.us, digg, tenorati, basecamp等等之外,这里有一个比较全的列表列出了许多国外被认为web 2.0的网站:

http://www.sacredcowdung.com/archives/2006/03/all_things_web.html

--至于国内web 2.0站列表, 可以看这个图片:

(3) WEB 2.0 = Web Embraces Bubble 2.0 ?

我们现在处于一个猛烈炒做web 2.0的时期:反正web 2.0的大瓶子啥都能装嘛。

新冒出来的网站一个个都标榜自己是web 2.0,要跟过时的web 1.0划清界限。旧网站加个blog也摇身一变成2.0了;BBS更简单,原来本来就是根正苗红的web 2.0嘛,自动就与时俱进地进入了2.0时代。总之大伙蜂拥而上,感觉只要沾上点web 2.0立马身价百倍。

现在只要用Ajax, 甚至只要用ruby on rails开发的新网站,就会被立即冠上web 2.0的帽子。

这跟当年的dot com bubble很类似,我个人认为其中bubble的成分很大--原因很简单:大多数的这些网站还是没有找到盈利模式, 最终会倒掉。但是从中间会有少数的成功者脱颖而出。就像dot com bubble后崛起的google以及生存并壮大的ebay,amazon一样。找到自己的business model是这些网站生存的关键问题。

回头有时间谈谈海龟网与web 2.0,对海龟网发展的看法,以及一些论坛改进的计划等.