QQ手機版4.6 for iPhone上線 細品會話體驗

期待已久的QQ手機版 for iPhone 4.6版本正式發佈了，該版本結合ios7的使用習慣而設計，下面帶來新特性的全面解讀。

	應用名稱：	QQ iPhone版官方下載v7.9.0 官方蘋果版
	下載地址：

一．前言

1.遵循iOS7視覺標準

我們相信，積極擁抱蘋果自身範式轉變，可讓用戶最自然的走進我們營造的新環境。QQ手機版4.6希望帶給用戶的使用感受是：一切改變都是合理自然的。過重的漸變、質感等擬物視覺效果在ios7裏面顯得過時，而QQ手機版希望打造的是一款與時俱進的應用。在4.6版的實際中，我們追隨iOS7的扁平化設計體驗，一步步做好合理的簡潔化，希望能使用戶產生正確的理解並快速完成目標、能真正幫用戶解決問題。

2.簡約化與界面主色調的選取

用戶對QQ的品牌主體認知一直是企鵝，對QQ品牌顏色的認知不算很強烈。品牌上我們更注重塑造企鵝的簡約化，每個版本的更新，大家可以客觀地感受到企鵝是在精化的。

當然，我們沒有必要反反覆覆地向用戶灌輸品牌信息，因爲QQ手機版使用流程中，點點滴滴滲透着獨有的溝通體驗。“羣助手、主題、氣泡、水印相機”等等這些功能，都潛移默化地讓用戶感覺到是在使用QQ手機版。同時在體驗上我們會把專注和高效做得更出色，主色調選取白色，因留白可以使主要內容及功能更加突出，營造出平靜和穩定的感覺。打造我們獨有的、充滿樂趣的體驗，向用戶傳遞“樂在溝通”這個主旨。

4.6消息頁與聊天窗口

二.會話體驗的“扁平化”

UI是輔助用戶對內容進行理解和互動的，不應與內容產生競爭關係

QQ手機版的功能數目是驚人的，若把功能直接呈現給用戶結果較爲可怕。我們希望注重體驗上的“扁平”，打磨簡潔易用的精品，就需要把這些繁重的功能巧妙的放進我們的應用中。扁平化設計過程中，每一個重要入口都需要綜合考慮其需求的本質所在。簡單的一個按鈕的出現，考慮它的交互場景和視覺樣式上的使用體驗很重要。例如類似“+”的圖標，像iOS7一樣只是1像素的寬度的“+”，很容易隱埋在界面裏面。這些就是需要爭琢的點，反覆去思考它的核心價值，纔可做出當前最合理的設計。

下面給大家分享我們的幾個設計點，反映會話體驗如何做到“內容爲主”的核心思想。

1.整體移除了所有對內容產生干擾作用的漸變與陰影效果

iOS7明確地體現了“真正的簡約遠不止是刪繁就簡，而是在紛繁裏建立秩序”的宗旨。我們的聊天界面可承載的可操作內容超過10餘種，例如：文字、語音、圖片、表情、分享（位置、文件、音樂、新聞、書籍）等。爲此，我們對現有的界面層次進行了分析，移除了所有對主要內容產生干擾作用的漸變與陰影效果，例如控件和氣泡的漸變和投影，文字的加粗效果等。之後再對導航結構進行精簡，去除那些會分散用戶注意力的多餘條目和邊框。保持界面元素表達的唯一性和完整性，使聊天界面主要可操作內容的呈現始終是第一位並且是足夠清晰的。

左右爲4.5與4.6版本聊天界面對比

2.信息內容清晰和諧

聊天界面主要內容的氣泡與文字需要清晰的識別度，因爲個性化設置的主題、氣泡、聊天背景這些增添聊天樂趣的裝扮，會與主內容的秩序產生競爭。清晰的對比度是保證操作內容爲主的視覺呈現關鍵。

我們定義聊天窗口中對方爲“發送方”，自己爲“接收方”。發送方白氣泡配黑字，接收方藍氣泡配白字。定義“接收方”顏色更突出，是因爲：

多人聊天的場景中“發送方”內容氣泡較多，白色底的氣泡閱讀體驗更舒適。

使用多人的聊天場景較高，個人發送的信息量相對接收的信息少、難尋找。

多人的聊天場景中，消息都統一視爲發送方和接收方，即“左”與“右”。這時候發“左”邊是繁雜多變的，主要依賴頭像、呢稱、個性化氣泡區分他們的信息。那麼發送方默認的顏色區分，必要性就相對降低。

