Đề tài xây dựng giao diện ứng dụng ucheck quét mã qr code và đánh giá sản phẩm

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.92 MB, 31 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC MỞ HÀ NỘIKHOA CÔNG NGHỆ THÔNG TIN</b>

<b>BÁO CÁO BÀI TẬP LỚN</b>

<b>MÔN: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

MỤC LỤC

<b>1. Tiến hành nghiên cứu và tìm hiểu dự án2</b>

a. Tên đề tài 2 b .Mục đích đề tài 2

c. Kết quả mong muốn đạt được 2

<b>2. Nghiên cứu và tìm hiểu người dùng2</b>

<b>3. Từ việc khảo sát người dùng, rút ra các yêu cầu, đặc tả yêu cầu cho ứng dụng4</b>

a. Yêu cầu chức năng 4 b. Đặc tả yêu cầu chức năng chính 5

<b>4. Thiết kế bố cục layout8</b>

a. Phác thảo ý tưởng 8

b. Phác thảo layout ( Sketch & Wireframe ) 12 c. Giao diện hoàn chỉnh 22

a. Ưu điểm 29 b. Hạn chế 29 c. Hướng phát triển 29

<b>6. Tài liệu tham khảo307. Link giao diện demo trên Figma 30</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

1. <b>Tiến hành nghiên cứu và tìm hiểu dự án (nghiên cứu đề tài)</b>

• Từ đó rút ra được những ý tưởng, phong cách trong việc thiết kế một phần mềm / ứng dụng với vai trò là quản lý Bài tập lớn, dựa trên thực tiễn những yếu tố đã thu thập từ người dùng.

• Từ những yếu tố trên, có thể thiết kế được một giao diện hoàn chỉnh cho một ứng dụng quản lý bài tập lớn, có khả năng tương thích với mọi đối tượng, mọi độ tuổi, giới tính…

2. <b>Nghiên cứu và tìm hiểu về người dùng (Bảng câu hỏi khảo sát người dùng)</b>

<b>STTCâu hỏi khảo sátPhương án trả lờiMục đích thiết kế1</b> Đối tượng sử dụng

ứng dụng là ai ?

+ Người có nhu cầu cần biết nguồn gốc XS của sản

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

hầu hết chúng không lưu trữ được thông tin đánh giá

UI: thiết kế thông tin quảng cáo cho hợp lý, tối ưu được khả năng sử dụng ứng dụng.

<b>5</b> Bạn mong chờ điều gì về ứng dụng quét Qr code này?

+Giao diện phải dễ sử dụng +Mượt mà, khi mở lên tin người dùng và thiết kế tối ưu được hiệu năng và các chức năng sao cho hợp lý và dễ nhìn.

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>3. Từ việc khảo sát người dùng ở trên, rút ra các yêu cầu, đặc tả các</b>

<b>-</b> Đăng nhập, đăng ký, đăng xuất (CN phụ)

<b>-</b> Cài đặt, thông tin APP (CN phụ)

<b>-</b> Thông báo (CN phụ)

<b>b. Đặc tả yêu cầu chức năng chính</b>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

+ Thông tin chung

<b>Tên chức năng</b> Quét mã QR Code

<b>Mô tả</b> Chuyển đến Camera để quét mã QR Code, ngoài ra có thêm các chức năng phụ như nhập Barcode bằng bàn phím và sử

Chuyển đến chức năng quét mã QR

<b>Click vào button “Nhập barcode bằng </b>

Bàn phím số hiện lên để nhập Barcode

<b>Click vào button “Sử dụng hình ảnh có</b>

Mở thư viện ảnh lên

<b>-CN Đánh giá, báo cáo sản phẩm+ Thông tin chung</b>

<b>Tên chức năng</b> “Đánh giá” và “Báo cáo” sản phẩm

<b>Mô tả</b> + Đánh giá: xuất hiện các lựa chọn kiểu vote sao cho người dùng chọn, khung nhập nhận xét cho sản phẩm

+ Báo cáo: Xuất hiện các báo cáo được soạn sẵn cho người dùng chọn, khung nhập báo cáo nếu người dùng có ý kiến khác

<b>Tác nhân</b> Người dùng

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

+ Mô tả sự kiện

<b>Hành động của người dùngPhản ứng hệ thống</b>

