中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

現在安卓平臺不少廠家都有自己的折疊屏手機，各家的折疊方式也不盡相同，這種情況下，如何做好APP適配工作？這篇文章，作者通過案例和分析，告訴我們具體如何設計。

近年來各類折疊屏產品層出不窮，隨著技術的不斷發展和消費者接受度的提高，折疊屏市場份額自 2018 年逐年攀升，折疊屏手機已經成為手機領域的一個重要分支。市場調查機構 Counterpoint Research 最新報告顯示，2024 年一季度，盡管全球智能手機市場依然低迷，但折疊屏手機細分領域呈現快速增長態勢，其銷量同比增長 49%，增幅創 6 個季度以來新高。用戶基數占比越來越高，用戶需求也不斷變化著。

1. 更多場景化需求

展開時更大的屏幕也使得視覺沖擊力與感染力有了更好提升，給用戶帶來更高效的信息展示和更加沉浸的瀏覽體驗。

2. 特殊場景下的任務效率提升

折疊展開后的第二屏可以讓用戶不離開當前場景就可以便捷處理子任務，提升多任務的處理效率。

一、折疊屏適配市場現狀

目前市面上部分產品的適配并不完美，多少會有些問題，但是不影響用戶正常使用，也能較好展示頁面信息內容。此外，安卓適配布局樣式也與鴻蒙適配布局一致。下面我們看幾個例子：

某品牌手機折疊屏適配情況

三大頭部新勢力車企 APP 適配情況較好，符合折疊屏適配設計規范中的原則，部分 APP 存在組件適配、折疊-開啟轉換不流暢等問題。

IPad App 適配情況

IPad 比例與折疊屏異曲同工，視覺布局具有一定的參考價值。

二、折疊屏設計探討

1. 遵循的原則

體驗連續

屏幕可隨時折疊展開，在體驗上要保證用戶體驗的連續性，應用需要遵從屏幕顯示的兼容和應用狀態的連續。

• 屏幕兼容：由于屏幕尺寸發生變化，應用應采用適當的手段對屏幕上內容布局進行優化調整。
• 應用連續：應用在折疊與展開狀態切換的過程中保持正常運行。

體驗增值

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

• 更多內容：大尺寸屏幕可顯示更多內容，提高顯示和操作的效率。
• 更加沉浸：大尺寸屏幕可顯示更清晰的細節，適合圖片瀏覽、視頻欣賞、游戲等應用和場景。
• 多任務并行：多個窗口可同時在大尺寸屏幕內展示，為用戶多任務并行提供了直觀高效的方式。

操作便捷

尊重用戶心智模型，在不同的場景下合理安排重要內容和操作選項。

改進用戶界面設計，提升體驗。

2. 用戶手指熱區變化

在屏幕展開的適配中，應該盡量考慮雙手操作時的便捷性，避免把需要頻繁操作的功能放置在雙手難以觸達的區域，從而造成不好的用戶體驗。

3. 設計要點

基礎體驗

• 信息展示完整，避免出現元素變形，以及展開態內容不能少于折疊態內容的 3/4；
• 旋轉適配，展開態橫豎屏布局一致；
• 交互不中斷，折疊展開應用流暢適配，展開態避免用戶操作步驟增加。

關鍵元素

• 在保證可讀性的基礎上，建議元素跟折疊屏保持一樣的大?。?/li>
• 圖片和視頻羅列展示的，展開后建議列數增加為原來的 2 倍；
• 內容不可過大，主要整體內容符合用戶的閱讀習慣，以提高用戶閱讀效率為主。

其他控件

• 彈窗注意避免出現在折疊鉸鏈處；
• 其他控件按照柵格體系進行適配展示。

三、設計適配思路

視覺設計從以下三個方面入手解決，由原子理論出發，由小及大實現適配；具體頁面適配樣式需要進一步視覺探討后確認。

四、項目案例解析

以某車企 APP 適配折疊屏設計為例。

1. 制定全局柵格體系

保證頁面的舒適和諧，規范延續，實現頁面信息最大化呈現。

• 基于該車企 APP 頁面適配折疊屏，基礎的 12 柵格已經滿足當前的信息收納，我們使用創建布局。
• 基于此柵格布局，初步得出：橫向內容劃分（藍色區塊）最多 4 個，最少 1 個的結論，具體可見下圖，設計基于此單位進行定制排版。

2. 梳理確定關鍵因素

關鍵元素等大，更符合設計原則，頁面信息的展示效率高，同時也能節省開發應用時間。

適配測試：

3. 動態布局：通過對使用場景的梳理分析，制定專屬組件和布局適配

保證應用不同尺寸下適配的合理性、風格一致性、界面清晰性、閱讀舒適性；有利于更高效的信息展示或更沉浸的內容瀏覽。

3.1 自適應布局

信息量增加，但是信息架構不變。

相對拉伸

頁面內元素的顯示寬度不是固定值，而是通過相對參照物的方式來確定其開始和結束的位置。當布局的顯示大小發生變化時，元素的顯示寬度隨之發生改變。

相對縮放

布局內元素的顯示大小不是固定值，而是通過相對參照物的方式來確定其寬或者高的參數。當布局的顯示大小發生變化時，元素的大小隨之發生縮放。

延伸布局

布局特點：組件內元素橫向布局，元素間的距離固定，可顯示元素的數量可隨著顯示寬度的改變而變化。

適配規則：保持頁面元素尺寸或間距不變，隨著屏幕寬度的增加，在橫向顯示更多元素。

3.2 響應式布局

布局特點：布局內的元素根據布局的寬度來選擇是上下排布還是左右排布。適用頁面內信息架構層級少的，例如門戶網站首頁面、內容詳情頁面等。

適配規則：首先判斷布局區域是否有明顯的“寬高特征”，即橫縱比是否大于 4:3；其次判斷橫向寬度，是否能容得下若干個元素，如果容得下就左右排布，容不下就上下排布。

挪移布局

重復布局

布局特點：利用屏幕的寬度優勢，將相同屬性的布局組件橫向并列同時排布。

適配規則：可以定義單個元素的寬度規則，隨著屏幕寬度的變化，?動計算可以重復的元素個數，滿足寬度條件時橫向重復排列。

重復布局

瀑布布局

適用場景：適合用卡片呈現內容的場景，通過卡片的橫縱擴展在?屏上展示更多內容。

適配規則：可以定義單個組件的寬度規則，隨著頁面寬度的變化，?動計算可以重復的卡片個數，滿足條件時橫向排列更多卡片。

瀑布布局

4. 其他控件

彈窗、懸浮窗、toast。

調用系統控件：

原因：避免在寬屏設備彈窗過寬或過高的問題；避免彈窗卡在鉸鏈處，出現識別問題。

解決：建議調用系統的彈出框控件；寬屏下用戶手指的使用，建議放在左側，或者右側屏中。

5. 后續關注點

后續設計圖執行過程中需要針對頁面布局進行細節探討。

原文作者：張帆、李智君，ISAR資深用戶體驗視覺設計師。