Swetha Gopalakrishnan
Saurabh Rajpal
CSS 和 UI 功能是指新的 CSS 功能和語法，可讓您減少或取代自訂 JavaScript 解決方案或部分 CSS 駭客攻擊，並協助您編寫更完善、更簡潔的程式碼。採用新型 CSS 功能可讓開發人員：
- 縮短開發時間。
- 改善程式碼效率、可讀性和可維護性。
- 提升效能。
- 建立順暢、高效且可存取的精美使用者介面。
在本系列的個案研究中，瞭解各種電子商務網站如何運用捲動式動畫、View Transitions、Popover API、容器查詢和 has() 選取器，以及網站從中獲得的好處。
為什麼電子商務網站應該使用這些功能？
在 Six steps for Justizing UX 中，Forrester Research 指出設計良好的 UI 最多可以將轉換率提升 200%。在設計品質方面，使用者似乎與 94% 的消費者具有信任感，因為設計就是他們離開或不再信任網站的主要原因。因此，電子商務網站特別受益於這些 CSS 和 UI 功能。轉換漏斗必須盡可能順暢，讓使用者能輕鬆自信地完成工作。回應式互動和流暢的導覽功能可以為使用者提供良好的視覺回饋，並在整體歷程中加入趣味和表情。
這些功能均經過精心設計，不僅易於使用，且大多可在 CSS 中實作，只使用極少的 JavaScript。也有助於打造出色的電子商務體驗，而無須透過第三方程式庫或自訂 JavaScript 建立相同功能。使用較少的 JavaScript 也有助於提高效能，也就是讓這些體驗更順暢、更敏捷。
網頁 UI 功能可應用於使用者歷程的各個部分。以下是一些實際範例：
| 特色/公司 | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| 捲動式動畫 | 購物車 | 產品資訊網頁 (PLP) | 產品詳細資料頁面 (PDP) |
| 檢視轉場效果 | 登入 | 專案開發計劃 | 專案開發計劃 |
| 彈出式視窗 | - | - | 專案開發計劃 |
| 容器查詢 | 首頁 | - | 專案開發計劃 |
| :has() | - | 波蘭茲羅提 | 專案開發計劃 |
這也可能顯示為轉換漏斗：
以下個案研究分享其他公司如何實作這些功能及發現的優點。
我們特別邀請 Penelope McLachlan、Hanah Van Opstal、Una Kravets、Bramus Van Damme 和 Rachel Andrew 的特別邀請，針對這系列文章進行評論和評論。