Bối cảnh biểu tượng cảm xúc: Thiết kế các chỉ số đáng tin cậy về biểu tượng cảm xúc của HackerNoon

Tại HackerNoon, chúng tôi tin rằng sự minh bạch với người đọc là chìa khóa để xây dựng niềm tin giữa người viết và người đọc. Để mang đến cho người đọc sự minh bạch nhất có thể, chúng tôi muốn tạo ra những cách nhanh chóng và dễ dàng để cung cấp cho người đọc những thông tin mà họ có thể muốn biết về một câu chuyện trước khi đọc nó.

Đây có thể là một việc đơn giản như cho người đọc biết câu chuyện là một mẩu tin tức hay một mẩu ý kiến. Mặt khác, có những điều phức tạp hơn mà chúng tôi có thể muốn truyền đạt tới người đọc, chẳng hạn như liệu người viết có quan tâm đặc biệt đến công ty mà họ đang viết hay không, hoặc liệu họ có sử dụng AI để viết bài hay không.

Để hoàn thành những mục tiêu này, chúng tôi đã tạo Chỉ báo độ tin cậy của Emoji! Hiện có nguồn mở trên Cộng đồng Figma & GitHub .

Thiết kế các chỉ số đáng tin cậy về biểu tượng cảm xúc

Bây giờ, hãy đi sâu vào quá trình thiết kế Chỉ báo độ tin cậy của Emoji. Bản tóm tắt thiết kế ban đầu của David và Nhóm biên tập của chúng tôi bao gồm 22 Chỉ số đáng tin cậy về biểu tượng cảm xúc (đọc có liên quan, Mọi chỉ số đáng tin cậy về biểu tượng cảm xúc trên HackerNoon được giải thích ) được chia thành hai loại: ngữ cảnh/tuyên bố từ chối trách nhiệm và loại nội dung. Ngoài phần mô tả, mỗi chỉ số độ tin cậy còn được gắn một biểu tượng cảm xúc để lấy cảm hứng thiết kế.

Kể từ đây trở đi, chúng tôi (Me & Kiên ) phải phát huy trí tưởng tượng của mình và biến những chỉ báo biểu tượng cảm xúc này thành hiện thực. Theo ngôn ngữ thiết kế của HackerNoon, chúng tôi đã chọn Pixel Art Style. Sau khi khám phá một số tùy chọn về kích thước lưới, chúng tôi đã chọn lưới 24px để tạo pixel vì nó vẫn giữ được mức độ chi tiết mong muốn. Đối với phần mềm được lựa chọn, tôi hơi thiên vị khi sử dụng Adobe Illustrator vì chúng tôi có rất nhiều tùy chọn khi xuất sang các loại tệp khác nhau + sự quen thuộc của tôi với công cụ lưới ( Adobe Photoshop , Aseprite và Corel Draw là một số tốt lựa chọn thay thế).

Quy trình thiết kế pixel art của chúng tôi bao gồm 5 bước, bắt đầu từ các hình dạng cơ bản, vẽ chi tiết, tạo chiều sâu, thêm nét, sau đó hợp nhất các hình dạng và xuất sang các loại tệp khác nhau. Hãy cùng tìm hiểu sâu hơn về các bước này, lấy chỉ báo độ tin cậy của biểu tượng cảm xúc Hài kịch/Châm biếm làm ví dụ.

Bắt đầu với các hình dạng cơ bản

Bất cứ khi nào chúng tôi thực hiện Thiết kế Pixel-Art/8-bit, chúng tôi đều bắt đầu với một hình dạng cơ bản phù hợp với ý tưởng mà chúng tôi có trong đầu. Là một hình elip, trong trường hợp chỉ báo biểu tượng cảm xúc Hài kịch/Châm biếm (được lấy cảm hứng từ biểu tượng cảm xúc '😂').

Bản vẽ chi tiết

Sau đó, chúng ta bắt đầu thêm nhiều chi tiết hơn vào hình dạng chúng ta vừa vẽ (như đặc điểm khuôn mặt trong trường hợp này).

Tạo độ sâu: Điểm sáng và vùng tối

Để làm cho nó chân thực hơn và ít phẳng hơn, chúng tôi thêm điểm sáng và bóng cho khuôn mặt. Trong trường hợp này, nguồn sáng được giả định là ở phía trước và ở giữa, điều này làm cho bóng đổ di chuyển ra các cạnh và các điểm sáng di chuyển vào giữa.

Thêm nét

Để làm cho nó rõ ràng hơn, chúng tôi đã thêm một nét để kết thúc mọi thứ.

Hợp nhất các hình dạng và xuất

Để làm cho chúng dễ sử dụng hơn, chúng tôi đã hợp nhất các hình dạng và xuất chúng dưới dạng cả PNG và SVG.

Sau đó, chúng tôi lặp lại toàn bộ quá trình này thêm 21 lần nữa và kết thúc với các Chỉ báo đáng tin cậy về biểu tượng cảm xúc mà chúng tôi có trên HackerNoon ngày hôm nay.

Sản phẩm cuối cùng: Gói biểu tượng cảm xúc có pixel có nguồn mở

Tóm lại, Chỉ số độ tin cậy của biểu tượng cảm xúc là một bước nữa nhằm tăng cường giao tiếp trực tuyến giữa độc giả và người viết của chúng tôi. Những biểu tượng cảm xúc pixel này không chỉ đóng vai trò là chỉ báo độ tin cậy khi thêm ngữ cảnh vào nội dung mà còn tác động đến niềm tin và mức độ tương tác của người dùng với nội dung. Chúng là ví dụ về cách thiết kế chu đáo có thể truyền tải các khái niệm phức tạp một cách đơn giản nhưng trực quan.

Hãy tham gia cùng chúng tôi trong hành trình tìm kiếm bối cảnh biểu tượng cảm xúc này và thử Các chỉ số đáng tin cậy về biểu tượng cảm xúc của HackerNoon.

Luôn sáng tạo, luôn mang tính biểu tượng.