我們現在越來越注重細節,小到載入動畫,大到介面配色。這些都會成為使用者吐槽的地方,一個不小心,你設計的東西讓使用者反感了,他們說不定就要和你的產品說拜拜了。所以今天我們要重點說說那些你以前覺得“不那麼重要”的載入設計。
等待和載入動效幾乎是無處不在了。設計師和設計機構都很清楚,載入動效幾乎是目前網站和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
這個網站的動效設計手法並不鮮見,但是設計是不僅僅是新增了進度條那麼簡單,他還用漸變的動態文字告訴使用者正在載入網站的哪個部分。時間很長,但並不無趣。
結語
動效設計是小伎倆,但是它在使用者體驗設計中的作用是不可估量的,它讓折磨人的等待變成了愉悅的消遣。動效設計是大勢所趨,載入/等待動效也是其中的重要組成部分,如果你熱衷於動效設計,不妨關注一下這個領域。