Wordpress themes are available for download at wordpress-related website.

IT & 旅游风光 mmpower on 10 Sep 2007 11:49 am

【BBS社区】2. 浅谈海归网与web 2.0(下)-- 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 系列帖子:



5 Responses to “【BBS社区】2. 浅谈海归网与web 2.0(下)-- web 2.0 界面设计的元素”

  1. on 10 Sep 2007 at 3:26 pm 1.或是 said …

    标题:恩恩~我赞同!!!~好的内容要有好的形式来衬托~内外协调才是王道~

    归网给我的感觉就是深度已经足够了,就是装潢还跟不上~和我一样哈~ :x

  2. on 11 Sep 2007 at 2:07 am 2.mmpower said …

    标题:个人认为目前中文网站页面设计好的较少

    说几个我觉得还不错的:

    我比较喜欢豆瓣网的设计,无论从页面还是从使用来说。内容更是一流。

    抓虾也还不错。

    老牌网站里清韵书院的美工很好,但不好用,也太慢。

    海外网站里,文学城的“我的文学城”部分不错--注意我指的是 http://my.wenxuecity.com/,而不是传统的文学城页面。

    顺便乱评一下其他几个海外中文网站:

    文学城主站:字大易读;广告太多。

    未名空间MIT BBS: 易用性、内容还可以,界面风格不太统一。交友网站设计不错。

    “北美华人\": 各种东西拼起来的大杂烩,页面风格不统一,乱。

    万维网: 美工不错;

    西西河有不少web 2.0的元素,有不少有特色的设计易于浏览,但问题是页面组织和导航比较乱,并且隔两天界面和功能就大变样让人摸不着头脑。

  3. on 11 Sep 2007 at 6:40 am 3.jjcai said …

    标题:哈哈,这么多2.0

    LZ分析得有道理。
    但是需要考虑web2.0的目标客户群多为年轻人,尤其是美国动漫、游戏成长的一代。并不一定适应其他的国家和人群。(Orkut在北美和巴西的区别就是一例)。

    归网的目标客户可能要进行demography分析吧。

    今天人这么少,是不是大家在纪念啊?

  4. on 11 Sep 2007 at 11:04 am 4.i WinD said …

    标题:我也喜欢豆瓣的视觉感,但是应用在这边要如何用?

  5. on 11 Sep 2007 at 12:27 pm 5.mmpower said …

    标题:我们并不去模仿豆瓣或其他网站。。。这里说的是设计原则

Trackback This Post | Subscribe to the comments through RSS Feed

Leave a Reply

校验码:  

Buy movie . Why buy movies at the store while you can download complete movies at our home? You can pay with your credit card. Lowest prices over the Internet.

21 queries in 0.141 seconds.© 2004-2008.   海归博客. RSS Comments RSS