2006年11月04日

web设计95%是排版

看到这个题目,第一感觉是耸人听闻。不管是95%或是更多或是更少,排版确实是一个不可忽略的问题。在我所遇到的web设计师中,或许是遇到的还少,我没有发现谁真正在意web排版。看到这篇文章,感触颇深(因为我刚使用linux的时候需要配置字体,顺便学习了不少的字体知识,也顺便成了一个爱好),周日在家挺闲,为了提高英语水平,顺手翻译了出来。希望对大家有所启发。

这篇文章来自一个研究并提供信息架构的网站:Information Architects Japan,原文:Web design is 95% typography.

又及,文章多次出现typography这个单词。正规的中文翻译应该是“排印”,但考虑web这个非印刷媒体,使用排印并不见得好。于是我根据语境,有时用“排版”,有时用“排印”,请读者明鉴。以下是翻译正文。

web中的信息有95%是成文的语言。为何web设计师应该好好学习一下设计成文信息的主要准则,换句话说,排版?这就是最佳的理由。

信息设计就是排版

回到1969年,Emil Ruder, 一个瑞士著名的排印大师,其笔下关于当时的印刷氛围,简直就是我们今天网站的写照:

今天印刷术的泛滥成灾让我们的个人价值被轻视,因为郁闷的我们现在并不能掌控印刷中的一切。分割、组织和实现印刷术的一切是排印师应有的任务,只有这样,读者才有更好的机会找出吸引她/他的东西。

信息设计师是21世纪的排版师

稍微联想一下(请用在线排版取代印刷),这就像是信息设计师的职务描述。分割、组织和实现印刷术的一切是“信息设计师”应有的任务,只有这样,读者才有更好的机会找出吸引她/他的东西。宏观排版(所有的文本结构)跟微观排版(样式和空间的细节方面)包括我们今天称为“信息设计”的很多方面。也就是说,信息设计师今天正在做排印师30年前的工作:

排版面临一个很直白的职责,这就是传达信息。没有理由能免除排版的这一职责。一个并不能阅读的印刷品只能变成一个无用的产品。

优化排版就是优化阅读,亲和力,可用性(!),综合文本平衡等。组织文本块并结合图片,难道不是图形设计师、可用性专家、信息架构师应该做的吗?但为什么这是一个被忽视的主题呢?

为什么这是一个被忽视的主题?

字体太少?分辨率低?

主要原因——抱怨连天的——不看好在线排版准则的观点是,能用的字太少了。第二个观点是屏幕分辨率太低,让像素或者反锯齿字体之一很难阅读。

文艺复兴:只有一个字体

认为我们没有足够的字体可用的观点是不切题的:在意大利文艺复兴时期,排印师只有一个字体可用,但这个时期还是产生一些顶级漂亮的排版品:

SpecimenBook

该排印师应该没有太在意他手中手能掌握的字体种类,实际上也不应该太在意字体的选择。他应该更关心时代能赋予自己手中掌握的,并尽力发挥。

选择字样并不是排版

第二个观点也并不见得好到哪儿去。在印刷初期,印出来的字母质量比我们今天在显示器上看到的更差。更重要的是,如果处理得专业,屏幕字体更易于阅读。信息设计不是关于使用好的字样,而是关于使用好的排版。两者的区别很大。谁都可以使用字样,有人可以选择好的字样,但只有少数人能够精通排版。

把文本当作用户界面

对,不同平台和不同浏览器如何处理字体是恼人的,也对,分辨率问题很难让注意力集中坚持到五分钟。但是,好啦,确保文本在所有主要平台和浏览器中赏心悦目是web设计师的职责。正确的行间距,单词和字母间距,留白,一定量颜色的使用有助于可读性。但还不彻底。一个优秀的web设计师知道如何跟文本而不仅仅是内容打交道,“把文本当作用户界面”。瞧瞧Kohi Vinh的网站,你大概会明白他的意思:

koivinh

稍微著名把文本当作用户界面的unornamental网站例子有: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. 一个难以争辩的必然事实是,把文本当作用户界面是成功的唯一参数。成功的网站设法同时创建简单的界面和强烈的特征。但这是另外一个主题了。

从哪开始

web排版
为了“破除关于web排版的某些荒谬想法”,他已经“按照Bringhurst的工作原则来构建他的网站,并解答如何通过HTML和CSS中可用的技术来达成各项目标”。
优化排版的5个简单步骤
他所谈论的排版“并不是你典型的‘该用哪种字体’的排版”。对于相信让字号和行间距默认大小使得文本能够任意缩放会提高网站可用性的人,这是一个不错的阅读材料。
Khoi Vinh
behaviordesign的创始人之一。现为NYTimes.com的设计主管。非常天才的一个人。
Rod Graves
通讯设计师。令人赞叹的工作:“排版是我绝对的中心。排版网格和层次通常会成为我开发的视觉语言的基础。”
A List Apart
通过字样通讯。字体和布局。为读者设计。易读性。字样,图形设计。web排版的问题。控制web排版:字号、字体和颜色。CSS方法,浏览器问题,用户问题和解决方案。
Association Typographique Internationale
ATypl(Association Typographique Internationale) 是一个专注于样式和排版的主要国际组织。创建于1957年,ATypl为国际样式社区之间提供通讯的结构,信息和活动。
Thinking with Type
书籍Thinking with Type的在线伙伴:设计师,作家,编辑和学生的关键指南。
Typetester
比较屏幕字体样式。
Typophile
Typophile是一个会员制和赞助商支持的社区。2000年以来Typophile引领开放合作,并且我们总是能学习到好主意。我们他们伺服超过每月3百万的网页。
Typohile Wiki
一个有关样式和设计所有一切的用户创建百科全书。用户为建立协作,有用,平衡和相关的资源而创建和编辑条目。
The Next Big Thing in Online Type
比尔盖茨要计算机用户,哦,微软用户,能够拥有一个更舒畅的屏幕阅读体验——太重要以至于提高屏幕阅读成为他最重要的五件事之一。
Emil Ruder, Typographie (Amazon)
Emil Ruder’s Typography是一本永恒的书,几代排印师和图形设计师都从中学习基本原理。Ruder, 二十世纪最伟大的排印师之一,是一个抛弃并用新的规则取代Emil Ruder传统规则的先锋,来满足新排印技术的需求。
2006年10月13日

你有没有被客户强迫照搬英文网站的经历?
你有没有被领导指责为比较“土”的作品?
你有没有感到疑惑,因为你搬过来的“英文”网站总是那么别扭?

如果有的话,这篇文章也许能帮你提供一些证据,至少让你自己能明白,为什么不能照搬英文网站的设计规则。

首先我们找一个非常有名非常牛气的网站,对比一下它的英文和中文网站的区别。恕我无知,我第一个想到的就是MicroSoft了。

英文站http://www.microsoft.com/
中文站http://www.microsoft.com/china/

你觉得怎么样?两个站点采用了完全一样的界面和布局,但你是不是仍然觉得中文站要乱那么一点点?

好,我们抱着学术研究的严谨心态来看看,究竟是哪里不一样。

首先我们对比一下菜单。


点击放大

放大以后看,仍然是中文菜单比英文菜单要乱那么一点点。同时我们发现,在行数相同的情况下,中文菜单比英文菜单要长

