网站建设多图轮换的布局，为什么商业效果不好？

　　网络营销从来就是一门玄学，到底是使用多图轮换来尽可能多地向顾客展示产品信息好，还是用静态图片只传递单一信息有效呢？到底哪一种能带来更高的商业转换率呢？本文想跟大家一起探讨一下，与其一味随大流地在网站主页上使用“图片轮换”，不如看看调查数据和听听专家的意见，再做决定，毕竟跟谁走，都不如跟钱走来得实在。

　　就算没见过成百上千个，我相信你肯定也见过几十个图片轮换页面吧？这些图片会自动切换或者滚动（这种模式也称为“旋转供图”）。你可能挺喜欢它们。但事实是，这种展现图片的模式，可能不利于提高商业转化率。

　　既然这种模式没什么卵用，那为什么人们还是用得乐此不疲呢？原因有两个：

　　有些人认为这种展现图片的模式很酷炫。但酷炫和赚钱可是两码事。

　　不同部门和各种经理都希望在公司主页上，尽可能多地展现他们的信息。

　　测试告诉了我们什么？

　　绝不只是我一个人这么想，许多转换率优化专家的实验，都说明了同一个事实：

　　来自WiderFunnel的ChrisGoward评论道：“我们已经多次测试了轮换图片所带来的效果，发现这绝对不是展示主页内容的好方法。”

　　“图片轮换一无是处，真应该立即从首页上把它们删除。”来自SiteTuner的TimAsh是这么说的。

　　JakobNielsen（是的，就是那名可用性测试大师）在测试中证实了这一点。他组织开展了一项可用性研究，在研究中，他让用户完成以下任务：在自动轮换幻灯片中，找出“西门子对洗衣机是否有特别优惠？”。这项信息被放在最明显的幻灯片上，但是用户却视而不见，因为“广告盲区”的效应，用户们忽略了这条消息。Nielsen总结认为，这些幻灯片完全被忽略了。

　　NotreDame大学也对图片轮换的效果进行了测试。

　　在所有图片中，只有第一张幻灯片得到了消费者的关注（仅有1％！），其他幻灯片几乎没有人点击。而那张只获得了消费者1％关注度的幻灯片却占据了页面的一半版面。

　　产品设计大师LukeWroblweski总结如下：

　　“@erunyon，基本上，数据告诉我，千万别使用图片轮换。”

　　–LukeWroblewski（@lukew）2013年1月22日

　　在StackExchangeUX上，有一些有关自动轮换图片的讨论。

　　以下是一些开展不同测试的人的说法：

　　AdamFellows说：

　　几乎我管理的所有测试都说明通过图片轮换展示的内容常被用户忽略。很少有人与那些轮换幻灯片互动，很多消费者还认为他们长得像广告，所以我们发现‘广告盲区’效应就这样产生了。

　　在节省版面空间和提升内容质量，许多竞争信息也都会在同一个位置传递出去，这使得用户的关注点飘忽不定，无法专注。

　　这是另一个评论，来自LeeDuddell：

　　图片轮换能有效地告诉市场营销或者高级管理人员他们的新想法被展现在主页上。

　　但是，它们对用户而言是无用的，并且由于它们看起来和广告十分相似用户常常“跳过”他们。因此，图片轮换的确是在主页上展示无用信息的好方法（它的作用请看本段第一句）。

　　总之，你可以用它们来承载用户在你的主页上一定会忽略的内容。或者，如果你愿意，干脆就再也别用图片轮换来展示信息来，再也不要了。

　　顺便说一句，这些观点不是我自己的观点，是基于成千上万的用户的测试数据产生的结论。

　　最后一个评论来自CraigKistler：

　　在我所做的所有测试中，主页上的图片轮转完全无效。一方面，除了展示的第一张图片，其他任何内容得到访问者交互的可能都会大大减少。而且，轮转图片中所展示的信息与访客想寻找内容相匹配的机会很渺茫。所以在这种情况下，图片轮转就成为了一个会被忽略的横幅。在数次测试之后，访问者在进入带有大型轮转图片页面时所做的第一件事就是向下滚动页面，跳过图片轮转，并开始寻找按钮开始自己的下一步动作。

　　这里有几个主要原因，告诉我们为什么图片轮转不起作用：

　　理由＃1：人眼对运动产生反应（会使我们错过重要的东西）

