建築設計

一窺 Designcember 打造您在節慶日曆體驗中的體驗和工具。

正因為 12 月的精神,再加上眾多大眾會用掉倒數計時與慶祝的日曆,我們希望讓社群和 Chrome 團隊能夠突顯網路內容。我們每天會重點介紹 UI 開發和設計相關內容的部分內容,並精選 31 項重點內容,包括 26 個全新示範網站、工具、公告、Podcast、影片、文章和個案研究。

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

Designcember 網站。

總覽

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

從奇思異想開始

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

Designcember 頁面架構的草圖。

Alice 分享了令人振奮的過程和草圖,即使是早期概念也令人興奮。她在設計藝術期間,駭客入侵了建築。早期的討論內容圍繞宏觀版面配置、建築物和建築物的窗戶。隨著可用檢視區空間增加,視窗會如何調整為一、兩或三欄?縮放幅度有多大?建築物的最大尺寸為何?窗戶的移動幅度有多大?

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

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

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

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

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

使用圖像片集的視窗動畫

部分視窗會顯示動畫,為使用者提供額外的互動體驗。動畫是使用 Photoshop 逐格手繪而成。每個影格都會經過匯出,利用這個 Spritesheet 產生器轉換成 Sprite 工作表,再使用 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 採用 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 說明,使用者體驗將會不佳。因此,我們將圖片標示為簡報,並提供整體的視窗說明。在螢幕閱讀器上瀏覽視窗時,使用者會感受到優美的敘述體驗,我們希望這能傳達網站想要分享的奇幻和樂趣。

以下影片展示鍵盤體驗。分頁鍵、Enter 鍵、空格鍵和 Esc 鍵,都是用來協調焦點在視窗彈出式視窗和視窗之間的移動。

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

天文系統,以元件為核心的靜態網站產生器

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

以天數做為元件

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

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

限定樣式與開放式問題

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

我們也使用容器查詢來顯示和隱藏細節,因為在較小的尺寸下,圖片會越來越擁擠,在較大的尺寸下則會越來越空白。《Window 9》就是精彩絕倫的例子:

跨瀏覽器支援

如要打造出色的現代跨瀏覽器體驗,尤其是針對容器查詢等實驗性 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 網站的淺色和深色模式版本並排顯示。

設計森網站最後有一次的重要接觸,但這是一款賞心悅目的深色主題。我們想說明如何運用圖片,讓使用者能積極參與打造出色的深色模式體驗。為此,我們以程式輔助方式調整每個視窗的背景樣式,並在建立視窗圖片時盡可能使用 CSS。大多數的背景都是 CSS 漸層,方便您調整顏色值。然後將圖片疊加在這些圖片上。

其他彩蛋

個人風格

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

自訂遊標樣式與網站小圖示選項

功能性觸控

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

Designcember.com 也提供了特殊的列印樣式表,我們基本上就是提供 8.5 x 11 吋的紙上效果最佳的特定圖片,方便您自行印出行事曆,並度過一整年的節慶購物季。

日曆設計的海報大小列印檔案。
取消拿著大尺寸日曆。

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

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