成都網(wǎng)站開發(fā)與建設(shè)

2022-07-13    分類： 網(wǎng)站建設(shè)

成都網(wǎng)站開發(fā)與建設(shè)網(wǎng)頁設(shè)計中的圖像輪播-優(yōu)勢和做法網(wǎng)絡(luò)上不乏輪播功能幻燈片放映。實(shí)際上，在過去的5-10年中，這種趨勢無濟(jì)于事，其瀏覽器支持現(xiàn)在比以往任何時候都多。但是圖像輪播真的值得努力嗎？它們產(chǎn)生什么樣的好處，以及如何在布局中有效地使用它們？

我想為對圖像輪播感興趣的網(wǎng)頁設(shè)計師分享一些共同的趨勢，實(shí)時示例和想法。這些動態(tài)滑塊存在很多爭議，但我認(rèn)為在正確的環(huán)境中制作滑塊可以增加價值。

30個免費(fèi)WordPress幻燈片插件（2018）
30個免費(fèi)WordPress幻燈片插件（2018）
幻燈片是在以圖片為中心或以內(nèi)容為中心的網(wǎng)站上向訪問者展示特色圖片的元素。
閱讀更多

電子商務(wù)產(chǎn)品輪播
電子商務(wù)世界充滿了首頁和產(chǎn)品頁面上的旋轉(zhuǎn)輪播。目的是通過照片和文字保持清晰的信息密度，以講出獨(dú)特而有價值的故事來幫助銷售產(chǎn)品。

電子商務(wù)產(chǎn)品滑塊有兩個主要展示位置：

在商店的首頁上
在產(chǎn)品頁面上
兩者的工作方式不同，但目標(biāo)相同 -以視覺方式銷售產(chǎn)品。

示例1：Au Lit優(yōu)質(zhì)亞麻布–主頁
看看在主頁金亮精細(xì)床單，即采用了全屏自動旋轉(zhuǎn)傳送帶炫耀不同的產(chǎn)品，如羽絨被，枕頭和床套。


Au Lit高級亞麻首頁
圖像占據(jù)了主頁的整個寬度，并且顯示在折疊上方。實(shí)際上，首次進(jìn)入頁面時，此滑塊應(yīng)該是引起您注意的第一件事。每個幻燈片都指向網(wǎng)站上的不同頁面，以引導(dǎo)客戶進(jìn)行購物體驗(yàn)。

第一次滑入頁面時，此滑塊可能有點(diǎn)嚇人，但有了按鈕鏈接和覆蓋文字，對于只想潛入并購物的訪問者來說，這也非常令人鼓舞。

示例2：Eden手機(jī)殼–產(chǎn)品頁面
您可以在Eden手機(jī)殼產(chǎn)品頁面上看到更具體的示例。它使用自動旋轉(zhuǎn)的滑塊來展示產(chǎn)品的圖像。

Eden Boxs Case產(chǎn)品頁面
我發(fā)現(xiàn)這些在電子商務(wù)世界中有點(diǎn)“太多”。在查看產(chǎn)品時，我希望控制圖像之間的切換。

更好的選擇是制作圖片庫，并控制訪問者。例如，“ 人為設(shè)計”頁面為每張照片使用縮略圖，這更加令人鼓舞，并為用戶提供了更多控制權(quán)。

網(wǎng)絡(luò)作品集輪播
在線網(wǎng)站的投資組合有點(diǎn)不同，因?yàn)檫@些幻燈片并不總是點(diǎn)擊進(jìn)入另一個頁面。確實(shí)有些人可以進(jìn)行案例研究或撰寫有關(guān)項(xiàng)目的文章，但是投資組合網(wǎng)站上的許多輪播只是為了炫耀視覺作品。

示例1：Biboun –主頁
這位法國藝術(shù)家以Biboun的名義工作，主頁上有一個輪播滑塊，其中包含藝術(shù)品片段。單獨(dú)的幻燈片會指向作品集的內(nèi)部頁面，這些頁面涵蓋了包含多個照片的整個項(xiàng)目。

