THIẾT kế GIAO DIỆN BẰNG GUI DESIGN STUDIO

Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
CHƯƠNG I THIẾT KẾ GIAO DIỆN
1.1 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ư là bàn phím điện
thoại, màn hình máy tính, màn hình của các bộ điều khiển VCR) 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.
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ụ hình vuông để
vẽ
Người dùng nhấp chuột
vào biểu tượng hình
vuông 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 (hình vuông) để
sẵn sàng vẽ.
Người dùng thực
hiện vẽ hình
vuông

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
Ta thấy rằng mặc dù thông tin đầu vào, đầu ra cũng như cách thức xử lý
thông tin là khác nhau nhưng về cơ bản mô hình đầu vào và đầu ra là không
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

1
Hệ thống
Người sử dụng
Đầu vào Đầu ra
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
thay đổi. Ví dụ cũng cho ta thấy sự khác nhau rất lớn về thời gian phản hồi.
Khi người dùng nhập thông tin (ví dụ di chuyển chuột) và nhận thông tin đầu
ra (hình vẽ), thì thời gian phản hồi là rất ngắn (chỉ mấy miligiây). Trong một
số trường hợp khác, thời gian phản hồi là rất dài (ví dụ thời gian cần để lưu trữ
hay sao chép một file).
1.2 Vai trò và tầm quan trọng của thiết kế giao diện
Trong nhiều năm người sử dụng phàn nàn rằng các hệ thống máy tính khó
sử dụng, ngôn ngữ khó hiểu và không nhạy bén. Trong khi đó người thiết kế lại
là những người hầu như không gặp người sử dụng bao giờ và ngay cả khi gặp và
nhận được những lời phàn nàn từ phía người sử dụng họ cũng không để tâm tới.
Tình hình này đã được thay đổi từ khi các máy tính các nhân ra đời. Những
người sử dụng trực tiếp điều khiển hệ thống, nhiều người có thể lập trình các ứng
dụng riêng của mình và lúc này máy tính không chỉ được sử dụng ở văn phòng

mà còn xâm nhập vào các gia đình. Vì vậy việc thiết kế một giao diện tốt trở nên
quan trọng do :
• Thị trường (người sử dụng) lựa chọn phần mềm đóng gói sẵn: Người ta
mua một sản phẩm là do họ thích hình dáng của nó và cái họ xem xét chính là
giao diện.
• Người sử dụng phản đối các giao diện tồi: Đó là khi thị trường đặt ra các
tiêu chuẩn thì người sử dụng không còn muốn dùng các giao diện tồi của hệ
thống đã được thiết kế trước đây mà họ đàng sử dụng trong môi trường làm việc
của mình.
• Giao diện tồi có thể dẫn tới việc không sử dụng được hoặc sử dụng không
có hiệu quả hệ thống. Một giao diện tốt có thể hạn chế được nhược điểm của một
thiết kế phần mềm tồi nhưng một giao diện tồi khiến không sử dụng được hệ
thống ngay cả khi hệ thống đó có thiết kế phần mềm tuyệt vời.
Một động cơ thúc đẩy nữa là tương tác người máy ngày càng được điều
chỉnh nhanh chóng nhờ các tiêu chuẩn.
• Tổ chức tiêu chuẩn quốc tế ISO kết hợp với tổ chức quốc gia như
BSI(Anh), ANSI(Mỹ), DIN(Đức) cho ra đời tiêu chuẩn áp dụng cho thiết kế
tương tác người máy với số hiệu tiêu chuẩn ISO9241
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

2
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• Viện tiêu chuẩn vương quốc Anh cấp chứng chỉ “Nhãn con diều hâu” đối
với những sản phẩm có tương tác người máy tốt. Đối với những sản phẩm được
cấp chứng chỉ này sẽ có ưu thế cạnh tranh trên thị trường. Mặt khác, về pháp lí,
theo luật Anh và Châu Âu người thiết kế giao diện tồi có thể sẽ bị kiện ra tòa. Và
trong tương lai luật này có thể trở thành luật của ISO về thiết kế tương tác người
máy.

Do sự ra đời của các tiêu chuẩn và nhận thức của người sử dụng về các sản
phẩm tin học nên số lượng các mã được viết cho đầu vào và đầu ra cho giao diện
tăng lên, khoảng 50% mã được dùng cho xử lý giao diện trong một sản phẩm.
Người ta cũng nhận thấy rằng giao diện không chỉ là phần bị phê bình nhiều
nhất của hệ thống mà còn là phần quan trọng và tốn nhiều chi phí nhất của nhiều
chương trình nghiên cứu. Thông qua một số công trình đã được nghiên cứu,
người ta nhận thấy rằng thiết kế giao diện tồi có thể gây ra những hậu quả như
sau:
• Tần số mắc lỗi trong điều hành hệ thống và nhập liệu tăng lên. Để sửa lại
các lỗi này thí sẽ tốn rất nhiều thời gian và tiền của, còn những lỗi không
sửa được cho đúng có thể gây hậu quả có hại nếu các quyết định được
đưa ra trên cơ sở dữ liệu không chính xác.
• Hệ thống hoạt động kém. Hệ thống có thể không thể quản lí được khối
lượng chuyển tác đã được thiết kế, hoặc không đạt được độ chính xác
của đầu ra, do hệ thống khố sử dụng và khó học.
• Hệ thống không sử dụng được do người sử dụng phản đối (Bộ quốc
phòng Mỹ cho rằng sự thất bại của hệ thống là do thiết kế giao diện tồi
và phân tích yêu cầu không đầy đủ).
• Người sử dụng thất vọng khi sử dụng hệ thống. Điều này làm cho năng
suất làm việc thấp. Người sử dụng bị căng thẳng và trong trường hợp đặc
biệt họ sẽ phá hủy hệ thống.
1.3 Tiến trình thiết kế giao làm mẫu
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

3
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• Thiết kế giao diện cần phản ảnh các yếu tố sau:
– Kinh nghiệm, năng lực và nhu cầu của người dùng: khả năng dùng

bàn phím, chuột, tốc độ phản ứng…
– Sở thích, văn hóa, lứa tuổi: màu sắc, ngôn ngữ…
• Giao diện cần có các tính chất sau:
– Tính thân thiện: thuật ngữ, khái niệm, thói quen, trình tự nghiệp vụ
của người dùng
• Giao diện cần có các tính chất sau:
– Tính nhất quán: vị trí hiển thị, cấu lệnh, thực đơn, biểu tượng, màu
sắc.
– Cơ chế phục hồi tình trạng trước lỗi
– Cung cấp các kịp thời các phản ứng và trợ giúp mọi lúc, mọi nơi
– Tiện ích tương tác đa dạng
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

4
Chuyờn tt nghip : THIT K GIAO DIN BNG GUI DESIGN STUDIO
1.4 Cỏc quy tc thit k giao din ngi dựng
1.4.1. Hng dn tng tỏc chung
Hng dn v tng tỏc chung bao hm c hin th thụng tin v vo ra d
liu v iu khin ton b h thng. Do ú nú rt hay b b qua. Nhng hng
dn sau õy tp chung vo tng tỏc chung.
Tớnh nht quỏn: Phi dựng nh dng nht quỏn cho vic chn n, vo
ch lnh, hin th d liu v vụ s cỏc chc nng khỏc xut hin trong HCI.
Cho thụng tin phm hi cú ngha: Cung cp cho ngi s dng nhng
thụng tin phn hi bng hỡnh nh v õm thanh nhm thit lp vic trao i thụng
tin hai chiu(gia ngi s dng v giao din).
Yờu cu kim chng mi hnh ng phỏ hu khụng tm thng: Nu
ngi dựng yờu cu xoỏ mt tp, ghi ố lờn thụng tin bn cht hay yờu cu kt
thỳc chng trỡnh thỡ mt thụng bỏo Bn cú chc. . .? nờn xut hin ra.

