5 個必逛 UI 動態設計的範例網站
自從 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 喔! 內容本身採用影片播放,所以只要在手機上點開範例,就可直接看完整效果喔!
2. USE YOUR INTERFACE(UYI)
Use Your Interface (UYI) 是一位澳洲UX設計師 Josh Davey 個人在 Tumblr 的收藏。因為是 Tumblr 搭配 GIF 的關係,所以一進會看全部的範例都在動⋯非常眼花撩亂⋯
部分收藏的範例是用 CodePen 所寫的 CSS,所以你可以點開,直接連結到CodePen 進行互動操作,甚至也可以看看原設計是用了哪些語法進行製作這樣的特效。
・UseYourInterface・UYI on Pinterest ・UYI on Twitter ・UYI on Medium
3. UI MOVEMENT
UI MOVEMENT 應該是裡面更新速度比較迅速的網站,每天都會有設計師到 這分享自己的動態設計,範例大多是微互動或 APP 頁面切換。不過它的分類就不太明確,只能透過 Tag 搜尋找資料,但因為更新頻率高,所以用來刺激每天靈感來源還可以 :)
如果你覺得在 Behence 或是 Dribbble 上分享你的精美動態設計還不夠的話,也可以考慮到 UI MOVEMENT 進行分享喔~ 提交作品方式,可以直接使用 Dribbble 的連結,但如果你像小編一樣無法在 Dribbble 分享作品的設計師,別擔心~ 它本身也有提供本機端檔案上傳喔!
4. u i G I F s
uiGIFs 與上面的 Capptivate.co 一樣,只收錄市面上發表過的 APP 的動態設計。但它採用的則是 GIF 檔案,需要點擊後才能觀看動態效果。他本身沒有特殊分類。而比較特別的部分是,當你點入某個 APP 時,你可以看到上方播放著封面的Gif,下面還有該 APP 的其他靜態頁面搭配使用。
創辦人 Ramy Khuffash,本身是網頁設計師,這些範例似乎都是他個人錄製。在看他個人 Twitter 時,發現他同時也是上方 UI MOVEMENT 以及另一個資源站 User Flow Patterns 的創辦人 ~ 真的是非常有心!如果各位對自己的作品也有信心,他也很歡迎大家寄作品給他喔~
5. APP ANIMATIONS
App Animation 算一個蠻新的資源站,分類的方式與 Capptivate.co 一樣,只不過 Compoents 分類改稱為 Style 而已。雖說看似創辦者為了推廣本身 Kinetic UI 的課程才成立的網站,但裡面收集資源都很有參考價值。
至於作者 Craig Dehner 的來歷更不用說了,他可是實際參與 iOS 7 以及 iOS 9 3D Touch 以及 Siri 動態設計的設計師喔!所以他推薦的動態,絕對有品質保證~~ 作者本身部落格文章也非常值得一讀喔!