QQ手機版5.0“一鍵下班”設計小結

 　　還記得新版QQ那個特別討人喜歡的小紅點嗎?一拖一放，水花般散開，未讀消息就清除了，這麼一個備受強迫症好評的小功能，作者著實花了不少功夫，今天把他執行的過程分享出來，來學習專業設計師如何讓創意從點子落地成為現實，作者的思考過程很成熟，值得新手學習呦。

　　引子

　　偶米伽：在一次產品和設計師一起參與的很普通的腦暴活動中，產生了一個想法：世界上強迫症患者那麼多，而小紅點又是讓強迫症們最糾結的存在，是不是應該做個可以一鍵清除小紅點的功能? 大家的一致看法：“嗯，對的，要做。快，記錄一下。”然後順利的記錄，發郵件，然後……就沒有然後了。或許，這也是大部分腦暴的結果，有很多閃光點，卻沒有有效的落地執行。

　　思考

　　消除小紅點有很多種方式，腦暴會議上也有記錄，比如說：

　　方案一，通過搖一搖把小紅點抖落;

　　方案二，通過對著手機吹一下，把小紅點吹掉;

　　方案三，把小紅點拖拽下來，不喜歡哪個拽哪個;

　　對於這三個方案，是否都需要嘗試下呢?在開始動手之前，思考一下會減少很多工作量。

　　對於方案一，搖一搖的方案的確挺順手，但是跟很多其他軟件的搖一搖概念類似，別人看到也不會覺得是原創，手勢不再具有傳播性;

　　對於方案二，吹掉也可行，但是對於音量檢測來說，如果你在用QQ手機版的時候，周圍忽然出現很大的聲響，小氣泡可能就消失了，這種體驗應該是不能忍的;

　　對於方案三，嗯，看起來不錯啊!但是，大家能接受嗎?這個真不好說。

　　執行

　　根據上邊腦補的過程，”我覺得”方案三能做成口碑和傳播點的概率更大一些，而且看起來很有技術含量的樣子。於是開始做demo來體驗下。在iOS和Android上做demo比較快的一個解決方案是使用flash，因為可以比較方便的加個殼在兩個平台上就都可以運行了，不過作為一個demo，能順暢在一個平台上運行也不錯。

　　然後就開始了方案稿的輸出。以下就是第一稿：

　　拖拽一定是要有個動畫的，要不然會感覺莫名其妙。而動畫的方式，想法是模擬拽掉的視覺感覺，並且視覺和開發都能夠簡單處理。第一稿的想法是希望拖拽數字紅點的時候，在原始位置留下一個跟數字紅點等大的小紅點，拖得越遠，原始位置的氣泡就會越小，理想情況下，就會有個拖拽下來的趕腳了……吧?

　　有了想法後，速度用flash還原了下，然後在手機上體驗了一把，感覺，這就是個bug啊……由於拖拽的不夠遠，所以手指還沒挪開的時候，紅點就被拖下來了，松手的時候只是看到紅點莫名其貌的消失了。這貨絕對通不過評審的，至少得有個距離，能看的很清楚什麼時候放手可以拖拽掉小紅點，什麼時候放手紅點會歸位。這稿雖然不合格，但是實現簡單啊，不過這好像不是初衷，好用更重要一點，於是有了第二稿：

　　在第一稿的基礎上增加了拖動的距離，在兩個紅點之間畫一個梯形連接起來，感覺除了看起來有點二貌似沒有其他問題了。以下有個示意圖來描述解決方法：

　　圖1. 建立兩個紅點的坐標系(flash的坐標y軸的確是向下的)

　　圖2. 計算四個切點坐標並畫線段，填充顏色。

　　(有了坐標系，感覺高大上了很多吧…)

　　關於看起來有點愣的問題，並不是沒有解決方案，只是解決起來會比較麻煩。作為一個有節操的設計師，這裡的質感應該是那種肉(nian)肉(huhu)的感覺，松手還會有回彈，消失的時候還要有個爆炸動畫，一不小心扔出去應該有加速度同時受重力加速度影響才對。於是，期望中實現出來應該是這個樣子的：

　　關鍵還是執行，效果是這樣，那是否有可行性呢?努力回憶了下初中數學老師畢業時候說過話，貝塞爾曲線什麼的或許可以一戰。

　　———————-對設計師來說前方燒腦，准備好心態——————————

　　圖3. 貝塞爾曲線模型示意

　　既然是貝塞爾曲線，就得有個控制點，控制點的位置比較關鍵。初步設想是，隨著兩個圓點的距離增大，臨時點point_temp從p2向大圓的中心p0移動，然後從p1向point_temp畫線，取重點作為貝塞爾曲線控制點p5,這樣就能實現隨著距離增加中間的連接區域越來越細，想想好像是這麼回事。體驗了下，發現中間縮小的速率太慢，感覺不太對勁，於是優化了下模型，如下圖：

　　圖4. 貝塞爾曲線模型優化示意

　　把point_temp的移動距離從p2到p0移動，修改為從p2向p4移動，這樣控制點移動的速度就會快很多，體驗了下，總算像那麼回事了。不過還不夠完美，如果p2和p4是動態計算的曲線就更完美了，不過這麼厲害的算法問題就交給專業的開發GG們去處理了。至於其他的，回彈是常規算法，有現成回彈模型，爆炸輸出了序列幀。加上產品同學強大的項目管理和推動能力，開發同學的聰明智慧，整個項目就順利的落地了。

　　落地是落地了，鵝廠內還有很多評審。嗯，然後聽聽大佬的肯定意見吧~ “蠻好玩的。” “這東西，粘乎乎的感覺啊…” “喲，你還會點開發…” “這有什麼好玩的?” “不知道你們浪費時間做這種小功能有什麼用?” “要從整體層面上看，要有系統。”聽起來，好像，沒有很負面嘛，而且對以後的工作提出了很明確的指導意義……最起碼，方案沒有被拍死，於是開開心心的推向了市場檢驗。

　　接下來看看發布之後用戶怎麼看吧：

　　荒涼的優越感：用過感覺不錯 (8月17日 06:40)

　　黃浦江邊看星星：早就知道了，還蠻實用的!! (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)

　　檐下燕兮：哇哦~~~~專為紅點恐懼症，信息閱讀強迫症，有救了(8月18日 16:18)

　　月夜-獨步靜聽琴：那感覺超爽有木有~~ (8月16日 15:33)

　　後來，這個拖拽紅點有了自己的名字：“一鍵下班”。有一段時間，微博上搜索“QQ5.0″最熱的精選微博就是“一鍵下班”，線下也有不少朋友當面提起，甚至在公交車站都聽到有人向朋友推薦這個功能。以上種種，看到之後的確還是有點小開心的。

　　寫在最後

　　總結一下，一件事情用心去做，用戶自然會感受得到!所以：QQ設計團隊(深圳)急招交互設計師一名，視覺設計師一名，有意向的速度整理作品簡歷發以下郵箱： [email protected](5M以下附件)或者[email protected](不限附件大小)。