Biboun主頁
這可能是在投資組合網(wǎng)站上使用滑塊的方法。除非隨機(jī)展示一些特定作品，否則僅展示它們的隨機(jī)清單是沒有意義的。

在Biboun的滑塊中，所有片段都很精致，而且也不占用太多空間。盡管我知道有些人出于很好的理由而討厭自動旋轉(zhuǎn)幻燈片，但在這樣的簡約布局下，我很難抱怨這種設(shè)計功能。

示例2：Aaron Blaise的網(wǎng)站-主頁
我非常喜歡在亞倫·布萊斯（Aaron Blaise）網(wǎng)站上找到的示例，因?yàn)樗宰髌芳男问秸故玖怂淖髌?，但是大多?shù)情況下都是使用該網(wǎng)站來出售他的藝術(shù)視頻。亞倫·布萊斯（Aaron Blaise）在迪斯尼工作了幾十年，他擁有證明這一點(diǎn)的技能。

亞倫·布萊斯藝術(shù)老師主頁
盡管他網(wǎng)站上的主頁滑塊確實(shí)會自動旋轉(zhuǎn)，但我發(fā)現(xiàn)它并沒有令人討厭的煩惱或錯位。每張幻燈片都有一些與圖像有關(guān)的內(nèi)容，它可以幫助亞倫將注意力吸引到他的最新視頻課程上，這些課程可以教會年輕藝術(shù)家如何掌握特定技能。

很棒的組合輪播注重視覺效果，并引導(dǎo)訪問者進(jìn)一步進(jìn)入網(wǎng)站。如果您能獲得這兩件事，那么我不會反對個人投資組合網(wǎng)站中的此類功能。

共同的設(shè)計趨勢
如果您看一下我上面的一些示例，您會發(fā)現(xiàn)通常有兩種不同類型的滑塊：全屏和固定寬度。

這些風(fēng)格選擇通常與布局及其可容納的內(nèi)容量有關(guān)。如果布局跨越頁面的整個寬度，則也有必要擴(kuò)大滑塊。但這也迫使您找到在高分辨率顯示器上全屏仍看起來不錯的高質(zhì)量圖像。

我個人更喜歡固定寬度樣式，就像您在兩個藝術(shù)作品集示例中看到的那樣。這些控件更容易控制，并且通常不那么高 -使訪問者更容易忽略它們，只要他們愿意。

還應(yīng)考慮自動前進(jìn)幻燈片的價值，以及用戶捕獲此內(nèi)容有多困難。尼爾森·諾曼集團(tuán)（Nielsen Norman Group）進(jìn)行的一項(xiàng)偉大案例研究表明，最好不要使用自動前進(jìn)滑塊。

從某種意義上來說，我支持這種方法，因?yàn)樗趦?nèi)存上的占用較少，瀏覽器中的動畫和運(yùn)動更少，而且大多數(shù)人也不喜歡自動旋轉(zhuǎn)輪播-您應(yīng)該始終迎合觀眾的需求。

但是我不能說添加自動前進(jìn)滑塊絕對不值得，尤其是因?yàn)槭褂渺o態(tài)滑塊時，您不會獲得太多視圖，并且您還需要使第一張幻燈片成為最重要的滑塊，因?yàn)樵S多用戶將無法繼續(xù)操作轉(zhuǎn)到下一張幻燈片。不幸的是，決定是否使滑塊自動旋轉(zhuǎn)是一個反復(fù)試驗(yàn)的領(lǐng)域。

不惜一切代價避免的事情
我個人認(rèn)為這是一件重要的事情，屬于“不惜一切代價避免”。查看或單擊下面的屏幕截圖，然后嘗試猜測可能是什么。

Yozenn Cafe主頁
該Yozenn咖啡廳網(wǎng)站使用全屏頭滑塊。它不會自動旋轉(zhuǎn)，很棒，但是滑梯除了裝飾之外也沒有其他用途。

圖片沒有鏈接到任何地方，并且展示了少數(shù)產(chǎn)品?？梢詫⑺鼈?nèi)刻砑拥街黜摫尘爸?，而無需使用滑塊，以免造成混亂和多余的千字節(jié)JavaScript。

