據(jù)Adobe公布的統(tǒng)計(jì)數(shù)據(jù)顯示，如果App設(shè)計(jì)或布局沒有吸引力，38%的用戶將直接退出。這類統(tǒng)計(jì)數(shù)字在提醒設(shè)計(jì)師們，用戶體驗(yàn)是頭等大事。
憑借簡潔、干凈、方便的框架，單頁面布局最近在設(shè)計(jì)中非常受歡迎。單頁面布局提供的高度直觀、高效實(shí)用的導(dǎo)航將有助于確保為用戶提供最佳體驗(yàn)，特別是在應(yīng)用在屏幕可自由切換的折疊屏手機(jī)上時。
上篇介紹了《華為專家解讀折疊屏應(yīng)用基礎(chǔ)體驗(yàn)要求UX設(shè)計(jì)規(guī)范》，為開發(fā)者詳細(xì)講解了應(yīng)用基礎(chǔ)體驗(yàn)要求。今天的文章，一同來聊聊應(yīng)用遷移到折疊屏設(shè)備時，單頁面布局設(shè)計(jì)中應(yīng)重點(diǎn)關(guān)注哪幾種擁有持久生命力且表現(xiàn)優(yōu)秀的布局方式？
一、界面信息架構(gòu)及布局設(shè)計(jì)
關(guān)于折疊屏手機(jī)，我們不妨先提出一個問題：當(dāng)智能手機(jī)在手機(jī)和平板兩種形態(tài)之間來回切換時，它的交互會是怎樣的？在折疊態(tài)下，基本系統(tǒng)交互信息架構(gòu)沿襲了普通手機(jī)豎屏的定義。在展開態(tài)下，由于屏幕的特殊形態(tài)，因此產(chǎn)生了如下主要的場景差異：
單頁面（布局重排）：屏幕寬度變寬產(chǎn)生了版面布局優(yōu)化的機(jī)會，可以在適當(dāng)?shù)臈l件下進(jìn)行頁面版式調(diào)整（頁面內(nèi)的元素的位置、大小，同類型數(shù)量等發(fā)生變化）。
組合頁面（信息架構(gòu)重構(gòu)）：將原先兩個或多個頁面的內(nèi)容，合并到一個新頁面中以分欄或其他形式呈現(xiàn)出來，形成跨頁面的交互，從而在適合的場景下構(gòu)建出新的頁面組合樣式和新的用戶體驗(yàn)。
應(yīng)用內(nèi)多任務(wù)：給予用戶可以并行處理多個任務(wù)的能力，由于多任務(wù)之間沒有深度的關(guān)聯(lián)性，因此，在信息架構(gòu)上是相互獨(dú)立的分支，每個任務(wù)在形態(tài)上應(yīng)該給予用戶充分的操作余地，如進(jìn)入到多任務(wù)狀態(tài)的時機(jī)與交互方式、任務(wù)之間的切換，窗口的開啟關(guān)閉和形式切換等，都應(yīng)該保持統(tǒng)一的規(guī)則。同時，由于多個任務(wù)在同屏同時運(yùn)行，跨窗口之間的信息拖拽和傳遞也成為了可能。
相對而言，折疊屏的大屏優(yōu)勢能夠展示更多的內(nèi)容，充裕的空間也為探索更多交互可能提供了條件。
二、單頁面布局設(shè)計(jì)
折疊屏展開態(tài)下屏幕寬度變寬，為用戶提供了高效便捷的使用體驗(yàn)。動態(tài)布局是一種針對設(shè)備寬度變化而進(jìn)行界面版面優(yōu)化重排的有效變化方式，能夠提供良好的體驗(yàn)。
1動態(tài)布局
動態(tài)布局可以細(xì)分為“自適應(yīng)動態(tài)布局”以及“響應(yīng)式動態(tài)布局”兩類。
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ù)效果，瀑布效果等。
下面請看常見的6個動態(tài)布局的變形形式：
相對拉伸
布局特點(diǎn)：相對拉伸的特點(diǎn)是，頁面內(nèi)元素的顯示寬度不是固定值，而是通過相對參照物的方式來確定其開始和結(jié)束的位置，當(dāng)布局的顯示大小發(fā)生變化時，元素的顯示寬度隨之發(fā)生改變。
相對縮放
布局特點(diǎn)：相對縮放的特點(diǎn)是布局內(nèi)元素的顯示大小不是固定值（比例鎖定），而是通過相對參照物的方式來確定其寬或者高的參數(shù)，當(dāng)布局的顯示大小發(fā)生變化時，元素的大小隨之發(fā)生改變。
延伸效果
布局特點(diǎn)：延伸布局的特點(diǎn)是當(dāng)組件內(nèi)元素橫向布局，元素間的距離是固定時，布局可顯示元素的數(shù)量可隨著顯示寬度的改變而發(fā)生變化。
適應(yīng)場景：內(nèi)容呈現(xiàn)型界面，單頁面內(nèi)信息架構(gòu)扁平，內(nèi)容元素為單層列表或分組列表結(jié)構(gòu)，如內(nèi)容門戶網(wǎng)站首頁面。適配規(guī)則：保持頁面元素尺寸或間距其中之一不變的情況下，基于屏幕寬度的增加，在橫向增加顯示更多元素。
挪移效果
布局特點(diǎn)：挪移布局的特點(diǎn)是，布局內(nèi)的元素根據(jù)布局的寬度來選擇是上下排布還是左右。
適應(yīng)場景：應(yīng)用/頁面類型：內(nèi)容呈現(xiàn)型，單頁面內(nèi)信息架構(gòu)層級少，如門戶網(wǎng)站首頁面，內(nèi)容詳情頁面等。適配規(guī)則：首先判斷布局的區(qū)域的是否有明顯的“寬高特征”，即橫縱比是否大于4:3；其次判斷橫向?qū)挾龋欠衲苋莸孟氯舾蓚€元素，如果容得下就左右排布，容不下就上下排布。
重復(fù)效果
布局特點(diǎn)：重復(fù)布局的特點(diǎn)是，利用屏幕的寬度優(yōu)勢，將相同屬性的布局組件（例如：歌單列表，應(yīng)用列表等），橫向并列同時排布。
適應(yīng)場景：對于內(nèi)容運(yùn)營類列表信息，適合在?屏上展示更多內(nèi)容。適配規(guī)則：可以定義單個組件的寬度規(guī)則，隨著頁面寬度的變化，?動計(jì)算可以重復(fù)的元素的個數(shù)。
瀑布效果
布局特點(diǎn)：瀑布布局的特點(diǎn)是，利用屏幕的寬度優(yōu)勢，將原來單列線性縱向排布的布局，拓展變?yōu)閮闪?多列的縱向布局。
適應(yīng)場景：適合用卡片式呈現(xiàn)內(nèi)容的場景，通過卡片的橫縱擴(kuò)展在?屏上展示更多內(nèi)容。適配規(guī)則：可以定義單個組件的寬度規(guī)則，隨著頁面寬度的變化，?動計(jì)算可以重復(fù)的卡片個數(shù)。
2柵格布局系統(tǒng)
柵格設(shè)計(jì)系統(tǒng)是一套能夠適配不同屏幕尺寸和屏幕朝向的響應(yīng)式布局的基礎(chǔ)設(shè)計(jì)機(jī)制，它可以確?？缭O(shè)備的一致性。
柵格設(shè)計(jì)系統(tǒng)有 ?Columns，?Gutters，?Margins三個基本屬性。
Columns，即柵格，是用來輔助布局的主要定位工具，不同的屏幕尺寸匹配不同的Columns數(shù)量來輔助布局定位。Columns的寬度在保證Margins和Gutters符合規(guī)范的情況下，根據(jù)實(shí)際設(shè)備的寬度和Columns數(shù)量自動計(jì)算每一個Columns的寬度。
Gutters是用來控制元素和元素之間的距離關(guān)系，可以根據(jù)設(shè)備的不同尺寸，定義不同的Gutters值作為斷點(diǎn)系統(tǒng)中的統(tǒng)一規(guī)范。為了保證較好的視覺效果，Gutters通常的取值不會大于Margins的取值。
Margins是用來控制元素距離屏幕最邊緣的距離關(guān)系，可以根據(jù)設(shè)備的不同尺寸，定義不同的Margin值作為斷點(diǎn)系統(tǒng)中的統(tǒng)一規(guī)范。
柵格系統(tǒng)定義了不同水平寬度設(shè)備對應(yīng)Columns的數(shù)量關(guān)系，形成了一套斷點(diǎn)規(guī)則定義。柵格系統(tǒng)以水平dp值作為斷點(diǎn)依據(jù)，不用的設(shè)備根據(jù)自身當(dāng)前水平寬度dp值在不同的斷點(diǎn)范圍內(nèi)的情況，顯示不同數(shù)量的柵格數(shù):
0<水平dp<320時：2 Columns柵格；
320<=水平dp<600時：4Columns柵格；
600<=水平dp<840時：8Columns柵格；
840<=水平dp時：12Columns柵格；
總的來說，柵格設(shè)計(jì)系統(tǒng)具有如下優(yōu)勢：
給布局提供一種可循的規(guī)律，解決多尺寸多設(shè)備的動態(tài)布局問題。
給系統(tǒng)提供一種統(tǒng)一的定位標(biāo)注，保證各模塊各設(shè)備的布局一致性。
給應(yīng)用提供一種靈活的間距調(diào)整方法，滿足特殊場景布局調(diào)整的可能性。
柵格可以作為輔助布局的一種有效工具，幫助開發(fā)者更全面得考慮多設(shè)備形態(tài)下的屏幕，如果依附柵格制定規(guī)則，達(dá)到更合理且美觀的布局效果。案例1:柵格縮進(jìn)效果說明：根據(jù)人因測試結(jié)果顯示，為了保證舒適的閱讀效果，單行文本的字?jǐn)?shù)不應(yīng)該過多。中文的單行舒適字?jǐn)?shù)是32個字符左右；最多可接受的是42個字符左右。英文的單行舒適字?jǐn)?shù)是66個字符左右；最多可接受的是87個字符左右。為了保證舒適的閱讀性，建議利用柵格定位體現(xiàn)縮進(jìn)效果。規(guī)則：4個columns時使用4個columns；8個columns時使用6個columns；12個column時使用8個columns。
場景：純段落文本/上圖下文/卡片的布局結(jié)構(gòu)的場景，在其對應(yīng)的柵格規(guī)格下，縮進(jìn)的規(guī)則占用柵格數(shù)量進(jìn)行布局。
案例2:柵格重復(fù)效果說明：對于內(nèi)容運(yùn)營類列表信息，適合在大屏上展示更多內(nèi)容。規(guī)則：應(yīng)用定義單個組件所占用的柵格數(shù)，隨著設(shè)備尺寸和柵格數(shù)量的變化，自動計(jì)算新的柵格數(shù)量，得出可以重復(fù)的元素的個數(shù)。
場景：內(nèi)容運(yùn)營類信息展示元素。例如（應(yīng)用市場，音樂等模塊）
為保證用戶在折疊屏不同形態(tài)切換時體驗(yàn)的連續(xù)性，是需要在系統(tǒng)交互上做很多設(shè)計(jì)與考量的。或許大家也都發(fā)現(xiàn)了，單頁面布局設(shè)計(jì)中的有些經(jīng)典布局模式是長盛不衰的，是可以用做很多行業(yè)和專業(yè)領(lǐng)域的準(zhǔn)模板。無論折疊屏設(shè)備是折疊還是展開，單頁面布局設(shè)計(jì)提供的高度直觀、高效實(shí)用的效果將有助于為用戶提供最佳體驗(yàn)。
廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。