Thiết kế một Reverie tĩnh lặng hơn: từ trò chuyện đến toàn bộ sản phẩm

Nếu bạn mở một cuộc trò chuyện trong vài ngày qua, có lẽ bạn đã cảm thấy điều gì đó khác đi.

Giao diện chat trở nên tĩnh lặng hơn một chút. Tin nhắn dễ đọc hơn, các nút điều khiển nhẹ hơn, còn bảng và hộp thoại không cạnh tranh quá nhiều với cuộc trò chuyện. Những chức năng quen thuộc vẫn ở đúng chỗ, nhưng không gian quanh nhân vật của bạn đã thư thái hơn.

Chúng tôi bắt đầu từ chat vì đây là nơi nhiều người dành phần lớn thời gian trong Reverie. Nó cũng là nơi phù hợp nhất để kiểm chứng câu hỏi đằng sau lần thiết kế lại này: giao diện nên mang lại cảm giác gì khi phải thoải mái trong suốt một cuộc trò chuyện, chứ không chỉ tạo ấn tượng đầu tiên?

Những gì bạn thấy không phải một thay đổi riêng lẻ. Đó là phần đầu tiên của hệ thống thiết kế mới được lộ diện. Giờ đây hệ thống ấy đã mở rộng ra toàn bộ sản phẩm—từ khám phá và trang nhân vật đến công cụ sáng tạo, truyện, thanh toán, phần thưởng, cài đặt và những màn hình tiện ích nhỏ ở giữa.

Reverie luôn là một sản phẩm giàu biểu cảm. Cá tính ấy hiện diện trong đường viền mạnh, bóng đổ rõ, thẻ nhiều lớp, nút điều khiển đầy màu sắc và các bề mặt giống vật thể hơn là hình chữ nhật trên màn hình. Chúng đem lại sự ấm áp và khiến Reverie dễ nhận ra.

Nhưng ngôn ngữ hình ảnh phù hợp với một giai đoạn có thể trở nên quá nặng ở giai đoạn tiếp theo.

Khi Reverie phát triển, mọi người ở lại cuộc trò chuyện lâu hơn, quản lý nhân vật, viết truyện, so sánh gói và cấu hình công cụ nâng cao. Chi tiết trang trí tạo cá tính cho trang giới thiệu có thể trở thành nhiễu thị giác khi lặp lại trong mọi hộp thoại, thẻ, menu và nút.

Chúng tôi không thiết kế lại Reverie để làm nó kém khác biệt, mà để sự khác biệt đến từ chính trải nghiệm.

Nhẹ hơn, không lạnh hơn

“Nhẹ” rất dễ trở thành nền trắng, chữ xám mảnh và những thành phần mờ nhạt đến mức trông chưa hoàn thiện. Đó chưa bao giờ là mục tiêu.

Hệ thống mới tĩnh lặng hơn nhưng vẫn ấm áp. Chúng tôi thay màu trắng gắt bằng các bề mặt trung tính có sắc độ nhẹ. Văn bản tối và chắc hơn ở nơi cần đọc lâu. Đường viền tiết chế, bóng nông hơn và màu sắc được dùng có chủ đích. Trọng lượng thị giác giảm đi mà Reverie vẫn là nơi dành cho câu chuyện và mối quan hệ.

Sự cân bằng này đặc biệt quan trọng trong roleplay. Một cuộc trò chuyện không phải bảng cài đặt. Người dùng đọc tin nhắn dài, nhận ra thay đổi tinh tế trong giọng điệu và ở lâu trong cùng một màn hình. Chữ và nền phải thoải mái sau hai mươi phút, không chỉ đẹp trong ảnh chụp.

Kiểu chữ dành cho việc đọc lâu

Một thay đổi quan trọng nhưng ít phô trương là chúng tôi đã củng cố phân cấp chữ.

Tiêu đề lớn vẫn giàu biểu cảm, còn nội dung chính có trọng lượng chắc chắn hơn. Nhãn quan trọng, điều hướng và hành động dùng độ đậm dễ quét mắt. Chữ phụ vẫn lùi lại nhưng không nhạt đến mức khó đọc.

Nguyên tắc rất đơn giản:

Văn bản dài cần bình tĩnh và vững vàng.
Hành động phải được nhận ra trước khi đọc mọi nhãn.
Thông tin hỗ trợ có thể lùi lại nhưng không biến mất.
Trang phải dễ đọc trên nhiều màn hình, chủ đề và điều kiện ánh sáng.

Kiểu chữ tốt không đòi hỏi sự chú ý; nó giúp duy trì sự chú ý.

Một ngôn ngữ thành phần trên toàn sản phẩm

Đây không phải thay giao diện từng trang. Chúng tôi xây lại ngôn ngữ thành phần dùng chung bên dưới sản phẩm.

Nút, thẻ, hộp thoại, menu, tab, biểu mẫu, bảng, tooltip, thông báo, ngăn kéo, popover và điều hướng giờ dùng cùng quy tắc cho:

độ bo góc và tương phản đường viền
màu và độ nổi của bề mặt
trạng thái focus, hover và nhấn
độ đậm chữ và khoảng cách
màu mang ý nghĩa