放大以后看,仍然是中文菜单比英文菜单要乱那么一点点。同时我们发现,在行数相同的情况下,中文菜单比英文菜单要长。

再放大一点,加上辅助色块对比。


点击放大

看到吗?中文比英文要高(黄色VS灰色),但是行间距反而更小(红色VS黑色)。

这说明什么呢?完美的最高境界是“增一分嫌多,减一分嫌少”,适当的留白是保证整体视觉效果的重要因素。不要小看这“一点点”,正是这一点一点的空白,足以决定整个外观的成败。

接下来我要推出的观点,完全是本人在多年实践中总结出来的。关于中文字符和英文字符差异而导致的设计效果差异(希望能有机会对此进行深入研究。)

首先我们要宏观地来看一下,还是MicroSoft。

缩小一点,再缩小一点。然后我们把模糊的字符用色块覆盖。

哪个会让你觉得舒服一点?

对于菜单或列表这类的纵列排版方式,英文每个单词的长度不同,就自然而然地形成一种起伏,比如“Support”和“Knowledge Base”就相差了大约7个字符的长度。这种差值被排列成一串以后,整体便有了一种服从语言本能的节奏。我们都知道,节奏韵律是公认的审美准则之一,而天然形成的节奏更是完全契合人类心理期望的一种韵律。

而中文呢?它是方块字。每个汉字占的宽度是一样的,同时我们不知道是受什么影响(也许是成语?),常常习惯于用四个字来给菜单命名,出现著名的“4字词”现象。

MicroSoft中国这个情况还不是很严重,但仍然出现像“开发工具”、“商务管理”、“所有产品”这样的词。

随便翻一个网站,看看这个现象有多么普遍。


点击放大


点击放大

而这样的“无差异纵列”,很容易使本来就规整的方块字变成铁板一块

宏观看整体,微观看细节,如果你说访问者不会像我们这样后退N步,来研究文字韵律的话,我们现在再来看一下细节。

现在对比的是MicroSoft的另一个列表菜单。

我的研究方法很简单——用色块,这样比较有效地排除掉一些干扰因素。

我按照英文的阅读习惯(按词阅读),以及中文的阅读习惯(按字阅读),来放置我的宝贝色块。

如何?英文的韵律仍然存在,如同音乐的节拍一样,“嘀~嘀~~哒,嘀嘀~~哒”,前面说了,这是一种天然的、服从语言本能的节奏,因此你永远不会觉得别扭。而中文呢?

“哒!哒!哒!哒!哒!……”,它的韵律,就是刻板的、严谨的、永远不变的。

如果你没有意识到方块字的这种属性对于通过HTML来实现的设计来讲有多么重要,我们可以再看一个例子。

这次我选择新版的Yahoo EN和Yahoo韩国(为什么不选Yahoo中国?嗯……因为我写这个的时候它还没有改成新版),韩文、日文和中文都很相似,虽然不是严格的横平竖直的方块,但每个字仍然是具有固定比例的。(从这个程度上来讲,中文的情况会比韩、日文更加突出)


点击放大

通过这种对比,我们还发现一个新的规律——“自动回行”。可以看到,英文的自动回行是以单词为最小单位的,前面我们说过,每个单词的长度不尽相同,所以,自然的空白出现了,整个页面清透了;方块字的自动回行以字为最小单位,所以总会在同一个地方回行,空白几乎不可能出现(除非文字不足一行),整个页面被挤得满满当当,透不过气来。

我把这个图再缩小一点,这个现象就更加明显。

我认为这就是大多数中文网站给人“挤”的感觉的原因。

可以看出韩国设计师为了适应“一统天下”的界面,作了很多努力,对比下图。

韩版网站的用色更加鲜亮,阴影去掉了,沉重的黑边也去掉了。这些微小的改动,使图标在沉重的方块堆里更突出些。想想把英文站上的图标搬过来会怎么样?

好了,我们回过头来总结一下

1、中文的行间距太小;
2、中文缺乏一种起伏的节奏;
3、中文的自动回行有重大缺陷。

结论:中文一不小心就变成铁板一块

如何解决这个问题,设计师有的是办法,我就不一一赘述了,我这里想说的是:中文和英文由于语言属性根本上的差异,因此完全照搬英文站的设计是一种愚蠢的、教条的思路,尤其当这种设计方案需要用同一种计算机语言(XHTML+CSS)来实现的时候,细节的修改就显得更加重要。建议还是多参考亚洲同行的作品,前两年韩国和日本网站模板盛行,有它的道理,至少我很少看到他们用纯黑色——嗯,就说到这儿,不多不少刚刚好,完美!

2006年09月18日

一、 “长尾”的由来及含义:根据维基百科,长尾(The Long Tail)这一概念是由“连线”杂志主编Chris Anderson在2004年十月的“长尾” 一文中最早提出,用来描述诸如亚马逊和Netflix之类网站的商业和经济模式。“长尾”实际上是统计学中Power Laws和帕累托(Pareto)分布特征的一个口语化表达。

长尾

举例来说,我们常用的汉字实际上不多,但因出现频次高,所以这些为数不多的汉字占据了上图广大的红区;绝大部分的汉字难得一用,它们就属于那长长的黄尾。

Chris认为,只要存储和流通的渠道足够大,需求不旺或销量不佳的产品共同占据的市场份额就可以和那些数量不多的热卖品所占据的市场份额相匹敌甚至更大。

、“长尾”的定义:

“长尾”至今尚无正式定义,Chris Anderson 认为,最理想的长尾定义应解释“长尾理论”的三个关键组成部分:

  1. 热卖品向niches的转变
  2. 富足经济( the economics of abundance )
  3. 许许多多小市场聚合成一个大市场

目前最接近的定义是:

  • “长尾实现的是许许多多小市场的总和等于,如果不是大于,一些大市场”–Jason Foster
  • “长尾就是当籍籍无名的变成无处不在的时候你可以得到的”– Eric Akawie
  • “长尾就是80%的过去不值得一卖的东西”–Greg
  • “长尾讲述的是这样一个故事:以前被认为是边缘化的、地下的、独立(艺人?)的产品现在共同占据了一块市场份额,足以可与最畅销的热卖品匹敌” –Bob Baker

最佳口号

  • “涓涓细流,汇聚成河”—Joshua Wood
  • “终结二八定律!”—Eric Etheridge
  • “无物不销,无时不售!”—Jim Treacher
  • “一个小数乘以一个非常大的数字等于一个大数!”—Rajesh Jain

三、成功的“长尾”案例

1、 Google是一个最典型的“长尾”公司,其成长历程就是把广告商和出版商的“长尾”商业化的过程。

数以百万计的小企业和个人,此前他们从未打过广告,或从没大规模地打过广告。他们小得让广告商不屑,甚至连他们自己都不曾想过可以打广告。但Google的AdSense把广告这一门槛降下来了:广告不再高不可攀,它是自助的,价廉的,谁都可以做的;另一方面,对成千上万的Blog站点和小规模的商业网站来说,在自己的站点放上广告已成举手之劳。

Google目前有一半的生意来自这些小网站而不是搜索结果中放置的广告。数以百万计的中小企业代表了一个巨大的长尾广告市场。这条长尾能有多长,恐怕谁也无法预知。

2、亚马逊:

