'堪稱人類之光的新版 QQ 截圖,是如何設計出來的?'

騰訊QQ 智能手機 設計 騰訊 Android 鼠標 頂點設計Plus 2019-08-05
"

來源:「騰訊ISUX」的公眾號

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 解決屏幕外的視界

隨著現在電腦屏幕越來越大,處理的窗口越來越多。用戶對截取的範圍提出了更高的要求,對於屏幕顯示不全、帶滾動條的內容,目前 QQ 截圖均無法完成截取。所以,如何幫助用戶擴大截圖範圍是這次設計的重點。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 解決屏幕外的視界

隨著現在電腦屏幕越來越大,處理的窗口越來越多。用戶對截取的範圍提出了更高的要求,對於屏幕顯示不全、帶滾動條的內容,目前 QQ 截圖均無法完成截取。所以,如何幫助用戶擴大截圖範圍是這次設計的重點。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

保證結構清晰、功能一致性

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

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 解決屏幕外的視界

隨著現在電腦屏幕越來越大,處理的窗口越來越多。用戶對截取的範圍提出了更高的要求,對於屏幕顯示不全、帶滾動條的內容,目前 QQ 截圖均無法完成截取。所以,如何幫助用戶擴大截圖範圍是這次設計的重點。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

保證結構清晰、功能一致性

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

及時的引導可以幫助校驗

由於用戶截圖的範圍不侷限在 QQ 內,一旦無法識別出可滾動的截圖區域,我們無法做到智能矯正。這時提供及時的引導能幫助和指導用戶如何糾正截圖範圍,輔助用戶順利進行截取,減少失敗帶來的挫敗感,也避免中斷截圖流程。

最簡單的操作成本

截長圖的截取採用滾動截取的方式,一方面可以讓用戶一邊截圖一邊校驗截圖長度,另一方面鼠標滾動比起鼠標拖拽操作更輕鬆簡單,也和用戶日常瀏覽長圖、網頁保持一致的交互方式。解決了傳統截圖操作繁瑣、選取內容不全等問題,大大的提高了截圖的效率,確保流暢、優質的用戶體驗。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 解決屏幕外的視界

隨著現在電腦屏幕越來越大,處理的窗口越來越多。用戶對截取的範圍提出了更高的要求,對於屏幕顯示不全、帶滾動條的內容,目前 QQ 截圖均無法完成截取。所以,如何幫助用戶擴大截圖範圍是這次設計的重點。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

保證結構清晰、功能一致性

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

及時的引導可以幫助校驗

由於用戶截圖的範圍不侷限在 QQ 內,一旦無法識別出可滾動的截圖區域,我們無法做到智能矯正。這時提供及時的引導能幫助和指導用戶如何糾正截圖範圍,輔助用戶順利進行截取,減少失敗帶來的挫敗感,也避免中斷截圖流程。

最簡單的操作成本

截長圖的截取採用滾動截取的方式,一方面可以讓用戶一邊截圖一邊校驗截圖長度,另一方面鼠標滾動比起鼠標拖拽操作更輕鬆簡單,也和用戶日常瀏覽長圖、網頁保持一致的交互方式。解決了傳統截圖操作繁瑣、選取內容不全等問題,大大的提高了截圖的效率,確保流暢、優質的用戶體驗。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

強化結果生成的感知

工具的效率性是要建立在用戶的預期之上,那麼對用戶來說,眼見方為實。所以每一次的執行操作,都應該在視覺上或操作上得到相應的反饋,以便讓用戶瞭解正在所發生的事情。所以在截圖過程中,我們在截圖區域旁會生成一個預覽窗口,實時顯示滾動截圖的內容,告知用戶每一次的滾動都有效,且讓結果所見即所得。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 解決屏幕外的視界

隨著現在電腦屏幕越來越大,處理的窗口越來越多。用戶對截取的範圍提出了更高的要求,對於屏幕顯示不全、帶滾動條的內容,目前 QQ 截圖均無法完成截取。所以,如何幫助用戶擴大截圖範圍是這次設計的重點。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

保證結構清晰、功能一致性

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

及時的引導可以幫助校驗

由於用戶截圖的範圍不侷限在 QQ 內,一旦無法識別出可滾動的截圖區域,我們無法做到智能矯正。這時提供及時的引導能幫助和指導用戶如何糾正截圖範圍,輔助用戶順利進行截取,減少失敗帶來的挫敗感,也避免中斷截圖流程。

