亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

來(lái)到騰訊已有一年多，在小火箭V2.0上也投入了很多精力，如今版本已上線，我們整理了在小火箭改版過(guò)程中的一些經(jīng)驗(yàn)與踩過(guò)的坑，分享給大家。

本文由本人與交互設(shè)計(jì)師Wingst合力完成

感謝翔哥、Nick、乃哥、S姐、小怡以及DNA設(shè)計(jì)中心所有童鞋的大力支持！

小火箭是電腦管家在用戶桌面端的加速小工具，能夠快速而輕量地幫助用戶清理電腦內(nèi)存、加速電腦，廣受用戶好評(píng)，改版前的日均使用次數(shù)已經(jīng)超過(guò)1億次，已經(jīng)成為了管家在用戶桌面的重要觸點(diǎn)。

舊版小火箭桌面控件

但是小火箭現(xiàn)在的設(shè)計(jì)和功能真的讓所有用戶都滿意嗎？為了尋找改進(jìn)的方向，我們對(duì)平時(shí)不使用小火箭的用戶做了一次在線的問(wèn)卷調(diào)研，反饋顯示，目前小火箭的存在感、能力感知、美觀程度均存在些許問(wèn)題，歸納后，我們將以“差異化”為出發(fā)點(diǎn)，解決目前存在的主要問(wèn)題。

組件打磨

我們從最基本的組件開(kāi)始，重新打造我們心目中的小火箭

A. 桌面控件

小火箭作為一個(gè)億級(jí)產(chǎn)品，用戶的既定習(xí)慣十分重要，一個(gè)不慎就可能造成出乎意料的狀況，每個(gè)細(xì)小的改變都應(yīng)做到盡可能的慎重，我們只有這么一個(gè)小小的控件是露在外面的，那么如何在拇指大小的區(qū)域做出好的設(shè)計(jì)？

小火箭桌面控件定稿（背景為設(shè)計(jì)過(guò)程中的無(wú)數(shù)飛機(jī)稿）

盲目改動(dòng)會(huì)導(dǎo)致用戶的使用習(xí)慣產(chǎn)生落差，這是十分危險(xiǎn)的，其實(shí)小火箭改版的最佳效果是，用戶在使用上不會(huì)有什么不同，但又有些不一樣的地方，似乎體驗(yàn)更好了，動(dòng)畫(huà)更酷了，更快更流暢了，那么我們的目的就達(dá)到了。

所以我們開(kāi)始尋求其他方向，在架構(gòu)上將控件進(jìn)行拆分，針對(duì)舊版控件的樣式、色彩等細(xì)節(jié)進(jìn)行重新優(yōu)化。之前小火箭控件是純灰度色，幾乎沒(méi)有任何色彩傾向，本次改版中加入了微弱的冷色調(diào)，與管家大界面在色調(diào)上達(dá)到統(tǒng)一。

內(nèi)存條的漸變色調(diào)做了進(jìn)一步調(diào)整，綠黃紅代表三種警示級(jí)別，越往上越危險(xiǎn)，我們?cè)诒３制漕伾Z(yǔ)義的基礎(chǔ)上增加藍(lán)色調(diào)，并保持在同一飽和度范圍，向管家11的青春冒險(xiǎn)主題進(jìn)行對(duì)齊，同時(shí)內(nèi)存條的漸變色調(diào)也與小火箭的品牌色系進(jìn)行關(guān)聯(lián)。

B. 火箭造型

在桌面控件設(shè)計(jì)完成后，我們開(kāi)始著手對(duì)小火箭的核心——火箭的造型進(jìn)行重新設(shè)計(jì)。

目前舊版火箭存在一些優(yōu)化的空間：

火箭箭體的形態(tài)圓潤(rùn)但缺乏速度感和科技感、結(jié)構(gòu)也比較復(fù)雜，LOGO受限于箭體形狀，展示空間非常有限，火箭停留時(shí)間很短，加上箭體較復(fù)雜使得logo很難看清，而用戶對(duì)小火箭的品牌感知主要來(lái)源于小火箭箭體和管家LOGO。

針對(duì)這些問(wèn)題，我們?yōu)檫@次火箭優(yōu)化總結(jié)了四個(gè)關(guān)鍵詞：科技感/極簡(jiǎn)/速度感/品牌感知

在開(kāi)始之前，我們搜索了大量與相關(guān)圖片和信息進(jìn)行參考

