社交垂直探索 | QQ截圖全新設(shè)計(jì)
本文是關(guān)于QQ截圖全新設(shè)計(jì)的一個(gè)復(fù)盤(pán),一起來(lái)看看~
截圖,是將顯示設(shè)備上所展示的內(nèi)容截取下來(lái),所生成可視圖像,截圖的目的是為了保存特定狀態(tài)下的界面內(nèi)容。早在PC時(shí)代,大家在聊QQ時(shí)就會(huì)用QQ截圖來(lái)分享自己所見(jiàn),截圖成為PCQQ非常經(jīng)典的功能之一。
雖然PC系統(tǒng)本身就自帶截屏功能,但是使用起來(lái)并不方便,只能全屏無(wú)法局部裁剪,編輯和保存路徑也很長(zhǎng)。QQ截圖僅需要鼠標(biāo)輕輕一框,就能快速截取自己想要范圍的截圖,馬上分享給好友。
QQ也持續(xù)針對(duì)截圖體驗(yàn)做了深挖,不斷完善截圖能力:實(shí)時(shí)尺寸、色值標(biāo)記、可重復(fù)編輯、自動(dòng)識(shí)別窗口、可保存、打碼等等。這些如今看起來(lái)像截圖標(biāo)配一樣的能力,都是QQ截圖當(dāng)時(shí)領(lǐng)先的不斷嘗試,一步步鞏固QQ截圖的江湖地位。
隨著智能手機(jī)的普及,網(wǎng)絡(luò)上也涌現(xiàn)出大量手機(jī)截屏內(nèi)容,網(wǎng)友們也會(huì)投稿自己的聊天記錄截圖。QQ也不放下自己探索的腳步,繼續(xù)在截圖場(chǎng)景下,做進(jìn)一步的深挖。
PART1:場(chǎng)景聚焦-手機(jī)QQ的聊天記錄截長(zhǎng)圖
1. QQ分享聊天記錄的現(xiàn)狀
用戶有分享聊天記錄的需求,因?yàn)榱奶焓荙Q生成內(nèi)容的主要地方。為此手機(jī)QQ針對(duì)聊天內(nèi)容的分享和保存場(chǎng)景,就已經(jīng)做了多選轉(zhuǎn)發(fā)和收藏功能。用戶通過(guò)多選所需要的聊天消息,即可將內(nèi)容分享到其它聊天窗口,或者添加到收藏。
作為手機(jī)QQ的內(nèi)置功能,轉(zhuǎn)發(fā)聊天消息最大的優(yōu)勢(shì)是,能保留完整的聊天消息體驗(yàn)。圖片、文件、鏈接等富媒體類型消息,都能保留點(diǎn)擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉(zhuǎn)發(fā)。轉(zhuǎn)發(fā)聊天消息對(duì)性能的要求較小,可以選擇更多數(shù)目的消息,消息呈現(xiàn)效果更正式,適合工作場(chǎng)景。
2. 用戶為什么依然選擇截圖?
既然已經(jīng)有了轉(zhuǎn)發(fā)聊天消息的功能,為什么用戶依然會(huì)選擇截圖呢?
首先手機(jī)的系統(tǒng)截圖操作很快捷,手機(jī)的屏幕比PC小,手機(jī)應(yīng)用都是全屏的,全屏截圖的有效信息占比較高,多余信息較少。其次圖片是一種基礎(chǔ)且通用的文件格式,在不同的終端甚至云端都可以便捷地保存和查看,不依賴也不受限于任一應(yīng)用,可快捷地分享到不同社交平臺(tái),方便傳播。
轉(zhuǎn)發(fā)聊天消息功能僅限在QQ內(nèi)部使用,功能設(shè)計(jì)上主要是為了定向分享,而不是為了傳播。功能在設(shè)計(jì)時(shí),考慮聊天記錄存在多次轉(zhuǎn)發(fā)的場(chǎng)景,為避免有對(duì)話代入感歧義,聊天記錄的主人態(tài)做了去除處理,重點(diǎn)呈現(xiàn)消息本身的內(nèi)容。
而截圖能完整還原聊天記錄的全貌,保留主人態(tài)和客人態(tài),網(wǎng)友們查看對(duì)話時(shí)對(duì)主人態(tài)消息會(huì)有代入感,體驗(yàn)上圖片比轉(zhuǎn)發(fā)聊天消息更娛樂(lè)化。
3. 用戶截長(zhǎng)圖的痛點(diǎn)
此前用戶主要使用手機(jī)系統(tǒng)內(nèi)自帶的截屏功能,來(lái)完成對(duì)QQ聊天記錄的截圖操作,由于對(duì)話可能很長(zhǎng),因此有截長(zhǎng)圖的需求。部分安卓手機(jī)廠商有提供截長(zhǎng)圖的功能,允許用戶通過(guò)滑動(dòng)屏幕,從開(kāi)始滑動(dòng)到結(jié)束的位置,生成一張所需范圍的長(zhǎng)圖。而另一部分沒(méi)有連續(xù)截長(zhǎng)圖能力的手機(jī),就需要用戶進(jìn)行多次截屏,再使用第三方應(yīng)用對(duì)所有截屏進(jìn)行拼接。
由于網(wǎng)絡(luò)環(huán)境傳播是不可控的,用戶對(duì)聊天記錄的截圖有隱私保護(hù)訴求。此時(shí)用戶需要使用系統(tǒng)或者第三方應(yīng)用對(duì)圖片進(jìn)行編輯,通過(guò)裁剪、打碼、涂鴉、貼紙等方式對(duì)圖片進(jìn)行編輯,遮擋隱私信息。
所以用戶要生成一張手機(jī)QQ聊天記錄的長(zhǎng)圖,需要進(jìn)行多個(gè)步驟,或者使用多個(gè)應(yīng)用,我們決心針對(duì)截長(zhǎng)圖的場(chǎng)景做深挖和優(yōu)化,為用戶提供流暢的截長(zhǎng)圖體驗(yàn),讓QQ內(nèi)容的分享,能直接從QQ內(nèi)走向QQ外。
4. 通用的截長(zhǎng)圖設(shè)計(jì)嘗試
雖然手機(jī)QQ的主要截圖場(chǎng)景是在聊天,但我們也思考,截圖是否應(yīng)該作為手機(jī)QQ的一項(xiàng)通用能力。因?yàn)镼Q除了聊天,也承載了很多內(nèi)容或特色玩法,用戶是否也想對(duì)這些內(nèi)容進(jìn)行截圖呢?
滑動(dòng)是較通用的一種截長(zhǎng)圖方式,我們做通用截圖方式嘗試時(shí),針對(duì)現(xiàn)有滑動(dòng)體驗(yàn)做了一些優(yōu)化。由于手機(jī)屏幕較小,所有應(yīng)用都是滿屏的,現(xiàn)有安卓手機(jī)的截長(zhǎng)圖狀態(tài)感知并不明顯。通過(guò)縮小并聚焦突出已框選的內(nèi)容,讓框選區(qū)域以外的內(nèi)容可以預(yù)覽,增強(qiáng)截長(zhǎng)圖的隱喻。
通用截圖方式延續(xù)現(xiàn)有的截長(zhǎng)圖習(xí)慣,用戶能快速地滑動(dòng)到自己長(zhǎng)圖的截止位置。但在最主要的聊天場(chǎng)景,這種方式要求必須連續(xù)截取,用戶無(wú)法節(jié)選自己想要的內(nèi)容,缺乏靈活性。我們決定放棄通用截圖方向,聚焦QQ的聊天場(chǎng)景,尋求更適合聊天記錄的截長(zhǎng)圖方式。
5. 聚焦聊天場(chǎng)景的截長(zhǎng)圖設(shè)計(jì)
(1)靈活的消息選擇方式
點(diǎn)擊勾選是用戶最直觀的操作方式,也是聊天消息多選操作的現(xiàn)有方式。但由于聊天記錄是有上下文連貫的,通常所選也是大段連貫的篇幅為主,如果沿用多選操作的逐條打勾方式,選擇效率會(huì)非常低。因此我們嘗試了正選和反選結(jié)合的選擇方式。
當(dāng)用戶點(diǎn)選時(shí),將用戶所點(diǎn)擊的未選區(qū)域,首尾連貫一起正選,用戶只需點(diǎn)擊兩下,就可以把大段內(nèi)容連貫選擇。對(duì)于已正選的消息,用戶可通過(guò)再次點(diǎn)擊來(lái)取消單條選擇,靈活反選個(gè)別消息。
這種選擇方式在PC上比較常見(jiàn),Shift+點(diǎn)擊首尾文件可批量選擇,Ctrl+點(diǎn)擊單個(gè)文件可逐個(gè)選擇。但在手機(jī)上這種體驗(yàn)并不常見(jiàn),我們通過(guò)新手教育動(dòng)畫(huà)、操作過(guò)程的文案提示用戶,盡量降低用戶的摸索成本。
(2)所見(jiàn)即所得的視覺(jué)呈現(xiàn)
截長(zhǎng)圖和多選操作的的選擇邏輯并不相通,因此截長(zhǎng)圖的選擇體驗(yàn)需要區(qū)別于多選操作的勾選。截長(zhǎng)圖最終生成的是圖片,所以在已選消息的視覺(jué)呈現(xiàn)上,盡量呈現(xiàn)出最終展示的結(jié)果。我們使用高亮/暗下兩種狀態(tài)來(lái)展示已選和未選,高亮部分能完全呈現(xiàn)最終的長(zhǎng)圖結(jié)果,向用戶傳達(dá)預(yù)期效果。
(3)消除選擇困惑的細(xì)節(jié)打磨
當(dāng)畫(huà)面只有亮和暗各占一半時(shí),哪一個(gè)才是選中態(tài)?
這是在打磨過(guò)程中產(chǎn)生的一個(gè)困惑點(diǎn),不同于多選操作體驗(yàn),有勾選控件明確傳達(dá)出選中態(tài)。為了向用戶傳達(dá)所見(jiàn)即所得,高亮部分展示的就是最終結(jié)果,由于和正常聊天窗口樣式一致,相比暗下的狀態(tài)更像是已經(jīng)過(guò)處理。尤其正選和反選出現(xiàn)交錯(cuò)時(shí),用戶更容易產(chǎn)生混淆。
通過(guò)增加一個(gè)邊框,把高亮的區(qū)域包圍起來(lái),加強(qiáng)高亮區(qū)域的已框選感,同時(shí)不影響所展示內(nèi)容,消除兩種狀態(tài)同時(shí)存在時(shí)的感知困惑。
(4)一鍵保護(hù)隱私
保護(hù)隱私是分享聊天記錄截圖的剛需,傳統(tǒng)方式是對(duì)截屏進(jìn)行編輯,使用打碼、涂鴉、貼紙等方式遮蓋隱私信息。當(dāng)截圖的聊天消息越多,編輯的成本也隨之增加。但QQ做了隱藏昵稱,只需要啟用該功能,就能對(duì)標(biāo)題欄、頭像、昵稱信息進(jìn)行打碼處理,做到一鍵保護(hù)隱私。
PART2:場(chǎng)景擴(kuò)充-PCQQ延續(xù)截屏的截長(zhǎng)圖
1. PCQQ截圖的前世今生
有別于手機(jī)端截圖,PCQQ的截圖功能已經(jīng)陪伴了用戶十余載,“Ctrl+Alt+A”的快捷鍵組合早已成為用戶使用桌面截圖的“肌肉記憶”。而且,PCQQ截圖功能的日活用戶數(shù)已達(dá)數(shù)千萬(wàn),可見(jiàn)截圖功能已成為了PCQQ的副業(yè)。
使用截圖功能需要:?jiǎn)酒鸸δ?> 截圖 > 編輯 > 保存/分享 這四個(gè)步驟,業(yè)界的截圖軟件更多是幫助用戶解決截圖的快捷性、和編輯的方便性,但在截圖后卻難以繼續(xù)提供多樣化的服務(wù)。而QQ作為IM工具,天然的把“截圖+分享”做了加法結(jié)合,截完瞬間發(fā)送僅需要幾秒的工夫。
加上QQ成為大多數(shù)用戶的裝機(jī)首選裝備,比起另外再安裝一個(gè)功能龐雜的截圖軟件來(lái)得更方便。所以無(wú)論是截取文字還是圖片二次編輯,QQ截圖都能發(fā)揮神效,讓體驗(yàn)錦上添花。
在PC端,由于截圖的使用場(chǎng)景更頻繁,可操控界面區(qū)域更大,所以截圖工具實(shí)際上都增加了很多編輯的功能,如可繪制標(biāo)記、輸入文字、馬賽克等等。那么十年過(guò)去了,QQ截圖還有哪些可優(yōu)化的空間呢?
2. 解決屏幕外的視界
隨著現(xiàn)在電腦屏幕越來(lái)越大,處理的窗口越來(lái)越多。用戶對(duì)截取的范圍提出了更高的要求,對(duì)于屏幕顯示不全、帶滾動(dòng)條的內(nèi)容,目前QQ截圖均無(wú)法完成截取。所以,如何幫助用戶擴(kuò)大截圖范圍是這次設(shè)計(jì)的重點(diǎn)。
工欲善其事必先利其器,所以在功能上,QQ截圖需要增加截長(zhǎng)圖能力讓用戶在截圖過(guò)程中,對(duì)不同場(chǎng)景都能提供合理的解決方案。在體驗(yàn)上,截圖屬于日常辦公中使用頻率較高的操作,設(shè)計(jì)需要保證功能聚焦、講究效能,以體驗(yàn)及效率為先。
(1)保證結(jié)構(gòu)清晰、功能一致性
截長(zhǎng)圖雖然是一個(gè)全新且又獨(dú)立的功能,如果直接將功能入口平鋪在普通截圖旁反而會(huì)造成用戶的壓力,無(wú)法快速選中截圖按鈕。所以作為截圖范圍的能力拓展,將截長(zhǎng)圖收納于普通截圖下,當(dāng)用戶激活截圖操作后再對(duì)截圖范圍進(jìn)行二次選擇。
(2)及時(shí)的引導(dǎo)可以幫助校驗(yàn)
由于用戶截圖的范圍不局限在QQ內(nèi),一旦無(wú)法識(shí)別出可滾動(dòng)的截圖區(qū)域,我們無(wú)法做到智能矯正。這時(shí)提供及時(shí)的引導(dǎo)能幫助和指導(dǎo)用戶如何糾正截圖范圍,輔助用戶順利進(jìn)行截取,減少失敗帶來(lái)的挫敗感,也避免中斷截圖流程。
(3)最簡(jiǎn)單的操作成本
截長(zhǎng)圖的截取采用滾動(dòng)截取的方式,一方面可以讓用戶一邊截圖一邊校驗(yàn)截圖長(zhǎng)度,另一方面鼠標(biāo)滾動(dòng)比起鼠標(biāo)拖拽操作更輕松簡(jiǎn)單也和用戶日常瀏覽長(zhǎng)圖、網(wǎng)頁(yè)保持一致的交互方式。解決了傳統(tǒng)截圖操作繁瑣、選取內(nèi)容不全等問(wèn)題,大大的提高了截圖的效率,確保流暢、優(yōu)質(zhì)的用戶體驗(yàn)。
(4)強(qiáng)化結(jié)果生成的感知
工具的效率性是要建立在用戶的預(yù)期之上,那么對(duì)用戶來(lái)說(shuō),眼見(jiàn)方為實(shí)。所以每一次的執(zhí)行操作,都應(yīng)該在視覺(jué)上或操作上得到相應(yīng)的反饋,以便讓用戶了解正在所發(fā)生的事情。所以在截圖過(guò)程中,我們?cè)诮貓D區(qū)域旁會(huì)生成一個(gè)預(yù)覽窗口,實(shí)時(shí)顯示滾動(dòng)截圖的內(nèi)容,告知用戶每一次的滾動(dòng)都有效,且讓結(jié)果所見(jiàn)即所得。
3. 未來(lái)的QQ值得期待
面對(duì)不同的用戶需求和不斷擴(kuò)張的使用場(chǎng)景,QQ截圖的體驗(yàn)優(yōu)化遠(yuǎn)遠(yuǎn)不止于此。在后續(xù)的版本中也將推出截圖識(shí)別、截圖翻譯等功能,除了提高截圖的效率,也幫助用戶減短截圖后圖片處理的流程與步驟,回歸場(chǎng)景做更全面的考慮。在下一個(gè)十年,QQ依然想做你截圖工具的首選。
QQ將繼續(xù)傾聽(tīng)用戶的聲音,永不停下體驗(yàn)探索的腳步,還想了解更多QQ設(shè)計(jì)背后的最新故事嗎?
請(qǐng)移步:溝通本源 | QQ8.0有生機(jī)的設(shè)計(jì)
點(diǎn)滴匠心,聲入人心 | QQ8.0語(yǔ)音消息改版設(shè)計(jì)策劃故事
作者:QQ設(shè)計(jì)團(tuán)隊(duì),公眾號(hào):騰訊ISUX(ID:tencent_isux)
https://mp.weixin.qq.com/s/J1c1k6y9HaSPT2TXhW_lyQ
題圖來(lái)自騰訊ISUX官網(wǎng)
QQ因?yàn)闅q數(shù)太大,話題性不強(qiáng),不太能博眼球,其實(shí),QQ的社交產(chǎn)品設(shè)計(jì)能力,吊打所有的社交產(chǎn)品,這個(gè)服,微信是通訊產(chǎn)品。
喜歡喜歡。馬上去體驗(yàn)一波
截圖功能好棒,感受到了設(shè)計(jì)師的用心