成都网站开发与建设

2022-07-13 分类：网站建设

成都网站开发与建设网页设计中的图像轮播-优势和做法网络上不乏轮播功能幻灯片放映。实际上，在过去的5-10年中，这种趋势无济于事，其浏览器支持现在比以往任何时候都多。但是图像轮播真的值得努力吗？它们产生什么样的好处，以及如何在布局中有效地使用它们？

我想为对图像轮播感兴趣的网页设计师分享一些共同的趋势，实时示例和想法。这些动态滑块存在很多争议，但我认为在正确的环境中制作滑块可以增加价值。

30个免费WordPress幻灯片插件（2018）

幻灯片是在以图片为中心或以内容为中心的网站上向访问者展示特色图片的元素。

电子商务产品轮播

电子商务世界充满了首页和产品页面上的旋转轮播。目的是通过照片和文字保持清晰的信息密度，以讲出独特而有价值的故事来帮助销售产品。

电子商务产品滑块有两个主要展示位置：

在商店的首页上

在产品页面上

两者的工作方式不同，但目标相同 -以视觉方式销售产品。

示例1：Au Lit优质亚麻布–主页

看看在主页金亮精细床单，即采用了全屏自动旋转传送带炫耀不同的产品，如羽绒被，枕头和床套。

Au Lit高级亚麻首页

图像占据了主页的整个宽度，并且显示在折叠上方。实际上，首次进入页面时，此滑块应该是引起您注意的第一件事。每个幻灯片都指向网站上的不同页面，以引导客户进行购物体验。

第一次滑入页面时，此滑块可能有点吓人，但有了按钮链接和覆盖文字，对于只想潜入并购物的访问者来说，这也非常令人鼓舞。

示例2：Eden手机壳–产品页面

您可以在Eden手机壳产品页面上看到更具体的示例。它使用自动旋转的滑块来展示产品的图像。

Eden Boxs Case产品页面

我发现这些在电子商务世界中有点“太多”。在查看产品时，我希望控制图像之间的切换。

更好的选择是制作图片库，并控制访问者。例如，“ 人为设计”页面为每张照片使用缩略图，这更加令人鼓舞，并为用户提供了更多控制权。

网络作品集轮播

在线网站的投资组合有点不同，因为这些幻灯片并不总是点击进入另一个页面。确实有些人可以进行案例研究或撰写有关项目的文章，但是投资组合网站上的许多轮播只是为了炫耀视觉作品。

示例1：Biboun –主页

这位法国艺术家以Biboun的名义工作，主页上有一个轮播滑块，其中包含艺术品片段。单独的幻灯片会指向作品集的内部页面，这些页面涵盖了包含多个照片的整个项目。

Biboun主页

这可能是在投资组合网站上使用滑块的方法。除非随机展示一些特定作品，否则仅展示它们的随机清单是没有意义的。

在Biboun的滑块中，所有片段都很精致，而且也不占用太多空间。尽管我知道有些人出于很好的理由而讨厌自动旋转幻灯片，但在这样的简约布局下，我很难抱怨这种设计功能。

示例2：Aaron Blaise的网站-主页

我非常喜欢在亚伦·布莱斯（Aaron Blaise）网站上找到的示例，因为他以作品集的形式展示了他的作品，但是大多数情况下都是使用该网站来出售他的艺术视频。亚伦·布莱斯（Aaron Blaise）在迪斯尼工作了几十年，他拥有证明这一点的技能。

亚伦·布莱斯艺术老师主页

尽管他网站上的主页滑块确实会自动旋转，但我发现它并没有令人讨厌的烦恼或错位。每张幻灯片都有一些与图像有关的内容，它可以帮助亚伦将注意力吸引到他的最新视频课程上，这些课程可以教会年轻艺术家如何掌握特定技能。

很棒的组合轮播注重视觉效果，并引导访问者进一步进入网站。如果您能获得这两件事，那么我不会反对个人投资组合网站中的此类功能。

共同的设计趋势

如果您看一下我上面的一些示例，您会发现通常有两种不同类型的滑块：全屏和固定宽度。

这些风格选择通常与布局及其可容纳的内容量有关。如果布局跨越页面的整个宽度，则也有必要扩大滑块。但这也迫使您找到在高分辨率显示器上全屏仍看起来不错的高质量图像。

