Monthly Archives: 三月 2008

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

英文原作者: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设计者和作者。

符合XHTML标准,打开窗口的方法

target=”_blank”已经不符合标准了,是不是很郁闷?这么方便的功能,为什么非得取消呢?
估计是因为用户体验问题,弹出新窗口对于用户来说,是强制的,用户体验不佳。

function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(“a”);
for (var i=0; i

CSS实现菜单当前项效果

当前页面-比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不 同,用以给浏览者一个明显的指示。
设菜单有5个栏目:home、about、products、services、contact,分别给每个栏目一个ID,m1-m5,CSS可写成如下:

#home #nav li#m1 a,
#about #nav li#m2 a,
#products #nav li#m3 a,
#services #nav li#m4 a,
#contact #nav li#m5 a{color: #FFF; background: #DC4E1B url(navbg.gif) no-repeat;}

html页:
以下是引用片段:

<ul id=”nav”>
<li id=”m1″><a href=”index.html”>Home</a></li>
<li id=”m2″><a href=”about.html”>About</a></li>
<li id=”m3″><a href=”products.html”>Products</a></li>
<li id=”m4″><a href=”services.html”>Services</a></li>
<li id=”m5″><a href=”contact.html”>Contact</a></li>
</ul>

然后分别给每个页面的bady标签一个独立的ID,例如给首页的ID是home,其余的类推。
比如在首页:

<body id=”home”>
<ul id=”nav”>
<li id=”m1″><a href=”index.html”>Home</a></li>
<li id=”m2″><a href=”about.html”>About</a></li>
<li id=”m3″><a href=”products.html”>Products</a></li>
<li id=”m4″><a href=”services.html”>Services</a></li>
<li id=”m5″><a href=”contact.html”>Contact</a></li>
</ul>

这样做法的好处是每个页面的菜单都是一样的,方便修改,动态页包含也容易。

HTML标签的一些默认CSS属性

html, address,blockquote,body, dd, div,dl, dt, fieldset,
form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol,
p, ul, center,dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table [...]