Điều chỉnh hệ thống thiết kế để hoạt động cho Metaverse

Điều chỉnh hệ thống thiết kế để hoạt động cho Metaverse

Chia sẻ kiến thức 26/03/2022

Những thiết kế Metaverse được len lỏi vào cuộc sống của con người là mong ước của tất cả nhà phát triển phần mềm. Nhưng nó sẽ cần một chặng đường dài để đạt được mục tiêu này.

Design systems (Hệ thống thiết kế) cho phép nhà thiết kế phát triển dễ dàng và nhanh chóng sản phẩm trên các nền tảng. Liệu chúng ta có thể mở rộng tài nguyên đã thiết lập trong hệ thống thiết kế 3D để tăng năng suất và phát triển cho nền tảng khác. Ta biết rằng có nhiều vị trí có thể áp dụng trực tiếp tiêu chuẩn thiết kế hiện có trong Metaverse. Bài viết này, FUNiX sẽ trao đổi về những kiến thức, kinh nghiệm điều chỉnh hệ thống thiết kế. Những yếu tố này đã được các nhà lập trình cấp cao áp dụng cho thiết kế và phát triển Metaverse.

High-level considerations (Cân nhắc cấp cao)

Nếu các hướng dẫn không phù hợp, bạn có thể linh hoạt lược bỏ chúng.

Nếu thực hiện theo thông số kỹ thuật dựa trên nguyên tắc thiết kế cơ bản, các trải nghiệm 2D và 3D đều sẽ được hưởng lợi. Những ràng buộc này sẽ là cơ sở để thiết kế và phát triển sản phẩm để bạn có thể hướng đến những trải nghiệm người dùng tích cực, nhất quán.

Dù vậy, đây cũng chỉ là gợi ý chứ không phải là yêu cầu bắt buộc. Nếu các hướng dẫn không phù hợp, bạn có thể linh hoạt lược bỏ chúng. Điều này cũng không gây ảnh hưởng quá lớn. 

Dựa vào các tiêu chuẩn Metaverse trên nguyên tắc thiết kế cơ bản, nó sẽ đảm bảo quá trình dùng sản phẩm sẽ tích cực hơn. Trải nghiệm Website và di động đều được phát triển từ một ngôn ngữ thiết kế cơ bản.

Presence (Sự hiện diện)

Trải nghiệm tích cực Metaverse là việc mang đến sự hài lòng từ khách hàng, giúp họ có cảm giác thú vị và ý nghĩa nhất khi đắm chìm trong môi trường bạn tạo ra. Thuật ngữ Presence (Sự hiện diện) được dùng trong VR, nó để chỉ cảm giác như người dùng đang thực sự “hiện diện” trong môi trường, sản phẩm mà bạn tạo nên.

Như Mark Zuckerberg phát biểu rằng “Chúng ta cần xác định rằng chất lượng của Metaverse nằm ở sự “hiện diện”. Đó là cảm giác bạn đang thực sự ở trong đó với một người khác, một môi trường khác. Sáng tạo, hình đại diện và đối tượng kỹ thuật số sẽ là cách chủ yếu để bạn thể hiện bản thân. Điều này cũng mang đến cho chúng ta những cơ hội kinh doanh và tạo ra cơ hội việc làm mới”.

Mục tiêu thiết kế của Metaverse là thiết lập mẫu đảm bảo người dùng cảm thấy cuốn hút và tương tác một cách tự nhiên.

Thông số kỹ thuật 2D nào được dịch trực tiếp?

Có rất nhiều tiêu chuẩn thiết kế truyền thống mà nhà phát triển áp dụng trực tiếp vào môi trường 3D. Trong đó, Metaverse là một phương tiện trực quan được xây dựng bằng code mà nhà phát triển thực hiện.

Design tokens (Mã thông báo thiết kế)

Với những Design token (mã thông báo thiết kế), con người có thể dựa vào đó để đọc thông số kỹ thuật về kiểu chữ, kích thước và màu sắc. Điều này giúp cho quá trình thiết kế và phát triển dễ dàng hơn. Những code thông báo này sẽ trở thành ngôn ngữ được sử dụng trong mô hình thiết kế của bạn.

Việc đảm bảo yếu tố này sẽ áp dụng cho nhiều ngôn ngữ giống nhau, bạn nên hạn chế việc đưa vào giá trị tùy chỉnh.Ví dụ:

  • Có: AccentColor, SideMargin, Headline4
  • Không: # bada55, 16px, Montserrat / 14px / Bold

Color (Màu sắc)

Chúng ta sử dụng một số vào nhất định để dễ dàng quản lý.

Thay vì sử dụng tất cả màu, chúng ta sẽ xác định một số màu nhất định để thuận tiện cho việc quản lý. Khi dùng số lượng màu hạn chế sẽ mang lại sự nhất quán và tính thẩm mỹ trên tất cả nền tảng. Nó sẽ đảm bảo trải nghiệm Metaverse của bạn phù hợp với sản phẩm đã tạo ra.

Việc giới hạn phạm vi màu sắc khiến ta gặp khó khăn nếu muốn không gian màu sống động. Để có một không gian siêu đa dạng, bạn cần để ý đến chiều sâu của môi trường xung quanh. Đôi khi Developer sẽ cần thêm màu để môi trường trở nên sinh động và hấp dẫn hơn.

Ngoài ra, lập trình viên nên điều chỉnh mức độ sáng tối hợp lý. Vì ánh sáng là yếu tố tác động mạnh mẽ đến cảm xúc và tâm trạng của người dùng. Một mức độ sáng phù hợp sẽ giúp người sử dụng dễ đọc quan sát và đọc hình ảnh cũng như văn bản hơn. Nếu ta quản lý nguồn sáng tốt sẽ gia tăng sự hiện diện của khách hàng trên sản phẩm. Một gợi ý là bạn nên thêm hoặc bớt màu tương phản nhẹ hoặc mạnh để tạo điểm nhấn.

Typography (Kiểu chữ)

Một trong những lợi ích của 2D là khi tạo số lượng nhỏ kiểu chữ, chúng sẽ chuyển trực tiếp sang Metaverse và bạn sẽ không cần thay đổi bất kỳ điều gì. Yếu tố này cũng không ảnh hưởng đến Presence, nhưng nó đã làm cho quá trình phát triển đơn giản hơn nhiều.

Spacing (Khoảng cách)

Bạn cần đặt giới hạn phạm vi cho hệ thống không gian với cơ cơ hạ tầng đáng nhớ và lưu lại những yêu cầu rõ ràng về cách dùng. Điều này dẫn đến việc bố trí của ta được căn chỉnh theo dạng lưới giúp mang lại sự hài hòa cho người dùng. 

Ngoài ra, nhà phát triển có thể dùng hệ thống Base 8 (kích thước chia hết cho 8). Đây là thông số phù hợp với phông chữ cơ bản của nhiều trình duyệt là 16px (8×2). Bên cạnh đó, kích thước màn hình phổ biến hiện nay điều chia hết cho 8 trên một trục.

Các phép đo Base8 luôn chia hết cho 2, bạn nên tránh chênh lệch quá .5px xảy ra trong hệ thống Base5. Vì các điểm ảnh với hiệu số .5px sẽ không rõ nét khi hiển thị.

Tiêu chuẩn cho tài nguyên nhúng (video và hình ảnh)

Điều chỉnh khung hình để có thể chứa các đối tượng.

Khi tạo ra môi trường Metaverse, khách hàng thường có xu hướng dùng phương tiện có hình dạng bất thường để phù hợp với những không gian có hình dạng kỳ lạ. Ta cần cố gắng điều chỉnh không gian 3D để chứa phương tiện truy cập có hình độc đáo. Nhờ vậy, công việc thiết kế sẽ dễ dàng hơn khi chúng có một tiêu chuẩn chung. Nhà phát triển xác định một số tỷ lệ khung hình như sau:

  • 9:16 (16:9) 
  • 3:4 (4:3) 
  • 1:1 

Tuân theo tỷ lệ này sẽ đảm bảo sản phẩm phù hợp với tất cả thiết bị truy cập. Các tiêu chuẩn này sẽ hạn chế khung hình không tương thích và ít phải thao tác lại. Bởi vì không phải điều chỉnh sản phẩm để tương thích với phương tiện sử dụng nữa.

Trong phần tiếp theo, FUNiX sẽ giới thiệu những thông số kỹ thuật quan trọng cho thiết kế Metaverse

Công Sơn

Tài liệu tham khảo:https://stackoverflow.blog/2021/11/08/adapting-a-design-system-to-work-for-the-metaverse/

ĐĂNG KÝ TƯ VẤN HỌC LẬP TRÌNH TẠI FUNiX

Bình luận (
0
)

Bài liên quan

  • Tầng 0, tòa nhà FPT, 17 Duy Tân, Q. Cầu Giấy, Hà Nội
  • info@funix.edu.vn
  • 0782313602 (Zalo, Viber)        
Chat Button
Chat với FUNiX GPT ×

yêu cầu gọi lại

error: Content is protected !!