Smartisan OS滾動截屏功能設(shè)計

今天看到了錘子校園招聘的筆試題:

“滾動截屏”的功能設(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)方式,隨便寫寫榕吼,歡迎討論饿序,歡迎斧正。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末羹蚣,一起剝皮案震驚了整個濱河市嗤堰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌度宦,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件告匠,死亡現(xiàn)場離奇詭異戈抄,居然都是意外死亡,警方通過查閱死者的電腦和手機后专,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門划鸽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人戚哎,你說我怎么就攤上這事裸诽。” “怎么了型凳?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵丈冬,是天一觀的道長。 經(jīng)常有香客問我甘畅,道長埂蕊,這世上最難降的妖魔是什么往弓? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮蓄氧,結(jié)果婚禮上函似,老公的妹妹穿的比我還像新娘。我一直安慰自己喉童,他們只是感情好撇寞,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著堂氯,像睡著了一般蔑担。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上祖灰,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天钟沛,我揣著相機與錄音,去河邊找鬼局扶。 笑死恨统,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的三妈。 我是一名探鬼主播畜埋,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼畴蒲!你這毒婦竟也來了悠鞍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤模燥,失蹤者是張志新(化名)和其女友劉穎咖祭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔫骂,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡么翰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了辽旋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浩嫌。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖补胚,靈堂內(nèi)的尸體忽然破棺而出码耐,到底是詐尸還是另有隱情,我是刑警寧澤溶其,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布骚腥,位于F島的核電站,受9級特大地震影響瓶逃,放射性物質(zhì)發(fā)生泄漏桦沉。R本人自食惡果不足惜每瞒,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纯露。 院中可真熱鬧剿骨,春花似錦、人聲如沸埠褪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钞速。三九已至贷掖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間渴语,已是汗流浹背苹威。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留驾凶,地道東北人牙甫。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像调违,于是被迫代替她去往敵國和親窟哺。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫技肩、插件且轨、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • 清待元夕,花燈似火虚婿,風(fēng)拂春約閑愁旋奢。 楊柳垂垂,莫提舊處別離然痊。 芳飛娥影埋香骨黄绩,半飄零、無限經(jīng)行玷过。 又一年、獨望江臺...
    明簌閱讀 308評論 0 0
  • 這個社會上從來不缺騙子,現(xiàn)代社會尤其多真仲。以前他們騙人要面對面的行騙袋马,有了手機有了網(wǎng)絡(luò),他們就可以隔空行騙秸应,也許他就...
    韋哥說道閱讀 243評論 0 0
  • 1.沒錢也可以開始投資 資金并不是投資最重要的虑凛,因為要關(guān)注的是增長率碑宴,所以重要的是能否有投資的智慧,懂不懂得如何去...
    fish__dora閱讀 206評論 2 3