Part 1：折疊屏手機設計概述

 

折疊屏手機形態(tài) ，主要是以下3種：

 

1、展開態(tài)：折疊屏設備完全展開后的形態(tài)。有更大的屏幕尺寸，可充分顯示應用內容。

2、折疊態(tài)：折疊屏設備折疊后的形態(tài)。折疊后屏幕尺寸變小。

3、支架態(tài)：折疊屏設備處于完全展開和折疊的中間狀態(tài)，可平穩(wěn)放置。

 

 

Part 2：UI設計規(guī)范

 

一、設計尺寸

 

1、展開態(tài)： 8英寸 2480x2200px 約8:7.1

2、折疊態(tài)： 正面屏 6.6英寸 2480x1148px 約19.5:9

3、折疊態(tài)： 背面屏 6.38英寸 2480x892px 約25:9

 

 

二、字號規(guī)范

字體

字號大小和粗細決定了信息的層級和主次關系。在設備上我們使用以下字號的合集為不同的控件及排版場景創(chuàng)造了清晰易讀、層次分明的閱讀體驗。

 

 

 

 

展開態(tài)圖標和字體大小不應發(fā)生明顯變化，在保證可讀性的基礎上，建議保持跟折疊態(tài)一樣的大小。若一定要發(fā)生大小變化，則最大不要超過1.2倍。為確保有較好的可讀性，展開態(tài)單屏文本長度不超過40字，推薦36字左右。

 

 

 

三、圓角規(guī)范

 

1、通用原角場景：從系統(tǒng)層面建立參數化圓角，目前支持 5 種通用圓角大小。分別是：4vp、8vp、12vp、 16vp、 24vp。

 

 

 

2、控件圓角場景：不同控件會有不同的圓角大小，因此單獨定義了圓角場景。

 

 

Part 3：UX設計規(guī)范

一、頁面布局

 

折疊屏展開態(tài)下屏幕尺寸變大，有利于更高效的信息展示或更沉浸的內容瀏覽。要充分利用折疊屏的大屏幕優(yōu)勢，需要進行寬屏的頁面布局適配。態(tài)布局：針對設備寬度變化而進行界面版面重排的一種布局方式。動態(tài)布局可以細分為“自適應動態(tài)布局”和“響應式動態(tài)布局”兩類?；跂鸥裣到y(tǒng)考慮動態(tài)布局時，可參考：柵格系統(tǒng)。

 

1、自適應動態(tài)布局：隨著屏幕設備規(guī)格的變化，界面中所呈現的信息量有增加，但信息架構不變。常見的自適應動態(tài)布局的表現形式為：相對拉伸、相對縮放、延伸布局等。

 

 

2、響應式動態(tài)布局：隨著設備屏幕規(guī)格的變化，頁面內的信息架構會發(fā)生變化。常見的響應式動態(tài)布局的變形形式為：挪移布局、重復布局、瀑布布局等。

 

 

 

一、頁面布局布局&交互創(chuàng)新

結合六種動態(tài)布局規(guī)則，三種雙頁面交互架構規(guī)則以及多窗交互規(guī)則，在折疊屏上可以進行多種布局樣式和交互的創(chuàng)新設計，以下為一些參考范式。包括：分欄布局 、挪移布局 、重復布局 、瀑布流&宮格布局 、臨時雙窗

 

分欄布局

分欄是一種層級關系的左右分窗口布局，旨在在寬屏設備上有較好的顯示效果，幫助用戶更高效地處理任務。文件管理、聯系人、設置、備忘錄等應用非常適合在展開態(tài)分欄布局。備忘錄的分欄布局示例，如下圖：

挪移布局

折疊屏設備，從折疊到展開，可以通過挪移布局進行布局的變化，提升閱讀舒適度和瀏覽效率。

以下為4種常見的挪移布局用法。

范式1：不同頁面的內容整合到同一頁的挪移布局。

邊看邊評

閱讀時，在展開態(tài)同時顯示文章詳情和評論列表，滿足一邊閱讀文章一邊看評論的訴求。閱讀新聞時新聞詳情頁和評論頁合一的示例，如下圖：

 

