宁波建设网站：图像旋转木马网页设计-效益和最佳实践

没有短缺 旋转木马特征幻灯片 在网络上。 但事实上,这一趋势已经什么也没做 在过去的5 - 10年发展 浏览器支持现在比以往任何时候都多。 但是图像旋转木马真的值得吗? 他们生产什么类型的好处,他们应如何高效地使用布局?

我想分享一些 常见的趋势,生活的例子,和想法 对于网页设计师来说感兴趣的图像旋转木马。 这些动态滑动条 大量争论 ,但我确实认为他们增加价值,制定正确的上下文。

推荐阅读: 25个免费的幻灯片WordPress插件——最好的

电子商务产品旋转木马

电子商务的世界充满了旋转的旋转木马上页和产品页。 我们宁波建设网站的目标是 保持一个清晰的信息密度 照片和文字 告诉一个独特而有价值的故事 帮助销售产品。

有 两个主要位置 电子商务产品滑块:

1. 在一家商店的主页

2. 在产品页面上

他们都不同,但工作 为同样的目标 ——以可视化的方式销售产品。

示例1:非盟点燃细亚麻布,主页

看看主页 非盟点燃好床单 ,这 使用一个全屏auto-rotating旋转木马 展示不同的产品,如羽绒被,枕头,床单。

这些图片 完整的宽度 的主页,和他们 出现高于褶皱 . 事实上,这个滑块应该抓住你的注意力的第一件事当第一次登陆页面。 每个幻灯片会导致一个不同的页面在网站上 引导顾客购物体验 。

这个滑块可以有点吓人当第一次登陆页面,但是 按钮链接 和 覆盖文本 也可以非常鼓励游客只是想潜水商店。

示例2:伊甸园电话——产品页面

你可以看到一个更具体的例子 伊甸园的电话情况 产品页面。 它使用一个 auto-rotating滑块 展示产品的图片。

我发现这些小“太多”在电子商务的世界。 我想要当看一个产品 控制切换图片 。

更好的选择是美术馆的图像 与控制给访问者 . 例如, 由人类设计页面 使用 为每个照片缩略图 多鼓励,向用户授予更多的控制。

Web组合旋转木马

在线网站组合有点不同,因为这些幻灯片 不要总是点击到另一个页面 . 的确,一些会导致一个案例研究或写了一个项目,但许多旋转木马在组合网站只是为了 展示视觉工作 。

示例1:Biboun -主页

下的法国艺术家工作的名字 Biboun 有一个 旋转木马滑块 在主页上 艺术作品的片段 . 单独的幻灯片导致内部页面的组合 覆盖整个项目 与多个照片。

这可能是 最好的方法做一个滑块 在一个投资组合的网站上。 只展示一个随机的工作是毫无意义的,除非这些具体工作有一个理由了。

所有的作品都是 精致的 Biboun的滑块,它 不会占用太多空间 要么。 虽然我知道有些人讨厌auto-rotating幻灯片有充分的理由,在这样一个极简主义者布局我很难抱怨这个设计功能。

示例2:亚伦布莱斯的网站主页

我真的很喜欢上发现的例子 亚伦布莱斯的网站 因为他 展示他的工作作为一个投资组合 ,但主要是使用这个网站 卖他的艺术视频 . 亚伦布莱斯在迪斯尼工作了几十年,他的技能来证明这一点。

宁波建设网站虽然主页滑块auto-rotate在自己的网站上,我不觉得它非常恼人的或者不合适的。 每个幻灯片 有一点相关内容的形象 ,它帮助亚伦 关注他的最新视频课程 教年轻艺术家如何掌握特定技能。

一个伟大的组合旋转木马 专注于视觉效果 , 进一步引导游客 进入网站。 如果你可以得到这两个东西我不会反对这样的功能在个人投资组合的网站。

常见的设计趋势

如果你看看我的一些上面的例子通常你会发现有两种不同的滑块: 全屏 和 固定宽度 。

