今天看到了錘子校園招聘的筆試題:
“滾動截屏”的功能設(shè)計
簡單思考了一下擅笔,準(zhǔn)備寫個需求文檔練練手。
模塊1與大多數(shù)Rom的長截屏方式基本一樣频轿;
模塊2提出區(qū)域檢測功能伟阔,解決部分場景下尔觉,屏幕中僅有一小塊內(nèi)容可活動的截屏;
模塊3個人認(rèn)為是痛點之一曲管,結(jié)合堅果3的翻轉(zhuǎn)功能簇爆,可以提高截圖效率。
用例列表:
先看原型:
模塊一. 滾動截屏
功能場景:
長文视译、聊天記錄等需要截取超過一屏的內(nèi)容時嬉荆,通過觸發(fā)滾動截屏功能,實現(xiàn)截取長圖的需求酷含。
功能內(nèi)容:
一鄙早、觸發(fā)滾動截屏
1.觸發(fā)普通截屏方式同Android現(xiàn)有方式相同:電源鍵+音量減、通知欄下拉設(shè)置圖塊點擊觸發(fā)截屏椅亚,Smartisan OS可將截屏及長截屏整合入One Step的邊欄快捷方式限番;
2.截屏后截取內(nèi)容縮小,點擊下方按鍵可觸發(fā)滾動截屏功能呀舔。
二弥虐、區(qū)域檢測
觸發(fā)滾動截屏后,遍歷當(dāng)前屏幕View媚赖,檢測頂欄霜瘪、底欄及可活動區(qū)域。
可活動區(qū)域定義:
1.可向下繼續(xù)滾動惧磺;
2.區(qū)域面積超過屏幕的1/2颖对。
三、滾動截屏
1.當(dāng)前可活動區(qū)域為一屏磨隘,截取后自動滾至下一屏繼續(xù)截如偷住;
2.如下一屏截取面積小于步驟二所檢測的面積番捂,則裁去下一屏不足的面積个唧。
四、滾動等待
每次進(jìn)入下一屏滾動時長2S白嘁,每次進(jìn)入下一屏后坑鱼,需在當(dāng)前頁面停留0.5S。
此功能目的是:配合主動停止截屏功能,讓用戶能夠看清楚已經(jīng)截取到何處鲁沥,及時停止呼股,最終獲得自己想要的內(nèi)容。
五画恰、主動停止截屏
1.截圖過程中彭谁,屏幕頂部浮窗提示:再次觸摸屏幕以停止截圖(此提示浮窗需過濾,不能被截入最終長截圖)允扇;
2.用戶在截圖過程中點擊屏幕即停止截圖缠局,截圖保留至點擊時可活動區(qū)域最下方內(nèi)容。
六考润、被動停止截屏
可活動區(qū)域已滾動到底部狭园,則停止截屏。
七糊治、頂欄底欄拼接
1.活動區(qū)域截屏拼接完成后唱矛,自動在頂部拼接頂欄(包括APP頂欄、手機狀態(tài)欄井辜,手機狀態(tài)欄時鐘绎谦、圖標(biāo)等取觸發(fā)截圖時的狀態(tài)),在底部拼接底欄(包括APP底欄及虛擬按鍵粥脚,如手機無虛擬按鍵窃肠,則忽略),底欄取滾動截屏完成時的狀態(tài)(這樣可以有效處理部分APP底欄或虛擬按鍵會變小or隱藏的問題刷允,如夸克瀏覽器)冤留;
2.如無頂欄or底欄,則無需拼接恃锉。
八搀菩、圖片預(yù)覽及保存
圖片截取完畢后,需做預(yù)覽及保存破托,此功能不再這里贅述肪跋。
模塊二. 區(qū)域滾動截屏
功能場景:
部分頁面以浮層、彈窗形式呈現(xiàn)(如淘寶的商品規(guī)格彈窗土砂、一些活動頁的活動規(guī)則彈窗)州既,可活動區(qū)域往往小于屏幕面積的1/2,此時截屏拼接萝映,會造成屏幕固定區(qū)域與可活動區(qū)域無法區(qū)分吴叶,最終截得不連續(xù)的長圖。
區(qū)域滾動截屏僅截取屏幕的一部分序臂,將這一部分拼接起來蚌卤,避免其他固定區(qū)域的干擾实束。
功能內(nèi)容:
一、觸發(fā)區(qū)域滾動截屏
1.觸發(fā)普通截屏逊彭;
2.長按滾動截屏按鈕2S觸發(fā)區(qū)域滾動截屏咸灿。
二、區(qū)域檢測及邊緣高亮
1.檢測當(dāng)前頁面浮層侮叮、彈窗避矢;
2.使得浮層、彈窗邊緣高亮囊榜;
3.屏幕頂部浮窗提示:已為您檢測可截屏區(qū)域审胸,再次點擊屏幕開始截屏;
4.用戶再次點擊屏幕即開始截屏卸勺,僅截取浮層砂沛、彈窗區(qū)域。
三曙求、手動框選(受fooView浮動閱覽器啟發(fā))
用戶可手動框選想截圖區(qū)域尺上,確認(rèn)后即可在所選區(qū)域滾動截屏。
(由于用戶并不能很好的判斷當(dāng)前區(qū)域是否為可活動區(qū)域圆到,此功能效果不會很好,這里僅提出想法卑吭,不做詳細(xì)功能設(shè)計)
四芽淡、滾動截屏
同模塊一 第三步-第八步(無第七步)
模塊三. 倒向滾動截屏
功能場景:
模塊一的滾動截屏主要適用于微博長文、微信公眾號等默認(rèn)順序就是從上到下的場景豆赏;
但涉及聊天記錄的長截屏挣菲,用戶往往要先倒序滑動屏幕,停在想要的起點后才觸發(fā)長截屏掷邦;
倒向滾動截屏將屏幕滾動順序倒過來白胀,以提高此類場景的長截屏效率。
功能內(nèi)容:
一抚岗、觸發(fā)倒向截屏
1.觸發(fā)普通截屏或杠;
2.用戶點擊滾動截屏按鈕并上劃觸發(fā)倒向截屏;
3.在截屏狀態(tài)下宣蔚,將手機翻轉(zhuǎn)180度觸發(fā)倒向截屏(同堅果3觸發(fā)自拍方式)向抢,而不是開啟自拍模式。
二胚委、自動翻轉(zhuǎn)屏幕
如通過手機翻轉(zhuǎn)方式觸發(fā)挟鸠,則屏幕也需自動翻轉(zhuǎn)180度,以方便用戶查看截圖進(jìn)度亩冬。
三艘希、滾動截屏
截屏過程同模塊一 第三步-第八步,但截取操作方向相反。
四覆享、【特殊說明】主動停止截屏
1.用戶可再次點擊屏幕停止截屏佳遂,此方式截屏完畢后,屏幕不會自動翻轉(zhuǎn)淹真;
2.用戶可再次翻轉(zhuǎn)手機以停止?jié)L動截屏讶迁,此方式截屏完畢后,屏幕再次自動翻轉(zhuǎn)180度核蘸。
異常分支
一巍糯、狀態(tài)欄通知及toast過濾
滾動截屏過程中,如遇狀態(tài)欄通知或toast等提示出現(xiàn)客扎,需做屏蔽祟峦,有以下兩種處理方式:
1.截屏過程中,通知正常顯示徙鱼,但生成截圖時過濾提示內(nèi)容宅楞;
2.截屏過程中,屏蔽一切通知袱吆,即不允許出現(xiàn)在屏幕上厌衙。
個人認(rèn)為方式1更好
二、按鍵屏蔽
滾動截屏過程中绞绒,不排除用戶會誤觸到三大鍵婶希,如果不做按鍵屏蔽,界面突然跳轉(zhuǎn)至上一頁蓬衡、后臺任務(wù)管理頁喻杈、桌面,這樣會直接影響截屏效果狰晚,所以在滾動截屏過程中筒饰,如用戶點擊三大鍵,toast提示“截圖過程中無法進(jìn)行此操作”壁晒,時長1S瓷们,此toast需在最終截圖被過濾掉。
三讨衣、打斷保存
滾動截屏過程中换棚,如有更高優(yōu)先級的層級進(jìn)入,如電話反镇、鎖屏固蚤、語音助手or閃念膠囊被喚醒,整個截圖會被打斷歹茶,此時視為用戶主動停止截屏夕玩,直接保存截屏至相冊
再說點好玩的
觸發(fā)滾動截屏可做一些有意思的交互:
普通截屏后你弦,單擊滾動截屏按鈕直接開始常規(guī)的滾動截屏,長按或重壓(適用于支持force touch的手機)呼出高級滾動截屏燎孟,可直接選擇區(qū)域滾動截屏禽作、倒序滾動截屏,呈現(xiàn)方式可以做成類似short cut 的形式
滾動截屏按鈕樣式一般設(shè)計為普通手機屏幕揩页,左右兩邊邊框用虛線呈現(xiàn)旷偿,觸發(fā)普通長截屏?xí)r,虛線可做一個向上滾動的動效爆侣,觸發(fā)倒序長截屏?xí)r萍程,虛線可做一個向下滾動的動效
滾動截屏甚至可以不是連續(xù)的,用戶可暫停和繼續(xù)長截屏兔仰,以選擇需要的區(qū)域進(jìn)行拼接茫负,這里面需要設(shè)計的功能及分支也挺復(fù)雜,不做展開乎赴。
這個需求差不多就這樣忍法,沒仔細(xì)考慮可行性和技術(shù)實現(xiàn)方式,隨便寫寫榕吼,歡迎討論饿序,歡迎斧正。