圖片較多的閱讀場景，同樣適用于“邊看邊評”體驗。本場景下建議默認保持大圖顯示，點擊“評論”按鈕后，再觸發(fā)頁面布局的變化，同時顯示圖片和評論。用戶主動觸發(fā)“邊看邊評”后，下一次訪問該頁面，需要保持上一次的布局效果。查看圖片時邊看邊評的示例，如下圖：

范式2：同一頁面的上下結構內容，變成左右結構的挪移布局。

雜志排版

本范式常用于閱讀場景的圖片和文本之間的挪移布局。不僅能解決圖片過大的問題，還能通過雜志化布局帶來更好的視覺效果。同一頁面的新聞，從上下圖文變成左右圖文的挪移布局示例，如下圖：

 

范式3：有層級結構的圖文內容，變成左右結構的挪移布局。首頁的圖文內容，從層疊變成左右圖文的挪移布局示例，如下圖：

 

 

范式4：通過挪移布局，在展開態(tài)上減少次要信息對核心信息的干擾。看視頻時，彈幕和操作按鈕挪移布局到周邊空閑區(qū)域的示例，如下圖：

 

多人視頻通話時，參會人信息從底部挪移到展開態(tài)的側邊，減少對視頻通話畫面遮擋的示例，如下圖：

 

重復布局

折疊屏設備，從折疊到展開，頁面內的列表、卡片等均可通過重復布局，橫向展示更多信息，提升頁面的瀏覽效率，同時避免信息過疏。列表在展開態(tài)重復布局的示例，如下圖：

從折疊態(tài)到展開態(tài)，使用重復布局時，通常內容按照從左到右的Z字形排布。如下圖：

 

瀑布流&宮格布局

瀑布流布局適用于卡片式結構。折疊態(tài)的單列卡片，到展開態(tài)顯示雙列卡片，不同高度的卡片形成錯落有致的瀑布流布局?？梢杂行嵘撁娴臑g覽效率和可視化效果。新聞首頁卡片瀑布流布局示例，如下圖：

 

 

瀑布流布局和卡片的重復布局比較相似，內容也按照從左到右的Z字形排布，卡片的高度可以不同。視頻卡片從折疊到展開態(tài)的瀑布流布局示例，如下圖：

 

 

二、交互架構

在大屏幕設備上，雙頁面同時顯示，為用戶創(chuàng)造了新的操作體驗。當應用中的兩個頁面間有關聯關系時，可以考慮采用組合頁面的方式，根據不同的場景訴求，選擇合適的頁面組合關系。組合頁面有三種：層級關系 、主從關系、并列關系。

 

1、層級關系
層級關系有多層級和單一層級兩種。層級關系的雙窗口，即為通常說的分欄。

 

2、多層級分欄
多層級關系有完整的多層結構，例如復雜的系統(tǒng)設置菜單，海量內容（例如綜合電商的商品，視頻、圖片或音樂的媒體資源，新聞網站的海量新聞）的門戶及多級分類子頁面。
此類型的交互特點為：

（1）第一級的基礎分類通常以列表形式呈現。

（2）末級列表頁面中的元素為最小內容元素，例如單個商品、單個媒體素材、單條新聞等。

 

有多個層級遞進關系的場景示例，如下圖：

 

單一層級分欄

單一層級結構一般以“列表+詳情”形式呈現，列表中的每個元素都是末端元素，元素中沒有二級分類列表。例如郵件、信息、備忘錄等內容型元素的列表。

此類型的交互特點為：

（1）列表中只存在單獨的元素，沒有子列表，左右兩側內容屬性固定，較少用戶迷失。

（2）點擊左側中某一個條目，右側打開對應的詳情內容。

（3）用戶可以借助在左側列表中點擊任意一個條目，在右側快速打開對應的詳情內容，實現內容快速切換。

 

主從關系

在主從關系類型中，一側主導頁面為沉浸式場景；輔助頁面在另一側，呈現評論、互動討論、參考信息等相關內容?？筛鶕两热萸闆r分為左右或上下的組合頁面結構。

