商丘做網站,商丘網站優化,商丘網絡推廣,商丘網絡公司
當前位置:首頁 >新聞資訊 > 網站設計 >

整點新鮮的!學學這些愛不釋手的加載動效設計

發表日期:2017-06-30 17:46聚圣源瀏覽次數: 本文關鍵詞:交互設計,整點新鮮seo!學

 

  我們現在越來越注重細節,小到加載動畫,大到界面配色。這些都會成為用戶吐槽的地方,一個不小心,你設計的東西讓用戶反感了,他們說不定就要和你的產品說拜拜了。所以今天我們要重點說說那些你以前覺得“不那么重要”的加載設計。

  等待和加載動效幾乎是無處不在了。設計師和設計機構都很清楚,加載動效幾乎是目前網站APP設計中無法繞過且必須的組成部分,它們不僅是大勢所趨而且是打造優秀用戶體驗的必須組件。

  雖然目前很多產品將加載/等待動效作為強化用戶第一印象的組件,但是它的實際使用范疇遠不止于這一部分,在許多設計項目中,加載動效幾乎做到了無處不在。內頁切換的時候可以用,組件加載的時候可以用,甚至幻燈片切換的時候也同樣可以用上。不僅如此,它還可以用承載數據加載的過程,呈現狀態改變的過程,填補崩潰或者出錯的頁面,它們承前啟后,將錯誤和等待轉化為令用戶愉悅的細節。

  等待和加載動效中,最常見的表現形式是進度條,但是許多設計師采用了更加有趣的表現手法,接下來我們一起來看看這些案例。

  4:20 Dead Obies

  

 

  加載動效并不一定非要用進度條,設計師在這個頁面中將LOADING這個詞的每個字母拆開,不斷復制來呈現加載過程,靜態的文字和動態的效果交錯,讓人在新鮮有趣的動畫中度過略顯漫長的加載過程。

  NewsTech

  

 

  充滿科技感的頁面設計為整個網站定下了基調,這種面向未來的設計手法在這個頁面中體現到極致,加載動效采用了各種數據加載的樣式,將等待過程變成了一個巨大的“WOW”。

  Ferias Beach Park

  

 

  這個Ferias海灘公園的頁面借由有趣的配色和動效傳達出歡快的情緒,加載動效中童趣盎然的設計也令人難忘。

  Mad Max Fury Road

  

 

  年度神作《Mad Max 4》本就是以突出的視覺設計而令人記住,所以它的官網在設計美學上也保持了一致性。加載動效中那個粗糙但古樸的LOGO也與整個電影風格相呼應,營造出躁動而個性十足的氛圍。

  Panda Raid

  

 

  網站的加載動效還是保持了進度條的基本設計,但是展現方式上借用了汽車的形象,加載速度不同的時候輪胎滾動的速率也不同,有趣、擬真也和網站主題貼合。

  Wiser Digital

  

 

  在加載過程中,設計師用最經典的游戲乒乓球來幫你填補等待的時間,雖然你無法參與到游戲當中,但是這種情懷滿滿的加載動效給人印象非常深刻。

  Tenfold Creative

  

 

  為了填補等待的時間,設計師將朗朗上口的文字做成動效,在加載的時候用它們來與你進行互動。雖然許多文字是一閃而過,但是你可以在閱讀中度過這段時間。

  Tham Nguyen

  

 

  Tham Nguyen 是一位著名的法國女設計師,她的個人網站中糅合了自然的情懷和女性的細膩,加載動畫采用了走路的小女孩兒,俏皮而有趣。

  50m.space

  

 

  和前面許多案例一樣,設計師采用了扁平風的動態插畫來填補等待時間,強化整體風格。

  Madagence

  

 

  其實這個加載動效看起來并不夠細膩,但是它充分運用了幾何圖形,四個簡單有趣的方格輪流變幻,值得學習。

  Kajikenseiji

  

 

  設計師在這個網頁中,使用的是吐著氣泡的魚來作為過度,古樸的文字強化了網站的品牌形象,簡單的色調和魚的形象也充滿了日系網站的獨特氣質。

  One Kichjoji

  

 

  和之前的網站一樣,加載動效采用了單色的燈塔形象,簡單有趣但是也優雅地呈現了品牌形象。

  Interatction with Artificial Physics

  

 

  這是一個精心設計的網站,強調人造和物理的屬性,這種兼顧自然和人工設計的特征也體現在加載動效上,四個相互運動的氣泡時大時小,看起來自然而混亂,但是仔細看你又仿佛能找到某種規律,這個有趣的過程中你會忘記時間的流動,直到網站加載完成。

  Catch the Dragon

  

 

  水波紋擴散一般的加載動效,在黑白色調之下,兼顧了自然的特征和科技的感覺,微妙的互補效應和震動的效果令整個動效簡單而賞心悅目。

  SLMF

  

 

  大膽的排版和明顯的對比讓整個頁面給人沉穩而舒服的感覺,用數字來呈現加載過程,字體隨著加載不透明度會逐步提升,讓人感受到過程的變化,簡單但是非常值得學習。

  Zodiac

  

 

  這個頁面的加載動效堪稱是夢幻級的,它不僅充滿藝術感,而且設計得整齊劃一,加上戲劇感十足的背景,兼顧美觀和技術的動效變化簡直是教科書一般的設計。

  MTV Bump

  

 

  打開頁面之后,鼠標光標變成了復古的沙漏造型,更讓人驚喜的是加載動畫是一個不停吞吐著彩虹色帶的MTV Logo,復古而有趣。

  Y7K

  

 

  Y7K的加載動效其實蠻討巧的,巨大的LOGO上疊加一個色彩豐富的視頻,漂亮而簡單。

  The Happy Forecast

  

 

  這個網站的動效設計手法并不鮮見,但是設計是不僅僅是添加了進度條那么簡單,他還用漸變的動態文字告訴用戶正在加載網站的哪個部分。時間很長,但并不無趣。

  結語

  動效設計是小伎倆,但是它在用戶體驗設計中的作用是不可估量的,它讓折磨人的等待變成了愉悅的消遣。動效設計是大勢所趨,加載/等待動效也是其中的重要組成部分,如果你熱衷于動效設計,不妨關注一下這個領域。

