UI界面設(shè)計

下拉刷新動畫的設(shè)計技巧

1888

最近一段時間在忙東忙西，思考分享一些什么內(nèi)容好的時候，就突然接到了一個設(shè)計需求。需求簡單直接粗暴，就如平時大家接到領(lǐng)導般的設(shè)計需求，往往只有簡單一兩句話~！卻涵蓋了無窮無盡的內(nèi)涵！

當我拿到這個需求的時候，其實我是想拒絕的，不能因為你的一句話需求我就開始設(shè)計，因為在這個下拉的小位置，需要設(shè)計得有趣又不會枯燥，要可愛自然而又不失大方得體！還要融合整體品牌故事背景，還要有一些亮點小細節(jié)，讓想看的人看得到，等等····不要問我為什么能想到這么多，因為你懂得！

嗯，沒錯，我已經(jīng)這樣了！（咸魚躺尸.jpg ）中指微微一翹，而且還對你放了無數(shù)個P，但，但是這時我又繼續(xù)摸摸自己腦袋心理想到：我是炒雞無敵射雞師吖！我就是最棒的！嗯！心里又突然燃起熊熊烈火，繼續(xù)思考解決問題！

在解決這個需求之前，首先要明確整個項目的設(shè)計目標。是為了設(shè)計而設(shè)計呢，還是為了表達什么而設(shè)計！首頁的下拉動作也算是一個高頻操作，在這個細小的地方，假如設(shè)計的出彩會增強用戶體驗。那么這里下拉操作設(shè)計，我們可以展示出什么傳遞給用戶呢？

1.品牌形象（一定要漏出吧！？與下拉操作完美融合，增強品牌形象曝光，加深印象）

2.品牌故事（寫了一個品牌背景故事，不傳遞給用戶Get，就白寫了?。?

3.腦洞創(chuàng)意（有豐富細節(jié)的腦洞設(shè)計，沒有細節(jié)的設(shè)計是不完美的，讓想看的人看到！）

好吧，這次設(shè)計的目標想好了！有形象，有故事，有創(chuàng)意，那么馬上開始動手設(shè)計吧?。O GO GO！整個下拉動效設(shè)計分為2個部分思考：

一.創(chuàng)意設(shè)計環(huán)節(jié)（思考畫面呈現(xiàn)，出現(xiàn)什么內(nèi)容）

二.動效實現(xiàn)環(huán)節(jié)（結(jié)合實際情況，考慮實現(xiàn)成本）

·創(chuàng)意設(shè)計環(huán)節(jié) ·

主要是推導出整個畫面的視覺呈現(xiàn)，受限于不同機型的承載和實現(xiàn)能力，元素和動畫不能過于復(fù)雜，還有需要符合整體的UI界面設(shè)計，我決定輕量化的設(shè)計原則。在動手設(shè)計之前這里腦暴一些關(guān)鍵字來輔助設(shè)定這次設(shè)計的故事場景（整個動漫app的品牌故事背景是跟宇宙相關(guān)的，所以關(guān)鍵詞會有關(guān)宇宙系列）

當關(guān)鍵詞出來以后，我需要從這些關(guān)鍵詞中重新組合，思考出一個有趣的畫面故事！

品牌形象元素我們有兩個，企鵝娘（造型復(fù)雜，小位置展示不方便）其實是她太懶了，都懶得出鏡了····噓！），黑子（外太空某星球小王子背景，造型簡約多變，適合做為主體視覺元素）簡約夠簡單，你們懂得！

最后挑選的元素黑子，可愛，星球，宇宙，飛碟，侵略地球，淺色系重新組合?？梢月?lián)想出這個大概表達的故事背景是，在用戶下拉的時候會出現(xiàn)外太空某星球小王子坐著宇宙飛船來臨的場景（侵略地球）。好吧到了這一步，創(chuàng)意思考環(huán)節(jié) 就已經(jīng)差不多了，有了故事背景，有了畫面元素，就開始畫圖吧！