1. Click vào button <b>“Đánh giá”</b> Chuyển đến chức năng đánh giá Lựa chọn số “ngôi sao” với từng mục,

nhập nhận xét

Đợi người dùng thao tác

Ấn nút “Đăng lên” Tiếp nhận thông tin được nhập từ người dùng và upload thông tin lên trang 2. Click vào button “<b>Báo cáo”</b> Chuyển đến chức năng báo cáo Lựa chọn các thông tin được soạn sẵn

hoặc nhập thơng tin vào khung báo cáo

+Nếu ND chọn ngồi lựa chọn “Khác” thì đóng băng khung nhập báo cáo +Nếu ND chọn lựa chọn “Khác” thì đóng băng các lựa chọn khác và mở khung nhập để ND nhập báo cáo vào Ấn nút “Báo cáo” Tiếp nhận thông tin được nhập từ người

dùng và gửi về cho đội ngũ kiểm duyệt xem xét

+ Thông tin chung

<b>Tên chức năng</b> Tin tức

<b>Mô tả</b> Trang tổng hợp tin tức về sản phẩm có chủ đề liên quan đến nguồn gốc xuất sứ và chống giả

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

+ Thông tin chung

<b>Tên chức năng</b> Xu hướng tiêu dùng

<b>Mô tả</b> Trang tổng hợp và xếp hạng các sản phẩm được người dùng quét và đánh giá nhiều trong hệ thống

<b>Tác nhân</b> Người dùng + Mô tả sự kiện

<b>Hành động của người dùngPhản ứng hệ thống</b>

Click vào button “ Xu hướng tiêu dùng” Chuyển đến trang Xu hướng tiêu dùng Lựa chọn trang “Thiết bị di động” hoặc

“Mỹ phẩm” hoặc “Thực phẩm”

Chuyển đến trang “Thiết bị di động” hoặc “Mỹ phẩm” hoặc “Thực phẩm”

+ Thông tin chung

<b>Tên chức năng</b> Lịch sử quét

<b>Mô tả</b> Trang tổng hợp lịch sử đã quét của người dùng bao gồm ngày giờ quét và thông tin sản phẩm

<b>Tác nhân</b> Người dùng

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

+ Mô tả sự kiện

<b>Hành động của người dùngPhản ứng hệ thống</b>

Click vào button “ Lịch sử đánh giá” hoặc “Lịch sử”

Chuyển đến trang Lịch sử quét Click vào thơng tin sản phẩm bất kì Chuyển đến trang thơng tin sản phẩm đó

<b>4. Thiết kế bố cục layout</b>

<b>a. Phác thảo ý tưởng</b>

<b>- Trang Camera quét mã QR</b>

Trang này sẽ xuất hiện đầu tiên ngay khi mở ứng dụng Header có nút “thốt”, “Hỗ trợ”, “Đèn pin”

Content có nút “Nhập mã barcode bằng tay”, “Quét”, ”Sử dụng hình ảnh có sẵn” và khung quét

<b>- Trang chủ</b>

Header có menu, tìm kiếm và thơng báo

Content có banner quảng cáo, thơng tin user ( tên và hạng bậc), các chức năng chính : Xu hướng tiêu dùng, Bảng tin, Lịch sử quét, Cài đặt . Trang tin tức dạng xem nhanh.

Footer có nút “Qt mã QR”, “Tin tức”, “Lích sử”

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>- Trang giao diện sản phẩm</b>

Header có nút thốt về trang chủ và thơng tin trang hiện tại Content có các hình ảnh sản phẩm, tên sản phẩm, giá bán, mã vạch, số lượng đánh giá, thông tin sản phẩm và doanh nghiệp sản xuất, các đánh giá sản phẩm. Ngồi ra cịn có nút “Thích” và “Chia sẻ”.

Footer có nút “Đánh giá”, “Báo cáo”

<b>- Trang đánh giá</b>

Header có nút trở về trang thơng tin sản phẩm và thơng tin trang hiện tại

Content có thơng tin sản phẩm dạng xem nhanh, các lựa chọn đánh giá được biên soạn sẵn, các ngôi sao để người dùng vote và mục nhận xét để người dùng nhập vào

Footer có nút “Đăng lên”

<b>- Trang báo cáo</b>

Header có nút trở về trang thông tin sản phẩm và thông tin trang hiện tại

