您需要AI互联网
顾问提供专业咨询
AI人工智能 · VR · AR · 智慧博物馆 · 智慧公园 · 景区 · 文创 · 动画 · 游戏 · 年度运营
大模型定制 · WEB3 · 元宇宙 · 区块链 · 高端网站建设 · 小程序 · APP · 微信 · H5 · 电商
网站设计中内容滑块的使用
标签: 网站设计
2017.04.18
  网站设计中内容滑块的使用

  内容滑块,或者说轮播,在当前的网站设计中无处不在。当然这也是有原因的。这个功能设置起来很简单,可以根据网站的外观和感觉进行自定义,能在相对较小的空间里展示创意内容。

  设计师因为它的灵活性而爱上它--更容易讲述一个引人入胜的故事,网站所有者喜欢它因为能够在一个简单的网站元素里推广多个元素。如果能够做好,内容滑块能够为任何网站带来视觉冲击。

  大部分网站要添加滑块很简单,而且有很多选择,尤其是WordPress平台上。但滑块可不是万金油,每一个成功的滑块背后都有无数个失败的案例。那么什么时候才能够用滑块呢?我们总结了应该使用滑块的七种情景。

  01. 产品导览

  滑块简直就是为产品导览而生的。如果把所有产品都展示出来,大量的信息会让访问者无所适从,但如果把这些信息分解成更易于管理的小块,那么访问者可能就不会那么容易地分心。当信息需要依次连续出现时,比如产品导览,请考虑使用滑块。


网站设计中内容滑块的使用


  信用卡应用Square在网站上对滑块的运用

  下面来看两个例子。上图中的Square是各公司用来接受手机或者其他设备进行信用卡支付的设备。网站使用了滑块来展示使用其服务的几种场景,并突出了每个功能和优点。




  UserOnboard向访问者示范逐步使用流程

  UserOnboard是一个致力于展示网站和移动设备应用精心设计的用户使用流程的网站。该网站的目标与滑块的功能简直是天作之合。

  02. 突出新内容

  滑块是定时更新网站的理想工具。如果你使用的网站每天早晨更新新闻,那么你很可能每天都能看到内容滑块。事实上,这是这类网站最常用的工具之一。

网站设计中内容滑块的使用


  Discovery.com使用内容滑块,让访问者轻松看到最新内容

  我们可以看看几个知名的新闻与电视网,比如探索频道(上图)和Hulu(下图)。这类的媒体网站常常依靠滑块来展示不断变化的最新热门文章和视频等。如果你要提供频繁变化的大量内容(尤其是视频内容)时,滑块是非常好的选择。




  Hulu.com经常会有视频内容,滑块是展示它们的理想工具

  03. 图片集

  有时候,一张或者几张图片,就能把你的品牌想要表达的意思传达出来。无论是几张全页高分辨率照片,还是几张小图片,当你需要展示图片时,滑块是当之无愧的首选。


网站设计中内容滑块的使用


  Regent College的网站使用了一个自动水平滑块

  为了突出其位置的自然美景和学生的多样性,Regent College使用了有独特设计元素的自动水平滑块作为吸引人的主页元素。


  04. 在线作品集

  由于滑块适合展示视觉内容,因此已成为各种艺术家在线展示作品集的标准,从摄影师到平面设计师到网络开发人员。在极少的空间中,滑块可以创造性地向潜在客户展示几乎任何类型的作品。




  Büro Maisengasse的滑块就像一条晾衣绳

  Büro Maisengasse (上图)使用的滑块非常有趣。使用箭头来进行水平导航并实现变焦,就像在沿着一根晾衣绳拖拽一样。


网站设计中内容滑块的使用


  Headway Themes的滑块简单高效

  Headway Themes使用的是一个简单的水平滑块,在首页偏下的位置,来展示使用了该网站主题的网站。

  05. 电子商务

  滑块对于电子商务中的商品展示而言是绝佳选择。不论你要展示的是全系列产品,还是精选产品、最新产品,都是滑块发挥作用的好地方。


网站设计中内容滑块的使用


  The Seattle Cider Company的滑块完美契合品牌的审美

  果酒商The Seattle Cider Company 网站首页使用了极简风格的导航,来展示其精品产品,成功地传达了品牌的审美。




  Hush的滑块展示最新最热门产品

  Hush的网站采用了简洁的全页水平滑块来展示其最新最热门产品。

  06. 文本片段

  滑块可不仅仅限于视觉内容。当你需要展示一系列相关的文本片段或传达关于网站的一些书面信息时,它们也是很好的选择。


网站设计中内容滑块的使用


  Desk.com的滑块将访问者的注意力拉到大客户的诚意推荐上

  Desk.com 的首页上有很多客户评价,滑块的使用可以很方便地展示每一个评论。


网站设计中内容滑块的使用


  Heath Waller联系页面的滑块发挥了在线名片的作用

  网站设计师Heath Waller个人网站的首页更多地发挥了名片的作用。美观而简单的水平滑块为访问者展示重要信息。

  07. 讲故事

  讲故事是滑块的另一大作用。Google在推广Chrome的电子书中使用了滑块。有的会有酷炫的翻页效果,非常实用。




  电子书中使用滑块进行翻页

  20 Things I Learned About Browsers and the Web  (上图)使用了滑块来进行翻页。这个功能让用户感觉阅读起来更轻松,因为每张幻灯片上面的文字数量有限。
400-6446-365 / 010-64928252 我想要个更针对我需求的方案
让决策变的简单
好的开始是成功的一半
请输入关键字