我認(rèn)為這種背景滑動功能不會給已經(jīng)擁擠的網(wǎng)站增加太多價值。如果圖像具有鏈接或隨附的文本，則它們至少更相關(guān)。

可以自由使用標(biāo)題部分中占據(jù)整個頁面的圖像，但是，如果它們在任何地方都沒有鏈接或提供任何真實(shí)信息，則請勿將其變成輪播。

互動功能
用戶導(dǎo)航輪播的方式會影響設(shè)計本身。這里有各種風(fēng)格的導(dǎo)航，但這些是最流行：

基于點(diǎn)的導(dǎo)航
箭頭導(dǎo)航
縮略圖導(dǎo)航
列出鏈接或標(biāo)題項(xiàng)
最常見的是點(diǎn)導(dǎo)航，您可以在數(shù)百個現(xiàn)代網(wǎng)站上找到它們。

示例1：別致在家–主頁
別致的家居就是一個很好的例子，在滑塊下方使用三個小點(diǎn)表示導(dǎo)航。每個圖像都會自動旋轉(zhuǎn)，而系列中的相關(guān)點(diǎn)將被黑色填充。其他兩個空點(diǎn)表示供用戶瀏覽的潛在幻燈片。

別致的家庭旋轉(zhuǎn)木馬
這是許多用戶已經(jīng)意識到的流行設(shè)計模式。它與許多設(shè)計師不喜歡的漢堡菜單屬于同一類別，但是用戶已經(jīng)意識到了這一點(diǎn)，并且本能地知道如何使用它。

示例2：純周期–主頁
Pure Cycles的主頁使用點(diǎn)和箭頭導(dǎo)航的組合。這樣，用戶既可以進(jìn)行前進(jìn)和后退導(dǎo)航，又可以通過底部的點(diǎn)鏈接看到“整體”導(dǎo)航。

純周期輪播設(shè)計
實(shí)際上，在這個示例中我發(fā)現(xiàn)點(diǎn)鏈接很難看清。視覺幻燈片的難點(diǎn)在于，許多元素難以區(qū)分，因此箭頭和點(diǎn)很容易融合到背景中。

示例3：IGN –主頁
在IGN的首頁上，您會找到另一個使用標(biāo)題鏈接進(jìn)行導(dǎo)航的自動旋轉(zhuǎn)輪播。對于想要出售頭條新聞而不是產(chǎn)品的發(fā)布商來說，這種情況非常普遍。每個鏈接都指向單獨(dú)的幻燈片，該幻燈片最終指向文章頁面。

IGN輪播首頁
這些鏈接可以替換為縮略圖，甚至可以包括每個故事的縮略圖-但是，輪播中顯示了視覺效果，因此省略縮略圖實(shí)際上節(jié)省了空間。

不同的網(wǎng)站出于不同的原因而使用不同的導(dǎo)航樣式。考慮訪問者的目標(biāo)，并設(shè)計的用戶體驗(yàn)。

重要要點(diǎn)
您應(yīng)該致力于通過輪播帶來真正的價值或其他信息。這可能是訪客以前沒有的信息，或者可能導(dǎo)致訪客未找到其他頁面。

盡量避免自動旋轉(zhuǎn)輪播，僅在主要目標(biāo)網(wǎng)頁（首頁是其中的一個示例）上使用它們。只要輪播有目的，并且看起來不像廣告，您的設(shè)計就應(yīng)該做得很好。

如果您正在尋找有關(guān)網(wǎng)絡(luò)輪播的更多信息，請查看以下一些帖子：

旋轉(zhuǎn)木馬，布拉德·弗羅斯特（Brad Frost）
設(shè)計用戶友好的首頁輪播的8個UX要求
輪播的可用性：為內(nèi)容超載的網(wǎng)站設(shè)計有效的UI

文章題目：成都網(wǎng)站開發(fā)與建設(shè)
當(dāng)前鏈接：http://www.bm7419.com/news21/177371.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、做網(wǎng)站、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)

廣告

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

商城網(wǎng)站建設(shè)