一个前亚马逊公司员工精辟地概述了公司的“长尾”本质:现在我们所卖的那些过去根本卖不动的书比我们现在所卖的那些过去可以卖得动的书多得多。

此外还有很多,诸如维基百科、Netflix等等。

四、长尾的启示:

1、对一些公司来说,长尾理论是对二八定律的颠覆。在全新的商业模式下,公司的利润不再依赖传统的20%的”优质客户”,而是许许多多原先被忽视的客户,他们数量庞大,足以让你挣得盆满钵满;从公司产品的角度分析,拳头产品主打市场的老套路将趋末路;

2、许多市场面临新的契机,长尾电视、长尾音乐、长尾设计……还有什么是拖着长尾的?很多,想想看?

3、一批博客、播客将从这“长尾”中受益。(中国情况特殊,不在此结论中)

4、长尾中将诞生许许多多的微中心,甚至不排除一些微中心成长成新的中心,如Google。

5、中心永远都会有,它们并不会因为微中心的崛起就被“去掉”。

附:中文博客关于长尾的介绍

见素的“从长尾巴理论(long tail theory) 看去中心化的可能”

毛军的“长尾巴市场(The Long Tail)”

国外专门介绍“长尾”的网站:The Long Tail

延伸阅读

2006年09月09日

我们早已知道,网站的质量在Google中起关键作用。高级Google工程师Matt Cutts在他的blog中多次提到,“优质”对于Google至关重要,无论是内容还是连接。

不过,创建内容和连接并不一定要经历痛苦的过程。网站搭建者们开始趋于从某些角度考虑如何组织内容。所以,让我们放开创新的思维,来想一想所有这些给网站添加优质内容的方法吧。

请先记住以下几点:

  • 你只是被你自己的想法和你的网站限制住了。尝试着往完全不同的方向探索一下。
  • 你的网站内容应该是写给你的顾客看,而不是给你。网站内容也不是写给搜索引擎的,它们不是你的目标群体。
  • 把你的网站想象成一幅完整的画,一个有生命的会呼吸的整体。它会持续成长,而不是停滞不前。

现在我们进入正题了:面向目标群体的优质内容。

1、事件日历。对于房地产网站,它可用于展示新开房屋信息;对于在线书店,可用于介绍新书签名会、作者见面会等;对于收藏类网站,可用于介绍最近的聚会活动等……确保访客能添加他们自己的事件到日历中去。

2、地图。考虑给房地产网站、捕猎/捕鱼网站、露营网站、酒店或者其他任何户外休闲网站建一个地图。在地图的底部添加内容来描述该地图并说明它的意图。

3、售前/售后经历。如果你的顾客能就你提供的产品或服务写一小段文字,或者探讨你的产品/服务带来的好处,就再好不过了。你可以把它们作为成功的证明放在网站上。

4、来自顾客的图片。你可以为已有顾客设立一个特别的地方,让他们能够在你的网站贴出自己的图片和日志等等。这个方法比较适合度假网站、休闲网站、婚姻网站、宝宝网站、摄影工作室等等。想一想,在Halloween网站该怎么做?花卉网站呢?

5、在线填色画。发挥你的想象力。如果你将一些度假物品做成填色画,孩子们就可以在旅程开始前给它们填完色然后 贴到他们在网上专有的版块。旅程结束后,他们的父母又可以贴上度假的图片和日志。这样,一个属于他们的度假纪念“网站”(其实完全是建立在你的网站上)就 成为了你这个度假网站的招牌。他们会怎么使用这个“网站”呢?他们会告诉朋友、爷爷奶奶、叔叔婶婶等等。他们会在其他地方给这个“网站”做连接。你可以把 这个招牌作为独特的核心卖点来跟对手竞争。你将会获得以往顾客过来的连接和未来顾客的浏览。你会赢得优势。如果网站可以作孩子们的文章,你可以想很多增添 填色画的方法,或者类似的针对孩子的创造性活动。

6、blog或论坛当然会给网站增添新内容。

7、令你的目标群体感兴趣的文章或者新页面。有规律的写出新内容——你的目标应该是每周1-2篇。

8、在站内主页展示专家问答。请个专家来回答问题,然后每周在主页贴出一问一答(或者每天都贴出,自由控制)。把站上以往的问答做个可搜索的归档。

9、产品评测。如果你的行业有产品或软件需要评测,可考虑写一些公正的评测文章。将文章发布到自己的网站和在线 刊物上。读者永远都会对完整的公正评测感兴趣,因为作者不失偏颇的列出产品的优点与弱点。如果你手头的是风景区业务,应该如何去“评测”呢?作为专家的你 将会使用什么产品呢?为什么?

10、小提示。如果你的产品或服务适合用小提示,就写一个系列并把它们发布到你的网站上。作为新闻信来发送。邀请使用你的产品的读者也来写小提示/技巧,如果他们提交过来,就给他们一些购买其他产品的优惠/折扣。

11、常见问题。常见问题(FAQ)是你的目标群体想要了解的内容。当你从读者那里收到提问,就在FAQ里面添加新的问答内容,使它保持更新。

12、使用手册/指引。人们喜欢看使用手册。如果你正在线销售抽水马桶部件,为何不写一份关于“如何在卫生间安 装抽水马桶”的指导手册呢?为你的顾客提供便利,客人就会源源不断。撰写一系列的使用手册。做一个网络上的“厕所超人”。听着这好像不够有魅力,不过如此 一来你就会被高度关注,并能将网站访问流量转化为销售,你会在互联网以外魅力十足。

13、能够解决实际问题的内容。人们为何访问互联网?为了寻找信息或者对比购物。如果你能为你的访客解决这些问 题,就帮他们达到了目的。举例说,你在卖东方的小毯子。你的潜在顾客可能正寻求点子如何装饰她的办公室。她的办公室很狭小,她想要增加点颜色。墙壁的大部 分都被窗子和金属书橱占据了。如果你创造出一系列内容/图片来展现你的东方小毯子能如何的解决她的问题,其中一个例子里提到长条形的东方地毯。这些内容不 但包含图片,还有文字描述各个问题并给出解决方案。你的潜在顾客自然能从搜索引擎里找到你的页面。

14、历史数据。这次假设你是销售钢管的。钢管的历史是怎样的?创建一个页面专门介绍一下它的历史吧。事实上, 你还应该创建关于以下内容的页面:钢管和铜管以及其他种类的金属管的比较;为何会生锈;钢的硬度如何;钢管的实际价值(钢管是如何在近乎每个建筑物中使用 的,等等);钢的寿命;等等等等,所有这些构成一个版块,将是整个网站非常有价值的组成。

注意,问题来了。这些内容对钢管公司的目标群体是否也有有价值?试想一个目标群:全美国的职业教育培训班。这对他们来说可是个有利资源。如果他们连接到这个网站,都是.edu的网站,是不是会给网站很高的连接欢迎度?想一想看。我们谈的是优质的内容和优质连接。

再举个一个历史数据的例子,圣西蒙岛上的一家旅店。这样一家旅店当然应该在它的网站上提供关于这个岛屿的历史和旅游信息等等。

一家销售Mustang软管部件的网站该如何运用这个策略?销售婚纱礼服的网站呢?

