燈塔系列課產(chǎn)品經(jīng)理課程手機(jī)動(dòng)效設(shè)計(jì)

1、手機(jī)動(dòng)效設(shè)計(jì) 介紹一下自己 姓名：郭杉杉筆名：SmallPang 豐富移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，先后就職于91、時(shí)光 網(wǎng)、獵聘網(wǎng)、搜狐暢游，參與多款手機(jī)客戶端產(chǎn)品設(shè) 計(jì)工作。目前擔(dān)任搜狐暢游手機(jī)桌面項(xiàng)目高級(jí)產(chǎn)品經(jīng) 理，負(fù)責(zé)搜狐暢游桌面手機(jī)客戶端及移動(dòng)社交產(chǎn)品設(shè) 計(jì)工作。 找到SmallPang： QQ:609956246E-mail: 微博： http:/ 生活中的動(dòng)效設(shè)計(jì) 目錄 為什么用動(dòng)效 什么時(shí)候適合用動(dòng)效 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 告訴用戶該怎么做 配圖App Flow滑動(dòng)引導(dǎo)效果配圖谷歌點(diǎn)擊麥克風(fēng)后效果 幫助用戶減少焦慮 提醒用戶將要到哪里 配圖My Wonderful Day配

2、圖clear 帶給用戶直觀感受 Weatherwise 樹立產(chǎn)品獨(dú)有標(biāo)識(shí) 配圖Jetsetter 更直觀的觸碰感知 配圖My Wonderful Day搖一搖 目錄 什么時(shí)候適合用動(dòng)效 為什么用動(dòng)效果 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 場(chǎng)景1：轉(zhuǎn)場(chǎng) 動(dòng)效應(yīng)用最多的場(chǎng)景 轉(zhuǎn)場(chǎng) 翻頁 開關(guān)門 縮小放大 折疊 翻轉(zhuǎn) 場(chǎng)景2：邀請(qǐng) 對(duì)于隱藏內(nèi)容、操作提示及新手幫助 邀請(qǐng) 突出主要功能 適時(shí)出現(xiàn)和離開 新手幫助亮點(diǎn) 注意點(diǎn) 場(chǎng)景3：反饋 過程及結(jié)果的反饋 反饋 輕量-質(zhì)感 連貫-形變 現(xiàn)實(shí)-情感 過程-反饋 網(wǎng)易新聞收藏 30/30iweekly 場(chǎng)景4：加載 內(nèi)容加載時(shí)的動(dòng)效 加載 品牌抽象 品牌LOG

3、O 場(chǎng)景5：?jiǎn)?dòng)畫面 讓用戶更容易記住你的應(yīng)用 啟動(dòng)畫面 目錄 什么時(shí)候適合用動(dòng)效 為什么用動(dòng)效果 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 要說明的事情 位置 即運(yùn)動(dòng)對(duì)象運(yùn)動(dòng)的起始位置與停止運(yùn)動(dòng)的終止位置?？梢杂貌粍?dòng)物體做參考。（如 從頂部運(yùn)動(dòng)到界面的某一欄目處等）。 運(yùn)動(dòng)方式 主要是對(duì)運(yùn)動(dòng)結(jié)果的描述，如何達(dá)到這個(gè)結(jié)果-過程是怎樣的。常見的又直線、曲 線、旋轉(zhuǎn)等，對(duì)這些要有清晰認(rèn)識(shí)。（如描述曲線運(yùn)動(dòng)則描述遵循什么樣的曲線軌 跡，旋轉(zhuǎn)是圍繞中心旋轉(zhuǎn)還是對(duì)稱軸旋轉(zhuǎn)，角度多少等） 觸發(fā)行為 移動(dòng)應(yīng)用動(dòng)效通常都有一定觸發(fā)行為。特別是動(dòng)效由手勢(shì)觸發(fā)。（如拖拽手勢(shì)觸發(fā) 的運(yùn)動(dòng)） 要說明的事情 速度及節(jié)奏 速度及節(jié)

4、奏對(duì)應(yīng)用中得動(dòng)效來說很重要，處理不好就變得拖沓。需要對(duì)速度和節(jié)奏 進(jìn)行描述。（如動(dòng)作多久完成的，是否附加其他的因素） 各對(duì)象關(guān)系 當(dāng)運(yùn)動(dòng)對(duì)象為多個(gè)時(shí)，就需要清楚它們之間的關(guān)系。（如A的1/2離開屏幕時(shí)，B的 全部進(jìn)入屏幕，同時(shí)C的1/2也進(jìn)入屏幕 目錄 什么時(shí)候適合用動(dòng)效 為什么用動(dòng)效果 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 運(yùn)動(dòng)形變，萬變不離其中 要點(diǎn)1 核心為運(yùn)動(dòng)與變形，其他都是結(jié)合衍生的結(jié)果 節(jié)奏速度，掌控曲線時(shí)長(zhǎng) 要點(diǎn)2 讓動(dòng)效不平淡，充滿新意 情感故事，隱喻，品牌 要點(diǎn)3 讓用戶聚焦于內(nèi)容本身，避免花哨吸引眼球 點(diǎn)到為止，勿過猶不及 要點(diǎn)4 用好雙刃劍，不要適得其反 尊重習(xí)慣，創(chuàng)新要謹(jǐn)慎 要點(diǎn)5 考慮用戶習(xí)慣，將創(chuàng)新點(diǎn)用到刀刃上 快速原型，多方溝通權(quán)衡 要點(diǎn)6 畫好原型，用好溝通這個(gè)神器 許多優(yōu)秀的應(yīng)用，特別是國(guó)外應(yīng)用動(dòng)效發(fā)揮越來越大的 作用。 并不是將運(yùn)動(dòng)的效果機(jī)械的加入應(yīng)用中就可以稱為動(dòng)效， 情感化的，有新意的，適度的設(shè)計(jì)非常關(guān)鍵。 我們需要去不斷思考、探索、實(shí)踐、積累 總結(jié) ThanksThanks 目錄 什么時(shí)候適合用動(dòng)效 為什么用動(dòng)效果 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 目錄 什么時(shí)候適合用動(dòng)效 為什么用動(dòng)效果 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 目錄 什么時(shí)候適合用動(dòng)效 為什么用動(dòng)效果 如何描述一個(gè)動(dòng)效 一些設(shè)計(jì)方法 目錄 什么時(shí)候適合用動(dòng)效 為什么