Cho phộp d dng ln ngc nhiu hnh ng: Cỏc chc nng UNDO
(hon tỏc) hay REVERSE (o ngc) ó giỳp cho hng nghỡn ngi dựng khi
mt i hng nghỡn gi lam vic. Kh nng ln ngc nờn cú sn trong mi ng
dng trong tng tỏc.
Gim thiu khi lng thụng tin phi ghi nh gia cỏc hnh ng:
Khụng nờn trụng i ngi dựng cui cựng nh c mt danh sỏch cỏc s hiu
hay tờn gi cho ngi y cú th dựng li trong cỏc chc nng k sau. Cn
phi ti thiu ti trng nghi nh.
Tỡm kim tớnh hiu qu trong i thoi, vn ng v ý ngh: Nờn ti
thiu dựng cỏc phớm, cn phi xem xột khong cỏch chut phi i qua gia cỏc
im trong thit k b trớ mn hỡnh v ng y ngi dựng vo tỡnh hung phi
t hi, Cỏi ny ngha l gỡ nh?
Dung th cho sai lm: H thng nờn t bo v khi li ca ngi dựng
khi b cht, hng.
Phõn loi cỏc hot ng theo chc nng v t chc mn hỡnh hi ho
theo vựng: Mt trong nhng cỏi li ca thc n kộo xung l kh nng t chc
cỏc lnh theo kiu. V bn cht ngi thit k nờn c gng t cỏc ch lnh v
hnh ng nht quỏn.
Cung cp tin nghi tr giỳp cm ng cnh
Giỏo viờn hng dn: Sinh viờn thc tp:

Trần Thị Xuân Hơng Dơng Văn Tuyên

5
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• Dùng các động từ đơn giản hay cụn động từ ngắn để đặt tên chỉ lệnh.
Tên chỉ lệnh dài dòng thì khó nhận dạng và khó nhớ. Nó cũng có thể chiếm
không gian không cần thiết trong danh sách đơn.
1.4.2. Hướng dẫn việc hiển thị thông tin.
Nếu thông tin được giao diện trình bày không đầy đủ, mơ hồ hay không dễ

hiểu thì sẽ không thỏa mãn nhu cầu người dùng. Thông tin được “hiển thị”
theo nhiều cách khác nhau: văn bản, tranh ảnh và âm thanh; bằng cách sắp đặt,
di chuyển và kích cỡ; dùng mầu sắc, độ phân giải; và thậm chí bằng cả việc bỏ
lửng. Các dẫn hướng sau đây tập trung vào hiển thị thông tin:
• Chỉ hiển thị thông tin có liên quan tới ngữ cảnh hiện tại. Người dùng
không phải khó nhọc lần qua dữ liệu, đơn và đồ hoạ phụ để thu được thông tin
có liên quan tới một chức năng hệ thống riêng.
• Đừng chôn vùi người dùng dưới dữ liệu – hãy dùng định dạng trình bày
cho phép hấp thụ nhanh chóng thông tin. Đồ họa hay sơ đồ nên thay thế cho các
bảng lớn.
• Dùng nhãn nhất quán, cách viết tắt chuẩn và mầu sắc dự kiến trước được.
Ý nghĩa của hiển thị hiển nhiên không cần tham khảo thêm nguồn thông tin ở
bên ngoài.
• Cho phép người dùng duy trì ngữ cảnh trực quan. Nếu việc hiển thị đồ hoạ
máy tính được thay đổi tỉ lệ thì hình ảnh gốc nên được hiển thị thường xuyên
(dưới dạng rút gọn tại góc màn hình) để cho người dùng hiểu được hiểu được vị
trí tương đối của phần hình ảnh hiện đang được xét.
• Đưa ra thông báo lỗi có nghĩa:
 Thông báo nên đưa ra những lời khuyên có tính xây dựng để khôi
phục từ lỗi.
 Thông báo nên đưa ra những lời khuyên có tính chất xây dựng để
khôi phục từ lỗi.
 Thông báo nên đi kèm với tín hiệu nghe được hay thấy được. Tức là
một tiếng bíp có thể được sinh ra đi kèm với việc hiển thị thông báo, hay thông
báo có thể nhấp nháy chốc lát hay được hiển thị theo mầu dễ nhận ra như “mầu
lỗi”
 Thông báo nên có tính chất “phi đánh giá”. Tức là lời đưa ra đừng
hàm ý trách móc người dùng. Giải thích: Bởi vì không ai thực sự thích tin xấu
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

