Báo cáo chức năng và giao diện của GUI Studio v5

BỘ CÔNG THƯƠNG
KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM

ĐỀ

TÀI:

Tìm hiểu giao diện và chức năng trên
GUI Design Studio v5

Giáo viên hướng dẫn: Th.S Nguyễn Thành Thái
Môn: Tương tác người máy


Danh sách nhóm
1) Nguyễn Minh Mẫn
2) Lê Hoàng Long
3) Nguyễn Văn Thao

14032221
14019291
14013921

2


Mục lục:

3

I. Khái niệm thiết kế giao diện
Giao diện người dùng là bộ mặt, hay còn gọi là thành phần trung gian để thực hiện
giao tiếp, giữa con người với máy tính. Nó là nơi người sử dụng nhập thông tin vào hệ
thống máy tính (đầu vào) và nhận thông tin phản hồi từ máy tính (đầu ra). Giao diện thì
có rất nhiều loại khác nhau nhưng về mặt cấu trúc thì đều giống nhau. Chúng đều bao
gồm người dùng, hệ thống, đầu vào và đầu ra.
Hệ thống

Đầu vào

Đầu ra

Người sử dụng

Ví dụ: Giả sử chúng ta dùng một chương trình đồ hoạ để vẽ một hình vuông. Mô
hình thông tin đầu vào và đầu ra được cho trong bảng sau:
Nhu cầu người dùng

Đầu vào người dùng

Đầu ra hệ thống

Người dùng muốn
dùng công cụ để vẽ
một ngôi sao

Người dùng nhấp chuột
vào biểu tượng hình ngôi
sao trên thanh công cụ

Hệ thống thay đổi hình
dạng con trỏ thành hình
dạng ngầm định để sẵn
sàng vẽ.

Người dùng thực
hiện vẽ hình ngôi
sao

Người dùng kích và kéo
con trỏ chuột để vẽ

Hệ thống hiển thị hình
dạng thu được thực tế
trong quá trình di chuyển
chuột

4


II. Giới thiệu GUI Design Studio
2.1.

Giới thiệu về GUI Design Studio Professional Edition

GUI Design Studio là một phần mềm công cụ thiết kế chuyên biệt cho bất cứ ai
tham gia vào việc thiết kế ứng dụng giao diện người dùng, bao gồm cả thiết kế trải
nghiệm người dùng, nhà phân tích kinh doanh, phát triển, quản lý dự án và tư vấn. GUI
Design Studio có thể được sử dụng bất cứ khi nào bạn cần phải rút ra một ứng dụng

trông giống như hiển thị các bộ phận của nó kết nối với nhau như:
• Tạo ra các đề xuất dự án
• Nắm bắt yêu cầu
• Tạo ra màn hình giả lập
• Sản xuất các chi tiết kỹ thuật chi tiết cho các nhà phát triển
• Đề xuất cải tiến sản phẩm hiện có
 Tạo bài thuyết trình cho người dùng và các bên liên quan hoặc thậm
chí chỉ cần cho chính mình để:
• Xác minh thiết kế
• Khám phá lựa chọn thay thế
• Đánh giá các kịch bản sử dụng khác nhau
• Các tính năng:
 Tạo ra thiết kế giao diện người dùng nhanh chóng và dễ dàng
• Cho dù màn hình của bạn được chi phối bởi các cửa sổ ứng dụng, các trang
Web, phụ bảng điều khiển tùy chỉnh nhưng thiết kế màn hình đầy đủ tính năng
sẽ cho phép bạn tạo ra chúng một cách nhanh chóng và dễ dàng.
• Kéo và thả các vị trí của các yếu tố thiết kế

5


• Edge và công cụ chụp chuyên ngành cho phép các yếu tố để chỉ cần nhấp vào
nhau
• Mịn pan và zoom bằng cách sử dụng chuột (với sự hỗ trợ thêm cho các bánh
xe di chuyển và độ nghiêng)
• Không giới hạn undo / redo
• Cut, Copy, Paste và Nhân đôi lệnh
• Công cụ liên kết và khoảng cách
 Truy cập Hơn 120 Built -Trong yếu tố thiết kế
• Tạo màn hình bằng cách sử dụng điều khiển Windows tiêu chuẩn, các yếu tố

