BÀI THỰC HÀNH

THIẾT KẾ GIAO DIỆN PHẦN MỀM

Buổi 1. Thiết kế giao diện ứng dụng winform

I. Mục tiêu
- Xây dựng giao diện ứng dụng winform dựa trên công cụ diagrams.
- Nắm được cách thiết kế trên công cụ thiết kế giao diện diagrams.
- Tư duy được giao diện các màn hình chức năng của phần mềm để thực hiện thiết
kế.
II. Nội dung
- Thiết kế giao diện quản lý danh mục thông tin sách với các yêu cầu sau:
+ Các thông tin cần lưu trữ khi có thêm một đầu sách được nhập về thư viện
là: mã sách, tên sách, năm xuất bản, ảnh bìa, tình trạng, thể loại,...
+ Có thể thêm, sửa, xoá, lưu hoặc xuất ra thông tin sách có trong thư viện.
+ Giao diện phải thể hiện số lượng sách có trong thư viện.
+ Có thể quay về giao diện trước/tiến đến giao diện sau
+ Có thể tìm kiếm sách theo từ khoá.
- Các bước thực hiện:
+ Tạo file thiết kế trên diagrams
+ Xây dựng giao diện đăng nhập ứng dụng
+ Xây dựng giao diện danh mục thông tin sách
+ Xây dựng giao diện thêm mới sách
+ Hoàn thiện bài thực hành

1. Tạo file thiết kế trên diagrams

Truy cập địa chỉ:
https://app.diagrams.net/
- Chọn nơi lưu file thiết kế:
- Chọn Thiết bị để lưu file thiết kế vào máy tính. Có thể chọn Drive, Dropbox… để
lưu file thiết kế online
- Nhập Email sau đó bấm Tiếp theo, nhập mật khẩu sau đó tiếp theo.
- Bấm vào Tạo biểu đồ mới để tạo file thiết kế mới.

- Đặt tên cho file thiết kế.

- Chọn vào biểu đồ trống.
- Cuối cùng bấm vào Tạo để khởi tạo biểu đồ
- Chọn thư mục lưu file thiết kế:

- Giao diện làm việc của công cụ.

- Thực hiện kéo thả các đối tượng để thiết kế giao diện.
+ 1 là các hình khối, biểu tượng để sử dụng xây dựng thiết kế
+ 2 là các trang thiết kế
+ 3 là khung dùng để chỉnh sửa, phong cách thiết kế
+ 4 là menu chức năng của công cụ
+ Trung tâm là nơi thiết kế.

2. Xây dựng giao diện đăng nhập ứng dụng quản lý thông tin sách

- Khởi động phần mềm quản lý thư viện, phần mềm sẽ có giao diện đăng nhập phần
mềm.
 Gợi ý giao diện đăng nhập phần mềm

Tiến hành thực hiện thiết kế giao diện:

+ Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế. Điều chỉnh kích
thước frame.

+ Sử dụng text để tạo text cho frame

+ Thực hiện thêm ô nhập tài khoản và mật khẩu:
+ Điều chỉnh kích thước phù hợp với màn hình.

+ Thêm check box Nhớ mật khẩu:

+ Thêm dòng text Nhớ mật khẩu.
+ Thêm Button Đăng nhập

+ Sử dụng công cụ tìm kiếm để tìm kiếm các button. Nhập từ khoá tìm kiếm, sau
đó enter.
+ Chọn button thích hợp đặt vào frame, điều chỉnh kích thước button căn giữa.

- Thêm text Quên mật khẩu?

- Chọn vào tab Trang-1, bấm vào đổi tên, thực hiện đổi tên thành: Màn hình đăng
nhập.
- Như vậy là chúng ta đã thiết kế được giao diện đăng nhập của phần mềm.

3. Xây dựng giao diện danh mục thông tin sách

