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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

互動功能
用戶導航輪播的方式會影響設計本身。這里有各種風格的導航，但這些是最流行：

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

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

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

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

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

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

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

不同的網(wǎng)站出于不同的原因而使用不同的導航樣式?？紤]訪問者的目標，并設計的用戶體驗。

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

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

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

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

文章名稱：成都網(wǎng)站開發(fā)與建設
網(wǎng)頁鏈接：http://bm7419.com/news/177371.html

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

廣告

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

成都做網(wǎng)站