英文原作者: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 [...]
Monthly Archives: 三月 2008
符合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 [...]
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 { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { [...]








