小皮图书馆

2008-05-02

科学设计你的网站网页

Filed under: 网站设计 — 小皮 @ 10:46 am

科学设计你的网站网页:来自 Eye-Tracking研究的23节必修课 ——Christina Laun
翻译:Evelen @ 译言

在网络设计领域关于Eye-Tracking的研究十分火爆,但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门,可以为改进你的网站设计提供些意见:

1.对比图像,文字更具吸引力

与你所认为的相反,在浏览一个网站的时候,能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户,他们是来寻觅信息的而不是图像。因此,保证你的网站设计凸现出最重要的信息板块,这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中,毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时,应该尽量保持这一格式。要知道,如果你希望保持个人特色,搭建一个成功的网站,你就必须尊重用户们的习惯。

3.用户浏览网页时,首先观察网页的左上部和上层部分,之后再往下阅读,浏览右边的内容

用户普遍的浏览方式呈现出“F”的形状 。保证网站内容的重要要素集中于这些关键区域,以此确保读者的参与。在此放置头条,副题,热点以及重要文章,这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明,读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱,那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢?那是因为用户会认为这些是广告,并非他们所需要的信息。事实上,研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息,因为视觉线索告诉他们把这些忽略吧。保持网站的清爽,不要因为华而不实的表面,让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列,读者会发现在你的网站可以很容易地发现真实的资料。要知道,你是写给那些将第一次浏览你的网站的读者,所以,让他们容易发现他们所需的信息,让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗?改变网页字体的大小。大的字体刺激浏览,而小一些的字体则提高焦点阅读量。根据你的需要,合理配置两者的比例。

8.遇到感兴趣的内容,用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词,这样可以有效利用搜索引擎,让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标,就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求,保持信息由简短的段落和句式组成,例如 这个电子商务网站 的产品介绍。

11.根据视觉锁定,一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下,简洁更具力量。多栏内容容易被用户忽视,我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告,试图使他们融入网页的左上部,这样他们才能吸引到最大的视觉注意力。当然,用户仅仅会注意到这些广告,这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率,可以将其设置于最能引起人兴趣的内容一旁,整合进网页的设计里。这样,用户既可以找到所需的内容,你也能提升广告的效益。

14.在各种测试中,人们阅读文字广告最为专心。

正如上面提到的,一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力,而是与网页的其它部分内容融为一体,这让他们减少了对读者的视觉刺激,也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力

如果要在网页中使用图片,那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关,否则它更容易被忽视。大多数读者都拥有高速的连接速度,所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道,但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片,请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是,那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时,读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效,以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以,你需要花费额外的时间维护你的精心设计。毕竟,他们不仅吸引了读者的眼球,更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落,大量使用表单形式来表现你的文章,可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容,会让网站更容易浏览,用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示,一般的网络浏览者不会花费时间去阅读大块的文本,无论他们有多重要或写得多好。因此,必须把这些大文本分解为若干小段落。突出重要的地方,放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎,因为过多的使用会使你的网页难以阅读,把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人,但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没,同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁,给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部,导航工具的作用将更好的发挥

理想情况下,你不会满足于当读者打开你的网站时仅浏览初始页,而是希望他们浏览翻阅,察看其它感兴趣的内容。将导航器置于网页顶部,就可以让用户通过使用这个工具轻松的找到所需的目标内容。

2008-04-04

RGB色彩与CMYK色彩

Filed under: 网站设计 — 小皮 @ 23:20 pm

色光三原色 (R.G.B)

RGB是色光的彩色模式,R代表红色,G代表绿色,B代表蓝色。因为三种颜色每一种都有256个亮度水平级,所以三种色彩叠加就能形成1670万种色彩了(俗称”真彩”)。这已经足以再现这个绚丽的世界了。

