[前端好文翻譯]新技術(shù)：組件驅(qū)動世界中的網(wǎng)頁設(shè)計

時間：2023-09-27 06:12:02 | 來源：網(wǎng)站運營

時間：2023-09-27 06:12:02 來源：網(wǎng)站運營

[前端好文翻譯]新技術(shù)：組件驅(qū)動世界中的網(wǎng)頁設(shè)計：原文鏈接：The new responsive: Web design in a component-driven world

以下為全文翻譯和筆者思索：

---

今日的響應(yīng)式設(shè)計

今天，當(dāng)使用術(shù)語”響應(yīng)式設(shè)計”時，你很可能考慮的方案是在利用媒體查絢在手機、平板和桌面布局進行切換。

但很快，這種響應(yīng)式設(shè)計布局的概念會和（古老的）表格式布局一樣過時了。

基于視口的媒體查詢給了你一些強大的工具能力，但也相對喪失了技巧。這樣做缺乏響應(yīng)用戶需求的能力，也缺乏將響應(yīng)式的樣式注入組件本身的能力。

在本文中提到組件時，指代的是元素，包括由其他元素組成的元素，如卡片或側(cè)邊欄。這些組件組成了我們的網(wǎng)頁

你可以使用全局的視口信息來設(shè)置組件的樣式，但組件仍然不擁有自己的樣式，而且當(dāng)我們的設(shè)計系統(tǒng)基于組件而不是基于頁面時，這就行不通了。

好消息是，生態(tài)系統(tǒng)正在改變，而且進步非常迅速。CSS正在發(fā)展中，一個新的響應(yīng)式設(shè)計時代即將到來。

我們大約每10年就會看到這種情況發(fā)生一次。10年前，大約在2010-2012年，我們看到了移動和響應(yīng)式設(shè)計的巨大變化，以及CSS3的出現(xiàn)。






來源：Web Design Museum

因此，生態(tài)又一次為CSS的一些重大變化做好了準(zhǔn)備。Chrome和跨web平臺的工程師們正在為下一個響應(yīng)式設(shè)計時代進行原型設(shè)計、規(guī)范設(shè)計并且開始著手實現(xiàn)。

這些更新包括基于用戶偏好的媒體功能、容器查詢以及新屏幕類型（如可折疊屏幕）的媒體查詢。

基于用戶的響應(yīng)式

新的用戶偏好媒體功能，能夠讓你根據(jù)用戶自身的特定偏好和需求來設(shè)計web體驗。這意味著首選媒體功能允許你根據(jù)用戶的經(jīng)驗來調(diào)整用戶體驗

這些用戶媒體偏好功能包括：

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• And more

偏好選項功能會獲取用戶在其操作系統(tǒng)中的偏好設(shè)置，幫助構(gòu)建更加健壯和個性化的web體驗，特別是對于那些具有可訪問性需求的用戶。

prefers-reduced-motion

用戶在操作系統(tǒng)中設(shè)置了偏好減弱動態(tài)效果(reduced motion)，意在總體使用電腦時只需較少的動畫效果。因此，這些人在瀏覽網(wǎng)頁中很可能不會欣賞華麗的介紹屏幕、卡片旋轉(zhuǎn)動畫、復(fù)雜的加載提示或者其他浮夸的動畫效果。

使用prefers-reduced-motion你可以在設(shè)計頁面時考慮減少動態(tài)效果，同時也為哪些并未開啟此項偏好的用戶創(chuàng)造增強的動畫體驗。

演示視頻

上述視頻鏈接中的例子卡片在正反面都有信息。在基礎(chǔ)的動態(tài)減弱體驗下是一個交叉淡入的顯示，而動態(tài)增強下的體驗是進行一個卡片翻轉(zhuǎn)。

動態(tài)減弱并不意外著“沒有動態(tài)”，因為動態(tài)在網(wǎng)頁中的傳達信息起到了至關(guān)重要的作用。相反，你應(yīng)該使用一個堅實的、去除非必須的動效基礎(chǔ)體驗去引導(dǎo)這些用戶，同時逐步增強沒有此項偏好設(shè)置的其他用戶的體驗。

prefers-color-scheme

另一個偏好媒體設(shè)置是偏好配色方案。這個功能幫助你根據(jù)用戶喜好定制個性化的主題UI。無論是在他們的臺式機還是移動設(shè)備上，用戶都可以設(shè)置淺色、深色或隨一天的時間變化的自動切換主題。