15、采访。制造内容的最简单手段。采访你所在行业内的一位专家。给他列出问题,让专家用自己的话回答。除了纠正拼写错误或者语法错误,不要删改专家的回答。与专家坦诚相待,并保持采访文章的完整性。写出一系列采访文章,并在你的网站主要页面上高亮表示出来。

16、季节性文章。你的行业是否也有“季节性”?如果有,季节性文章常常会很受欢迎。

17、统计。在你的网站上提供统计数据也是一种增加内容的方式。如果统计数据不是来自你自己,则往往会告诉你信息是从哪里来的。引用这些信息来源!金融或者资产抵押网站如何运用这个策略?

18、建议专栏。这可以用在约会网站,也可用在其他网站。SEO网站如何运用此战略?室内装潢网站或者整形手术网站呢?

19、每月冠军。假设你经营一个销售插花的网站。邀请你的顾客发送过来他们用你的花设计的花束的照片等等。把照片公布在网上。每个月选出一个优胜者,并把他的照片放在网站的显要页面。给优胜者颁发价值25美元的礼品作为获奖证书。

20、用花店的例子,制作一些关于如何插花的视频教程。确保观众照着教程做的时候所有的材料都可以在你的店里买到。

21、还是拿花店举例。邀请顾客提供一些心得,比如他们是如何制作插花的,用到了哪些材料,以及照片等等。把这些信息放到你的网站上。相关的材料就连接到你的在线商店。发挥创意。在你的行业里你该怎么做?如果你有一个戏装网站,该怎么做?艺术品网站呢?动动脑筋,把这个策略用到狩猎或者捕鱼网站。

22、每月送出一封新闻信,附上你想告诉顾客的那些信息。可以是来自顾客的小技巧、销售中的产品、假期计划、每月冠军等等。把过去的新闻信也贴在网站上,增加内容。

23、重要人物的传记。如果与你的行业相关,你就可以这么做。比如你经营一个关于美国内战历史的网站或者一个旧书店,这就非常有用。

24、新闻事件。因你的所在行业而异。

25、与社群相关的页面。如果这是个本地网站,比如,你可以在社群相关的页面或者blog上讨论本地的餐馆、棒球联盟、校园开幕式等等。

我们还只是列举出这些点子,开了个头。所有都要根据你的所在行业、你的产品或者服务而不同。你还需要集思广益。

结论:

创建内容时记住“优质”。上面这些点子应该可以帮你开始了。

然后也想想下面这些问题。如果你开始创建优质内容,接下来是什么?优质的连接。其他网站会开始连向你的内容,因为你做了你该做的:为你的顾客提供了他们所需。他们需要看到优质的、持续更新的信息。你成了可信赖的信息来源。

不要试图走“捷径”。成功来自辛勤的劳动。

2006年08月23日

符合web2.0条件而率先探索出赢利模式的应该是分类信息网了。

  分类信息网站目前已经很多了,像客齐集、赶集网等,另外像163、QQ等门户网站都有地区的分类信息,那么是不是就意味着新入者没有前途呢?当然不是!

  第一选择的城市规模要适中,避开锋芒。像北京、上海这类大城市网站推广起来比较麻烦,而且这类网站说不定早已存在,因此我们没有必要与其相争。选择的城市应以中等规模的市一级城市或较大规模的县、区。这样的城市规模适中,有一定的用户量,但又不是特别大,推广起来比较容易。

  其次选择中小规模的城市是因为像现有的全国性的分类信息网站还没有能力把这类城市的信息收集全和在本地区进行推广。

  第三信息的内容。信息一定要遵循一个实用的原因。要对本地区用户确实感兴趣的,对他们的生活确实有帮助的,同时主要用户群应是中、青年用户。

  第四具体的频道:像二手交易、房产交易、物流、招聘求职、交友等都是积聚人气不错的内容。像笔者所居住的是苏北一个小城市,本地一个网站上二手交易、物流、招聘求职的内容每天就有一两百条。

  其次就是本地区的商家信息。在网站推出前期,可以由专人将本地区按街道、功能等方式进行多重分类,免费收录到网站中。具体而言,例如你可以将解放路上的所有店铺、商家免费入驻,同时解放路上的某个餐饮店你用户也可以按照“餐饮”为关键字进行查询,总之是为了方便用户找到信息。先期的工作量稍有一些大,但城市不是特别大的做起来也不是特别难,并且在先期收录时可以只收录主要的店铺。收集的店铺可以是综合商场、专卖店、KTV、酒吧等。

  第五推广:在先期准备工作做好后,可以集中制作一批宣传单(画、册),在入驻的商家里进行免费横挂或发放,同时可以在主城区主要干道上进行分发(这在中小城市是可以的),另外也可以组织一些互动的活动来积聚人气。

  第六内容:这里的内容不是指初期的内容,而是指建站后的更新。有一定的知名度后,像二手、物流、招聘求职、交友这类信息用户会主动发布,其次像一些商场、较大的专店店等他们也一般都会有专人负责网上的宣传,可以让他们来免费发布。如果本地区的商场不能做到,那么则可以和其签订协议,免费帮助他们更新信息。

  同时根据城市的大小,可考虑有2-5名左右的信息员,让他们按区域每天排查,看所属区域内有没有最新的促销信息、打折信息、新品信息、活动信息等,有的立即发布,同时也要求入驻的商家有该类信息时主动联系发布。

  这样做到本地区这类与人们生活、休闲相关的内容基本上能够收录的比较全,那么你就可以赚钱的。例如发布信息收费、例如为大商场设立专区宣传收费等等,换一句话说,相当于你已经掌握了一个媒体,而这个媒体的运营成本是比较低的。当然,如果要做大,还有很多方式,例如承包本地区某份报纸的一个版面,将网站收录的信息在报纸上发布(当然是指收费信息)。

  注意:这类网站之所以能赚钱,是因为全国性的分类信息网站无法做到信息的本地化,抓住这个契机做个小富翁还是完全可以的。

  其实,虽然现在各类网站层出不穷,但是对于后来者、新来者来说只要找准定位,找准落脚点,找到赢利的模式,还是完全可以制作出有前景的网站。

转自中国圈分类信息网:http://www.ahachina.com/

2006年08月12日

创意设计手法

1.直接展示法

  这是一种最常见的运用十分广泛的表现手法。它将某产品或主题直接如实地展示在广告版面上,充分运用摄影或绘画等技巧的写实表现能力。细臻刻划和着力渲染产品的质感、形态和功能用途,将产品精美的质地引人入胜地呈现出来,给人以逼真的现实感,使消费者对所宣传的产品产生一种亲切感和信任感。
这种手法由于直接将产品推向消费者面前,所以要十分注意画面上产品的组合和展示角度,应着力突出产品的品牌和产品本身最容易打动人心的部位,运用色光和背景进行烘托,使产品置身于一个具有感染力的空间,这样才能增强广告画面的视觉冲击力。

2.突出特征法

  运用各种方式抓住和强调产品或主题本身与众不同的特征,并把它鲜明地表现出来,将这些特征置于广告画面的主要视觉部位或加以烘托处理,使观众在接触言辞画面的瞬间即很快感受到,对其产生注意和发生视觉兴趣,达到刺激购买欲望的促销目的。
