截圖，是將顯示設(shè)備上所展示的內(nèi)容截取下來，所生成可視圖像，截圖的目的是為了保存特定狀態(tài)下的界面內(nèi)容。早在PC時代，大家在聊QQ時就會用QQ截圖來分享自己所見，截圖成為PCQQ非常經(jīng)典的功能之一。

雖然PC系統(tǒng)本身就自帶截屏功能，但是使用起來并不方便，只能全屏無法局部裁剪，編輯和保存路徑也很長。QQ截圖僅需要鼠標(biāo)輕輕一框，就能快速截取自己想要范圍的截圖，馬上分享給好友。QQ也持續(xù)針對截圖體驗(yàn)做了深挖，不斷完善截圖能力：實(shí)時尺寸、色值標(biāo)記、可重復(fù)編輯、自動識別窗口、可保存、打碼等等。這些如今看起來像截圖標(biāo)配一樣的能力，都是QQ截圖當(dāng)時領(lǐng)先的不斷嘗試，一步步鞏固QQ截圖的江湖地位。

隨著智能手機(jī)的普及，網(wǎng)絡(luò)上也涌現(xiàn)出大量手機(jī)截屏內(nèi)容，網(wǎng)友們也會投稿自己的聊天記錄截圖。QQ也不放下自己探索的腳步，繼續(xù)在截圖場景下，做進(jìn)一步的深挖。

場景聚焦-手機(jī)QQ的聊天記錄截長圖

QQ分享聊天記錄的現(xiàn)狀

用戶有分享聊天記錄的需求，因?yàn)榱奶焓荙Q生成內(nèi)容的主要地方。為此手機(jī)QQ針對聊天內(nèi)容的分享和保存場景，就已經(jīng)做了多選轉(zhuǎn)發(fā)和收藏功能。用戶通過多選所需要的聊天消息，即可將內(nèi)容分享到其它聊天窗口，或者添加到收藏。

作為手機(jī)QQ的內(nèi)置功能，轉(zhuǎn)發(fā)聊天消息最大的優(yōu)勢是，能保留完整的聊天消息體驗(yàn)。圖片、文件、鏈接等富媒體類型消息，都能保留點(diǎn)擊操作，以查看完整的消息詳情，甚至可以支持嵌套轉(zhuǎn)發(fā)。轉(zhuǎn)發(fā)聊天消息對性能的要求較小，可以選擇更多數(shù)目的消息，消息呈現(xiàn)效果更正式，適合工作場景。

用戶為什么依然選擇截圖？

既然已經(jīng)有了轉(zhuǎn)發(fā)聊天消息的功能，為什么用戶依然會選擇截圖呢？

首先手機(jī)的系統(tǒng)截圖操作很快捷，手機(jī)的屏幕比PC小，手機(jī)應(yīng)用都是全屏的，全屏截圖的有效信息占比較高，多余信息較少。其次圖片是一種基礎(chǔ)且通用的文件格式，在不同的終端甚至云端都可以便捷的保存和查看，不依賴也不受限于任一應(yīng)用，可快捷的分享到不同社交平臺，方便傳播。

轉(zhuǎn)發(fā)聊天消息功能僅限在QQ內(nèi)部使用，功能設(shè)計(jì)上主要是為了定向分享，而不是為了傳播。功能在設(shè)計(jì)時，考慮聊天記錄存在多次轉(zhuǎn)發(fā)的場景，為避免有對話代入感歧義，聊天記錄的主人態(tài)做了去除處理，重點(diǎn)呈現(xiàn)消息本身的內(nèi)容。

而截圖能完整還原聊天記錄的全貌，保留主人態(tài)和客人態(tài)，網(wǎng)友們查看對話時對主人態(tài)消息會有代入感，體驗(yàn)上圖片比轉(zhuǎn)發(fā)聊天消息更娛樂化。

用戶截長圖的痛點(diǎn)

此前用戶主要使用手機(jī)系統(tǒng)內(nèi)自帶的截屏功能，來完成對QQ聊天記錄的截圖操作，由于對話可能很長，因此有截長圖的需求。部分安卓手機(jī)廠商有提供截長圖的功能，允許用戶通過滑動屏幕，從開始滑動到結(jié)束的位置，生成一張所需范圍的長圖。而另一部分沒有連續(xù)截長圖能力的手機(jī)，就需要用戶進(jìn)行多次截屏，再使用第三方應(yīng)用對所有截屏進(jìn)行拼接。

由于網(wǎng)絡(luò)環(huán)境傳播是不可控的，用戶對聊天記錄的截圖有隱私保護(hù)訴求。此時用戶需要使用系統(tǒng)或者第三方應(yīng)用對圖片進(jìn)行編輯，通過裁剪、打碼、涂鴉、貼紙等方式對圖片進(jìn)行編輯，遮擋隱私信息。

