喜欢和科技有关的一切产品面面观产品经理

Smartisan OS滚动截屏功能设计

2018-04-15  本文已影响63人  bboyshao

今天看到了锤子校园招聘的笔试题:

“滚动截屏”的功能设计

简单思考了一下,准备写个需求文档练练手。

模块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 的形式

滚动截屏按钮样式一般设计为普通手机屏幕,左右两边边框用虚线呈现,触发普通长截屏时,虚线可做一个向上滚动的动效,触发倒序长截屏时,虚线可做一个向下滚动的动效

滚动截屏甚至可以不是连续的,用户可暂停和继续长截屏,以选择需要的区域进行拼接,这里面需要设计的功能及分支也挺复杂,不做展开。


这个需求差不多就这样,没仔细考虑可行性和技术实现方式,随便写写,欢迎讨论,欢迎斧正。

上一篇下一篇

猜你喜欢

热点阅读