由于火箭本身的形態(tài)并不具備太強(qiáng)烈的速度感，所以我們找到了正好可以與它互補(bǔ)的戰(zhàn)斗機(jī)的元素。我們最終鎖定了三款飛行器進(jìn)行形態(tài)推演，分別是：世界上有人駕駛的最快飛機(jī)（黑鳥(niǎo)）、六倍音速的無(wú)人機(jī)（黑燕）以及國(guó)產(chǎn)經(jīng)典戰(zhàn)機(jī)殲20，它們?nèi)齻€(gè)的共同點(diǎn)都是具有極強(qiáng)的速度感。

二維火箭飛機(jī)稿

剛開(kāi)始我們也是把能夠想到的很多造型都做了出來(lái)，但是都不是很滿意。而隨著大方向的確定，我們的設(shè)計(jì)也漸漸簡(jiǎn)化，摒棄多余裝飾，強(qiáng)化品牌，但同時(shí)為了加強(qiáng)更極致的視覺(jué)效果，讓火箭的發(fā)射更抓眼球，我們開(kāi)始嘗試使用新的手段進(jìn)行設(shè)計(jì)。

三維火箭飛機(jī)稿

在制作后期中我們開(kāi)始結(jié)合三維軟件進(jìn)行設(shè)計(jì)，一方面是能夠使火箭視覺(jué)效果更加逼真，另一方面也可以為后續(xù)火箭造型的周邊產(chǎn)品做準(zhǔn)備。最重要的是，我們可以得到任何角度的火箭造型，那么在發(fā)射過(guò)程上我們就有了更多的想象空間。

最終，新版火箭的造型就在這樣的背景下產(chǎn)生了，這次我們使用極簡(jiǎn)的設(shè)計(jì)，摒棄一切多余的元素，造型上通過(guò)結(jié)合火箭與飛機(jī)來(lái)達(dá)到更強(qiáng)的速度感。

火箭在配色上全箭身都使用亮白色，只有LOGO使用管家藍(lán)，在短暫的發(fā)射過(guò)程中更容易被看清，同時(shí)由于使用的三維建模，發(fā)射的過(guò)程中還可以進(jìn)行自轉(zhuǎn)。

C. 消息通道

針對(duì)舊版消息通道存在的問(wèn)題與改版的方向做了一些總結(jié)。舊版消息通道的形式是通過(guò)控件旁邊的小尾巴來(lái)承載的，除此之外還有氣泡之類直接加在控件之上的樣式。

改版前消息通道形式

目前消息通道所承載的內(nèi)容有：加速結(jié)果、功能拉動(dòng)、運(yùn)營(yíng)消息、新手引導(dǎo)，以后可能還會(huì)變得更多。舊版的單一形式已經(jīng)無(wú)法很好的承載信息了，同時(shí)小尾巴這種形式也存在許多問(wèn)題，展示空間不足，視覺(jué)焦點(diǎn)也很分散。

改版前消息通道視覺(jué)焦點(diǎn)推移

拿發(fā)射結(jié)果舉例，在發(fā)射后會(huì)彈出這樣的消息，告知用戶加速結(jié)果與內(nèi)存的變化。視覺(jué)焦點(diǎn)從控件本身轉(zhuǎn)移到小尾巴，雖然不遠(yuǎn)但依然是要經(jīng)過(guò)一次轉(zhuǎn)移。為此我們將兩者合二為一，在桌面控件之上來(lái)顯示發(fā)射結(jié)果，這樣視覺(jué)焦點(diǎn)只需要在控件內(nèi)轉(zhuǎn)移即可。

我們?cè)O(shè)計(jì)了整套的消息通道體系并統(tǒng)一視覺(jué)焦點(diǎn)，每個(gè)類別承載能力不同，分工也不同。如圖中，我們?yōu)閮煞N發(fā)射結(jié)果、動(dòng)能拉動(dòng)和運(yùn)營(yíng)消息分別設(shè)計(jì)了不同類型的展現(xiàn)形式。

消息通道動(dòng)效體系

同時(shí)我們?yōu)橄⑼ǖ来蛟炝似ヅ涞膭?dòng)效體系——多個(gè)動(dòng)效交疊成階梯式結(jié)構(gòu)組成一個(gè)整體，增強(qiáng)整體動(dòng)畫(huà)流暢性與完整度，同時(shí)對(duì)象之間的階梯關(guān)系也可以使注意力得到逐步強(qiáng)化。

發(fā)射結(jié)果頁(yè)Demo

蓄力加速結(jié)果頁(yè)Demo

功能創(chuàng)新

我們希望通過(guò)一些創(chuàng)新功能來(lái)增強(qiáng)小火箭的能力感知和深度體驗(yàn)。

