网页设计技巧:正确处理网页?#35745;?/h1>

                            www.ts.cn 天山网   2013年08月05日 15:21:06    我来说两句 天山网官方微博
                            更换背景颜色:
                             
                             
                             
                             
                             
                             
                             
                            更改文字大小:

                            ????俗话说,一图胜千言。无论这是真是假,?#35745;?#37117;是网页中重要的组成部分。自从嵌入?#35745;?#27493;骤变?#30473;?#21333;,我们可以看到很多网站都内嵌了许多?#35745;?#20854;中一些 网站从不同?#23884;日?#31034;了正确利用?#35745;?#30340;好处,?#27426;?#22823;部分网站则不是如此。尽管这对于一款设计来说,并不是多大的影响,但是这些?#35745;?#21487;能会减少你销售产品的 机会,除非你有一个很好的诱导用户的页面或者创造了很好?#33041;?#35835;流条件。?#35745;?#26159;细节胜于原则的问题,处理?#35745;?#24212;该是设计师们更?#26377;?#35201;理解和掌握的能力。

                            ????网页可用性专家Jakob Niesen和他的公司NN/g做了一项眼动研究,总结出了?#40644;?#21517;为《Photos as Web Content》的文章。他们的结论震惊了设计行业,?#27493;?#31572;了许多之前研究都无法解答的问题。

                            ????网页设计可用性指导-处理图像

                            ????实际上,用户更想看到与他们想找的信息相关的?#35745;?#22240;此他们更青睐一个没有?#35745;?#30340;页面而不喜欢那种充斥着无关?#35745;?#26174;得?#20998;?#30340;页面。根据研究,在网页中使用?#35745;?#30340;关键,是基于以下几则基本的思路:

                            ?????#35745;?#22522;本因素:尺寸,组成元素,质量,曝光率是衡量一张好?#35745;?#30340;四大因素。用户关注?#35745;?#30340;质量,甚至连对比度都能产生很大的影响。

                            ????效率:如果一张?#35745;?#20196;人兴奋或者让人产生兴趣,那?#27492;?#23601;成功了。一张高效的?#35745;?#21253;含几个特点:

                            ????情?#26657;和计校?#20320;的产品能?#30473;?#21457;用户使用的欲望?

                            ????合理?#21644;计?#23637;示了产品的优点?

                            ????品牌?#21644;计?#31526;合你的品?#21697;?#26684;?

                            ????传递信息: ?#35745;?#33021;传递正确的信息给网站的读者。

                            ????刺激用户的?#20174;Γ?#23454;际上这有点难,但是基本的想法就是?#35745;?#33021;帮助用户做决定,以及产生对产品的购买欲望。我们在后文会提及到。

                            ????单纯的装饰性?#35745;?#20250;潜意识地被我们大脑忽略。就像雷达一样,如果?#35745;?#23601;像雷达上的滤波,那么大脑就会忽略他们。研究表明,使用了真人或者真实产品的 ?#35745;?#20250;自动被大脑标志为重要并能被进一步地关注。如果你有一个个人博客,大家更希望看到的是你真人头像而不是一张绘画像。人们想看到正在与他们交流的?#35828;?样貌,因为这对信任的建立尤其重要。

                            ????如果你拥有一家公司,使用?#35745;?#21435;描述公司员工是一个?#27973;?#26834;的想法。它给外界提供了一个很亲切的途?#24230;?#20102;解这家公司?#33041;?#24037;及生活。如果你能支付得起,花点钱请一个好的摄影师,这会为你公司的网站增色不少。(切记?#28784;?#36208;艺术照风格,尤其是那种和你的想表达内容无关的艺术照)

                            ????此外,一些眼动研究还表明,如果产品?#35745;?#20013;含有更多的细节,它能带来的效果就越好。是的,比如说平板电视的广告图,虽然它能起到?#27426;?#20316;用,但是这真的够好吗?用户希望看到更多的细节,所以,请展示给他们。质量和相关性:下面我会给你展示几个不同研究的结果。你会看到一些网站标志了热区,红色的区域表示受到用户关注的,而蓝色的区域表示被用户忽略的。

                            在ADELPHIAS网站做的眼动仪研究

                            ????除了看到这是一个难以置信的过时设计以外,你可以清晰看到所有?#35745;?#37117;没有热区分布。这是因为这些?#35745;看?#26159;作为填充作用。假如这些?#35745;?#26159;和页面信息相关的,那么热区可能会有?#27426;?#30340;变化。这个例子足以展示了他们是多么地浪费?#35745;?#31354;间。

                            ????另外一个例子来自纽约杂志网站的餐厅页面的眼动研究。我们可以看到,尽管?#35745;?#20154;物是世界出名的厨师,?#35745;?#30340;质量也很重要。尽管?#35745;?#21644;网页中的内容是?#27426;?#31243;度上的相关,但是低对比度和小尺寸的?#35745;?#21364;容易被忽视。所以这里需要一个平衡,?#35745;?#36136;量和相关性是两个重要的指引原则。

                            ????纽约杂志网站上做的眼动研?#21487;?#22270;摘自Jakob Nielsen 和 Kara Pernice在几年前写过?#40644;?#21517;为《Images as Obstacles》的文章,?#34892;?#20320;们伟大的工作。


                            手机天山网
                            iPhone客户端

                            手机天山网
                            Android客户端

                            天山网官方微信
                            (微信扫描关注)
                            稿源: tgideas   责编: 实习生 王欢 收藏此页 打印此页
                            网友评论 (以下网友留言不代表本网观点)

                            福建31选7基本走势图