UI ELEMENTS

1. BUTTON : Nút bấm cho phép người dùng kích hoạt hành động 1 cách nhanh chóng
bằng cách nhấn vào nút hoặc nhấn vào 1 phím tương ứng

* Các loại Button

- Nút tiêu chuẩn (standard button): Là các nút cơ bản thường dùng

VD: SAVE, CANCEL, EDIT, OK…

Trạng thái hiển thị của các nút cơ bản thường dùng

+ Nút được định dạng để thể hiện mức độ nhấn mạnh: Thể hiện qua màu sắc của button
cần nhấn mạnh

+ Nút được làm động thể hiển thị nội dung ẩn: Ví dụ như có thể thay đổi từ label sang
icon để phù hợp với kích thước của button

+ Nút có thể xuất hiện cùng Label:

+ Nút có thể là 1 icon: Để người dùng có thể chỉ cần nhìn vào icon là biết button đó thể
hiện điều gì

+ Nút có thể sử dụng cả icon và label: Sử dụng trong trường hợp icon đặc biệt, ít sử dụng
người dùng có thể nhìn vào label để biết button đó thể hiện điều gì

- Nút Nhóm (GROUP) : Cho phép người dùng lựa chọn 1 lựa chọn trên 1 nhóm nhỏ
- Nút điều kiện: Cho phép người dùng lựa chọn giữa các điều kiện

- Nút biển đổi:

+ Nút được định dạng để liên kết đến 1 link nào đấy

+ Nút có màu sắc, kích thước khác nhau

+ Một nút có thể định dạng để chuyển đổi tắt – bật

* Hiệu ứng của button:

- Normal : Ở trạng thái hiển thị mặc định

- Hover: Khi di chuột qua thì cần phải có hiệu ứng

- Focus: Khi trỏ chuột vào button thì cần thể hiện được màu sắc nổi bật, rõ ràng

* Phân loại trạng thái button

- Positive: Một nút gợi ý 1 kết quả tích cực, với những gợi ý tích cực cần lựa chọn button
với màu sắc mang tính khích lệ: Màu xanh.

- Negative: Một nút gợi ý về kết quả tiêu cực, nên chọn button có màu sắc mang tính
cảnh báo : Đỏ, cam.

- Neutral: Một nút mang tính trung lập có thể giúp người dùng quay trở lại màn hình, nên
chọn button có màu sắc mặc định (normal)

2. Container: Là yếu tố thiết kế chứa các nội dung hiển thị để có chiều rộng hợp lý phù
hợp với kích thước màn hình.
VD: Hearder, footer …

1 container có thể chứa nhiều container khác

3. Divider: Đường phân chia nội dung trang hiển thị

* Các loại phân chia

- Phân chia cơ bản:

- Phân chia dọc:

- Phân chia ngang: Sẽ tự động thay đổi kích thước của nội dung để phù hợp với chiều dài
của văn bản cần hiển thị

4. Flag : Lá cờ biểu tượng cho 1 quốc gia

Một lá cờ có thể sử dụng mã 2 chữ số của nước đó, tên đầy đủ hoặc 1 biệt hiệu phổ biến
thường dùng

5. Header: Là tiêu đề cung cấp tóm tắt nội dung của văn bản
* Phân loại

- Tiêu đề trang (Page header): Tiêu đề được đinh hướng để cung cấp cho hệ thống về cấp
bậc nội dung trong 1 trang
- Tiêu đề nội dung: Tiêu đề cung cấp tầm quan trọng của các nội dung

- Biểu tượng tiêu đề: Một tiêu đề dùng để nhấn mạnh biểu tượng

- Tiêu đề phụ: Tiêu đề có thể được dùng để ghi nhãn nội dung hoặc để nhấn mạnh

* Nội dung tiêu đề

- Image: 1 tiêu đề có thể chứa ảnh

- Icon: Tiêu đề có thể chứa icon

- sub header: Tiêu đề chứa tiêu đề phụ

6. Icon:
- Là biểu tượng dùng để thể hiện ý nghĩa, chức năng mà nó đại diện. Icon phải đơn giản,
dễ hiểu và thống nhất trong toàn bộ ứng dụng
- Được sử dụng khi có quá nhiều nhóm đối tượng cần hiển thị.
- Tùy từng nhóm đối tượng sẽ sử dụng icon phù hợp với nhóm đó
VD: Trên bản đồ sử dụng icon biểu thị các đối tượng trên bản đồ

7. Image
Là hình ảnh đại diện đồ họa cho 1 ứng dụng nào đó. Có thể chỉ là 1 ảnh đại diện hoặc 1
định dạng để liên kết đến nội dung khác.
8. Input: Nhập dữ liệu đầu vào

* Các loại input

- Input cơ bản: Cho phép người dùng dễ dàng nhập dữ liệu đầu vào

- Checkbox:
- Combobox:

- Radio buttons

* Các trạng thái của input

- Input cơ bản : Ở trạng thái mặc định

