石家莊網(wǎng)站開發(fā)與建設(shè)網(wǎng)頁設(shè)計(jì)中的圖像輪播-優(yōu)勢和最佳做法
網(wǎng)絡(luò)上不乏輪播功能幻燈片放映。實(shí)際上，在過去的5-10年中，這種趨勢無濟(jì)于事，其瀏覽器支持現(xiàn)在比以往任何時(shí)候都多。但是圖像輪播真的值得努力嗎？它們產(chǎn)生什么樣的好處，以及如何在布局中有效地使用它們？
我想為對圖像輪播感興趣的網(wǎng)頁設(shè)計(jì)師分享一些共同的趨勢，實(shí)時(shí)示例和想法。這些動(dòng)態(tài)滑塊存在很多爭議，但我認(rèn)為在正確的環(huán)境中制作滑塊可以增加價(jià)值。
30個(gè)最佳免費(fèi)WordPress幻燈片插件（2018）
30個(gè)最佳免費(fèi)WordPress幻燈片插件（2018）
幻燈片是在以圖片為中心或以內(nèi)容為中心的網(wǎng)站上向訪問者展示特色圖片的最佳元素。
閱讀更多
電子商務(wù)產(chǎn)品輪播
電子商務(wù)世界充滿了首頁和產(chǎn)品頁面上的旋轉(zhuǎn)輪播。目的是通過照片和文字保持清晰的信息密度，以講出獨(dú)特而有價(jià)值的故事來幫助銷售產(chǎn)品。
電子商務(wù)產(chǎn)品滑塊有兩個(gè)主要展示位置：
在商店的首頁上
在產(chǎn)品頁面上
兩者的工作方式不同，但目標(biāo)相同 -以視覺方式銷售產(chǎn)品。
示例1：Au Lit優(yōu)質(zhì)亞麻布–主頁
看看在主頁金亮精細(xì)床單，即采用了全屏自動(dòng)旋轉(zhuǎn)傳送帶炫耀不同的產(chǎn)品，如羽絨被，枕頭和床套。
Au Lit高級亞麻首頁
圖像占據(jù)了主頁的整個(gè)寬度，并且顯示在折疊上方。實(shí)際上，首次進(jìn)入頁面時(shí)，此滑塊應(yīng)該是引起您注意的第一件事。每個(gè)幻燈片都指向網(wǎng)站上的不同頁面，以引導(dǎo)客戶進(jìn)行購物體驗(yàn)。
第一次滑入頁面時(shí)，此滑塊可能有點(diǎn)嚇人，但有了按鈕鏈接和覆蓋文字，對于只想潛入并購物的訪問者來說，這也非常令人鼓舞。
示例2：Eden手機(jī)殼–產(chǎn)品頁面
您可以在Eden手機(jī)殼產(chǎn)品頁面上看到更具體的示例。它使用自動(dòng)旋轉(zhuǎn)的滑塊來展示產(chǎn)品的圖像。
Eden Boxs Case產(chǎn)品頁面
我發(fā)現(xiàn)這些在電子商務(wù)世界中有點(diǎn)“太多”。在查看產(chǎn)品時(shí)，我希望控制圖像之間的切換。
更好的選擇是制作圖片庫，并控制訪問者。例如，“ 人為設(shè)計(jì)”頁面為每張照片使用縮略圖，這更加令人鼓舞，并為用戶提供了更多控制權(quán)。
網(wǎng)絡(luò)作品集輪播
在線網(wǎng)站的投資組合有點(diǎn)不同，因?yàn)檫@些幻燈片并不總是點(diǎn)擊進(jìn)入另一個(gè)頁面。確實(shí)有些人可以進(jìn)行案例研究或撰寫有關(guān)項(xiàng)目的文章，但是投資組合網(wǎng)站上的許多輪播只是為了炫耀視覺作品。
示例1：Biboun –主頁
這位法國藝術(shù)家以Biboun的名義工作，主頁上有一個(gè)輪播滑塊，其中包含藝術(shù)品片段。單獨(dú)的幻燈片會(huì)指向作品集的內(nèi)部頁面，這些頁面涵蓋了包含多個(gè)照片的整個(gè)項(xiàng)目。
Biboun主頁
這可能是在投資組合網(wǎng)站上使用滑塊的最佳方法。除非隨機(jī)展示一些特定作品，否則僅展示它們的隨機(jī)清單是沒有意義的。
在Biboun的滑塊中，所有片段都很精致，而且也不占用太多空間。盡管我知道有些人出于很好的理由而討厭自動(dòng)旋轉(zhuǎn)幻燈片，但在這樣的簡約布局下，我很難抱怨這種設(shè)計(jì)功能。
示例2：Aaron Blaise的網(wǎng)站-主頁
我非常喜歡在亞倫·布萊斯（Aaron Blaise）網(wǎng)站上找到的示例，因?yàn)樗宰髌芳男问秸故玖怂淖髌罚谴蠖鄶?shù)情況下都是使用該網(wǎng)站來出售他的藝術(shù)視頻。亞倫·布萊斯（Aaron Blaise）在迪斯尼工作了幾十年，他擁有證明這一點(diǎn)的技能。
亞倫·布萊斯藝術(shù)老師主頁
盡管他網(wǎng)站上的主頁滑塊確實(shí)會(huì)自動(dòng)旋轉(zhuǎn)，但我發(fā)現(xiàn)它并沒有令人討厭的煩惱或錯(cuò)位。每張幻燈片都有一些與圖像有關(guān)的內(nèi)容，它可以幫助亞倫將注意力吸引到他的最新視頻課程上，這些課程可以教會(huì)年輕藝術(shù)家如何掌握特定技能。
很棒的組合輪播注重視覺效果，并引導(dǎo)訪問者進(jìn)一步進(jìn)入網(wǎng)站。如果您能獲得這兩件事，那么我不會(huì)反對個(gè)人投資組合網(wǎng)站中的此類功能。
共同的設(shè)計(jì)趨勢
如果您看一下我上面的一些示例，您會(huì)發(fā)現(xiàn)通常有兩種不同類型的滑塊：全屏和固定寬度。
這些風(fēng)格選擇通常與布局及其可容納的內(nèi)容量有關(guān)。如果布局跨越頁面的整個(gè)寬度，則也有必要擴(kuò)大滑塊。但這也迫使您找到在高分辨率顯示器上全屏仍看起來不錯(cuò)的高質(zhì)量圖像。
我個(gè)人更喜歡固定寬度樣式，就像您在兩個(gè)藝術(shù)作品集示例中看到的那樣。這些控件更容易控制，并且通常不那么高 -使訪問者更容易忽略它們，只要他們愿意。
還應(yīng)考慮自動(dòng)前進(jìn)幻燈片的價(jià)值，以及用戶捕獲此內(nèi)容有多困難。尼爾森·諾曼集團(tuán)（Nielsen Norman Group）進(jìn)行的一項(xiàng)偉大案例研究表明，最好不要使用自動(dòng)前進(jìn)滑塊。
從某種意義上來說，我支持這種方法，因?yàn)樗趦?nèi)存上的占用較少，瀏覽器中的動(dòng)畫和運(yùn)動(dòng)更少，而且大多數(shù)人也不喜歡自動(dòng)旋轉(zhuǎn)輪播-您應(yīng)該始終迎合觀眾的需求。
但是我不能說添加自動(dòng)前進(jìn)滑塊絕對不值得，尤其是因?yàn)槭褂渺o態(tài)滑塊時(shí)，您不會(huì)獲得太多視圖，并且您還需要使第一張幻燈片成為最重要的滑塊，因?yàn)樵S多用戶將無法繼續(xù)操作轉(zhuǎn)到下一張幻燈片。不幸的是，決定是否使滑塊自動(dòng)旋轉(zhuǎn)是一個(gè)反復(fù)試驗(yàn)的領(lǐng)域。
不惜一切代價(jià)避免的事情
我個(gè)人認(rèn)為這是一件重要的事情，屬于“不惜一切代價(jià)避免”。查看或單擊下面的屏幕截圖，然后嘗試猜測可能是什么。
Yozenn Cafe主頁
該Yozenn咖啡廳網(wǎng)站使用全屏頭滑塊。它不會(huì)自動(dòng)旋轉(zhuǎn)，很棒，但是滑梯除了裝飾之外也沒有其他用途。
圖片沒有鏈接到任何地方，并且展示了少數(shù)產(chǎn)品。可以將它們?nèi)刻砑拥街黜摫尘爸?，而無需使用滑塊，以免造成混亂和多余的千字節(jié)JavaScript。
我認(rèn)為這種背景滑動(dòng)功能不會(huì)給已經(jīng)擁擠的網(wǎng)站增加太多價(jià)值。如果圖像具有鏈接或隨附的文本，則它們至少更相關(guān)。
可以自由使用標(biāo)題部分中占據(jù)整個(gè)頁面的圖像，但是，如果它們在任何地方都沒有鏈接或提供任何真實(shí)信息，則請勿將其變成輪播。
互動(dòng)功能
用戶導(dǎo)航輪播的方式會(huì)影響設(shè)計(jì)本身。這里有各種風(fēng)格的導(dǎo)航，但這些是最流行：
基于點(diǎn)的導(dǎo)航
箭頭導(dǎo)航
縮略圖導(dǎo)航
列出鏈接或標(biāo)題項(xiàng)
最常見的是點(diǎn)導(dǎo)航，您可以在數(shù)百個(gè)現(xiàn)代網(wǎng)站上找到它們。
示例1：別致在家–主頁
別致的家居就是一個(gè)很好的例子，在滑塊下方使用三個(gè)小點(diǎn)表示導(dǎo)航。每個(gè)圖像都會(huì)自動(dòng)旋轉(zhuǎn)，而系列中的相關(guān)點(diǎn)將被黑色填充。其他兩個(gè)空點(diǎn)表示供用戶瀏覽的潛在幻燈片。
別致的家庭旋轉(zhuǎn)木馬
這是許多用戶已經(jīng)意識到的流行設(shè)計(jì)模式。它與許多設(shè)計(jì)師不喜歡的漢堡菜單屬于同一類別，但是用戶已經(jīng)意識到了這一點(diǎn)，并且本能地知道如何使用它。
示例2：純周期–主頁
Pure Cycles的主頁使用點(diǎn)和箭頭導(dǎo)航的組合。這樣，用戶既可以進(jìn)行前進(jìn)和后退導(dǎo)航，又可以通過底部的點(diǎn)鏈接看到“整體”導(dǎo)航。
純周期輪播設(shè)計(jì)
實(shí)際上，在這個(gè)示例中我發(fā)現(xiàn)點(diǎn)鏈接很難看清。視覺幻燈片的難點(diǎn)在于，許多元素難以區(qū)分，因此箭頭和點(diǎn)很容易融合到背景中。
示例3：IGN –主頁
在IGN的首頁上，您會(huì)找到另一個(gè)使用標(biāo)題鏈接進(jìn)行導(dǎo)航的自動(dòng)旋轉(zhuǎn)輪播。對于想要出售頭條新聞而不是產(chǎn)品的發(fā)布商來說，這種情況非常普遍。每個(gè)鏈接都指向單獨(dú)的幻燈片，該幻燈片最終指向文章頁面。
IGN輪播首頁
這些鏈接可以替換為縮略圖，甚至可以包括每個(gè)故事的縮略圖-但是，輪播中顯示了視覺效果，因此省略縮略圖實(shí)際上節(jié)省了空間。
不同的網(wǎng)站出于不同的原因而使用不同的導(dǎo)航樣式?？紤]訪問者的目標(biāo)，并設(shè)計(jì)最佳的用戶體驗(yàn)。
重要要點(diǎn)
您應(yīng)該致力于通過輪播帶來真正的價(jià)值或其他信息。這可能是訪客以前沒有的信息，或者可能導(dǎo)致訪客未找到其他頁面。
盡量避免自動(dòng)旋轉(zhuǎn)輪播，僅在主要目標(biāo)網(wǎng)頁（首頁是其中的一個(gè)示例）上使用它們。只要輪播有目的，并且看起來不像廣告，您的設(shè)計(jì)就應(yīng)該做得很好。
如果您正在尋找有關(guān)網(wǎng)絡(luò)輪播的更多信息，請查看以下一些帖子：
旋轉(zhuǎn)木馬，布拉德·弗羅斯特（Brad Frost）
設(shè)計(jì)用戶友好的首頁輪播的8個(gè)UX要求
輪播的可用性：為內(nèi)容超載的網(wǎng)站設(shè)計(jì)有效的UI
