5 個必逛 UI 動態設計的範例網站

Chris Chen
Motion In Interaction
5 min readDec 3, 2015

自從 Flat Design 盛行之後,因為無法展現”刻工”,許多的設計師漸漸開始把重點放在動態的設計上,使整體的設計不會太單調。我想這過程中大家應該都收集了不少動態設計的資源,而以下是小編我在設計過程中,時常光顧的五個動態範例網站。話不多說,馬上來看有哪些吧!

1. CAPPTIVATE . CO

首推就是 Capptivate.co,有別於常在 Behence 或是 Dribbble 上看到天馬行空的範例,它專門收錄市面上手機 APP 的動態設計。而他的創辦人 Alli Dryer 本身就是 Twiiter 的資深設計師,所以品味絕對有保證 :)

小編覺得最貼心的地方,就在於他的分類的方式,一種是依據操作形式 (Patterns),譬如說,想要找市面上 APP 有哪些頁面下拉 (Pull down to Refresh) 的動態,透過這分類就可以很方便找到相關範例。而另一種則是依據動畫形式 (Components),例如,裡面有個翻轉效果 (FLIP),在該項目就看到 Facebook 的 Paper 有名的文章連結翻轉效果。

他也是少數有提供 iOS 原生 APP 喔! 內容本身採用影片播放,所以只要在手機上點開範例,就可直接看完整效果喔!

Capptivate.coDownload capptivate.co For iOSAlli Dryer

snapshot from capptivate.co

2. USE YOUR INTERFACE(UYI)

Use Your Interface (UYI) 是一位澳洲UX設計師 Josh Davey 個人在 Tumblr 的收藏。因為是 Tumblr 搭配 GIF 的關係,所以一進會看全部的範例都在動⋯非常眼花撩亂⋯

部分收藏的範例是用 CodePen 所寫的 CSS,所以你可以點開,直接連結到CodePen 進行互動操作,甚至也可以看看原設計是用了哪些語法進行製作這樣的特效。

UseYourInterfaceUYI on PinterestUYI on TwitterUYI on Medium

snapshot from http://useyourinterface.com

3. UI MOVEMENT

UI MOVEMENT 應該是裡面更新速度比較迅速的網站,每天都會有設計師到 這分享自己的動態設計,範例大多是微互動或 APP 頁面切換。不過它的分類就不太明確,只能透過 Tag 搜尋找資料,但因為更新頻率高,所以用來刺激每天靈感來源還可以 :)

如果你覺得在 Behence 或是 Dribbble 上分享你的精美動態設計還不夠的話,也可以考慮到 UI MOVEMENT 進行分享喔~ 提交作品方式,可以直接使用 Dribbble 的連結,但如果你像小編一樣無法在 Dribbble 分享作品的設計師,別擔心~ 它本身也有提供本機端檔案上傳喔!

UI MOVEMENT

snapshot from http://uimovement.com

4. u i G I F s

uiGIFs 與上面的 Capptivate.co 一樣,只收錄市面上發表過的 APP 的動態設計。但它採用的則是 GIF 檔案,需要點擊後才能觀看動態效果。他本身沒有特殊分類。而比較特別的部分是,當你點入某個 APP 時,你可以看到上方播放著封面的Gif,下面還有該 APP 的其他靜態頁面搭配使用。

創辦人 Ramy Khuffash,本身是網頁設計師,這些範例似乎都是他個人錄製。在看他個人 Twitter 時,發現他同時也是上方 UI MOVEMENT 以及另一個資源站 User Flow Patterns 的創辦人 ~ 真的是非常有心!如果各位對自己的作品也有信心,他也很歡迎大家寄作品給他喔~

uiGIFsRamy Khuffash

snapshot from http://uigifs.com

5. APP ANIMATIONS

App Animation 算一個蠻新的資源站,分類的方式與 Capptivate.co 一樣,只不過 Compoents 分類改稱為 Style 而已。雖說看似創辦者為了推廣本身 Kinetic UI 的課程才成立的網站,但裡面收集資源都很有參考價值。

至於作者 Craig Dehner 的來歷更不用說了,他可是實際參與 iOS 7 以及 iOS 9 3D Touch 以及 Siri 動態設計的設計師喔!所以他推薦的動態,絕對有品質保證~~ 作者本身部落格文章也非常值得一讀喔!

App AnimtionsCraig DehnerKinetic UI

snapshot from http://www.appanimations.com

--

--