SỬ DỤNG MOCKPLUS để THIẾT KẾ GIAO DIỆN MOBILE

NHÓM 10 ĐỀ TÀI SỐ SỬ DỤNG MOCKPLUS ĐỂ THIẾT KẾ GIAO DIỆN MOBILE Tổng quan tình hình nghiên cứu Xã hội ngày phát triển theo ngành công nghệ thông tin (CNTT) thay đổi nhanh chóng theo I MỞ ĐẦU CNTT góp phần lớn vào phát triển kinh tế giới Nó giúp đơn giản hóa cơng việc đời xong kết nối với dễ dàng Vì yêu cầu lập trình viên tạo công cụ phần mềm giúp người tương tác với máy tính dễ dàng Vậy nên đề tài tương tác người – máy (Human – Computer interaction HCL) trọng việc thiết kế sản phẩm đáp ứng nhu cầu người sử dụng Tính cấp thiết, ý nghĩa khoa học thực tiễn Ý tưởng sử dụng công cụ tạo mẫu để thiết kế, kiểm tra nhận phản hồi giao diện ứng dung tảng web Mục đích nhằm giúp người sử dụng thuận tiện việc tương tác với hệ thống, nhận đóng góp phân đoạn thiết kế ứng dụng để tạo sản phẩm chất lượng, nhiều người dùng Sau thời gian tiếp thu kiến thức môn Tương tác người – máy, chúng em muốn xây dựng Giao diện MOBILE để áp dụng kiến thức học thời gian qua Vì đề tài chúng em chọn để tìm hiểu thực “ Mockplus xây dựng giao diện Mobile “ II: CƠ SỞ LÝ THUYẾT – LÀM QUEN VỚI PHẦN MỀM Mockplus Mockplus website với nhiều tính với giao diện đơn giản, dễ sử dụng, tối ưu hóa chức với người khơng có nhiều kinh nghiệm Web sở hữu hệ thống chủ đề đa dạng phong phú Nền tảng web phù hợp với hầu hết hệ điều hành phổ biến máy tính điên thoại Giao diện chức Mỗi tệp Mockplus Classic (có phần mở rộng tệp mp) đại diện cho dự án chứa nhiều Mockplus Classic khác Với Mockplus Classic, bạn dễ dàng tạo nguyên mẫu ứng dụng web thực tế đầy đủ tính tương tác vịng vài phút mà khơng cần lập trình Khi đăng nhập vào ứng dụng Mockplus dành cho máy tính tài khoản tạo hai loại dự án: Private project Collaboration project • Chọn Private project định làm thứ mình; • Chọn Collaboration project muốn làm việc nhóm dự án đồng thời Sau chọn Private project , Collaboration project đưa đến giao diện lựa chọn dự án, bạn chọn dự án Mobile, Tablet, Web Desktop tùy ý Đối với phác thảo tùy chỉnh, chọn Bảng trắng Tùy chỉnh: Giao diện làm việc Mockplus Classic thành nhiều thành phần : Thanh công cụ (Toolbar) Không gian làm việc Bảng điều khiển dự án Bảng thành phần Bảng tài sản (Property Panel) Giao diện làm việc • Bảng biểu tượng (Icon Panel) Bảng biểu tượng cung cấp 3000 biểu tượng lĩnh vực sống Cũng sử dụng tìm kiếm để tìm biểu tượng cụ thể • Bảng điều khiển thư viện (My Library Panel) Bảng điều khiển thư viện thu thập giúp nhập tất thành phần, nhóm, thư viện giao diện người dùng tài nguyên thiết kế yêu thích sử dụng lại chúng cách tự dự án trang khác cách kéo thả đơn giản Với bảng điều khiển này, đồng hóa thư viện thiết bị khác để sử dụng lại nhanh chóng, đăng ký tải xuống thư viện thành phần trực tuyến vài cú nhấp chuột Ngồi cịn số thành phần giao diện như: Component Style Library Bảng Tương Tác Bảng liên kết Property Panel III: HƯỚNG DẪN CÁCH LÀM GIAO DIỆN BẰNG MOCKPLUS Hướng dẫn thiết kế giao diện Mockplus Bước 1: Tạo project Cách 1: • Chọn Mockplus Classic • Tiếp theo chọn Persona Project • Chọn New Project • Cách 2: Chọn tổ hợp phím “Ctrl + Shift + N “ Sau tạo Project xong tiêu đề hiển thị trường hợp thiết kế giao diện web app, mobile app thiết kế Desktop Chúng ta cần chọn thiết kế bạn muốn sử dụng, chọn kích thước hợp lý Ưu điểm Mockplus: • Mockplus website phổ biến người dùng tin tưởng, sử dụng việc tạo mockup • Giao diện web đánh giá đơn giản, dễ sử dụng tối ưu hóa chức kể với người khơng nhiều kinh nghiệm hay bắt đầu • Với template đa dạng, phong phú, lựa chọn lí tưởng việc tạo mockup • Nền tảng web thích ứng hầu hết với hệ điều hành máy tính lẫn điện thoại Nhược điểm: • Bản free bị giới hạn tính Nếu muốn sử dụng đầy đủ tính người dùng phải tốn 129$/năm mua trọn đời giá 399$ • Mockplus chưa hỗ trợ tảng Linux Giao diện có giao diện chính: GIỚI THIỆU GIAO DIỆN MOBILE Home Page Page Page Ở trang giao diện Home thị đồng hồ, lịch , tìm kiếm , phần trăm cịn lại pin , check list để khơng qn việc quan trọng số ứng dụng hay dùng google , thời tiết , map Trên đầu trang có thơng báo trạng thái wifi , bluetooth , thời gian , phần trăm pin Ở trang giao diện page chúng em để tiện ích gọi điện, nhắn tin, chụp ảnh, ảnh ứng dụng tiếng facebook , messerger , instagram gmail cửa hàng ứng dụng dòng iphone Ở trang giao diện page chúng em thêm vào hình ảnh ứng dụng tiếng ngân hàng , ứng dụng giúp chụp ảnh, số để nghe nhạc , ứng dụng để đặt xe , giao hàng, Ở trang giao diện page chúng em để số hình ảnh sô ứng dụng cửa hàng trực tuyến tiếng tiki , shoppe , số nơi lưu trữ video Sau tiến hành tìm hiểu Mockplus thực thao tác để tạo giao diện phần mềm, chúng em nắm bắt kiến thức hiểu tầm quan trọng Tương tác Người – Máy tới trải nghiệm cảm xúc người sử dụng I V K Ế T LUẬN VÀ HƯỚNG PHÁT TRIỂN Nhưng hết chúng em nắm bắt ưu điểm nhược điểm phần mềm Mockplus để hoàn thiện đề tài Để thiết kế ứng dụng có giao diện đẹp mắt, dễ sử dụng nên thời gian tới chúng em cố gắng phát triển ngày hoàn thiện Qua q trình thực hiện, chúng em khơng thể tránh thiếu sót q trình thực đề tài Chúng em mong lời nhận xét góp ý thầy tồn thể bạn CẢM ƠN THẦY CÔ VÀ CÁC BẠN ĐÃ THEO DÕI!!! Nhóm 10: •Nhóm trưởng : Nguyễn Phúc Huy ( 1721050031 ) • Ngơ Xn Đạt ( 1621050059) • Lưu Đình Dương ( 1721050157) • Nguyễn Duy Tân (1721050343) • Phạm Văn Minh (17210500492) ... dựng Giao diện MOBILE để áp dụng kiến thức học thời gian qua Vì đề tài chúng em chọn để tìm hiểu thực “ Mockplus xây dựng giao diện Mobile “ II: CƠ SỞ LÝ THUYẾT – LÀM QUEN VỚI PHẦN MỀM Mockplus Mockplus... tốn 129$/năm mua trọn đời giá 399$ • Mockplus chưa hỗ trợ tảng Linux Giao diện có giao diện chính: GIỚI THIỆU GIAO DIỆN MOBILE Home Page Page Page Ở trang giao diện Home thị đồng hồ, lịch , tìm... cịn số thành phần giao diện như: Component Style Library Bảng Tương Tác Bảng liên kết Property Panel III: HƯỚNG DẪN CÁCH LÀM GIAO DIỆN BẰNG MOCKPLUS Hướng dẫn thiết kế giao diện Mockplus Bước 1: