一．前言

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自带的“信息”一样，相信用户对新版本并不会有惊喜可言。通过这些小处见大的细节，我们力求改善内容的清晰性和保持设计的一致性。希望用户拿到新版本的第一感觉是“这是好应用的更新”，这一切都是自然合理的演变。一路来，我们都追随一个原则：乐在沟通。这是我们的一直塑造的品牌精神。

（請進官方下載，直接下載到手機下不了）