Content có thơng tin sản phẩm dạng xem nhanh, các lựa chọn báo cáo được biên soạn sẵn và mục viết báo cáo để người dùng nhập vào

Footer có nút “Báo cáo”

<b>- Trang tin tức</b>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Header có nút trở về trang chủ và thơng tin trang hiện tại

Content có 2 mục trang con là “Tin tức HOT” và “ Mới cập nhật”. Ở dưới cà các bài báo tin tức dạng xem nhanh. Ngồi ra cịn có trang tin tức chi tiết khi người dùng click vào tin tức cụ thể

Footer trang tin tức chi tiết có nguồn của tin tức và ngày giờ được xuất bản

<b>- Trang xu hướng tiêu dùng</b>

Header có nút trở về trang chủ và thơng tin trang hiện tại Content có 3 mục trang con là “Thiết bị di động”, “Mỹ phẩm” và “Thực phẩm”. Có banner quảng cáo và băng xếp hạng xu hướng tiêu dùng

<b>- Trang Đăng nhập và Đăng ký</b>

Header có logo ứng dụng trên nền màu xanh

Content có 2 trang con là “Đăng nhập” và “Đăng kí”. Mục nhập số điện thoại, mật khẩu, nhập lại mật khẩu. Nút “Đăng nhập”, “Đăng ký”, “Đăng nhập bằng OTP”

Footer có nút đăng nhập bằng hình thức Facebook hoặc Google

<b>- Trang cài đặt</b>

Header có nút trở về trang chủ và thơng tin trang hiện tại Content có biểu tượng cài đặt, các mục cài đặt

Footer có nút “Đăng xuất” và “Thông tin về App”

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>- Trang thơng báo</b>

Header có nút trở về trang chủ và thơng tin trang hiện tại Content có các thơng báo hiển thị ảnh, thông tin thông báo và thời gian thơng báo

<b>- Trang thơng tin APP</b>

Header có nút trở về trang chủ

Content có logo ứng dụng, thơng tin về APP như : tên sinh viên, môn học, giảng viên phụ trách bộ môn

<b>b. Phác thảo layout ( Sketch & Wireframe )</b>

<b>- Trang Camera quét mã QR</b>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>- Trang chủ</b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>- Trang giao diện sản phẩm</b>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>- Trang đánh giá & báo cáo</b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>- Trang tin tức</b>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>- Trang xu hướng tiêu dùng</b>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>- Trang Đăng nhập và Đăng ký</b>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>- Trang cài đặt</b>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>- Trang thông báo</b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<b>- Trang thông tin APP</b>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>c. Giao diện hoàn chỉnh</b>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>- Màu sắc là màu xanh dương của logo ứng dụng làm nổi bật lên độ nhận diện</b>

thương hiệu tốt cho ứng dụng. Ngoài ra màu xanh thể hiện cho công nghệ kết hợp hài hòa với cách phối màu đơn sắc tạo sự dễ chịu cho mắt khi sử dụng.

<b>- Cách sắp xếp các chức năng nổi bật và logic làm cho người dùng dễ sử </b>

dụng. Chức năng chính được làm nổi bật lên ngồi cho người dùng dễ nhìn thấy.

<b>- Giao diện hấp dẫn và tương tác sẽ kích thích người dùng tương tác nhiều </b>

hơn với sản phẩm. Điều này có thể thúc đẩy sự hứng thú và tạo ra trải

<b>- Có thể gây đơ nếu máy yếu vì khi mở ứng dụng sẽ tự động mở camera lên gây</b>

nhiều khó khăn cho việc xử lý của máy.

<b>- Giao diện đơn giản, nhiều trang có nhiều thơng tin nên mang lại cảm giác hơi </b>

thô và nhàm chán

<b>- Cần có internet thì mới trả về kết quả khi quét ( đối với QR code dạng thông </b>

tin có sẵn thì khơng cần )

<b>Hướng phát triển</b>

<b>- Tối ưu hóa ứng dụng thêm nữa để mang lại trải nghiệm mượt mà hơn.- Cải thiện một số chức năng chưa hồn chỉnh theo góp ý của mọi người.- Cải thiện giao diện cho đơn giản và hiện đại hơn.</b>

<b>- Phát triển ứng dụng thêm cho nền tảng IOS.</b>

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

</div>