4 Yếu tố UI Element bạn cần biết trong thiết kế giao diện 

UI Element là khái niệm không còn xa lại gì với những người làm việc lâu năm trong lĩnh vực thiết kế giao diện. Tuy nhiên thì đây là khái niệm khá mới mẻ đối với những bạn mới vào ngành hoặc chưa có nhiều kinh nghiệm. Trong bài viết này, TELOS sẽ giải thích chi tiết về khái niệm này và đưa ra cho bạn danh sách những thành tố UI phổ biến hiện nay.

Bài viết liên quan: 

• Ngành Ui Design Và Những Điều Bạn Cần Biết Về Nó
• Figma – Sau Hơn Một Năm Sử Dụng Của Một Ui Designer
• Design System – Công Cụ Chưa Được Biết Đến Nhiều

UI Element là gì? 

1. UI DESIGN là gì?

Đã được nhắc đến khá nhiều trong các bài viết của TELOS. UI Design (hay thiết kế giao diện người dùng) là quá trình tạo ra các “điểm liên hệ” giữa người dùng và ứng dụng, trang web hay phần mềm. Tương tự như graphic và web design, UI Designer là một Visual Designer (nhà thiết kế trực quan). 

Để hiểu rõ hơn về khái niệm này, mời bạn đọc qua bài viết Hé lộ sự khác biệt giữa UI UX design, bạn đã biết?! Tại đây mình có chia sẻ tường tận hơn về UI Design. Quay trở lại với nội dung chính, chúng ta sẽ bàn về một khía cạnh nâng cao hơn, đó là “UI Element”.

UI element – các thành tố trong thiết kế giao diện

1.1 Vậy UI Elements là gì?

Để bắt đầu, mình giải thích một khái niệm được gọi là “Atomic Design”. Đây là một khái niệm được Brad Frost – một UI Designer đề xuất vào năm 2013. Ông lấy hóa học để giải thích về khái niệm này, cụ thể: 

“Trong thế giới tự nhiên, các nguyên tố nguyên tử kết hợp với nhau để tạo thành phân tử. Những phân tử này có thể kết hợp hơn nữa để tạo thành các sinh vật tương đối phức tạp.”

Áp dụng quy luật này vào thiết kế giao diện. Atomic Design là một phương pháp bao gồm năm giai đoạn riêng biệt làm việc cùng nhau để tạo ra các hệ thống thiết kế giao diện theo cách có chủ ý và có thứ bậc hơn. Năm giai đoạn của thiết kế nguyên tử là:

• Atom – nguyên tử
• Molecule – phân tử
• Organisms – sinh vật
• Templates – bản mẫu
• Pages – trang

Thiết kế nguyên tử tạo ra các hệ thống thiết kế giao diện hiệu quả.

Theo đó, phương pháp này ứng dụng vào thiết kế giao diện để quy trình thiết kế được đi theo trình tự “từ bé đến lớn”. Nói dễ hiểu, để tạo ra một Form đăng nhập, bạn cần các yếu tố như icon, khung content, placeholder…

Vậy, tại sao mình lại đề cập đến phương pháp này? Nếu bạn chưa biết, thì một phương pháp được tạo ra với mục đích “Áp dụng lên một đối tượng, sự việc nào nào đó”. Và trong trường hợp này, phương pháp Atomic Design được tạo ra để áp dụng lên các UI Element.

Sự biến đổi của các UI Element theo phương pháp Atomic Design

1.2. Khái niệm về UI Element

Tên tiếng việt “các phần tử giao diện người dùng” là những phần tử được sử dụng để xây dựng ứng dụng hoặc trang web. Bản chất của chúng là cung cấp cho người dùng khả năng tương tác vào giao diện, tạo ra các điểm tiếp xúc cho người dùng khi họ điều hướng xung quanh.

Với vai trò là nhà thiết kế giao diện, bạn sẽ sử dụng các UI Element để tạo ra ngôn ngữ hình ảnh và đảm bảo tính nhất quán trên thiết kế của mình — làm cho sản phẩm trở nên thân thiện, dễ điều hướng và giúp cho người dùng không cần suy nghĩ quá nhiều.