在广告表现中,这些应着力加以突出和渲染的特征,一般由富于个性产品形象与众不同的特殊能力、厂商的企业标志和产品的商标等要素来决定。
突出特征的手法也是我们常见的运用得十分普遍的表现手法,是突出广告主题的重要手法之一,有着不可忽略的表现价值。

3.对比衬托法

  对比是一种趋向于对立冲突的艺术美中最突出的表现手法。它把作品中所描绘的事物的性质和特点放在鲜明的对照和直接对比中来表现,借彼显此,互比互衬,从对比所呈现的差别中,达到集中、简洁、曲折变化的表现。通过这种手法更鲜明地强调或提示产品的性能和特点,给消费者以深刻的视觉感受。
作为一种常见的行之有效的表现手法,可以说,一切艺术都受惠于对比表现手法。对比手法的运用,不仅使广告主题加强了表现力度,而且饱含情趣,扩大了广告作品的感染力。对比手法运用的成功,能使貌似平凡的画面处理隐含着丰富的意味,展示 了广告主题表现的不同层次和深度。

4.合理夸张法

  借助想象,对广告作品中所宣传的对象的品质或特性的某个方面进行相当明显的过份夸大,以加深或扩大这些特征的认识。文学家高尔基指出:“夸张是创作的基本原则。”通过这种手法能更鲜明地强调或揭示事物的实质,加强作品的艺术效果。
夸张是一般中求新奇变化,通过虚构把对象的特点和个性中美的方面进行夸大,赋予人们一种新奇与变化的情趣。
按其表现的特征,夸张可以分为形态夸张和神情夸张两种类型,前者为表象性的处理品,后者则为含蓄性的情态处理品。通过夸张手法的运用,为广告的艺术美注入了浓郁的感情色彩,使产品的特征性鲜明、突出、动人。

5.以小见大法

  在广告设计中对立体形象进行强调、取舍、浓缩,以独到的想象抓住一点或一个局部加以集中描写或延伸放大,以更充分地表达主题思想。这种艺术处理以一点观全面,以小见大,从不全到全的表现手法,给设计者带来了很大的灵活性和无限的表现力,同时为接受者提供了广阔的想象空间,获得生动的情趣和丰富的联想。
以小见大中的“小”,是广告画面描写的焦点和视觉兴趣中心,它既是广告创意的浓缩和生发,也是设计者匠心独具的安排,因面它已不是一般意义的“小”,而是小中寓大,以小胜大的高度提炼的产物,是简洁的刻意追求。 

6.运用联想法

  合乎审美规律的心理现象。在审美的过程中通过丰富的联想,能突破时空的界限,扩大艺术形象的容量,加深画面的意境。
通过联想,人们在审美对象上看到自己或与自己有关的经验,美感往往显得特别强烈,从而使审美对象与审美国微软公司者融合为一体,在产生联想过程中引发了美感共鸣,其感情的强度总是激烈的、丰富的。

7.富于幽默法

  幽默法是指广告作品中巧妙地再现喜剧性特征,抓住生活现象中局部性的东西,通过人们的性恪、外貌和举止的某些可笑的特征表现出来。 幽默的表现手法,往往运用饶有风趣的情节,巧妙的安排,把某种需要肯定的事物,无限延伸到漫画的程度,造成一种充满情趣,引人发笑而又耐人寻味的幽默意境。幽默的矛盾冲突可以达到出乎意料之外,又在情理之中的艺术效果,勾引起观赏者会心的微笑,以别具一格的方式,发挥艺术感染力的作用。

8.借用比喻法

  比喻法是指在设计过程中选择两个在本拷贝 各不相同,而在某些方面又有些相似性的事物,“以此物喻彼物”,比喻的事物与主题没有直接的关系,但是某一点上与主题的某些特征有相似之处,因而可以借题发挥,进行延伸转化,获得“婉转曲达”的艺术效果。 
与其它表现手法相比,比喻手法比较含蓄隐伏,有时难以一目了然,但一旦领会其意,便能给一以意味无尽的感受。

9.以情托物法

  艺术的感染力最有直接作用的是感情因素,审美就是主体与美的对象不断交流感情产生共鸣的过程。艺术有传达感情的特征,“感人心者,莫先于情”这句话已表明了感情因素在艺术创造中的作用,在表现手法上侧重选择具有感情倾向的内容,以美好的感情来烘托主题,真实而生动地反映这种审美感情就能获得以情动人,发挥艺术感染人的力量,这是现代广告设计的文学侧重和美的意境与情趣的追求。

10.悬念安排法

  在表现手法上故弄玄虚,布下疑阵,使人对广告画面乍看不解题意,造成一种猜疑和紧张的心理状态,在观众的心理上掀起层层波澜,产生夸张的效果,驱动消费者的好奇心和强烈举动,开启积极的思维联想,引起观众进一步探明广告题意之所在强烈愿望,然后通过广告标题或正文把广告的主题点明出来,使悬念得以解除,给人留下难忘的心理感受。
悬念手法有相当高的艺术价值,它首先能加深矛盾冲突,吸引观众的兴趣和注意力,造成一种强烈的感受,产生引人入胜的艺术效果。

11.选择偶像法

  在现实生活中,人们心里都有自己崇拜、仰慕或效仿的对象,而且有一种想尽可能地向他靠近的心理欲求,从而获得心理上的满足。这种手法正是针对人们的这种心理特点运用的,它抓住人们对名人偶像仰慕的心理,选择观众心目中崇拜的偶像,配合产品信息传达给观众。由于名人偶像有很强的心理感召力,故借助名人偶像的陪衬,可以大大提高产品的印象程度与销售地位,树立名牌的可信度,产生不可言喻的说服力,诱发消费者对广告中名人偶像所赞誉的产品的注意激发起购买欲望。偶像的选择可以是柔美风流的超级女明星,气质不凡举世闻名的男吸星;也可以是驰名世界体坛的男女高手,其它的还可以选择政界要人、社会名流、艺术大师、战场英雄、俊男美女等。偶像的选择要与广告的产品或劳务在品格上相吻合,不然会给人牵强附会之感,使人在心理上予以拒绝,这样就不能达到预期的目的。

12.谐趣模仿法

  这是一种创意的引喻手法,别有意味地采用以新换旧的借名方式,把世间一般大众所熟悉的名画等艺术品和社会名流等作为谐趣的图像,经过巧妙的整形履行,使名画名人产生谐趣感,给消费者一种崭新奇特的视觉印象和轻松愉快的趣味性,以其异常、神秘感提高广告的诉耱效果,增加产品身价和注目度。
这种表现手法将广告的说服力,寓于一种近乎漫画化的诙谐情趣中,使人赞叹,令您发笑,让您过目不忘,留下饶有奇趣的回味。

13.神奇迷幻法

  运用畸形的夸张,以无限丰富的想象构织出神话与童话般的画面,在一种奇幻的情景中再现现实,造成与现实生活的某种距离,这种充满浓郁浪漫主义,写意多于写实的表现手法,以突然出现的神奇的视觉感受,很富于感染力,给人一种特殊的美感受,可满足人们喜好奇异多变的审美情趣的要求。 在这种表现手法中艺术想象很重要,它是人类智力发达的一个标志,干什么事情都需要想象,艺术尤其这样。可以毫不夸张地说,想象就艺术的生命。 从创意构想开始直到设计结束,想象都在活跃地进行。想象的突出特征,是它的创造性,创造性的想象是新的意蕴的挖掘开始,是新的意象的浮现展示。它的基本趋向是对联想所唤起的经验进行改造,最终构成带有审美者独特创造的新形象,产生强烈打坳人心的力量。