Sự nhất quán này quan trọng hơn một lựa chọn hình ảnh đơn lẻ. Khi cùng một hành động trông và hoạt động giống nhau ở mọi nơi, giao diện cần ít công sức diễn giải hơn. Hành động nguy hiểm trông nguy hiểm, lựa chọn đã chọn trông được chọn, còn hành động chính dễ tìm mà không cần mọi nút cạnh tranh.

Chúng tôi cũng thêm các biến thể dùng chung cho trạng thái nổi bật và thành công, thay vì để mỗi tính năng tự tạo gradient hoặc màu riêng.

Phần khó: tìm các ngoại lệ

Cập nhật thành phần nút không tự động cập nhật mọi nút.

Sản phẩm tích lũy các quyết định cục bộ: thẻ giá có đường viền riêng, hộp phần thưởng có ánh sáng đặc biệt, cửa sổ chia sẻ có nền riêng hoặc thẻ tự xây lại hiệu ứng hover. Chính các ngoại lệ này khiến một lần thiết kế lại thiếu nhất quán.

Vì vậy, việc kiểm tra không dừng ở thư viện thành phần. Chúng tôi đưa các giao diện tùy chỉnh đáng sửa trở lại ngôn ngữ chung: trang tiếp thị, luồng thanh toán, phần thưởng, thành tích, thẻ nhân vật và truyện, hộp chia sẻ, điều hướng, trạng thái trống, banner và màn hình tiện ích ít được ghé thăm.

Không phải mọi ngoại lệ đều bị xóa. Một số khoảnh khắc cần bản sắc mạnh để thể hiện ăn mừng, khẩn cấp, độ hiếm hoặc trạng thái. Giờ đây chúng mở rộng hệ thống thay vì bỏ qua nó.

Ít trang trí hơn, tương tác rõ hơn

Chúng tôi loại bỏ nhiều hiệu ứng trông có vẻ tương tác nhưng không cung cấp thông tin hữu ích.

Bóng nặng không còn trên mọi thẻ. Chuyển động hover tiết chế hơn. Gradient dành cho lúc cần nhấn mạnh. Đường viền cho thấy cấu trúc mà không đóng mọi nội dung vào một hộp mới.

Trong khi đó, trạng thái tương tác thật trở nên rõ hơn:

Lựa chọn đã chọn thể hiện trạng thái bằng hình ảnh và ngữ nghĩa.
Focus bằng bàn phím dễ theo dõi hơn.
Thẻ tương tác có hover và focus nhất quán.
Nút truyền đạt thứ bậc qua biến thể dùng chung.
Hộp thoại và menu tách khỏi nền mà không xa lạ với sản phẩm.

Giảm trang trí tạo thêm chỗ để cải thiện phản hồi. Giao diện chuyển động ít hơn nhưng truyền đạt nhiều hơn.

Khả năng tiếp cận là một phần của hệ thống hình ảnh

Hệ thống thiết kế chưa hoàn chỉnh nếu chỉ mô tả thành phần khi dùng chuột.

Chúng tôi xem lại vòng focus, hành vi bàn phím, ngữ nghĩa lựa chọn, độ tương phản và thẻ tương tác. Một số điều khiển giờ báo trạng thái nhấn hoặc chọn rõ hơn cho công nghệ hỗ trợ. Mục truyện hoạt động như liên kết có thể được focus và mở bằng bàn phím. Các điều khiển chung theo cùng một logic focus.

Những thay đổi này cố ý tinh tế. Khả năng tiếp cận không nên là chế độ riêng phủ lên sản phẩm; nó phải có trong hành vi mặc định.

Nền tảng tốt hơn cho những gì tiếp theo

Kết quả giá trị nhất không phải một màu, độ bo hay bóng cụ thể. Đó là sản phẩm có ít câu trả lời mâu thuẫn hơn cho cùng một câu hỏi thiết kế.

Khi xây tính năng mới, chúng tôi không phải quyết định lại hộp thoại, trường nhập hay thẻ đã chọn từ đầu. Hệ thống đã có câu trả lời. Công việc nhanh hơn và trải nghiệm dễ đoán hơn.

Nhất quán không có nghĩa mọi màn hình giống nhau. Nó tạo kỳ vọng ổn định để nội dung thay đổi mà giao diện vẫn quen thuộc.

Điều chúng tôi mong bạn cảm nhận

Lý tưởng nhất là ban đầu bạn không nhận ra quá nhiều.

Reverie chỉ cần dễ đọc hơn, tĩnh lặng hơn khi điều hướng và liền mạch hơn từ khám phá đến trò chuyện, sáng tạo và công cụ tài khoản. Hành động quan trọng xuất hiện sớm hơn, điều khiển phụ bớt tranh sự chú ý và phiên dài ít gây mỏi mắt hơn.

Nhân vật vẫn giàu biểu cảm. Câu chuyện vẫn có bầu không khí. Khoảnh khắc đáng ăn mừng vẫn có thể rực rỡ.

Giao diện chỉ hiểu rõ hơn khi nào nên lên tiếng—và khi nào nên đủ yên để mọi thứ khác trở nên quan trọng.

Hệ thống thiết kế mới hiện đã trải rộng toàn bộ Reverie. Nếu có điều gì tốt lên rõ rệt—hoặc vẫn chưa đúng chỗ—hãy chia sẻ với chúng tôi trong cộng đồng Discord.