Mobile design pattern gallery chap 1 – 2 navigation and form

Giao Tiếp Người Máy
Đề tài:

Mobile Design Pattern Gallery
Chap 1 – 2: Navigation and Form


Chapter 1

Navigation




Primary Navigation Patterns:
 Springboard
 List Menu
 Tab Menu
 Gallery
 Dashboard
 Metaphor
 Mega Menu




Secondary Navigation Patterns:
 Page Carousel
 Image Carousel
 ExpandingList

Primary Navigation Patterns


Primary Navigation Patterns - Springboard



Là mẫu thông dụng nhất, có hầu hết trên các thiết bị, hệ điều hành.



Thiết kế theo dạng danh sách các ứng dụng, người dùng tương tác trực tiếp với phần tử trong danh
sách để truy cập và ứng dụng



Thông thường có cấu trúc 3x3, 2x3, 2x2 hoặc 1x2 phần tử, nhưng vẫn có thể có cấu trúc lớn hơn tùy
theo thiết kế


Primary Navigation Patterns - Springboard


Primary Navigation Patterns – List Menu



Tương tự như Springboard



Có nhiều dạng khác như: danh sách cá nhân, danh sách nhóm, danh sách nâng cao



Tiện hơn trong việc tìm kiếm, duyệt hoặc chọn lọc


Primary Navigation Patterns – List Menu


Primary Navigation Patterns – Tabs



Đây là mẫu không có cấu trúc nhất định, tùy vào hệ điều hành, ứng dụng mà có vị trí và cấu trúc
khác nhau


Primary Navigation Patterns – Tabs



Trong các ứng dụng thì thông thường các tab được đặt ở phía dưới hoặc phía trên cùng.


Primary Navigation Patterns – Gallery



Là mẫu thiết kế sử dụng hình ảnh sắp xếp thành một màn hình để điều hướng



Thường sử dụng cho các bài báo, công thức nấu ăn, hình ảnh, sản phẩm,…



Thích hợp với các ứng dụng có nội dung cập nhật thường xuyên


Primary Navigation Patterns – Gallery


Primary Navigation Patterns – Dashboard



Dashboard cung cấp các thanh chỉ số có dễ dàng điều chỉnh tăng giảm, mỗi chỉ số sẽ biễu diễn một
dạng thông tin



Mô hình này rất thích hợp cho các ứng dụng tài chính, phân tích và bán hàng


Primary Navigation Patterns – Metaphor



Mẫu này có đặc trưng là các nội dung của ứng dụng sẽ được mô hình hóa.



Thường được sử dụng trong các trò chơi, nhưng cũng được sử dụng trong các ứng dụng giúp người
sắp xếp và phân loại các mục như: ghi chú, sách, rượu,…


Primary Navigation Patterns – Metaphor


Primary Navigation Patterns – Mega Menu



Một Mega Menu trên thiết bị di động cũng tương tự như một Web Mega Menu với bảng điều khiển
cùng với các nhóm tùy chọn


Secondary Navigation


Một ứng dụng bất kỳ không thể chỉ sử dụng một mẫu điều hướng duy nhất, luôn luôn có mẫu điều
hướng phụ để chuyển hướng giữa các trang hoặc module



Bất kỳ mẫu điều hướng nào phía trên cũng có thể được dùng để điều hướng phụ



Có nhiều dang kết hợp khác nhau như: Tabs với Tabs, Tabs với Dashboard hoặc Springboard và
Gallery, …



Secondary Navigation Patterns



Có một sốốmẫu rấốt thích hợp để làm Secondary Navigation nhưng khống thể sử dụng làm
Primary Navigation được:
 Page Carousel
 Image Carousel
 Expanding List


Secondary Navigation Patterns – Page Carousel



Page Carousel dùng để chuyển hướng nhanh chóng từ một trang sang trang khác thuộc
danh sách đó.



Tuy nhiên, danh sách trang có giới hạn sốốtrang. Khống nên sử dụng danh sách nhiêề
u hơn
8 trang

Secondary Navigation Patterns – Page Carousel


Secondary Navigation Patterns – Image Carousel



Tương tự như Page Carousel, Image Carousel sử dụng một danh sách các hình ảnh


Secondary Navigation Patterns – Image Carousel


Secondary Navigation Patterns – Expanding List



Expanding List tương tự List Menu, ngoài ra còn cho phép hiện thêm thông tin khi tương tác với
một phần tử trong danh sách



Expanding List thích hợp cho đối tượng có nhiều thông tin chi tiết cần hiển thị.