Xem trước quy trình và các công cụ dùng để xây dựng trải nghiệm theo phong cách lịch ngày lễ của Designcember.
Trong 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 nêu bật nội dung trên web của cộng đồng và nhóm Chrome. Mỗi ngày, chúng tôi nêu bật 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ạ mới, công cụ, thông báo, podcast, video, bài viết và nghiên cứu điển hình.
Hãy 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 dễ truy cập, độc đáo, hiện đại và đáp ứng trong í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 vào một ví dụ đẹp mắt về chế độ tối trong trang web tập trung vào thiết kế và nhiều nội dung. Để đạt được điều này, chúng tôi đã nén các 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, xuất bản một polyfill mới và làm nhiều việc khác.
Bắt đầu thú vị
Ý tưởng của trang web lịch Designcember là để làm nơi giới thiệu tất cả những tác phẩm chúng tôi muốn giới thiệu nổi bật 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à căn hộ thích ứng có thể cao hơn và hẹp hơn, hoặc ngắn hơn và rộng hơn, với các cửa sổ tự sắp xếp lại trong khung. Mỗi cửa sổ đại diện cho một ngày (và do đó, một phần nội dung). Chúng tôi đã hợp tác với hoạ sĩ minh hoạ Alice Lee để hiện thực hoá ý tưởng của mình.
Alice là người truyền cảm hứng, chia sẻ các quá trình và bản phác thảo rất thú vị ngay cả khi họ mới bắt đầu. Trong khi cô ấy làm nghệ thuật, chúng tôi đã xâm nhập vào kiến 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ủa toà nhà. Cửa sổ sẽ thích ứng như thế nào với một, hai hoặc ba cột khi có nhiều không gian khung nhìn hơn? Chúng có thể co hoặc kéo giãn bao xa? Toà nhà có kích thước tối đa là bao nhiêu? Cửa sổ sẽ thay đổi bao nhiêu?
Dưới đây là bản xem trước một nguyên mẫu thích ứng sử dụng phương thức grid-auto-flow: dense cho thấy cách thuật toán lưới có thể tự động đặt cửa sổ. Chúng tôi nhanh chóng nhận ra rằng mặc dù các lưới tỷ lệ khung hình hoạt động tuyệt vời để thể hiện nghệ thuật, nhưng chúng không mang đến cơ hội để các cửa sổ tăng lên và thu nhỏ vào không gian có sẵn không đồng nhất cũng như thể hiện sức mạnh của các truy vấn vùng chứa.
Khi lưới chung đã tương đối ổn định và thể hiện được hướng 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 nhỏ, co lại, lớn ra và tự kết hợp lại nhiều hơn những cửa sổ khác trong lưới.
Mỗi cửa sổ sẽ cần xử lý một sự nhiễu động về thay đổi kích thước nhất định. Dưới đây là nguyên mẫu của một cửa sổ minh hoạ khả năng thích ứng của cửa sổ đối với sự biến động, 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 sprite
Một số cửa sổ có ảnh động để mang thêm tương tác cho trải nghiệm. Các ảnh động được vẽ bằng tay, theo từng khung hình, trong Photoshop. Mỗi khung hình được xuất, chuyển thành một sprite bằng trình tạo sprite này, sau đó được tối ưu hoá bằng Squoosh. Sau đó, ảnh động CSS 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ư heo đất của ngày thứ sáu, là ảnh động CSS dựa trên từng bước.
Chúng ta đã đạt được hiệu ứng này bằng một kỹ thuật tương tự, sử dụng steps(), với sự 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.
Tạo mặt nạ 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 để giúp tạo một cửa sổ thích ứng, có thể mở rộng, có hình dạng độc đáo và có thể mở rộng.
Để tạo mặt nạ, chẳng hạn như mặt nạ cho cửa sổ 8, bạn cần có một số kỹ năng Photoshop cũ, cùng với một chút kiến thức về cách mặt nạ trên web hoạt động. Hãy cùng nhìn lại cửa sổ cho ngày thứ 8.
Để trở thành một chiếc mặt nạ, hình dạng cỏ bốn lá bên trong phải được tách biệt thành hình dạng riêng và được tô màu trắng. Màu trắng sẽ cho CSS biết nội dung nào được giữ lại và mọi nội dung nằm ngoài màu trắng sẽ không. Trong Photoshop, phần 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 đó tô màu trắng và xuất với 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 lớp trực tiếp lên nhau, hiển thị nội dung bên trong trong khung như dự kiến.
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 của cửa sổ sẽ luôn nằm 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 độ dốc của nền khác và bộ lọc CSS toả sáng được áp dụng cho ánh sáng.
Việc tạo mặt nạ cũng hỗ trợ các cửa sổ thích ứng dựa trên truy vấn vùng chứa. Trong cửa sổ 9, có một nhân vật bị ẩn sau một chiếc 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 ngoài khung hình, Alice đã hoàn thành toàn bộ nhân vật cho chúng tôi. Nhân vật này được che giấu trong cửa sổ, nhưng cây cối thì không, vì vậy một thách thức khác mà chúng tôi đã giải quyết là phân lớp các yếu tố bị che bằng các lớp không được che giấu và đảm bảo rằng tất cả chúng đều được điều chỉnh kích thước cùng nhau.
Hình ảnh sau đây cho thấy không có mặt nạ trên cửa sổ và nhân vật.
Khai phá thế giới nghệ thuật
Để 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 mờ trải nghiệm người dùng, Alice đã nghiên cứu với tỷ lệ pixel gấp 3 lần. Kế hoạch là sử dụng imgix và phân phối hình ảnh và định dạng được tối ưu hóa trên máy chủ của họ, nhưng chúng tôi nhận thấy rằng việc tinh chỉnh thủ công bằng công cụ Squoosh có thể giúp chúng tôi tiết kiệm 50% hoặc nhiều hơn.
Hình minh hoạ có những khó khăn riêng khi nén, đặc biệt là nét cọ và phong cách cạnh thô trong suốt mà Alice sử dụng. Chúng tôi chọn Squoosh mỗi 3x Photoshop được xuất hình ảnh png, sang một png nhỏ hơn, webp và avif. Mỗi loại tệp có khả năng nén đặc biệt riêng. Bạn cần nén hơn 50 hình ảnh mới tìm được 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 cần tối ưu hoá — việc thực hiện tất cả những hình ảnh đó theo cách thủ công có thể sẽ mất nhiều ngày. 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ế độ cài đặt đó 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 vào các tệp đối chiếu được nén bằng WebP và AVIF.
Dưới đây là ví dụ về lệnh AVIF CLI squoosh đượ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
Với hình minh hoạ được tối ưu hoá được kiểm tra trong kho lưu trữ, chúng ta có thể bắt đầu tải chúng 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 ảnh lặp đi lặp lại, vì vậy, chúng tôi đã tạo 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 của Designcember là thông qua các cửa sổ nghệ thuật và tương tác. Đối với chúng tôi, điều quan trọng là người dùng bàn phím có thể sử dụng trang web và mở cửa sổ, cũng như người dùng trình đọc màn hình đó có được trải nghiệm được đọc thú vị.
Ví dụ: khi nhúng hình ảnh, chúng ta đã sử dụng role="presentation" để đánh dấu hình ảnh là bản trình bày cho trình đọc màn hình. Chúng tôi nhận thấy rằng trải nghiệm người dùng có từ 5 đến 12 nội dung mô tả alt bị hỏng sẽ là một trải nghiệm không tốt. Vì vậy, chúng tôi đánh dấu các hình ảnh đó là mang tính trình bày và tường thuật tổng thể qua cửa sổ. Khi di chuyển qua các cửa sổ trên trình đọc màn hình, chúng tôi hy vọng điều này sẽ giúp mang lại sự thú vị và kỳ thú mà trang web muốn chia sẻ.
Video sau đây minh hoạ trải nghiệm sử dụng bàn phím. Các phím Tab, Enter, phím cách và Escape đều được dùng để sắp xếp tiêu điểm giữa các 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 mang lại sự rõ ràng cho nội dung. Ví dụ: đường liên kết cho những ngày chỉ hiển thị "một" hoặc "hai", nhưng khi có thêm một số ARIA, chúng sẽ được thông báo là "Ngày thứ nhất" và "Ngày thứ hai". Hơn nữa, tất cả hình ảnh được tóm tắt trong một nhãn duy nhất, nên mỗi cửa sổ sẽ có một phần mô tả.
Trình tạo trang web dựa trên thành phần, tĩnh ưu tiên Astro
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 này đã 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 theo phạm vi giúp từng 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 tôi chạy logic mẫu trước khi HTML tiếp cận được trình duyệt. Logic này sẽ xác định liệu 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.
Các bản dựng sẽ chạy mỗi giờ và kho dữ liệu thời gian xây dựng sẽ mở khoá một ngày mới khi máy chủ bản dựng hoạt độ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à Đạo cụ mở
Các kiểu phạm vi của Astro được viết bên trong mô hình thành phần, giúp phân phối khối lượng công việc cho nhiều thành viên trong nhóm dễ dàng hơn, đồng thời việc sử dụng Open Props trở nên thú vị. Kiểu Open Props Hãy bình thường hoá.css rất hữu ích với giao diện thích ứng (sáng và tối), cũng như giúp chỉnh sửa nội dung như đoạn văn và tiêu đề.
Khi là những người sử dụng Astro đầu tiên, chúng tôi gặp một vài 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. Nhà phát triển có thể dành nhiều thời gian hơn để 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ổ lớn lên và thu nhỏ lại, giúp duy trì tỷ lệ khung hình để bảo tồn tác phẩm nghệ thuật. 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 thông qua các truy vấn vùng chứa. Truy vấn vùng chứa có nghĩa là cửa sổ có thể sở hữu thông tin tạo kiểu thích ứng riêng và điều chỉnh lại dựa trên kích thước riêng. Một số cửa sổ thay đổi từ hẹp thành rộng và cần phải điều chỉnh kích thước của nội dung nghe nhìn bên trong, cũng như vị trí của nội dung nghe nhìn đó.
Khi có thêm không gian 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. Hoá ra để đáp ứng các cửa sổ thích ứng, các truy vấn vùng chứa không chỉ thú vị khi được giới thiệu, mà còn cần phải có và đơn giản hoá đáng kể việc sắp xếp 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. Chế độ này mang đến cho bạn nhiều quyền kiểm soát hơn và nhiều cơ hội hơn. Ở một kích thước nhất định, nhiều thành phần con cháu sẽ di chuyển để thích ứng với một bố cục mới.
Truy vấn vùng chứa cũng cho phép chúng tôi hỗ trợ vùng chứa theo hướng khối (dọc), do đó, khi thời lượng tăng lên, chúng tôi có thể điều chỉnh kiểu của nó cho phù hợp. Điều này được thể hiện trong các truy vấn dựa trên chiều cao mà chúng tôi đã sử dụng độc lập và bổ sung cho 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 các truy vấn vùng chứa để hiện và ẩn chi tiết khi hình minh hoạ ngày càng nhiều khi hình ảnh có kích thước nhỏ hơn và hình minh hoạ trống hơn ở kích thước lớn. Cửa sổ 9 là một ví dụ hay về cách phát huy tác dụng:
Hỗ trợ trên 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 hiệu quả. Chúng tôi đã gọi cho nhóm của mình và Surma đã thiết lập một bản dựng cho polyfill truy vấn vùng chứa mới. Tính năng polyfill này dựa trên ResizeObserver, MutationObserver và :is() của CSS. Do đó, tất cả các trình duyệt hiện đại đều hỗ trợ polyfill, cụ thể là Chrome và Edgefrom 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 sẽ được phép sử dụng 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 cuối cùng quan trọng đối với trang web Designcember là một giao diện tối đẹp mắt. Chúng tôi muốn trình bày cách bạn có thể 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 ở chế độ tối. Để làm được điều này, chúng tôi đã điều chỉnh kiểu nền của từng cửa sổ theo cách lập trình và sử dụng nhiều CSS nhất có thể khi tạo hình ảnh cửa sổ. Hầu hết nền là chuyển màu CSS để có thể dễ dàng điều chỉnh giá trị màu của chúng hơn. Sau đó, chúng tôi đã phủ nghệ thuật lên trên.
Trứng Phục sinh khác
Tiếp xúc cá nhân
Chúng tôi đã thêm một số chi tiết cá nhân vào trang này để làm nổi bật trang web này hơn. Đầu tiên là dàn nhân vật, lấy cảm hứng từ đội ngũ của chúng tôi. Chúng tôi cũng đã thêm một con trỏ kiểu hồi tưởng vào những ngày không hoạt động và phát lại với kiểu biểu tượng trang web.
Thao tác chạm về mặt chức năng
Một trong những chức năng bổ sung là chức năng "Chuyển tới hôm nay", với một con chim nằm trên đỉnh tòa nhà. Thao tác nhấp hoặc nhấn phím Enter trên biểu tượng con chim này sẽ chuyển bạn xuống trang ngày hiện tại trong tháng, vì vậy, bạn có thể nhanh chóng truy cập vào các nội dung khởi chạy mới nhất.
Designcember.com cũng có một biểu định kiểu in đặc biệt, trong đó chúng tôi về cơ bản đang cung cấp 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 và tiếp tục lễ hội suốt cả năm.
Nhìn chung, chúng tôi đã nỗ lực tạo ra trải nghiệm web hiện đại thú vị, độc đáo nhằm kỷ niệm sự phát triển của giao diện người dùng suốt cả tháng trong tháng 12. Chúng tôi hy vọng bạn thích chương trình này!