Web và các yếu tố chung khác. Các biến thể được cung cấp trong nhiều trường
hợp để tăng tốc độ xây dựng. Kết hợp các yếu tố để tạo ra các điều khiển tùy
chỉnh và các biến thể hơn nữa.
• Khung hình của Windows và Hộp thoại
• Thanh công cụ, thanh Menu và menu Popup
• Hộp văn bản, chỉnh sửa hộp và Combos
• Buttons, Radio Buttons và Hộp kiểm tra
• Bars Di chuyển, Sliders và quay
• Danh sách, cây thư mục và bảng
• Tabs, Tab Bars và Panels
• Bars tiến bộ và Rulers
• Ribbon Bar Tab Panels, menu, nút và các yếu tố khác
• Các trang Web, Panels, Buttons và Danh sách văn bản
• và nhiều hơn nữa ...
 Các yếu tố tùy biến (mới trong 4.0)
6


•

Tạo các thiết lập của riêng của bạn của các yếu tố thường được sử dụng, và
nhóm các yếu tố

• Chuyển bất kì tập tin thiết kế thành một yếu tố tùy chỉnh để tái sử dụng.
• Chỉ định thư mục có chứa thiết kế yếu tố tùy chỉnh.
• Kéo và thả để thêm một yếu tố tùy chỉnh để thiết kế và chỉnh sửa theo yêu cầu.
• Lấy hoặc tạo ra các thư viện dự án của riêng của bạn của các thành phần tùy
chỉnh và liên kết chúng vào các dự án của bạn làm việc.
• Gói thư viện thành phần tùy chỉnh để chia sẻ với những người khác.
 Dự án và Thiết kế Mẫu (mới trong 4.0, ấn bản chuyên nghiệp)

• Turbo tăng năng suất của bạn bằng cách bắt đầu từ một mẫu thiết kế thay vì
một tấm phông nền trống.
• Tạo dự án mới dựa trên một mẫu.
• Chèn các mẫu mẫu thiết kế vào một dự án hiện có với tất cả các tập tin cần
thiết.
• Chèn luôn luôn tạo ra các tập tin duy nhất để nó an toàn để sử dụng cho các
mẫu lặp lại trong cùng một thư mục.
• Trình duyệt hiển thị hình thu nhỏ để giúp bạn lựa chọn và cho phép bạn tìm
thấy các bản mẫu theo thể loại hoặc chọn từ các mẫu của bạn được sử dụng
gần đây nhất.
• Tạo mẫu từ các dự án toàn bộ các thư mục trong các dự án hoặc các tập tin
thiết kế cá nhân.
• Nhập khẩu các mẫu và chia sẻ mẫu của riêng bạn với những người khác.
 Bao gồm các biểu tượng và hình ảnh định dạng đa dạng
• Thêm nền và đồ họa nền vào thiết kế của bạn và điều chỉnh bố trí của họ như
là một cách dễ dàng như với bất kỳ yếu tố khác.
• Kéo và thả hình ảnh từ cây tập tin dự án
7


• Phổ biến hình ảnh định dạng được hỗ trợ bao gồm BMP, GIF, JPEG và PNG
• Minh bạch GIF và PNG các tập tin hỗ trợ
Crop, căng ngói hình ảnh
• Nhanh chóng truy cập bảng phân loại của các biểu tượng
• Biểu tượng phổ biến được chia sẻ giữa các dự án
• Dự án cũng có thể có các biểu tượng của riêng mình
• Sử dụng tiêu chuẩn ICO tập tin mà sau này có thể được sử dụng trong sản xuất
• Biểu tượng quy mô để kiểm tra kích thước khác nhau và tránh phải tạo ra
nhiều phiên bản trong khi tạo mẫu
• Hơn 150 biểu tượng cơ bản bao gồm để giúp bạn bắt đầu

• Tạo biểu tượng của riêng bạn bằng cách sử dụng các biểu tượng trình soạn
thảo tích hợp Biểu tượng Express
• Tích hợp với một trình soạn thảo biểu tượng khác nhau nếu ưa thích
 Chú thích thiết kế của bạn với Lớp phủ và Ghi chú Side
•

Khi bạn cần phải giải thích thêm cho thiết kế của bạn, bạn có thể thêm chú
thích các yếu tố trên trang hoặc giữ họ ra khỏi cách thức ghi chú bên.

• Thêm hộp văn bản nổi, cặp ngoặc nhọn và đánh dấu trực tiếp thiết kế
• Thêm ghi chú định dạng để mô tả một thiết kế toàn bộ
• Thêm ghi chú định dạng để mô tả mỗi phần tử cá nhân
• Lưu ý yếu tố xuất hiện trong một công cụ quảng cáo trong quá trình thiết kế và
khi chạy các mẫu thử nghiệm
• Hiển thị hoặc ẩn các chú thích trên một thiết kế với một phím nhấn
 Có sử dụng lại các thành phần thiết kế Modular và Masters

8


•

Chia nhỏ các dự án của bạn thành thiết kế thành phần nhỏ hơn có thể được tái
sử dụng trên bất kỳ số lượng các mẫu thiết kế.

• Chia sẻ thành phần thiết kế các bộ phận như bảng điều khiển tùy chỉnh trên
thiết kế nhiều
• Thành phần có thể được sử dụng trong các thành phần khác với bất kỳ mức độ
làm tổ
• Thay đổi thành phần ban đầu ngay lập tức được phản ánh bất cứ nơi nào họ

đang sử dụng
• Ghi đè lên thuộc tính yếu tố thành phần trên các trường hợp thiết kế cụ thể
• Tái sử dụng các thiết kế phổ biến trên nhiều dự án bằng cách đặt chúng trong
thư viện
 Sử dụng thiết kế của bạn để tạo một thử nghiệm động
•

Tạo các thiết kế màn hình cá nhân là hữu ích, nhưng Studio Thiết kế giao diện
cũng cho phép bạn kết nối chúng lại với nhau theo những cách khác nhau và
mang lại cho họ cuộc sống như một nguyên mẫu tương tác.

• Đồ họa, mô tả quy trình làm việc ứng dụng
• Ngay lập tức chạy và kiểm tra thiết kế của bạn như là một nguyên mẫu tương
tác
• Sử dụng neo vào vị trí chính xác nơi bạn muốn
• Tabbed giao diện hỗ trợ một cách dễ dàng
• Điều hướng từ các điểm nóng trong các ảnh bitmap
• Sản xuất các trình đơn ngữ cảnh chuột phải
• Sử dụng hộp tin nhắn để mô tả hành vi phức tạp
• Thay đổi độ phân giải màn hình hiệu quả để xem cách thiết kế của bạn có thể
phù hợp với một kích thước màn hình khác nhau
• Không có kịch bản hoặc mã hóa được tham gia
9


 Tăng cường tương tác (mới trong 4.0, ấn bản chuyên nghiệp chỉ)
• Tận dụng lợi thế của tính năng tương tác mang lại cho mẫu thử nghiệm của
bạn với cuộc sống và tạo ý tưởng của bạn thiết kế thực tế hơn.
• Yếu tố tương tác cho phép lựa chọn mặt hàng, kiểm tra thay đổi trạng thái
hộp, nhập dữ liệu và các hành vi khác, với điều khiển bàn phím.

• Gán dữ liệu biến các yếu tố để sử dụng các giá trị của họ ở những nơi khác
trong các mẫu thử nghiệm.
• Văn bản trên nhiều yếu tố có thể chứa nội dung động bằng cách nhúng dữ liệu
biến.
• Kiểm soát điều hướng tự động thông qua việc sử dụng các biểu thức logic
kinh doanh có chứa các biến và chức năng khác nhau.
• Bảng điều kiện hiển thị nội dung khác nhau tùy thuộc vào bất kỳ số lượng các
biểu thức và giá trị dữ liệu.
• Thay đổi khả năng hiển thị và nhà nước cho phép của các yếu tố theo quy tắc
dựa trên các giá trị dữ liệu.
 Tạo tài liệu đặc điểm kỹ thuật