UI Element là tất cả những được sử dụng để cấu thành nên giao diện đồ họa

2. Những nhóm yếu tố cần biết trong UI Design

Có rất nhiều các dạng phần tử UI khác nhau, nhưng chung quy lại chúng thuộc 4 nhóm sau: 

• Input Controls: cho phép người dùng nhập thông tin vào hệ thống. Ví dụ: nếu bạn cần người dùng cho bạn biết họ đang ở quốc gia nào, thì bạn sẽ cần một Input Controls để biết được thông tin này. 
• Navigational component: giúp người dùng di chuyển xung quanh một ứng dụng hoặc trang web. Các thành phần điều hướng phổ biến mà bạn hay gặp như Khung tìm kiếm, Tags, Icons…
• Informational component: như cái tên, các thành phần này mục đích để chia sẻ thông tin với người dùng. 
• Container: được thiết kế để chứa các phần tử có chiều rộng tối đa hợp lý dựa trên kích thước màn hình của người dùng. Điều này hữu ích khi kết hợp với các UI Element khác như lưới hoặc menu để hạn chế chiều rộng của chúng ở kích thước hợp lý để hiển thị.

Được rồi, bây giờ chúng ta sẽ đi chi tiết vào từng nhóm để chi tiết hơn về các phần tử giao diện, đầu tiên là:

2.1. Input Controls

Checkboxes: một ô vuông nhỏ trên màn hình người dùng có thể chọn hoặc bỏ chọn. Hộp kiểm cho phép người dùng chọn một trong nhiều tùy chọn từ danh sách. Người dùng có thể kiểm tra họ đã chọn hộp kiểm chưa bằng một dấu tích nhỏ! Một số trường hợp sử dụng phổ biến cho thành phần này bao gồm biểu mẫu và database.

Radio button: cho phép người dùng chỉ chọn một trong số các tùy chọn loại trừ lẫn nhau đã được xác định trước.

Input control

Dropdown lists: cho phép người dùng chọn một mục từ danh sách “dropdown” sau khi nhấp vào mục đó. 

List boxes: UI Element cho phép chọn nhiều mục cùng một lúc, nhưng nhỏ gọn hơn và có thể hỗ trợ danh sách các tùy chọn dài hơn nếu cần.

List boxes

Buttons: các nút cho người dùng biết rằng họ có thể thực hiện một hành động cụ thể. Như xác nhận, đồng ý hoặc gửi đi…

Buttons

Dropdown Button: nút với nhiều tùy chọn khác nhau. 

Dropdown Button

Toggles: đơn giản là cái công tắc. Bật hoặc tắt

Toggles

Text fields: Trường văn bản cho phép người dùng nhập văn bản. Nó có thể cho phép một dòng hoặc nhiều dòng văn bản.

Text fields

Date and time pickers: cho phép người dùng chọn thời gian (ngày/tháng/năm…). Bằng cách sử dụng trình chọn, thông tin được định dạng và nhập vào hệ thống một cách nhất quán.

2.2. Navigational Components

Search Field: UI Element cho phép người dùng nhập từ khóa hoặc cụm từ và gửi tìm kiếm với mục đích nhận được các kết quả phù hợp nhất. Thông thường các trường tìm kiếm là các hộp văn bản một dòng và thường đi kèm với nút tìm kiếm.

Search Field

Breadcrumb: Được trình bày dưới dạng một bản đồ lũy tiến giúp người dùng xác định họ đang ở đâu trên 1 trang web. Thường được đặt ở đầu một trang web, Breadcrumbs cho phép người dùng xem vị trí hiện tại của họ và các trang tiến hành. Người dùng cũng có thể nhấp vào chúng để di chuyển giữa các trang. Nếu bạn là một người học UI Design hoặc SEO thì hẳn không còn xa lạ gì với thành tố này. 

Breadcrumb

Pagination: Thông thường được tìm thấy gần cuối trang, Pagination tổ chức nội dung thành các trang. Pagination cho phép người dùng biết họ đang ở đâu trong một trang và nhấp để chuyển sang các trang khác.