　　我们的大脑有3层，最古老的部分，在爬行动物身上也能看到。这一部分它主要与人类生存有关。对于爬行动物而言，地平线上任何突然的变化都有可能是生死攸关的问题。因此人眼对各种运动产生反应–包括不断移动的图像和轮播图片。

　　这听着很不错啊，对吧？

　　除非轮播图片是你网站上唯一的东西（这听着就不太好了！），无法展示更多的内容，这听着可不是一件好事。这意味着轮播图片带走了消费者对其他东西的关注–其实主页上除了轮播图片，还有其他重要的东西，比如定价，网站内容，产品讯息等等。

　　原因＃2：消息太多等于没有消息

　　那些浏览网页的人们由于广告盲区对轮播图片毫不关心，但即使是那些注意到图片轮播的人，也无法从中找出有用的信息。

　　访问者前往你的网站。在轮播图片上看到一条消息，然后开始阅读。“今年秋天你会……”啪！字不见了。通常图片播放的速度很快，快到人们甚至无法完成阅读就翻页了（即使那时候他们想要继续读）。

　　关注传递单一主要信息，然后采取行动，是更加有效的方法。

　　原因＃3：广告盲区

　　这些提供信息的图片轮播看起来就像广告似的，人们浏览的时候往往会跳过它们。

　　用户需要有控制权

　　轮播图片的实用性极低–它们切换得太快，导航图标太小（如果上面有任何导航图标的话），并且即使用户想要手动浏览它们呈现的内容，它们也经常常自动移动。用户界面设计的关键原则之一就是，让用户享有控制权。

　　现在有很多电子商务网站还在使用图片轮换–我认为并不是这些网站基于测试结果认为图片轮换有效，而是由于从众心理–“其他网站都有，我们的网站上也应该有”。

　　如果人们看到的第一个优惠不是他们喜欢的（或者与他们的兴趣，相关性比较低），那么怎么办呢？如果他们不喜欢三者中的任何一个呢？这些图片轮换肯定不会帮助你提高公司客户的长期价值。

　　但图片轮换值得称赞的一点是，一旦你点击图片轮播的箭头，图片自动轮换就会停止。不仅如此，当你稍后再回到这个网站时，网站会显示的是你想看的那张幻灯片。

　　我建议与其如此，不如呈现一个单一的静态报价。

　　你的图片轮换体验是什么呢？无论你是网站所有者还是用户，都来和我们说说你的体验吧。

　　在设计中，情绪的传达和氛围的营造通常是要看设计项目的目的是什么，而不同的配色和不同的元素组合，往往能够呈现出截然不同的风貌。相比之下，深色系网站常常会呈现出更为独特的氛围，传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的，但是好设计总归是让人过目难忘的。

　　想要借助深沉的色调来创造情绪相对独特的网站设计，是有一些可供遵循的常见的设计技巧，今天的文章，我们来分享一下这方面的内容。

　　深色，并不定是黑色
 

　　首先这一点必须明确，深色并不一定是黑色。

　　在选取配色的时候，网明亮的色彩当中添加黑色或者灰色所得出的色彩，通常会显得更加深沉浓重，这样的色彩中往往会包含之前的色调。

　　在上面的Hooligan这个网站当中，设计师不仅采用了深沉的黑色背景，而且采用了和黑色背景相当匹配的暗金色，两种深色之间色彩明暗依然存在对比，和白色的标题文本构成了三个层次，不仅富有视觉吸引力，而且创造出了沉稳厚重的氛围。

　　阴影的使用

　　阴影和光线往往是相伴出现的，而阴影所带来的舞台剧般的效果则充满了戏剧感和神秘感，这也是设计师喜欢它的原因，这样的设计会让用户心中产生兴趣和好奇心。

　　在上面的ClearMotion这个网站当中，车辆周围被阴影所包围，文本内容很容易吸引用户的注意力。同时，用户会好奇这辆车有什么特殊的地方，有什么地方看起来不太一样，黑暗的氛围下，用户的好奇心会身不由己地高涨起来。

　　黑色叠加层

　　用黑色的半透明层叠加到图像上，也是制造深色系背景的一种常见手法。在图片的选取和不同的透明度之下，背景图片所呈现出来的效果和氛围，是非常不同的。

