建築設計

一窺 Designcember 的節日日曆體驗建構過程和工具。

在 12 月這個充滿節慶氣氛的日子,許多人會使用日曆倒數迎接節日,我們也想藉此機會,向大家推薦社群和 Chrome 團隊製作的網路內容。我們每天會精選一篇與 UI 開發和設計相關的內容,總共精選 31 篇文章,其中包括 26 個新的示範網站、工具、公告、Podcast、影片、文章和案例研究。

如要查看完整體驗,請前往 designcember.com

Designcember 網站。

總覽

我們的目標是盡可能以最少的位元組,提供易於存取、新穎、現代且回應迅速的網頁體驗。我們想強調新的響應式 API,例如容器查詢,並在以設計為重點且資源繁多的網站中,加入美觀的深色模式範例。為達成這項目標,我們壓縮檔案、提供多種格式、使用針對靜態網站產生作業最佳化的建構工具,以及發布新的 polyfill 等。

從奇思異想開始

我們希望 Designcember 月曆網站能展示 12 月所有想推廣的作品,同時也能做為示範網站。我們決定建構回應式公寓大樓,讓建築物可以變得更高、更窄,或更短、更寬,並讓窗戶在框架內自動重新排列。每個回溯期代表一天 (也就是一則內容)。我們與插畫家 Alice Lee 合作,將我們的願景付諸實現。

Designcember 頁面架構的草圖。

Alice 分享了令人振奮的過程和草圖,即使是早期概念也令人興奮。她負責繪製圖片,我們則著手處理架構。早期的討論內容圍繞宏觀版面配置、建築物和建築物的窗戶。隨著可用檢視區空間增加,視窗會如何調整為一、兩或三欄?縮放幅度有多大?建築物的最大尺寸為何?窗口會移轉多少?

以下是使用 grid-auto-flow: dense 的回應式原型設計預覽畫面,說明如何讓格線演算法自動放置視窗。我們很快就發現,雖然顯示比例格線可完美呈現圖片,但無法讓視窗放大或縮小至非均勻的可用空間,也無法展現容器查詢的強大功能。

動畫:顯示此線框如何回應不同螢幕大小。
請前往 CodePen 查看這個示範。

一旦一般格線相對穩定,並傳達建築物和窗戶回應的方向感,我們就可以專注於單一視窗。某些視窗的拉伸、縮小、擠壓、放大和重新組合次數,比格狀中其他視窗還要多。

線框顯示視窗在不同偵錯點的顯示方式。

每個視窗都需要處理一定程度的大小調整波動。下方是窗格原型,可展示其對湍流的回應情形,並顯示每個互動式窗格可調整的幅度。

使用圖像片集的視窗動畫

部分視窗會顯示動畫,為使用者提供額外的互動體驗。動畫是使用 Photoshop 逐格手繪而成。每個影格都會匯出,並透過這個圖像片段產生器轉換成圖像片段,然後再透過 Squoosh 進行最佳化。接著,CSS 動畫會使用 background-position-xanimation-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 製作可調整大小、形狀獨特且可自訂的視窗。

如要建立遮罩 (例如這個用於窗口 8 的遮罩),您需要具備一些經典的 Photoshop 技能,以及一些關於遮罩在網路上運作方式的知識。我們來看一下第八天的回溯期。

第八天的窗口。

如要製作遮罩,內部的四葉草形狀圖案必須獨立為單一圖案,並填入白色。白色會告訴 CSS 保留哪些內容,而白色區域以外的所有內容都會遭到移除。在 Photoshop 中,選取視窗內部,羽化 1 像素 (以移除取樣問題),然後填滿白色,並以與視窗邊框相同的高度和寬度匯出。這樣一來,框架和遮罩就能直接重疊,並如預期在框架內顯示內部內容。

四葉草遮罩圖片

完成後,您可以修改視窗內容,且內容一律會顯示在自訂邊框內。下圖顯示深色模式的視窗,其中背景漸層和光線都套用了不同的 CSS 濾鏡。

以深色模式顯示第八天的視窗。

遮蓋功能也支援以容器查詢為基礎的回應式視窗。在第九個視窗中,有一個角色會在視窗縮小到一定大小前隱藏在面具後方。為了確保使用者無法調整圖像,讓圖像超出畫面範圍,Alice 為我們完成了完整的角色。角色在視窗中會加上遮罩,但植物不會,因此我們還要處理另一個挑戰,就是將遮罩元素與未遮罩的圖層重疊,並確保兩者都能順利縮放。

下圖顯示未在視窗和角色上套用遮罩的效果。

沒有遮罩的九號視窗圖片。

壓縮圖片

為了維持插圖的真實度,並確保高解析度螢幕不會提供模糊的使用者體驗,Alice 採用 3 倍的像素比例。我們原本打算使用 imgix,並在伺服器上提供經過最佳化的圖片和格式,但發現使用 Squoosh 工具手動調整後,可節省 50% 以上的空間。