3.文字清楚易讀：精確的文字的粗細、字間距和行高

聊天內容方面，首要是確保文字排版的清晰易讀。4.6版的文字去掉舊版本的加粗效果，大小保持原來的32px。氣泡與輸入框單行最多輸入字數相同，從而做到輸入框的字數換行效果與顯示在氣泡的一致。UI規範每一個元素都有精確的規範說明，同時對UI實現的還原度要求達到100%。

氣泡文字內容UI規範

4.間距的合理減小

同一時間段的氣泡間距的減小，利於更多信息的顯示。氣泡相對聚集，可幫助用戶更好區分時間段的信息內容。但我們這個間距不能像iOS7的“信息”那麼小，因爲考慮到我們的個性化氣泡周邊裝飾元素需要保留合適的空間，以避免氣泡與氣泡間顯得擁擠。而不同時間段的信息需要較大的間距劃分，所以我們統一不同時間段的間距爲70px，同一時間段的間距爲40px。

5.去除時間戳底色，保留系統提示信息底色50% #999999

氣泡移除了陰影效果，氣泡內容的層次會相對降低。而相對可操作的內容氣泡而言，多數的使用場景下用戶對時間的關注較低，因此我們需要弱化時間的樣式。但是，時間戳的樣式我們依然需要保留，它用在系統的提示內容上。系統的內容提示只有一次，需強化即時性和單一性。同時力求在任何個性化背景下，提示的可識別度不會受影響。原來20%#000000的樣式，較難避免在豐富背景下識別度低的問題。增加黑色透明度雖然可增強對比度，但偏白的背景下略顯髒，所以我們考慮了用灰色增加透明度。綜合場景的對比和考慮，我們判斷50% #999999 的樣式效果在默認背景和個性化背景下都較爲理想。

50% #999999的灰底在個性化背景下的樣式效果

6.圖片縮略圖的尺寸和樣式

尺寸：如何定義縮略圖的尺寸？

非wifi環境下，用戶對流量的耗費和網絡的速度考慮較高。圖片的尺寸控制在200px以內，以達到省流量和網絡加速的目的。同時，我們的手機用戶接收大量長寬不一的PC端截圖。PC端用戶發出的圖片大於200px的比例較高，因此圖片的縮略圖尺寸定義爲最大200px，減少圖片出現的跳動區域。遇上長圖時，我們做等比壓縮以保證任何一張圖片以合適的比例顯示在聊天界面裏面。

我們還需要考慮到一些尺寸大概20px的極小圖片，需要定義最小的可點擊面積。如果遇上圖片邊大小沒達到最小可點擊面積的範圍值，我們對圖片區域做最短邊處理。手指的點擊區域在60px至80px之間較爲合適。因爲考慮到個性化氣泡需要爲兩邊的裝飾元素預留較大的空間，我們選擇最大值80。如果圖片區域最小值定義更大，例如100px。氣泡四邊留空的面積較大，顯示內容較空。

縮略圖最短邊對比

個性化的氣泡周邊都有裝扮元素，顯示圖片的時候需要特殊處理。個性化氣泡的圖片顯示，我們把氣泡的基本色保留，去除裝扮元素，以保證個性化氣泡的圖片包邊效果美觀。

個性化氣泡文字和圖片內容顯示對比

樣式：縮略圖的視覺樣式，我們需要做到的感覺是“輕薄”的。

縮略圖的出現目的是讓用戶知道這是一張未顯示出來的圖片佔位圖，網絡較差的時候出現機率較高。它不能顯示過重，但又要滿足在個性化氣泡中可識別。我們嘗試到樣式爲二分之一的圖形比例，10%的透明度達到輕薄和圖形飽滿的效果。

圖片縮略圖的樣式

三.我們會更出色

在QQ手機版4.6的設計上，我們並不希望簡單模仿蘋果提供的默認風格，而是想打造出更加合理的簡潔設計。如果我們的聊天體驗跟iOS7自帶的“信息”一樣，相信用戶對新版本並不會有驚喜可言。通過這些小處見大的細節，我們力求改善內容的清晰性和保持設計的一致性。希望用戶拿到新版本的第一感覺是“這是好應用的更新”，這一切都是自然合理的演變。一路來，我們都追隨一個原則：樂在溝通。這是我們的一直塑造的品牌精神。