Mobile design pattern gallery chap 1 – 2 navigation and form

Giao Tiếp Người Máy Đề tài: Mobile Design Pattern Gallery Chap – 2: Navigation and Form Chapter 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 thiết bị, hệ điều hành  Thiết kế theo dạng danh sách ứng dụng, người dùng tương tác trực tiếp với phần tử danh sách để truy cập ứng dụng  Thơng thường có cấu trúc 3x3, 2x3, 2x2 1x2 phần tử, có cấu trúc lớn tùy theo thiết kế Primary Navigation Patterns - Springboard Primary Navigation Patterns – List Menu  Tương tự 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 việc tìm kiếm, duyệt chọn lọc Primary Navigation Patterns – List Menu Primary Navigation Patterns – Tabs  Đây mẫu khơng có cấu trúc định, tùy vào hệ điều hành, ứng dụng mà có vị trí cấu trúc khác  Không ứng dụng web, form thiết bị di động bị hạn chế mặt kích thước thiết bị đầu vào Sign In  Đây form thường thấy nhiều ứng dụng  Các thành phần chủ yếu như: tên người dùng, mật , nút đăng nhập , nút đăng ký, … thiết kế hình  Khơng nên chỉnh sửa thêm bớt form đăng nhập, sử dụng form phổ biến để tạo tiện lợi quen thuộc cho người dùng Sign In Registration  Tương tự Sign In, Registration có cấu trúc bao gồm trường để nhập thông tin vào nút để thao tác  Thông tin thông thường gồm: tên người dùng, mật khẩu, email  Tuy nhiên, tùy vào ứng dụng sở liệu, ta tạo form khác Registration Checkout  Tại thời điểm tại, việc toán trực tuyến ngày phổ biến nên khơng thể thiếu form để tốn thiết bị di động  Tuy nhiên form phải có chế an tồn bảo mật Checkout Calculate  Được sử dụng ứng dụng liên quan tới theo dõi thơng số, tính tốn  u cầu form phải có hài hịa, dễ nhìn, dễ thao tác Search Form  Dùng cho việc tìm kiếm đối tượng  Thường có nhiều trường để nhập 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 liệu, nên lấy thông tin cần thiết Search Form Multi-step  Thiết bị di động thường bị hạn chế kích thước hình nên việc chia nhỏ form lớn thành form với nhiều bước giải pháp cần thiết  Tuy nhiên, có nhiều bước nên cần có khu vực nhỏ người dùng thấy họ bước trình Multi-step Long Form  Khác với Multi-step, Long Form cho phép tất thông tin cần thiết tồn form  Khi thiết kế form cần ý vị trí đặt nút thao tác (lưu, xác nhận, hủy …) Long Form The End ...  Thông thường có cấu trúc 3x3, 2x3, 2x2 1x2 phần tử, có cấu trúc lớn tùy theo thiết kế Primary Navigation Patterns - Springboard Primary Navigation Patterns – List Menu  Tương tự Springboard... Primary Navigation Patterns – List Menu Primary Navigation Patterns – Tabs  Đây mẫu khơng có cấu trúc định, tùy vào hệ điều hành, ứng dụng mà có vị trí cấu trúc khác Primary Navigation Patterns –. .. Secondary Navigation Patterns – Page Carousel Secondary Navigation Patterns – Image Carousel  Tương tự Page Carousel, Image Carousel sử dụng danh sách hình ảnh Secondary Navigation Patterns – Image