PHÂN TÍCH và THIẾT kế GUI ĐỊNH HƯỚNG mẫu

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM
KHOA CÔNG NGHỆ - CƠ SỞ THANH HÓA
----------

ĐỒ ÁN CHUYÊN
NGÀNH
CÔNG NGHỆ THÔNG TIN
ĐỀ TÀI: PHÂN TÍCH VÀ THIẾT KẾ GUI
ĐỊNH HƯỚNG MẪU
Giảng viên HD : TH.S. NGUYỄN NGỌC ANH
Lớp
: DHTH7TH
Sinh viên TH : Lại Xuân Toàn – Hoàng Như Cường


THANH HOÁ- 2015


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

MỤC LỤC
LỜI CẢM ƠN
MỞ ĐẦU
CHƯƠNG 1:THIẾT kế GIAO DIỆN BẰNG GUI DESIGN STUDIO
1.1 Khái niệm thiết kế giao diện :
1.2 Vai trò và tầm quan trọng của thiết kế giao diện:
1.4.2. Hướng dẫn việc hiển thị thông tin.
1.4.3. Hướng dẫn việc vào dữ liệu.
CHƯƠNG 2: PHÂN TÍCH GUI DESIGN STUDIO

2.1: Giới thiệu GUI Design Studio Professional Edition
CHƯƠNG 3: THIẾT KẾ GUI ĐỊNH HƯỚNG MẪU :
3.1, Cài đặt:
3.2. Thiết kế giao diện :
1, mục đích :
2, phân tích nhiệm vụ
3, Thiết kế :
TÀI LIỆU THAM KHảO

SVTH: Lại Xuân Toàn – Hoàng Như Cường


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

LỜI CẢM ƠN
Lời đầu tiên em xin được bày tỏ sự trân trọng và lòng biết ơn chân thành đối
với thầy giáo Ths.Nguyễn Ngọc Anh giảng viên khoa Công nghệ thông tin - Trường
Đại Học Công Nghiệp TP.Hồ Chí Minh. Trong suốt thời gian học và làm đồ án tốt
nghiệp, thầy đã dành rất nhiều thời gian quý báu để tận tình chỉ bảo, hướng dẫn, định
hướng cho em thực hiện đồ án. Em xin chân thành cảm ơn tất cả các thầy cô giáo
trong Bộ môn Công nghệ thông tin - Trường ĐHCN TP.Hồ Chí Minh, chân thành
cảm ơn các thầy giáo, cô giáo tham gia giảng dạy và truyền đạt những kiến thức quý
báu trong suốt thời gian em học tập tại trường, đã đọc và phản biện đồ án của em giúp
em hiểu rõ hơn các vấn đề mình nghiên cứu, để em có thể hoàn thành đồ án tốt nghiệp
này. Em xin cảm ơn Hiệu trưởng Trường Đại Học Công Nghiệp TP.Hồ Chí Minh,
Ban giám hiệu nhà trường, Bộ môn tin học, các Phòng ban nhà trường đã tạo điều
kiện tốt nhất cho em cũng như các bạn khác trong suốt thời gian học tập và làm tốt
nghiệp. Tuy có nhiều cố gắng trong quá trình học tập, trong thời gian thực tập cũng

như trong quá trình làm đồ án nhưng không thể tránh khỏi những thiếu sót, em rất
mong được sự góp ý quý báu của tất cả các thầy giáo, cô giáo cũng như tất cả các bạn
để kết quả của em được hoàn thiện hơn.
Em xin chân thành cảm ơn!
Thanh hóa, 18 tháng 06 năm 2015.
Sinh viên

Lại Xuân Toàn

MỞ ĐẦU

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

Hiện nay có rất nhiều dự án công nghệ thông tin ứng dụng vào nhiều lĩnh vực
khác nhau của cuộc sống. Do tính chất của từng dự án mà phần mềm có thể được cài
đặt bằng các ngôn ngữ lập trình (NNLT) khác nhau. Với một vốn kiến thức rộng về
NNLT, những người làm dự án có thể lựa chọn nhanh chóng một NNLT phù hợp với
đề án thực tế. Chẳng hạn có thể lựa chọn ngôn ngữ lập trình Java cho các dự án lập
trình truyền thông, hay hướng lập trình logic cho các dự án về trí tuệ nhân tạo. GUI
STUDIO là môi trường giả lập tích hợp chính được phát triển từ Microsoft. Đây là
một loại phần mềm máy tính có công dụng giúp đỡ các lập trình viên trong việc phát
triển phần mềm.

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