RGB模式因为是由红、绿、蓝相叠加形成其他颜色,因此该模式也叫加色模式(CMYK是一种减色模式)。在该色彩模式下,每一种原色将单独形成一个色彩通道(Channel),在各通道上颜色的亮度分别为256阶,由0-255。再由三个单色通道组合成一个复合通道–RGB通道。图象各部分的色彩均由RGB三个色彩通道上的数值决定。当RGB数值均为0时,该部分为黑色;当RGB色彩数值均为255时,该部分为白色。就编辑图象而言,RGB色彩模式是首选的色彩模式,PHOTOSHOP中所有图象编辑的命令都可在RGB模式下执行。因为他可提供1670万种颜色,既所谓的”真彩”,足以将图象显示得淋漓尽致。因此在PHOTOSHOP中将 RGB模式作为预设的模式。

虽然编辑图象RGB色彩模式是首选的色彩模式,但是在印刷中RGB模式就不是最佳的

了。因为RGB模式所提供的有些色彩已经超出了打印色彩范围之外,因此在打印一副真彩的图象时,就必然会损失一部分亮度,并且比较鲜明的色彩肯定会失真的。这主要因为打印所用的是CMYK模式,而 CMYK模式所定义的色彩要比RGB模式定义的色彩要少得多。在打印时,系统会自动将RGB模式转化为 CMYK模式,这样就不可避免地损失一部分色彩和减轻一定的亮度了,因此打印后的失真现象将十分地严重。

萤幕显示的色彩是由 RGB(红,绿,蓝)三种色光所合成的,我们必须利用减色法来计算混合後的色彩,色光越多越接近白色

印刷四原色 (C.M.Y.K)

CMYK模式是一种减色模式,它适合于印刷。当阳光照射到一个物体上时,这个物体

将吸收一部分光线,并将剩下的光线进行反射。反射的光就是你所看到的物体的颜色。这是一种减色模式,是与RGB色彩模式的根本不同之处。不但我们看物体的颜色时用到了这种减色模式,而且在纸上印刷时应用的也是这种减色模式。

CMYK即代表印刷上用的四种油墨色,C代表青色,M代表洋红色,Y代表黄色。因为在

实际应用中,以上三色很难形成真正的黑色,最多不过是褐色,因此又引入了K–黑色。黑色用于强化暗部的色彩。在PHOTOSHOP中这种色彩模式就形成了四个色彩通道,最后又由这四个通道组合形成了一个综合通道。因此如果是放在网页上的图片,直接用RGB模式就已经可以了;如果是教程、广告上的需要打印出来的图片,我们可以:先用RGB模式编辑,再用 CMYK模式打印,或是直接到印刷前再转换,然后加以必要的校色、锐化和修饰。这样虽然PHOTOSHOP在CMYK模式下慢了许多,但还是可以节省大部分编辑时间的。

在转换的过程中,PHOTOSHOP实际是先将图象由原先的RGB色彩模式转换成Lab色彩模式,再产生一个最终的CMYK色彩的模式,在其中难免会增减光点和损失一些品质,因此最好在转换之前先将原稿备份。而在RGB与CMYK色彩模式之间来回多次转换也是不提倡的,它们之间的转换并不是完全可逆的。

印刷色彩由CMYK四色油墨产生不同於电子影像,我们利用加色法,混合三色最後会得到黑色(K)

2007-12-26

网站设计中43个你应当避免的错误

Filed under: 网站设计 — 小皮 @ 10:20 am

来源:PCPOP.COM

1.用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。如果访问者无法在几秒钟之内得知你的网站的方向,他很有可能转而访问其他网站。你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2.让网站易于速读。因特网不是书,因此没必要使用大段的文字。也许我访问你的网站时我正在忙于其他工作,我不得不迅速读完所有内容。项目符号、标题、副标题、列表,这些都能帮助读者迅速找到他想要的内容。

3.不要使用难于阅读的花哨字体。当然,某些字体可以让网站精彩纷呈。不过它们容易阅读吗?如果你的主要目的是传递信息并让读者阅读,你应该让阅读过程舒服些。

4.不要用小字体。如上一条所述,你得让读者阅读时感到舒服。虽然我的Firefox有放大功能,但如果必须放大才能看清一个网站的话,我就再也不会去访问它了。

