Lớp học UIF
User Interface Components
Buổi 2
Buổi 6: Typography (II)
Buổi 6: Typography (II)
Buổi 2: UI Component
Buổi 7: Color (I)
Buổi 3: Layout & Principle (I)
Buổi 4: Layout & Principle (II)
Buổi 5: Typography (I) Quiz Test
Buổi 8: Color (II)
Buổi 9: Review & Quiz Test Chia sẻ lộ trình phát triển Buổi 10: Practicing Test
1. OBJECT Các giá trị cơ bản
Kích thước Size
Height: 80p
Chiều cao (H) và chiều rộng (W) xác định kích thước của một đối tượng
Width: 140p
1. OBJECT Các giá trị cơ bản
0 0
Vị trí
Y=216
Position là thông số đặt trên trục X và Y, xác định bởi khung artboard chứa object đó. Chỉ số X là vị trí của object trên trục ngang, và Y là vị trí của object trên trục dọc.
X=352
1. OBJECT Các giá trị cơ bản
Vị trí Position Đối với những đối tượng có hình dạng đặc biệt sẽ dựa theo vị trí của hộp (bounding-box) chứa đối tượng đó.
Bounding-box
1. OBJECT Các giá trị cơ bản
1. OBJECT Các giá trị cơ bản
Bán kính viền Border Radius Giá trị càng lớn, thì độ bo góc của đối tượng càng lớn. Bạn có thể áp dụng giá trị này cho tất cả các góc cùng một lúc hoặc đặt chúng cho riêng từng góc.
1. OBJECT Các giá trị cơ bản
1. OBJECT Box Model
Fill
Trống
Có màu
Gradient/Linear
Hình ảnh
1. OBJECT Box Model
1. OBJECT Box Model
Border
Inner-border Hướng vào trong
Center-border Hướng từ trung tâm
Center-border Hướng ra ngoài
1. OBJECT Box Model
1. OBJECT Box Model
Outer Margin
Inner Margin (Padding)
Border
1. OBJECT Box Model
Content
2. ATOMIC DESIGN Giới thiệu
Khái niệm
Atomic Design là phương pháp thiết kế giao diện, trong đó Designer sẽ ưu tiên thiết kế các thành phần riêng lẻ trước, sau đó kết hợp chúng lại với nhau, thay vì thiết kế cả trang từ đầu.
atomicdesign.bradfrost.com
2. ATOMIC DESIGN Giới thiệu
Atom là thành phần nhỏ nhất, cơ bản nhất và không thể nhỏ hơn nữa.
Cấp độ
2. ATOMIC DESIGN Giới thiệu
Molecule gồm các Atom kết hợp lại với nhau, cùng các phần tử bên ngoài.
Cấp độ
2. ATOMIC DESIGN Giới thiệu
Organism nhóm các Molecule giống nhau hoặc khác nhau để tạo thành một thành phần hoàn chỉnh của một giao diện
Cấp độ
2. ATOMIC DESIGN Giới thiệu
Template là kết hợp các Organism với nhau tạo thành các trang.
Cấp độ
2. ATOMIC DESIGN Giới thiệu
Page là các trang mẫu cụ thể, kết hợp với nội dung thực tế để Designer có thể kiểm tra xem chúng hoạt động như thế nào.
Cấp độ
2. ATOMIC DESIGN Giới thiệu
Cấp độ
2. ATOMIC DESIGN Lợi ích
Quy mô
Hiệu quả
Bạn đang thiết kế một sản phẩm (hoặc các sản phẩm)
Bạn có muốn các Visual Designer, UX Designer, UI Designer và
có nhiều màn hình không?
Developer làm việc nhanh hơn và tiết kiệm thời gian hơn không?
(Các) sản phẩm của bạn có phát triển đáng kể không?
Nhất quán
Teamwork
Bạn có muốn sản phẩm của mình có thương hiệu,
Bạn có các dự án, trong đó có nhiều nhà thiết kế làm việc
giao diện và trải nghiệm nhất quán không?
cùng lúc trên cùng một dự án không?
Sản phẩm của bạn hiện có 20 kiểu nút khác nhau không?
2. ATOMIC DESIGN Lợi ích
2. ATOMIC DESIGN Lợi ích
2. ATOMIC DESIGN Component
Component là thuật ngữ mang ý nghĩa là bộ phận, thành phần hoặc yếu tố cấu thành của một hệ thống.
Khái niệm
2. ATOMIC DESIGN Component
Khái niệm
2. ATOMIC DESIGN
Phân loại
Component
Button
Text Input
Checkbox
Toggle
Radio Button
Process Tracker
2. ATOMIC DESIGN
Phân loại
Component
Form
Card
Divider
2. ATOMIC DESIGN Component
Phân loại
2. ATOMIC DESIGN Component
Trạng thái
2. ATOMIC DESIGN
Trạng thái
Component
Enabled
Actived
Disabled
Selected
2. ATOMIC DESIGN
Trạng thái
Component
On / Off
Error
Hover
Pressed