6
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
nên ít người dùng thích thông báo lỗi dù nó được thiết kế như thế nào. Nhưng
một triết lí thông báo lỗi có hiệu quả có thể cải thiện được chất lượng của hệ
thống và sẽ giảm tốt đáng kể sự chán nản của người dùng khi vấn đề quản thực
xuất hiện.
• Dùng chữ hoa, chữ thường, tụt lề và gộp nhóm văn bản đẻ giúp cho việc
hiểu. Nhiều thông tin được HCI truyền đạt là văn bản, ngay cả cách bố trí và
hình dạng của văn bản cũng có tác động đáng kể đến sự thoải mái để người
dùng hấp thu thông tin.
• Dùng cách hiển thị “tương tự” để biểu diễn những thông tin dễ được hấp
thu hơn so với dạng biểu diễn này. Ví dụ, hiển thị áp suất của bể chứa lọc dầu
trong xưởng lọc dầu sẽ có ít tác dụng nếu dùng cách biểu diễn số, nhưng nếu
hiển thị dạng nhiệt kế được dùng thì chuyển động theo chiều đứng và sự thay
đổi mầu sắc có thể được dùng để chỉ ra những điều kiện áp suất thay đổi. Điều
này sẽ cung cấp cho người dùng cả thông tin tuyệt đối và tương đối.
• Xem xét vùng hiển thị có sẵn trên màn hình và dùng nó một cách có hiệu
quả. Khi dùng nhiều cửa sổ, ít nhất nên có sẵn không gian để chỉ ra một phần
cho từng của sổ này. Bên cạnh đó, kích cỡ màn hình (vấn đề công nghệ hệ
thống) nên được lựa chọn để hòa hợp với kiểu ứng dụng cần được cài đặt.
1.4.3. Hướng dẫn việc vào dữ liệu.
Phần lớn thời gian của người dùng được dành cho việc chọn lựa các chỉ
lệnh, gõ dữ liệu và cung cấp cái vào cho hệ thống. Trong nhiều ứng dụng, bàn
phím vẫn còn là phương tiện đưa vảo chính, nhưng chuột, bộ số hóa và thậm chí
hệ thống nhận dạng tiếng nói đang nhanh chóng trở thành các phương tiện có
hiệu quả. Những hướng dẫn sau đây tâpj trung vào việc đưa vào dữ liệu:
• Tối thiểu việc số hành động đưa vào mà người dùng cần thực hiện. Việc
rút gọn khối lượng gõ là điều yêu cầu trước hết. Điều này có thể được thực hiện

bằng cách dùng chuột để chọn từ một tập đã xác định sẵn các cái vào; dùng
“thang trượt” để xác định cái vào trong một miền giá trị; dùng “macro” làm cho
chỉ một phím được chuyển thành một tập dữ liệu vào phức tạp hơn.
• Duy trì sự nhất quán giữa hiển thị thông tin và cái vào dữ liệu. Các kí tự
hiển thị trực quan (như kích cỡ văn bản, mầu sắc, cách bố trí) nên được thực
hiên đối với miền cái vào.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

7
Chuyờn tt nghip : THIT K GIAO DIN BNG GUI DESIGN STUDIO
Cho phộp ngi dựng lm phự hp cỏi vo. Ngi dựng, chuyờn gia cú
thh quyt nh to ra cỏc ch lnh ó sa i phự hp mỡnh hay b qua mt s
kiu cnh bỏo v kim chng hnh ng. HCI cho phộp lm iu ny.
Tng tỏc nờn mm do nhng cng nờn hũa hp vi mt a vo a
thớch. Mụ hỡnh ngi dựng s tr giỳp cho vic xỏc nh mt a vo no l a
thớch. Vớ d, mt th kớ cú th rt thớch vi cỏch a vo t bn phỡm, trong khi
ngi qun lớ li cú th thy thoi mỏi khi dựng thit b tr v nhỏy nh chut.
Kh kớch hot cỏc ch lnh khụng thớch hp trong hon cnh ca hnh
ng hin ti. iu ny bo v cho ngi dựng khi phi c dựng mt hnh
ng no ú cú th lm phỏt sinh li.
cho ngi dựng kim soỏt lung tng tỏc. Ngi dựng nờn cú kh
nng nhy qua cỏc hnh ng khụng cn thit, thay i trt t cỏc hnh ng
yờu cu(nu cú th c trong hon cnh ca ng dng), v khụi phc c t
cỏc iu kin li m khụng phi ra khi chng trỡnh.
Cung cp tr giỳp cho mi hnh ng a vo: mt s vn khi xem xột
tin nghi tr giỳp bao gm:
Liu tr giỳp cú sn vi tt c cỏc chc nng h thng v vo mi
lỳc trong tng tỏc khụng? Cỏc tựy chn bao gm: tr giỳp ch cho mt tp con