我个人更喜欢固定宽度样式，就像您在两个艺术作品集示例中看到的那样。这些控件更容易控制，并且通常不那么高 -使访问者更容易忽略它们，只要他们愿意。

还应考虑自动前进幻灯片的价值，以及用户捕获此内容有多困难。尼尔森·诺曼集团（Nielsen Norman Group）进行的一项伟大案例研究表明，最好不要使用自动前进滑块。

从某种意义上来说，我支持这种方法，因为它在内存上的占用较少，浏览器中的动画和运动更少，而且大多数人也不喜欢自动旋转轮播-您应该始终迎合观众的需求。

但是我不能说添加自动前进滑块绝对不值得，尤其是因为使用静态滑块时，您不会获得太多视图，并且您还需要使第一张幻灯片成为最重要的滑块，因为许多用户将无法继续操作转到下一张幻灯片。不幸的是，决定是否使滑块自动旋转是一个反复试验的领域。

不惜一切代价避免的事情

我个人认为这是一件重要的事情，属于“不惜一切代价避免”。查看或单击下面的屏幕截图，然后尝试猜测可能是什么。

Yozenn Cafe主页

该Yozenn咖啡厅网站使用全屏头滑块。它不会自动旋转，很棒，但是滑梯除了装饰之外也没有其他用途。

图片没有链接到任何地方，并且展示了少数产品。可以将它们全部添加到主页背景中，而无需使用滑块，以免造成混乱和多余的千字节JavaScript。

我认为这种背景滑动功能不会给已经拥挤的网站增加太多价值。如果图像具有链接或随附的文本，则它们至少更相关。

可以自由使用标题部分中占据整个页面的图像，但是，如果它们在任何地方都没有链接或提供任何真实信息，则请勿将其变成轮播。

互动功能

用户导航轮播的方式会影响设计本身。这里有各种风格的导航，但这些是最流行：

基于点的导航

箭头导航

缩略图导航

列出链接或标题项

最常见的是点导航，您可以在数百个现代网站上找到它们。

示例1：别致在家–主页

别致的家居就是一个很好的例子，在滑块下方使用三个小点表示导航。每个图像都会自动旋转，而系列中的相关点将被黑色填充。其他两个空点表示供用户浏览的潜在幻灯片。

别致的家庭旋转木马

这是许多用户已经意识到的流行设计模式。它与许多设计师不喜欢的汉堡菜单属于同一类别，但是用户已经意识到了这一点，并且本能地知道如何使用它。

示例2：纯周期–主页

Pure Cycles的主页使用点和箭头导航的组合。这样，用户既可以进行前进和后退导航，又可以通过底部的点链接看到“整体”导航。

纯周期轮播设计

实际上，在这个示例中我发现点链接很难看清。视觉幻灯片的难点在于，许多元素难以区分，因此箭头和点很容易融合到背景中。

示例3：IGN –主页

在IGN的首页上，您会找到另一个使用标题链接进行导航的自动旋转轮播。对于想要出售头条新闻而不是产品的发布商来说，这种情况非常普遍。每个链接都指向单独的幻灯片，该幻灯片最终指向文章页面。

IGN轮播首页

这些链接可以替换为缩略图，甚至可以包括每个故事的缩略图-但是，轮播中显示了视觉效果，因此省略缩略图实际上节省了空间。

不同的网站出于不同的原因而使用不同的导航样式。考虑访问者的目标，并设计的用户体验。

重要要点

您应该致力于通过轮播带来真正的价值或其他信息。这可能是访客以前没有的信息，或者可能导致访客未找到其他页面。

尽量避免自动旋转轮播，仅在主要目标网页（首页是其中的一个示例）上使用它们。只要轮播有目的，并且看起来不像广告，您的设计就应该做得很好。

如果您正在寻找有关网络轮播的更多信息，请查看以下一些帖子：

旋转木马，布拉德·弗罗斯特（Brad Frost）

设计用户友好的首页轮播的8个UX要求

轮播的可用性：为内容超载的网站设计有效的UI

文章名称：成都网站开发与建设
网页链接：https://www.cdcxhl.com/news/177371.html

成都网站建设公司_创新互联，为您提供商城网站、ChatGPT、移动网站建设、网站排名、App设计、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容