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

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

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

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

30個免費WordPress幻燈片插件（2018）

幻燈片是在以圖片為中心或以內(nèi)容為中心的網(wǎng)站上向訪問者展示特色圖片的元素。

電子商務(wù)產(chǎn)品輪播

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

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

在商店的首頁上

在產(chǎn)品頁面上

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

示例1：Au Lit優(yōu)質(zhì)亞麻布–主頁

看看在主頁金亮精細床單，即采用了全屏自動旋轉(zhuǎn)傳送帶炫耀不同的產(chǎn)品，如羽絨被，枕頭和床套。

Au Lit高級亞麻首頁

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

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

示例2：Eden手機殼–產(chǎn)品頁面

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

Eden Boxs Case產(chǎn)品頁面

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

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

網(wǎng)絡(luò)作品集輪播

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

示例1：Biboun –主頁

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

Biboun主頁

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

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

示例2：Aaron Blaise的網(wǎng)站-主頁

我非常喜歡在亞倫·布萊斯（Aaron Blaise）網(wǎng)站上找到的示例，因為他以作品集的形式展示了他的作品，但是大多數(shù)情況下都是使用該網(wǎng)站來出售他的藝術(shù)視頻。亞倫·布萊斯（Aaron Blaise）在迪斯尼工作了幾十年，他擁有證明這一點的技能。

亞倫·布萊斯藝術(shù)老師主頁

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

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

共同的設(shè)計趨勢

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

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

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

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

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

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

不惜一切代價避免的事情

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

Yozenn Cafe主頁

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

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

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

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

互動功能

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

基于點的導(dǎo)航

箭頭導(dǎo)航

縮略圖導(dǎo)航

列出鏈接或標(biāo)題項

最常見的是點導(dǎo)航，您可以在數(shù)百個現(xiàn)代網(wǎng)站上找到它們。

示例1：別致在家–主頁

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

別致的家庭旋轉(zhuǎn)木馬

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

示例2：純周期–主頁

Pure Cycles的主頁使用點和箭頭導(dǎo)航的組合。這樣，用戶既可以進行前進和后退導(dǎo)航，又可以通過底部的點鏈接看到“整體”導(dǎo)航。

純周期輪播設(shè)計

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

示例3：IGN –主頁

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

IGN輪播首頁

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

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

重要要點

您應(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è)
網(wǎng)頁鏈接：http://jinyejixie.com/news/177371.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、ChatGPT、移動網(wǎng)站建設(shè)、網(wǎng)站排名、App設(shè)計、服務(wù)器托管

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

猜你還喜歡下面的內(nèi)容

企業(yè)網(wǎng)站做優(yōu)化需要注意哪幾項呢？ 2022-07-13
營銷型網(wǎng)站優(yōu)化至搜索引擎首頁的若干辦法 2022-07-13
成都軟文營銷推廣的主要表現(xiàn)形式 2022-07-13
如何讓動態(tài)URL利于SEO 2022-07-13
如何購買精品好域名 2022-07-13
怎樣建設(shè)地方門戶站？ 2022-07-13

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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