寫文章的背景是，當時我在小米商城的團隊中除負責小米商城App的產(chǎn)品功能和用戶體驗設計之外，還負責新特性相關的適配和創(chuàng)新需求，也許是因為我特別喜歡研究新出來的東西吧。2017年初，開始有出了分屏功能，進行調(diào)研之后，我們果斷做了分屏適配。之后也順滑適應了的系統(tǒng)分屏。雖然已經(jīng)時過境遷，但是發(fā)出來也可以回顧自己萌新時期的產(chǎn)品思路，望各位斧正。一、關于分屏需求1.分屏并不是個偽需求，而會是一個大眾需求。分屏最主流的使用場景是：一邊看視頻（包括直播和長視頻、短視頻、甚至視頻聊天），一邊做其它事情。用手機看視頻，已經(jīng)成為用戶的主流場景，各大視頻應用爆發(fā)的日活人數(shù)、使用次數(shù)、使用時長都可以佐證這個觀點。但使用手機看視頻有很多痛點，尤其直播的特點是厭惡中斷，但手機看視頻總會遇到被IM消息打斷、切換至后臺視頻暫停等情況。這些痛點都可以通過分屏較好地解決，這也是分屏能成為大眾需求的潛力。雖然當前（2017年的時候）分屏功能在手機上算不上剛需，但隨著手機能處理的任務越來越多，人們越來越離不開手機。工作、社交、娛樂全都在手機上完成，分屏功能可以讓用戶不用頻繁地來回切換應用，還是非常方便的。2.分屏所需要的硬件前提已經(jīng)成立。內(nèi)存：當前新款手機的運存內(nèi)存已經(jīng)持續(xù)走高，足夠應對多個應用同時在前臺開放的壓力。屏幕：目前的手機越做越大，但寬和高的變長比例是不同的?？傮w而言，新款的手機屏幕高了許多，但是寬度只是不變或者稍微增加（比如的屏幕375×812個點,對比的375個點，寬度保持不變，高度增加812-667=145個點）。在這種情況下，如果用來分屏，那么橫屏均分兩個App的話，每個App的寬度尺寸基本不變，只是兩個App都變短了。由于人眼本來畫幅就是橫向?qū)掗?、縱向狹窄的，那么用戶在橫屏同時觀看兩個App的時候，體驗也會好得多。哪怕是縱向排列兩個App，由于屏幕變大了，也不顯局促。電量：需要分屏的用戶，大部分都是亮屏狀態(tài)，這會使得用電功率提高。但是現(xiàn)在的快充已經(jīng)普及，能解決用電速度快的問題，移動硬盤的滲透率目前也極高，更別說還有滿大街的共享充電寶。3.良好的分屏體驗所需要的App體驗。分屏雖然在電腦上已經(jīng)成熟，但是在手機上仍是一個新東西。需要大部分App都適配新尺寸/彈性尺寸，才能夠在不影響App的基本功能和體驗的基礎上，滿足用戶的分屏需求。如果連可用性都存在問題，那么分屏模式也會被用戶拋棄。更何況，分屏操作，以此至少一對App，總要有App配合你才行。因此不但需要進一步的優(yōu)化前端產(chǎn)品設計提高分屏模式的可用性，也應該聯(lián)合同矩陣的其他產(chǎn)品一起，盡量將交互設計統(tǒng)一，降低用戶的學習成本。二、定義分屏的基本表現(xiàn)1.默認將窗口一分為二并支持調(diào)整窗口大小。后續(xù)可以支持3拼（2+1）。2.支持橫屏即橫向排布app，也支持縱向排布app。實際方向在未鎖定方向前提下，隨用戶操作自動改變。3.支持半屏鎖定一個應用，另半屏可以操作桌面，桌面大小自適應。4.前臺雙應用情況下，支持同時播放，單獨調(diào)節(jié)聲音。三、分屏的優(yōu)化1.減少不可滑動的頁面/控件保證所有頁面響均能應滑動事件。尤其在、登錄注冊頁、表單、feed流、音樂播放頁、大圖區(qū)域、彈窗等。2.減少常駐控件分屏后，屏幕空間變得非常小了，為了給內(nèi)容讓出更多空間，應盡量減少常駐控件。一種解決辦法是在瀏覽內(nèi)容時，隱藏底部tab、頂部導航／搜索等常駐控件，用戶回滾時再出現(xiàn)。比如知乎、多看等信息流產(chǎn)品可直接進入全屏模式；電商應用可以對不同頁面做優(yōu)化，頻道／主頁／商品列表頁可隱藏頂部／底部，只保留最重要的保留購物車按鈕和搜索按鈕，單品詳情頁則需要展示底部加購按鈕，降低對轉(zhuǎn)化的損害。3.前端開發(fā)中盡可能使用相對位置為兼容多種窗口尺寸，適配分屏時屏幕的高度和寬度變化，對控件的布局使用相對位置。尤其彈窗、等應居中；底彈、push等應吸底或者吸頂。4.為分屏定制新的布局動態(tài)布局指根據(jù)當前的窗口大小，重新調(diào)整頁面的布局。分屏的設計語言介于豎屏to橫屏和HDto普屏的設計語言。對于重點頁面可以做一定優(yōu)化。大圖－縮略圖；卡片內(nèi)縱向布局－橫向布局；縱向?qū)Ш剑瓩M向?qū)Ш?；文字……諸多設計可以循序漸進添加。優(yōu)秀樣例有和。5.多窗口下的生命周期分屏時會同時運行兩個應用，其中用戶最后操作的那個應用會處于狀態(tài)，另一個則會處于狀態(tài)。但視頻、直播等類別的應用需要保證視頻的繼續(xù)播放。建議開發(fā)者在中處理視頻的暫停/播放，而非在中處理視頻的暫停/播放。或者特殊處理分屏時的狀態(tài)，保證應用在失焦點不暫停播放。尤其電商／社交應用中零散出現(xiàn)的的視頻組件，或者攝像功能。6.調(diào)整窗口大小時，屏幕閃爍的問題由于分屏過程中，允許用戶調(diào)整窗口的大小，這就會導致。的默認處理方式是整個，從而出現(xiàn)頁面閃爍的問題。如果想避免閃一下的問題，建議開發(fā)者自己處理的變化。7.盡可能優(yōu)化鍵盤分屏狀態(tài)下，用戶在輸入時更加不友好，因此應盡可能完善鍵盤功能。需要顯著展示：語音輸入入口、收起按鈕、下一項按鈕、提交按鈕等。在輸入過程中，光標應始終展示在鍵盤上緣，當鍵盤收起時，光標位置則居中。