項(xiàng)目名稱(chēng)：京東智能選機(jī)
關(guān)鍵詞：? 微交互? 動(dòng)效設(shè)計(jì)? 情感化設(shè)計(jì)? 情景化設(shè)計(jì)? lottie?
項(xiàng)目需求：
? ? ? ? ? ? ? ? ? 1报账、對(duì)一期視覺(jué)進(jìn)行優(yōu)化蝴罪，延續(xù)卡通設(shè)計(jì)風(fēng)格
? ? ? ? ? ? ? ? ? 2董济、情景化設(shè)計(jì)問(wèn)答環(huán)節(jié)
? ? ? ? ? ? ? ? ? 3、加入動(dòng)畫(huà)增加產(chǎn)品趣味性
? ? ? ? ? ? ? ? ? 4要门、微交互打磨產(chǎn)品細(xì)節(jié)
項(xiàng)目過(guò)程：
? ? ? ? ? ? ? ? ? 1虏肾、與產(chǎn)品及業(yè)務(wù)同學(xué)充分溝通，深入了解項(xiàng)目欢搜，明確產(chǎn)品需求（此過(guò)程交流宏觀視覺(jué)：大的風(fēng)格走向及配色等等）
? ? ? ? ? ? ? ? ? 2封豪、用戶畫(huà)像（明確定位自己產(chǎn)品的目標(biāo)用戶，貼近目標(biāo)用戶需求進(jìn)行設(shè)計(jì)炒瘟，這樣產(chǎn)品才有可能成功）
? ? ? ? ? ? ? ? ? 3吹埠、競(jìng)品分析（同時(shí)梳理自己產(chǎn)品的結(jié)構(gòu)）
? ? ? ? ? ? ? ? ? 4、腦暴，制定設(shè)計(jì)方案并進(jìn)行方案評(píng)審（通過(guò)簡(jiǎn)圖讓產(chǎn)品藻雌、業(yè)務(wù)雌续、用戶參與體驗(yàn)并提出意見(jiàn)和建議）并確認(rèn)交互方式（各種原因，此次迭代未要求交互設(shè)計(jì)師和用戶體驗(yàn)師參與胯杭，交互方面? ?由產(chǎn)品經(jīng)理和UI設(shè)計(jì)師分擔(dān)驯杜；此時(shí)針對(duì)具體細(xì)節(jié)問(wèn)題和設(shè)計(jì)進(jìn)行討論并確認(rèn)前端的實(shí)現(xiàn)以及性能、兼容性等等）
? ? ? ? ? ? ? ? ? 5做个、設(shè)計(jì)完成交付前端同學(xué)（由于此次涉及到動(dòng)畫(huà)的實(shí)現(xiàn)鸽心，此過(guò)程不斷配合前端同學(xué)進(jìn)行方案討論）
? ? ? ? ? ? ? ? ? 6、在前端同學(xué)工作完成后進(jìn)行視覺(jué)走查居暖，編寫(xiě)視覺(jué)走查文檔
? ? ? ? ? ? ? ? ? 7顽频、進(jìn)行最終走查
? ? ? ? ? ? ? ? ? 8、項(xiàng)目上線
? ? ? ? ? ? ? ? ? 9太闺、隨時(shí)進(jìn)行支持糯景，取得用戶反饋，分析問(wèn)題所在省骂，及時(shí)進(jìn)行調(diào)整
? ? ? ? ? ? ? ? ?10蟀淮、項(xiàng)目復(fù)盤(pán)，回顧钞澳、反思怠惶、總結(jié)，對(duì)后續(xù)工作進(jìn)行調(diào)整和規(guī)劃
過(guò)程分析：
由于一期的設(shè)計(jì)不是出自我手轧粟，所以拿到原型的第一要?jiǎng)?wù)就是抓住產(chǎn)品和業(yè)務(wù)同學(xué)策治，扔出十萬(wàn)個(gè) ：是什么（智能選機(jī)是一個(gè)什么樣的產(chǎn)品—了解 “前世今生” ）、為什么（原型中現(xiàn)有交互和控件這樣設(shè)計(jì)的用意以及是否可優(yōu)化調(diào)整—為自己后續(xù)的優(yōu)化奠定基礎(chǔ)兰吟、提供思路）通惫、怎么樣（拋出一些想法，即興腦暴揽祥，就此刻發(fā)現(xiàn)的問(wèn)題大家探討讽膏，這個(gè)過(guò)程也利于更加深入了解產(chǎn)品）。
然后拄丰，開(kāi)心地激情澎湃地回到工位，開(kāi)始制作用戶畫(huà)像俐末，進(jìn)行競(jìng)品分析料按！一般我喜歡把各種可能的方案落實(shí)到紙面，改改畫(huà)畫(huà)卓箫，再在每一套方案后列出利弊载矿，最終交由產(chǎn)品選擇。本次交互被我大改。闷盔。（只選取問(wèn)答頁(yè)具體分析）：
問(wèn)答環(huán)節(jié)：原型的對(duì)話框形式（?參考人工智能小咚 如圖 ）—>?設(shè)計(jì)的翻卡片形式（?線上產(chǎn)品 如圖 ）
before：對(duì)話框形式
利：問(wèn)題不用限制字符弯洗，靈活度更高；問(wèn)題不用限制個(gè)數(shù)逢勾，可能利于后期迭代規(guī)劃（此時(shí)并未具體做出三期方案）
弊：? 1牡整、由于問(wèn)答環(huán)節(jié)有反復(fù)修改答案并重新搜索推薦的功能，如果是對(duì)話流形式的話溺拱，必然會(huì)造成用戶對(duì)于回答過(guò)甚至是已經(jīng)修改過(guò)的問(wèn)題模糊不清逃贝，對(duì)于整個(gè)問(wèn)答沒(méi)有清晰而整體的概念的現(xiàn)象，從而影響用戶操作和情緒迫摔，感到亂而乏味
? ? ? ? ?2沐扳、對(duì)于情景化設(shè)計(jì)方面可能有所局限，且形式缺乏新意
after：翻卡片形式
利： 1句占、能夠清晰地知道每一步問(wèn)題及已選答案沪摄，翻轉(zhuǎn)對(duì)應(yīng)卡片進(jìn)行修改，直觀纱烘、快捷卓起，減少操作成本
? ? ? ? 2、情景化方面為設(shè)計(jì)留出更多可能
弊：問(wèn)題需要限制字符（但本次迭代完全可以滿足）凹炸，如果后期迭代需要增加n個(gè)問(wèn)題的話戏阅，開(kāi)發(fā)成本高（產(chǎn)品考慮二期相對(duì)于一期來(lái)說(shuō)就是一次大改版，如果三期很快迭代的話啤它，將可能又是一次大改版）
But奕筐。。
我：那么三期需求已經(jīng)確定了嗎变骡？
產(chǎn)品：還沒(méi)离赫，只是計(jì)劃。塌碌。
所以霸ㄐ亍！為什么要為了還未確定的甚至是還未有清晰規(guī)劃的需求犧牲掉當(dāng)前設(shè)計(jì)方案呢台妆？翎猛？？至于后期需求接剩，就兵來(lái)將擋水來(lái)土掩吧切厘！畢竟就算真的變動(dòng)很大，相信到時(shí)候我們也能在目前方案的基礎(chǔ)上做出更優(yōu)方案來(lái)應(yīng)對(duì)懊缺。于是產(chǎn)品被我balabala成功說(shuō)服疫稿，方案順利進(jìn)行。
接著，貼近每一個(gè)問(wèn)題設(shè)計(jì)相對(duì)應(yīng)的icon遗座，使用鮮艷的高飽和度配色（更加吸睛）舀凛，并設(shè)計(jì)出有趣的小動(dòng)畫(huà)（提升產(chǎn)品的趣味性和精致度，充分利用情感化設(shè)計(jì)途蒋，吸引用戶猛遍，產(chǎn)生愉悅感），對(duì)用戶的代入感更強(qiáng)碎绎，盡量滿足情景化的需求螃壤。僅在每次操作卡片后展示一次小動(dòng)畫(huà)，作為操作反饋（也作為一種微交互）筋帖，可以與用戶進(jìn)行情感互動(dòng)奸晴，有效地引導(dǎo)和延續(xù)用戶情感，使用戶更加愉悅地進(jìn)行后續(xù)操作日麸。（交互demo如下寄啼，視頻導(dǎo)出降低了飽和度，此處有色差４６栈）
。嗡综。騷瑞乙帮，發(fā)現(xiàn)簡(jiǎn)書(shū)沒(méi)辦法插入mov。极景。只能看線上展示了察净。。
視覺(jué)稿和交互demo出來(lái)后盼樟，基本順利通關(guān)~ 接著交付給前端同學(xué)氢卡，于是最頭疼的事來(lái)了。晨缴。译秦。此次跟上海團(tuán)隊(duì)進(jìn)行配合，溝通成本高且項(xiàng)目緊急且開(kāi)發(fā)資源有限且等等等等等击碗！
我：之前使用lottie做動(dòng)畫(huà)嗎筑悴？
前端小哥哥：no，有svg嗎延都？
雷猪。。晰房。
于是我把gif丟給了他，后來(lái)覺(jué)得自己很不冷靜，很后悔殊者。与境。
在這兒要提到gif的一些小弊端：比如影響性能、容易虛化以及兼容性問(wèn)題和缺幀重復(fù)幀等猖吴。而lottie導(dǎo)出json文件交付給前端同學(xué)摔刁，前端同學(xué)稍做關(guān)聯(lián)（有圖片的情況下需要進(jìn)行文件關(guān)聯(lián)），就可以解決以上問(wèn)題啦：１巍（css寫(xiě)出的動(dòng)畫(huà)比較簡(jiǎn)單機(jī)械且動(dòng)作生硬共屈，且開(kāi)發(fā)成本高，所以pass）在這兒要給還不太了解lottie的同學(xué)解釋一下這個(gè)由Airbnb開(kāi)源的支持 Android党窜、iOS 以及 ReactNative拗引，利用json文件的方式快速實(shí)現(xiàn)動(dòng)畫(huà)效果的庫(kù)。
1幌衣、首先矾削，我們需要下載插件bodymovin以及安裝器進(jìn)行安裝；
2豁护、安裝成功后打開(kāi)AE - 首選項(xiàng) - 常規(guī)哼凯，勾選“允許腳本寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)”；
3楚里、動(dòng)效設(shè)計(jì)完成后断部，打開(kāi)窗口 - 擴(kuò)展 - bodymovin，勾選需要導(dǎo)出的合成文件班缎，設(shè)置導(dǎo)出目錄文件名等（忘記設(shè)置會(huì)無(wú)法導(dǎo)出哦蝴光，這里以導(dǎo)出到桌面為例），然后render就ok啦~這時(shí)候桌面就會(huì)出現(xiàn)json文件和images的文件夾啦Ａ呙贰（AE中繪制圖形的動(dòng)畫(huà)沒(méi)有images文件夾）
注意：如果動(dòng)效素材是圖片形式而不是在AE中繪制的虱疏，記得要把素材圖片打包一起給前端同學(xué)，這里就必須進(jìn)行文件關(guān)聯(lián)了苏携！否則實(shí)現(xiàn)出來(lái)只有動(dòng)作沒(méi)有圖形內(nèi)容做瞪。劃重點(diǎn)：記得檢查images里面的圖是否有問(wèn)題，對(duì)于有問(wèn)題的圖片重新從sketch源文件切圖替換就好右冻。
隨著UI瘋狂發(fā)展階段的落幕装蓬，我們開(kāi)始越來(lái)越注重打磨產(chǎn)品細(xì)節(jié)，用戶體驗(yàn)等等纱扭。動(dòng)效的情感輔助以及交互的友好體驗(yàn)都無(wú)疑是更好的選擇和大方向牍帚。過(guò)去，想要實(shí)現(xiàn)一個(gè)生動(dòng)的動(dòng)畫(huà)乳蛾，設(shè)計(jì)師可能會(huì)找出一些參考案例給前端暗赶，當(dāng)然更好的情況也是自己用AE直接實(shí)現(xiàn)demo來(lái)展示（畢竟更加準(zhǔn)確直觀）鄙币，但是不管怎樣都需要前端同學(xué)再花費(fèi)較大的精力去開(kāi)發(fā)，并且后續(xù)還有隨之而來(lái)的各種微調(diào)蹂随，實(shí)現(xiàn)起來(lái)真的不太開(kāi)心十嘿。而現(xiàn)在lottie解決了這一切問(wèn)題，皆大歡喜岳锁。
lottie更好地架起了設(shè)計(jì)與前端在動(dòng)畫(huà)方面配合的橋梁绩衷，當(dāng)然lottie所支持的ae屬性還是有一定局限的，但是對(duì)于從事UI工作的我們基本都可以滿足哦激率。（此處不附屬性圖了咳燕，主要是密密麻麻看不清，大家自行百度吧乒躺，么么扎~ ）
盡管此次沒(méi)有出現(xiàn)上述可怕問(wèn)題（過(guò)程艱辛招盲，反反復(fù)復(fù)調(diào)整，電話溝通平均一個(gè)1h聪蘸，哭）
這里面的心酸不多講了宪肖，在此特別鳴謝本次項(xiàng)目被我折磨得死去活來(lái)的前端小哥哥！＝∨馈控乾！?
2018年2月3日
好不容易上線了！娜遵！頻道頁(yè)還為我們加了一個(gè)懸浮按鈕的入口（如下圖）:
兩天過(guò)后得知點(diǎn)擊量并沒(méi)有太大的起色蜕衡。。?
?设拟。慨仿。。纳胧。镰吆。。跑慕。万皿。。
調(diào)整核行！改改改＠喂琛！芝雪！不知道是不是 “選我” 不夠直觀减余，我的想法是用戶產(chǎn)生好奇心后更容易點(diǎn)擊進(jìn)來(lái)一探究竟（也許點(diǎn)擊率高，留存率低）惩系，而直接地說(shuō)明 “挑手機(jī)” 位岔，會(huì)不會(huì)只能吸引想要挑手機(jī)的用戶進(jìn)行點(diǎn)擊如筛，從而少了一些有可能進(jìn)行轉(zhuǎn)化的用戶。
赃承。妙黍。這個(gè)問(wèn)題還需繼續(xù)觀察悴侵。瞧剖。
遺留問(wèn)題
翻轉(zhuǎn)一張卡片后，用戶再去點(diǎn)擊另外一張卡片可免，交互應(yīng)該是怎么樣的呢抓于？
線上：翻轉(zhuǎn)一張卡片后（顯示答案選項(xiàng)面），此時(shí)用戶再去點(diǎn)擊另外一張卡片浇借，之前已經(jīng)翻轉(zhuǎn)過(guò)來(lái)的卡片（顯示問(wèn)題面）會(huì)自動(dòng)翻轉(zhuǎn)回去捉撮，以此類(lèi)推
我的前期計(jì)劃：翻轉(zhuǎn)一張卡片后（顯示答案選項(xiàng)面），此時(shí)用戶再去點(diǎn)擊另外一張卡片妇垢，另外這張卡片不做反應(yīng)巾遭，只有當(dāng)用戶自行將第一張卡片翻轉(zhuǎn)回去后才能進(jìn)行下一張卡片的操作
理由：在用戶沒(méi)有預(yù)知的前提下，自動(dòng)翻轉(zhuǎn)卡片有強(qiáng)制操作的意思闯估，會(huì)不會(huì)引起用戶反感灼舍？？
現(xiàn)在最后悔的就是沒(méi)有在項(xiàng)目結(jié)束時(shí)立即復(fù)盤(pán)，進(jìn)行回顧反思總結(jié)刚夺，導(dǎo)致現(xiàn)在拼了老命去回憶細(xì)節(jié)献丑，這中間僅僅是一個(gè)年的距離！（是春節(jié)不是365天侠姑。创橄。）
不知道是不是還有遺漏的小內(nèi)容，后續(xù)靈光乍現(xiàn)再補(bǔ)充吧莽红！
各位妥畏，周末愉快：D