所以用戶要生成一張手機(jī)QQ聊天記錄的長圖，需要進(jìn)行多個步驟，或者使用多個應(yīng)用，我們決心針對截長圖的場景做深挖和優(yōu)化，為用戶提供流暢的截長圖體驗(yàn)，讓QQ內(nèi)容的分享，能直接從QQ內(nèi)走向QQ外。

通用的截長圖設(shè)計(jì)嘗試

雖然手機(jī)QQ的主要截圖場景是在聊天，但我們也思考，截圖是否應(yīng)該作為手機(jī)QQ的一項(xiàng)通用能力。因?yàn)镼Q除了聊天，也承載了很多內(nèi)容或特色玩法，用戶是否也想對這些內(nèi)容進(jìn)行截圖呢？

滑動是較通用的一種截長圖方式，我們做通用截圖方式嘗試時，針對現(xiàn)有滑動體驗(yàn)做了一些優(yōu)化。由于手機(jī)屏幕較小，所有應(yīng)用都是滿屏的，現(xiàn)有安卓手機(jī)的截長圖狀態(tài)感知并不明顯。通過縮小并聚焦突出已框選的內(nèi)容，讓框選區(qū)域以外的內(nèi)容可以預(yù)覽，增強(qiáng)截長圖的隱喻。

通用截圖方式延續(xù)現(xiàn)有的截長圖習(xí)慣，用戶能快速的滑動到自己長圖的截止位置。但在最主要的聊天場景，這種方式要求必須連續(xù)截取，用戶無法節(jié)選自己想要的內(nèi)容，缺乏靈活性。我們決定放棄通用截圖方向，聚焦QQ的聊天場景，尋求更適合聊天記錄的截長圖方式。

聚焦聊天場景的截長圖設(shè)計(jì)

靈活的消息選擇方式

點(diǎn)擊勾選是用戶最直觀的操作方式，也是聊天消息多選操作的現(xiàn)有方式。但由于聊天記錄是有上下文連貫的，通常所選也是大段連貫的篇幅為主，如果沿用多選操作的逐條打勾方式，選擇效率會非常低。因此我們嘗試了正選和反選結(jié)合的選擇方式。

當(dāng)用戶點(diǎn)選時，將用戶所點(diǎn)擊的未選區(qū)域，首尾連貫一起正選，用戶只需點(diǎn)擊兩下，就可以把大段內(nèi)容連貫選擇。對于已正選的消息，用戶可通過再次點(diǎn)擊來取消單條選擇，靈活反選個別消息。

這種選擇方式在PC上比較常見，Shift+點(diǎn)擊首尾文件可批量選擇，Ctrl+點(diǎn)擊單個文件可逐個選擇。但在手機(jī)上這種體驗(yàn)并不常見，我們通過新手教育動畫、操作過程的文案提示用戶，盡量降低用戶的摸索成本。

所見即所得的視覺呈現(xiàn)

截長圖和多選操作的的選擇邏輯并不相通，因此截長圖的選擇體驗(yàn)需要區(qū)別于多選操作的勾選。截長圖最終生成的是圖片，所以在已選消息的視覺呈現(xiàn)上，盡量呈現(xiàn)出最終展示的結(jié)果。我們使用高亮/暗下兩種狀態(tài)來展示已選和未選，高亮部分能完全呈現(xiàn)最終的長圖結(jié)果，向用戶傳達(dá)預(yù)期效果。

消除選擇困惑的細(xì)節(jié)打磨

當(dāng)畫面只有亮和暗各占一半時，哪一個才是選中態(tài)？

這是在打磨過程中產(chǎn)生的一個困惑點(diǎn)，不同于多選操作體驗(yàn)，有勾選控件明確傳達(dá)出選中態(tài)。為了向用戶傳達(dá)所見即所得，高亮部分展示的就是最終結(jié)果，由于和正常聊天窗口樣式一致，相比暗下的狀態(tài)更像是已經(jīng)過處理。尤其正選和反選出現(xiàn)交錯時，用戶更容易產(chǎn)生混淆。

通過增加一個邊框，把高亮的區(qū)域包圍起來，加強(qiáng)高亮區(qū)域的已框選感，同時不影響所展示內(nèi)容，消除兩種狀態(tài)同時存在時的感知困惑。

一鍵保護(hù)隱私

保護(hù)隱私是分享聊天記錄截圖的剛需，傳統(tǒng)方式是對截屏進(jìn)行編輯，使用打碼、涂鴉、貼紙等方式遮蓋隱私信息。當(dāng)截圖的聊天消息越多，編輯的成本也隨之增加。但QQ做了隱藏昵稱，只需要啟用該功能，就能對標(biāo)題欄、頭像、昵稱信息進(jìn)行打碼處理，做到一鍵保護(hù)隱私。

場景擴(kuò)充-PCQQ延續(xù)截屏的截長圖

