【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 图标的例子:
设计上的大忌
一般来说,需要避免
(1) 闪烁的图形, 例如动画GIF文件。一闪一闪的实在是很烦人--当然很多在线广告靠这个吸引眼球,但有个度的问题。
(2)100%纯flash的网站
最主要的问题是SEO。其次还有兼容性的问题。
(3)不使用 CSS的网站
(4)看得见的表格线
关于海龟网的页面风格
海龟网没有专职或者专业的页面设计、美术人员,在美工方面比较业余,尤其在海龟论坛方面,为了照顾习惯于旧版asp论坛的老用户而尽量保持与老论坛相同的风格。但由于与老论坛结构的不同,同时大量新功能的增加使得现在的论坛界面比较杂乱,风格也不统一,视觉上也不美观。
我们认为,上述web 2.0的界面风格,尤其在简单、易阅读、大字等符合海龟网一贯的设计思路,因此我们会针对这些现有的问题,吸取上述思路的精华结合海龟网的现状进行改进。。。不管是web 几点0 也好,总之希望会在不久后有个简单快捷易用而又大方美观的海龟网。
当然,现在海龟网的最大问题还不在于界面,而是稳定性/鲁棒性、速度、性能可扩展性(scalability)等,以及一些最迫切的功能的实现。所以龟网技术力量目前的重点不在于此。
参见在下其他海龟网/BBS/web 2.0 系列帖子: