Xem qua quy trình và các công cụ dùng để xây dựng trải nghiệm theo kiểu lịch ngày lễ của Designcember.
Tháng 12 là tháng cuối cùng của năm và cũng là tháng mà nhiều người dùng lịch để đếm ngược và ăn mừng. Vì vậy, chúng tôi muốn giới thiệu nội dung trên web của cộng đồng và nhóm Chrome. Mỗi ngày, chúng tôi giới thiệu một nội dung liên quan đến thiết kế và phát triển giao diện người dùng, tổng cộng 31 nội dung nổi bật, trong đó có 26 trang web minh hoạ, công cụ, thông báo, podcast, video, bài viết và nghiên cứu điển hình mới.
Xem toàn bộ trải nghiệm tại designcember.com.
Tổng quan
Mục tiêu của chúng tôi là mang đến trải nghiệm web dễ tiếp cận, kỳ quặc, hiện đại và thích ứng với số byte ít nhất có thể. Chúng tôi muốn làm nổi bật các API thích ứng mới như truy vấn vùng chứa và đưa ra một ví dụ tuyệt đẹp về chế độ tối trong một trang web tập trung vào thiết kế và có nhiều thành phần. Để đạt được điều này, chúng tôi đã nén tệp, cung cấp nhiều định dạng, sử dụng các công cụ xây dựng được tối ưu hoá để tạo trang web tĩnh, vận chuyển một polyfill mới và nhiều tính năng khác.
Bắt đầu bằng sự ngẫu hứng
Ý tưởng về trang web lịch Designcember là để giới thiệu tất cả những tác phẩm mà chúng tôi muốn làm nổi bật trong suốt tháng 12, đồng thời đóng vai trò như một trang web minh hoạ. Chúng tôi quyết định xây dựng một toà nhà chung cư thích ứng có thể cao và hẹp hơn hoặc thấp và rộng hơn, với các cửa sổ tự sắp xếp lại trong khung. Mỗi khoảng thời gian chuyển đổi đại diện cho một ngày (và do đó là một nội dung). Chúng tôi đã hợp tác với họa sĩ minh hoạ Alice Lee để hiện thực hoá tầm nhìn của mình.
Alice rất truyền cảm hứng, chia sẻ các quy trình và bản phác thảo thú vị ngay cả trong các khái niệm ban đầu. Trong khi cô ấy làm việc về mặt hình ảnh, chúng tôi đã tập trung vào cấu trúc. Các cuộc thảo luận ban đầu xoay quanh bố cục tổng thể, toà nhà và các cửa sổ của toà nhà. Các cửa sổ sẽ thích ứng với một, hai hoặc ba cột như thế nào khi có thêm không gian khung nhìn? Chúng có thể co giãn bao xa? Kích thước tối đa của toà nhà là bao nhiêu? Các cửa sổ sẽ dịch chuyển bao nhiêu?
Dưới đây là bản xem trước của một nguyên mẫu thích ứng sử dụng grid-auto-flow: dense
cho thấy cách các cửa sổ có thể được thuật toán lưới tự động đặt. Chúng tôi nhanh chóng nhận ra rằng mặc dù lưới theo tỷ lệ khung hình hoạt động hiệu quả để hiển thị hình minh hoạ, nhưng lưới này không cho phép các cửa sổ mở rộng và thu nhỏ thành không gian có sẵn không đồng nhất, cũng như không thể hiện được sức mạnh của truy vấn vùng chứa.
Sau khi lưới chung tương đối ổn định và truyền đạt được hướng cho khả năng phản hồi của toà nhà và các cửa sổ, chúng ta có thể tập trung vào một cửa sổ. Một số cửa sổ bị kéo giãn, thu hẹp, nén, mở rộng và tự kết hợp lại nhiều hơn so với các cửa sổ khác trong lưới.
Mỗi cửa sổ sẽ cần xử lý một lượng nhiễu nhất định khi đổi kích thước. Dưới đây là nguyên mẫu của một cửa sổ minh hoạ khả năng phản hồi của cửa sổ đó đối với tình trạng nhiễu động, cho biết mức độ điều chỉnh mà chúng ta có thể mong đợi đối với từng cửa sổ tương tác.
Ảnh động cửa sổ bằng các trang ảnh động
Một số cửa sổ có ảnh động để tăng khả năng tương tác cho trải nghiệm. Ảnh động được vẽ bằng tay, từng khung hình trong Photoshop. Mỗi khung hình được xuất, chuyển thành một trang ảnh động bằng trình tạo trang ảnh động này, sau đó được tối ưu hoá bằng Squoosh. Sau đó, ảnh động CSS sẽ sử dụng background-position-x
và animation-timing-function
như trong ví dụ sau.
.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%; }
}
Một số ảnh động, chẳng hạn như hình ảnh chiếc lợn đất của ngày thứ sáu, là ảnh động CSS dựa trên bước.
Chúng tôi đã đạt được hiệu ứng này bằng một kỹ thuật tương tự, sử dụng steps()
, với điểm khác biệt là các khung hình chính là vị trí biến đổi CSS thay vì vị trí nền.
Ẩn giấu bằng CSS
Một số cửa sổ có hình dạng độc đáo. Chúng tôi đã sử dụng mặt nạ và aspect-ratio
để tạo một cửa sổ có thể mở rộng, có hình dạng độc đáo và thích ứng.
Để tạo mặt nạ, chẳng hạn như mặt nạ này cho cửa sổ 8, bạn cần có một số kỹ năng Photoshop cổ điển, cùng một chút kiến thức về cách hoạt động của mặt nạ trên web. Hãy xem cửa sổ cho ngày thứ tám.
Để trở thành mặt nạ, hình dạng loại cỏ bốn lá bên trong phải được tách riêng thành hình dạng riêng và tô màu trắng. Màu trắng cho CSS biết nội dung nào sẽ giữ nguyên và mọi thứ nằm ngoài màu trắng sẽ không giữ nguyên. Trong Photoshop, phần bên trong cửa sổ được chọn, có độ mềm 1px (để loại bỏ các vấn đề răng cưa), sau đó được tô màu trắng và xuất ở cùng chiều cao và chiều rộng với khung cửa sổ. Bằng cách này, khung và mặt nạ có thể được xếp chồng trực tiếp lên nhau, hiển thị nội dung bên trong khung như mong đợi.
Sau khi hoàn tất, bạn có thể sửa đổi nội dung của cửa sổ và nội dung đó sẽ luôn xuất hiện trong khung tuỳ chỉnh. Hình ảnh sau đây cho thấy phiên bản cửa sổ ở chế độ tối, với độ dốc nền khác và bộ lọc CSS phát sáng được áp dụng cho ánh sáng.
Tính năng che cũng hỗ trợ các cửa sổ dựa trên truy vấn vùng chứa thích ứng. Trong cửa sổ 9, có một nhân vật ẩn sau mặt nạ cho đến khi cửa sổ có kích thước hẹp hơn. Để đảm bảo người dùng không thể điều chỉnh hình ảnh ra khỏi khung, Alice đã hoàn thành toàn bộ nhân vật cho chúng ta. Nhân vật được che trong cửa sổ, nhưng cây cối thì không. Vì vậy, chúng tôi đã phải giải quyết một thách thức khác là xếp lớp các phần tử được che với các lớp không được che và đảm bảo rằng tất cả các lớp đó đều được điều chỉnh theo tỷ lệ phù hợp với nhau.
Hình ảnh sau đây cho thấy giao diện của cửa sổ và nhân vật khi không có mặt nạ.
Nén hình ảnh
Để duy trì độ trung thực của hình minh hoạ và đảm bảo màn hình có độ phân giải cao không gây ra trải nghiệm mờ cho người dùng, Alice đã làm việc ở tỷ lệ pixel 3x. Kế hoạch ban đầu là sử dụng imgix và phân phát hình ảnh và định dạng được tối ưu hoá trên máy chủ của họ, nhưng chúng tôi nhận thấy việc điều chỉnh thủ công bằng công cụ Squoosh có thể giúp tiết kiệm từ 50% trở lên.
Hình minh hoạ có những thách thức riêng đối với việc nén, đặc biệt là nét vẽ và kiểu cạnh thô trong suốt mà Alice sử dụng. Chúng tôi đã chọn Squoosh mỗi hình ảnh png được xuất từ Photoshop theo tỷ lệ 3x thành một tệp png, webp và avif nhỏ hơn. Mỗi loại tệp có khả năng nén đặc biệt riêng và bạn phải nén hơn 50 hình ảnh để tìm một số chế độ cài đặt tối ưu hoá phổ biến.
Squoosh CLI trở nên quan trọng khi có hơn 200 hình ảnh cần tối ưu hoá. Nếu làm theo cách thủ công, bạn sẽ mất nhiều ngày. Sau khi có các chế độ cài đặt tối ưu hoá phổ biến, chúng tôi đã cung cấp các chế độ này dưới dạng hướng dẫn dòng lệnh và xử lý hàng loạt toàn bộ thư mục hình ảnh PNG thành các tệp WebP và AVIF nén tương ứng.
Dưới đây là ví dụ về lệnh squoosh CLI AVIF được sử dụng:
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
Sau khi kiểm tra hình minh hoạ được tối ưu hoá vào kho lưu trữ, chúng ta có thể bắt đầu tải hình minh hoạ đó từ 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>
Việc viết mã nguồn hình ảnh rất lặp lại, vì vậy, chúng tôi đã tạo một thành phần Astro để nhúng hình ảnh bằng một dòng mã.
<Pic filename="day1/inner-frame" role="presentation" />
Người dùng trình đọc màn hình và bàn phím
Phần lớn trải nghiệm Designcember là thông qua các cửa sổ nghệ thuật và tương tác. Điều quan trọng với chúng tôi là người dùng bàn phím có thể sử dụng trang web và xem trước các cửa sổ, đồng thời người dùng trình đọc màn hình có được trải nghiệm được đọc tốt.
Ví dụ: khi nhúng hình ảnh, chúng ta đã sử dụng role="presentation"
để đánh dấu hình ảnh là hình ảnh trình bày cho trình đọc màn hình. Chúng tôi cho rằng trải nghiệm người dùng sẽ kém nếu có từ 5 đến 12 phần mô tả alt
bị phân mảnh. Vì vậy, chúng tôi đã đánh dấu các hình ảnh là hình ảnh trình bày và cung cấp lời tường thuật tổng thể về cửa sổ. Khi di chuyển qua các cửa sổ trên trình đọc màn hình, bạn sẽ có cảm giác như đang nghe một câu chuyện thú vị. Chúng tôi hy vọng điều này sẽ giúp mang đến cảm giác thú vị và ngẫu hứng mà trang web muốn chia sẻ.
Video sau đây minh hoạ trải nghiệm bàn phím. Các phím tab, enter, phím cách và phím thoát đều được dùng để điều phối tiêu điểm đến và đi từ cửa sổ bật lên và cửa sổ.
Trải nghiệm trình đọc màn hình có các thuộc tính ARIA đặc biệt giúp nội dung trở nên rõ ràng. Ví dụ: các đường liên kết cho ngày chỉ hiển thị "một" hoặc "hai", nhưng với một số ARIA được thêm vào, các đường liên kết này sẽ được thông báo là "Ngày một" và "Ngày hai". Hơn nữa, tất cả hình ảnh được tóm tắt trong một nhãn duy nhất để mỗi cửa sổ đều có nội dung mô tả.
Astro, trình tạo trang web tĩnh, ưu tiên thành phần
Astro giúp nhóm dễ dàng làm việc cùng nhau trên trang web. Mô hình thành phần quen thuộc với cả nhà phát triển Angular và React, trong khi hệ thống kiểu tên lớp trong phạm vi giúp mỗi nhà phát triển biết rằng công việc của họ trên một cửa sổ sẽ không xung đột với bất kỳ ai khác.
Ngày dưới dạng thành phần
Mỗi ngày là một thành phần tìm nạp trạng thái từ kho dữ liệu thời gian xây dựng. Điều này cho phép chúng ta chạy logic mẫu trước khi HTML đến trình duyệt. Logic sẽ xác định xem ngày đó có hiển thị chú giải công cụ hay không, vì những ngày không hoạt động sẽ không có cửa sổ bật lên.
Bản dựng được chạy mỗi giờ và kho dữ liệu thời gian tạo bản dựng sẽ mở khoá một ngày mới khi máy chủ tạo bản dựng đã qua nửa đêm. Những hệ thống nhỏ tự cập nhật và tự cung cấp này giúp trang web luôn được cập nhật.
Kiểu trong phạm vi và Đối tượng mở
Astro lập phạm vi kiểu viết bên trong mô hình thành phần, giúp việc phân phối khối lượng công việc giữa nhiều thành viên trong nhóm trở nên dễ dàng hơn, đồng thời giúp việc sử dụng Open Props trở nên thú vị. Các kiểu Open Props normalize.css rất hữu ích với giao diện thích ứng (sáng và tối), cũng như giúp sắp xếp nội dung như các đoạn văn bản và tiêu đề.
Là những người dùng sớm của Astro, chúng tôi đã gặp một số vấn đề với PostCSS. Ví dụ: chúng tôi không thể cập nhật lên phiên bản Astro mới nhất do có quá nhiều vấn đề về bản dựng. Bạn có thể dành nhiều thời gian hơn cho việc tối ưu hoá quy trình xây dựng và quy trình làm việc của nhà phát triển.
Vùng chứa linh hoạt
Một số cửa sổ sẽ tăng và giảm kích thước, duy trì tỷ lệ khung hình để giữ nguyên hình ảnh. Chúng tôi đã sử dụng một số cửa sổ khác để giới thiệu sức mạnh của cấu trúc dựa trên thành phần bằng các truy vấn vùng chứa. Truy vấn vùng chứa có nghĩa là các cửa sổ có thể sở hữu thông tin kiểu dáng thích ứng riêng và điều chỉnh lại dựa trên kích thước của riêng chúng. Một số cửa sổ đã chuyển từ hẹp sang rộng và cần điều chỉnh kích thước của nội dung nghe nhìn trong đó, cũng như vị trí của nội dung nghe nhìn đó.
Khi có nhiều không gian hơn cho một cửa sổ, chúng ta có thể điều chỉnh kích thước hoặc các phần tử con của cửa sổ cho phù hợp. Hóa ra, để đáp ứng các cửa sổ thích ứng, các truy vấn vùng chứa không chỉ là một tính năng thú vị để giới thiệu mà còn là yêu cầu bắt buộc và đơn giản hoá đáng kể việc điều phối một số bố cục nhất định.
.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;
}
}
Phương pháp này khác với việc duy trì tỷ lệ khung hình. Nhờ đó, bạn có thêm quyền kiểm soát và nhiều cơ hội hơn. Ở một kích thước nhất định, nhiều thành phần con sẽ di chuyển để thích ứng với bố cục mới.
Truy vấn vùng chứa cũng cho phép chúng ta hỗ trợ tính năng chứa theo hướng khối (dọc), vì vậy, khi cửa sổ tăng chiều dài, chúng ta có thể điều chỉnh kiểu của cửa sổ cho phù hợp. Điều này được thấy trong các truy vấn dựa trên chiều cao mà chúng tôi sử dụng độc lập, ngoài các truy vấn dựa trên chiều rộng:
.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);
}
}
Chúng tôi cũng sử dụng truy vấn vùng chứa để hiển thị và ẩn chi tiết vì hình minh hoạ trở nên ngày càng lộn xộn ở kích thước nhỏ hơn và trống hơn ở kích thước lớn hơn. Cửa sổ 9 là một ví dụ điển hình về trường hợp này:
Hỗ trợ nhiều trình duyệt
Để tạo ra trải nghiệm hiện đại tuyệt vời trên nhiều trình duyệt, đặc biệt là đối với các API thử nghiệm như truy vấn vùng chứa, chúng ta cần một polyfill tuyệt vời. Chúng tôi đã gửi một lời kêu gọi đến nhóm của mình và Surma đã dẫn đầu việc xây dựng một polyfill truy vấn vùng chứa mới. Trình bổ trợ dựa vào ResizeObserver, MutationObserver và hàm CSS:is(). Do đó, tất cả trình duyệt hiện đại đều hỗ trợ polyfill, cụ thể là Chrome và Edge từ phiên bản 88, Firefox từ phiên bản 78 và Safari từ phiên bản 14. Việc sử dụng polyfill cho phép bất kỳ cú pháp nào sau đây:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Chế độ tối
Một điểm nhấn cuối cùng không thể thiếu cho trang web Designcember là giao diện tối đẹp mắt. Chúng tôi muốn cho bạn thấy cách sử dụng chính tác phẩm nghệ thuật để tham gia tích cực vào việc tạo ra trải nghiệm tuyệt vời trong chế độ tối. Để làm việc này, chúng tôi đã điều chỉnh kiểu nền của từng cửa sổ theo phương thức lập trình và sử dụng nhiều CSS nhất có thể khi tạo hình nền cửa sổ. Hầu hết các nền đều là hiệu ứng chuyển màu CSS để dễ dàng điều chỉnh giá trị màu hơn. Sau đó, chúng tôi đã xếp lớp hình minh hoạ lên trên các lớp này.
Trứng Phục sinh khác
Chút sắc màu cá nhân
Chúng tôi đã thêm một số điểm nhấn cá nhân vào trang để trang web trở nên cá tính hơn. Đầu tiên là dàn nhân vật, được lấy cảm hứng từ nhóm chúng tôi. Chúng tôi cũng thêm một con trỏ kiểu cũ vào những ngày không hoạt động và thử nghiệm với kiểu biểu tượng trang web.
Thao tác chạm chức năng
Một trong những điểm nhấn về chức năng khác là chức năng "Chuyển đến Hôm nay", với một chú chim đậu trên đỉnh toà nhà. Khi nhấp hoặc nhấn Enter vào chú chim này, bạn sẽ được chuyển xuống ngày hiện tại trong tháng để có thể nhanh chóng chuyển đến các bản phát hành mới nhất.
Designcember.com cũng có một kiểu phông chữ in đặc biệt, trong đó chúng tôi chủ yếu phân phát một hình ảnh cụ thể phù hợp nhất với giấy 8,5" x 11" để bạn có thể tự in lịch và luôn vui vẻ suốt cả năm.
Nhìn chung, chúng tôi đã phải làm rất nhiều việc để tạo ra một trải nghiệm web hiện đại, thú vị và kỳ quặc nhằm kỷ niệm việc phát triển giao diện người dùng trong suốt tháng 12. Chúng tôi hy vọng bạn sẽ thích!