堪稱人類之光的新版 QQ 截圖,是如何設計出來的? - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

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

2019/07/16 18814評論 18

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

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

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

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

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

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

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

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

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

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

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

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

? 3. 用戶截長圖的痛點

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

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

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

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

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

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

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

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

靈活的消息選擇方式

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

當用戶點選時,將用戶所點擊的未選區域,首尾連貫一起正。 沒Z恍璧慊髁較,就可以把大段內容連貫選擇。對于已正選的消息,用戶可通過再次點擊來取消單條選擇,靈活反選個別消息。

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

所見即所得的視覺呈現

截長圖和多選操作的選擇邏輯並不相通,因此截長圖的選擇體驗需要區別于多選操作的勾選。截長圖最終生成的是圖片,所以在已選消息的視覺呈現上,盡量呈現出最終展示的結果。我們使用高亮/暗下兩種狀態來展示已選和未。  斂糠幟芡耆 氏腫鈧盞某ゼ冀 ,向用戶傳達預期效果。

消除選擇困惑的細節打磨

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

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

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

一鍵保護隱私

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

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

? 1. PC QQ截圖的前世今生

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

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

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

? 2. 解決屏幕外的視界

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

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

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

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

及時的引導可以幫助校驗

由于用戶截圖的範圍不局限在 QQ 內,一旦無法識別出可滾動的截圖區域,我們無法做到智能矯正。這時提供及時的引導能幫助和指導用戶如何糾正截圖範圍,輔助用戶順利進行截。 跎偈C艽吹拇彀芨,也避免中斷截圖流程。

最簡單的操作成本

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

強化結果生成的感知

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

未來的QQ值得期待

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

歡迎關注「騰訊ISUX」的公眾號︰

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/qq-screenshot-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里