đồ án thiết kế giao diện cho ứng dụng bán điện thoại

download by :


download by :


Phần 1:Cơ sở lý thuyết
1. Lý thuyết màu sắc

Có 2 hệ màu:
RGB(+):Được sử dụng trong các ứng dụng thiết kế trang web và các thiết
bị điện tử.Trong đó,R nghĩa là Red(Đỏ),G nghĩa là Green(Xanh lá) và B nghĩa
là Blue(Xanh dương).
CMYK(-):Thường được sử dụng trong thiết kế và in ấn.Trong đó,C nghĩa là
Cyan(Xanh lơ),M nghĩa là Magenta(Hồng sẫm),Y nghĩa là Yellow(Vàng),K nghĩa
là Key(Đen).
Hệ màu sắc trong tự nhiên là màu trừ(Hấp thụ ánh sáng).Ánh sáng mặt trời là
màu cộng (được tập hợp bởi 7 màu tại mỗi thời điểm thích hợp) .
Vịng màu thuần sắc:
Đỏ,cam,vàng,lục,lam,chàm,tím là những mà sắc cơ bản nhất trong hệ
màu. Chia thành 3 bậc:
Màu bậc 1:Là màu khơng có màu nào pha ra được bắt đầu từ 3 màu cơ bản
là:Đỏ,vàng và xanh dương.
Màu bậc 2:Là màu được pha từ màu của bậc 1.
Màu bậc 3:Là màu được pha từ màu của bậc 2 với màu bậc 1 để sinh ra màu
bậc
Màu tương đồng:
Là màu nằm cạnh nhau đem lại cảm giác hài hòa cho nhau.
Màu tương phản:

download by :

Là hai màu đối lập lẫn nhau trên vòng màu thuần sắc.Khi phối các cặp màu đối
lập lại với nhau sẽ làm nổi bật cả hai bên.Ví dụ:Hai cặp màu đối lập là cam và tím
được sử dụng trong thiết kế logo của ngân hàng TPBank.
Màu nóng
Là những màu được tạo ra từ một số màu chính như đỏ, da cam, vàng.Khi sử
dụng những màu này trong thiết kế sẽ giúp ta cảm nhận được sự ấm cúng,thể hiện
được sự ấn tượng,đam mê,hạnh phúc,năng động và tràn đầy năng lượng.
Màu lạnh
Là gồm những màu dịu nhẹ như: xanh lam, xanh lá, màu tím nhạt,… Khi sử
dụng những màu này trong thiết kế sẽ giúp tạo nên cảm giác dễ chịu thoải mái,nhẹ
nhàng êm dịu,yên bình và yên tĩnh.
Ý nghĩa của màu sắc:
Tùy thuộc vào mỗi quốc gia mà màu sắc sẽ mang những ý nghĩa khác nhau.Ví
dụ: Trên thế giới, màu tím biểu trưng cho quyền lực, sự giàu có và độc quyền
nhưng ở một số quốc gia như:Brazil,Ấn độ thì máu tím lại tượng trưng cho sự chết
chóc và đen đủi.
2. Bố cục

Bố cục:
Là nghệ thuật sắp
xếp. Tỉ lệ vàng:
Là 1 tỉ lệ không phải do con người tạo ra,do tự nhiên mà có(trong tự nhiên).
Cơng thức tính tỉ lệ vàng:

A

B=

A +B
B

=1,618 Phi:Được đặt trong tỉ lệ vàng.

Phi(1,618)= Φ=φ(Ký hiệu)

download by :


download by :


Bố cục 1 phần 3:
Là chia thành 9 ô bằng nhau.Khi đó,sẽ tạo thành 4 điểm giao nhau.Khi
muốn thu hút sự chú ý thì đặt đối tượng chính vào 1 trong 4 điểm hoặc cả 4
điểm giao nhau thì sẽ đem lại hiệu ứng về thị giác cho người nhìn.
Thường được dừng khi đưa ảnh vào website để tạo sự chú ý.
Tỉ lệ đối xứng:
Khi là 1 không gian đồng bộ về màu sắc,khi đó có thể sử dụng tỉ lệ đối xứng
Chỉ sử dụng khi làm 1 không gian có 1 chủ thể duy nhất.Ví dụ:Trên bức tường
có 1 chiếc đồng hồ.
Hạn chế:Ít chủ thể hạn chế về mặt khơng gian.
Bố cục lưới:
Khi có 1 khơng gian mà chẳng biết làm gì thì chúng ta căng dây lưới.Căng dây
lưới áp dụng theo tỉ lệ vàng.Nội dung đưa vào các ô để làm bật chủ thể và không
được đặt vào các điểm giao nhau.Để nội dung gọn vào trong ô.
Tỉ lệ xếp chồng:
Vẽ lưới nhưng không vẽ lưới theo chiều dọc chỉ vẽ theo chiều ngang,tính
theo tỉ lệ vàng hoặc tỉ lệ gấp đôi.

Tỉ lệ gấp đôi:
Chiều cao chữ cao bao nhiêu thì biên lề cách bấy nhiêu.
Dùng để căn chỉnh giữa chữ và lề.Thường được dung trong menu.

download by :


Phần 2:Thiết kế sản phẩm
1. Bản phác thảo:
1.1:Phác thảo giao diện User

Hình 1:Giao diện đăng ký

Hình 2:Giao diện đăng nhập

download by :


Hình 3:Giao diện quên mật khẩu

Hình 4:Giao diện cấp lại mật khẩu
Hình 5:Giao diện xác định mã OTP

download by :


Hình 6:Giao diện thơng tin người dùng

download by :

Hình 7:Giao diện trang chủ

download by :


Hình 8:Giao diện danh sách sản phẩm

download by :


Hình 9:Giao diện chi tiết sản phẩm

download by :


Hình 10:Giao diện giỏ hàng và thanh tốn đơn hàng

download by :


Hình 11:Giao diện đơn hàng

download by :


1.2:Phác thảo giao diện Admin

Giao diện login

Giao diện chi tiết sản phẩm

download by :


Giao diện chỉnh sửa sản phẩm

Giao diện thống kê

download by :


Giao diện sản phẩm

Giao diện thêm sản phẩm

download by :


Giao diện nhập hàng

download by :


download by :


download by :

download by :


2. Giao diện mẫu:
2.1:Giao diện mẫu User:

Hình:Giao diện đăng ký

Hình:Giao diện đăng nhập

download by :


Hình:Giao diện quên mật khẩu

Hình:Giao diện cấp lại mật khẩu

download by :


Hình:Giao diện xác nhận mã OTP

Hình:Giao diện thơng tin người dùng

download by :


Hình:Giao diện trang chủ

download by :