PCQQ截圖的前世今生

有別于手機(jī)端截圖，PCQQ的截圖功能已經(jīng)陪伴了用戶十余載，“Ctrl+Alt+A”的快捷鍵組合早已成為用戶使用桌面截圖的“肌肉記憶”。而且，PCQQ截圖功能的日活用戶數(shù)已達(dá)數(shù)千萬，可見截圖功能已成為了PCQQ的副業(yè)。

使用截圖功能需要：喚起功能 > 截圖 > 編輯 > 保存/分享 這四個步驟，業(yè)界的截圖軟件更多是幫助用戶解決截圖的快捷性、和編輯的方便性，但在截圖后卻難以繼續(xù)提供多樣化的服務(wù)。而QQ作為IM工具，天然的把“截圖+分享”做了加法結(jié)合，截完瞬間發(fā)送僅需要幾秒的工夫。加上QQ成為大多數(shù)用戶的裝機(jī)首選裝備，比起另外再安裝一個功能龐雜的截圖軟件來得更方便。所以無論是截取文字還是圖片二次編輯，QQ截圖都能發(fā)揮神效，讓體驗(yàn)錦上添花。

在PC端，由于截圖的使用場景更頻繁，可操控界面區(qū)域更大，所以截圖工具實(shí)際上都增加了很多編輯的功能，如可繪制標(biāo)記、輸入文字、馬賽克等等。那么十年過去了，QQ截圖還有哪些可優(yōu)化的空間呢？

解決屏幕外的視界

隨著現(xiàn)在電腦屏幕越來越大，處理的窗口越來越多。用戶對截取的范圍提出了更高的要求，對于屏幕顯示不全、帶滾動條的內(nèi)容，目前QQ截圖均無法完成截取。所以，如何幫助用戶擴(kuò)大截圖范圍是這次設(shè)計(jì)的重點(diǎn)。

工欲善其事必先利其器，所以在功能上，QQ截圖需要增加截長圖能力讓用戶在截圖過程中，對不同場景都能提供合理的解決方案。在體驗(yàn)上，截圖屬于日常辦公中使用頻率較高的操作，設(shè)計(jì)需要保證功能聚焦、講究效能，以體驗(yàn)及效率為先。

1.保證結(jié)構(gòu)清晰、功能一致性

截長圖雖然是一個全新且又獨(dú)立的功能，如果直接將功能入口平鋪在普通截圖旁反而會造成用戶的壓力，無法快速選中截圖按鈕。所以作為截圖范圍的能力拓展，將截長圖收納于普通截圖下，當(dāng)用戶激活截圖操作后再對截圖范圍進(jìn)行二次選擇。

2.及時的引導(dǎo)可以幫助校驗(yàn)

由于用戶截圖的范圍不局限在QQ內(nèi)，一旦無法識別出可滾動的截圖區(qū)域，我們無法做到智能矯正。這時提供及時的引導(dǎo)能幫助和指導(dǎo)用戶如何糾正截圖范圍，輔助用戶順利進(jìn)行截取，減少失敗帶來的挫敗感，也避免中斷截圖流程。

3.最簡單的操作成本

截長圖的截取采用滾動截取的方式，一方面可以讓用戶一邊截圖一邊校驗(yàn)截圖長度，另一方面鼠標(biāo)滾動比起鼠標(biāo)拖拽操作更輕松簡單也和用戶日常瀏覽長圖、網(wǎng)頁保持一致的交互方式。解決了傳統(tǒng)截圖操作繁瑣、選取內(nèi)容不全等問題，大大的提高了截圖的效率，確保流暢、優(yōu)質(zhì)的用戶體驗(yàn)。

4.強(qiáng)化結(jié)果生成的感知

工具的效率性是要建立在用戶的預(yù)期之上，那么對用戶來說，眼見方為實(shí)。所以每一次的執(zhí)行操作，都應(yīng)該在視覺上或操作上得到相應(yīng)的反饋，以便讓用戶了解正在所發(fā)生的事情。所以在截圖過程中，我們在截圖區(qū)域旁會生成一個預(yù)覽窗口，實(shí)時顯示滾動截圖的內(nèi)容，告知用戶每一次的滾動都有效，且讓結(jié)果所見即所得。

未來的QQ值得期待

面對不同的用戶需求和不斷擴(kuò)張的使用場景，QQ截圖的體驗(yàn)優(yōu)化遠(yuǎn)遠(yuǎn)不止于此。在后續(xù)的版本中也將推出截圖識別、截圖翻譯等功能，除了提高截圖的效率，也幫助用戶減短截圖后圖片處理的流程與步驟，回歸場景做更全面的考慮。在下一個十年，QQ依然想做你截圖工具的首選。

來源：ISUX

原文鏈接：https://isux.tencent.com/articles/qq-screenshot.html