Pagination

Tags: UI Element này về cơ bản là các nhãn giúp đánh dấu và phân loại nội dung. Chúng thường bao gồm các từ khóa có liên quan giúp dễ dàng tìm thấy và duyệt qua phần nội dung tương ứng. Tags thường được sử dụng trên các trang web xã hội và blog.

Tags

Sliders: Thanh trượt được sử dụng để chọn một giá trị hoặc một phạm vi giá trị. Bằng cách kéo thanh trượt bằng ngón tay hoặc chuột, người dùng có thể điều chỉnh một cách nhanh chóng một giá trị như khối lượng, độ sáng hoặc phạm vi giá mong muốn khi mua sắm.

Sliders

Icons: Icon là là một UI element phổ biến, Icons những hình ảnh mô phỏng trực quan, được sử dụng để giúp người dùng điều hướng hệ thống. Thông thường, các biểu tượng được liên kết với nhau bởi một style nhất định.

Icons

Image Carousel: cho phép người dùng duyệt qua một tập hợp các content dạng hình ảnh và lựa chọn một content mà họ muốn.

Image Carousel

2.3. Information Components

Notifications: UI Element này là một thông báo cập nhật một cái gì đó mới cho người dùng. Thông báo thường được sử dụng để chỉ ra các mục như hoàn thành nhiệm vụ, thông báo lỗi hoặc cảnh báo.

Progress Bars: cho biết nơi người dùng ở khi họ tiến qua một loạt các bước trong một quy trình. Thông thường, người dùng không thể tương tác với Progress Bars.

Tool Tips: cho phép người dùng nhìn thấy các gợi ý khi họ di chuột qua một đối tượng ít quen thuộc. 

Tool Tips

Message Boxes: một cửa sổ nhỏ cung cấp thông tin cho người dùng và yêu cầu họ phải thực hiện một hành động trước khi họ có thể tiếp tục. 

Modal Window (pop-up): là một hộp nhỏ chứa nội dung hoặc một thông báo yêu cầu bạn phải tương tác với UI Element này trước khi bạn có thể đóng nó và quay lại tiếp tục tương tác với giao diện. 

Modal Window

2.4. Containers

Accordions: cho phép người dùng mở rộng và thu gọn các phần nội dung. Chúng giúp người dùng điều hướng nhanh chóng và tạo ra một không gian rộng rãi hơn. 

Containers

3. Khóa học thiết kế UI tại TELOS

Để sử dụng được các thành tố UI này, bạn phải có một nền tảng kiến thức đủ vững để làm chủ được nó. Trong buổi 5 tại khóa học thiết kế UI tại TELOS, bạn sẽ được làm quen với các thành tố UI được sử dụng nhiều trong thiết kế giao diện. Phương pháp vận dụng nó vào giao diện của bạn. 

3.1. Khóa học dành cho ai

Khóa học dành cho Graphics Designer, Coder, và người đang muốn vào ngành thiết kế giao diện. Bạn nên tham gia khóa thiết kế giao diện với Figma trước để dễ dàng tiếp thu kiến thức tại khóa này hơn. 

3.2. Nhận được gì sau khi học

Khóa học được giảng dạy bởi anh Khuê Đinh. Web Designer tại TELOS và là UI Designer tại J&T. Tại khóa học ui design này, bạn sẽ được làm quen với các yếu tố từ typography, màu sắc, phương pháp làm việc, cách tìm cảm hứng thiết kế và phương pháp phối hợp với Stakeholder để hoàn thành dự án. 

Kết luận

Thiết kế giao diện là một lĩnh vực khá rộng đòi hỏi bạn phải trau dồi liên tục để hiểu rõ hơn về các phương pháp thiết kế, các UI Element và các vận dụng nó trong dự án. Mỗi thành tố UI đều có một vai trò khác nhau mà nếu bạn không vận dụng đúng, thiết kế của bạn sẽ trở thành một “đống hỗn lộn”. Hãy theo dõi TELOS để cập nhật thêm nhiều kiến thức về ngành, xin được đồng hành cùng bạn trên con đường trở thành UI/UX Designer.