Smartisan OS滚动截屏功能设计
今天看到了锤子校园招聘的笔试题:
“滚动截屏”的功能设计
简单思考了一下,准备写个需求文档练练手。
模块1与大多数Rom的长截屏方式基本一样;
模块2提出区域检测功能,解决部分场景下,屏幕中仅有一小块内容可活动的截屏;
模块3个人认为是痛点之一,结合坚果3的翻转功能,可以提高截图效率。
用例列表:
先看原型:
模块一. 滚动截屏
功能场景:
长文、聊天记录等需要截取超过一屏的内容时,通过触发滚动截屏功能,实现截取长图的需求。
功能内容:
一、触发滚动截屏
1.触发普通截屏方式同Android现有方式相同:电源键+音量减、通知栏下拉设置图块点击触发截屏,Smartisan OS可将截屏及长截屏整合入One Step的边栏快捷方式;
2.截屏后截取内容缩小,点击下方按键可触发滚动截屏功能。
二、区域检测
触发滚动截屏后,遍历当前屏幕View,检测顶栏、底栏及可活动区域。
可活动区域定义:
1.可向下继续滚动;
2.区域面积超过屏幕的1/2。
三、滚动截屏
1.当前可活动区域为一屏,截取后自动滚至下一屏继续截取;
2.如下一屏截取面积小于步骤二所检测的面积,则裁去下一屏不足的面积。
四、滚动等待
每次进入下一屏滚动时长2S,每次进入下一屏后,需在当前页面停留0.5S。
此功能目的是:配合主动停止截屏功能,让用户能够看清楚已经截取到何处,及时停止,最终获得自己想要的内容。
五、主动停止截屏
1.截图过程中,屏幕顶部浮窗提示:再次触摸屏幕以停止截图(此提示浮窗需过滤,不能被截入最终长截图);
2.用户在截图过程中点击屏幕即停止截图,截图保留至点击时可活动区域最下方内容。
六、被动停止截屏
可活动区域已滚动到底部,则停止截屏。
七、顶栏底栏拼接
1.活动区域截屏拼接完成后,自动在顶部拼接顶栏(包括APP顶栏、手机状态栏,手机状态栏时钟、图标等取触发截图时的状态),在底部拼接底栏(包括APP底栏及虚拟按键,如手机无虚拟按键,则忽略),底栏取滚动截屏完成时的状态(这样可以有效处理部分APP底栏或虚拟按键会变小or隐藏的问题,如夸克浏览器);
2.如无顶栏or底栏,则无需拼接。
八、图片预览及保存
图片截取完毕后,需做预览及保存,此功能不再这里赘述。
模块二. 区域滚动截屏
功能场景:
部分页面以浮层、弹窗形式呈现(如淘宝的商品规格弹窗、一些活动页的活动规则弹窗),可活动区域往往小于屏幕面积的1/2,此时截屏拼接,会造成屏幕固定区域与可活动区域无法区分,最终截得不连续的长图。
区域滚动截屏仅截取屏幕的一部分,将这一部分拼接起来,避免其他固定区域的干扰。
功能内容:
一、触发区域滚动截屏
1.触发普通截屏;
2.长按滚动截屏按钮2S触发区域滚动截屏。
二、区域检测及边缘高亮
1.检测当前页面浮层、弹窗;
2.使得浮层、弹窗边缘高亮;
3.屏幕顶部浮窗提示:已为您检测可截屏区域,再次点击屏幕开始截屏;
4.用户再次点击屏幕即开始截屏,仅截取浮层、弹窗区域。
三、手动框选(受fooView浮动阅览器启发)
用户可手动框选想截图区域,确认后即可在所选区域滚动截屏。
(由于用户并不能很好的判断当前区域是否为可活动区域,此功能效果不会很好,这里仅提出想法,不做详细功能设计)
四、滚动截屏
同模块一 第三步-第八步(无第七步)
模块三. 倒向滚动截屏
功能场景:
模块一的滚动截屏主要适用于微博长文、微信公众号等默认顺序就是从上到下的场景;
但涉及聊天记录的长截屏,用户往往要先倒序滑动屏幕,停在想要的起点后才触发长截屏;
倒向滚动截屏将屏幕滚动顺序倒过来,以提高此类场景的长截屏效率。
功能内容:
一、触发倒向截屏
1.触发普通截屏;
2.用户点击滚动截屏按钮并上划触发倒向截屏;
3.在截屏状态下,将手机翻转180度触发倒向截屏(同坚果3触发自拍方式),而不是开启自拍模式。
二、自动翻转屏幕
如通过手机翻转方式触发,则屏幕也需自动翻转180度,以方便用户查看截图进度。
三、滚动截屏
截屏过程同模块一 第三步-第八步,但截取操作方向相反。
四、【特殊说明】主动停止截屏
1.用户可再次点击屏幕停止截屏,此方式截屏完毕后,屏幕不会自动翻转;
2.用户可再次翻转手机以停止滚动截屏,此方式截屏完毕后,屏幕再次自动翻转180度。
异常分支
一、状态栏通知及toast过滤
滚动截屏过程中,如遇状态栏通知或toast等提示出现,需做屏蔽,有以下两种处理方式:
1.截屏过程中,通知正常显示,但生成截图时过滤提示内容;
2.截屏过程中,屏蔽一切通知,即不允许出现在屏幕上。
个人认为方式1更好
二、按键屏蔽
滚动截屏过程中,不排除用户会误触到三大键,如果不做按键屏蔽,界面突然跳转至上一页、后台任务管理页、桌面,这样会直接影响截屏效果,所以在滚动截屏过程中,如用户点击三大键,toast提示“截图过程中无法进行此操作”,时长1S,此toast需在最终截图被过滤掉。
三、打断保存
滚动截屏过程中,如有更高优先级的层级进入,如电话、锁屏、语音助手or闪念胶囊被唤醒,整个截图会被打断,此时视为用户主动停止截屏,直接保存截屏至相册
再说点好玩的
触发滚动截屏可做一些有意思的交互:
普通截屏后,单击滚动截屏按钮直接开始常规的滚动截屏,长按或重压(适用于支持force touch的手机)呼出高级滚动截屏,可直接选择区域滚动截屏、倒序滚动截屏,呈现方式可以做成类似short cut 的形式
滚动截屏按钮样式一般设计为普通手机屏幕,左右两边边框用虚线呈现,触发普通长截屏时,虚线可做一个向上滚动的动效,触发倒序长截屏时,虚线可做一个向下滚动的动效
滚动截屏甚至可以不是连续的,用户可暂停和继续长截屏,以选择需要的区域进行拼接,这里面需要设计的功能及分支也挺复杂,不做展开。
这个需求差不多就这样,没仔细考虑可行性和技术实现方式,随便写写,欢迎讨论,欢迎斧正。