ca mi chc nng v hnh ng; tr giỳp cho tt c cỏc chc nng.
Ngi dựng s yờu cu tr giỳp nh th no? Cỏc tu chn bao
gm: n tr giỳp; phớm tr giỳp; ch lnh HELP.
Tr giỳp s c trỡnh by nh th no? Cỏc tu chn bao gm ca
s tỏch bit; tham kho ti mt ti liu in; gi ý mt hay hai dũng c to ra
trong mt v trớ mn hỡnh c nh.
Ngi dựng s tr v vi tng tỏc thụng thng nh th no? Cỏc
tu chn bao gm: nỳt tr v c hin th trờn mn hỡnh; phớm chc nng hay
dóy iu khin.
Thụng tin tr giỳp s c cu trỳc tr giỳp nh th no? Cỏc tựy
chn bao gm: cu trỳc phng trong ú mi thụng tin u c thõm nhp qua
ti mt t khúa; cp bc phõn tng ca thụng tin cung cp chi tit ngy cng
tng khi ngi dựng tin sõu vo cu trỳc; s dng siờu vn bn.
Kh b vic a vo chut mickey. ng yờu cu ngi dựng phi xỏc
nh cỏc n v cho vic a vo cụng ngh (tr phi cú m h). ng yờu cu
Giỏo viờn hng dn: Sinh viờn thc tp:

Trần Thị Xuân Hơng Dơng Văn Tuyên

8
Chuyờn tt nghip : THIT K GIAO DIN BNG GUI DESIGN STUDIO
ngi dựng phi gừ .00 cho ton b s tin, a ra cỏc giỏ tr mc nh mi lỳc
cú th v khụng bao gi yờu cu ngi dựng a vo nhng thụng tin cú th t
ng thu thp hay tớnh toỏn c bờn trong chng trỡnh.
Giỏo viờn hng dn: Sinh viờn thc tp:

Trần Thị Xuân Hơng Dơng Văn Tuyên

9
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO

CHƯƠNG II GIỚI THIỆU GUI DESIGN STUDIO
2.1: Giới thiệu 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ế
• 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
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

10
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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)
• 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.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

11
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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
• 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
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

12
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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

– 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ể
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

13
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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
 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.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

14
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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.
• 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
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

15
Chuyờn tt nghip : THIT K GIAO DIN BNG GUI DESIGN STUDIO
Sao chộp ton b mt thit k nh l mt hỡnh nh dỏn vo mt ng
dng khỏc nh mt Wordprocessor
Xem thit k ca bn trong phong cỏch trc quan nhiu
Trỡnh by thit k ca bn trong mt phong cỏch ú l phự hp vi i

tng ca bn. ụi khi bn cn trung thc cao chp nhn v ụi khi bn
cn trung thc thp khuyn khớch thụng tin phn hi v thay i. GUI
Design Studio cho phộp bn thay i trỡnh by ca bn m khụng cn phi thay
i thit k ca bn.
Chn phong cỏch trc quan ca bn t mt thit lp S thớch
Thit k bng cỏch s dng phong cỏch lm vic a thớch ca bn v
chy cỏc mu th nghim trỡnh by trong mt phong cỏch khỏc nhau nu
mun
Phi hp trong cỏc nhúm thit k d ỏn
GUI Design Studio cho phộp cỏc i thit k chia s cỏc tp tin thit
k v lm vic trờn cựng mt d ỏn cựng mt lỳc.
c bit h tr cho Subversion (SVN) Kim soỏt cỏc d ỏn
Kho lu tr mỏy ch cú th c trờn mng ni b (LAN) hay trờn mng
Internet
T chc li cỏc d ỏn xúa, i tờn v di chuyn cỏc tp tin vi cỏc ti liu
tham kho duy trỡ v thay i chuyn giao cho cỏc thnh viờn khỏc
Cú quyn t do sa i cỏc tp tin thit k m khụng cn khúa v
nhp cỏc thay i c thc hin bi cỏc thnh viờn khỏc (t ng trong hu
ht cỏc trng hp)
Tit kim thi gian v tin khi Thu thp yờu cu
Bt u vi quyn thit lp cỏc yờu cu l rt quan trng. Ngay c
phng phỏp nhanh nhn vi chu k phỏt trin gia tng cn thit lp c bn cỏc
yờu cu lm vic.
Giỏo viờn hng dn: Sinh viờn thc tp:

Trần Thị Xuân Hơng Dơng Văn Tuyên

16
Chuyờn tt nghip : THIT K GIAO DIN BNG GUI DESIGN STUDIO
Mt giao din ngi dựng mụ hỡnh hoc mu th nghim s cho phộp tt

