QQ手機(jī)版 5.0“一鍵下班”設(shè)計(jì)小結(jié)
在一次產(chǎn)品和設(shè)計(jì)師一起參與的很普通的腦暴活動中,產(chǎn)生了一個想法:世界上強(qiáng)迫癥患者那么多,而小紅點(diǎn)又是讓強(qiáng)迫癥們最糾結(jié)的存在,是不是應(yīng)該做個可以一鍵清除小紅點(diǎn)的功能? 大家的一致看法:“嗯,對的,要做。快,記錄一下。”然后順利的記錄,發(fā)郵件,然后……就沒有然后了。或許,這也是大部分腦暴的結(jié)果,有很多閃光點(diǎn),卻沒有有效的落地執(zhí)行。
思考
消除小紅點(diǎn)有很多種方式,腦暴會議上也有記錄,比如說:
方案一,通過搖一搖把小紅點(diǎn)抖落;
方案二,通過對著手機(jī)吹一下,把小紅點(diǎn)吹掉;
方案三,把小紅點(diǎn)拖拽下來,不喜歡哪個拽哪個;
對于這三個方案,是否都需要嘗試下呢?在開始動手之前,思考一下會減少很多工作量。
對于方案一,搖一搖的方案的確挺順手,但是跟很多其他軟件的搖一搖概念類似,別人看到也不會覺得是原創(chuàng),手勢不再具有傳播性;
對于方案二,吹掉也可行,但是對于音量檢測來說,如果你在用QQ手機(jī)版的時候,周圍忽然出現(xiàn)很大的聲響,小氣泡可能就消失了,這種體驗(yàn)應(yīng)該是不能忍的;
對于方案三,嗯,看起來不錯啊!但是,大家能接受嗎?這個真不好說。
執(zhí)行
根據(jù)上邊腦補(bǔ)的過程,”我覺得”方案三能做成口碑和傳播點(diǎn)的概率更大一些,而且看起來很有技術(shù)含量的樣子。于是開始做demo來體驗(yàn)下。在iOS和Android上做demo比較快的一個解決方案是使用flash,因?yàn)榭梢员容^方便的加個殼在兩個平臺上就都可以運(yùn)行了,不過作為一個demo,能順暢在一個平臺上運(yùn)行也不錯。
拖拽一定是要有個動畫的,要不然會感覺莫名其妙。而動畫的方式,想法是模擬拽掉的視覺感覺,并且視覺和開發(fā)都能夠簡單處理。第一稿的想法是希望拖拽數(shù)字紅點(diǎn)的時候,在原始位置留下一個跟數(shù)字紅點(diǎn)等大的小紅點(diǎn),拖得越遠(yuǎn),原始位置的氣泡就會越小,理想情況下,就會有個拖拽下來的趕腳了……吧?
有了想法后,速度用flash還原了下,然后在手機(jī)上體驗(yàn)了一把,感覺,這就是個bug啊……由于拖拽的不夠遠(yuǎn),所以手指還沒挪開的時候,紅點(diǎn)就被拖下來了,松手的時候只是看到紅點(diǎn)莫名其貌的消失了。這貨絕對通不過評審的,至少得有個距離,能看的很清楚什么時候放手可以拖拽掉小紅點(diǎn),什么時候放手紅點(diǎn)會歸位。這稿雖然不合格,但是實(shí)現(xiàn)簡單啊,不過這好像不是初衷,好用更重要一點(diǎn),于是有了第二稿:
在第一稿的基礎(chǔ)上增加了拖動的距離,在兩個紅點(diǎn)之間畫一個梯形連接起來,感覺除了看起來有點(diǎn)二貌似沒有其他問題了。以下有個示意圖來描述解決方法:
圖1. 建立兩個紅點(diǎn)的坐標(biāo)系(flash的坐標(biāo)y軸的確是向下的)
圖2. 計(jì)算四個切點(diǎn)坐標(biāo)并畫線段,填充顏色
(有了坐標(biāo)系,感覺高大上了很多吧…)
關(guān)于看起來有點(diǎn)愣的問題,并不是沒有解決方案,只是解決起來會比較麻煩。作為一個有節(jié)操的設(shè)計(jì)師,這里的質(zhì)感應(yīng)該是那種肉(nian)肉(huhu)的感覺,松手還會有回彈,消失的時候還要有個爆炸動畫,一不小心扔出去應(yīng)該有加速度同時受重力加速度影響才對。于是,期望中實(shí)現(xiàn)出來應(yīng)該是這個樣子的:
關(guān)鍵還是執(zhí)行,效果是這樣,那是否有可行性呢?努力回憶了下初中數(shù)學(xué)老師畢業(yè)時候說過話,貝塞爾曲線什么的或許可以一戰(zhàn)。
———————-對設(shè)計(jì)師來說前方燒腦,準(zhǔn)備好心態(tài)——————————
圖3. 貝塞爾曲線模型示意
既然是貝塞爾曲線,就得有個控制點(diǎn),控制點(diǎn)的位置比較關(guān)鍵。初步設(shè)想是,隨著兩個圓點(diǎn)的距離增大,臨時點(diǎn)point_temp從p2向大圓的中心p0移動,然后從p1向point_temp畫線,取重點(diǎn)作為貝塞爾曲線控制點(diǎn)p5,這樣就能實(shí)現(xiàn)隨著距離增加中間的連接區(qū)域越來越細(xì),想想好像是這么回事。體驗(yàn)了下,發(fā)現(xiàn)中間縮小的速率太慢,感覺不太對勁,于是優(yōu)化了下模型,如下圖:
把point_temp的移動距離從p2到p0移動,修改為從p2向p4移動,這樣控制點(diǎn)移動的速度就會快很多,體驗(yàn)了下,總算像那么回事了。不過還不夠完美,如果p2和p4是動態(tài)計(jì)算的曲線就更完美了,不過這么厲害的算法問題就交給專業(yè)的開發(fā)GG們?nèi)ヌ幚砹?。至于其他的,回彈是常?guī)算法,有現(xiàn)成回彈模型,爆炸輸出了序列幀。加上產(chǎn)品同學(xué)強(qiáng)大的項(xiàng)目管理和推動能力,開發(fā)同學(xué)的聰明智慧,整個項(xiàng)目就順利的落地了。
落地是落地了,鵝廠內(nèi)還有很多評審。嗯,然后聽聽大佬的肯定意見吧~ “蠻好玩的。” “這東西,粘乎乎的感覺啊…” “喲,你還會點(diǎn)開發(fā)…” “這有什么好玩的?” “不知道你們浪費(fèi)時間做這種小功能有什么用?” “要從整體層面上看,要有系統(tǒng)。”聽起來,好像,沒有很負(fù)面嘛,而且對以后的工作提出了很明確的指導(dǎo)意義……最起碼,方案沒有被拍死,于是開開心心的推向了市場檢驗(yàn)。
接下來看看發(fā)布之后用戶怎么看吧:
荒涼的優(yōu)越感:用過 感覺不錯 (8月17日 06:40)
黃浦江邊看星星:早就知道了,還蠻實(shí)用的!! (8月16日 23:51) 漢安某:@小咗向右 @尋吟者不遇 @豬妖羅 @包子頭wawa get新技能 (8月16日 23:25)
Joy__D的galaxy是fanfan:知道真相的我眼淚掉下來…… (8月16日 22:04)
漫游在這世界:這個功能太好了 (8月16日 22:00)
123sdf的小窩:太喜歡這個功能了。特別是只有群信息時。 (8月15日 19:34)
檐下燕兮:哇哦~~~~專為紅點(diǎn)恐懼癥,信息閱讀強(qiáng)迫癥,有救了 (8月18日 16:18)
月夜-獨(dú)步靜聽琴:那感覺超爽有木有~~ (8月16日 15:33)
后來,這個拖拽紅點(diǎn)有了自己的名字:“一鍵下班”。有一段時間,微博上搜索“QQ5.0″最熱的精選微博就是“一鍵下班”,線下也有不少朋友當(dāng)面提起,甚至在公交車站都聽到有人向朋友推薦這個功能。以上種種,看到之后的確還是有點(diǎn)小開心的。
寫在最后
總結(jié)一下,一件事情用心去做,用戶自然會感受得到!所以:QQ設(shè)計(jì)團(tuán)隊(duì)(深圳)急招交互設(shè)計(jì)師一名,視覺設(shè)計(jì)師一名,有意向的速度整理作品簡歷發(fā)以下郵箱: omegashao@tencent.com(5M以下附件)或者382931382@qq.com(不限附件大小)。
本文地址:http://www.irelandcustomcontracting.com/tutorial/di2506.html