5.不要打开新浏览器窗口。我的第一个网站曾经经常这么做。原因很简单,在新窗口中打开外部链接,用户就不必离开我的网站。错!让用户决定如何打开链接,否则浏览器上大大的后退按钮就没必要存在了。不用担心用户离开你的网站,在必要的时候他们会回来的。

6.不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。如果你改变窗口大小,你会在他们面前失去信用。

7.不必要时不要让用户注册。直白地讲,我上网是为了获取信息,不是为了别的。不要强迫我注册并留下我的电子邮件以及其他信息,除非特别必要(比如你能提供的消息非常有价值)。

8.不要在未经访问者同意的情况下为他们订阅电子杂志。不要在访问者注册时自动给他们订阅电子杂志。不请自来的邮件可不是个交朋友的好办法。

9.不要过多使用Flash。Flash不仅会增加网站的读取时间,过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时才使用Flash。

10.不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐,结果他们失败了。记住,永远不要使用音乐。

11.当你必须使用声音时,让用户启动它。有时你必须使用声音文件,比如你要给用户发送一份演讲,或者你的教程包含声音。这没问题,但要让用户来控制,让用户点击“播放”按钮,别在打开网页的瞬间播放声音。

12.不要让标志弄乱你的网站。社交网络和社区的标志会让你的网站看起来十分不专业。就算是奖章和荣誉等标志也应当放到“关于我们”页面上。

13.不要使用“点击进入”页面。用户访问到内容的步骤越少越好。

14.注意要留下联系方式。最差的莫过于网站没有留下联系方式的了。不仅对访问者不友好,而且对你也没好处,你会错过珍贵的反馈信息。

15.不要影响“后退”按钮的动作。这是网站可用性的最基本的理念。在任何情况下都不能影响“后退”按钮的动作。比如,打开新窗口会破坏它,某些Javascript链接也会破坏它。

16.不要用闪烁的文字。除非你的访问者来自1996年,否则别用闪烁文字。

17.避免复杂的URL结构。一个简单的基于关键字的URL结构不仅能提高你的搜索引擎排名,还能让访问者在访问之前了解网页内容。

18.用CSS布局,不要使用表格。HTML表格曾经被用于页面布局,但没有必要拘泥于此,尤其是在CSS诞生之后。CSS更快、更稳定,并能提供更多的特性。

19.保证用户可以搜索整个网站。搜索引擎带来因特网革命的原因,就是它使得信息查找变得十分容易。别在你的网站上唱反调。

20.避免使用下拉菜单。用户应当直观地看到所有导航选项。下拉菜单会造成混乱,并且会隐藏访问者真正要找的信息。

21.使用文字做导航栏。文字导航不仅速度快,而且更稳定。例如,有些用户上网时会关闭图片。

22.如果需要链接到PDF文档,一定要注明。你一定有过点击链接之后,浏览器就像死掉一样等待AcrobatReader启动,只为了打开一个(你不想看的)PDF?这是个不小的麻烦,因此一定要在指向PDF的链接旁特别说明,使用户可以采取相应措施。

23.不要用多种版本让访问者迷惑。你想用哪种带宽?56Kbps?128Kbps?Flash版还是HTML版?嗨,我只想快点看到内容!

24.不要在内容中混合广告。在内容中混合广告(如Adsense)也许会增加短期内的广告点击率,但从长远角度来看,这会减少网站的人气。愤怒的用户会离开的。

25.使用简单的导航结构。过犹不及。这个规则通常适用于人和选择上。确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧?

26.避免内容介绍。别强迫用户在访问到真正内容之前看某些东西。这很令人愤怒,除非你提供的信息是用户必须的,否则他不会等下去。

27.不要使用FrontPage。这一点也适用于其他廉价的HTML编辑器。它们让页面设计变得更方便,但其输出结果将会非常低级,不兼容不同的浏览器,并且会包含错误。

