手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

折疊屏設(shè)計規(guī)范

2024-6-21    前端達(dá)人

持續(xù)更新中……

Part 1:折疊屏手機(jī)設(shè)計概述

 

折疊屏手機(jī)形態(tài) ,主要是以下3種:

 

1、展開態(tài):折疊屏設(shè)備完全展開后的形態(tài)。有更大的屏幕尺寸,可充分顯示應(yīng)用內(nèi)容。

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

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

 

 

Part 2:UI設(shè)計規(guī)范

 

一、設(shè)計尺寸

 

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ī)范

字體

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

 

 

 

 

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

 

 

 

三、圓角規(guī)范

 

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

 

 

 

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

 

 

Part 3:UX設(shè)計規(guī)范

一、頁面布局

 

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

 

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

 

 

2、響應(yīng)式動態(tài)布局:隨著設(shè)備屏幕規(guī)格的變化,頁面內(nèi)的信息架構(gòu)會發(fā)生變化。常見的響應(yīng)式動態(tài)布局的變形形式為:挪移布局、重復(fù)布局、瀑布布局等。

 

 

 

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

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

 

分欄布局

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

挪移布局

折疊屏設(shè)備,從折疊到展開,可以通過挪移布局進(jìn)行布局的變化,提升閱讀舒適度和瀏覽效率。

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

范式1:不同頁面的內(nèi)容整合到同一頁的挪移布局。

邊看邊評

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

 

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

范式2:同一頁面的上下結(jié)構(gòu)內(nèi)容,變成左右結(jié)構(gòu)的挪移布局。

雜志排版

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

 

范式3:有層級結(jié)構(gòu)的圖文內(nèi)容,變成左右結(jié)構(gòu)的挪移布局。首頁的圖文內(nèi)容,從層疊變成左右圖文的挪移布局示例,如下圖:

 

 

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

 

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

 

重復(fù)布局

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

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

 

瀑布流&宮格布局

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

 

 

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

 

 

二、交互架構(gòu)

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

 

1、層級關(guān)系
層級關(guān)系有多層級和單一層級兩種。層級關(guān)系的雙窗口,即為通常說的分欄。

 

2、多層級分欄
多層級關(guān)系有完整的多層結(jié)構(gòu),例如復(fù)雜的系統(tǒng)設(shè)置菜單,海量內(nèi)容(例如綜合電商的商品,視頻、圖片或音樂的媒體資源,新聞網(wǎng)站的海量新聞)的門戶及多級分類子頁面。
此類型的交互特點為:


(1)第一級的基礎(chǔ)分類通常以列表形式呈現(xiàn)。


(2)末級列表頁面中的元素為最小內(nèi)容元素,例如單個商品、單個媒體素材、單條新聞等。

 

有多個層級遞進(jìn)關(guān)系的場景示例,如下圖:

 

單一層級分欄

單一層級結(jié)構(gòu)一般以“列表+詳情”形式呈現(xiàn),列表中的每個元素都是末端元素,元素中沒有二級分類列表。例如郵件、信息、備忘錄等內(nèi)容型元素的列表。

此類型的交互特點為:

(1)列表中只存在單獨的元素,沒有子列表,左右兩側(cè)內(nèi)容屬性固定,較少用戶迷失。

(2)點擊左側(cè)中某一個條目,右側(cè)打開對應(yīng)的詳情內(nèi)容。

(3)用戶可以借助在左側(cè)列表中點擊任意一個條目,在右側(cè)快速打開對應(yīng)的詳情內(nèi)容,實現(xiàn)內(nèi)容快速切換。

 

主從關(guān)系

在主從關(guān)系類型中,一側(cè)主導(dǎo)頁面為沉浸式場景;輔助頁面在另一側(cè),呈現(xiàn)評論、互動討論、參考信息等相關(guān)內(nèi)容??筛鶕?jù)沉浸內(nèi)容情況分為左右或上下的組合頁面結(jié)構(gòu)。

此類型的交互邏輯特點:

(1)兩部分之間相互獨立,且有明顯的主從關(guān)系。

(2)輔助側(cè)依賴主導(dǎo)側(cè)存在,如果主導(dǎo)側(cè)關(guān)閉或切換,輔助側(cè)頁面不能單獨存在,需同步關(guān)閉或切換。

(3)主導(dǎo)側(cè)的內(nèi)容呈現(xiàn),沒有受到打擾和中斷,持續(xù)保持最佳的沉浸狀態(tài)。

(4)輔助側(cè)的內(nèi)容用戶可以進(jìn)行滾動瀏覽,適合于信息流數(shù)據(jù),用戶可參與互動。

 

主從關(guān)系的信息架構(gòu)樣式主要有如下幾種,應(yīng)用可根據(jù)具體場景進(jìn)行選擇:

 