如果在你的頁面使用了css自定義變量，那么切換顏色值會變得相當(dāng)簡便。你可以快速的更新主題顏色值，例如backgroundColor和textOnPrimary，以便在媒體查詢中動態(tài)適配新主題。

演示視頻

為了更方便的測試這些偏好值，你可以使用開發(fā)者工具去模擬，而不是每次都打開系統(tǒng)首選項進行更改。

演示視頻

適配深色主題

當(dāng)為深色主題設(shè)計時，不僅僅是反轉(zhuǎn)背景、文本顏色或深色滾動條。還有一些細節(jié)你可能沒有意識到。例如，你可能需要降低深色背景上的顏色飽和度，以減少視覺抖動。







不同于利用陰影創(chuàng)造深度并將元素突出，你可能需要在元素背景色使用一些燈光來讓其前置。這是因為陰影深設(shè)色背景下不會那么有效。

演示視頻

Material design在深色主題的設(shè)計上有指導(dǎo)意義

深色主題不僅僅提供了個性化的用戶體驗，并且還可以顯著的提供AMOLED屏幕的電池壽命（ps：筆者對這方面存疑，有相關(guān)數(shù)據(jù)支持么？例如全天候使用深色主題能在延長多久電池的壽命）。這些屏幕通常用在較新的高端手機上，并且在移動設(shè)備之中越來越流行。







一項2018年安卓對于深色主題的研究顯示，根據(jù)屏幕亮度和整體用戶界面的不同，耗電量最多可以節(jié)省60%。這60%的統(tǒng)計數(shù)據(jù)來源是，分別使用使用暗主題和亮色主題，比較在100%屏幕亮度下的Youtube暫停視頻頁面的耗電量。

你應(yīng)該盡可能的為你的用戶提供一個深色主題體驗。

基于容器的響應(yīng)式

CSS中最令人興奮的新領(lǐng)域之一便是容器查詢，也被稱為元素查詢。
很難低估從從基于頁面的響應(yīng)式設(shè)計到基于容器的響應(yīng)式設(shè)計的轉(zhuǎn)變，對設(shè)計生態(tài)系統(tǒng)的發(fā)展起到什么作用。

下面是容器查詢提供的強大功能的一個示例。你可以操縱卡片元素的任何樣式，包括鏈接列表、字體大小和基于其父容器的總體布局：

演示視頻

這個例子展示了兩個具有兩個不同容器大小的相同組件，它們都使用了CSS Grid布局中的空間。每個組件都適配了其獨特的空間分配，并相應(yīng)地調(diào)整自己的樣式。

這種靈活性單憑媒體查詢是無法實現(xiàn)的。

容器查詢?yōu)轫憫?yīng)式設(shè)計提供了一種更加動態(tài)的方法。這意味著，如果你將此卡片組件放在側(cè)邊欄或英雄視圖部分中，或者放在頁面主體內(nèi)部的grid中，則該組件本身根據(jù)容器而不是視口進行響應(yīng)式的信息展示。

這需要@container規(guī)則，其工作方式與使用@media的媒體查詢類似，但相反，@container查詢父容器以獲取信息，而不是視口和瀏覽器的UserAgent。

.card { // 筆者注：contain屬性可以聲明當(dāng)前元素和它的內(nèi)容獨立于 DOM 樹的其他部分 // size: 表示這個元素的尺寸計算不依賴于它的子孫元素的尺寸 // layout: 表示元素外部無法影響元素內(nèi)部的布局，反之亦然 contain: size layout;}@container (max-width: 850px) { .links { display: none; } .time { font-size: 1.25rem; } /* ... */}首先，在父元素上進行contain限制（ps：contain屬性解釋）。然后，編寫一個@container查詢，使用minwidth或max width，根據(jù)容器的大小設(shè)置容器中任意元素的樣式。

上面的代碼使用了max width，在容器寬度小于850px時，將鏈接設(shè)置為display:none，并減小了時間字體的大小。

容器查詢卡片

在這個植物演示網(wǎng)站中，每個產(chǎn)品卡片，包括激活的卡片、最近查看項目的側(cè)邊欄和產(chǎn)品網(wǎng)格，都是完全相同的組件，具有相同的標(biāo)記。

視頻演示

這里沒有基于整個布局的媒體查詢，只有容器查詢。這允許每個產(chǎn)品卡轉(zhuǎn)換到適當(dāng)?shù)牟季忠蕴畛淦淇臻g。例如，在Grid中使用minmax列布局讓元素流入它們的空間，并在空間過于壓縮時重新布局網(wǎng)格（這意味著它達到了最小限制）。