A. 蓄力加速

在之前的調(diào)研中，有一部分用戶反饋對(duì)小火箭加速效果不明顯。雖然我們有加速能力更強(qiáng)的深度加速功能但入口較深、操作流程較長(zhǎng)，為了彌補(bǔ)加速效果感知的問(wèn)題，我們需要有一個(gè)增強(qiáng)用戶對(duì)功能感知的加速方式。

我們使用了蟲(chóng)洞和子彈時(shí)間這兩個(gè)相對(duì)比較抽象的事物作為突破點(diǎn)。同時(shí)為了進(jìn)一步的強(qiáng)化品牌感知，我們?cè)诨鸺弦沧隽艘恍┯腥さ脑O(shè)計(jì)——一道閃光。

圖18蓄力加速Demo

在最終操作方式的選擇上，我們使用了一個(gè)在移動(dòng)端經(jīng)常會(huì)用到的手勢(shì)：長(zhǎng)按。

為什么會(huì)選擇長(zhǎng)按這個(gè)手勢(shì)？一方面可以認(rèn)為長(zhǎng)按是單擊的升級(jí)版操作，另一方面是通過(guò)長(zhǎng)按來(lái)模擬火箭在升空之前的一個(gè)準(zhǔn)備動(dòng)作。通過(guò)比單擊更強(qiáng)化的這樣一個(gè)操作，來(lái)觸發(fā)更強(qiáng)力的加速操作，聯(lián)想起來(lái)也更加容易。

B. 高危預(yù)警

我們認(rèn)為小火箭的理想狀態(tài)應(yīng)該是這樣——在你不需要的時(shí)候你不會(huì)察覺(jué)它，在需要的時(shí)候它又會(huì)主動(dòng)出現(xiàn)，展現(xiàn)自己的能力。高危預(yù)警這個(gè)功能就是用來(lái)在用戶需要的時(shí)候展現(xiàn)能力的：在內(nèi)存占用超過(guò)我們預(yù)設(shè)的閾值時(shí)，小火箭會(huì)發(fā)出警報(bào)，告知用戶內(nèi)存狀況并提醒用戶發(fā)射。

高危預(yù)警Demo

所以在制作高危預(yù)警時(shí)我們提取了火焰、電流、警報(bào)這些危險(xiǎn)符號(hào)，將桌面控件再次分解，在底部和頂部分別加上了紅色光暈和電流元素，然后我們將它合在一起，在內(nèi)存占用超過(guò)閾值時(shí)，就會(huì)出現(xiàn)這樣的效果了，通過(guò)閃爍的紅色光暈和旋轉(zhuǎn)流動(dòng)的電流來(lái)體現(xiàn)危險(xiǎn)、警示的作用，紅光的閃爍、電流旋轉(zhuǎn)和本身的流動(dòng)三段動(dòng)效呈階梯狀組合在一起，形成一個(gè)完整、順暢的動(dòng)效。

D. 蒸汽錐

我們能否可以給小火箭發(fā)射時(shí)做一個(gè)有趣的彩蛋表現(xiàn)形式，來(lái)烘托節(jié)日氛圍或者祝用戶生日快樂(lè)呢？基于這個(gè)方向的思考，聯(lián)系火箭本身發(fā)射的動(dòng)作，誕生了蒸汽錐的構(gòu)想。

蒸汽錐Demo

這又是一個(gè)針對(duì)火箭發(fā)射而設(shè)計(jì)的功能，蒸汽錐是指當(dāng)物體突破音障時(shí)，在物體周圍的蒸汽不斷堆積，會(huì)形成圓錐形的云霧。這里首先是借鑒了這樣一種現(xiàn)象來(lái)表現(xiàn)火箭發(fā)射的極速感，同時(shí)在發(fā)射后蒸汽團(tuán)可以形成一個(gè)圖案掉落下來(lái)，后續(xù)或許可以用這樣一個(gè)動(dòng)作來(lái)承載部分情感化運(yùn)營(yíng)任務(wù)。

結(jié)語(yǔ)

這次的項(xiàng)目從開(kāi)始到正式上線，經(jīng)歷了半年多的時(shí)間，我們也從毫無(wú)頭緒地瞎嘗試、亂踩坑，變得懂得從根源出發(fā)去思考，如何解決問(wèn)題，收獲真的很大，非常感謝開(kāi)發(fā)GG們不辭辛苦得對(duì)我們動(dòng)畫(huà)效果的真實(shí)還原，沒(méi)有你們就沒(méi)有最終上線時(shí)的最佳效果。