Material design - Layout - Split screen

Split screen - 分割屏幕

Android only - 僅限Android
Split-screen mode allows two activities to be visible on screen at the same time.

【翻譯】
分屏模式允許兩個活動在屏幕上同時可見。

Usage - 用法

User interaction required - 需要用戶交互

Apps are not allowed to invoke split-screen mode by themselves; the user must activate it.

【翻譯】
應用程序不能自行調(diào)用分屏模式;用戶必須激活它。

Launching new activities - 發(fā)起新的活動
When an app launches a new activity, it will launch within thesame portion of the screen by default. Apps will be resized to fit the split-screen view as necessary (unless your app isn’t compatible with the split-screen format).
When split-screen mode is active, apps may launch new activities in the opposite portion of the screen if the following criteria are met:
The original and new activities are related to each other and usable while in split-screen mode
The task the app helps accomplish warrants displaying two activities at once, and hiding the other app that was open
It is clear that the app will enter split-screen mode, such as with a button stating “Open in new window”

【翻譯】
當應用程式啟動新活動時,預設(shè)會在螢幕的同一部分啟動。 應用程序?qū)⒏鶕?jù)需要調(diào)整大小以適合拆分視圖(除非應用程序與分屏格式不兼容)。
當分屏模式處于活動狀態(tài)時,如果滿足以下條件,應用可以在屏幕的相反部分啟動新活動:
原始活動和新活動彼此相關(guān),并且在分屏模式下可用
應用程序幫助完成保證的任務同時顯示兩個活動,并隱藏其他打開的應用程序
很明顯,應用程序?qū)⑦M入分屏模式,例如一個按鈕,說明“在新窗口中打開”


Split screen shown in portrait mode on mobile (on the left) and landscape mode on tablet (on the right)

【翻譯】
分割屏幕在移動設(shè)備上以縱向模式顯示(左側(cè)),平板電腦上顯示橫向模式(右側(cè))

Behavior - 行為

Split-screen mode remains active until the user cancels it or switches to an incompatible app.

【翻譯】
拆分屏幕模式將保持活動狀態(tài),直到用戶取消或切換到不兼容的應用程序。
Resizing split screen - 調(diào)整分割屏幕大小
Users may move and resize each screen in split-screen mode by dragging the divider between the two split screens.
【翻譯】
用戶可以通過拖動兩個分割屏幕之間的分隔線在分屏模式下移動和調(diào)整每個屏幕。

Edge swipe gestures - 邊緣滑動手勢
When split-screen mode is active, the edge swipe gesture will likely not work as intended. Because split-screen mode relies on swiping to resize each split screen, if your app also relies on edge swipes to perform actions, then it’s possible that the swipe will either trigger screen resizing or an action in your app.
To avoid this, edge swipes should not be the only way to perform actions in your app. There should be an alternative method to perform each action.
For example, the navigation drawer enables an edge swipe to open the drawer, but it is also accessible by pressing the menu icon.

【翻譯】
當分屏模式處于活動狀態(tài)時,邊緣滑動手勢可能無法按預期工作。 由于拆分屏幕模式依靠滑動來調(diào)整每個分割屏幕的大小,因此如果您的應用程序還依靠邊緣滑動來執(zhí)行操作,則可能滑動將觸發(fā)屏幕調(diào)整大小或應用程序中的操作。
為了避免這種情況,邊緣滑動不應該是在應用程序中執(zhí)行操作的唯一方式。 應該有一個替代方法來執(zhí)行每個操作。
例如,導航抽屜允許邊緣滑動打開抽屜,但也可以通過按下菜單圖標訪問。

Layout - 布局

To support split-screen usage, viewable content should be scaled to an appropriate size and density.

Primary controls should be adapted for split-screen mode. For example, navigation tabs may be collapsed into a menu.

【翻譯】
為了支持拆分屏幕使用,可觀看內(nèi)容應該縮放到適當?shù)拇笮『兔芏取?br> 主控制應適用于分屏模式。例如,導航標簽可以折疊到菜單中。

Responsive UI - 響應UI
Apps in split-screen mode should elegantly adjust across device sizes and orientations.
Changing a device’s orientation should not cause the UI to change unexpectedly. For example, an app displaying a video in one of the split screens (in portrait mode) should not begin playback in full-screen mode if the device rotates to landscape mode.

【翻譯】
分屏模式中的應用程序應在設(shè)備大小和方向上進行優(yōu)化調(diào)整。
更改設(shè)備的方向不應導致UI意外更改。 例如,如果設(shè)備旋轉(zhuǎn)為橫向模式,則在其中一個分割屏幕(以縱向模式)顯示視頻的應用程序不應該在全屏模式下開始播放。

Apps may use the same or different layouts for mobile and tablet:
Apps with similar layouts for mobile and tablet may switch between the tablet and mobile UIs when the app is resized, as the transition will not be jarring.
Apps with completely different layouts for mobile and tablet should avoid using the mobile UI on tablet in split-screen mode. Instead, the existing tablet UI should be adapted to fit the smaller size to ensure that users have a consistent experience on both devices.

【翻譯】
應用程式可能會在行動裝置和平板電腦上使用相同或不同的版面配置:
當應用調(diào)整大小時,移動設(shè)備和平板電腦布局相似的應用可能會在平板電腦和移動UI之間切換,因為過渡不會令人困擾。
具有完全不同的移動設(shè)備和平板電腦布局的應用應避免在分屏模式下在平板電腦上使用移動UI。 相反,現(xiàn)有的平板電腦界面應進行調(diào)整,以適應較小的尺寸,以確保用戶在兩個設(shè)備上有一致的體驗。


An app may use the same layout across mobile (left) and tablet (right).

【翻譯】
應用程式可能會在行動裝置(左)和平板電腦(右)上使用相同的版面配置。


An app may use different layouts across mobile (left) and tablet (right).

【翻譯】
應用程式可能會在行動裝置(左)和平板電腦(右)上使用不同的版面配置。

Design for condensed sizes - 設(shè)計用于濃縮尺寸

To simplify adapting your app for the various sizes of split-screen mode, it is recommended to design for the smallest size first.

Create a layout that works at 220dp wide or tall by condensing elements or removing non-essential ones. The layout may be scaled upward from there.

【翻譯】
為了簡化您的應用程序適用于各種尺寸的分屏模式,建議先設(shè)計最小尺寸。
通過聚合元素或移除非必要的元素,創(chuàng)建一個工作在220dp寬或高的布局。 布局可以從那里向上縮放。


When the split screen is active, the aspect ratio of an app in portrait orientation is 16:9 on mobile.

【翻譯】
當分割屏幕處于活動狀態(tài)時,縱向方向的應用程序的縱橫比在移動設(shè)備上為16:9。


When the split screen is active, the aspect ratio of an app in portrait orientation is 34.15% on tablet.

【翻譯】
當分割屏幕處于活動狀態(tài)時,平板電腦上縱向方向的應用的縱橫比為34.15%。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容