- Phân tích các thông tin cần hiển thị: Đăng nhập phần mềm thành công, hiển thị
danh mục sách trong thư viện.
+ Hiển thị số lượng sách trong kho.
+ Có các button Thêm mới, sửa, xoá dữ liệu
+ Có textbox tìm kiếm sách theo tên sách
+ Có selectbox tìm kiếm sách theo loại sách
+ Có button tìm kiếm, button bỏ điều kiện lọc
 Gợi ý giao diện danh mục sách

Tiến hành thiết kế giao diện:

- Bấm vào dấu + để thực hiện tạo 1 tab mới để thiết kế giao diện:

+ Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế. Điều chỉnh kích
thước frame.
+ Sử dụng text kéo thả vào khung mới tạo để thực hiện nhập các ô text:

“Phần mềm quản lý thư viện” góc trên cùng bên trái
“Xin chào: Admin” góc trên cùng bên phải
“DANG MỤC THÔNG TIN SÁCH”: ở giữa in đậm
- Thiết kế bảng hiển thị dữ liệu danh mục sách:
+ Nhập table để tìm kiếm các bảng, chọn vào bảng và kéo thả vào khung giao diện
đang thiết kế.

+ Chọn vào icon table ở thanh menu, thực hiện chèn thêm các cột và các dòng của
bảng phù hợp với dữ liệu cần hiển thị..
- Chúng ta xác định cần hiển thị các thông tin của sách bao gồm:
+ Cột đầu tiên sẽ là: STT
+ Tên sách
+ Năm xuất bản
+ Thể loại
+ Tình trạng
+ Ảnh bìa
+ Hành động ( Sửa, xoá sách)
- Tiến hành chọn vào các ô, nhập tên cột cho các ô.

- Ở cột Hành động, sẽ có 2 button đó là sửa và xoá đối với mỗi dòng. Ý nghĩa:
Dùng để Sửa xoá bản ghi:
- Phía dưới bảng dữ liệu, chúng ta cần có phân trang, mỗi màn hình chỉ hiển thị 10
hoặc 20 bản ghi. Button phân trang dùng để chuyển sang trang dữ liệu trước hoặc
tiếp theo.

- Phía trên bảng dữ liệu cần hiển thị số lượng sách. Kéo thả text vào khung đang
thiết kế vào điền label:
“Danh mục sách”: Bên dưới DANH MỤC THÔNG TIN SÁCH
“Tổng số: <Số lượng sách hiện tại của phần mềm> để giá trị tạm là 105” đặt bên
phải Danh mục sách
- Thiết kế bộ lọc cho danh mục sách:
Ý nghĩa: Dùng để tìm kiếm sách trong phần mềm theo các tiêu chí.
+ Tên sách: Kiểu input - Ý nghĩa: Nhập tên sách cần tìm kiếm
+ Chọn thể loại sách: Kiểu selectbox - Ý nghĩa: Để chọn thể loại sách cần tìm
kiếm
+ Bỏ lọc: Kiểu Button - Ý nghĩa: Bấm bỏ lọc sẽ reset giá trị mặc địng của Ô nhập
tên sách và selectbox Chọn thể loại sách
+ Tìm kiếm: Kiểu Button - Ý nghĩa: Bấm Tìm kiếm sẽ tìm kiếm tất cả các sách
phù hợp với điều kiện của Ô nhập tên sách và selectbox Chọn thể loại sách.
- Thiết kế button Thêm mới. Kéo thả button vào khung thiết kế. Nhập label thêm
mới cho button.
+ Ý nghĩa: Khi bấm vào thêm mới sẽ hiển thị ra một form để nhập các thông tin
sách cần thêm mới.
- Nhấn vào Tab Trang-2 chọn Đổi tên: Màn hình danh mục sách

4. Xây dựng giao diện thêm mới sách

- Phân tích: Bấm vào button Thêm mới ở màn hình danh mục sách sẽ hiển thị
modal nhập các thông tin:
+ Mã sách, tên sách, năm xuất bản, ảnh bìa, tình trạng, thể loại,...
+ Có button Lưu dữ liệu.
+ Có button Huỷ

Gợi ý giao diện thêm mới thông tin sách

Tiến hành thực hiện thiết kế giao diện:

- Bấm vào + để thực hiện thêm mới tab mới:
+ Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế. Điều chỉnh kích
thước frame.

+ Sử dụng text để tạo text cho frame

“Phần mềm quản lý thư viện” góc trên cùng bên trái
“THÊM MỚI THÔNG TIN SÁCH”: in đậm ở giữa
- Thiết kế các ô nhập, chọn các trường dữ liệu của sách cần thêm mới:
+ Tên sách: input – Nhập tên sách
+ Năm xuất bản: input – Nhâp năm xuất bản
+ Thể loại: selectbox – Chọn thể loại sách
+ Tình trạng: selectbox – Chọn tình trạng
+ Ảnh bìa: selectbox – Chọn ảnh đại diện từ máy tính

- Kéo thả rectangle và text thực hiện thiết kế các trường dữ liệu:

- Kéo thả thiết kế button Lưu và huỷ:

- Nhấn vào Trang-3, chọn Đổi tên: Màn hình thêm mới.

Từ hướng dẫn trên Anh/ chị thực hành thiết kế theo hướng dẫn để làm quen với
công cụ thiết kế diagram.
5. Bài tập thực hành
1. Anh (chị) hãy thiết kế giao diện để quản lý thông tin làm thẻ thư viện với các yêu
cầu sau:
 - Khi làm mới thẻ thư viện, các thông tin cần nhập gồm: Mã thẻ, họ và tên,
ngày sinh, giới tính, số điện thoại, địa chỉ, ngày làm thẻ, ngày hết hạn.
- Có thể tạo mới, sửa, xoá, lưu hoặc in ra thông tin của một bạn đọc.
- Giao diện phải thẻ hiện số bạn đọc trong danh sách.
- Có thể tìm kiếm bạn đọc theo từ khoá.

2. Anh (chị) hãy thiết kế giao diện để quản lý mượn sách. với các yêu cầu sau:
- Khi mượn sách, các thông tin cần nhập gồm: Mã sách, tên sách, tác giả,
tình trạng sách, số lượng, hạn trả (có thể chỉ cần nhập mã sách, các thông tin tên
sách, tác giả, tình trạng sách, hạn trả sẽ tự động hiển thị).
- Có thể thêm, sửa, xoá, lưu hoặc xuất ra thông tin của một sách được mượn.
- Giao diện phải thể hiện danh mục sách bạn đọc đã và đang mượn.
- Có thể quay về giao diện trước/tiến đến giao diện sau.

3. Anh (chị) hãy thiết kế giao diện thống kê thông tin sách, với các yêu cầu sau:
- Có thể chọn được thống kê theo năm, tháng và từ ngày đến ngày
- Hiển thị tổng số sách, tổng số sách đã mượn, tổng số sách còn lại
- Hiển thị số sách theo danh mục sách
- Hiển thị top 10 sách được mượn nhiều nhất

4. Anh (chị) hãy thiết kế giao diện ứng dụng “Quản lý sinh viên” phục vụ việc quản
lý sinh viên cho phòng Đào tạo của trường Đại học. Giao diện phần mềm anh (chị)
thiết kế các màn hình theo tham khảo các ứng dụng đã có và phân tích của cá nhân.

5. Anh (chị) hãy thiết kế giao diện ứng dụng “Quản lý công văn” phục vụ việc quản
lý công văn đến và công văn đi của trường Đại học. Giao diện phần mềm anh (chị)
thiết kế các màn hình theo tham khảo các ứng dụng đã có và phân tích của cá nhân.
 Buổi 2. Thiết kế giao diện cho App mobile

I. Mục tiêu
- Xây dựng được giao diện ứng dụng mobile dựa trên công cụ figma.
- Nắm được các thao tác thiết kế trên công cụ thiết kế giao diện figma.
- Tư duy được giao diện các màn hình chức năng của phần mềm để thực hiện thiết
kế.
II. Nội dung
- Đăng ký tài khoản sử dụng công cụ figma
- Sử dụng các thanh công cụ thiết kế
- Thêm mới plugin hỗ trợ
- Sử dụng template đã tồn tại để lấy giao diện mẫu
- Hoàn thiện màn hình đăng nhập
- Thực hiện các bài thực hành bổ sung