c mi ngi hỡnh dung ng dng v nhanh chúng tip xỳc vi cỏc yờu cu v
s phc tp khụng cn thit.
Trng hp c bit v cỏc yu t thit k quan trng cú th c xỏc
nh sm trong vũng i d ỏn.
GUI Design Studio cung cp cỏc thnh phn cũn thiu b sung v lm
tng thờm yờu cu chc nng truyn thng.
Bi vỡ cỏc mockups rt trc quan v dn n s hiu bit nhanh hn, tha
thun cú th t c sm hn v cú th trỏnh c hiu lm tn kộm.
Gim ri ro v tng nim tin vo d ỏn
Khi bn khụng bit phm vi y ca mt d ỏn, bn cú nguy c khụng
ỏp ng thi hn xut.Studio thit k giao din giỳp bn hỡnh dung rừ hn
ton b d ỏn.
Mt s hiu bit tt hn v phm vi cho phộp cho cỏc d oỏn chớnh xỏc
hn trong khong thi gian v gim nguy c trn tn kộm.
Hóy t tin rng bn cú th cung cp trong khong thi gian ca bn quy
nh v thi gian v ngõn sỏch.
Thit k trong mt tc cao, thp cú nguy c mụi trng throwaway,
khuyn khớch sa i cho n khi thit k l ỳng v gi cỏc tựy chn trin
khai m.
Trỏnh nguy c ca mt nguyờn mu c xõy dng vi cỏc cụng c phỏt
trin ni cú th cú sc khỏng thay i do nhng n lc ó b ra v ỏp lc
bin nú thnh h thng cui cựng khi cỏc mó c bn ó c sn xut sn
sng nhanh chúng ch khụng phi l mnh m.
Tho lun v vn thc hin vi cỏc nh phỏt trin trc khi mó ngun
c vit xỏc nh cỏc khu vc m s yờu cu iu tra thờm mt cỏch tip
cn thay th.
Bt li thit k v khụng nht quỏn, tỡm thy yu t quan trng v khỏm
phỏ cỏc trng hp c bit sm trong vũng i d ỏn, trc khi quỏ mun.
Giỏo viờn hng dn: Sinh viờn thc tp:

Trần Thị Xuân Hơng Dơng Văn Tuyên

17
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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.
• 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ó.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

18
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
• 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ách cài đặt GUI design studio
Trước hết bạn download phần mềm GUI design studio về máy sau đó bạn
chạy file setup. Tiếp theo giao diện cài đặt sẽ xuất hiện như sau:
Bạn chọn Next. Màn hình kế tiếp.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

19
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
Bạn chọn “I accept the agreement” rồi tiếp tục chọn Next. Màn hình kế
tiếp.
Tiếp tục chọn Next. Màn hình kế tiếp.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

20
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
Tiếp tục chọn Next. Màn hình kế tiếp.
Chọn Create a desktop icon nếu bạn muốn đưa biểu tượng GUI design
studio ra ngoài màn hình. Tiếp tục chọn Next. Màn hình kế tiếp.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

21
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
Chọn Install. Màn hình kế tiếp:
Chờ đến khi chương trình cài đặt xong.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

22
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
Chọn Finish để kết thúc quá trình cài đặt.
Hướng dẫn sử dụng GUI Design studio
Giao diện chính của chương trình:
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

23

Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
CHƯƠNG III GIỚI THIỆU GIAO DIỆN THIẾT KẾ
BẰNG GUI DESIGN STUDIO
Qua quá trình thực tập, tìm hiểu em xin giới thiệu thiết kế giao diện
chương trình quản lý điện do em thiết kế do trình độ có hạn nên chương trình
vẫn chưa thật sự hoàn hảo:
Trước hết là một số hình ảnh của chương trình:
Đây là màn hình chính xây dựng giao diện quản lý điện bằng GUI
design studio.
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

24
Chuyên đề tốt nghiệp : THIẾT KẾ GIAO DIỆN BẰNG GUI DESIGN STUDIO
Đây là giao diện chính khi chạy chương trình:
Đây là giao diện thể hiện chức năng quản lý thông tin của hệ thống:
Giáo viên hướng dẫn: Sinh viên thực tập:

TrÇn ThÞ Xu©n H¬ng D¬ng V¨n Tuyªn

25