建築設計

一窺設計工程團隊的節慶時段和工具的使用流程和工具。

Adam Argyle

Una Kravets

基於 12 月的精神，以及人們會利用許多日曆來倒數計時與慶祝，我們想特別介紹社群和 Chrome 團隊的網頁內容。我們每天精選出一項 UI 開發和設計相關內容，總共有 31 則重點，包括 26 個新的示範網站、工具、公告、Podcast、影片、文章和個案研究。

如要查看完整體驗內容，請前往 designcember.com。

總覽

我們的目標是盡可能以最少的位元組，打造出方便好用、新穎的現代化網頁體驗。我們想強調容器查詢等新的回應式 API，並在著重設計和大量素材資源的網站中，加入深色模式的精美範例。為此，我們壓縮了檔案 (提供多種格式)、針對靜態網站產生最佳化的建構工具、推出新的 polyfill 等工具。

以逗趣的開場白

設計工地日曆網站的設計理念是在 12 月一整個月內，展示我們想要主打的所有作品，同時也扮演示範網站本身。我們決定打造更寬、更窄、更窄和更寬的回應式公寓，並利用窗戶在畫面中重新安排。每個時段代表一天 (因此也代表某項內容)。 我們與插畫家 Alice Lee 合作，將我們的願景化為現實。

Alice 不僅鼓舞人心，分享過程和素描相當令人期待，甚至在概念上也是如此。在她寫出的藝術創作期間，就入侵了該建築。早期討論範圍涵蓋了宏觀版面配置、建築物及其窗戶。隨著可視區域空間變多，視窗會如何調整成 1、2 或 3 欄？他們可以縮小或伸展多遠？建築物的最大尺寸為何？窗戶會移動多少？

以下是使用 grid-auto-flow: dense 的回應式原型預覽，顯示格線演算法如何自動放置視窗。我們迅速發現，雖然長寬比網格的格狀空間在展示藝術品時相當美觀，卻無法讓窗戶擴大和縮小成不統一的可用空間，也展現了容器查詢的力量。

當一般網格相對穩定，傳達出對建築物及其窗戶反應的方向感後，我們就可以專注於單一視窗。有些窗戶會拉長、拉動、擠壓、變長和重組，比網格內的其他窗戶還要新。

每個視窗都需要處理一定大小的大小擾動。下方是視窗的原型，展示視窗對動盪的反應，顯示我們預期每個互動視窗可調整的程度。

含有 Sprite 工作表的視窗動畫

有些視窗含有動畫，可以增添額外的互動體驗。在 Photoshop 中，動畫是透過手動繪製的影格畫面。系統會使用這個 Sprite 工作表產生器將每個影格匯出成 Sprite 工作表，然後使用 Squoosh 進行最佳化調整。CSS 動畫接著會使用 background-position-x 和 animation-timing-function，如以下範例所示。

.una
  background: url("/day1/una_sprite.webp") 0% 0%;
  background-size: 400% auto;
}

.day:is(:hover, :focus-within) .una {
  animation: una-wave .5s steps(1) alternate infinite;
}

@keyframes una-wave {
  0%  { background-position-x: 0%; }
  25% { background-position-x: 300%; }
  50% { background-position-x: 200%; }
  75% { background-position-x: 100%; }
}

某些動畫 (例如第六天的小豬銀行) 都是以步驟為基礎的 CSS 動畫。我們使用 steps() 的類似技巧實現了這項效果，差別在於主要畫面格是 CSS 轉換位置，而非背景位置。

CSS 遮罩

某些窗戶的形狀各異，我們利用遮罩和 aspect-ratio 來建立可擴充、獨特形狀且可自動調整的視窗。

建立遮罩 (例如 Windows 8 的遮罩) 需要一些經典 Photoshop 技能，並稍微瞭解 網路遮罩的運作方式我們來看看第八天的回溯期。

如要成為遮罩，內部四個節能綠葉類型形狀必須隔離為自身形狀，並填入白色。白色文字可讓 CSS 知道哪些內容會保留，而白色以外的所有內容都不會保留。在 Photoshop 中，已選取該視窗內部的羽毛 1px (移除鋸齒狀問題)，然後以與視窗外框相同的高度和寬度匯出白色並匯出。這樣一來，頁框和遮罩就能直接疊加於彼此上方，讓畫面內的內部內容如預期顯示。