28.保证你的网站兼容大部分浏览器。浏览器并不完全相同,在解释CSS和其他语言的方法也相差甚远。不管你是否愿意,你应当让网站兼容市面上的常用浏览器,否则你会永远地失去部分读者。

29.保证在链接上添加有意义的文字。以前我经常犯这个错误。告诉人们“点击这里”很容易,但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么,也能为链接指向的外部站点带来SEO效果。

30.不要在状态栏中隐藏链接。用户还必须能在状态栏中看到链接指向哪里。如果你隐藏了链接(即使是由于其他原因),那么你也会丧失信誉。

31.使链接可见。访问者应能轻易识别出哪些能点击,哪些不能。确保链接的颜色有强烈的对比(标准的蓝色通常是最好的)。可能的话,最好加上下划线。

32.不要在普通文本上添加下划线或者颜色。除非特别需要,否则不要为普通文字添加下划线。就像用户需要识别哪些能点击一样,他们不应当将本不能点击的文字误认为能够点击。

33.改变访问过的链接的颜色。这一点对于提高网站可用性非常重要。改变访问过的链接颜色有助于用户在网站中定位,确保他们不会不经意地访问同一页面两次。

34.不要使用动态GIF。除非你有需要动画的广告条,否则避免使用动态GIF。它会使网站看上去很业余,并且会分散访问者的注意力。

35.给图像添加ALT和TITLE属性。ALT和TITLE不仅会带来SEO效果,而且对盲人有很大帮助。

36.不要用令人不快的颜色。如果用户连续阅读10分钟后觉得头疼,那么你最好选择别的配色方案。根据你的目的决定设计(例如,创造一种氛围使得用户将注意力放在网站内容上,等等)。

37.不要弹出窗口。这一点涉及任何种类的弹出窗口。即使用户要求使用,弹出窗口也不宜使用,因为它会被弹出窗口拦截功能阻拦。

38.不要使用Javascript做链接。远离那些点击之后执行一小段Javascript的链接,它们经常给用户带来麻烦。

39.在页面底部放置有意义的链接。访问者在找不到所需信息时通常会滚动到页面最底端。作为最后的手段,你应当在页面底部放一个“联系我们”页面的链接。

40.避免网页过长。如果用户老是需要滚动才能看到内容,他通常会采取的做法是跳过它们。如果你的网站正好如此,那么应当缩短内容并优化导航结构。

41.禁止使用水平滚动条。虽然垂直滚动条可以接受,但水平滚动条却远非如此。现在的流行分辨率是1024×768,要确保网站能容纳在其中。

42.禁止出现拼写或语法错误。这不是网站设计的错,但却是影响网站整体质量的重要因素。确保链接和文字中没有拼写或语法错误。

43.如果你使用图片认证,要保证能看清其字符。有些网站将图片认证作为对抗垃圾评论的方法,或是在注册表单上使用。其中有个问题就是,用户经常需要叫上全家人来讨论图片上到底是什么字母。

2007-02-08

Top Ten Mistakes in Web Design 2007

Filed under: 网站设计, 设计 — 小皮 @ 9:19 am

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.) Cartoon - Man searching for 'Honalulu' and getting no results. - Woman: 'Oh, forget it. Let's just go visit my mother in Fargo.'

(more…)

2006-11-01

优秀行业网站建设5必备

Filed under: 网站设计 — 小皮 @ 14:52 pm

引言

行业网站是互联网世界的主心骨,大大小小的行业网站支撑并繁荣互联网的发展,并很大程度上直接影响互联网的兴与衰!缘此,行业网站建设水平显得尤其重要,其犹如一座冰山,浮于水面的是冰山最焦点的区域,体现了行业网站运营商整体水平;沉于水底的却是内功所在,绝对支撑着整个冰山的形体与规模,更是行业网站运营商每日研究的课题。

行业网站建设是一门讲究宏观思想指引,微观田园式精耕细作的工程,主要通过以下5个方面展开。

(more…)

Powered by WordPress