14.连续系列法

画面,形成一个完整的视觉印象,使通过画面和文字传达的广告信息十分清晰、突出、有力。
广告画面本身有生动的直观形象,多次反复的不断积累,能加深消费者对产品或劳务的印象,获得好的宣传效果,对扩大销售,树立名牌,刺激购买欲增强竞争力有很大的作用。对于作为设计策略的前提,确立企业形象更有不可忽略的重要作用。
作为设计构成的基础,形式心理的把握是十分重要的,从视觉心理来说,人们厌 弃单调划一的形式,追求多样变化,连续系列的表现手法符合“寓多样于统一之中”这一形式美的基本法则,使人们于“同”中见“异”,于统一中求变化,形成既多样又统一,既对比又和谐的艺术效果,加强了艺术感染力。

搭配的艺术–谈主页用色

要想做出一幅漂亮的主页可不是一件容易的事,除了熟练运用各种网页制作工具和编程语言之外,美术的知识也不能不懂,下面让我们来学习一点有关主页制作中色彩搭配的知识。

色彩的含义

色彩本身是无任何含义的,有的只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理,左右人的情绪,所以就有人给各种色彩都加上特定的含义:

红色:强有力、喜庆的色彩,很容易使人有兴奋感觉,是一种雄壮的精神体现。

黄色:亮度最高的色,给人感觉就是很有温暖感,灿烂辉煌!试试加入淡红色或淡紫色! 

绿色:美丽、优雅,给人感觉大度、宽容。

蓝色:永恒、博大,大家可以看看天空!给人感觉平静、理智。

紫色:小MM们常用这种色,给人神秘、压迫的感觉。很怪的一种色

黑、白色:这两种色我有时会觉得很奇怪,它们在不同时候给人的感觉是不同的,黑色有时给人沉默、虚空的感觉,但有时也给人一种庄严肃穆的感觉。白色也是同样,有时给人无尽的希望感觉,但有时也给人一种恐惧和悲哀的感受。具体还是要看与哪种色配在一块。

还有一些纯度不同的色,我自己较为喜欢的,例如含灰色的绿会使人联想到淡雾中的森林,天蓝会令人心境畅快,淡红会给人一种向上的感觉。只是个人理解而已,大伙儿可以自己试试。     

色彩的对比

不同色彩之间的对比会有不同的效果。当两种颜色同时在一起时,这两种颜色各自走向自己的极端。例如:红色与绿色对比,红的更红,绿的更绿;黑色与白色对比,黑的更黑,白的更白。由于人的视觉不同,对比的效果通常也会有不同。当大家长时间看一种纯色,例如红色,然后再看看周围的人,你会发现周围的人脸色会成绿色,正是因为红色与周围颜色的对比,形成了对我们视觉的刺激。色彩的对比会受很多因素影响,例如色彩的面积、时间、亮度等等。

色彩的对比有很多方面,色相的对比就是其中的一种。当我们用湖蓝与深蓝对比时,你会发觉深蓝带点紫味,而湖蓝则有点绿味。各种纯色的对比会产生鲜明的色彩效果,很容易给人带来视觉与心理的满足。 

红色与黄色对比:红色会使人想起玫瑰的味道,而黄色则会使人想起柠檬的味道。

绿色与紫色对比:很有鲜明特色,令人感觉到活泼,自然。

而红、黄、蓝三种颜色是最极端的色彩,它们之间对比,哪一种颜色也无法影响对方。

色彩间的对比也有纯度对比,举个例子,黄色是夺目的色,但是加入灰色会失去其夺目的光彩,通常可以用混入黑、白、灰色来对比纯色,这样可以减低其纯度。纯度的对比会使色彩的效果更明确肯定。

色彩的大小和形状

有很多因素可以影响色彩的对比效果,色彩的大小就是其中最重要的一项,如果两种色彩同样大小,那么这两种颜色之间的对比十分强烈,但是当其中的一种大小变得不一样时,小的一种色就会成为大的色的补充。色彩的大小会令色彩的对比有一种生动效果,尝试在一大片绿色中加入一小点红色,你会注意到红色在绿色的衬托底下很抢眼,这就是色彩的大小对对比效果的影响,在大面积的色彩陪衬下,小面积的纯色会突出特别的效果,但是如果用较淡的色彩,则会让你感觉不到这种色彩的存在。譬如在黄色中加入淡灰色,你根本就不会注意到淡灰色。不知你是否留意到,在不同的形状上面,同一种色彩也会有不同的效果,试试在一个正方形和一条线上用红色,你会发现,正方形更能表现红色稳重、喜庆的感觉。不同的形状会使同一种色彩产生不同的效果,个人认为,圆形最好用蓝色,这样给人辽阔博大的感觉。三角形用黄色,三角形的尖锐感与黄色的刺目感配合起来。梭形建议用鲜蓝色,平行四边形用绿色……这些只是一家之言,大伙儿可以自己选用,我只是写出不同的形状上面即使用同种色也会有不同的效果。

色彩的位置

色彩所处的位置不同也会造成色彩对比的不同。试把两个同样大小的色彩放在不同的位置,譬如前后,则你会觉得后面的颜色要比前面的颜色暗些。正是由于所处的位置的不同,导致眼睛的视觉的不同。我喜欢在画图中使用渐层工具,无它,则会觉得多种色彩在一起会有一种不同的效果,有如音乐中的1、2、3、4、5、6、7变化,同样的色相但纯度不同的色彩组合在一起会有令人吃惊的效果,不要以为渐层很简单,它内含着色彩运用的一项重要的运用。不知大家有没有唱过歌?我觉得色彩的渐层变化里也有一种调子,如同歌曲里的谱一样,暗色中含高亮度的对比,会给人清晰、激烈的感觉。很强烈的刺激如深黄到鲜黄色,暗色中间含高亮度的对比,会给人沉着、稳重深沉的感觉。如深红中间是鲜红。中性色与低高度的对比,给人模糊、朦胧、深奥的感觉,如草绿中间是浅灰。纯色与高亮度的对比,给人跳跃舞动的感觉,如黄色与白色的对比。纯色与低亮度的对比,给人轻柔、欢快的感觉,如浅蓝色与白色。纯色与暗色的对比,给人强硬、不可改变的感觉。

WEB设计经验 -来自微软设计主管 

从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确,这些确实是我所关注的。视觉上的吸引力是重要的,但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。 
  我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息。 

设计站点 
  在进行 Web 设计时–在设计过程中–形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然,我们有最新的 Web 工具,并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。 