最簡單的操作成本

截長圖的截取採用滾動截取的方式,一方面可以讓用戶一邊截圖一邊校驗截圖長度,另一方面鼠標滾動比起鼠標拖拽操作更輕鬆簡單,也和用戶日常瀏覽長圖、網頁保持一致的交互方式。解決了傳統截圖操作繁瑣、選取內容不全等問題,大大的提高了截圖的效率,確保流暢、優質的用戶體驗。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

強化結果生成的感知

工具的效率性是要建立在用戶的預期之上,那麼對用戶來說,眼見方為實。所以每一次的執行操作,都應該在視覺上或操作上得到相應的反饋,以便讓用戶瞭解正在所發生的事情。所以在截圖過程中,我們在截圖區域旁會生成一個預覽窗口,實時顯示滾動截圖的內容,告知用戶每一次的滾動都有效,且讓結果所見即所得。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

未來的QQ值得期待

面對不同的用戶需求和不斷擴張的使用場景,QQ 截圖的體驗優化遠遠不止於此。在後續的版本中也將推出截圖識別、截圖翻譯等功能,除了提高截圖的效率,也幫助用戶減短截圖後圖片處理的流程與步驟,迴歸場景做更全面的考慮。在下一個十年,QQ 依然想做你截圖工具的首選。

"

來源:「騰訊ISUX」的公眾號

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

隨著智能手機的普及,網絡上也湧現出大量手機截屏內容,網友們也會投稿自己的聊天記錄截圖。QQ 也不放下自己探索的腳步,繼續在截圖場景下,做進一步的深挖。

場景聚焦 – 手機QQ的聊天記錄截長圖

1. QQ分享聊天記錄的現狀

用戶有分享聊天記錄的需求,因為聊天是 QQ 生成內容的主要地方。為此手機 QQ 針對聊天內容的分享和保存場景,就已經做了多選轉發和收藏功能。用戶通過多選所需要的聊天消息,即可將內容分享到其它聊天窗口,或者添加到收藏。

作為手機 QQ 的內置功能,轉發聊天消息最大的優勢是,能保留完整的聊天消息體驗。圖片、文件、鏈接等富媒體類型消息,都能保留點擊操作,以查看完整的消息詳情,甚至可以支持嵌套轉發。轉發聊天消息對性能的要求較小,可以選擇更多數目的消息,消息呈現效果更正式,適合工作場景。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 用戶為什麼依然選擇截圖?

既然已經有了轉發聊天消息的功能,為什麼用戶依然會選擇截圖呢?

首先手機的系統截圖操作很快捷,手機的屏幕比 PC 小,手機應用都是全屏的,全屏截圖的有效信息佔比較高,多餘信息較少。其次圖片是一種基礎且通用的文件格式,在不同的終端甚至雲端都可以便捷的保存和查看,不依賴也不受限於任一應用,可快捷地分享到不同社交平臺,方便傳播。

轉發聊天消息功能僅限在 QQ 內部使用,功能設計上主要是為了定向分享,而不是為了傳播。功能在設計時,考慮聊天記錄存在多次轉發的場景,為避免有對話代入感歧義,聊天記錄的主人態做了去除處理,重點呈現消息本身的內容。

而截圖能完整還原聊天記錄的全貌,保留主人態和客人態,網友們查看對話時對主人態消息會有代入感,體驗上圖片比轉發聊天消息更娛樂化。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

3. 用戶截長圖的痛點

此前用戶主要使用手機系統內自帶的截屏功能,來完成對 QQ 聊天記錄的截圖操作,由於對話可能很長,因此有截長圖的需求。部分安卓手機廠商有提供截長圖的功能,允許用戶通過滑動屏幕,從開始滑動到結束的位置,生成一張所需範圍的長圖。而另一部分沒有連續截長圖能力的手機,就需要用戶進行多次截屏,再使用第三方應用對所有截屏進行拼接。

由於網絡環境傳播是不可控的,用戶對聊天記錄的截圖有隱私保護訴求。此時用戶需要使用系統或者第三方應用對圖片進行編輯,通過裁剪、打碼、塗鴉、貼紙等方式對圖片進行編輯,遮擋隱私信息。

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

4. 通用的截長圖設計嘗試