懸浮面板

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

 

 

導(dǎo)航應(yīng)用懸浮面板的示例(折疊屏展開后,懸浮面板不拉伸,不遮擋底部主要信息),如下圖

 

 

側(cè)邊欄

從屬信息默認(rèn)以邊欄形式顯示,通過界面比例和視覺效果表現(xiàn)從屬關(guān)系,不影響主要信息的展示,同時能快速瀏覽或操作從屬信息。短視頻應(yīng)用使用側(cè)邊欄的示例,如下圖:

 

并列關(guān)系

在并列關(guān)系中,界面中的兩側(cè)內(nèi)容處于同等重要的地位。兩側(cè)的內(nèi)容可以是同類型的內(nèi)容,也可以是不同類型的內(nèi)容。

例如購物應(yīng)用中,下單前對兩個相似商品的情況進(jìn)行詳細(xì)的對比就是相同類型內(nèi)容的頁面并列;購物應(yīng)用中一側(cè)窗口顯示商品,另外一側(cè)顯示和商家的對話界面,就是不同類型內(nèi)容的頁面并列。

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

 

 

多窗口交互


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

多窗口的應(yīng)用

多任務(wù)并行
通過分屏可實現(xiàn)多任務(wù)并行。有左右分屏和上下分屏兩種方式。針對短視頻、IM對話、購物等內(nèi)容,左右分屏體驗更佳;針對長視頻、游戲、會議等內(nèi)容,上下分屏體驗更佳。通過分屏進(jìn)行任務(wù)并行的示例,如下圖:

 

臨時任務(wù)處理

通過懸浮窗可實現(xiàn)便捷的臨時任務(wù)處理。

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

 

 

跨窗口拖拽

形成分屏或打開懸浮窗后,從某個窗口內(nèi)拖拽內(nèi)容到另一個窗口,即為跨窗口拖拽??绱翱谕献D片的示例,如下圖:

 

 

 

 

 

二、體驗設(shè)計點

 

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

 

1、體驗連續(xù)

 

屏幕可隨時折疊展開,在體驗上要保證用戶體驗的連續(xù)性,應(yīng)用需要遵從屏幕顯示的兼容和應(yīng)用狀態(tài)的連續(xù)。屏幕兼容:由于屏幕尺寸發(fā)生變化,應(yīng)用應(yīng)采用適當(dāng)?shù)氖侄螌ζ聊簧蟽?nèi)容布局進(jìn)行優(yōu)化調(diào)整。

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

 

2、體驗增值

 

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

更多內(nèi)容:大尺寸屏幕可顯示更多內(nèi)容,提高顯示和操作的效率。

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

多任務(wù)并行:多個窗口可同時在大尺寸屏幕內(nèi)展示,為用戶多任務(wù)并行提供了直觀高效的方式。

 

 

三、基礎(chǔ)體驗要求

 

1、基礎(chǔ)要求


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

 

2、保證布局良好


應(yīng)用內(nèi)的元素布局應(yīng)進(jìn)行響應(yīng)式設(shè)計,保證應(yīng)用界面在全屏、懸浮窗、分屏不同窗口模式間進(jìn)行切換時、在設(shè)備橫豎屏旋轉(zhuǎn)時、調(diào)整系統(tǒng)字號、調(diào)整系統(tǒng)顯示模式后,依然保持可用、良好的布局,不出現(xiàn)應(yīng)用元素?zé)o法顯示的問題。

 

3、窗口內(nèi)布局的特殊處理


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

 

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


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

 

5、保證多個任務(wù)同時正常使用


例如用戶正在玩游戲或看視頻,同時在使用其他應(yīng)用。只要游戲或視頻應(yīng)用還在前臺顯示,依然要保證能正常運(yùn)行,不會因為用戶正在使用的是另一個應(yīng)用,而導(dǎo)致游戲暫停或視頻暫停。

 

6、音頻沖突處理


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

 

7、多窗口體驗融合


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

 

 

四、多窗口交互

 

1、方式介紹

 

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

 

1.1 觸發(fā)方式

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

 

 

 

(2)智慧多窗應(yīng)用欄觸發(fā):從屏幕邊緣向內(nèi)滑并懸停,拖出應(yīng)用欄,點擊應(yīng)用圖標(biāo),打開該應(yīng)用的懸浮窗。本交互適用于所有支持智慧多窗的應(yīng)用。

 

 

 

 

 

 

(3)橫幅通知觸發(fā):沉浸式場景來通知,點擊通知,懸浮窗展示。本方式有效解決了查看通知的跨應(yīng)用跳轉(zhuǎn)痛點。

 

 

 



作者:忻蕓
鏈接:https://www.zcool.com.cn/article/ZMTU3MjM5Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

分享本文至:

日歷

鏈接

個人資料

存檔