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

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.

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

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àubậ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:

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 đốilậ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ềnnhưng ở một số quốc gia như:Brazil,Ấn độ thì máu tím lại tượng trưng cho sự chếtchóc và đen đủi

 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ệ 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

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

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

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

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

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

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

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

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

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

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

Giao diện login

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

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

Giao diện thống kê

Giao diện sản phẩm

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

Giao diện nhập hàng

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

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

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

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

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

Hình:Giao diện trang chủ

Hình:Giao diện danh mục sản phẩmHình:Giao diện chi tiết sản phẩm

Hình:Giao diện giỏ hàng và thanh toán sản phẩm

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

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

2.2:Giao diện mẫu Admin