雖然手機 QQ 的主要截圖場景是在聊天,但我們也思考,截圖是否應該作為手機 QQ 的一項通用能力。因為 QQ 除了聊天,也承載了很多內容或特色玩法,用戶是否也想對這些內容進行截圖呢?

滑動是較通用的一種截長圖方式,我們做通用截圖方式嘗試時,針對現有滑動體驗做了一些優化。由於手機屏幕較小,所有應用都是滿屏的,現有安卓手機的截長圖狀態感知並不明顯。通過縮小並聚焦突出已框選的內容,讓框選區域以外的內容可以預覽,增強截長圖的隱喻。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

5. 聚焦聊天場景的截長圖設計

靈活的消息選擇方式

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正選,用戶只需點擊兩下,就可以把大段內容連貫選擇。對於已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別於多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,儘量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未選,高亮部分能完全呈現最終的長圖結果,向用戶傳達預期效果。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

消除選擇困惑的細節打磨

當畫面只有亮和暗各佔一半時,哪一個才是選中態?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

通過增加一個邊框,把高亮的區域包圍起來,加強高亮區域的已框選感,同時不影響所展示內容,消除兩種狀態同時存在時的感知困惑。

一鍵保護隱私

保護隱私是分享聊天記錄截圖的剛需,傳統方式是對截屏進行編輯,使用打碼、塗鴉、貼紙等方式遮蓋隱私信息。當截圖的聊天消息越多,編輯的成本也隨之增加。但 QQ 做了隱藏暱稱,只需要啟用該功能,就能對標題欄、頭像、暱稱信息進行打碼處理,做到一鍵保護隱私。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

場景擴充 – PC QQ延續截屏的截長圖

1. PC QQ截圖的前世今生

有別於手機端截圖,PC QQ 的截圖功能已經陪伴了用戶十餘載,「Ctrl+Alt+A」的快捷鍵組合早已成為用戶使用桌面截圖的「肌肉記憶」。而且,PC QQ 截圖功能的日活用戶數已達數千萬,可見截圖功能已成為了 PC QQ 的副業。

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

在 PC 端,由於截圖的使用場景更頻繁,可操控界面區域更大,所以截圖工具實際上都增加了很多編輯的功能,如可繪製標記、輸入文字、馬賽克等等。那麼十年過去了,QQ 截圖還有哪些可優化的空間呢?

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

2. 解決屏幕外的視界

隨著現在電腦屏幕越來越大,處理的窗口越來越多。用戶對截取的範圍提出了更高的要求,對於屏幕顯示不全、帶滾動條的內容,目前 QQ 截圖均無法完成截取。所以,如何幫助用戶擴大截圖範圍是這次設計的重點。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

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

保證結構清晰、功能一致性

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

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

及時的引導可以幫助校驗

由於用戶截圖的範圍不侷限在 QQ 內,一旦無法識別出可滾動的截圖區域,我們無法做到智能矯正。這時提供及時的引導能幫助和指導用戶如何糾正截圖範圍,輔助用戶順利進行截取,減少失敗帶來的挫敗感,也避免中斷截圖流程。

最簡單的操作成本

截長圖的截取採用滾動截取的方式,一方面可以讓用戶一邊截圖一邊校驗截圖長度,另一方面鼠標滾動比起鼠標拖拽操作更輕鬆簡單,也和用戶日常瀏覽長圖、網頁保持一致的交互方式。解決了傳統截圖操作繁瑣、選取內容不全等問題,大大的提高了截圖的效率,確保流暢、優質的用戶體驗。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

強化結果生成的感知

工具的效率性是要建立在用戶的預期之上,那麼對用戶來說,眼見方為實。所以每一次的執行操作,都應該在視覺上或操作上得到相應的反饋,以便讓用戶瞭解正在所發生的事情。所以在截圖過程中,我們在截圖區域旁會生成一個預覽窗口,實時顯示滾動截圖的內容,告知用戶每一次的滾動都有效,且讓結果所見即所得。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

未來的QQ值得期待

面對不同的用戶需求和不斷擴張的使用場景,QQ 截圖的體驗優化遠遠不止於此。在後續的版本中也將推出截圖識別、截圖翻譯等功能,除了提高截圖的效率,也幫助用戶減短截圖後圖片處理的流程與步驟,迴歸場景做更全面的考慮。在下一個十年,QQ 依然想做你截圖工具的首選。

堪稱人類之光的新版 QQ 截圖,是如何設計出來的?

"

相關推薦

推薦中...