Bài tập mẫu:

Thiết kế màn hình đăng nhập cho ứng dụng mobile sử dụng công cụ thiết kế Figma.

Hướng dẫn thực hành

1. Đăng ký tài khoản sử dụng công cụ figma

Truy cập địa chỉ:
https://www.figma.com/
- Chọn vào Get started

- Nhập Email và Password sau đó tiến hành Create account

- Nhập các thông tin bổ sung:

- Truy cập vào email đăng ký để Xác thực tài khoản:

- Nhập tên của Team:

- Chọn Skip this step:

- Chọn Start for free:

- Chọn I will started on my own.

2. Sử dụng các thanh công cụ thiết kế

- Đăng ký và đăng nhập tài khoản Figma đã thành công. Tiến hành thực hiện thực
hành tạo thiết kế.
- Bấm chọn New design file

- Đặt tên cho file thiết kế: LoginScreenIOS

- Bắt đầu thiết kế: Bấm chọn vào thanh công cụ Frame. Bên menu bên phải tại
Tab Design chọn thiết bị. Ở đây chọn Iphone 13 pro max.
- Hiển thị khung thiết kế của điện thoại Iphone 13 Pro Max

- Thêm chữ “Xin chào” vào màn hình:

+ Chọn vào biểu tượng T (Text) tại thanh công cụ sau đó tại khung màn hình nhập
“Xin chào”. Tại tab Design nhập các thuộc tính về font, size, màu sắc của chữ.
+ Ở đây chọn font: Lato, size 35, Bold
- Chọn dạng layout hiển thị để thuận tiện cho việc căn chỉnh khi thiết kế:
+ 1 Bấm chọn vào Iphone 13 promax – 1.
+ 2 Tại tab Design chọn vào Layout grid
+ 3 chọn dạng Columns.
- Nhập các thông tin hiển thị của layout. Sau đó Enter:

- Tiếp theo sẽ cần thêm ô nhập tài khoản và mật khẩu.

- Trên thanh công cụ chọn Rectangle. Thực hiện vẽ ô tài khoản. Tại tab design:
+ corner radius: 14
+ Fill: color chọn mã màu: F6F6F9
- Tương tự thực hiện tạo ô mật khẩu.

3. Thêm mới plugin hỗ trợ thiết kế

- Thêm icon cho ô mật khẩu.
+ Cần thêm mới plugin để sử dụng Icon.
- Tại Main menu, chọn Plugins, chọn Find more Plugin…
+ Nhập từ khoá Icon: Xuất hiện nhiều plugin Icon. Chọn Icon mà chúng ta muốn sử
dụng. Ở đây chọn: Ionicons Icon Set by Iconduck.
+ Sau đó bấm Run
- Tiến hành chọn icon cần thêm mới, nhập eye sau đó enter để tìm kiếm.
Kéo icon vào khung thiết kế, tuỳ chỉnh size. Sau đó đặt vào bên phải ô mật khẩu.

- Làm mờ icon và “Mật khẩu” bằng cách đặt mã màu là “D3D6E1”

- Điều chỉnh cho 2 ô tài khoản và mật khẩu sát với viền.
- Tạo chức năng Quên mật khẩu?

- Tạo button Đăng nhập:

+ Chọn vào thanh công cụ Rectangle, vẽ button Đăng nhập.Tại tab design:
+ corner radius: 14
+ Fill: color chọn mã màu: 0047FF
- Thêm chữ “Đăng nhập” vào giữa button:
+ Chọn vào biểu tượng T (Text) tại thanh công cụ sau đó tại khung màn hình nhập
“Đăng nhập”. Tại tab Design nhập các thuộc tính về font, size, màu sắc của chữ.
Đặt vào giữa Button
+ Ở đây chọn font: Lato, size 18
- Thêm textbox: Nếu chưa có tài khoản? Đăng ký ngay.

