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

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

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

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

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

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

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

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

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


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

第一次滑入頁(yè)面時(shí)，此滑塊可能有點(diǎn)嚇人，但有了按鈕鏈接和覆蓋文字，對(duì)于只想潛入并購(gòu)物的訪問(wèn)者來(lái)說(shuō)，這也非常令人鼓舞。

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

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

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

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

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

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

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

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

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

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

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

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

我個(gè)人更喜歡固定寬度樣式，就像您在兩個(gè)藝術(shù)作品集示例中看到的那樣。這些控件更容易控制，并且通常不那么高 -使訪問(wèn)者更容易忽略它們，只要他們?cè)敢狻?/div>
還應(yīng)考慮自動(dòng)前進(jìn)幻燈片的價(jià)值，以及用戶捕獲此內(nèi)容有多困難。尼爾森·諾曼集團(tuán)（Nielsen Norman Group）進(jìn)行的一項(xiàng)偉大案例研究表明，最好不要使用自動(dòng)前進(jìn)滑塊。

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

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

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

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

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

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

可以自由使用標(biāo)題部分中占據(jù)整個(gè)頁(yè)面的圖像，但是，如果它們?cè)谌魏蔚胤蕉紱](méi)有鏈接或提供任何真實(shí)信息，則請(qǐng)勿將其變成輪播。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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