此類型的交互邏輯特點：

（1）兩部分之間相互獨立，且有明顯的主從關系。

（2）輔助側依賴主導側存在，如果主導側關閉或切換，輔助側頁面不能單獨存在，需同步關閉或切換。

（3）主導側的內容呈現，沒有受到打擾和中斷，持續(xù)保持最佳的沉浸狀態(tài)。

（4）輔助側的內容用戶可以進行滾動瀏覽，適合于信息流數據，用戶可參與互動。

 

主從關系的信息架構樣式主要有如下幾種，應用可根據具體場景進行選擇：

 

懸浮面板

從屬信息默認以懸浮面板的形式顯示，通過特定按鈕或特定手勢交互觸發(fā)，一般用于作為主要信息的篩選項或更多菜單項，不影響主要信息的展示。短視頻應用使用懸浮面板的示例，如下圖：

 

 

導航應用懸浮面板的示例（折疊屏展開后，懸浮面板不拉伸，不遮擋底部主要信息），如下圖

 

 

側邊欄

從屬信息默認以邊欄形式顯示，通過界面比例和視覺效果表現從屬關系，不影響主要信息的展示，同時能快速瀏覽或操作從屬信息。短視頻應用使用側邊欄的示例，如下圖：

 

并列關系

在并列關系中，界面中的兩側內容處于同等重要的地位。兩側的內容可以是同類型的內容，也可以是不同類型的內容。

例如購物應用中，下單前對兩個相似商品的情況進行詳細的對比就是相同類型內容的頁面并列；購物應用中一側窗口顯示商品，另外一側顯示和商家的對話界面，就是不同類型內容的頁面并列。

并列關系方便用戶對兩個商品的信息進行更詳細的比對或進行更高效的交互操作。 在這種組合頁面下，左右兩頁面間無主次和從屬關系，頁面分割比例應為1:1

 

 

多窗口交互

折疊屏展開態(tài)、平板、電腦等大屏幕設備，具有多任務并行和效率型任務處理的先天優(yōu)勢。
系統(tǒng)提供了懸浮窗、分屏、平行視界三種多窗口交互，為用戶在大屏幕設備上的多任務并行、便捷的臨時任務處理提供更佳的使用體驗。多窗口類，如下圖：

多窗口的應用

多任務并行
通過分屏可實現多任務并行。有左右分屏和上下分屏兩種方式。針對短視頻、IM對話、購物等內容，左右分屏體驗更佳；針對長視頻、游戲、會議等內容，上下分屏體驗更佳。通過分屏進行任務并行的示例，如下圖：

 

臨時任務處理

通過懸浮窗可實現便捷的臨時任務處理。

三方應用根據業(yè)務需求，列舉需要調用窗口的場景，對系統(tǒng)提出調用窗口顯示的請求，系統(tǒng)提供將特定頁面窗口化顯示的能力。例如，臨時查看附件、撥打電話、查看地圖、IM對話、登錄等場景，都非常適合使用應用內懸浮窗。應用內懸浮窗查看附件的示例，如下圖：

 

 

跨窗口拖拽

形成分屏或打開懸浮窗后，從某個窗口內拖拽內容到另一個窗口，即為跨窗口拖拽?？绱翱谕献D片的示例，如下圖：

 

 

 

 

 

二、體驗設計點

 

折疊屏相對于普通手機有兩個明顯的特點：可隨時折疊展開、展開后屏幕變大。折疊屏UX設計中需考慮如下體驗訴求：

 

1、體驗連續(xù)

 

屏幕可隨時折疊展開，在體驗上要保證用戶體驗的連續(xù)性，應用需要遵從屏幕顯示的兼容和應用狀態(tài)的連續(xù)。屏幕兼容：由于屏幕尺寸發(fā)生變化，應用應采用適當的手段對屏幕上內容布局進行優(yōu)化調整。

應用連續(xù)：應用在折疊與展開狀態(tài)切換的過程中保持正常運行。

 

2、體驗增值

 

