UX trong 60 Giây: Sử dụng Thư viện các Thành phần

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng bạn đến với bài giới thiệu siêu nhanh này về việc sử dụng thư viện các thành phần; rất hữu ích cho những nhà thiết kế, phát triển và cũng như những người dùng. Hãy bắt đầu nào!

Thư viện các Thành phần trong 60 Giây

Mỗi tương tác mà người dùng gặp phải, họ đều phải học, tạo ra một gánh nặng nhận thức. Điều đó đặc biệt khó khăn đối với một người dùng nếu các thành phần của UI (giao diện người dùng) trông gần như hoàn toàn giống nhau, nhưng lại khác. Người dùng sau đó đặt ra các câu hỏi như "tại sao những cái này lại khác?", "điều tương tự sẽ xảy ra nếu tôi nhấn hai nút này chứ?"

Bắt đầu bằng cách xác định các đối tượng thông thường trong thiết kế của bạn, xác định chúng dưới dạng các thành phần, sau đó (khi bạn đang thiết kế các màn hình), bạn có thể bắt đầu kéo chúng trở lại. Bằng cách này bạn sẽ tạo ra tính nhất quán hơn. Bạn thậm chí có thể ngạc nhiên bởi lợi ích mà bạn có thể nhận được bằng cách sử dụng các đối tượng tương tự để giải quyết các vấn đề khác nhau.

Sử dụng Sketch

Trên thực tế, bạn có thể tạo ra các biểu tượng bên trong dự án Sketch của bạn, hoặc sử dụng plugin Craft của InVision. Để thật sự thấy được giá trị của thư viện các thành phần, hãy làm việc với các nhà phát triển của bạn để có được những thứ tương tự được định nghĩa trong code.

Cũng không nhất thiết phải là hình ảnh thuần túy; bạn nên xác định các trạng thái khác nhau của từng đối tượng, và thậm chí các tương tác phức tạp.

Khi sử dụng một thư viện các thành phần, nhà thiết kế và nhà phát triển có thể sử dụng cùng một đối tượng nhiều lần để giải quyết các vấn đề khác nhau. Và đối với người dùng, họ sẽ bắt gặp các thành phần quen thuộc, mất ít thời gian hơn để tìm ra cách sử dụng ứng dụng hoặc trang web của bạn.

Những UI Kit Điển hình

Bạn sẽ thấy một vài UI Kit trong video này; hãy tải về chúng ngay hôm nay như một phần trong gói thuê bao Envato Elements của bạn!

Simple

Hơn 100 thành phần Photoshop có thể chỉnh sửa và thay đổi kích cỡ, dựa trên các hình dạng vector rõ ràng. Các layer được nhóm và tổ chức tốt, các thành phần dễ dàng thay đổi kích cỡ và điều chỉnh, cũng như tinh chỉnh màu sắc.

Zoomie

Ứng dụng Mạng Xã hội trên điện thoại di động cho Sketch; Tất cả các art board màn hình được tổ chức và phân lớp tốt.