使用 Squoosh 壓縮圖片。

插圖在壓縮時會遇到特殊的挑戰,尤其是 Alice 使用的筆觸和透明粗邊風格。我們選擇將每張 Photoshop 匯出的 3x 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" />

螢幕閱讀器和鍵盤使用者

大部分的 Designcember 體驗都是透過藝術和互動式視窗進行。我們希望鍵盤使用者能夠使用網站並查看視窗,而螢幕閱讀器使用者也能享有良好的語音導覽體驗。

舉例來說,在嵌入圖片時,我們使用 role="presentation" 將圖片標示為螢幕閱讀器的呈現內容。我們認為,如果使用者體驗是 5 到 12 個斷裂的 alt 說明,使用者體驗將會不佳。因此,我們將圖片標示為呈現用,並提供整體視窗旁白。在螢幕閱讀器上瀏覽視窗時,使用者會感受到優美的敘述感,我們希望這能傳達網站想要分享的奇幻和樂趣。

以下影片展示鍵盤體驗。Tab、Enter、空格鍵和 Esc 鍵都是用來協調焦點,從視窗彈出式視窗和視窗中移出。

螢幕閱讀器體驗具有特殊的 ARIA 屬性,可讓內容更清楚。舉例來說,日期的連結只會顯示「一」或「二」,但在加入 ARIA 後,系統會將其讀出為「Day one」和「Day two」。此外,所有圖片都會在單一標籤中彙整,因此每個視窗都有說明。

Astro:以靜態為優先的元件驅動型網站產生器

Astro 讓團隊成員可以輕鬆在網站上協同合作。元件模型對 Angular 和 React 開發人員來說都很熟悉,而範圍限定的類別名稱樣式系統則可協助每位開發人員瞭解,他們在視窗上的工作不會與其他人發生衝突。

以天數做為元件

每個日子都是元件,可從建構時間資料儲存庫擷取狀態。這樣一來,我們就能在 HTML 傳送至瀏覽器前執行範本邏輯。邏輯會判斷該天是否應顯示工具提示,因為未使用天的彈出式視窗不會顯示。

系統會每小時執行一次建構作業,而建構時間資料儲存庫會在午夜過後的隔天解鎖。這些可自行更新且自給自足的小系統可讓網站保持最新狀態。

範圍樣式和 Open Props

Astro 會將在元件模型中編寫的樣式設定為範圍,這麼做可讓您更輕鬆地將工作負載分配給許多團隊成員,也能讓您盡情使用 Open PropsOpen Props normalize.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);
  }
}

我們也使用容器查詢來顯示和隱藏細節,因為在較小的尺寸下,圖片會變得越來越擁擠,在較大的尺寸下則會變得越來越空白。以下是九宮格中這項功能的實例:

跨瀏覽器支援

如要打造出色的現代跨瀏覽器體驗,尤其是針對容器查詢等實驗性 API,我們需要優質的 polyfill。我們向團隊發出呼叫,Surma 則負責為新的容器查詢 polyfill 進行建構。polyfill 會依賴 ResizeObserverMutationObserver 和 CSS :is() 函式。因此,所有新式瀏覽器都支援 polyfill,特別是 Chrome 和 Edge 的 88 版、Firefox 的 78 版,以及 Safari 的 14 版。使用 polyfill 可允許下列任何語法:

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

深色模式

Designcember 網站的淺色和深色模式版本並排顯示。

最後,Designcember 網站需要採用美觀的深色主題。我們想說明如何運用圖片,讓使用者能積極參與創造出色的深色模式體驗。為此,我們以程式輔助方式調整每個視窗的背景樣式,並在建立視窗圖片時盡可能使用 CSS。大部分的背景都是 CSS 漸層,因此更容易調整顏色值。然後將圖片疊加在這些圖片上。

其他彩蛋

個人化服務

我們在頁面中加入了一些個人風格,讓網站更具個人特色。第一個是角色陣容,靈感來自我們的團隊。我們也為閒置期間加入復古風格的游標,並嘗試使用 favicon 樣式。

自訂游標樣式和首頁圖選項

功能性觸控

其中一個額外的功能是「跳轉至今天」功能,其中有一個鳥在建築物頂端。按一下或按下 Enter 鍵,即可跳到當月的當天,快速查看最新發布內容。

Designcember.com 也提供特殊的列印樣式表,我們會提供最適合 8.5 英寸 x 11 英寸紙張的特定圖片,讓您自行列印月曆,一整年都能感受節慶氣氛。

日曆設計的海報大小列印檔案。
Una 手持大型月曆相片。

總而言之,我們投入大量心力,打造有趣、新穎的現代網頁體驗,以慶祝 12 月 UI 開發活動。希望你喜歡!

含有註解和視覺筆記的日曆部分