伴隨著人們對移動端裝置大屏的追求,蘋果的Pad系列產品推出了大屏的Pro,大屏裝置的出現自然也產生了IOS分屏功能。IOS9之後開始支援分屏多工功能,給使用者的日常使用帶來了新的體驗,方便使用者高效的使用iPad來完成工作,或者是暢享娛樂帶來的樂趣。
IOS分屏互動Slide Over:使用者可以通過從螢幕右邊緣向左滑動,撥出Slide Over,Slide Over會展示支援分屏的應用。Split View(分屏檢視):在Slide Over左側位於中間有個小按鈕,點選該按鈕,正式進入分屏,把兩個應用隔開分別顯示,使用者可以對分屏的應用進行單獨操作。在Slide Over狀態下,全屏顯示的應用為主要APP。Slide Over內容上的應用是次要APP。進入分屏檢視狀態下,可調整分屏的比例,左側的應用是主要APP,右側的是次要APP。
Vimeo for Pad
目前已經有許多App支援分屏特性,但視訊類的App比較少,Vimeo客戶端6.0.1在支援IOS分屏中做到了切換過渡自然、無縫銜接,給體驗打下良好基礎。接下來在喚出的Slide Over中,開啟Vimeo進入3:7的分屏檢視。
此時Vimeo還沒有進入分屏檢視狀態,左側的主要App仍然是全屏狀態,只是位於蒙版之後。當前開啟的Vimeo仍位於Slide Over的狀態下,可以通過點選左側的按鈕進入分屏檢視,若向左拖動按鈕至螢幕中央可以進入5:5分屏檢視,向右拖動則關閉分屏功能。
進入分屏檢視後,主要APP的蒙版消失,並由原來的全屏顯示進入3:7的分屏檢視。Vimeo作為次要APP,此時的展示比例是30%,介面佈局上的設計接近於Vimeo手機客戶端的佈局設計。分類上的佈局與互動形式都和手機客戶端一致,支援左右滑動檢視分類內容,滑動時上下兩行一起滾動。視訊內容展示支援分段載入,向下無限載入內容。此時的Vimeo相當於是一個手機的介面,無論是APP的資訊架構、介面佈局,還是互動效果完全與手機端保持一致,使得多屏操作體驗一致,無學習成本,也降低了開發成本。
在3:7的分屏下向左拖曳分屏按鈕到達螢幕中央,進入5:5的分屏檢視。此時主要APP的螢幕佔比與次要APP持平。由於Vimeo從3:7的小屏檢視過度到5:5的半屏檢視,螢幕空間增大,如果繼續使用手機客戶端的介面佈局會造成螢幕空間利用率低,不適合瀏覽。在分類上由兩行變為一行展示,分類卡片的比例大小保持不變,底部的標籤欄等元素大小也保持不變。如此一來可以減少切換之後帶來過多的變化,讓使用者產生困惑,也讓過渡變得自然流暢。視訊內容排布上,由原來的左圖右文變化為上圖下文的結構,等比放大了圖片,使得在5:5的分屏狀態下內容顯得飽滿而又不密集。從3:7小屏檢視切到5:5的半屏檢視說明使用者對次要APP的重視,展示大圖更能引起使用者對內容的關注。
當5:5的分屏檢視再繼續向左拉動時就展開成全屏的顯示狀態,全屏狀態下分類卡片的比例大小保持不變,按照原來5:5的佈局增加個數。視訊內容從原來5:5的一行展示兩個適應為5個,比例上等比縮小,使得第一屏狀態下展示更多的內容。可以看到5:5的分屏狀態過渡到全屏狀態的佈局改變並不大,如此一來視覺觀感會保持一致,若使用者頻繁切換分屏對裝置的資源佔用也不高。
當Vimeo作為主要APP時,在7:3的檢視中,預設以全屏的佈局展示,視訊內容在比例上等比縮小。分屏是一種輔助狀態,並不需要太浮誇的展現,簡單易操作,過渡平滑是貫穿分屏始終的理念。
要在IOS分屏上有優異的表現,APP在執行上對裝置資源的使用應該要合理。因為分屏意味著在螢幕介面上同時執行顯示兩個APP,也有可能其他APP正在播放畫中畫視訊,後臺也還有其他APP正在執行。目前iPad的效能還是有一定侷限性,所以IOS分屏設計不同於正常情況下的應用設計,在設計過程中要有意針對這個問題進行思考,儘量在設計上規避。比如,不要使用過複雜的佈局或互動方式,避免資料過載、消耗裝置效能過大等情況。Vimeo在分屏設計中,標籤欄等元素固定不變,內容上樣式也沒有過多變化,讓Pad端的設計與Phone端保持一致,減少使用者認知,提高閱讀性,也減少對效能的消耗。