Mobile design pattern gallery chap 1 – 2 navigation and form

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.. Primary Navigation Patterns – GalleryLà mẫu thiết kế sử dụng hình ảnh sắp

Giao Tiếp Người Máy

Đề tài:

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

Chapter 1

Primary Navigation Patterns:

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

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ị

Chapter 2

Form

Các loại form cơ bản gồm:

Không như các ứng dụng web, các form trên thiết bị di động bị hạn chế về mặt kích thước màn hình cũng như thiết bị đầu vào

Sign In

Đây là form thường thấy nhiều trong các ứng dụng

Các thành phần chủ yếu như: tên người dùng, mật khẩu , nút đăng nhập , nút đăng ký, … được thiết kế trên cùng một màn hình

Không nên chỉnh sửa hoặc thêm bớt trên form đăng nhập,

sử dụng form phổ biến nhất để tạo sự tiện lợi và quen

thuộc cho người dùng

Sign In

Registration

Tại thời điểm hiện tại, việc thanh toán trực tuyến ngày

càng phổ biến nên không thể thiếu các form để thanh toán trên thiết bị di động

Tuy nhiên các form này phải có cơ chế an toàn và bảo mật

Checkout

Search Form

Dùng cho việc tìm kiếm một đối tượng nào đó

Thường có nhiều trường để nhập dữ liệu phục vụ cho việc tìm kiếm

Tuy nhiên, nên giới hạn số lượng trường nhập dữ liệu, chỉ nên lấy những thông tin cần thiết nhất

Search Form

Thiết bị di động thường bị hạn chế về kích thước màn

hình nên việc chia nhỏ một form lớn ra thành một form với nhiều bước là một giải pháp cần thiết

Tuy nhiên, do có nhiều bước nên cần có một khu vực nhỏ

để cho người dùng thấy được họ đang ở bước nào của quá trình

Multi-step

Long Form

The End