- Focus: cho thấy sự tương tác với đầu vào

- Loading: Biểu tượng đầu vào đang tải dữ liệu

- Disabled: Biểu tượng cho thấy nó đang bị vô hiệu hóa

- Error: Biểu tượng đầu vào cho thấy bị lỗi

9. Label : Là nhãn hoặc tiêu đề của 1 nội dung, hoặc 1 nhóm nội dung

* Hiển thị nhãn

- Là label :

- Image: Nhãn dùng để nhấn mạnh hình ảnh

- Pointing: Chỉ đến nội dung

- Corner : Hiển thị trong góc của 1 nội dung

- Tag: Xuất hiện như 1 thẻ

- Ribbon: Một nhãn có thể xuất hiện như là một dải ruy băng tự gắn nó với một phần tử

- Attached: Đính kèm nội dung

- Horizontal: Một nhãn ngang dùng để ghi nhãn nội dung cùng phía nó theo chiều ngang

- Floating: Hiển thị nổi trên nội dung khác

10. List:

- Được sử dụng để nhóm các nội dung liên quan

- Được sử dụng chủ yếu trong các hộp thoại, biểu đồ nhất là trên di động

- Các mục trong danh sách hiển thị đơn giản, có tiêu đề và thông tin

* Phân loại

- Danh sách nhóm các nội dung liên quan

- Bulleted: Danh sách đánh dấu với các mục gạch đầu dòng

- Ordered: Danh sách được đánh dấu theo số thứ tự

- Link: Danh sách được định dạng để liên kết điều hướng
11. Loader: Thông báo cho người dùng phải chờ đợi 1 hoạt động đang diễn ra để hoàn
thành

- Được sử dụng trong quá trình xử lý dữ liệu hoặc chờ đợi 1 tác vụ hoàn thành

- Hiển thị: Tùy theo từng giao diện để sử dụng cho phù hợp: icon, text, hoặc dùng cả icon
và text

12. Rail: Được sử dụng để hiển thị nội dung đi kèm bên ngoài ranh giới của giao diện
chính một trang web

13. Reveal:

Ẩn hay hiện nội dung cần bổ sung

* Cách hiện thị nội dung

- Fade: Khi kích vào nội dung màn hình phủ biến mất để lộ nội dung bên dưới
- Move: Có thể di chuyển theo 1 hướng bất kỳ để hiện thị nội dung

- Rotate: Xoay để hiển thị nội dung bên dưới

14. Segment: Một phân khúc được sử dụng để tạo ra 1 nhóm các nội dung liên quan

* Các loại Segment

- Segment: Một đoạn nội dung

- Raised: Được định dạng để đẩy trang lên

- Xếp chồng (Stacked): Được định dạng để hiển thị nó chứa nhiều trang
- Piled: Được định dạng để hiển thị nó có nhiều trang xếp lên nhau

- Vertical Segment: Được định dạng phân đoạn để được sắp xếp như một phần của một
nhóm.

15. Step: Một bước cho thấy tình trạng hoàn thành một hoạt động trong một loạt các hoạt
động
II. Collections

1. Breadcrumb: La đường link phân cấp để cho người dùng biết mình đang đứng ở đâu
trong hệ thống và từ đó có thể di chuyển thuận lợi từ trang này sang trang khác trong 1
website.

* Nội dung của Breadcrumb

- Divider: Đường dẫn có thể chứa sự phân chia để cho thấy mối quan hệ giữa các phần,
có thể được định dạng như là một biểu tượng hoặc văn bản.

- Section: Đường dẫn được định dạng như 1 liên kết hoặc văn bản

- Link: Một phần có thể có thể kết nối hoặc có chứa một liên kết

2. Form : Được sử dụng để trình bày dữ liệu và cho phép người dùng nhập dữ liệu 1 cách
có cấu trúc .

VD: Một form có thể chứa các yếu tố giao diện người dùng như: Header, Label, input,
button, checkbox…
* Các loại form

- Form đơn: Thể hiện được ý nghĩa của trường cần nhập chứa 1 nhãn và 1 đầu vào

- Fields: Một tập hợp được nhóm lại với nhau

- Form nhập theo khoảng : Đối với định dạng ngày, tháng, năm

- Text Area: Nhập theo vùng mở rộng

- Checkbox: 1form có thể chứa 1 checkbox

- Radio Checkbox: 1 form có thể bao gồm 1 radio checkbox

- Dropdown: 1 form có thể bao gồm 1 dropdown

- Multiple Select: Bao gồm nhiều lựa chọn cho 1 form đơn
- Message: 1 form có thể chứa tin nhắn

3. Grid: Một tấm lưới dùng để hài hòa không gian trong 1 bố cục

4. Menu: Tập hợp các nội dung khác nhau vào chung 1 nhóm để người dùng dễ phân
biệt.
5. Message: Tin nhắn hiển thị thông tin giải thích nội dung

- Dùng để thông báo thành công 1 tác vụ, báo lỗi..