屏幕變大后，用戶體驗在某些方面有增值。

更多內容：大尺寸屏幕可顯示更多內容，提高顯示和操作的效率。

更加沉浸：大尺寸屏幕可顯示更清晰的細節(jié)，適合圖片瀏覽、視頻欣賞、游戲等應用和場景。

多任務并行：多個窗口可同時在大尺寸屏幕內展示，為用戶多任務并行提供了直觀高效的方式。

 

 

三、基礎體驗要求

 

1、基礎要求

（1）保證布局良好
（2）窗口內布局的特殊處理
（3）保證應用任務的連續(xù)性
（5）音頻沖突處理
（6）多窗口體驗融合

 

2、保證布局良好

應用內的元素布局應進行響應式設計，保證應用界面在全屏、懸浮窗、分屏不同窗口模式間進行切換時、在設備橫豎屏旋轉時、調整系統(tǒng)字號、調整系統(tǒng)顯示模式后，依然保持可用、良好的布局，不出現應用元素無法顯示的問題。

 

3、窗口內布局的特殊處理

分屏窗口內，在應用界面頂部會顯示分屏拖拽橫條，且隱藏系統(tǒng)狀態(tài)欄。應用界面中需要增加一個狀態(tài)欄高度，來避免出現分屏拖拽橫條和應用頂部的功能熱區(qū)重疊，導致應用功能無法操作的問題。懸浮窗窗口內，懸浮窗的操作橫條是在應用界面外顯示的，因此應用不需要留出狀態(tài)欄高度，避免在窗口內出現空白區(qū)域。

 

4、保證應用任務的連續(xù)性

當應用以分屏、懸浮窗顯示時，需要保證應用不被特殊情況所打斷進程。例如應用在不同窗口模式間切換時、在設備橫豎屏旋轉時、調整系統(tǒng)字號、調整系統(tǒng)顯示模式后，應用不會發(fā)生重啟、閃退等問題。且切換之前的任務和相關狀態(tài)得以保存和延續(xù)，或者能夠快速恢復，給用戶提供連續(xù)的體驗。

 

5、保證多個任務同時正常使用

例如用戶正在玩游戲或看視頻，同時在使用其他應用。只要游戲或視頻應用還在前臺顯示，依然要保證能正常運行，不會因為用戶正在使用的是另一個應用，而導致游戲暫?；蛞曨l暫停。

 

6、音頻沖突處理

當應用正在播放視頻或播放音樂時，新打開一個窗口應用，并觸發(fā)了新的音頻任務，原應用對音頻的處理要符合用戶預期，例如臨時暫停音視頻的播放或降低音量，以便于用戶聽到新的音頻。

 

7、多窗口體驗融合

可通過長按頂部橫條并拖拽的交互，實現分屏和懸浮窗之間的互換。實現多窗口體驗融合。

 

 

四、多窗口交互

 

1、方式介紹

 

懸浮窗用于在已有的任務基礎上，臨時處理另一個任務，或短時間多任務并行使用的場景。 支持同時使用多個懸浮窗。手機、折疊屏折疊狀態(tài)下，一屏幕內最多展開一個懸浮窗；平板或 折疊屏展開狀態(tài)下，一屏幕內最多展開兩個懸浮窗。其他懸浮窗自動最小化為懸浮球疊加顯 示。懸浮窗適用于玩游戲看視頻等沉浸式場景下臨時回復消息；購物時臨時使用計算器計算等。

 

1.1 觸發(fā)方式

（1）通過一步小窗的手勢操作快速讓應用從全屏到懸浮窗。本交互適用于所有支持智慧多窗的應用。

 

 

 

（2）智慧多窗應用欄觸發(fā)：從屏幕邊緣向內滑并懸停，拖出應用欄，點擊應用圖標，打開該應用的懸浮窗。本交互適用于所有支持智慧多窗的應用。

 

 

 

 

 

 

（3）橫幅通知觸發(fā)：沉浸式場景來通知，點擊通知，懸浮窗展示。本方式有效解決了查看通知的跨應用跳轉痛點。