事实上,我经常发现一些站点未将重点放在功能上。常见的错误包括: 

  用户界面元素不一致.例如,同一个控件在不同的页面上功能不同,或者同一个功能对应几个用户界面控件。 

  导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。 

  不太注意或根本不注意基本的图形设计原则,例如排版式样、色彩和版面的设计。 

  相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。 

  使网页过于庞大,以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形,但是您需要对它们进行精挑细选,然后用适当的压缩和颜色索引优化它们。 

  现在的 Web 站点仍然存在很多问题,这并不奇怪。毕竟,Web 设计“艺术”相对来说还是个新生事物。在四、五年以前,Web 页甚至是普通的。那时,人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在–并且,可能在某些情况下这种方法确实有效。但是这些站点一般很难看,并且更重要的是,它们真的难以使用。接下来便进入“看看我们能做些什么”阶段,在网页中加入了大量的动画、声音文件以及其它附加件,导致访问者需要长时间地进行下载,但是并未获得多少实实在在的内容。 如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速,同时在功能上有所提高。这是 Microsoft 的目标,而且我们最先承认自己所犯的错误(参阅“Microsoft 的 Web 简史”看一看以前的主页设计)。 

  设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是,在其它情况下,它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西,那就是小的改动会使 Web 页的运行方式有很大的不同。 

明确的流程 

  若要避免类似问题,我们为新服务(例如“搜索”)的创建或关键的 Web 页(如主页)设计了一个明确的流程。 每个项目都是在一定的基础上开始的,即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段(第 1 阶段),我被要求设计一些初级模型:大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议,看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。 

  如果答案是“可以”,那么此项目会获得批准,我们开始写项目说明书(第 2 阶段)。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时,我们一般还会开始可用性测试(一般会有书面的模型)以了解潜在用户将对计划中的设计做出何种反应。 在最后开发阶段(第 3 阶段),我们创建运行计划服务的 Web 原型,并且进行全面的可用性测试以及内部复查。然后完成站点的代码,修改程序错误,最后站点通过实际运转的 Web 站点向客户发布。 

  正如您所见到的,可用性在整个流程中扮演着重要的角色(参阅“创建有效的 Web 界面需要认真计划”)。我们可以为用户运行某项任务计时,这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量,以确定一个功能的重新设计是否为客户带来任何真正的价值。 还有,我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能–我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如:在我们的站点上,在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索,以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上,很少有人熟悉它。一些用户认为他们正开始新的搜索,并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。 

  选项“在结果范围内搜索”看上去很直观,但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。 

最后阶段 

  大体来讲,站点设计是在发生冲突的需要之间求得平衡的艺术。一方面,我要将站点设计得尽量简单易用。另一方面,我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时,我还要为内部客户服务–Microsoft 产品项目组–他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题,经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。 

  这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程–在大学学习图形艺术,然后在多媒体公司设计 CD-ROM,最后加入 Microsoft 并开发应用程序–才获得这个职位的。非常奇怪的是,当我申请(并获得)这份工作时,我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的,并且我自认为已经验证了格言“成功的设计就是成功的设计”(不论是什么媒体)。许多设计问题对 Web 来说是独一无二的,解决这些问题的方法对于任何媒体都是一样的。 

  对于那些准 Web 设计师我的建议是,他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分–大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。 在未来,Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容,从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师,要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是,Web 设计师也将向这些领域发展。 

  对于属于 microsoft.com 的我们–以及在 Internet 上的其它地方–那应该是一个非常有趣的未来。 

了解您的观众。 
   调查一下究竟哪些人在访问您的站点,以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。 使您的站点对访问者来说有所帮助。 

为您的观众提供所需的信息。
   使导航元素保持一致,并且确保对访问率最高的区域进行明显的标记,是它们易于被找到。 

使用清楚的消息 
  确保用户了解此页面的上下文,并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名,那么就直截了当地说。不要让访问者自己计算什么,他们会感到沮丧,于是转到其它更简单的站点(例如您的竞争对手的站点!)。 

保持一致性 
  虽然更改不同 Web 页的外观并不难,但这并不意味着您应该这么做。将主要功能–例如返回“主页”的链接或者执行一个搜索–放在每页的相同位置。在 microsoft.com 上,黑色全局导航工具栏的位置在四十多万页上都是一样的。 

使站点可用 
  牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率,然后努力进行改善。如果新的设计没有在这些方面获得改善,那么就不要实施它。重新从草图(或最初的计划)开始并尝试其它方法。 

保持简洁 
  说起来容易做起来难。尝试征求反馈意见。 有时新人可以很容易找到解决方案。 

尝试新的东西 
  不要害怕打破常规,尝试一些完全不同的东西。如果您不试试,永远不会找到真正的答案。

设计上的精挑细选会削弱网站

英文原作者:Nick Usborne 

我承认,这是个令人气愤的标题。但事实如此。

无论有多么令人关注的信息,无论有多么优秀的效仿,无论多么有力的推广;设计好的页面总会在所受欢迎的程度上有戏剧性的变化,不论是好是坏。

在我展开话题前,我想让你看下三个不同版本但内容相同的提供页面:

版本A
版本B
版本C

我知道,他们不会赢得任何设计奖项。他们也没有这个打算。但他们是很实用并且为我们所熟悉。读者在这些页面里都能快速地理解他们要表达的信息是什么,以及他们想要求我们做什么。

·A 是最初版本
·B 遵循了相同的基本布局,但我们做了一些小小的改变
·在版本C中,我们将一列形式改为了两列。我们想要测试更多页面内容提前到首屏上会带来的影响

请你诚恳地做下判断,B或C是否能胜过A,在哪方面的比例

不要急于拉到下面查看答案。你是名设计者,一名专业的WEB设计人员。所以将你的财物放在你的证书上然后写下一些数字吧

写下B比A好或差的比例数,以及C比A好或差的比例数。

你在设计上所做的选择会对结果产生极深的影响

我猜想一下你有一些衡量自己网站成功与否的方法。或许是它的销售能力。或许是它所基于的读者数量。但不管怎样,你的站是有目的性的。

但我不认为大多数设计者真正明白他们设计上的选择所带来的作用能够完成这个目的。

是的,我确信你做了一些可用性方面的测试。如果当你在哪些部分在工作而产生疑惑时,这或许会给你一些帮助。

但你有没有做过不同设计页的测试呢?

通过测试,我的意思并不是叫一些同事;我的意思是做个实况测试来说明站点访问者真正做了些什么

这样的测试是件很完美的事。没有空间让你做论据上的设想。专家的凭据和意见意味着霸权。当你提供多选的版本,一个到另一个,从读者的行为上估量,你会得到真正的方法。你得到了哪个才是你所要的。

你做过了么?这是件另人提心吊胆的事

但如果你是认真对待你的网站目的的,而且如果测试可以让你明白哪个页面版本能做的更出色,那对与是否做测试还有什么好争论的呢?

怎样做设计上的选择会带来不同的效果

我们找到了这一些设计要素(一部分)会让页面执行不同的含义:

·主要行为号召的位置和其颜色
·页面的说明,如果要用到
·连接元素是文字形式还是图片形式
·页面上元素的“空位”数量,好让内容“透气”
·主要标题的突出位置 
·页面上使用的列数
·视觉元素在吸引注意力方面的竞争量
·在照片中出现成熟,色情的

现在公布下测试结果:

A/B/C Split Test[]A/B/C三派的测试]   Page A Page B Page C 
Percent of traffic[流量百分比] 34% 33% 33% 
New sales[销售额] 244 282 114 
Change[变化] N/A 15.57% -53.28% 

版本B,通过细小的变化,在销售方面有了15.7%的增长;这说明站点的收入有了教大的提升。

版本C,我们将它改为比较有秩序的,从一列的形式变为两列,结果却造成了销售上下降了53.28%。