这些文体的选择往往 与布局 它可以容纳多少内容。 如果一个布局横跨整个页面的宽度加宽滑块是有意义的。 但这也迫使你 找到高质量图像 仍然看起来不错在全屏大分辨率显示器。

我个人更喜欢的固定宽度的风格就像你会看到两个艺术组合的例子。 这些都是 更容易控制 经常,他们 不一样高 ,方便游客 简单地忽略他们 如果他们的愿望。

还要考虑的价值auto-advancing幻灯片 是多么困难吗 为用户捕捉这些内容。 有一个伟大的 案例研究 尼尔森诺曼集团表明最好 没有auto-advancing滑块 。

我同意这种方法,它的 更密集的记忆 用更少的动画和运动在浏览器中,大多数人也不喜欢auto-rotating旋转木马,你应该 迎合你的观众 。

但是我不能说不值得添加一个auto-advancing滑块,特别是与静态滑块 不要让尽可能多的观点 ,你也需要 让你的第一张幻灯片最重要的 尽可能多的用户不会继续下一张幻灯片。 决定是否做一个滑块auto-rotating是不幸的一个 的试错 。

如何避免不惜一切代价

这里有一个重要的事情,我个人认为 属于“避免不惜一切代价” . 看一看或点击下面的截图,并试着猜测它可能是什么。

的 Yozenn咖啡馆 网站使用全屏头滑块。 它并不auto-rotate是伟大的,然而幻灯片 没有任何目的以外的其他装饰 。

这些图片 不联系任何地方 ,他们炫耀少量的产品。 他们都可以 添加到主页背景 没有滑块保存混乱和额外的JavaScript kb。

我认为这个背景滑动特性不增加多少价值already-cramped网站。 如果图片链接或伴随文本至少更相关。

随意使用图像在你的头部分,占据整个页面,但是如果他们 不联系任何地方或提供任何真正的信息 那就不要把他们变成一个旋转木马。

互动功能

用户浏览一个旋转木马影响设计本身。 有 各种导航样式 ,但这些是最受欢迎的:

• 基于导航

• 箭头导航

• 缩略图导航

• 链接或者标题列表项

最常见的是 点导航 ,你会发现数以百计的现代网站。

示例1:别致——主页

别致的在家里就是一个很好的例子 三个小点滑下 表示导航。 每个图像通过自动旋转,和本系列的相关点 用黑色填充 . 另外两个空点 表示潜在的幻灯片 供用户浏览。

这是一个 流行的设计模式 许多用户已经承认。 它属于同一类别 汉堡菜单 许多设计师不喜欢,但是用户已经认识它 ,本能地知道如何使用它。

示例2:纯粹的周期——主页

的主页 纯粹的周期 使用一个 点和箭头导航的组合 . 这种方式用户前后导航,但是 也看到了“整体”导航 通过点在底部的链接。

其实我找到点链接在这个例子中很难看到的。 视觉的幻灯片是许多元素的困难不容易区分,所以箭头,点可以 容易融入背景 。

示例3:IGN -主页

的主页上 IGN 你会发现另一个 auto-rotating旋转木马 使用 标题链接的导航 . 这对出版商想是很常见的 卖报纸的头条 而不是产品。 最终每个链接到单独的幻灯片 导致文章页面 。

这些链接 可以替换为缩略图吗 从每个故事——然而,甚至包括缩略图 视觉方面所示旋转木马 ,所以省略缩略图实际上节省空间。

不同的网站使用不同的导航方式不同的原因。 考虑你的访问者的目标(s) 和设计最好的用户体验。

关键的外卖

你应该 产生真正的价值,或额外的信息 旋转木马。 这可能是之前客人没有信息,或者它可能导致网页访问者可能没有发现。

尽量避免auto-rotating旋转木马 只使用在主要的登陆页面 (主页是一个例子)。 只要旋转木马 有一个目的 , 看起来不像一个广告 ,您的设计应该做的很好。