Tuesday, July 17, 2012

Screens & Transitions

Ước tính app Alfresco Android sẽ có 10 màn hình chính, cụ thể:

Screen Name Description
#1_Repository_Browsing Màn hình duyệt những repository đã được lưu thông tin kết nối
#2_Repository_Adding_Editing Màn hình thêm / sửa thông tin kết nối của 1 repository
#3_File_Browsing Màn hình duyệt file trong 1 repository
#4_File_Information Màn hình xem thông tin chi tiết của 1 file: permission, name, size, author …
#5_Download Màn hình chọn nơi lưu file từ repository về phone
#6_Upload Màn hình chọn file từ phone để tải lên repository
#7_Search Màn hình nhập thông tin tìm kiếm và hiển thị kết quả
#8_Workflow_Browsing Màn hình duyệt các workflow trong repository
#9_Workflow_Adding_Editing Màn hình thêm / sửa 1 workflow
#10_Workflow_Details Màn hình xem thông tin chi tiết của 1 workflow

Bên dưới là mock-up hiện thời của các màn hình đó:

Màn hình 1 - Repository Browsing

Màn hình 2 - Repository Adding/Editing

Màn hình 3 - File Browsing

Màn hình 4 - File Information

Màn hình 5 - Download

Màn hình 6 - Upload

Màn hình 7 - Search

Màn hình 8 - Workflow Browsing

Màn hình 9 - Workflow Adding/Editing

Màn hình 10 - Workflow Details
Transition cụ thể:

- Từ S1 (màn hình 1):
  • Tap vào nút [Add new] -> S2.
  • Tap và giữ vào 1 repository trong list, chọn [Edit] -> S2.
  • Tap và giữ vào 1 repository trong list, chọn [Remove] -> Dialog confirm -> S1.
  • Tap vào 1 repository trong list -> S3.
- Từ S2:
  • Tap vào nút [Save] -> S1.
  • Tap vào nút [Back] -> S1 (không lưu lại thay đổi).
- Từ S3:
  • Tap vào 1 file trong list -> S4.
  • Tap và giữ vào 1 file trong list, chọn [Download] -> S5.
  • Tap và giữ vào 1 file trong list, chọn [Delete] -> Dialog confirm -> S3.
  • Tick check box và tap vào nút [Download] -> S5.
  • Tap vào nút [Upload] -> S6.
  • Tap vào tab [Search] -> S7.
  • Tap vào tab [Workflow] -> S8.
  • Tap vào nút [Back] -> S1.
 - Từ S4:
  • Tap vào nút [Download] -> S5.
  • Tap vào tab [Search] -> S7.
  • Tap vào tab [Workflow] -> S8.
  • Tap vào nút [Back] -> S3.
 - Từ S5:
  • Tap vào nút [Save] -> S3|S4 (tùy thuộc S trước đó).
  • Tap vào nút [Back]|[Cancel] -> S3|S4 (tùy thuộc S trước đó) (không lưu file).
- Từ S6:
  • Tap vào nút [Upload] -> Dialog confirm -> S3.
  • Tap vào nút [Back]|[Cancel] -> S3.
- Từ S7:
  • Tap vào nút [Search] -> S7 (hiện kết quả tìm kiếm).
  • Tab vào 1 kết quả trong list -> S4.
  • Tab và giữ vào 1 kết quả trong list, chọn [Download] -> S5.
  • Tab và giữ vào 1 kết quả trong list , chọn [Delete] -> Dialog confirm -> S7.
  • Tap vào tab [Document] -> S3.
  • Tap vào tab [Workflow] -> S8.
 - Từ S8:
  • Tap vào nút [Add workflow] -> S9.
  • Tap và giữ vào 1 workflow trong list, chọn [Edit] -> S9.
  • Tap và giữ vào 1 workflow trong list, chọn [Delete] -> Dialog confirm -> S8.
  • Tick check box và tap vào nút [Delete workflow] -> Dialog confirm -> S8.
  • Tap vào tab [Document] -> S3.
  • Tap vào tab [Search] -> S7.
 - Từ S9:
  • Tap vào nút [Clear All] -> Xóa thông tin đã nhập -> S9.
  • Tap vào nút [Start workflow] -> S8.
  • Tap vào tab [Document] -> S3.
  • Tap vào tab [Search] -> S7.
 - Từ S10:
  • Tap vào nút [Workflow Done] -> Dialog confirm -> S10.
  • Tap vào nút [Back] -> S8.
  • Tap vào tab [Document] -> S3.
  • Tap vào tab [Search] -> S7.
File bảng tính (ods) gốc: Tại đây

1 comment:

  1. tool vẽ mockup này đẹp quá. Biết thế dùng tool này cho đồ án luôn. Sau này còn thời gian, kiểu gì cũng sửa :D Good job Hưng :D

    ReplyDelete