本文探讨了网页设计中图像轮播的使用，包括电子商务产品轮播、网络作品集轮播的设计趋势和互动功能。指出轮播在正确的环境中能增加价值，但应避免不必要的自动旋转和无用的装饰。强调设计应注重用户体验，为用户提供控制，并在适当页面使用轮播。
它们会产生什么样的好处，以及如何在布局中有效地使用它们？
但是图像轮播真的值得付出努力吗？
实际上， 在过去的5-10年中 ，这种趋势无济于事，其浏览器支持现在比以往任何时候都多。
网络上不乏轮播功能幻灯片放映 。
这些动态滑块存在很多争议 ，但我认为在正确的环境中制作滑块可以增加价值。
我想为对图像轮播感兴趣的网页设计师分享一些共同的趋势，实时示例和想法 。
电子商务产品轮播
目的是通过照片和文字保持清晰的信息密度，以讲出独特而有价值的故事来帮助销售产品。
电子商务世界充满了首页和产品页面上的旋转轮播。
电子商务产品滑块有两个主要展示位置 ：
- 在商店的首页上
- 在产品页面上
两者的工作方式不同，但目标相同 -以视觉方式销售产品。
示例1：Au Lit优质亚麻布–主页
查看Au Lit Fine Linens的主页，该主页使用全屏自动旋转式旋转木马来展示诸如羽绒被，枕头和床罩之类的不同产品。
每个幻灯片都指向网站上的不同页面，以引导客户进行购物体验 。
实际上，首次进入页面时，此滑块应该是引起您注意的第一件事。
图像占据了主页的整个宽度 ，并且显示在折叠上方 。
第一次滑入页面时，此滑块可能有点吓人，但有了按钮链接和覆盖文字 ，对于只想潜入并购物的访问者来说，这也非常令人鼓舞。
示例2：Eden手机壳–产品页面
它使用一个自动旋转的滑块来展示产品的图像。
您可以在Eden手机壳产品页面上看到更具体的示例。
在查看产品时，我希望控制图像之间的切换 。
我发现这些在电子商务世界中有点“太多”。
例如，“ 人为 设计”页面 为每张照片使用缩略图，这更加令人鼓舞，并为用户提供了更多控制权。
更好的选择是制作图片库， 并控制访问者 。
网络作品集轮播
确实有人会进行案例研究或撰写有关某个项目的文章，但是投资组合网站上的许多轮播只是为了炫耀视觉作品 。
在线网站的投资组合有点不同，因为这些幻灯片并不总是点击进入另一个页面 。
示例1：Biboun –主页
单独的幻灯片会指向投资组合的内部页面，这些页面涵盖了包含多个照片的整个项目 。
这位法国艺术家以Biboun的名字工作， 主页上有一个轮播滑块 ， 其中包含艺术品片段 。
除非随机展示一些特定作品，否则仅展示它们的随机清单是没有意义的。
这可能是在投资组合网站上使用滑块的最佳方法 。
尽管我知道有些人出于充分的理由而讨厌自动旋转幻灯片，但在这样的简约布局下，我很难抱怨这种设计功能。
在Biboun的滑块中，所有部件都很精致 ，而且也不占用太多空间 。
示例2：Aaron Blaise的网站-主页
亚伦·布莱斯（Aaron Blaise）在迪斯尼工作了几十年，他具有证明这一点的技能。
我非常喜欢在亚伦·布莱斯（Aaron Blaise）网站上找到的示例，因为他以作品集的形式展示了他的作品 ，但大多数情况下都是使用该网站来出售他的艺术视频 。
每张幻灯片都有一些与图像相关的内容 ，它可以帮助亚伦将注意力吸引到他的最新视频课上 ，这些视频课教年轻艺术家如何掌握特定技能。
尽管他网站上的首页滑块会自动旋转，但我发现它并不令人讨厌或令人讨厌。
如果您能获得这两件事，那么我不会反对个人投资组合网站中的此类功能。
很棒的组合轮播着重于视觉效果 ，并引导访问者进一步进入网站。
共同的设计趋势
如果您看一下我上面的一些示例，您会发现通常有两种不同类型的滑块： 全屏和固定宽度 。
但这也迫使您找到在高分辨率显示器上全屏仍看起来不错的高质量图像 。
如果布局跨越页面的整个宽度，则也有必要扩大滑块。
这些风格选择通常与布局及其可容纳的内容量有关。
它们很容易控制 ，而且通常不那么高 -使访问者更容易忽略他们的意愿。
我个人更喜欢固定宽度样式，就像您在两个艺术作品集示例中看到的那样。
尼尔森·诺曼集团（Nielsen Norman Group）进行的一项伟大案例研究表明，最好不要使用自动前进滑块 。
还请考虑自动前进幻灯片的价值，以及用户捕获此内容有多困难 。
从某种意义上说，我支持这种方法，因为它在内存上的占用较少，浏览器中的动画和运动更少，而且大多数人也不喜欢自动旋转轮播-您应该始终迎合您的听众 。
不幸的是，决定是否使滑块自动旋转是一个反复试验的领域 。
但是，我不能说添加自动前进滑块绝对不值得，尤其是因为使用静态滑块时，您不会获得太多视图 ，并且您还需要使第一张幻灯片成为最重要的滑块，因为许多用户将无法继续操作转到下一张幻灯片。
不惜一切代价避免的事情
查看或单击下面的屏幕截图，然后尝试猜测可能是什么。
我个人认为这是一件重要的事情， 属于“不惜一切代价避免” 。
它不会自动旋转，这很棒，但是滑梯除了装饰之外也没有其他用途 。
Yozenn cafe网站使用全屏标题滑块。
可以将它们全部添加到主页背景中，而无需使用滑块，以免造成混乱和多余的千字节JavaScript。
图片没有链接到任何地方 ，并且展示了少数产品。
如果图像具有链接或随附的文本，则它们至少更相关。
我认为这种背景滑动功能不会给已经拥挤的网站增加太多价值。
可以自由使用标题部分中占据整个页面的图像，但是，如果它们在任何地方都没有链接或提供任何真实信息，则请勿将其变成轮播。
互动功能
导航样式多种多样 ，但最受欢迎：
用户导航轮播的方式会影响设计本身。
- 基于点的导航
- 箭头导航
- 缩略图导航
- 列出链接或标题项
最常见的是点导航 ，您可以在数百个现代网站上找到它们。
范例1：首页别致–主页
其他两个空点表示供用户浏览的潜在幻灯片 。
每个图像都会自动旋转，而系列中的相关点将被黑色填充 。
别致的家居就是一个很好的例子，在滑块下方使用三个小点表示导航。
它与许多设计师不喜欢的汉堡菜单属于同一类别，但是用户已经意识到了这一点 ，并且本能地知道如何使用它。
这是许多用户已经认识到的流行设计模式 。
示例2：纯循环–主页
这样，用户既可以进行前进和后退导航，又可以通过底部的点链接看到“整体”导航 。
Pure Cycles的主页使用点和箭头导航的组合 。
视觉幻灯片的难点在于，许多元素难以区分，因此箭头和点很容易融合到背景中 。
实际上，在这个示例中我发现点链接很难看清。
示例3：IGN –主页
每个链接都指向单独的幻灯片，该幻灯片最终指向文章页面 。
对于想要销售头条新闻而不是产品的发布商来说，这种情况非常普遍。
在IGN的首页上，您会找到另一个使用标题链接进行导航的 自动旋转轮播 。
这些链接可以替换为缩略图 ，甚至可以包括每个故事的缩略图-但是，轮播显示了视觉效果 ，因此省略缩略图实际上节省了空间。
考虑访问者的目标 ，并设计最佳的用户体验。
不同的网站出于不同的原因使用不同的导航样式。
重要要点
这可能是访客以前没有的信息，或者可能导致访客未找到其他页面。
您应该致力于通过轮播产生真正的价值或其他信息 。
只要轮播有目的 ，并且看起来不像广告 ，您的设计就应该做得很好。
尽量避免自动旋转轮播， 仅在主要目标网页 （首页是其中的一个示例） 上使用它们 。
如果您正在寻找有关网络轮播的更多信息，请查看以下一些帖子：
扫一扫
1510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