这是个另人惊讶的销售滑落,原本打算将提升页面成绩的设计,结果却是这样.

现在,只要中断片刻并回想下你去年所做的一些设计精选,以及你设计它们的理由。思考一下这些精选可能会给你运作的站点带来巨大的影响。

结束前的思考

这个测试所表现出来事实是可怕的。他们并非特殊的案例。设计上的变化确实会给站点的成绩方面带来巨大的影响。

这里是一些要思考的东西:

·如果你站点上有一些页面需要决定它是否会成功,做下A/B分离测试。你不需要去猜测:你已经知道结果了。

·要注意到不论多么有力的页面文字信息,它的成绩必须依靠它所呈现的方式。换句话说,设计上的选择可以增强或减弱文字所带有的力量。

·和你的作者谈谈,问问他们希望其信息怎样呈现会最好。然后测试几个不同的版本,当文字布局出现后一个优秀的作者应该会有很强的直觉(判断其好坏)。

·不论怎样,这点很重要,就是我们当中没有一个人,不管是设计者或作者,知道页面怎样设计才“最好”,直到我们进行测试后。

虽然这或许对一些人不太适应,但最终的结果是我们将会成为更出色的WEB设计者和作者。

出处:网络维他命 
责任编辑:moby

网页制作中一些容易被忽视的问题

1、让你想当然,给你点颜色看看

这个问题其实被很多人忽略,小到个人站点,大到门户网站都有可能犯这个错误。不信想想看,如果你所做的网站背景是白色的,那么你还会记得在 CSS 里写下 Background-color:#ffffff 这句代码吗?我敢打赌,大部分人不会!并不是因为大家偷懒,而是这个举手之劳被彻底忽略了,为什么?因为我们所用的 Windows 操作系统在大多数的情况下,运行在其上的各种软件的默认背景色是白色,这其中就包括 IE 浏览器,所以在网站背景是白色的条件下,许多的网页制作者就想当然的忽略了关于背景色的设置,反正大家都是白色,不设的话也看不出来。但是不要忘记了,Windows 从 XP 开始支持系统主题的更换,有很多第三方的主题会更改系统默认的设置,其中就包括背景色的设置,如果没有强制设定页面中的背景色,那么页面就会以当前浏览器的背景色来显示内容,其结果就是网站美观性被大大的降低,拿大家都熟悉的网易来举例,下面的截图是在我机子上浏览时的样子,由于前不久换了一套 Vista 的主题风格,所以浏览器的背景色变成了浅灰色。


仔细看看网易的 Logo ,看出来吗?对,那个 Logo 的背景是白色的,但旁边的背景色却是灰色的,换句话说就是网易整个页面的背景原定就是白色的,这在浏览器背景为白色的前提下是看不出什么来的,但是像现在这样就“漏馅”了。不光是网易 ,许多的门户站都是这样,具体我就不去举例了,可见关于 Background-color 设定的重要性。所以,不论你的网站是什么样的背景色,请一点记住把它设定好,哪怕它是白色!

2、立正!向左~~~看齐

大家都知道 Table 的默认水平对齐方式(align)为左对齐,设 align="left" 和不设其效果是一样的,于是很多人不去设置这个属性,我以前也是如此。但是在某些特殊的情况下,IE 会把默认的左对齐理解为居中对齐,从而导致页面的排版出现问题,虽然说具体是什么情况下会出问题连我自己都说不清楚,但是这种情况绝对存在,所以大家在做页面的时候一定要习惯性的设置表格的 align 属性,不要偷懒跳过这步,对页面的表现来说,这所谓的多此一举绝对有益无害。

3、单元格宽度-隐形杀手

不知你有没有遇见过这种情况,假设当你给一个单元格的 align 设置了左对齐后,却发现放在单元格中的文字并没有应用该属性的效果,反而继续是居中显示,查看文字两端也并没有发现任何垃圾代码包含其中,可是无论如何都改变不了文字的位置。郁闷吗?反正当时我是很郁闷,直到后来,我才发现原来是单元格的 Width 属性在作怪,将其删除或重新设置后问题得到解决,所以,当你也遇到同样的问题时,不妨检查一下出问题单元格的 Width 设置,相信你会找到解决的方法。

4、打死滚动条都不消失

有时为了一些个性化的需要,有些人喜欢将浏览器的滚动条隐藏掉,这个效果做起来很容易,但是有时会发现明明代码一点问题没有,而且查看用的浏览器也不是非 IE 内核型的,但可恶的滚动条就是不消失!而且这个问题很多都出现在用 DW 等可视化编辑软件制作出的网页上。那原因是什么呢?其实原因就在该页面的头部代码里,查看该页面的源代码,你会发现在最上边有类似这样的两句代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这两句代码叫做 DOCTYPE 声明,是 Document Type(文档类型)的简写,用来说明你用的 XHTML 或者 HTML 是什么版本。简单点说这两句代码是制作标准化页面所必不可少的关键组成部分,浏览器就是根据你定义的文档类型来解释你页面的标识,并展现出来的。换句话说,如果你定义了一个错误的 DOCTYPE,那么你的标识和 CSS 都不会生效。而定义滚动条显示与否的 overflow、overflow-x、overflow-y 这三个属性恰恰没有被网页标准所采纳,所以如果你的页面上方定义过 DOCTYPE ,那么这三个属性便是无效代码了,解决方法就是删除头部的 DOCTYPE 声明,虽然在标准日益普及的今天不推荐这么做。

5、都是注释惹的祸

为代码写注释是个好习惯,但是有时也会出现一些问题,例如为 CSS 写中文注释。
如果你为自己定义的 CSS 写了中文注释,那么在一些特殊情况下(例如服务器端的支持,页面所用的程序类型等)会导致部分代码无故失效,这种情况我遇见好几回了,所以在技术上没解决这个问题之前,还是不要为 CSS 写注释的好,养成良好的命名习惯足以让其它人看懂自己代码的意义,即使一定要写,也请用英文写吧…什么?拼音!!!拜托,你用拼音试试看,保证一个星期后连你自己都不明白那写的是什么。

6、神啊,发光吧~~~
这个问题有些滥竽充数的嫌疑,只是有很多人问起过,所以也一并放上来。是关于 CSS 的 Glow Filters ,这个滤镜的效果是对环绕对象内容边缘制作发光效果,也有人称描边效果,多被用在文字的表现上,但是许多人在运用了该滤镜后发现并没有出现想要的效果,究其原因多半是由于把这个滤镜直接运用到了文字上,要知道该滤镜对文字是没有效果的,那为什么还能制作出发光文字呢?那是因为一定要把它运用在放置文字的容器上,例如 Table 。所以,如果没有效果的话,就检查一下是不是用错地方了。

该滤镜的另外一个问题是,虽然发光效果是有了,但是感觉文字上的那圈光晕好像是被裁了一样,少了一块似的。这是由于所放置文字的容器高度低于该滤镜的发光范围所至,解决方法有三种:
1、缩小 Font-Size 
2、增加 Height 值高度 
3、降低 Strength 值的大小

7、思考中…

其实这些问题都不是什么了不起的大问题,但往往越是小问题才越容易被人忽略,希望上面这些经验教训对你能有所帮助,哪怕有一个人从中收益就不枉我罗哩罗嗦这么半天了。