- Thêm text box Hoặc đăng nhập. Đăng nhập với Google hoặc Facebook
- Thêm dòng kẻ, chọn vào công cụ Line
- Thêm button Facebook:

- Chọn icon facebook:

- Chọn icon facebook và sửa kích thước:

- Tương tự làm Button Google.

- Thêm mới thanh status bar của iphone sử dụng mẫu có sẵn.

- Truy cập figma Community:

https://www.figma.com/community để tìm kiếm các template đã thiết kế sẵn.
Ở đây tìm kiếm teamplate Figma IOS UI Kit (free). Link:
https://www.figma.com/community/file/809487622678629513

- Bấm chọn Get a copy

- Zoom to bản thiết kế, chọn vào status bar và bấm chuột phải, chọn Copy.

- Quay lại trang web file đang thiết kế.

- Dán vào frame đang thực hiện. Ta được giao diện như sau:
- Bấm vào Present để xem trên giao diện:
Để chia sẻ mẫu thiết kế. Bấm vào Share. Nhập email, chọn chế độ chỉ xem hoặc có
thể sửa. Sau đó bấm Sen invite.

Từ hướng dẫn trên Anh/ chị thực hành thiết kế theo hướng dẫn để làm quen với
công cụ thiết kế figma.

Bài tập thực hành

1. Nối tiếp bài tập mẫu đã có màn hình đăng nhập, anh (chị ) thực hành thiết kế các
màn hình sau cho ứng dụng mobile:
- Màn hình đăng ký tài khoản
- Màn hình quên mật khẩu
- Màn hình thông tin cá nhân

2. Anh (chị) hãy thiết kế giao diện cho ứng dụng mobile: “Đọc báo Online” với các
yêu cầu sau:
- Trang chủ hiển thị danh sách tin tức.
- Menu điều hướng phía dưới gồm có các menu Tin tức, Video, Xu hướng,
Cá nhân.
 - Menu trên hiển thị các danh mục tin tức như: Nóng, Nổi bật, Mới….
- Chi tiết tin tức hiển thị Tiêu đề tin tức, thời gian đăng, Nội dung tin tức. Có
button để quay lại.

Gợi ý: Tải và tham khảo ứng dụng Báo mới trên điện thoại di động để học
tập thiết kế

2. Anh (chị) hãy thiết kế giao diện trang chủ cho ứng dụng mobile: “Đặt lịch hẹn
của sân Golf” với các yêu cầu sau:
- Menu điều hướng phía dưới gồm: Trang chủ, lịch hẹn, thông báo, tài khoản
- Trang chủ hiển thị:
+ Danh sách các ảnh của sân golf dưới dạng slide ngang.
+ Có nút Đặt lịch ngay
+ Hiển thị danh sách tin tức của sân golf
+ Hiển thị danh sách caddy của sân golf
+ Hiển thị các chương trình khuyến mãi của sân golf
- Khi nhấn vào button Đặt lịch ngay chuyển qua màn hình Đặt lịch
+ Khách hàng có thể chọn thời gian đặt lịch
+ Chọn khung giờ đặt lịch
+ Có button xác nhận đặt lịch
- Tab lịch hẹn:
+ Hiển thị danh sách các lịch hẹn của khách hàng từ trước đến nay.
+ Hiển thị sách trạng thái (Đã xong, Mới đặt lịch, Đã huỷ)

Gợi ý: Tải và tham khảo các ứng dụng Đặt lịch sân Golf trên điện thoại di
động để học tập thiết kế.

4. Anh (chị) hãy thiết kế giao diện ứng dụng Mobile “Quản lý công việc”. Giao
diện của ứng dụng Anh (chị) thiết kế theo tham khảo các ứng dụng đã có và phân
tích của cá nhân.
5. Anh (chị) hãy thiết kế giao diện ứng dụng Mobile “Quản lý chi tiêu cá nhân”.
Giao diện của ứng dụng Anh (chị) thiết kế theo tham khảo các ứng dụng đã có và
phân tích của cá nhân.