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