Mobile design pattern gallery chapter 4 – 5

SEMINAR: GIAO TIẾP NGƯỜI MÁY
Đề tài: Mobile Design Pattern Gallery
Chapter 4 – 5


Overview
Chapter 4: Search, Sort & Filter
I. Search
II. Sort Patterns
III. Filter
Chapter 5: Tools
IV. Toolbar
V. Option
VI. Call to Action Button
VII.Contextual Tools
VIII.Inline Actions
IX. Multi – State Button
X. Bulk Action


Chapter 4: Search, Sort & Filter


I. Search


I.1. Explicit search
Thường được kết hợp với
Auto-complete.

I.2. Auto-complete search
Ứng dụng rộng rãi của các
kiểu hình tìm kiếm trên
trang web và ứng dụng di
động.


I.3. Dynamic search
• Được xem như bộ lọc
tự động.
• Kí tự nhập vào sẽ lọc
những kết quả tồn tại
trong danh sách.


I.4. Scoped search
Giới hạn phạm vi tìm
kiếm để kết quả trả về tốt
nhất.


I.5. Saved and Recent search
• Saved and recent search
để tăng hiệu quả sử dụng
cho người dùng.
• Cho phép lưu lại kết quả
tìm kiếm.


I.6. Search Form

Đặc trưng bởi một mẫu riêng cho vào nhiều tiêu chí tìm
kiếm, và một nút tìm kiếm rõ ràng.


I.7. Search Results/View Results
Kết quả có thể được hiển
thị trong một bảng hoặc
danh sách, trên bản đồ,…


II. Sort Patterns
Cung cấp chức năng sắp xếp kết quả tìm kiếm
tùy theo tiêu chí của người dùng.


II.1. OnScreen sort
Khi chỉ có một vài lựa chọn phân loại, một loại
màn hình có thể cung cấp một đơn giản one-tap


II.2. Sort Form
Đòi hỏi người sử dụng
mở biểu mẫu và lựa
chọn các tiêu chí sắp
xếp.


III. Filter
• III.1. Onscreen Filter
• III.2. Filter Drawer

• III.3. Filter Dialog
• III.4. Filter Form


III.1. Onscreen Filter
• Cung cấp ngay trên
màn hình hiển thị kết
quả.
• Với một lần nhấn,bộ
lọc được áp dụng.


III.2. Filter Dialog
Sử dụng hộp thoại
bộ lọc chứa các tùy
chọn cho bộ lọc.


III.3. Filter Form
Được sử dụng khi có
nhiều tùy chọn để lọc
cho kết quả.


Chapter 5: Tools


I. Toolbar
• Chứa các công cụ
thực hiện hành động

nào đó.
• Là kĩ thuật để cung
cấp hiệu chỉnh và tuỳ
chọn định dạng.


II. Option Menu
Một menu chứa các hành động.


III. Call to Action Button
• Khi chỉ có một hành động
trên màn hình.
•

Đừng ẩn cuộc gọi chính
để hành động trong một
Menu hoặc che giấu nó


IV. Contextual Tools
• Contextual tools có thể
được sử dụng để làm việc
trên một đối tượng cụ thể
trên màn hình.
• Contextual tools có thể
thuộc về dạng, hoặc không
có dạng

V. Inline Actions
• Được sử dụng để làm
việc trên một đối tượng
cụ thể trên màn hình
• Tối đa 1-2 Actions Inline
mỗi đối tượng ..


VI. Multi- State Button
Multi-State Button làm việc
tốt cho một loạt các hành
động có tương quan chặt
chẽ mà nó cần thực hiện
liên tiếp với màn hình giới
hạn real- estate.