完成後，視窗內容可以修改，而且一律會出現在自訂畫面中。下圖顯示深色模式版本的視窗，其中背景漸層有不同的背景漸層，並且套用至淺色的 CSS 濾鏡。

遮罩也支援以回應式容器查詢為基礎的視窗。窗戶 9 中有個角色隱藏在遮罩後方，直到視窗放大到更窄的視窗為止。為確保使用者無法自行調整圖片外框，Alice 已經完成了整個字元。角色會遮蓋視窗內，但植物並未呈現，因此我們處理的另一個挑戰，就是以未遮蓋的圖層將遮蓋元素分層，並確保所有元素都能順利縮放。

下圖顯示視窗和字元沒有遮罩的外觀。

揮灑藝術的精神

為了維持插圖的擬真度，並確保高畫質螢幕不會破壞使用者體驗，Alice 的像素比例為 3 倍。該公司計劃使用 imgix，在伺服器上提供最佳化的圖片和格式，但是我們發現使用 Squoosh 工具手動調整項目可以省下 50% 以上的費用。

插圖在壓縮方面存在獨特的挑戰，特別是使用的筆刷和粗糙邊緣風格 Alice。我們選擇將每 3 倍 Photoshop 匯出的 png 圖片壓縮成較小的 png、Webp 和 avif。每種檔案類型各有特殊的壓縮功能，需要壓縮超過 50 張圖片才能找出一些常見的最佳化設定。

Squoosh CLI 是將超過 200 張圖片最佳化的，讓所有圖像都得花上數天才能發揮最佳成效。有常用的最佳化設定後，我們就提供命令列指示，將整個 PNG 圖片資料夾批次處理到 WebP 和 AVIF 壓縮複本中。

以下是使用的範例 AVIF CLI squoosh 指令：

npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png

將最佳化圖片登錄到存放區後，我們就可以從 HTML 開始載入這些圖片：

<picture>
  <source srcset="/day1/inner-frame.avif" type="image/avif">
  <source srcset="/day1/inner-frame.webp" type="image/webp">
  <img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>

編寫圖片原始碼是重複性的，因此我們打造了 Astro 元件，利用一行程式碼嵌入圖片。

<Pic filename="day1/inner-frame" role="presentation" />

螢幕閱讀器和鍵盤使用者

設計高手的大部分體驗是透過藝術和互動窗戶。重要的是，鍵盤使用者能夠造訪網站並迅速開啟視窗，而螢幕閱讀器使用者能夠獲得優質的講述體驗。

舉例來說，我們嵌入圖片時，使用 role="presentation" 將圖片標示為螢幕閱讀器可於螢幕閱讀器顯示。我們認為如果 alt 說明的說明介於 5 到 12 則之間，可能會帶來負面體驗。因此，我們將圖片標示為呈現方式，並提供整體的窗戶旁白。我們希望使用者能以更歡樂的敘事手法，在螢幕閱讀器的畫面上瀏覽視窗。我們希望這些內容能呈現網站想要分享的有趣又好玩。

以下影片展示鍵盤體驗。按下 Tab 鍵、Enter 鍵、空格鍵和 Esc 鍵，可用來協調視窗彈出式視窗和視窗之間的焦點。

螢幕閱讀器體驗具有特殊的 ARIA 屬性，可讓內容更清楚明瞭。舉例來說，當天的連結只會顯示「一」或「2」，但有些新增的 ARIA 會顯示為「第 1 天」和「第 2 天」。此外，所有圖片都會以單一標籤摘要，讓每個視窗都有說明。

Astro, Static 優先, 由元件驅動的網站產生器

Astro 讓團隊在 YouTube 上輕鬆合作。Angular 和 React 開發人員都很熟悉該元件模型，而限定範圍的類別名稱樣式系統則幫助每位開發人員知道他們在視窗中的工作，不會與其他人發生衝突。

以元件形式的天數

每天都是從建構時間資料儲存庫擷取狀態的元件。這樣一來，我們就能在 HTML 載入瀏覽器前執行範本邏輯。由於無效天數不會彈出彈出式視窗，因此邏輯會決定日期是否應顯示工具提示。

建構作業每小時執行一次，而建構時間資料儲存庫會在建構伺服器超過午夜時開闢新的一天。這些自行更新的小型系統可讓網站保持最新狀態。

限定範圍樣式與開放道具