• Thể hiện một mẫu thử nghiệm điều hướng là phương cách mạnh mẽ nhất để có
được một cảm giác về một ứng dụng và gợi ra những ý kiến phản hồi, nhưng
đôi khi bạn cũng cần để sản xuất tài liệu truyền thống hơn tĩnh để chia sẻ với
colleages và người sử dụng.
• Tự động thế hệ tài liệu đặc điểm kỹ thuật đầy đủ
• Bao gồm tất cả các thiết kế, màn hình trong thiết kế và tất cả các ghi chú và
chú thích
• Tạo tài liệu hướng dẫn đầy đủ bao gồm những thay đổi mới nhất để tiết kiệm
giấy, mực in và xem xét thời gian
 Tạo thiết kế để đánh giá bên ngoài
• Ngoài ra để tạo ra tài liệu đặc điểm kỹ thuật, thiết kế có thể được xuất khẩu để
xem xét trong một số cách khác.
10


• Tạo một tập tin phân phối duy nhất có chứa tất cả các tập tin tham chiếu
không có vấn đề mà họ được lưu trữ
• Bao gồm toàn bộ dự án, phần duy nhất một thư mục hay chỉ là thiết kế một cá
nhân

• Các tập tin phân phối là rất nhỏ và có thể được gửi đến bất cứ ai có ứng dụng
xem miễn phí
• Tùy chọn cho phép Viewer để khởi động thẳng vào chạy các mẫu thử nghiệm
để phân phối hoạt động giống như một ứng dụng thực tế
• Phân phối cho phép phong cách khác nhau trực quan để được áp dụng trong
Viewer
• Xuất khẩu các thiết kế cá nhân cho một số định dạng tập tin hình ảnh khác
nhau
• Sao chép toàn bộ một thiết kế như là một hình ảnh để dán vào một ứng dụng
khác như một Wordprocessor
 Xem thiết kế của bạn trong phong cách trực quan nhiều
• Trình bày thiết kế của bạn trong một phong cách đó là phù hợp với đối tượng
của bạn. Đôi khi bạn cần độ trung thực cao để chấp nhận và đôi khi bạn cần độ
trung thực thấp để khuyến khích thông tin phản hồi và thay đổi. GUI Design
Studio cho phép bạn thay đổi trình bày của bạn mà không cần phải thay đổi
thiết kế của bạn.
• Chọn phong cách trực quan của bạn từ một thiết lập Sở thích
• Thiết kế bằng cách sử dụng phong cách làm việc ưa thích của bạn và chạy các
mẫu thử nghiệm để trình bày trong một phong cách khác nhau nếu muốn
 Phối hợp trong các nhóm thiết kế dự án
• GUI Design Studio cho phép các đội thiết kế để chia sẻ các tập tin thiết kế và
làm việc trên cùng một dự án cùng một lúc.
• Đặc biệt hỗ trợ cho Subversion (SVN) Kiểm soát các dự án

11


• Kho lưu trữ máy chủ có thể được trên mạng nội bộ (LAN) hay trên mạng
Internet
• Tổ chức lại các dự án xóa, đổi tên và di chuyển các tập tin với các tài liệu

tham khảo duy trì và thay đổi chuyển giao cho các thành viên khác
• Có quyền tự do để sửa đổi các tập tin thiết kế mà không cần khóa và nhập các
thay đổi được thực hiện bởi các thành viên khác (tự động trong hầu hết các
trường hợp)
 Tiết kiệm thời gian và tiền khi Thu thập yêu cầu
• Bắt đầu với quyền thiết lập các yêu cầu là rất quan trọng. Ngay cả phương
pháp nhanh nhẹn với chu kỳ phát triển gia tăng cần thiết lập cơ bản các yêu
cầu để làm việc.
• Một giao diện người dùng mô hình hoặc mẫu thử nghiệm sẽ cho phép tất cả
mọi người hình dung ứng dụng và nhanh chóng tiếp xúc với các yêu cầu và sự
phức tạp không cần thiết.
• Trường hợp đặc biệt và các yếu tố thiết kế quan trọng có thể được xác định
sớm trong vòng đời dự án.
• GUI Design Studio cung cấp các thành phần còn thiếu để bổ sung và làm tăng
thêm yêu cầu chức năng truyền thống.
• Bởi vì các mockups rất trực quan và dẫn đến sự hiểu biết nhanh hơn, thỏa
thuận có thể đạt được sớm hơn và có thể tránh được hiểu lầm tốn kém.
 Giảm rủi ro và tăng niềm tin vào dự án
