騰訊大講堂62拇指下的精彩手機(jī)QQ交互設(shè)計(jì)經(jīng)驗(yàn)分享.ppt

,騰 訊 大 講 堂,第六十二期,研發(fā)管理部,大講堂主頁(yè)：/class 與講師互動(dòng)：/group/class,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,什么是移動(dòng)終端軟件交互,移動(dòng)終端軟件交互特指人與手持設(shè)備終端軟件的操作對(duì)話與體驗(yàn)過(guò)程。,什么是移動(dòng)終端,手提電腦？,遙控器？,什么是移動(dòng)終端軟件交互,移動(dòng)終端軟件交互包括了硬件與軟件間的響應(yīng),甚至在沒(méi)有可視界面的情況下完成對(duì)軟件特定功能的操作。,一次洗頭的靈感,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,手機(jī)交互與PC終端交互的差異,硬件差異,PC,手機(jī),手機(jī)交互與PC終端交互的差異,操作系統(tǒng)差異,PC,手機(jī),手機(jī)交互與PC終端交互的差異,手機(jī)品牌在中國(guó)市場(chǎng)的格局,結(jié)論： 手機(jī)交互研究需要細(xì)化至品牌和型號(hào)。,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,手機(jī)QQ交互工作”很簡(jiǎn)單”,手機(jī)QQ的交互不斷追求簡(jiǎn)單。這并非煞有介事的傳達(dá)什么高深概念，而是顯示環(huán)境中，我們必須絞盡腦汁去解決操作可預(yù)期簡(jiǎn)化和功能全面的矛盾。,手機(jī)QQ交互工作”很簡(jiǎn)單”,手機(jī)QQ功能不斷向PCQQ功能靠齊的今天，其中一份設(shè)計(jì)與用戶體驗(yàn)中心的調(diào)查報(bào)告：,2008下半年手機(jī)QQ用戶體驗(yàn)考核匯總,評(píng)價(jià)： 網(wǎng)絡(luò)問(wèn)卷中“可學(xué)習(xí)性”維度評(píng)分較高，達(dá)到4.39（總體滿意度為3.71）。這說(shuō)明用戶覺(jué)得手機(jī)QQ功能設(shè)計(jì)簡(jiǎn)單易懂，用戶比較容易上手。 聯(lián)系看“操作合理”維度，操作是否合理與軟件是否易學(xué)有著較強(qiáng)的關(guān)聯(lián)性。操作合理的軟件才會(huì)較易上手。從結(jié)果可見(jiàn)，“操作合理”維度在眾多分維度中為第三高分維度（3.47），與“可學(xué)習(xí)性”維度的結(jié)果有較高的一致性，也間接印證了“可學(xué)習(xí)性”高的可信程度。 另外，從現(xiàn)場(chǎng)用戶測(cè)試的結(jié)果中也發(fā)現(xiàn)，新手用戶在首次使用手機(jī)QQ的過(guò)程基本流暢，沒(méi)有遇到較大問(wèn)題。,手機(jī)QQ交互工作”很簡(jiǎn)單”,為什么本課件叫”拇指工程”？,數(shù)字鍵盤(pán)手機(jī)為典型,手機(jī)QQ交互工作”很簡(jiǎn)單”,案例對(duì)比,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則 手機(jī)QQ交互方法,手機(jī)QQ交互發(fā)展”很慢”,2003,使用快捷鍵讀取新消息和定位、滾屏,手機(jī)QQ交互發(fā)展”很慢”,2005,奠定了四向鍵縱橫的交互風(fēng)格,新消息到達(dá)和狀態(tài)出現(xiàn)在菜單欄,手機(jī)QQ交互發(fā)展”很慢”,2007,九宮格環(huán)繞切換,內(nèi)置瀏覽器,手機(jī)QQ交互發(fā)展”很慢”,2008,采用隱藏Tab方式兼容WAP瀏覽,多窗口聊天實(shí)現(xiàn)，通過(guò)焦點(diǎn)模塊實(shí)現(xiàn)縱橫切換,組合鍵定位,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,我們的目標(biāo)用戶是”文盲”,用戶教育的目標(biāo)不是”掃盲”，用戶教育的目標(biāo)是把用戶變成”文盲”。,印象使用,“盲打”,交互統(tǒng)一性,不看提示,提示有效性,無(wú)誤操作,可預(yù)期性,我們的目標(biāo)用戶是”文盲”,用戶教育還把用戶培養(yǎng)成”圣斗士”。我們不介意第一次會(huì)帶著嘗試的心情，但是我們很介意用戶每次都帶著嘗試的心情，戰(zhàn)戰(zhàn)兢兢。,我們的目標(biāo)用戶是”文盲”,非必要?jiǎng)e強(qiáng)迫用戶閱讀。,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,用戶的意見(jiàn)”不重要”,每天手機(jī)QQ在論壇上的意見(jiàn)多達(dá)數(shù)百條，我們不會(huì)按照用戶所有要求進(jìn)行改造。關(guān)鍵是透過(guò)各種訴求，分析出表面訴求背后的核心需求。,看看用戶想要什么？,08的皮膚太壓抑了,那個(gè)白色背景的真扎眼,我的QQ怎么變成黑色的？,我喜歡粉紅色 Kawayiii,有沒(méi)有綠色的主題？,我覺(jué)得手機(jī)QQ太男性化了,用戶的意見(jiàn)”不重要”,案例分析,用戶訴求：能在手機(jī)QQ里打電話、收發(fā)短信？,用戶的意見(jiàn)”不重要”,更多時(shí)候，用戶是沉默的。所以我們更加要善于觀察和發(fā)現(xiàn)。,總用戶群落,找出核心價(jià)值用戶群,角色一,角色二,角色三,用戶的意見(jiàn)”不重要”,案例分析,目錄,什么是移動(dòng)終端軟件交互 手機(jī)交互與PC終端交互的差異 手機(jī)QQ交互工作很”簡(jiǎn)單” 我們的發(fā)展很”慢” 我們的目標(biāo)用戶是”文盲” 用戶的意見(jiàn)”不重要” 手機(jī)QQ交互原則,手機(jī)QQ交互原則和方法,1. 樂(lè)高肢解與合體原則,當(dāng)交互進(jìn)入項(xiàng)目分解后，必須聯(lián)動(dòng)主體體驗(yàn)設(shè)計(jì)。,手機(jī)QQ交互原則和方法,1. 樂(lè)高肢解與合體原則,流程分析,手機(jī)QQ交互原則和方法,1. 樂(lè)高肢解與合體原則,手機(jī)QQ交互原則和方法,2. 交互無(wú)對(duì)錯(cuò)，唯效率優(yōu)先,每項(xiàng)操作都會(huì)有各種顧慮和情況。先確立任務(wù)目的、用戶場(chǎng)景。以效率優(yōu)先。,不可逆轉(zhuǎn)操作除外,手機(jī)QQ交互原則和方法,2. 交互無(wú)對(duì)錯(cuò)，唯效率優(yōu)先,每項(xiàng)操作都會(huì)有各種顧慮和情況。先確立任務(wù)目的、用戶場(chǎng)景。以效率優(yōu)先。,不可逆轉(zhuǎn)操作除外,手機(jī)QQ交互原則和方法,2. 交互無(wú)對(duì)錯(cuò)，唯效率優(yōu)先,每項(xiàng)操作都會(huì)有各種顧慮和情況。先確立任務(wù)目的、用戶場(chǎng)景。以效率優(yōu)先。,不可逆轉(zhuǎn)操作除外,手機(jī)QQ交互原則和方法,3. 不要為了解決問(wèn)題而去放大問(wèn)題,可預(yù)見(jiàn)性或者可教育性的交互行為，可將操作控件輕量化、硬件化。成本越低越好,假設(shè)顯示器可以一鍵關(guān)機(jī)？,手機(jī)QQ交互原則和方法,4. 菜單應(yīng)當(dāng)包含當(dāng)前功能界面的所有期待操作,由于手機(jī)界面有限，菜單是非界面功能的集合體。同時(shí)也是不可預(yù)期操作以及逆轉(zhuǎn)操作的重要教育渠道。,甚至可以彌補(bǔ)特殊硬件問(wèn)題。,手機(jī)QQ交互原則和方法,5. 靠近操作原則,由于功能鍵的對(duì)應(yīng)性，手機(jī)交互設(shè)計(jì)焦點(diǎn)移動(dòng)應(yīng)該避免跳躍或跨度過(guò)大。,手機(jī)QQ交互原則和方法,5. 靠近操作原則,案例分析,手機(jī)QQ交互原則和方法,1. 快捷鍵的使用,有獎(jiǎng)問(wèn)答,手機(jī)QQ交互原則和方法,2. 快捷鍵的統(tǒng)一,THANK YOU!,目錄,A.開(kāi)發(fā)平臺(tái) JAVA,Symbian,windowsmobile,mtk等 B.手機(jī)顯示屏分辨率 128x128 128x160 176x220 176x208 240x320 480x640 其中，176x208 和 240x320的屏幕最為常見(jiàn) C.圖標(biāo)格式 bmp,gif,png， D.可支持UI樣式 簡(jiǎn)單的線性漸變，純色填充，線面組合等,約等方法論,目錄,約等方法論,約等方法論,目錄,手機(jī)的屏幕顯示效果千差萬(wàn)別。偏黃，偏紫，偏灰是目前主要的手機(jī)屏幕偏色。,手機(jī)的使用場(chǎng)景移動(dòng)多變，并不僅僅局限在室內(nèi)使用， 而手機(jī)軟件的顯示在不同環(huán)境下也會(huì)打上折扣，并不是什么時(shí)候都是理想的。 比如：在戶外強(qiáng)光下，手機(jī)屏幕的內(nèi)容很難識(shí)別，在黑暗的環(huán)境中操作，會(huì)覺(jué)得刺眼和疲勞等等.,手機(jī)與PC的差異,面對(duì)偏色問(wèn)題，設(shè)計(jì)的過(guò)程中，需要增加互補(bǔ)色（即顏色對(duì)比色）來(lái)協(xié)調(diào)平衡顏色表現(xiàn) 如：偏黃-增加紫色或藍(lán)色 偏紫-增加綠色或者黃色 偏灰-提高顏色的亮度和對(duì)比，不要過(guò)于暗淡。 由于手機(jī)種類(lèi)繁多，屏幕表現(xiàn)效果也參差不齊，很難去固定把握設(shè)計(jì)稿在各種手機(jī)中的顏色，并且根據(jù)移動(dòng)設(shè)備的特性，仍然需要采用一些相對(duì)保守的顏色。,相對(duì)電腦用戶而言，手機(jī)屏幕大小使得手機(jī)用戶的視線的集中度更高，任何細(xì)小的變化，也很難逃過(guò)手機(jī)用戶（起碼是手機(jī)QQ用戶）的眼睛。他們對(duì)于一些間距，顏色，圖標(biāo)的變化都會(huì)非常敏感，同時(shí)，手機(jī)用戶在使用軟件時(shí)，也會(huì)考慮到流量消耗的資費(fèi)問(wèn)題，圖片過(guò)多，也會(huì)增加流量,目錄,色彩：深藍(lán)色系的使用,1. 關(guān)于深色 戶外、移動(dòng)中，即使室內(nèi)，使用手機(jī)時(shí)難以避免晃動(dòng)。理論上在光范圍捕捉移動(dòng)黑點(diǎn)比黑范圍捕捉移動(dòng)白點(diǎn)困難。 但在日照下，白色底色文字閱讀比深色底透射強(qiáng)，不過(guò)圖像顯示正好相反。,2. 關(guān)于藍(lán)色 藍(lán)色象征靜，給人穩(wěn)定的感覺(jué)。深邃的藍(lán)色更適合長(zhǎng)時(shí)間使用。 我們可以在歷代Windows操作系統(tǒng)以及Apple機(jī)找到用藍(lán)色的答案。,3. 適應(yīng)操作系統(tǒng) 從近幾年主流手機(jī)操作系統(tǒng)界面幾乎都偏向深色甚至黑色的主基調(diào)。雖然作為軟件無(wú)必要與操作系統(tǒng)一致。但是手機(jī)QQ具有其他軟件不可比擬的特殊性，就是手機(jī)QQ本身就具備平臺(tái)性質(zhì),4. 同行對(duì)比性 目前手機(jī)軟件主要競(jìng)爭(zhēng)對(duì)手當(dāng)中還沒(méi)有采用深藍(lán)色背景最為主基調(diào)的產(chǎn)品。避免審美同質(zhì)化，吸引新用戶。 深色基調(diào)容易出光的效果，能做出較多的特效。,手機(jī)系統(tǒng)的表現(xiàn),手機(jī)QQ2006,手機(jī)QQ2007,手機(jī)QQ2008,樣式：手機(jī)用戶對(duì)于流量的敏感，開(kāi)發(fā)包的大小限制，取決于在設(shè)計(jì)過(guò)程中，盡量減少圖片的使用，限制復(fù)雜質(zhì)感表現(xiàn)，當(dāng)然，隨著開(kāi)發(fā)環(huán)境的不斷提升，08版增加簡(jiǎn)單的漸變質(zhì)感優(yōu)化,追求自然，舒適體驗(yàn)的設(shè)計(jì)趨勢(shì)下，手機(jī)QQ推出了場(chǎng)景皮膚的概念，用戶可根據(jù)環(huán)境的變化進(jìn)行切換選擇到最合適的皮膚，功能化體現(xiàn) 改善場(chǎng)景變化帶來(lái)的差異.,室外皮膚，白底黑字，對(duì)比強(qiáng)烈， 便于在強(qiáng)光下集中視線，易于識(shí)別,室內(nèi)皮膚，深底可以增強(qiáng)內(nèi)容表現(xiàn)， 弱化對(duì)于視覺(jué)的刺激,夜間皮膚，降低文字明亮度，加深 底色，在黑暗的環(huán)境中，避免刺激 視覺(jué)和疲勞感.,目錄,目錄,用戶關(guān)懷是一個(gè)提升產(chǎn)品親和度的重要手段，手機(jī)QQ從08年開(kāi)始也打造手機(jī)啟動(dòng)閃屏 除了