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