• Khi bạn không biết phạm vi đầy đủ của một dự án, bạn có nguy cơ không đáp
ứng thời hạn đề xuất.Studio thiết kế giao diện giúp bạn hình dung rõ hơn toàn
bộ dự án.
• Một sự hiểu biết tốt hơn về phạm vi cho phép cho các dự đoán chính xác hơn
trong khoảng thời gian và giảm nguy cơ tràn tốn kém.
• Hãy tự tin rằng bạn có thể cung cấp trong khoảng thời gian của bạn quy định
về thời gian và ngân sách.

12


• Thiết kế trong một tốc độ cao, thấp có nguy cơ môi trường throwaway, khuyến

khích sửa đổi cho đến khi thiết kế là đúng và giữ các tùy chọn triển khai mở.
• Tránh nguy cơ của một nguyên mẫu được xây dựng với các công cụ phát triển
nơi có thể có sức đề kháng để thay đổi do những nỗ lực đã bỏ ra và áp lực để
biến nó thành hệ thống cuối cùng khi các mã cơ bản đã được sản xuất sẵn sàng
nhanh chóng chứ không phải là mạnh mẽ.
• Thảo luận về vấn đề thực hiện với các nhà phát triển trước khi mã nguồn được
viết để xác định các khu vực mà sẽ yêu cầu điều tra thêm một cách tiếp cận
thay thế.
• Bắt lỗi thiết kế và không nhất quán, tìm thấy yếu tố quan trọng và khám phá
các trường hợp đặc biệt sớm trong vòng đời dự án, trước khi quá muộn.
• Xây dựng niềm tin với khách hàng và người dùng của bạn bằng cách trình bày
một tầm nhìn rõ ràng của dự án hoặc ứng dụng của bạn.
 Nâng cao khả năng sử dụng phần mềm
• Một lợi thế quan trọng của việc xây dựng một nguyên mẫu giao diện người
dùng là khả năng để kiểm tra quy trình làm việc với nhiều kịch bản để đảm
bảo rằng họ có thể sử dụng.
• Kiểm tra xem các kịch bản phổ biến nhất được tối ưu hóa cho nỗ lực tối thiểu
trong quá trình sử dụng.
• Kiểm tra các quy tắc đặt tên và bố trí phù hợp trong cả thiết kế.
• Tham gia với người sử dụng sớm trong quá trình và loại bỏ các khu vực của
sự thất vọng trong thiết kế.
 Tăng Năng suất và Mở sự sáng tạo của bạn
• Nếu bạn đã tạo ra các ứng dụng mô hình hoặc mẫu đầu tiên sử dụng công cụ
chỉnh sửa hình ảnh, công cụ phát triển hoặc giấy tờ sau đó bạn sẽ tìm thấy
GUI Design Studio là một cách làm việc nhanh hơn nhiều, với các tính năng
được thiết kế để giúp bạn và không giữ bạn trở lại.
• Hãy đối xử với màn hình giống như một bức vẽ freeform để đặt yếu tố thiết kế
bất cứ nơi nào bạn muốn - giống như trên giấy nhưng với một kích thước vải
thực tế không giới hạn và tất cả các lợi thế của máy tính chỉnh sửa.
13

• Nếu bạn muốn kết hợp phác thảo giấy và phiên quét mã vạch, bạn có thể quét
chúng trong và sử dụng chúng, nhân rộng các hình ảnh để phù hợp với nơi cần
thiết.
• Sử dụng các kỹ năng sáng tạo của bạn để đưa ra các yếu tố giao diện mới nếu
cần thiết. Xây dựng từ các yếu tố khác hoặc vẽ chúng trong một gói phần mềm
đồ họa hoặc trên giấy. Hộp công cụ phát triển không còn là một hạn chế. Nếu
bạn có thể rút ra nó, bạn có thể sử dụng nó!
• Kể từ khi có không có mã hóa có liên quan, thiết kế sản phẩm hiệu quả trở nên
truy cập vào tất cả mọi người, đặc biệt là thiết kế giao diện người dùng và các
chuyên gia cần nó.
• Nhanh chóng tạo thử nghiệm nhiều lựa chọn thay thế để đánh giá và sử dụng
tính năng sao chép thiết kế để thực hiện điều này thậm chí còn nhanh hơn.

 Yêu cầu hệ thống:
