網(wǎng)站設(shè)計(jì)中內(nèi)容滑塊的使用
內(nèi)容滑塊，或者說(shuō)輪播，在當(dāng)前的網(wǎng)站設(shè)計(jì)中無(wú)處不在。當(dāng)然這也是有原因的。這個(gè)功能設(shè)置起來(lái)很簡(jiǎn)單，可以根據(jù)網(wǎng)站的外觀和感覺(jué)進(jìn)行自定義，能在相對(duì)較小的空間里展示創(chuàng)意內(nèi)容。
設(shè)計(jì)師因?yàn)樗撵`活性而愛(ài)上它--更容易講述一個(gè)引人入勝的故事，網(wǎng)站所有者喜歡它因?yàn)槟軌蛟谝粋€(gè)簡(jiǎn)單的網(wǎng)站元素里推廣多個(gè)元素。如果能夠做好，內(nèi)容滑塊能夠?yàn)槿魏尉W(wǎng)站帶來(lái)視覺(jué)沖擊。
大部分網(wǎng)站要添加滑塊很簡(jiǎn)單，而且有很多選擇，尤其是WordPress平臺(tái)上。但滑塊可不是萬(wàn)金油，每一個(gè)成功的滑塊背后都有無(wú)數(shù)個(gè)失敗的案例。那么什么時(shí)候才能夠用滑塊呢？我們總結(jié)了應(yīng)該使用滑塊的七種情景。
01. 產(chǎn)品導(dǎo)覽

滑塊簡(jiǎn)直就是為產(chǎn)品導(dǎo)覽而生的。如果把所有產(chǎn)品都展示出來(lái)，大量的信息會(huì)讓訪問(wèn)者無(wú)所適從，但如果把這些信息分解成更易于管理的小塊，那么訪問(wèn)者可能就不會(huì)那么容易地分心。當(dāng)信息需要依次連續(xù)出現(xiàn)時(shí)，比如產(chǎn)品導(dǎo)覽，請(qǐng)考慮使用滑塊。

　　信用卡應(yīng)用Square在網(wǎng)站上對(duì)滑塊的運(yùn)用

下面來(lái)看兩個(gè)例子。上圖中的Square是各公司用來(lái)接受手機(jī)或者其他設(shè)備進(jìn)行信用卡支付的設(shè)備。網(wǎng)站使用了滑塊來(lái)展示使用其服務(wù)的幾種場(chǎng)景，并突出了每個(gè)功能和優(yōu)點(diǎn)。

　　UserOnboard向訪問(wèn)者示范逐步使用流程
UserOnboard是一個(gè)致力于展示網(wǎng)站和移動(dòng)設(shè)備應(yīng)用精心設(shè)計(jì)的用戶(hù)使用流程的網(wǎng)站。該網(wǎng)站的目標(biāo)與滑塊的功能簡(jiǎn)直是天作之合。
02. 突出新內(nèi)容

滑塊是定時(shí)更新網(wǎng)站的理想工具。如果你使用的網(wǎng)站每天早晨更新新聞，那么你很可能每天都能看到內(nèi)容滑塊。事實(shí)上，這是這類(lèi)網(wǎng)站最常用的工具之一。

　　Discovery.com使用內(nèi)容滑塊，讓訪問(wèn)者輕松看到最新內(nèi)容

我們可以看看幾個(gè)知名的新聞與電視網(wǎng)，比如探索頻道（上圖）和Hulu（下圖）。這類(lèi)的媒體網(wǎng)站常常依靠滑塊來(lái)展示不斷變化的最新熱門(mén)文章和視頻等。如果你要提供頻繁變化的大量?jī)?nèi)容（尤其是視頻內(nèi)容）時(shí)，滑塊是非常好的選擇。

　　Hulu.com經(jīng)常會(huì)有視頻內(nèi)容，滑塊是展示它們的理想工具
03. 圖片集

有時(shí)候，一張或者幾張圖片，就能把你的品牌想要表達(dá)的意思傳達(dá)出來(lái)。無(wú)論是幾張全頁(yè)高分辨率照片，還是幾張小圖片，當(dāng)你需要展示圖片時(shí)，滑塊是當(dāng)之無(wú)愧的選。

　　Regent College的網(wǎng)站使用了一個(gè)自動(dòng)水平滑塊

為了突出其位置的自然美景和學(xué)生的多樣性，Regent College使用了有獨(dú)特設(shè)計(jì)元素的自動(dòng)水平滑塊作為吸引人的主頁(yè)元素。

04. 在線作品集

由于滑塊適合展示視覺(jué)內(nèi)容，因此已成為各種藝術(shù)家在線展示作品集的標(biāo)準(zhǔn)，從攝影師到平面設(shè)計(jì)師到網(wǎng)絡(luò)開(kāi)發(fā)人員。在極少的空間中，滑塊可以創(chuàng)造性地向潛在客戶(hù)展示幾乎任何類(lèi)型的作品。

　　Büro Maisengasse的滑塊就像一條晾衣繩

Büro Maisengasse（上圖）使用的滑塊非常有趣。使用箭頭來(lái)進(jìn)行水平導(dǎo)航并實(shí)現(xiàn)變焦，就像在沿著一根晾衣繩拖拽一樣。

　　Headway Themes的滑塊簡(jiǎn)單高效
Headway Themes使用的是一個(gè)簡(jiǎn)單的水平滑塊，在首頁(yè)偏下的位置，來(lái)展示使用了該網(wǎng)站主題的網(wǎng)站。
05. 電子商務(wù)

滑塊對(duì)于電子商務(wù)中的商品展示而言是好選擇。不論你要展示的是全系列產(chǎn)品，還是精選產(chǎn)品、最新產(chǎn)品，都是滑塊發(fā)揮作用的好地方。

　　The Seattle Cider Company的滑塊好契合品牌的審美

果酒商The Seattle Cider Company 網(wǎng)站首頁(yè)使用了極簡(jiǎn)風(fēng)格的導(dǎo)航，來(lái)展示其精品產(chǎn)品，成功地傳達(dá)了品牌的審美。

　　Hush的滑塊展示最新最熱門(mén)產(chǎn)品
Hush的網(wǎng)站采用了簡(jiǎn)潔的全頁(yè)水平滑塊來(lái)展示其最新最熱門(mén)產(chǎn)品。
06. 文本片段

滑塊可不僅僅限于視覺(jué)內(nèi)容。當(dāng)你需要展示一系列相關(guān)的文本片段或傳達(dá)關(guān)于網(wǎng)站的一些書(shū)面信息時(shí)，它們也是很好的選擇。

　　Desk.com的滑塊將訪問(wèn)者的注意力拉到大客戶(hù)的誠(chéng)意推薦上

Desk.com的首頁(yè)上有很多客戶(hù)評(píng)價(jià)，滑塊的使用可以很方便地展示每一個(gè)評(píng)論。

　　Heath Waller聯(lián)系頁(yè)面的滑塊發(fā)揮了在線名片的作用
網(wǎng)站設(shè)計(jì)師Heath Waller個(gè)人網(wǎng)站的首頁(yè)更多地發(fā)揮了名片的作用。美觀而簡(jiǎn)單的水平滑塊為訪問(wèn)者展示重要信息。
07. 講故事

講故事是滑塊的另一大作用。Google在推廣Chrome的電子書(shū)中使用了滑塊。有的會(huì)有酷炫的翻頁(yè)效果，非常實(shí)用。

　　電子書(shū)中使用滑塊進(jìn)行翻頁(yè)
20 Things I Learned About Browsers and the Web （上圖）使用了滑塊來(lái)進(jìn)行翻頁(yè)。這個(gè)功能讓用戶(hù)感覺(jué)閱讀起來(lái)更輕松，因?yàn)槊繌埢脽羝厦娴奈淖謹(jǐn)?shù)量有限。

本文標(biāo)題：網(wǎng)站設(shè)計(jì)中內(nèi)容滑塊的使用
網(wǎng)站URL：http://m.rwnh.cn/news/144194.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)