.product { contain: layout inline-size;}@container (min-width: 350px) { .card-container { padding: 0.5rem 0 0; display: flex; } .card-container button { /* ... */ }}當(dāng)網(wǎng)格中至少有350px的空間時，通過設(shè)置display:flex（默認(rèn)的flex方向為“row”）讓卡片布局保持水平。

當(dāng)空間越小，產(chǎn)品卡片就越堆疊。每個產(chǎn)品卡片都有自己的風(fēng)格，單憑整體樣式風(fēng)格是無法實現(xiàn)的。

混合使用容器查詢和媒體查詢

容器查詢有很多用例，其中一個是日歷組件。你可以使用容器查詢，根據(jù)日歷事件和其他片段的父組件可用寬度進行布局重新排布。

視頻演示

此個演示中，容器查詢更改了日歷日期和星期幾的布局和樣式，以及調(diào)整計劃事件的邊距和字體大小，以幫助它們更好地適應(yīng)空間。

然后，使用媒體查詢讓整個布局適配較小的屏幕尺寸。此示例展示了將媒體查詢（調(diào)整全局或宏樣式）與容器查詢（調(diào)整容器的子元素及其微樣式）結(jié)合在一起的強大功能。

所以現(xiàn)在我們可以思考在同一個UI組件中的宏和微布局，以實現(xiàn)一些細致入微的設(shè)計決策。

今日使用容器查詢

這些演示現(xiàn)在可以在Chrome手動開啟實驗性功能去體驗。在瀏覽器中輸入about://flags并打開#enable container querys標(biāo)志。這將支持contain屬性，以及@container、inline size和block size值以及布局網(wǎng)格實現(xiàn)。

作用域樣式

為了完善容器查詢，CSS工作組還在積極討論作用域樣式，以幫助為組件提供適當(dāng)?shù)拿臻g來避免沖突。







作用域樣式允許傳遞和特定于組件的樣式，以避免命名沖突，許多框架和插件（如CSS模塊）已經(jīng)允許我們在框架內(nèi)這樣做。這個規(guī)范現(xiàn)在允許我們用可讀的CSS為組件編寫本機封裝的樣式，而無需調(diào)整標(biāo)記。

/* @scope (<root>#) [to (<boundary>#)]? { … } */@scope (.tabs) to (.panel) { :scope { /* targeting the scope root */ } .light-theme :scope .tab { /* contextual styles */ }}作用域允許我們創(chuàng)建“油炸圈餅形”選擇器，在這里我們可以指定在何處封裝樣式，以及在何處突破作用域限制以使用全局樣式。

一個例子是選項卡面板，我們希望選項卡獲得范圍樣式，選項卡中的面板獲得父樣式。

基于尺寸外型的響應(yīng)式

在響應(yīng)式設(shè)計的新時代，要討論的下一個話題是尺寸外型的轉(zhuǎn)變，以及作為一個網(wǎng)絡(luò)社區(qū)，我們需要為之進行設(shè)計的可能性越來越大（比如變形屏幕或虛擬現(xiàn)實）。




可折疊或靈活的屏幕，為這種屏幕跨度的設(shè)計是今天一個我們可以看到形式變化的例子。而屏幕延伸是另一個正在研究的規(guī)范，以涵蓋這些新的尺寸和需求。

一個實驗性的跨屏媒體查詢可以幫助我們。它當(dāng)前的行為如下：@media（跨度：<type of fold>）。演示設(shè)置了一個包含兩列的網(wǎng)格布局：一列的寬度為—sidebar width，默認(rèn)情況下為5rem，另一列為1fr。當(dāng)在具有單個垂直折疊的雙屏幕上查看布局時，—sidebar width的值將用左折疊的環(huán)境值更新。

:root { --sidebar-width: 5rem;}@media (spanning: single-fold-vertical) { --sidebar-width: env(fold-left);}main { display: grid; grid-template-columns: var(--sidebar-width) 1fr;}這將啟用一個布局，其中側(cè)邊欄（本例中的導(dǎo)航）將填充其中一個折疊的空間，而app UI將填充另一個折疊空間。這可以防止UI中出現(xiàn)“折痕”。

視頻演示

你可以在chrome的devtools模擬器中測試可折疊屏幕，來直接的調(diào)試可延展屏幕在瀏覽器中的顯示。

總結(jié)

