多設(shè)備屏幕適配演示從設(shè)備檔位切換看柵格布局變化很多人第一次看到“多設(shè)備適配”這個詞時會自然地想到窗口尺寸監(jiān)聽、橫豎屏變化、折疊狀態(tài)識別以及根據(jù)屏幕寬度自動切換布局。但眼前這個頁面做的事情更聚焦它把手表、手機(jī)、折疊屏和平板放在同一個選擇面板中用戶點擊不同的設(shè)備名稱頁面隨之替換當(dāng)前設(shè)備標(biāo)簽、尺寸說明、布局提示并調(diào)整下方入口卡片的列數(shù)。因此這個頁面更適合被理解為一個“設(shè)備檔位與柵格布局演示”。它用固定的設(shè)備名稱和固定的尺寸文字模擬不同設(shè)備場景再用一個選擇值驅(qū)動界面變化。頁面沒有讀取真實窗口寬度也沒有調(diào)用系統(tǒng)接口判斷當(dāng)前終端到底是手表、手機(jī)、折疊屏還是平板它的價值在于把適配討論中最容易混在一起的幾件事拆開設(shè)備名稱是展示數(shù)據(jù)尺寸字符串是展示數(shù)據(jù)網(wǎng)格列數(shù)是條件布局選中效果是狀態(tài)反饋。先看清頁面展示了什么頁面打開后最上方是一行標(biāo)題區(qū)域。左側(cè)有兩行文字第一行是“多設(shè)備屏幕適配”字號較大并使用粗體第二行寫著“vp / fp / 響應(yīng)式斷點演示”字號更小顏色也更淺。右側(cè)是一個帶紫色背景的圓角標(biāo)簽?zāi)J(rèn)顯示“手機(jī)”。這個默認(rèn)結(jié)果并不是隨機(jī)產(chǎn)生的而是因為初始選中的位置落在四個設(shè)備名稱中的第二個位置。標(biāo)題下方是一排四個設(shè)備切換項依次為“手表”“手機(jī)”“折疊屏”“平板”。當(dāng)前項使用紫色背景和白色文字其他項使用淺灰背景和深灰文字。四個選項平均分布在一行中選項本身是帶圓角的文字塊點擊區(qū)域比文字略大便于觸摸。再往下是一個淺紫色的大卡片。卡片標(biāo)題為“當(dāng)前模擬設(shè)備”中間用較大的紫色文字顯示設(shè)備尺寸和倍率例如手機(jī)檔位對應(yīng)“360vp · 2.0x”。尺寸字符串下方還會顯示一條布局說明說明當(dāng)前檔位在頁面設(shè)計中的位置例如緊湊布局、響應(yīng)式布局或?qū)挿季帧＿@里的“模擬”很重要它說明卡片是在展示預(yù)設(shè)檔位而不是把真實設(shè)備測量結(jié)果反饋給用戶。頁面下半部分是六個固定入口卡片名稱分別是“今日推薦”“訂單中心”“收藏商品”“消息通知”“個人資料”“設(shè)置”。每張卡片上方有一個紫色符號下方是入口名稱。卡片使用白色背景和圓角排列在一個網(wǎng)格中。切換前兩個設(shè)備檔位時網(wǎng)格顯示兩列切換后兩個檔位時網(wǎng)格顯示三列。入口的名稱、圖標(biāo)和卡片高度不會因為檔位變化而替換變化主要體現(xiàn)在列數(shù)和由此帶來的排列方式。頁面最底部是一句居中的淺灰色提示“切換設(shè)備預(yù)覽斷點、柵格與字號策略”。它是對當(dāng)前演示方式的概括提示用戶通過上方選擇項觀察界面變化。頁面沒有給六個入口附加跳轉(zhuǎn)動作也沒有在點擊卡片時進(jìn)入新的頁面。四個設(shè)備檔位實際上是一組固定數(shù)據(jù)頁面把四個設(shè)備名稱放在同一組順序數(shù)據(jù)中手表、手機(jī)、折疊屏、平板。每個名稱都有一個位置從零開始分別對應(yīng) 0、1、2、3。頁面只有一個真正參與交互的選擇狀態(tài)切換名稱時改變的就是這個位置值。這種設(shè)計的優(yōu)點是關(guān)系清楚。名稱、尺寸文字、右上角標(biāo)簽和布局說明都根據(jù)同一個位置取值所以不會出現(xiàn)標(biāo)簽已經(jīng)顯示“平板”而尺寸文字仍然顯示手機(jī)的情況。用戶點選第四項時頁面所有與當(dāng)前設(shè)備有關(guān)的區(qū)域都會按照第四個位置重新計算。狀態(tài)來源只有一個多個顯示區(qū)域共享這個來源頁面的表現(xiàn)比較容易追蹤。與四個名稱對應(yīng)的尺寸文字是“240vp · 1.5x”“360vp · 2.0x”“720vp · 2.5x”“960vp · 3.0x”。這些文字并不是實時測量出來的數(shù)字而是預(yù)先寫好的展示內(nèi)容。它們在頁面中承擔(dān)的是“檔位標(biāo)簽”的作用讓用戶看到選擇不同設(shè)備時頁面會展示不同的寬度單位和倍率組合。這里還需要區(qū)分兩個概念頁面展示了 vp、fp 和響應(yīng)式斷點這些詞但它并沒有根據(jù)實際的 vp 數(shù)值計算字體也沒有根據(jù) fp 值動態(tài)縮放文字。字號在界面中是固定設(shè)置的設(shè)備切換只改變當(dāng)前設(shè)備文案、尺寸字符串、說明文字和網(wǎng)格模板。把副標(biāo)題里的專業(yè)術(shù)語直接理解成已經(jīng)完成了完整適配能力會超出這個頁面能夠證明的范圍。默認(rèn)選擇為什么是手機(jī)頁面第一次出現(xiàn)時右上角標(biāo)簽是“手機(jī)”大卡片中的尺寸文字是“360vp · 2.0x”下方說明屬于前兩個檔位使用的緊湊分組網(wǎng)格呈現(xiàn)兩列。這個初始狀態(tài)讓頁面一打開就有一個具體的設(shè)備場景不會出現(xiàn)標(biāo)簽為空、尺寸文字缺失或者卡片沒有布局說明的問題。默認(rèn)值也決定了演示的第一眼重點。手機(jī)通常是用戶最熟悉的基準(zhǔn)先展示手機(jī)檔位隨后再點擊手表、折疊屏和平板可以直觀看到緊湊設(shè)備和較寬設(shè)備之間的排列差異。重新打開頁面后選擇會回到手機(jī)說明這個選擇只是當(dāng)前頁面運(yùn)行期間的臨時狀態(tài)沒有保存到本地也不會因為上一次選擇了平板而在下次啟動時繼續(xù)保留。選擇項的高亮如何變化四個設(shè)備項都由同一組名稱生成每個項拿到自己的位置。顯示顏色會把自己的位置與當(dāng)前選擇位置進(jìn)行比較兩者相同就使用紫色背景和白色文字兩者不同就使用淺灰背景和深灰文字。點擊某項后當(dāng)前選擇位置改變四個項會重新計算顏色因此高亮?xí)脑瓉淼奈恢靡苿拥叫碌奈恢谩＿@個變化沒有額外的提示框也沒有單獨的“已選擇”文字。用戶通過顏色、標(biāo)簽和下方卡片的同步變化判斷操作結(jié)果。對一個只有四個選項的輕量演示來說這樣的反饋已經(jīng)足夠直接點擊手機(jī)時手機(jī)項變紫點擊平板時平板項變紫右上角標(biāo)簽也同時替換。從上到下理解頁面布局頁面最外層采用縱向排列。所有區(qū)域按照標(biāo)題、設(shè)備選項、設(shè)備信息卡、入口網(wǎng)格、底部提示的順序向下堆疊。縱向容器設(shè)置了統(tǒng)一的區(qū)域間距并在四周留出內(nèi)邊距所以內(nèi)容不會緊貼屏幕邊緣。頁面背景是接近白色的淺灰色設(shè)備信息卡使用更明顯的淺紫色入口卡片使用白色這三層顏色讓頁面產(chǎn)生了清楚的區(qū)域?qū)哟巍?biāo)題區(qū)域的左右關(guān)系標(biāo)題區(qū)域是一個橫向容器。左側(cè)的兩行文字放在一個縱向小容器中標(biāo)題和副標(biāo)題之間只有較小間距右側(cè)是當(dāng)前設(shè)備名稱標(biāo)簽。左側(cè)區(qū)域占據(jù)剩余空間右側(cè)標(biāo)簽根據(jù)文字寬度顯示所以不同設(shè)備名稱不會把標(biāo)題擠到固定的奇怪位置。主標(biāo)題字號為 25使用粗體副標(biāo)題字號為 14顏色是較淺的灰色右側(cè)標(biāo)簽字號為 16文字為白色四周有內(nèi)邊距背景為紫色并帶有較大的圓角。標(biāo)題承擔(dān)頁面說明標(biāo)簽承擔(dān)當(dāng)前狀態(tài)兩者在同一行中形成“固定說明 動態(tài)狀態(tài)”的關(guān)系。設(shè)備選項的間距與觸摸區(qū)域四個設(shè)備名稱位于第二個橫向容器中選項之間保留固定間距并使用兩端分布的排列方式。每項文字外側(cè)有內(nèi)邊距背景和圓角共同構(gòu)成一個小按鈕。由于選項的寬度會隨文字和內(nèi)邊距變化手表、手機(jī)、折疊屏和平板并不是完全相同寬度的矩形但整體仍然保持一行分布。點擊動作綁定在文字容器本身。當(dāng)用戶點擊某個選項時頁面只需要把當(dāng)前位置設(shè)為該選項的位置其他顯示區(qū)域便會自動刷新。這里沒有用四個重復(fù)的處理函數(shù)分別寫四套邏輯名稱循環(huán)和當(dāng)前位置參數(shù)讓交互規(guī)則保持一致。設(shè)備信息卡的結(jié)構(gòu)設(shè)備信息卡是一個縱向容器內(nèi)部依次放置“當(dāng)前模擬設(shè)備”、尺寸倍率文字和布局說明。卡片有 18 的內(nèi)邊距和 20 的圓角背景使用淺紫色整體寬度占滿可用區(qū)域。標(biāo)題字號為 18使用中等字重尺寸文字字號為 30使用粗體和紫色是卡片的視覺重點說明字號為 15顏色為深灰色用來補(bǔ)充當(dāng)前檔位的布局描述。三行文字之間用較小的垂直間距分開用戶可以迅速掃到最重要的尺寸文字再看到說明。卡片顯示的不是一組獨立狀態(tài)。標(biāo)題始終不變尺寸文字從四個固定字符串中按當(dāng)前位置取值說明文字根據(jù)當(dāng)前位置落在哪個分支中取值。右上角設(shè)備標(biāo)簽和這張卡片共用相同選擇來源所以點擊設(shè)備項后兩處內(nèi)容會同步改變。網(wǎng)格區(qū)域的尺寸分配網(wǎng)格區(qū)域使用剩余空間布局。六個入口卡片由固定入口名稱生成每個入口都被放入一個網(wǎng)格項。網(wǎng)格有 10 的行間距和列間距寬度占滿頁面卡片在單元格中使用全寬固定高度為 92。網(wǎng)格項內(nèi)部還是一個縱向容器上面是紫色符號下面是入口名稱。符號字號為 25入口名稱字號為 13兩個內(nèi)容之間保持一定空間并通過居中方式放在卡片中央。卡片背景為白色圓角為 14和淺灰頁面背景形成對比。真正控制列數(shù)的是當(dāng)前選擇位置的條件。手表和手機(jī)屬于前兩個位置網(wǎng)格模板使用“兩列”折疊屏和平板屬于后兩個位置網(wǎng)格模板使用“三列”。所以六個卡片在兩列模式下會形成三行在三列模式下會形成兩行。卡片內(nèi)容沒有變化變化的是每行能放下幾個卡片。頁面中的說明文字可能寫出“2 列緊湊布局”“3 列卡片布局”“4 列響應(yīng)式布局”“6 列寬幅布局”等描述但實際網(wǎng)格模板只有兩列和三列兩種。閱讀這個頁面時應(yīng)以真實看到的卡片排列為準(zhǔn)前兩項是兩列后兩項是三列。描述文字更像是對檔位的概念說明并不代表頁面真的創(chuàng)建了四列或六列網(wǎng)格。一次點擊會改變哪些地方把一次操作拆開看頁面的反饋鏈條非常短。用戶先點擊一個設(shè)備名稱點擊事件把當(dāng)前選擇改成被點擊項的位置狀態(tài)更新后依賴這個選擇的位置重新計算。右上角名稱標(biāo)簽、設(shè)備卡片中的尺寸文字、設(shè)備卡片中的說明、四個選項的高亮樣式和入口網(wǎng)格的列模板都會參與這次刷新。例如從手機(jī)切換到手表右上角的“手機(jī)”會變成“手表”手機(jī)項從紫色變?yōu)闇\灰手表項從淺灰變?yōu)樽仙ＴO(shè)備卡片的尺寸文字從“360vp · 2.0x”變成“240vp · 1.5x”。說明文字切換到緊湊設(shè)備對應(yīng)的描述。下方六個入口不再以三列或其他猜測方式排列而是按照前兩個檔位對應(yīng)的兩列模板排列。從手機(jī)切換到折疊屏?xí)r右上角標(biāo)簽顯示“折疊屏”尺寸文字顯示“720vp · 2.5x”選項高亮移動到第三項。設(shè)備卡片的說明進(jìn)入第三個分支入口網(wǎng)格切換到三列。此時六張卡片每行顯示三張因此總共兩行頁面底部提示的位置會隨著網(wǎng)格高度變化而變化。從折疊屏切換到平板時網(wǎng)格仍然是三列因為這兩個設(shè)備使用同一組列模板。雖然尺寸文字和布局說明會變化選項高亮也會變化但卡片排列方式不會再次變化。這說明設(shè)備名稱、尺寸文字和列數(shù)并不是一一對應(yīng)的四種完全不同布局而是四個檔位共享兩種網(wǎng)格模式。用戶反復(fù)點擊同一個選項時選擇位置的值不會產(chǎn)生新的語義變化。高亮仍然停留在原位置右上角標(biāo)簽、尺寸文字和網(wǎng)格排列也保持不變。由于頁面沒有動畫計數(shù)、提示消息或額外記錄重復(fù)點擊主要用來確認(rèn)當(dāng)前狀態(tài)保持穩(wěn)定。六個入口卡片為什么保持固定“今日推薦”“訂單中心”“收藏商品”“消息通知”“個人資料”“設(shè)置”是頁面中最穩(wěn)定的一組內(nèi)容。無論用戶選擇哪一種設(shè)備檔位這六個名字都存在圖標(biāo)順序也不變。它們的作用不是實現(xiàn)六個真實業(yè)務(wù)模塊而是提供足夠明確的卡片內(nèi)容讓用戶觀察兩列和三列排列的變化。入口名稱覆蓋了推薦、訂單、收藏、消息、資料、設(shè)置幾個常見導(dǎo)航語義長度也有所不同。這樣排列時卡片中既有兩個字的“設(shè)置”也有四個字的“今日推薦”和“消息通知”能讓觀察者看到不同文字長度在同一高度卡片中的表現(xiàn)。實際頁面沒有為它們設(shè)置點擊事件因此點擊卡片不會打開詳情也不會改變當(dāng)前設(shè)備狀態(tài)。六個符號同樣是固定展示內(nèi)容。它們不是從圖標(biāo)資源中動態(tài)加載的圖片而是以字符形式顯示在卡片上方。符號使用統(tǒng)一紫色名稱使用深灰色所有卡片采用同樣的字號、間距和圓角因此網(wǎng)格的視覺重點落在布局變化而不是不同卡片的樣式差異。兩列模式下每行有兩張卡片六個入口分成三行三列模式下每行有三張卡片六個入口分成兩行。由于每張卡片高度固定列數(shù)變化會直接影響網(wǎng)格整體高度。這種差異在頁面底部比較容易觀察兩列模式占用更多垂直空間三列模式占用更少垂直空間底部提示隨剩余空間重新分配。設(shè)備檔位與真實適配能力的邊界這個頁面可以幫助開發(fā)者理解“選擇一個檔位后布局按照條件變化”的基本思路但它不能證明應(yīng)用已經(jīng)具備真實的多設(shè)備適配能力。頁面沒有讀取窗口寬度沒有監(jiān)聽屏幕尺寸變化也沒有識別折疊屏展開或合攏狀態(tài)。四個名稱和四條尺寸字符串都是固定內(nèi)容用戶通過點擊標(biāo)簽主動選擇場景。頁面也沒有使用真實斷點計算入口卡片寬度。網(wǎng)格列數(shù)只有一個簡單條件選擇位置小于 2 時兩列否則三列。這里的條件是設(shè)備名稱位置的條件并不是“窗口寬于某個值就三列”的寬度斷點。頁面沒有在運(yùn)行中測量可用寬度也沒有因為字體放大、窗口縮小而重新安排網(wǎng)格。同樣頁面中的倍率文字只是卡片上的文字。它不會改變標(biāo)題字號、入口名稱字號、圖標(biāo)字號或卡片高度。無論顯示 240vp 還是 960vp標(biāo)題仍保持原來的字號入口卡片仍保持固定高度。副標(biāo)題提到 vp、fp 和響應(yīng)式斷點但當(dāng)前交互只更新顯示文字和網(wǎng)格模板不能把這些術(shù)語當(dāng)成已經(jīng)接入系統(tǒng)適配鏈路的證據(jù)。如果把它作為真實應(yīng)用的起點后續(xù)還需要引入窗口尺寸變化來源再制定明確的斷點規(guī)則并對文字、卡片、間距和可用空間分別做測量。折疊屏還需要考慮連續(xù)屏與分區(qū)狀態(tài)平板需要考慮橫豎屏和窗口化場景手表則要考慮更小的觸控區(qū)域和信息密度。這些都屬于后續(xù)能力當(dāng)前頁面沒有實現(xiàn)文章也不應(yīng)把它們寫成現(xiàn)有功能。從界面觀察聲明式更新這個演示非常適合觀察聲明式界面的特點。頁面不是在每次點擊后逐個尋找右上角標(biāo)簽、設(shè)備卡片和網(wǎng)格再手動修改它們的內(nèi)容而是把這些內(nèi)容寫成當(dāng)前選擇的結(jié)果。點擊只改變選擇界面根據(jù)選擇重新描述自己應(yīng)該顯示什么。這種方式讓頁面的幾個區(qū)域保持一致。右上角標(biāo)簽讀取當(dāng)前設(shè)備名稱設(shè)備卡片讀取同一位置對應(yīng)的尺寸文字選項樣式比較自己的位置與當(dāng)前位置網(wǎng)格列數(shù)也比較當(dāng)前位置是否小于 2。因為它們都從同一個選擇狀態(tài)推導(dǎo)所以用戶切換一次后可以同時看到多個區(qū)域變化而不需要為每個區(qū)域維護(hù)一個容易失配的獨立開關(guān)。狀態(tài)數(shù)量少并不代表頁面沒有值得觀察的細(xì)節(jié)。一個位置值同時影響文本、顏色、布局模板和網(wǎng)格高度這正是狀態(tài)驅(qū)動界面的典型特征。它也提醒我們設(shè)計狀態(tài)時要先找出真正的變化源再讓其他內(nèi)容從變化源推導(dǎo)出來。若把設(shè)備名稱、尺寸文字和列模式分別設(shè)置成三個狀態(tài)后續(xù)就可能出現(xiàn)名稱已經(jīng)切換而列數(shù)沒有切換的情況。運(yùn)行時可以觀察的幾組場景第一組場景是初始手機(jī)檔位。頁面頂部顯示手機(jī)設(shè)備卡片顯示 360vp 和 2.0x手機(jī)選項呈現(xiàn)紫色高亮六張卡片使用兩列。這個場景可以確認(rèn)默認(rèn)選擇、標(biāo)題標(biāo)簽、尺寸字符串和網(wǎng)格初始模板是否一致。第二組場景是手表檔位。點擊手表后標(biāo)簽和尺寸文字切換到手表對應(yīng)內(nèi)容網(wǎng)格仍然保持兩列。這個場景說明前兩個設(shè)備雖然名稱和尺寸不同但在當(dāng)前演示中共享緊湊排列方式。觀察重點不是尋找真實手表窗口而是確認(rèn)選擇變化能夠帶動多個展示區(qū)域。第三組場景是折疊屏檔位。點擊折疊屏后設(shè)備卡片顯示第三條尺寸文字說明文字切換到第三個分支六個入口改為三列。此時可以數(shù)一數(shù)每行的卡片數(shù)量確認(rèn)頁面實際從兩列變?yōu)槿小５谒慕M場景是平板檔位。點擊平板后名稱、尺寸和說明繼續(xù)更新但網(wǎng)格仍是三列。這個場景能幫助區(qū)分“設(shè)備文案變化”和“布局模板變化”不是每次名稱變化都會帶來新的列數(shù)后兩個檔位在當(dāng)前頁面中使用相同的三列模板。第五組場景是按照手表、手機(jī)、折疊屏、平板的順序連續(xù)點擊。連續(xù)操作可以觀察高亮是否始終只有一個、右上角標(biāo)簽是否跟隨當(dāng)前項、網(wǎng)格列數(shù)是否在第二項到第三項之間發(fā)生一次切換。由于選擇沒有持久化重新打開頁面后還會回到手機(jī)檔位。頁面視覺層次的實際作用頁面的顏色并不是為了表達(dá)復(fù)雜業(yè)務(wù)狀態(tài)而是為了讓當(dāng)前選擇和布局演示容易被看懂。紫色被用于當(dāng)前設(shè)備標(biāo)簽、選中項、尺寸重點文字和入口符號形成統(tǒng)一的強(qiáng)調(diào)色。淺灰用于未選項和頁面背景深灰用于普通文字白色用于入口卡片。顏色層次把“當(dāng)前狀態(tài)”“重要數(shù)值”和“普通說明”區(qū)分開。標(biāo)題區(qū)域使用較大的主標(biāo)題和較淺的副標(biāo)題用戶先看到頁面主題再看到這頁演示涉及的詞語。右側(cè)標(biāo)簽使用膠囊形背景即使設(shè)備名稱發(fā)生變化仍然在同一位置承擔(dān)狀態(tài)標(biāo)識。選項行使用較小的圓角按鈕和上方較大的標(biāo)簽形成尺寸層次。淺紫色設(shè)備卡片是頁面的中心區(qū)域。它的背景與普通頁面背景有輕微差異圓角和內(nèi)邊距讓三行文字形成一個完整的信息塊。大字號尺寸文字負(fù)責(zé)吸引注意力布局說明負(fù)責(zé)解釋當(dāng)前檔位的提示。六個入口卡片則使用白色卡片之間通過間距分隔避免六個符號和名稱混在一起。頁面沒有復(fù)雜的陰影、漸變或動畫視覺變化主要來自顏色、文字和列數(shù)。這樣的處理與頁面的演示目的相符如果裝飾過多用戶可能注意到顏色變化卻忽略了網(wǎng)格從兩列變?yōu)槿羞@一核心現(xiàn)象。容易產(chǎn)生誤讀的地方第一處誤讀是把“手表、手機(jī)、折疊屏、平板”當(dāng)成真實設(shè)備檢測結(jié)果。實際上它們只是四個可點擊的固定標(biāo)簽。頁面不會因為連接到哪一種設(shè)備而自動改變用戶必須主動點擊。第二處誤讀是把尺寸字符串當(dāng)成真實測量值。240vp、360vp、720vp 和 960vp 是頁面展示給用戶的文字倍率也是固定文字。它們沒有被用來計算卡片尺寸也沒有驅(qū)動字體縮放。第三處誤讀是把布局說明中的數(shù)字當(dāng)成網(wǎng)格真實列數(shù)。實際可見的網(wǎng)格只有兩列和三列兩種前兩個選擇使用兩列后兩個選擇使用三列。說明文字中的其他數(shù)字應(yīng)當(dāng)作為檔位描述閱讀不能用來推斷頁面創(chuàng)建了對應(yīng)數(shù)量的列。第四處誤讀是把六個入口名稱當(dāng)成可用的業(yè)務(wù)功能。它們只是固定卡片當(dāng)前沒有點擊處理或數(shù)據(jù)加載。它們的存在是為了讓網(wǎng)格排列具有足夠內(nèi)容也讓兩列和三列之間的差異更明顯。第五處誤讀是把“響應(yīng)式斷點演示”理解為完整響應(yīng)式系統(tǒng)。頁面只是根據(jù)選擇位置應(yīng)用一個條件模板并沒有監(jiān)聽窗口變化也沒有實時斷點。它展示的是一個易于理解的條件布局樣例。這個小頁面適合怎樣學(xué)習(xí)如果正在學(xué)習(xí) ArkUI可以先只觀察頂部四個選項。理解它們?nèi)绾喂蚕硪粋€當(dāng)前選擇再看右上角標(biāo)簽和中心卡片為什么能夠同步變化。接著觀察網(wǎng)格列數(shù)前兩個選項為兩列后兩個選項為三列。最后再看六個入口卡片在不同列數(shù)下的行數(shù)變化。如果正在學(xué)習(xí)布局可以把頁面分成五個區(qū)域標(biāo)題行、選項行、信息卡、入口網(wǎng)格和底部提示。每個區(qū)域都有明確職責(zé)區(qū)域之間由縱向間距隔開。標(biāo)題行內(nèi)部又分成左側(cè)標(biāo)題組和右側(cè)狀態(tài)標(biāo)簽信息卡內(nèi)部按標(biāo)題、主數(shù)據(jù)、補(bǔ)充說明排列入口卡片內(nèi)部按符號和名稱垂直居中。如果正在學(xué)習(xí)狀態(tài)驅(qū)動界面可以記錄一次點擊前后所有變化點擊對象、當(dāng)前標(biāo)簽、選中顏色、尺寸文字、說明文字、列數(shù)和網(wǎng)格行數(shù)。這樣能發(fā)現(xiàn)頁面并不是只有一個地方改變而是多個視覺結(jié)果由同一個選擇狀態(tài)統(tǒng)一推導(dǎo)。如果正在學(xué)習(xí)適配概念應(yīng)當(dāng)把這個頁面當(dāng)作“模擬輸入 條件布局”的練習(xí)而不是完整適配方案。真正的適配需要真實窗口信息和更多邊界處理當(dāng)前頁面只把不同檔位的展示關(guān)系做成了可點擊的演示。可以從頁面得到的設(shè)計經(jīng)驗第一演示數(shù)據(jù)要有清楚的對應(yīng)關(guān)系。四個設(shè)備名稱、四條尺寸文字和四段說明按照同一位置排列用戶切換后不容易迷失。即使后續(xù)擴(kuò)展數(shù)據(jù)也應(yīng)保持名稱、尺寸和說明的順序一致。第二變化范圍要控制在一個清晰的維度內(nèi)。當(dāng)前頁面沒有讓入口卡片名稱隨設(shè)備變化也沒有讓卡片樣式完全重做而只改變列模板。這樣用戶可以把注意力放在布局差異上。第三選中態(tài)要在多個區(qū)域形成閉環(huán)。選項顏色告訴用戶點中了什么右上角標(biāo)簽告訴用戶當(dāng)前選擇中心卡片給出更完整的解釋網(wǎng)格則給出布局結(jié)果。文字、顏色和排列共同提供反饋。第四頁面說明應(yīng)該和實際結(jié)果相互印證。如果描述聲稱某檔位是六列實際卻沒有六列讀者就會產(chǎn)生疑問。因此分析時要以可見排列為準(zhǔn)明確說明文字和實際網(wǎng)格之間的差異避免把概念標(biāo)簽寫成已經(jīng)完成的能力。第五固定卡片也可以承擔(dān)布局測試素材的作用。六個入口名稱長度不同圖標(biāo)和名稱上下排列既能填滿兩列和三列也能觀察卡片在不同列寬下是否仍然保持居中和可讀。即使沒有業(yè)務(wù)點擊固定內(nèi)容仍然有清晰的演示價值。適配能力如果繼續(xù)發(fā)展需要補(bǔ)什么當(dāng)前頁面完成的是手動選擇檔位。若要繼續(xù)發(fā)展成真實適配頁面第一步需要獲得窗口的實際可用寬度而不是依賴用戶點擊設(shè)備名稱。接著要定義斷點在哪個寬度區(qū)間使用兩列在哪個區(qū)間使用三列卡片最小寬度是多少文字是否需要換行。第二步需要處理窗口變化過程。平板可能以分屏窗口運(yùn)行折疊屏可能在展開和合攏之間切換手機(jī)也可能出現(xiàn)橫豎屏變化。真實頁面不能只在啟動時判斷一次而要能在窗口變化后重新計算可用布局。第三步需要把字號策略落實到顯示結(jié)果中。當(dāng)前頁面展示了 vp、fp 等詞但所有文字字號都是固定值。真實字號策略應(yīng)當(dāng)說明哪些文字使用固定字號哪些文字隨用戶字體設(shè)置變化卡片內(nèi)文字過長時如何處理放大字體后入口名稱是否會與符號重疊。第四步需要重新驗證卡片觸摸區(qū)域。手表等小屏設(shè)備對觸控區(qū)域和信息密度更敏感六個入口不一定適合直接沿用手機(jī)布局。平板寬屏則可能需要更大的卡片、更多內(nèi)容或不同的空白比例。第五步需要為真實入口增加行為。當(dāng)前六張卡片沒有點擊處理如果要變成應(yīng)用首頁就需要為每個入口配置頁面跳轉(zhuǎn)或內(nèi)容更新同時保留設(shè)備變化后布局不亂的約束。只有這些能力真正加入并驗證后才能把頁面稱為完整的多設(shè)備應(yīng)用布局。結(jié)語這個頁面的重點不是模擬出四種真實設(shè)備而是用一個非常小的交互閉環(huán)讓設(shè)備檔位、狀態(tài)選擇、文字反饋和網(wǎng)格布局之間的關(guān)系變得可見。用戶點擊手表、手機(jī)、折疊屏或平板頁面會同步更新右上角名稱、中心卡片的尺寸文字、布局說明、選項高亮和六個入口的列數(shù)。從實際效果看手表和手機(jī)使用兩列網(wǎng)格折疊屏和平板使用三列網(wǎng)格。六個入口名稱和圖標(biāo)保持固定區(qū)別主要是每行放置的卡片數(shù)量和網(wǎng)格整體高度。240vp、360vp、720vp、960vp 及倍率文字是預(yù)設(shè)展示數(shù)據(jù)不是實時測量值“響應(yīng)式斷點”是頁面主題說明不是窗口監(jiān)聽結(jié)果。把這些邊界講清楚反而能更準(zhǔn)確地理解這個小頁面的價值。它適合用來學(xué)習(xí)如何讓一個選擇狀態(tài)驅(qū)動多個 UI 區(qū)域也適合觀察兩列和三列模板帶來的排列變化。至于真實窗口適配、折疊狀態(tài)識別、動態(tài)字號和多設(shè)備業(yè)務(wù)入口則需要在這個演示基礎(chǔ)上繼續(xù)建設(shè)不能從當(dāng)前頁面直接推導(dǎo)出來。四個檔位放在一起觀察把四個選項放在一起看可以發(fā)現(xiàn)它們并不是四套完全獨立的頁面而是同一套頁面內(nèi)容的四種說明狀態(tài)。手表、手機(jī)、折疊屏和平板只負(fù)責(zé)提供不同的名稱和位置中心卡片再根據(jù)位置顯示相應(yīng)的尺寸文字網(wǎng)格則根據(jù)前后兩個位置組選擇列模板。這種組織方式讓頁面很適合做橫向比較不需要離開當(dāng)前頁面也不需要等待新的數(shù)據(jù)加載點擊一個名稱就能把對應(yīng)結(jié)果展示出來。手表檔位的重點在于“較小檔位”的表達(dá)。它顯示 240vp 和 1.5x說明文字屬于緊湊布局分支下方六張卡片按兩列排列。這里的兩列并不是因為頁面真的知道手表屏幕有多寬而是因為手表排在前兩個位置。觀察者能看到小檔位對應(yīng)的文字變化和卡片排列卻不能把這一結(jié)果解釋成手表適配已經(jīng)完成。手機(jī)檔位是頁面的初始基準(zhǔn)。它顯示 360vp 和 2.0x標(biāo)簽和選項高亮都指向手機(jī)網(wǎng)格仍是兩列。手表與手機(jī)之間切換時網(wǎng)格列數(shù)不變只更新名稱、尺寸和選中狀態(tài)。這個對照說明頁面的“設(shè)備變化”與“列數(shù)變化”不是同一個維度前兩個檔位共享同一列模板。折疊屏檔位是觀察列數(shù)切換的關(guān)鍵。它顯示 720vp 和 2.5x六個入口從兩列改為三列每行卡片數(shù)量由兩張變?yōu)槿龔垺Ｖ行目ㄆ恼f明也進(jìn)入另一段文字分支但卡片名稱和符號仍保持原樣。折疊屏在這里是一個手動選擇的場景標(biāo)簽而不是由折疊傳感器產(chǎn)生的狀態(tài)。平板檔位顯示 960vp 和 3.0x網(wǎng)格繼續(xù)使用三列。它和折疊屏之間切換時排列數(shù)量不會再次改變但尺寸文字、選項高亮和布局說明會更新。這個對照很有價值因為它能提醒使用者四個設(shè)備檔位只映射到兩種實際列模板不能看到四條尺寸文字就推斷頁面具有四套柵格。一次切換中哪些內(nèi)容先被注意到用戶點擊設(shè)備名稱后最先容易注意到的是選項行的顏色。原來的紫色按鈕變成淺灰被點擊的按鈕變成紫色反饋非常明顯。隨后視線通常會移動到右上角標(biāo)簽因為標(biāo)簽位于標(biāo)題行的末端和設(shè)備選項形成上下呼應(yīng)。再往下看淺紫色卡片中的大字號尺寸文字會更新最后才會發(fā)現(xiàn)入口卡片的列數(shù)和行數(shù)發(fā)生了變化。這種從顏色到文字、再到空間排列的反饋順序是頁面視覺設(shè)計的一部分。顏色變化提供即時確認(rèn)標(biāo)簽提供簡短確認(rèn)尺寸卡片提供詳細(xì)確認(rèn)網(wǎng)格提供結(jié)構(gòu)確認(rèn)。四個層次使用的是同一個選擇位置所以不會出現(xiàn)用戶已經(jīng)看到新按鈕高亮但其他內(nèi)容仍停留在舊檔位的斷裂感。在手機(jī)切換到折疊屏的場景中這個順序尤其容易觀察。手機(jī)按鈕的紫色先消失折疊屏按鈕變紫右上角的手機(jī)改成折疊屏尺寸文字從 360vp · 2.0x 變?yōu)?720vp · 2.5x六張卡片重新分成兩行三列。頁面沒有彈窗或加載動畫所有反饋都屬于當(dāng)前布局的即時變化。如果從平板返回手機(jī)變化順序相反平板按鈕失去高亮手機(jī)重新獲得高亮尺寸卡片回到手機(jī)文案六張卡片從三列恢復(fù)為兩列并增加一行。底部提示仍然保持同一句話因為它只是固定說明不參與設(shè)備檔位的變化。這個固定部分和動態(tài)部分同時存在使頁面既有穩(wěn)定的閱讀錨點也有清楚的切換反饋。頁面中保持不變的部分同樣重要適配演示不能只觀察變化也要注意哪些內(nèi)容沒有變化。標(biāo)題“多設(shè)備屏幕適配”始終保持不變副標(biāo)題也始終保持不變中心卡片的標(biāo)題“當(dāng)前模擬設(shè)備”不變六個入口的名稱和符號不變底部提示不變。變化被限制在設(shè)備標(biāo)簽、選項樣式、尺寸文字、說明文字和列模板這幾類結(jié)果中。這種“固定內(nèi)容 動態(tài)內(nèi)容”的劃分讓頁面結(jié)構(gòu)穩(wěn)定。用戶不論選擇哪一項都能在同樣的位置找到標(biāo)題、設(shè)備信息和入口卡片不需要重新學(xué)習(xí)界面。動態(tài)內(nèi)容只在需要表達(dá)檔位差異的地方出現(xiàn)避免整個頁面因為一個選擇而改頭換面。入口卡片固定還有一個實際作用它讓列數(shù)變化更容易比較。如果每個設(shè)備檔位都使用不同的入口名稱用戶很難判斷變化究竟來自內(nèi)容變化還是布局變化。現(xiàn)在六個入口始終相同觀察者只需要數(shù)每行有幾張卡片就能確認(rèn)兩列和三列的差異。中心卡片的寬度、圓角、內(nèi)邊距和文字層級也保持一致。即使尺寸文字從較短的手機(jī)檔位切換到其他檔位卡片不會換成另一種樣式。這樣可以把注意力集中到文案和列數(shù)而不是卡片裝飾。網(wǎng)格兩列與三列的空間差異六個入口在兩列模式下分成三行。每一行有兩張卡片行與行之間有固定間距因此網(wǎng)格的縱向占用更大。卡片的寬度由頁面可用寬度、左右內(nèi)邊距、兩列間距共同決定每張卡片有較充足的橫向空間四字名稱通常有更好的呼吸感。切換到三列后六個入口變成兩行。每行多放一張卡片網(wǎng)格整體高度減少但每張卡片的可用寬度也相應(yīng)減少。由于名稱和符號都居中卡片即使變窄仍然保持統(tǒng)一的視覺中心。兩種模板沒有改變卡片固定高度區(qū)別主要來自列數(shù)和單元格寬度。從兩列切到三列時底部提示可能向上移動因為網(wǎng)格不再需要第三行。這個位置變化不是底部提示本身的狀態(tài)變化而是上方內(nèi)容高度變化后縱向容器重新分配剩余空間的結(jié)果。理解這一點有助于區(qū)分“某組件自己改變了位置”和“前面內(nèi)容高度變化帶來的整體布局變化”。頁面沒有設(shè)置滾動列表也沒有為六個入口添加懶加載。六項固定內(nèi)容全部參與當(dāng)前頁面的布局?jǐn)?shù)量很小不需要把它當(dāng)成大數(shù)據(jù)列表處理。這里的網(wǎng)格更接近一個靜態(tài)入口展示區(qū)主要用于觀察列模板而不是演示復(fù)雜的數(shù)據(jù)加載能力。這個演示對實際頁面設(shè)計的提醒如果一個頁面需要支持多個窗口檔位首先要確定哪些變化必須跟隨窗口變化哪些內(nèi)容可以保持穩(wěn)定。當(dāng)前頁面把設(shè)備名稱、尺寸說明和網(wǎng)格列數(shù)作為可觀察變化把入口名稱、圖標(biāo)和卡片高度保持穩(wěn)定這種取舍讓示例足夠簡單。真實頁面也可以沿用這個思路先固定信息結(jié)構(gòu)再逐步加入必要的自適應(yīng)規(guī)則。其次描述文字與實際布局必須一致。當(dāng)前頁面的說明分支包含“4 列”和“6 列”等概念化文字但實際網(wǎng)格只有兩列和三列。閱讀或使用這類頁面時要把可見結(jié)果作為判斷依據(jù)。如果要把頁面用于正式產(chǎn)品說明文字也應(yīng)當(dāng)改成與實際模板一致避免用戶根據(jù)文字期待不存在的列數(shù)。再次設(shè)備名稱不等于窗口輸入。名稱適合用于演示、教學(xué)或手動預(yù)覽真實產(chǎn)品則需要從窗口和設(shè)備環(huán)境獲得輸入。兩者的關(guān)系可以在概念上對應(yīng)但不能把手動選擇產(chǎn)生的結(jié)果稱為系統(tǒng)自動適配。把這條邊界寫清楚才能避免演示頁面被誤解為完整平臺能力。最后交互反饋需要覆蓋用戶能看到的結(jié)果。當(dāng)前頁面讓選中項顏色、標(biāo)題標(biāo)簽、尺寸卡片和網(wǎng)格同時響應(yīng)用戶不需要猜測點擊是否生效。將來即使加入真實窗口監(jiān)聽也應(yīng)保留類似的可見反饋讓用戶知道布局為何發(fā)生變化以及當(dāng)前頁面采用了哪一種排列方式。