- Dùng để xác nhận quyết định của người dùng

* Các loại thông báo.

- Message cơ bản:

- List message: Thông báo theo 1 list

- Icon message: 1 thông báo có thể chứa icon

- Dismissable Block: Thông báo người dùng có thể chọn ẩn

6. Table: Bảng hiển thị 1 bộ dữ liệu được nhóm thành hàng.

* Các loại bảng

- Bảng cơ bản:

- Definition: Được định dạng để nhấn mạnh cột đầu tiên xác định nội dung hàng
- Structured: 1 bảng được định dạng để hiển thị dữ liệu có cấu trúc phức tạp

* Cảnh báo trên bảng

- Positive / Negative: Một ô hoặc hàng có thể cho phép người dùng biết một giá trị là tốt
hay xấu
- Error: 1 ô hoặc hàng có thể gây chú ý đến 1 lỗi hoặc 1 giá trị null

- Warning: 1 ô hoặc hàng có thể cảnh bảo người sử dụng

- Active: 1 ô hoặc hàng có thể thay đổi hoặc lựa chọn bởi người sử dụng
- Disabled: 1 ô có thể bị vô hiệu hóa

* Các kiểu Biển đổi hiển thị bảng

- Bảng cơ bản:

- Striped Table: Bảng sọc theo kiểu ngựa vằn, giúp người đọc dễ hiểu
- Bordered Table: Bao 1 đường kẻ ở dưới theo từng dòng của bảng

- Border Around a Table: Tạo viền xung quanh bảng

- Hoverable Table: Đổi màu hàng khi chuột đi qua

- Hover Colors: Đổi màu khi chuột đi qua

III. VIEWS

1. Advertisement: Một quảng cáo của bên thứ 3 của nội dung quảng cáo.

2. Card: Là thẻ trong đó có chứa các yếu tố giao diện: Header, footer, link ….

3. Comment: Nhận xét hiển thị phản hồi của người dùng về nội dung trang wed hoặc 1
bài viết
4. Feed: Trình bày hoạt động người dùng theo thời gian

5. Item: Là mục trình bày phần lớn các nội dung trang hiển thị

* Nội dung của item

- Image

- Content
- Header

- Metadata

- Link

- Description

- Extra Content

- Rating

6. Statistic: Thống kê giá trị hiện tại của 1 thuộc tính

- Thống kê đơn

- Thống kê nhóm

IV: Modules

1. Accordion: Được sử dụng để hiển thị (và ẩn) nội dung HTML..

* Các kiểu Accordion

- Nested Accordions: Một accordion có thể có nhiều cấp độ nội dung lồng nhau. Nội
dung có thể được đặt trong một accordion lồng nhau hoặc chỉ đơn giản là một mức độ
tiêu đề và nội dung
- Changing Trigger
- Form Fields:

- Accordion Menu

2. Checkbox: Cho phép người dùng chọn một hoặc nhiều giá trị từ một tập các tùy chọn
3. Dimmer: Làm mờ các nội dung khác để tập trung vào nội dung cụ thể

4. Dropdown: Lựa chọn thả xuống cho phép người dùng chọn một giá trị từ một loạt các
tùy chọn

* Các loại dropdown

- Dropdown đơn giản:

- Selection: Lựa chọn trong 1 form

- Multiple Selection: Cho phép chọn nhiều lựa chọn

- Search Dropdown: Tìm kiếm theo gợi ý

- Search In-Menu: Tìm kiếm theo menu

5. Embed : Một thẻ nhúng nội dung từ các trang web khác như video trên YouTube

6. Modal: là một cửa sổ hộp thoại / popup được hiển thị trên trang hiện tại.
* Nội dung Model

- Header

- Image

- Content

- Actions

7. Nag: Là một thông điệp quan trọng, vẫn tồn tại cho đến khi người dùng loại bỏ

8. Pop up: là một hộp thoại nhỏ xuất hiện trên trang web mà chúng ta đang xem để cung
cấp thông tin hoặc hiển thị một tin quảng cáo

9. Progress: Tiến trình cho thấy sự hoạt động để hoàn thành 1 nhiệm vụ
10. Rating: Một đánh giá thể hiện sự quan tâm đến nội dung của 1 bài viết hoặc 1 giao
diện nào đó.

11. Search: Cho phép người dùng truy vấn kết quả từ một lựa chọn các dữ liệu

12. Shape: Là 1 vật thể 3 chiều được hiển thị trên mặt phẳng 2 chiều

13. Sidebar: Là nội dung nằm bên trái hay bên phải hoặc cả 2 bên tùy theo từng giao
diện. Khi click sẽ hiển thị đúng như sắp xếp
14. Sticky: Là mục được cố định trên giao diện khi thực hiện scroll

15. Tab: Chuyển hướng thẻ ngang hàng và không phụ thuộc vào nhau

16. Transition: Là hiệu ứng hiển thị thường được sử dụng để di chuyển nội dung trong
và ngoài tầm nhìn.