星座範圍樣式在元件模型中編寫，不但讓許多團隊成員可以更輕鬆地分配工作負載，還能使用開放式道具來發揮創意。「Open PropsNormalize.css」樣式與自動調整 (淺色和深色) 主題相輔相成，並能協助繪製段落和標題等內容。

身為 Astro 的早期採用者，我們透過 PostCSS 遇到了一些小問題。舉例來說，由於建構問題過多，我們無法更新至最新 Astro 版本。在此，系統可能需要投入更多時間，針對建構和開發人員工作流程進行最佳化調整。

彈性的容器

有些窗戶也會隨著成長與縮小，維持長寬比以便保留藝術品。我們利用其他一些視窗展示容器查詢的元件型架構的強大功能。容器查詢意味著視窗可擁有其個別的回應式樣式資訊，並根據自己的大小重新調整。有些視窗的內容是從大範圍縮小到寬大，因此需要調整當中媒體的大小以及媒體的位置。

隨著視窗的可用空間增加，我們可以調整視窗的大小或子項元素。結果證明，為了執行自動調整視窗，容器查詢不只是呈現有趣內容，而是必須大幅簡化某些版面配置的自動化調度管理作業。

.day {
  container: inline-size;
}

.day > .pane {
  min-block-size: 250px;

  @container (min-width: 220px) {
    min-block-size: 300px;
  }

  @container (min-width: 260px) {
    min-block-size: 310px;
  }

  @container (min-width: 360px) {
    min-block-size: 450px;
  }
}

這個方法與維持顯示比例不同。可讓你擁有更多掌控權和更多商機。無論應用程式的大小為何，許多子項都會移動以適應新的版面配置。

容器查詢也讓我們支援區塊方向 (垂直) 隔離，因此當視窗越長，我們就能配合需求調整樣式。這在以高度為基礎的查詢中會顯示，不僅我們獨立，而且還有以寬度為基礎的查詢：

.person {
  place-self: flex-end;
  margin-block: 25% 50%;
  margin-inline-start: -15%;
  z-index: var(--layer-1);

  @container (max-height: 350px) and (max-width: 425px) {
    place-self: center flex-end;
    inline-size: 50%;
    inset-block-end: -15%;
    margin-block-start: -2%;
    margin-block-end: -25%;
    z-index: var(--layer-2);
  }
}

此外，當藝術品因尺寸較小而越來越擁擠，我們也利用容器查詢功能呈現及隱藏細節。視窗 9 就是一個很好的例子：

跨瀏覽器支援

如要打造出色的現代化跨瀏覽器體驗，特別是容器查詢等實驗性 API，我們需要完善的 polyfill。我們已將呼叫傳送給我們的團隊，Surma 打算為新的容器查詢 polyfill 發起建構作業。polyfill 依賴 ResizeObserver、MutationObserver 和 CSS :is() 函式。因此，所有新式瀏覽器皆支援 polyfill，特別是 Chrome 和 Edgefrom 88 版、Firefox 78 以上版本的 Firefox 以及 14 以上版本的 Safari。使用 polyfill 時，您就能使用下列任一語法：

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

深色模式

而 Designcember 網站其中一項必備的特色就在於精美的深色主題。為了展現您如何積極參與藝術，打造絕佳的深色模式體驗。為此，我們透過程式輔助方式調整每個視窗的背景樣式，並在製作視窗圖片時，盡可能使用必要的 CSS。大多數的背景都是 CSS 漸層，因此更方便調整顏色值。接著，我們將圖片疊放在這些圖片上。

其他彩蛋

個人風格

我們為網頁增添了幾項個人風格，讓網站更具個人特色。第一批角色是我們團隊的靈感來源，我們還在未活動日期加入懷舊風格的遊標，並融入網站小圖示的樣式。

功能觸控

此外，「跳到今天」功能還有一項額外的功能，就是位於建築物頂端的小鳥。只要在這隻小鳥上點擊或按下 Enter 鍵，即可在網頁上往下捲動至當月的當天，讓您快速取得最新發行的成果。

Designcember.com 也有一個特殊的印刷樣式表，你可以在這裡使用最適合 8.5 x 11 英寸紙的圖片，以便自行列印出行事曆，陪你度過一整年的歡樂時光。

總而言之，我們在 12 月投入了大量心力，打造新奇有趣的新式網頁體驗，慶祝使用者介面開發作業一整個月來臨。希望您會喜歡！