赞助商
立即赞助

堪称人类之光的新版 QQ 截图,是如何设计出来的?

产品经验3年前 (2021)发布 流光
2.3K 0 0

截图,是将显示设备上所展示的内容截取下来,所生成视图像,截图的目的是为存特定状态下的界面内容。早在 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 截图,是如何设计出来的?

欢迎关注「腾讯ISUX」的公众号:

堪称人类之光的新版 QQ 截图,是如何设计出来的?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

最近《创造101》让 pick 一词大火,大家都在讨论自己 pick 了哪位小姐姐,pick 到一定地步的人被称为铁粉,极端失去理智的叫...
QQ空间
猪年到来之际,我们品牌的卡通形象——小飞猪也完成了自己2.0版本的升级。或许有人会疑惑:飞猪的品牌logo 大家早已熟知,为什...
卡通形象
作者将向你展示微云团队一路以来对文件图标设计的思考和沉淀,并着重介绍了当前这套图标的设计由来。 在过去的一年中腾讯...
图标设计
2019 年 6 月,我们的增值团队推出了全新增值业务 QQ 大会员,其定位是基于 QQ 超级会员和豪华黄钻所有特权,同时提供更多增...
QQ会员
@研习设K先生 :无论是学习设计还是学习其他任何事物,我相信每个人都有喜欢走捷径的本性。比如学设计这件事,很多人看过一些...
创意灵感
工作加班,相信是大多设计师老生常谈的一个问题,而造成加班的原因有客观因素或者主观因素。客观的原因我们大多很难抵抗,但...
职场经验
本文梳理和沉淀了腾讯出行的思考以及设计过程,便于项目后续在横向和纵向上复盘思考和凿山开路。建议初入职场的设计师多看看...
产品设计
2017年1月9日微信小程序平台正式发布,在业界引起很大的轰动。我们QQ空间团队,希望在微信小程序平台也能去做一些尝试,能获...
小程序设计