　　透明度较低的情况下，黑色叠加图层会让用户看不清背景中的信息，这使得背景信息在整个设计中参与度较低。透明度较高的情况下，更多的背景元素会透过叠加层呈现出来，和前景元素产生交叉和互动。但是总的来说，黑色叠加层让元素之间产生对比，也使得行为召唤元素更容易发挥作用。

　　在上面的Fhoke这个网站当中，透明叠加层让背景中的场景适当地透露一点出来，但是真正吸引人注意力的，还是在标题和左侧的行为指引上。

　　简陋的画布

　　细节较多的背景让人觉得信息丰富，而粗陋的画布则更容易创造出一种虚无的感觉，相应的，后者是会让人更有探索的欲望。粗陋甚至赤裸的深色系画布很好地将神秘感和探索的欲望结合到了一起。

　　Dubois这个网站的背景同样非常的简单，没有纹理，只是通过均匀分布的小圆点来进行装饰，如果你仔细观察会发现这些点的分布、色彩其实是有微妙变化的，会引导你去注意位于整个页面底部的文本标题，虽然绝大多数的网站并不会把标题放在这样的位置上。

　　字体的选取

　　PunkisNotDead这个网站给你的感觉是否很独特？网站的设计非常清晰，识别度极高，网站本身还有音频组件，它的设计从视频到音频一应俱全，整体充满了朋克的风格。

　　黑暗的背景和明亮的字体色彩有助于实现这样的效果，但是字体的选取才是最关键的。想象一下使用普通的字体，是完全达不到这样的效果。尖锐粗糙的边缘和并不那么友好的可读性，让他在视觉上和朋克的精神保持了一致。

　　黑白配色

　　当设计完全失去色彩，仅仅保留黑白两色的情况下，会给人什么样的感觉呢？如果整个设计是以黑白两色为主，搭配少量其他的颜色，体验和氛围又是什么样的呢？

　　黑白配色和纯黑为主的配色一样，很容易创造出戏剧化的效果，这两种色彩本身所构成的冲突和对比就是原因。

　　黑白的强烈对比，常常会促使访客在浏览过程中忙于注意不同的细节，面对SuperRebel这个网站的时候，这种感觉就非常明显。打开页面之后，注意力会迅速被右上角的图片吸引，随后便忍不住把对比强烈的所有模块都扫视一遍。黑白色搭配大量信息很容易创造出信息过载的效果和体验。

　　图片的选取

　　JimmyChin在他的作品集网站的「关于」页面当中，他将自己的照片直接放了进去，色彩采用了单纯的黑色。

　　色彩的明暗和饱和度的选取，直接影响着整个设计的情绪，在这里，单纯的黑色让整个页面的形式感更强，而所呈现出来的感觉也非常的锐利。想想看，他穿着黄色的衬衫和绿色的裤子，那么整个图片所呈现出来的感觉是完全不同的，浮夸而醒目。

　　图片的选取对于情绪的表达和氛围的营造有着巨大的影响。

　　也可以营造轻松的氛围

　　许多深色系的网站都给人以深沉、怪异的感觉，但是深色并不完全代表着负面的情绪。深色系的网站同样可以被设计得轻松而富有活力，这主要取决于你如何将元素组合到一起。

　　在Atom这个网站当中，整个背景都采用了典型的深灰，但是卡通角色和轻盈的色调让网站凸显出一种可爱而有趣的感觉。这样的设计也能带来视觉奇观，并且不会让用户感觉到负面的感受。

　　这种设计让用户和网站之间的情感联系更轻松，让服务更容易为用户所接受。

　　结语

　　那些带有负面情绪和独特氛围的网站，你喜欢吗？带有这样情绪和氛围的网站，需要设计师花费更多的时间和精力来拿捏程度，来达成相应的设计目标，而且这样的设计并非不好。情绪化的设计，有趣而神秘的氛围，带有负面情感的表达，躁动甚至暴躁的设计，这些都有其独特的作用。

　　细节较多的背景让人觉得信息丰富，而粗陋的画布则更容易创造出一种虚无的感觉，相应的，后者是会让人更有探索的欲望。粗陋甚至赤裸的深色系画布很好地将神秘感和探索的欲望结合到了一起。

　　Dubois这个网站的背景同样非常的简单，没有纹理，只是通过均匀分布的小圆点来进行装饰，如果你仔细观察会发现这些点的分布、色彩其实是有微妙变化的，会引导你去注意位于整个页面底部的文本标题，虽然绝大多数的网站并不会把标题放在这样的位置上。