起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識[QQ手機版4.6] 細品會話體驗
一．前言
1.遵循iOS7視覺標(biāo)準(zhǔn)
我們相信，積極擁抱蘋果自身范式轉(zhuǎn)變，可讓用戶最自然的走進我們營造的新環(huán)境。QQ手機版4.6希望帶給用戶的使用感受是：一切改變都是合理自然的。過重的漸變、質(zhì)感等擬物視覺效果在ios7里面顯得過時，而QQ手機版希望打造的是一款與時俱進的應(yīng)用。在4.6版的實際中，我們追隨iOS7的扁平化設(shè)計體驗，一步步做好合理的簡潔化，希望能使用戶產(chǎn)生正確的理解并快速完成目標(biāo)、能真正幫用戶解決問題。
2.簡約化與界面主色調(diào)的選取
用戶對QQ的品牌主體認知一直是企鵝，對QQ品牌顏色的認知不算很強烈。品牌上我們更注重塑造企鵝的簡約化，每個版本的更新，大家可以客觀地感受到企鵝是在精化的。
當(dāng)然，我們沒有必要反反復(fù)復(fù)地向用戶灌輸品牌信息，因為QQ手機版使用流程中，點點滴滴滲透著獨有的溝通體驗?！叭褐?手、主題、氣泡、水印相機”等等這些功能，都潛移默化地讓用戶感覺到是在使用QQ手機版。同時在體驗上我們會把專注和高效做得更出色，主色調(diào)選取白色，因 留白可以使主要內(nèi)容及功能更加突出，營造出平靜和穩(wěn)定的感覺。打造我們獨有的、充滿樂趣的體驗，向用戶傳遞“樂在溝通”這個主旨。
4.6消息頁與聊天窗口
二.會話體驗的“扁平化”
UI是輔助用戶對內(nèi)容進行理解和互動的，不應(yīng)與內(nèi)容產(chǎn)生競爭關(guān)系
QQ手機版的功能數(shù)目是驚人的，若把功能直接呈現(xiàn)給用戶結(jié)果較為可怕。我們希望注重體驗上的“扁平”，打磨簡潔易用的精 品，就需要把這些繁重的功能巧妙的放進我們的應(yīng)用中。扁平化設(shè)計過程中，每一個重要入口都需要綜合考慮其需求的本質(zhì)所在。簡單的一個按鈕的出現(xiàn)，考慮它的 交互場景和視覺樣式上的使用體驗很重要。例如類似“+”的圖標(biāo)，像iOS7一樣只是1像素的寬度的“+”，很容易隱埋在界面里面。這些就是需要爭琢的點， 反復(fù)去思考它的核心價值，才可做出當(dāng)前最合理的設(shè)計。
下面給大家分享我們的幾個設(shè)計點，反映會話體驗如何做到“內(nèi)容為主”的核心思想。
1.整體移除了所有對內(nèi)容產(chǎn)生干擾作用的漸變與陰影效果
iOS7明確地體現(xiàn)了“真正的簡約遠不止是刪繁就簡，而是在紛繁里建立秩序”的宗旨。我們的聊天界面可承載的可操作內(nèi)容超過10余種，例如：文字、 語音、圖片、表情、分享（位置、文件、音樂、新聞、書籍）等。為此，我們對現(xiàn)有的界面層次進行了分析，移除了所有對主要內(nèi)容產(chǎn)生干擾作用的漸變與陰影效 果，例如控件和氣泡的漸變和投影，文字的加粗效果等。之后再對導(dǎo)航結(jié)構(gòu)進行精簡，去除那些會分散用戶注意力的多余條目和邊框。保持界面元素表達的唯一性和 完整性，使聊天界面主要可操作內(nèi)容的呈現(xiàn)始終是第一位并且是足夠清晰的。
左右為4.5與4.6版本聊天界面對比
2.信息內(nèi)容清晰和諧
聊天界面主要內(nèi)容的氣泡與文字需要清晰的識別度，因為個性化設(shè)置的主題、氣泡、聊天背景這些增添聊天樂趣的裝扮，會與主內(nèi)容的秩序產(chǎn)生競爭。清晰的對比度是保證操作內(nèi)容為主的視覺呈現(xiàn)關(guān)鍵。
我們定義聊天窗口中對方為“發(fā)送方”，自己為“接收方”。發(fā)送方白氣泡配黑字，接收方藍氣泡配白字。定義“接收方”顏色更突出，是因為：
- 多人聊天的場景中“發(fā)送方”內(nèi)容氣泡較多，白色底的氣泡閱讀體驗更舒適。
- 使用多人的聊天場景較高，個人發(fā)送的信息量相對接收的信息少、難尋找。
- 多人的聊天場景中，消息都統(tǒng)一視為發(fā)送方和接收方，即“左”與“右”。這時候發(fā)“左”邊是繁雜多變的，主要依賴頭像、呢稱、個性化氣泡區(qū)分他們的信息。那么發(fā)送方默認的顏色區(qū)分，必要性就相對降低。
3.文字清楚易讀：精確的文字的粗細、字間距和行高
聊天內(nèi)容方面，首要是確保文字排版的清晰易讀。4.6版的文字去掉舊版本的加粗效果，大小保持原來的32px。氣泡與輸 入框單行最多輸入字?jǐn)?shù)相同，從而做到輸入框的字?jǐn)?shù)換行效果與顯示在氣泡的一致。UI規(guī)范每一個元素都有精確的規(guī)范說明，同時對UI實現(xiàn)的還原度要求達到 100%。
氣泡文字內(nèi)容UI規(guī)范
4.間距的合理減小
同一時間段的氣泡間距的減小，利于更多信息的顯示。氣泡相對聚集，可幫助用戶更好區(qū)分時間段的信息內(nèi)容。但我們這個間距 不能像iOS7的“信息”那么小，因為考慮到我們的個性化氣泡周邊裝飾元素需要保留合適的空間，以避免氣泡與氣泡間顯得擁擠。而不同時間段的信息需要較大 的間距劃分，所以我們統(tǒng)一不同時間段的間距為70px，同一時間段的間距為40px。
5.去除時間戳底色，保留系統(tǒng)提示信息底色50% #999999
氣泡移除了陰影效果，氣泡內(nèi)容的層次會相對降低。而相對可操作的內(nèi)容氣泡而言，多數(shù)的使用場景下用戶對時間的關(guān)注較低， 因此我們需要弱化時間的樣式。但是，時間戳的樣式我們依然需要保留，它用在系統(tǒng)的提示內(nèi)容上。系統(tǒng)的內(nèi)容提示只有一次，需強化即時性和單一性。同時力求在 任何個性化背景下，提示的可識別度不會受影響。原來20%#000000的樣式，較難避免在豐富背景下識別度低的問題。增加黑色透明度雖然可增強對比度， 但偏白的背景下略顯臟，所以我們考慮了用灰色增加透明度。綜合場景的對比和考慮，我們判斷50% #999999 的樣式效果在默認背景和個性化背景下都較為理想。
50% #999999的灰底在個性化背景下的樣式效果
6.圖片縮略圖的尺寸和樣式
尺寸：如何定義縮略圖的尺寸？
- 非wifi環(huán)境下，用戶對流量的耗費和網(wǎng)絡(luò)的速度考慮較高。圖片的尺寸控制在200px以內(nèi)，以達到省流量和網(wǎng)絡(luò)加速的目的。同時，我們的手機用 戶接收大量長寬不一的PC端截圖。PC端用戶發(fā)出的圖片大于200px的比例較高，因此圖片的縮略圖尺寸定義為最大200px，減少圖片出現(xiàn)的跳動區(qū)域。 遇上長圖時，我們做等比壓縮以保證任何一張圖片以合適的比例顯示在聊天界面里面。
- 我們還需要考慮到一些尺寸大概20px的極小圖片，需要定義最小的可點擊面積。如果遇上圖片邊大小沒達到最小可點擊面積的范圍值，我們對圖片區(qū)域 做最短邊處理。手指的點擊區(qū)域在60px至80px之間較為合適。因為考慮到個性化氣泡需要為兩邊的裝飾元素預(yù)留較大的空間，我們選擇最大值80。如果圖 片區(qū)域最小值定義更大，例如100px。氣泡四邊留空的面積較大，顯示內(nèi)容較空。
縮略圖最短邊對比
- 個性化的氣泡周邊都有裝扮元素，顯示圖片的時候需要特殊處理。個性化氣泡的圖片顯示，我們把氣泡的基本色保留，去除裝扮元素，以保證個性化氣泡的圖片包邊效果美觀。
個性化氣泡文字和圖片內(nèi)容顯示對比
樣式：縮略圖的視覺樣式，我們需要做到的感覺是“輕薄”的。
縮略圖的出現(xiàn)目的是讓用戶知道這是一張未顯示出來的圖片占位圖，網(wǎng)絡(luò)較差的時候出現(xiàn)幾率較高。它不能顯示過重，但又要滿足在個性化氣泡中可識別。我們嘗試到樣式為二分之一的圖形比例，10%的透明度達到輕薄和圖形飽滿的效果。
圖片縮略圖的樣式
三.我們會更出色
在QQ手機版4.6的設(shè)計上，我們并不希望簡單模仿蘋果提供的默認風(fēng)格，而是想打造出更加合理的簡潔設(shè)計。如果我們的聊 天體驗跟iOS7自帶的“信息”一樣，相信用戶對新版本并不會有驚喜可言。通過這些小處見大的細節(jié)，我們力求改善內(nèi)容的清晰性和保持設(shè)計的一致性。希望用 戶拿到新版本的第一感覺是“這是好應(yīng)用的更新”，這一切都是自然合理的演變。一路來，我們都追隨一個原則：樂在溝通。這是我們的一直塑造的品牌精神。
- 目前還沒評論，等你發(fā)揮！
