MOBILE APP
GUIDELINE FALL 2019
Phan Nhật Trung Giáo viên hướng dẫn
Nguyễn Phạm Thùy Dương UI / UX Design
Trương Lê Võ Sitemap | Wireframe | Illustration
MỤC LỤC 1.
00-00
2.
00-00
3.
Khảo sát
Logo
Sitemap
.Lí do chọn đề tài
.Ý nghĩa Logo
.Sketch Sitemap
.Mục tiêu
.Phác thảo ý tưởng
.Hoàn chỉnh
.Kết quả khảo sát
.Hệ thống lưới và Vùng an toàn .Logo và trường hợp ngoại lệ .Các trường sử dụng sai .Nguyên tắc sử dụng trên nền màu tương phản .Quy chuẩn màu của Logo .Tương quan giữa Logo và nền màu .Kích thước Logo symbol .Kích thước tối thiểu
00-00
4.
00-00
Userflow
5.
00-00
6.
00-00
7.
00-00
Icon
Style Guide
Wireframe
.Hệ thống Icon
.Bộ Font chuẩn
.Sketch Wireframe
.Quy chuẩn kích thước chữ
.Hoàn chỉnh
.Button - Icon button .Input .Slide Navigation (nút tác vụ) .Tab bar .Tab view (chọn bữa ăn) .Grid view (bộ sưu tập ảnh)
8.
00-00
9.
00-00
10.
00-00
11.
00-00
Layout Design
Prototype
Storyboard TVC
Ấn phẩm bên ngoài
.Visual Design
.Prototype
.Storyboard Sketch
.Poster quảng cáo
.Mockup
.Mockup
.Final Scene
.Mockup
1. Khảo sát
.Lí do chọn đề tài .Mục tiêu .Kết quả khảo sát
Lí do chọn đề tài Khi đi chơi tự túc (theo nhóm/cá nhân) thì vấn đề ăn uống được đặt lên hàng đầu. Tuy nhiên, đến địa điểm du lịch thì lại có quá nhiều lựa chọn khiến người dùng bối rối, dẫn đến họ bị mất thời gian tìm kiếm và không có cơ hội để trải nghiệm những dịch vụ khác, thú vui khác. Hoặc tình huống xấu hơn, họ có thể bị dẫn dụ đến những quán ăn thiếu chất lượng, lấy giá cắt cổ, bị chặt chém, hoặc những địa điểm ảo. Tất cả những điều đó khiến cho trải nghiệm du lịch của người dùng trở nên tồi tệ.
Mục tiêu Mục tiêu của NomNom là trở thành một kho dữ liệu cho phép người dùng tìm kiếm những quán ăn, món ăn ngon phổ biến hoặc được ưa chuộng tại nơi mà họ đến, họ muốn đến, hoặc đơn giản là ở gần họ. Ứng dụng
Khảo sát / Lí do chọn đề tài-Mục tiêu
cho phép truy cập ví trị của người dùng giúp họ tìm kiếm quán ăn một cách đơn giản.
Giải pháp -Phạm vi phủ sóng của ứng dụng có thể phủ khắp toàn cầu. -Tích hợp bản đồ chỉ đường để người dùng có thể đi đến quán ăn. -Ứng dụng có phát triển một tính năng mới là tìm quán ăn thông qua tìm kiếm dựa trên quãng đường đi, bằng cách người dùng có thể vẽ ra 1 đoạn thẳng bất kỳ, ứng dụng sẽ tự động dò tìm các quán ăn có quãng đường đi có độ dài tương đương với đoạn thẳng người dùng vạch ra. -Cho phép sử dụng nhiều ngôn ngữ khác nhau. -Có ghi rõ khoảng giá tiền của quán ăn mà người dùng tìm đến để họ có cái nhìn rõ hơn về giá tại quán ăn, và tránh bị chặt chém
08
Kết quả khảo sát
Khảo sát / Kết quả khảo sát
09
Kết quả khảo sát
Nhu cầu ăn uống của bạn khi đi du lịch quan trọng như thế nào? : Rất quan trọng.
Tiêu chí chọn món ăn khi đi du lịch? : - Đồ ăn ngon, bổ, rẻ - Sạch sẽ và biết rõ nguồn gốc thực phẩm - Đặc sản tại nơi đó
Loại hình ăn uống mà bạn quan tâm khi đi du lịch?: - Ăn vặt / Vỉa hè - Nhà hàng Khảo sát / Kết quả khảo sát
- Đồ ăn nhanh
Điều gì khiến bạn cảm thấy tiện lợi và thích thú về ứng dụng tìm kiếm thức ăn ? - Nhanh, gọn gàng - Tiết kiệm được thời gian, tiện dụng - Review được món ăn - Biết được thông tin, giá cả - Tìm được nhiều quán ngon, ít người biết đến, món ăn địa phương - Tìm được quán ăn gần - Giải quyết được vấn đề ăn gì
10
11
2. Logo
.Ý nghĩa Logo .Phác thảo ý tưởng .Hệ thống lưới và Vùng an toàn .Logo và trường hợp ngoại lệ .Các trường sử dụng sai .Nguyên tắc sử dụng trên nền màu tương phản .Quy chuẩn màu của Logo .Tương quan giữa Logo và nền màu .Kích thước Logo symbol .Kích thước tối thiểu
Ý nghĩa Logo
TÌM KIẾM
BỮA ĂN VUI VẺ
Logo / Ý tưởng Logo
13
PHÁT THẢO
Ý TƯỞNG
10 14
Logo / Phát thảo ý tưởng
Logo / Phát thảo ý tưởng
PHÁT THẢO
Ý TƯỞNG
10 15
Logo / Thành phần Logo
Thành phần logo
LOGO MARK
16
WORD MARK
Hệ thống lưới và vùng an toàn
Logo / Hệ thống lưới và vùng an toàn
17
Logo và Các trường hợp ngoại lệ
Logo / Logo và các trường hợp ngoại lệ
PRIMARY
SECONDARY
18
Các trường hợp sử dụng sai
Logo / Các trường hợp sử dụng sai
LOOOREMM IPSUMMMM
TYPE
TYPE
19
Logo / Nguyên tắc sử dụng Logo trên nền tương phản
Nguyên tắc sử dụng Logo trên nền tương phản
20
Quy chuẩn màu của Logo
F8E812
FFFFFF
6B3A0F
D87F0D
EE741F
333333
RGB: 230/39/77
RGB: 248/282/18
RGB: 255/255/255
RGB: 107/58/15
RGB: 216/127/13
RGB: 238/116/31
RGB: 52/52/52
CMYK: 0/94/57/0
CMYK: 7/0/90/0
CMYK: 0/0/0/0
CMYK: 36/71/100/51
CMYK: 13/56/100/2
CMYK: 0/64/93/0
CMYK: 69/59/56/65
Logo / Quy chuẩn màu của Logo
E6274D
21
Logo / Tương quan giữa Logo và nền màu
Tương quan giữa Logo và nền màu
22
Kích thước Logo Symbol
CarPlay
120pt @1x
Logo / Kích thước Logo Symbol
iTunes
512pt @2x
iPhone
iPad
76pt @1x
76pt @2x
50pt @2x
512pt @1x
50pt @1x
40pt @2x
72pt @2x
40pt @1x
29pt @2x
72pt @1x
29pt @1x
60pt @3x
40pt @3x
57pt @2x
60pt @2x
40pt @2x
29pt @3x
29pt @2x
57pt @1x
29pt @1x
23
Kích thước nhỏ nhất của Logo
Logo / Kích thước nhỏ nhất của Logo
20mm 80px
Kích thước tối thiểu của logo khi đem đi in ấn chiều cao không được thấp hơn 20mm. Khi hiển thị trên màn hình kích thước tối thiểu là 80 pixels
24
3. Sitemap
.Sketch Sitemap .Hoàn chỉnh
PHÁT THẢO SITEMAP
26
Sitemap / Phát thảo
Sitemap hoàn thiện
Đăng nhập
Cho phép truy cập vị trí
Giới thiệu
Màn hình chính
HOME
LỊCH SỬ
TRANG CÁ NHÂN
ĐÃ LƯU
Giao diện tìm quán ăn
Địa điểm nổi bật
Tích điểm
Khuyến mãi
Chia sẻ bạn bè
Sitemap / Hoàn thiện
KHÁM PHÁ
Giao diện quán ăn
Info
Menu
Hình ảnh
Đánh giá
BẢN ĐỒ
Ứng dụng bản đồ
Bản đồ được tích hợp
Tìm kiếm tên quán
Gần vị trí hiện tại
Lọc theo khoảng cách
27
4. Userflow
.Đăng nhập .Home .Bản Đồ .Trang cá nhân .Đã lưu-Lịch sử-Khám phá
Đăng nhập
ĐĂNG NHẬP
Đăng nhập bằng tài khoản NomNom
Tiếp tục dưới tên tài khoản
Nhập tài khoản Nhập mật khẩu
Quên mật khẩu
Tìm lại mật khẩu nhập email
ĐĂNG NHẬP THÀNH CÔNG
Nhập thông tin: -Tên đăng nhập -Mật khẩu -Nhập lại mật khẩu -Mail
Thông báo
BÁO LỖI Sai tài khoản Sai mật khẩu
Đăng ký bằng tài khoản NomNom
BÁO LỖI
Vui lòng check email để lấy lại mật khẩu
nhập sai mã xác nhận
Sai kí tự Mật khẩu quá ngắn Sai nhập lại mật khẩu
Nhập mã xác nhận
Userflow / Đăng nhập
Đăng nhập bằng Facebook/Google
ĐĂNG KÝ THÀNH CÔNG
Thành công
BÁO LỖI
HOME
Cài đặt lại mật khẩu cập nhật mật khẩu mới xác nhận mật khẩu mới
Quay về màn hình Đăng nhập
29
Home
HOME
Giao diện tìm quán ăn
Giao diện quán ăn 1
Userflow / Đăng nhập
Danh sách quán ăn
Info
Giao diện quán ăn 2
Menu
Hình ảnh
Không gian
Filter Tìm kiếm tên quán
Giá món ăn
Gần tôi
Dùng địa điểm hiện tại Tìm kiếm quán trên bản đồ
Món ăn
Mô tả món ăn
Phương thức thanh toán
Gợi ý quán ăn kế tiếp
Địa chỉ Giờ mở cửa Website Sđt
Đánh giá
Phần đánh số Sao Phần bình luận Nút Like Xem thêm bình luận Xóa bình luận
Đánh giá Chấm điểm Bình luận Lọc theo thứ tự: -Được xem nhiều nhất -Ngày thêm (Cũ nhất) -Ngày thêm (Mới nhất)tt
Signature Đưa vào danh sách đã lưu
BẢN ĐỒ
TRANG CÁ NHÂN
ĐÃ LƯU Gửi đến bạn bè qua Messenger, Facebook, Instagram, Airdrop, v.v..
30
Bản Đồ
BẢN ĐỒ
Ứng dụng bản đồ
Bản đồ được tích hợp
Tìm kiếm tên quán
Gần vị trí hiện tại
Lọc theo khoảng cách
Userflow / Bản Đồ
Lọc theo khoảng cách cụ thể
Vẽ độ dài quãng đường
chọn khoảng cách theo bán kính
Vẽ quãng đường không tìm thấy quán ăn
BÁO LỖI
Địa điểm quán ăn nhấn chọn
Pop up thông tin quán Địa chỉ Giờ mở cửa
Giao diện quán ăn
31
Trang cá nhân
TRANG CÁ NHÂN
Danh sách người theo dõi
Info của người dùng khác
-Nút theo trang cá nhân -Thông tin: +Số người theo dõi +Số hình ảnh +Chụp hình
Userflow / Trang cá nhân
Hình ảnh
Giao diện tìm quán ăn
Check in
Tích điểm
Thêm địa điểm
Mã QR
không quét được mã
Chia sẻ mã
không quét được mã
Camera quét mã
BÁO LỖI
BÁO LỖI
Tích điểm thành công
Danh sách các quán ăn đã check in Tích điểm thành công
Xác nhận
Giao diện quán ăn
Xác nhận thành công Gửi đến bạn bè qua Messenger, Facebook, Instagram, Airdrop, v.v..
Chia sẻ
32
Thông báo
Đã lưu-Lịch sử-Khám phá
Bỏ lưu
Giao diện quán ăn
ĐÃ LƯU
Lọc theo thứ tự: -Ngày thêm (Cũ nhất) -Ngày thêm (Mới nhất)
Danh sách đã lưu
Giao diện quán ăn
Tìm kiếm tên quán
LỊCH SỬ
Lọc theo thứ tự: -Ngày thêm (Cũ nhất) -Ngày thêm (Mới nhất)
Lịch sử hoạt động
Lưu vào danh sách Đã lưu
Đánh giá
ĐÃ LƯU
Giao diện quán ăn
Đánh giá
Tìm kiếm tên quán
KHÁM PHÁ
Khuyến mãi
Danh sách quán ăn
Userflow / Đã lưu-Lịch sử-Khám phá
Xóa lịch sử
Giao diện quán ăn
Địa điểm nổi bật
33
5. Hệ thống Icon
.Hệ thống icon
Hệ thống Icon
Hệ thống Icon
35
6. Style Guide
.Bộ Font chuẩn .Quy chuẩn kích thước chữ .Button - Icon button .Input .Slide Navigation (nút tác vụ) .Tab bar - Tab view .Grid view (bộ sưu tập ảnh)
Bộ Font chuẩn
COMIC PANEL
A B C D E F G H I K L M N O P Q R S T V X Y Z 0123456789:;”<,.>/?!@#$%^&*()_+[]{}-=\|
Montserrat Bold
ABCDEFGHIKLMNOPQRSTVXYZ abcdefghiklmnopqrstvxyz ÂâĂăĐđÊêÔôƠơƯư
Montserrat Medium
ABCDEFGHIKLMNOPQRSTVXYZ abcdefghiklmnopqrstvxyz
Style Guide / Bộ Font chuẩn
0123456789:;”<,.>/?!@#$%^&*()_+[]{}-=\|
0123456789:;”<,.>/?!@#$%^&*()_+[]{}-=\| ÂâĂăĐđÊêÔôƠơƯư
Montserrat Light
ABCDEFGHIKLMNOPQRSTVXYZ abcdefghiklmnopqrstvxyz 0123456789:;”<,.>/?!@#$%^&*()_+[]{}-=\| ÂâĂăĐđÊêÔôƠơƯư
37
Style Guide / Quy chuẩn kích thước chữ
Quy chuẩn kích thước chữ
38
Headline 24
Headline 20
Title 17
Title 16
Montserrat Bold . 24pt
Montserrat Bold . 20pt
Montserrat Semibold . 17pt
Montserrat Semibold . 16pt
Title 15
Subhead 16
Subhead 12
Text Link
Montserrat Semibold . 15pt
Montserrat Medium . 16pt
Montserrat Medium . 12pt
Montserrat Medium . 12pt
Body 15
Caption 1
Montserrat Regular . 15pt
Montserrat Regular . 14pt
Button - Icon button
Button
Style Guide / Button - Icon button
Icon button
39
Input
Nhập mã xác nhận
Style Guide / Input
Tìm kiếm tại Home
Điền thông tin bảo mật người dùng
40
Tìm kiếm tại Bản đồ
Tìm kiếm tại Bản đồ
Slide Navigation
Giải thích Chức năng
Thêm ảnh
Thêm vào Đã lưu
Tắt Đánh giá
Style Guide / Slide Navigation
Bình luận
Bật
Thêm địa điểm Check-in
Chia sẻ
41
Style Guide / Tab Bar - Tab View
Tab bar - Tab View
Tab view Menu Tab view Filter
Tab Bar
42
Grid View
Style Guide / Grid View
43
7. Wireframe
.Sketch wireframe .HoĂ n cháť&#x2030;nh
10
PHÁT THẢO WIREFRAME
45
Đăng nhập - Đăng ký
Wireframe
Đăng nhập
Cho phép định vị - Giới thiệu -Ngôn ngữ
Cho phép định vị - Giới thiệu -Ngôn ngữ
46
Giao diện tìm quán ăn - Giao diện quán ăn
Giao diện tìm quán ăn - Giao diện quán ăn
Wireframe
Bản đồ
Bản Đồ
47
Khám phá Khuyến mãi - Địa điểm nổi bật
Wireframe
Khám phá Khuyến mãi - Địa điểm nổi bật
Quét mã Code - Chia sẻ
Quét mã Code - Chia sẻ
48
Đã lưu-Lịch sử-Trang cá nhân
Wireframe
Đã lưu-Lịch sử-Trang cá nhân
49
8. Layout Design
.Layout hoàn chỉnh
53
Khởi động Ứng dụng - Chọn ngôn ngữ
Layout Design
Khởi động Ứng dụng - Chọn ngôn ngữ
Màn hình Giới thiệu
Màn hình giới thiệu
54 10
Minh họa màn hình Giới thiệu
Layout Design
55 10
Layout Design
Minh họa màn hình Giới thiệu
10
56
Minh họa màn hình Giới thiệu
Layout Design
57
Đăng nhập - Đăng ký
BÁO LỖI!!! có thể đường truyền kết nối của bạn có vấn đề. Hãy kiểm tra lại nhé.
Layout Design
Đăng nhập - Đăng ký
Định vị - Màn hình chính
Màn hình giới thiệu
58
Tìm kiếm quán - Trang thông tin quán ăn
Tìm kiếm quán - Thông tin quán ăn
Layout Design
Khám phá - Lịch sử - Đã Lưu
Khám phá - Đã lưu - Lịch sử
59
Trang thông tin cá nhân
Layout Design
Tìm kiếm quán - Thông tin quán ăn
Dùng mã nhận thưởng
BÁO LỖI!!!
Khám phá - Đã lưu - Lịch sử
60
THÀNH CÔNG
Không gửi được mã
Gửi mã thành công
Thử lại
Quay lại màn hình chính
Tìm quán ăn trên bản đồ
Tìm kiếm quán trên bản đồ - Vẽ quãng đường - Chỉ đường
Khác
Pop up Thông tin quán ăn trên Bản đồ
Chia sẻ thông tin
Tác vụ trên trang của quán ăn
Hình ảnh được đăng trên Trang cá nhân
Nút Tác vụ nhanh
61
62
63
9. Prototype
.Prototype
Prototype
BÁO LỖI!!! có thể đường truyền kết nối của bạn có vấn đề. Hãy kiểm tra lại nhé.
ĐĂNG KÝ THÀNH CÔNG Hãy có những trải nghiệm tuyệt vời cùng NomNom nhé
66
Prototype
67
68
Prototype
Prototype
BÁO LỖI!!!
Không gửi được mã
Thử lại
THÀNH CÔNG
Gửi mã thành công
Quay lại màn hình chính
69
70
Prototype
Prototype
71
10. TVC
.Các Scene .TVC hoàn chỉnh
Cรกc Scene
73
Cรกc Scene
74
Cรกc Scene
75
Cรกc Scene
76
Đăng ký 3G/4G
Tải ứng dụng Artivive
Quét hình phía dưới để trải nghiệm TVC AR nha
77
11. Sản phẩm quảng bá
.Poster tại Trạm xe buýt .Billboard
79
10 80
81
Ghé qua Behance của tụi mình nhe:
Võ Trương
Nguyễn Dương