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.
Theo tinh thần tháng 12 và nhiều lịch mà mọi người sử dụng để đếm ngược và ăn mừng, chúng tôi muốn làm nổi bật nội dung trên web từ cộng đồng và nhóm Chrome. Mỗi ngày, chúng tôi nêu bật một phần 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 có 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à cung cấp một trải nghiệm web thích ứng, dễ truy cập, độc đáo, hiện đại và thích ứng với ít byte 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, phân phối 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 xoay quanh trang web lịch Designcember là nơi chúng tôi giới thiệu tất cả tác phẩm mà chúng tôi muốn giới thiệu trong suốt tháng 12, đồng thời hoạt động 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ưởng 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 macro, toà nhà và các cửa sổ. 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.
Khi lưới chung đã tương đối ổn định và truyền tải ý nghĩa về khả năng thích ứng của toà nhà và các cửa sổ của toà nhà, 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 cửa sổ minh hoạ khả năng phản hồi của sự xáo trộn, cho thấy mức độ điều chỉnh của mỗi 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 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à CSS chuyển đổi vị trí 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 cùng nhìn cửa sổ của ngày thứ 8.
Để 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ứ bên ngoài màu trắng sẽ không giữ nguyên. Trong Photoshop, bên trong cửa sổ được chọn, là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 độ 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 chế độ tối của cửa sổ, với hiệu ứng chuyển màu 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 điều chỉnh được hình ảnh ra ngoài khung hình, Alice đã điền đầy đủ ký 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 ứng dụng khi không có mặt nạ trên cửa sổ và ký tự.
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. Ban đầu, chúng tôi dự định sử dụng imgix và phân phát hình ảnh cũng như định dạng được tối ưu hoá trên máy chủ của họ. Tuy nhiên, 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 về nén, đặc biệt là nét cọ và kiểu cạnh nhám 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à chúng tôi đã phải nén hơn 50 hình ảnh để tìm ra một số chế độ cài đặt tối ưu hoá phổ biến.
Squoosh CLI trở nên quan trọng với hơn 200 hình ảnh để tối ưu hóa — thực hiện tất cả những việc đó theo cách thủ công 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 này là để 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 Escape đều dùng để sắp xếp 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 khi thêm một số ARIA, 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.
Số 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 thêm thời gian cho việc này nhằm tối ưu hoá bản 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 để thể hiện sức mạnh của kiến 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 nghĩa là cửa sổ có thể sở hữu thông tin tạo kiểu thích ứng riêng lẻ và điều chỉnh lại dựa trên kích thước của chính cửa sổ. 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 cách 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 thay đổi để 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 trải nghiệm 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 có một polyfill tuyệt vời. Chúng tôi đã gửi yêu cầu cho nhóm của mình và Surma đã khởi xướng một quá trình phát triển cho 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. Bạn có thể sử dụng đoạn mã polyfill 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 nền là độ dốc CSS để điều chỉnh giá trị màu sắc dễ dàng 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 vài điểm nhấn cá nhân vào trang này để làm cho 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 đưa con trỏ kiểu hồi tưởng 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 biểu định kiểu in đặc biệt trong đó về cơ bản, chúng tôi chủ yếu phân phối một hình ảnh cụ thể hoạt động tốt nhất trên giấy 8,5" x 11" để bạn có thể tự in lịch ra và ở lại lễ hội 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 thích!