• Microsoft Windows 7 / Vista / XP / NT / 2000
• Ít nhất 20 MB không gian đĩa cứng
• Ít nhất 512 MB bộ nhớ đề nghị

2.2.

Cài đặt phần mềm

Đầu tiên chúng ta cần download phần mềm GUI Design Studio từ trang web:
về máy và tiến hành chạy file setup. Giao diện cài đặt
sẽ hiển thị như sau:

14

Bấm chọn Next để tiếp tục cài

15


Chọn I accept the agreement và chọn Next để tiến hành cài đặt phần tiếp theo

16


Ở giao diện này, chúng ta có thể tùy chọn lưu file cài đặt chọn Browse và chọn nơi
muốn cài đặt, nếu mún để chương trình cài mặc định vào ổ C thì chúng ta bấm Next.

Giao diện này cho phép ta đổi tên thư mục lưu, thường ta sẽ để mặc định mà bấm
Next

17


Ta có thể chọn Create a desktop icon để đưa biểu tượng GUI ra ngoài màn hình
chính. Ta tiếp tục chọn Next và tiếp tục.

18


Xem lại các thông tin trước khi chúng ta cài đăt, nếu có sai ta có thể Back lại để
thay đổi, không có sai sót gì chúng ta chọn Install để đi tới màn hình cài đặt tiếp theo.

Chờ cho tiến trình cài đặt xong

19


Chọn Finish để kết thúc quá trình cài đặt.

Giao diện sau khi cài đặt xong.

2.3.

Chức năng
 Project

Chứa các bản thiết kế giao diện đang làm hoặc đã làm được lưu lại trong máy tính.

 Elements
20


Chứa các thành phần cần thiết cho một giao diện, ở đây phần mềm hỗ trợ tối ưu
nhất cho người dùng các thành phần cần thiết của một giao diện như, bảng thông báo,
nút lệnh, biểu đồ, các options tick, text, label, các heading của web, list, tree, table, các
frame,… Người dùng chỉ việc kéo và thả ra bên ngoài vùng thiết kế.

 Icons
Chức năng của mục này là cung cấp các kí hiệu cần thiết cho người dùng sử dụng
để thiết kế các nút lệnh tắt, hoặc nút lệnh dùng để thông báo,…Chúng ta có thể tìm một
kí hiệu thích hợp cho giao diện của mình, ví dụ như để add thêm 1 tên hay món hàng
nào đó thì ta có thể chọn kí hiệu dấu +, hoặc xóa thành phần thì ta chọn X.

21


 Annotations
Chứa các công cụ để chú thích.

 Storyboard
Chứa các bảng chọn như Close, Accept, Back, Forward,…

22


 Data
Chứa các dữ liệu về hình ảnh, danh sách tên, thu chi, hoặc là các dữ liệu mua bán
(nếu có) của một hệ thống bán hàng, hoặc dữ liệu nào đó của người thiết kế cần cho
giao diện mà họ sắp thực hiện.

 Note

23


Chú thích cho một đối tượng nào đó mà người dùng muốn.

 Chức năng trên thanh công cụ
Ngoài những thành phần trên thì phần mềm còn cung cấp cho người dùng một số
chức năng liên quan trên thanh công cụ của hệ thống như New, Open, Save, Copy,
Paste,… Đặc biệt quan trong nhất là công cụ Make Connection Node, Run Prototype...

24

III. Demo sản phẩm
3.1.

Bước 1: Khởi tạo Project

• Mở chương trình GUI Design Studio.
• Sử dụng lệnh File > New Project để mở hộp thoại tạo Project mới và tiến hành
nhập tên cho Project.

3.2.

Bước 2: Tạo hộp thoại nhiệm vụ

• Chọn panel Elements và nhóm Windows and Dialogs.
• Tìm phần tử Dialogs và kéo thả chúng vào phần thiết kế và tiến hành đặt lại
tên (Notepad).

Hình 1: Tạo cửa sổ chính cho chương trình.
• Tiếp theo ta thiết lập menu task bar cho giao diện NotePad: vào Toolbars and
menus
• Tìm phần tử Menu Bar kéo và thả vào Dialogs trước đó, canh chỉnh hợp lí
25