騰訊QQ概念版：http://zgbjpzl.com/down/32717.html
QQ 概念版經(jīng)過一年的秘密研發(fā)，終于掀開了她的神秘面紗，向世人展現(xiàn)了她的真實(shí)面目，開始對用戶進(jìn)行申請體驗(yàn)，做為一個全新的產(chǎn)品，以及內(nèi)部封閉秘密研發(fā)的眾多因素，可能很多人想了解這個QQ概念版的研發(fā)設(shè)計過程以及產(chǎn)品的設(shè)計理念，在這里我們將帶你全面的了解QQ概念版這款產(chǎn)品的研發(fā)設(shè)計過程，也和大家一起分享我們項(xiàng)目團(tuán)隊(duì)的研發(fā)設(shè)計經(jīng)驗(yàn)。
1.項(xiàng)目背景
QQ同時在線過“億”，騰訊開始正式步入“億”時代，正在大家沉浸在喜悅以及自豪的同時，我們一款全新的概念產(chǎn)品將破繭而出，因?yàn)槲覀冎肋^“億”，互聯(lián)網(wǎng)對我們來說意味了更大的期望，也給我們更大的責(zé)任，在這里我們會去探索未來QQ的概念模型:
未來IM會發(fā)展成什么樣？
未來用戶的溝通會呈現(xiàn)什么樣？
什么樣的體驗(yàn)設(shè)計能更便捷地滿足用戶的溝通以及交流？
觸摸時代已經(jīng)到來，我們?nèi)绾翁峁┯脩舾玫捏w驗(yàn)設(shè)計？
……
其實(shí)對于QQ 的探索，我們從來沒有停，前期的My QQ概念視頻的展示以及QQ搜索應(yīng)用等概念視頻，都已經(jīng)在網(wǎng)上風(fēng)靡一時，而如何真正在概念設(shè)計的基礎(chǔ)上，結(jié)合即時通訊強(qiáng)大的技術(shù)力量孵化出一個真正能讓用戶體驗(yàn)的產(chǎn)品，是大家最為期待的。
2.研發(fā)設(shè)計過程
QQ概念版 在研發(fā)設(shè)計之初，由于投入開發(fā)資源比較少，項(xiàng)目戰(zhàn)線拉得比較長，雖然前階段沒有產(chǎn)品經(jīng)理的參與，但是只有設(shè)計師及開發(fā)人員的團(tuán)隊(duì)，或許是讓設(shè)計師能更好的發(fā)揮想象力的機(jī)遇，雖然流程沒有如研發(fā)QQ時的規(guī)范，但這樣能采用更加敏捷的開發(fā)方式。從秘密研發(fā)到最終亮相，期間誕生了很多富有創(chuàng)新性的設(shè)計體驗(yàn)，在產(chǎn)品成型后我們也積累沉淀了很多有價值的經(jīng)驗(yàn)、技術(shù)及創(chuàng)新點(diǎn)，這也是騰訊首款NUI（自然用戶交互）產(chǎn)品，結(jié)合了人機(jī)工學(xué)知識，實(shí)現(xiàn)了多點(diǎn)觸摸操作。在實(shí)現(xiàn)IM（即時通訊）的基礎(chǔ)功能之外，QQ 概念版還推出了動感相框、動態(tài)背景、多Tab聊天窗口、3D交互、矢量界面、桌面好友等一系列新功能、新體驗(yàn)以及Windows7的重要新特性。相信大家更關(guān)注QQ 概念版研發(fā)的過程以及細(xì)節(jié)，在這里我將簡單對QQ 概念版的研發(fā)設(shè)計過程跟大家分享。
QQ概念版團(tuán)隊(duì)在一開始設(shè)計之初就定下了自己的設(shè)計目標(biāo)：
創(chuàng)新性的界面能讓人眼前一亮，需要承載用戶更多的情感，讓用戶感受到界面的生命力，更需要傳遞一個時間和空間上的應(yīng)用，帶給用戶更多想象的空間，讓界面的表現(xiàn)更加豐富多彩，通過對人機(jī)工學(xué)的知識運(yùn)用，更好的支持鼠標(biāo)操作及多點(diǎn)觸摸操作。
我們在設(shè)計過程中提煉了兩個未來趨勢設(shè)計：擬人化和擬物化，其中涉及到的核心關(guān)鍵詞為：生命力、時間感和空間感，生命力就是通過擬人化的情感溝通，是產(chǎn)品更具有親和力，簡單來說就是在交互的操作上有呼吸效果，在視覺的感受上有更貼近人的實(shí)際生活場景，而時間感和空間感就是通過擬物化的產(chǎn)品界面，是用戶更貼切生活，讓用戶在使用過程更好與產(chǎn)品進(jìn)行互動。
體現(xiàn)在設(shè)計會隨著時間的變化而產(chǎn)生不同的界面效果，而空間感則是通過wpf的新技術(shù)，體現(xiàn)出多維的空間表現(xiàn)力。而我們研發(fā)的一個重要的目的就是開始研究多點(diǎn)觸摸對界面帶來的革新及挑戰(zhàn)。
整個設(shè)計的過程將有以下幾個步驟：
A.創(chuàng)意腦暴：
當(dāng)然，看到如此光鮮的界面并不是一朝一夕能出來的，期間經(jīng)過了反復(fù)的腦暴，有來自CDC內(nèi)部的設(shè)計火花的碰撞，也有平時項(xiàng)目積累的的創(chuàng)意，更有來自技術(shù)團(tuán)隊(duì)對前沿技術(shù)的探索和分享，所有的一切才成就了目前的界面，看下我們部分腦暴在白板上留下的一次次天馬行空的概念火花：
B交互流程、線框圖及紙面原型
從五花八門的腦暴以及天馬行空的概念腦暴圖中可看出，有些可能并不實(shí)用或符合我們的版本需要，我們會集中起來對腦暴概念圖進(jìn)行篩選，將有發(fā)展空間的圖進(jìn)行更加細(xì)致的交互流程設(shè)計，即具體的概念線框圖設(shè)計，以此來確定用戶使用場景及具體功能的交互操作。對于篩選掉的腦暴圖，我們不會丟棄，所有的創(chuàng)意點(diǎn)我們都儲備保存，因?yàn)檫@些很可能是下一個新的創(chuàng)意設(shè)計。當(dāng)然，更加需要考慮的就是我們的產(chǎn)品是既適應(yīng)于鼠標(biāo)也適用于手的觸摸操作的，因此將給我們帶來更大的挑戰(zhàn)。
我們通過手繪線框圖的方式來展示產(chǎn)品中的某些功能是如何操作和使用的，鼠標(biāo)交互操作方式則是沿用了多年的經(jīng)驗(yàn)及規(guī)范來制定，在這里不加贅述，而觸摸則需要用戶更多的以指尖的動作來達(dá)到操作的目的。
具體的觸摸操作在我們產(chǎn)品中的體現(xiàn)有：單擊、滑動（滾屏）、拖放（選中、按住、移動）、兩指拉伸（縮放）、長按等。這些都將在我們的QQ概念版中有所體現(xiàn)。對于平板電腦觸摸方式及應(yīng)用場景我們都在進(jìn)一步的研究當(dāng)中，包括結(jié)合人機(jī)工學(xué)等知識，結(jié)合使用平板電腦的使用場景，如何讓人能更加舒適的進(jìn)行操作，都是我們的研究方向。
在流程圖及線框圖出來之后，我們會開始進(jìn)行紙面原型的設(shè)計，這個過程可以幫助我們模擬使用時的具體場景，更完善操作時的交互流程。在此過程中我們會發(fā)現(xiàn)之前的線框圖上設(shè)計不合理的地方，從而加以改進(jìn)。通過這樣的紙面原型的方式，更能體現(xiàn)在使用觸摸操作時所遇到的問題，從而產(chǎn)生更加完善的設(shè)計。當(dāng)然，這樣的方式也體現(xiàn)了設(shè)計師的一個思考過程，更直觀、方便的實(shí)現(xiàn)我們的目的，以更大的視野提供解決問題的思路，完成了最初的原型設(shè)計。
為了體現(xiàn)QQ 概念版觸摸的特性，我們也對用戶界面也進(jìn)行了前所未有的調(diào)整，對界面的控件進(jìn)行了拓展，控件的尺寸大小進(jìn)行了調(diào)整，使之既能滿足鼠標(biāo)操作也能適應(yīng)觸摸的操作方式，在期間尋找平衡點(diǎn)，這個協(xié)調(diào)過程相當(dāng)困難，業(yè)界也沒有相關(guān)的指引和類似案例，全都需要設(shè)計師自己來整理和解決這些矛盾的問題，我們已在整理觸摸和鼠標(biāo)操作的規(guī)范，讓其做出更詳細(xì)的區(qū)分和融合。希望通過梳理，能解決觸摸對于面板的尺寸大小要求和視覺感受的沖突，使得產(chǎn)品的使用、操作及視覺感受更加合理、舒適和美觀。
這個過程會出一些Blend或Flash交互原型概念模型，這些高仿真的原型在交互設(shè)計概念階段討論是非常有必要的，他可以最直觀地感受到體驗(yàn)創(chuàng)新帶來的操作變化，也為后期的原型設(shè)計節(jié)省很多時間，不至于會大部分的返工和修改，這里以表情界面的一些最初的原型給大家簡單展示下，也因?yàn)橛羞@一步儲備，我們沉淀很多很有價值的創(chuàng)新demo：
c.視覺風(fēng)格設(shè)定
在完成主要功能的定位和交互設(shè)計之后，開始視覺風(fēng)格上的設(shè)計以及創(chuàng)新，在界面風(fēng)格設(shè)定的時候，盡量去思考擬人以及擬物的場景運(yùn)用， 結(jié)合了Blend平臺優(yōu)秀的動畫展示及交互能力，在視覺上融入交互體驗(yàn)和創(chuàng)新的元素，讓概念設(shè)計以及腦暴的創(chuàng)意點(diǎn)得到充分的發(fā)揮，早期的視覺風(fēng)格對整個版本定下了基本格調(diào)，這里推薦一款軟件：Expression Design,這款軟件繪制出的效果都是矢量圖，并且可以直接運(yùn)用到原型系統(tǒng)開發(fā)，她所繪制的矢量圖將做為元素來使用，可以縮減很多不必要的設(shè)計流程，給大家展示下我們最早的概念風(fēng)格稿，在這其中我們能看到QQ概念版的雛形。
事實(shí)上視覺上的創(chuàng)新對用戶的沖擊力是非常大的，在設(shè)計過程中，我們也秉承“生命力、空間感、時間感”這幾個關(guān)鍵詞進(jìn)行創(chuàng)新設(shè)計，例如：
1.全新的登錄面板在面板上對動態(tài)的節(jié)日展示，提供了空間和時間上的切換，在設(shè)計之初我們規(guī)劃了每天的多時段的實(shí)時天氣展示提供了空間和時間上的切換，這個后續(xù)版本可以敬請期待，這樣就為用戶從時間上感受到QQ概念版的魅力。
2.圓盤式的表情管理界面，通過顏色的視覺感應(yīng)，激起用戶對表情品牌的識別，也更加方便觸摸操作，在底部灰色模塊區(qū)域，用戶近期使用的表情會自動保存，方便用戶使用。當(dāng)然這里空間的分配以及面板的擴(kuò)展性的設(shè)計也是我們下一階段會去完善的，包括QQ概念版獨(dú)有的QQ動態(tài)表情也會在下一版本做一個統(tǒng)一規(guī)劃。
3.桌面好友的拖曳拉出表現(xiàn)，對于男女的表現(xiàn)區(qū)分以及會員特性的表現(xiàn)和動態(tài)圓盤菜單的展示都體現(xiàn)了視覺創(chuàng)新對用戶帶來的愉悅以及尊貴感，最早桌面小人如何讓用戶感受到好友的氣息，但又能形成統(tǒng)一的品牌特色，在視覺風(fēng)格之處也嘗試了很多的方案，最終我們以桌面小人為原型展開一系列的創(chuàng)新設(shè)計，我們在創(chuàng)新規(guī)劃的過程中也考慮了如何與桌面好友互動，目前好友在聽音樂，小人頭像就會頭戴耳機(jī)晃動，有動聽悅耳的音符飄出，你可以快速跟好友快聊等等，后期我們會做更多對與好友互動的溝通方式的嘗試，包括游戲狀態(tài)以及一些更深入的好友動態(tài)信息的挖掘。
4.好友管理是這次創(chuàng)新過程中用戶界面革新變化最大的一個界面，在這里可視化的好友管理，以及便于觸摸的操作體驗(yàn)得到了很好的融合。為了讓用戶有更好的沉浸感，我們用了桌面以及卡片等真實(shí)的擬物化場景設(shè)計來讓用戶沉浸在這個控件中。但由于開發(fā)時間尚短，好友管理功能不是很完善，我們將使她更加完善。在后續(xù)的版本中，更多的去挖掘用戶的關(guān)系鏈以及如何去呈現(xiàn)她，通過更加可視的方式進(jìn)行展示好友的溝通方式會是我們需要去推敲和發(fā)展的，好友管理將會更加便捷，敬請期待！
5.動態(tài)背景，動態(tài)的圖標(biāo)展示以及動感相框，用戶可以自定義去切換自己喜歡的皮膚風(fēng)格，設(shè)計初衷也是希望讓用戶感受到我們的界面是有生命力的，很多的創(chuàng)新設(shè)計，其實(shí)在視覺上融合交互會有更多的創(chuàng)新以及更有趣的設(shè)計,后續(xù)我們將不斷去尋找切入點(diǎn)，對界面注入情感，使之更加富有生命力。
d原型DEMO開發(fā)
之前已經(jīng)有所介紹，QQ 概念版是在WPF Blend平臺下開發(fā)的，這個平臺下開發(fā)一個好處就是設(shè)計師設(shè)計的原型可以直接給到技術(shù)人員進(jìn)行實(shí)際開發(fā)，目前QQ概念版界面上可視的交互以及視覺表現(xiàn)很多都是有我們設(shè)計師提供原型開發(fā)模型給到技術(shù)人員，再由技術(shù)人員加以技術(shù)內(nèi)容實(shí)現(xiàn)而生成的，當(dāng)然這個過程就對設(shè)計師提出了更高的要求，給到技術(shù)人員的不能只是靜態(tài)圖片，而是帶有操作性的原型。在設(shè)計的過程中，需要規(guī)范化控件模塊，使得研發(fā)更加便捷。一個很簡單的button也是需要無數(shù)的事件以及狀態(tài)的設(shè)計，最終給到技術(shù)人員的就是一個控件和實(shí)體的界面原型，所以這個過程對我們設(shè)計師來說還是滿煎熬的，我們除了為版本設(shè)計一些原型DEMO，還會盡量把之前腦暴的一些概念沉淀下來做為下一波腦暴的應(yīng)用點(diǎn)，將會作為我們設(shè)計的儲備資源。
桌面好友示意：
這只是個簡單的桌面好友的demo，但是事實(shí)上我們所有界面都是有這些有機(jī)分割的模塊原型提供到技術(shù)人員那邊開發(fā)的，技術(shù)人員會根據(jù)我們的設(shè)計原型去結(jié)合技術(shù)因素，捆綁相關(guān)數(shù)據(jù)以及將最新的技術(shù)體驗(yàn)融合到原型中研發(fā)出最新的版本。
e.產(chǎn)品的研發(fā)設(shè)計
當(dāng)我們提供給技術(shù)人員原型設(shè)計模型時，他們可以在此基礎(chǔ)上去完善實(shí)際的操作數(shù)據(jù)捆綁以及實(shí)現(xiàn)這些模塊直至運(yùn)用。雖然我們設(shè)計的原型基本上可以直接使用，但是實(shí)際開發(fā)的環(huán)境可能更為復(fù)雜，很多控件可能需要評估開發(fā)環(huán)境，設(shè)計師通過協(xié)助技術(shù)人員基于實(shí)際的控件對原型demo進(jìn)行調(diào)整，使之能達(dá)到開發(fā)環(huán)境的要求，技術(shù)人員在不斷優(yōu)化原型系統(tǒng)里面的代碼及對一些仿真的特效進(jìn)行真實(shí)環(huán)境的轉(zhuǎn)化中，也不斷去優(yōu)化技術(shù)層面的探索，包括多點(diǎn)觸摸以及內(nèi)部邏輯的研發(fā)。
這里我們跟技術(shù)人員也積累下來了一種加強(qiáng)程序員和設(shè)計師協(xié)同工作的技術(shù)方案，可以讓技術(shù)人員和設(shè)計師更加無縫地進(jìn)行協(xié)同合作，這個后面有機(jī)會再向大家分享下里面的協(xié)同合作方法。
f.功能和性能測試
在產(chǎn)品功能設(shè)計完成后，就開始了一系列的功能以及性能測試，對于這種概念創(chuàng)新的產(chǎn)品，功能以及性能的測試是非常有必要的。她可以不斷驅(qū)使我們技術(shù)以及設(shè)計去優(yōu)化產(chǎn)品本身的性能以及完善我們的創(chuàng)新點(diǎn)，當(dāng)然爆發(fā)出來的大規(guī)模的bug也是令我們頭疼，我們團(tuán)隊(duì)在后期經(jīng)過測試產(chǎn)生了上千個的 bug,可想而知，這個版本對我們開發(fā)以及測試的挑戰(zhàn)，雖然目前性能上還有待于優(yōu)化，但是由于本身WPF性能和版本的創(chuàng)新需求過于多，需要比較多的體驗(yàn)融合，可能對版本性能稍微有些影響，但是我們在下一階段也會不斷在性能以及體驗(yàn)上不斷優(yōu)化，使之能在用戶可接受的范圍達(dá)到一個平衡。
g.推廣主頁以及視頻制作
對于概念創(chuàng)新的產(chǎn)品，很多時候用戶會因?yàn)椴僮髁?xí)慣的原因，可能不是很了解，所以后期的概念視頻展示是非常有必要的。視頻演示能最直觀地給用戶演示出創(chuàng)新功能的新特性，以及功能界面的展示，在后期我們也開始了視頻的設(shè)計、錄制以及剪輯，充分體現(xiàn)在真實(shí)環(huán)境里面產(chǎn)品各個功能點(diǎn)的展示。
OK估計說這么多，看了都煩，來吧，看下我們的QQ概念版體驗(yàn)創(chuàng)新視頻，就在這里，你可以一窺我們的產(chǎn)品，體驗(yàn)下我們精心為你打造的一款具有創(chuàng)新性IM產(chǎn)品：
“路漫漫其修遠(yuǎn)兮,吾將上下而求索“體驗(yàn)創(chuàng)新是個長久的設(shè)計，我們在后面也會不斷去優(yōu)化現(xiàn)有的版本的性能以及完善一些功能，當(dāng)然我們不會忘了我們的初衷，我們會繼續(xù)去攀爬創(chuàng)新型IM產(chǎn)品的開始新一輪的概念設(shè)計的高峰，敬請期待下次的體驗(yàn)熱
關(guān)于騰牛 | 聯(lián)系方式 | 發(fā)展歷程 | 版權(quán)聲明 | 下載幫助(？) | 廣告聯(lián)系 | 網(wǎng)站地圖 | 友情鏈接
Copyright 2005-2018 QQTN.com 【騰牛網(wǎng)】 版權(quán)所有 鄂ICP備17010784號-1 | 
鄂公網(wǎng)安備 42011102000245號
聲明： 本站非騰訊QQ官方網(wǎng)站 所有軟件和文章來自互聯(lián)網(wǎng) 如有異議 請與本站聯(lián)系 本站為非贏利性網(wǎng)站 不接受任何贊助和廣告