如沒特殊注明,文章均來自網絡! 轉載請注明來自:http://www.lincolnpedalpushers.com/news/wzsj/4836.html

網站設計案例推薦

熱門文章

揭秘2017年最新的網站快速排名設...

網站在前期的時候都是很難上排名的嗎,那么是因為你的網站基礎優化都沒做好,怎么可能會有排名呢,首頁說到了基礎的優化那就要從根本的地方說起。前期就是先把網站的設計和網...

日期:2017-06-30 瀏覽次數:5427

Axure教程:上下滾動效果制作步...

今天來給大家講講如何用Axure實現上下滾動效果。 如何實現上下滾動效果: 讓內容在顯示區域滾動; 內容面板沒有接觸到頂部時,讓內容面板移動至頂部; 內容面板接觸到頂部,沒有接...

日期:2018-01-05 瀏覽次數:1186

終于等到你!2017年2月設計圈實...

隨著情人節的結束,2月份的設計圈干貨大合集悄然更新。新的工具新的資源,依然是以往的分量,依然是相同的味道。和過去的合集相似,免費的素材、工具、服務占據了列表中9成的...

日期:2018-04-01 瀏覽次數:725

Axure高級教程:如何從外部獲取...

Axure作為產品經理必備神器之一,相信每個人都會基礎的操作和簡單甚至高階的原型。但是這篇文章分析的內容,相信你可能從沒有這樣想過。 我們知道中繼器在Axure中實現數據動態展...

日期:2018-01-05 瀏覽次數:720

現代404頁面設計趨勢分析與案例...

每個網站都是由不同功能不同類型的頁面構成的,當用戶打開錯誤鏈接的時候,網站的404頁面就派上用場了。一個可靠的404頁面在告知用戶他們走錯地方的同時,還應當引導用戶繼續瀏...

日期:2018-02-27 瀏覽次數:681

相關文章

交互設計基本功!聊聊搜索框設...

@Mockplus原型設計 :許多人可能認為搜索框不需要設計,畢竟這只是兩個簡單的元素。然而,在內容繁雜的網站中,搜索框通常是最常用的設計元素。當用戶遇到相對復雜的網站時,他們...

日期:2018-01-05 瀏覽次數:123

三個維度,解析產品的交互設計...

本文以微信首頁為例,用三個維度系統地解析一個產品的交互設計的方方面面。 首先我們來做個互動,請各位看官打開自己的微信,然后看到你的微信首頁: 然后仔細觀察看到了什么...

日期:2018-01-05 瀏覽次數:117

案例分析:怎樣避免交互設計中...

刻板印象有好有壞。在合適的場景、時間、項目中,去最大化它的積極作用,盡量避免它的消極作用,才能真正的平衡設計、工作,甚至生活。 一直在看奇葩說,聽到很多次的一個詞叫...

日期:2018-01-05 瀏覽次數:136

表單的交互設計:基于單選場景...

在做表單設計時,究竟該選用哪種控件,只要是根據情況而定的,無論哪種選擇都有其優缺點,這就要結合選項數目、空間大小等因素,選擇一種形式,可以最大程度的方便用戶使用。...

日期:2018-01-05 瀏覽次數:117

新手進階手冊!成為交互設計師...

畢業后加入百度成為一名交互設計師已經整整兩年了,這里把一些想法體會,工作職場的相關經歷寫下來,以供新人參考。 最早接觸交互設計時覺得學交互設計非??犰?,例如像鋼鐵俠...

日期:2018-01-05 瀏覽次數:105

隨機推薦

精雕細琢!打造優秀用戶體驗的...

Google對話式交互規范指南(五)...

只需5步,你也可以畫出高質量的...

從設計指南說起,詳解iOS系統組...

如何運用「用戶場景法」進行產...

那些花花綠綠的地鐵廣告,玩的...

挤进西施紧紧的身体里视频