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

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