探索平面屏幕之外的UI設(shè)計是容器查詢和樣式作用域如此重要的另一個原因。它們使您有機會從頁面布局、全局樣式和用戶樣式中孤立組件樣式，從而實現(xiàn)更具彈性的響應(yīng)設(shè)計。這意味著您現(xiàn)在可以使用基于頁面的媒體查詢設(shè)計宏布局，包括跨屏幕的細微差別。同時在組件上使用帶有容器查詢的微布局，并添加基于用戶偏好的媒體查詢，來實現(xiàn)基于用戶的獨特偏好和需求的定制化體驗。







這就是新的響應(yīng)式。

它結(jié)合了宏布局和微布局，最重要的是，也將用戶定制化和尺寸外型都考慮其中。

這些變化中的任何一個都將構(gòu)成我們對web設(shè)計方式的重大轉(zhuǎn)變。但它們結(jié)合在一起，意味著我們甚至在概念化響應(yīng)性設(shè)計方面的一個巨大轉(zhuǎn)變。是時候思考不止步于視口大小的響應(yīng)性設(shè)計了，并開始考慮所有這些新方向，來獲得更好的基于組件和定制化的體驗。

響應(yīng)式設(shè)計的下一個時代已經(jīng)到來，你已經(jīng)可以自己開始探索了。

web.dev/learnCSS （原作者廣告）

現(xiàn)在，如果你想提升你的CSS技能，或者重溫一些基礎(chǔ)知識，我的團隊將在web.dev上推出一個全新的、完全免費的CSS課程和參考資料。你可以通過web.dev/learnCSS訪問它。

我希望你喜歡這篇關(guān)于下一個響應(yīng)式設(shè)計時代的概述，以及隨之而來的一些概念，希望這些對未來web設(shè)計的意義讓你和我一樣感到興奮。

---

筆者小記

本篇文章的作者從設(shè)計角度出發(fā)闡述了最前沿的響應(yīng)式概念。這些嶄新的概念、標(biāo)準(zhǔn)的提出和演示demo都令人眼前一亮。

遙想當(dāng)年響應(yīng)式bootstrap框架在2012年橫空出世，重構(gòu)了人們對瀏覽器網(wǎng)頁的布局想象。時至今日，這個經(jīng)典的css框架依然不為過時，里面嚴(yán)謹(jǐn)?shù)臉邮骄帉懞蛯哟谓Y(jié)構(gòu)都是值得細讀學(xué)習(xí)的?，F(xiàn)如今。伴隨著硬件的快速發(fā)展，w3c規(guī)范的標(biāo)準(zhǔn)也朝著歸一的方向穩(wěn)步發(fā)展進步著。更為寬廣的前端領(lǐng)域正在一步步走向每個用戶和開發(fā)者。

作者從多個方向指出的響應(yīng)式理念都是很有前瞻性的。無論是基于用戶個性化定制，抑或是以容器響應(yīng)式進行的微布局理念，都是css標(biāo)準(zhǔn)團隊掃清了障礙，給了開發(fā)者和設(shè)計師們一個大展拳腳的空間。

css作為前端三劍客之一，也陪前端coder度過了相當(dāng)長的歲月。對于這個語言，想必大家也是愛恨交加吧。在Javascript和Typescript快速發(fā)展的同時，css的學(xué)習(xí)相對就顯得占比不足了。對于這門語言，想入門確實簡單。隨便從w3c網(wǎng)站看個1個小時就能寫出一些正常的布局。但是在面試過程之中，誰又有十足的把握說自己精通css呢？但成為一個合格的前端工程師，即離用戶最近的開發(fā)人員，對這門語言的深入學(xué)習(xí)依然是邁不開的一道門檻。

誠然，在互聯(lián)網(wǎng)快速發(fā)展的今天，大多數(shù)公司的實際需求場景依然是業(yè)務(wù)驅(qū)動為主?？赡芙^大多數(shù)項目迭代甚至都不涉及響應(yīng)式布局的考量，至多也就是用rem進行一個簡單的顯示適配。也許設(shè)計師并未站在開發(fā)的同一角度，或者是產(chǎn)品并不關(guān)心這方面的內(nèi)容。但我們不應(yīng)停止這方便的思索，積極的溝通和交流，將w3c的規(guī)范和caniuse兼容的標(biāo)準(zhǔn)吸納并延伸至需求討論和交互設(shè)計中去。

畢竟，用自己的才智和代碼實現(xiàn)一個健全又生動的網(wǎng)頁應(yīng)用才是最終的目標(biāo)啊。