CHƯƠNG 1:THIẾT kế GIAO DIỆN BẰNG GUI DESIGN STUDIO
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ìnhvuông. Mô hình
thông tin đầu vào và đầu ra được cho trong bảng sau:

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ôngthay đổi. Ví dụ cũng

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:

Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

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 đầura (hình vẽ), thì thời gian phản hồi là rất
ngắn (chỉ mấy miligiây).Trong mộtsố 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ữngngườ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 ứngdụ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òngmà 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ênquan 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ệccủ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ềuchỉ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
• 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à
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

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ềunhấ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ềuchươ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ạicá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ôngsử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áccủ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ốcphòng Mỹ
cho rằng sự thất bại của hệ thống là do thiết kế giao diện tồivà 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ăngsuất
làm việc thấp.Người sử dụng bị căng thẳng và trong trường hợp đặcbiệt họ sẽ phá hủy
hệ thống.

•Tiến trình thiết kế giao diện mẫu :

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

• 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
• 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ếmkhô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.

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

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ôngbá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ầulỗi”
-Thông báo nên có tính chất “phi đánh giá”. Tức là lời đưa ra đừnghà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ấunê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ưngmộ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

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

nản của người dùng khi vấn đề quản thựcxuấ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 GUI 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ườidù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ầutrong
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ếuhiể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ềunà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ầncho 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ànphí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ập 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.

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

CHƯƠNG 2: PHÂN TÍCH GUI DESIGN STUDIO
2.1: Giới thiệu GUI Design Studio Professional Edition
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ứ khinà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ậncủ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ậmchí 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áctrang 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
• 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ế:

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

• 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.
• 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.
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

• 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
• 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
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

*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êmchú 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ỉnhtrê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úngtrong 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
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

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ứclogic 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
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

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 để
chiasẻ 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
• 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

• 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.
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

• 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ấyGUI 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ó.
• 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.
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

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ị

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

CHƯƠNG 3: THIẾT KẾ GUI ĐỊNH HƯỚNG MẪU :

3.1, Cài đặt:
Click vào file cài đặt :

Click vào run:

Chọn “I accept the agreement” => chọn next

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

Chọn next :

Chọn next:

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

Chọn next :

Chọn install

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

Chọn finish để hoàn thành cài đặt.
3.2. Thiết kế giao diện :
1, mục đích :
Ta xây dựng giao diện đồ họa phản ánh khái quát 1 phần mềm quản lý sinh viên
và giáo viên .
Sinh viên có các lớp sau :
Với các tính năng thêm xóa sửa sinh viên .
Nhập điểm sinh viên .
Hanh kiểm của sinh viên .
Giáo viên có các chức năng sau :
Thông tin giáo viên.
Lịch giảng dạy.
Số lương.
Nhập điểm
SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:

Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

Mục đích phần mềm là phác họa các tính năng cho người dùng và người thiết kế
dễ hiểu .
2, phân tích nhiệm vụ

Xét về sinh viên dự thi

ọc (năm học, hệ đào tao, học kỳ, cơ sở, môn học phần, lớp học phần, lý thuyết, thực hành, thường kỳ & giữa kỳ, cuối kỳ..,)

2, Xóa điều kiện lọc
3. Lọc danh sách sinh viên theo điều kiện lọc (gửi truy vấn đến Server và đợi kết quả trong 5s)

4, Trả về 1 list sinh viên theo điều kiện lọc

5, Xét tư cách dự thi

6, Xét tư cách thành công

7, Lưu

8, In & Xuất

9, In – xuất danh sách cấm thi

10, Đóng

-

Thực hiện 0 mới thực hiện được 1.
Sau khi thực hiện 1 có thể thực hiện 2 trong trường hợp muốn thay đổi
điều kiện lọc. nếu 2 xảy ra lại quay về 1.
Sau 1 là 3,4,5,6,7 và phải thực hiện theo trình tự.

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang:


Đồ án phân tích và thiết kế GUI định hướng mẫu

GVHD: Th. S Nguyễn Ngọc Anh

Sau 7 có thể thực hiện một hoặc nhiều thao tác (8,9,10) không cần
theo trình tự. (8,9 chỉ có thể thực hiện sau khi thực hiện 7)
* Nhập điểm cho hệ đào tạo tín chỉ:
-

SVTH: Lại Xuân Toàn – Hoàng Như Cường

Trang: