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

Người dùng thực hiện vẽ hình vuông Người dùng kích và kéocon trỏ chuột để vẽ Hệ thống hiển thị hìnhdạ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

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ậpthô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áytính (đầu ra) Giao diện thì có rất nhiều loại khác nhau (như là bàn phím điệnthoạ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ặtcấ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

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éocon trỏ chuột để vẽ

Hệ thống hiển thị hìnhdạ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ôngGiá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

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ữ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ò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ê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 tamua 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áctiê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ộtthiế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

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

•Viện tiêu chuẩn vương quốc Anh cấp chứng chỉ “Nhãn con diều hâu” đốivớ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 đượccấ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ườimá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ảnphẩ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ệntă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ốilượ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ồ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ă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

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

• 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ùngbà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àusắ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

1.4 Các quy tắc thiết kế giao diện người dùng

1.4.1 Hướng dẫn tương tác chung

Hướng dẫn về tương tác chung bao hàm cả hiển thị thông tin và vào ra dữliệu và điều khiển toàn bộ hệ thống Do đó nó rất hay bị bỏ qua Những hướngdẫn sau đây tập chung vào tương tác chung

• Tính nhất quán: Phải dùng định dạng nhất quán cho việc chọn đơn, vàochỉ lệnh, hiển thị dữ liệu và vô số các chức năng khác xuất hiện trong HCI

• Cho thông tin phảm hồi có nghĩa: Cung cấp cho người sử dụng nhữngthông tin phản hồi bằng hình ảnh và âm thanh nhằm thiết lập việc trao đổi thôngtin hai chiều(giữa người sử dụng và giao diện)

• Yêu cầu kiểm chứng mọi hành động phá huỷ không tầm thường: Nếungười dùng yêu cầu xoá một tệp, ghi đè lên thông tin bản chất hay yêu cầu kếtthúc chương trình thì một thông báo “ Bạn có chắc .?” nên xuất hiện ra

• Cho phép dễ dàng lần ngược nhiều hành động: Các chức năng UNDO(hoàn tác) hay REVERSE (đảo ngược) đã giúp cho hàng nghìn người dùng khỏimất đi hàng nghìn giờ lam việc Khả năng lần ngược nên có sẵn trong mọi ứngdụng trong tương tác

• Giảm thiểu khối lượng thông tin phải ghi nhớ giữa các hành động:Không nên trông đợi người dùng cuối cùng nhớ được một danh sách các số hiệuhay tên gọi để cho người ấy có thể dùng lại trong các chức năng kế sau Cầnphải tối thiểu tải trọng nghi nhớ

• Tìm kiếm tính hiệu quả trong đối thoại, vận động và ý nghĩ: Nên tốithiểu dùng các phím, cần phải xem xét khoảng cách chuột phải đi qua giữa cácđiểm trong thiết kế bố trí màn hình và đừng đẩy người dùng vào tình huống phải

tự hỏi, “Cái này nghĩa là gì nhỉ?”

• Dung thứ cho sai lầm: Hệ thống nên tự bảo vệ khỏi lỗi của người dùng

để khỏi bị chết, hỏng

• Phân loại các hoạt động theo chức năng và tổ chức màn hình hài hoàtheo vùng: Một trong những cái lợi của thực đơn kéo xuống là khả năng tổ chứccác lệnh theo kiểu Về bản chất người thiết kế nên cố gắng đạt các chỉ lệnh vàhành động “nhất quán”

• Cung cấp tiện nghi trợ giúp cảm ngữ cả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 5

• 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.

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ùngkhô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àycho phép hấp thụ nhanh chóng thông tin Đồ họa hay sơ đồ nên thay thế cho cácbả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ôiphụ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ấuGiá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

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ư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 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ệchiể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ườ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ấpthu 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ệuquả 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â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ệcrú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ệnbằ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 chochỉ 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ựchiê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

•Cho phép người dùng làm phù hợp cái vào Người dùng, chuyên gia cóthhẻ quyết định tạo ra các chỉ lệnh đã sửa đổi phù hợp mình hay bỏ qua một sốkiểu cảnh báo và kiểm chứng hành động HCI cho phép làm điều này.

•Tương tác nên mềm dẻo nhưng cũng nên hòa hợp với mốt đưa vào ưathích Mô hình người dùng sẽ trợ giúp cho việc xác định mốt đưa vào nào là ưathích Ví dụ, một thư kí có thể rất thích với cách đưa vào từ bàn phìm, trong khingười quản lí lại có thể thấy thoải mái khi dùng thiết bị trỏ và nháy như chuột

•Khử kích hoạt các chỉ lệnh không thích hợp trong hoàn cảnh của hànhđộng hiện tại Điều này bảo vệ cho người dùng khỏi phải cố dùng một hànhđộng nào đó có thể làm phát sinh lỗi

•Để cho người dùng kiểm soát luồng tương tác Người dùng nên có khảnăng nhảy qua các hành động không cần thiết, thay đổi trật tự các hành độngyêu cầu(nếu có thể được trong hoàn cảnh của ứng dụng), và khôi phục được từcác điều kiện lỗi mà không phải ra khỏi chương trình

•Cung cấp trợ giúp cho mọi hành động đưa vào: một số vấn đề khi xem xéttiện nghi trợ giúp bao gồm:

 Liệu trợ giúp có sẵn với tất cả các chức năng hệ thống và vào mọilúc trong tương tác không? Các tùy chọn bao gồm: trợ giúp chỉ cho một tập concủa mọi chức năng và hành động; trợ giúp cho tất cả các chức năng

 Người dùng sẽ yêu cầu trợ giúp như thế nào? Các tuỳ chọn baogồm: đơn trợ giúp; phím trợ giúp; chỉ lệnh HELP

 Trợ giúp sẽ được trình bày như thế nào? Các tuỳ chọn bao gồm cửa

sổ tách biệt; tham khảo tới một tài liệu in; gợi ý một hay hai dòng được tạo ratrong một vị trí màn hình cố định

 Người dùng sẽ trở về với tương tác thông thường như thế nào? Cáctuỳ chọn bao gồm: nút trở về được hiển thị trên màn hình; phím chức năng haydãy điều khiển

 Thông tin trợ giúp sẽ được cấu trúc trợ giúp như thế nào? Các tùychọn bao gồm: cấu trúc “phẳng” trong đó mọi thông tin đều được thâm nhập quatới một từ khóa; cấp bậc phân tầng của thông tin cung cấp chi tiết ngày càngtăng khi người dùng tiến sâu vào cấu trúc; sử dụng siêu văn bản

Khử bỏ việc đưa vào “chuột mickey” Đừng yêu cầu người dùng phải xácđịnh các đơn vị cho việc đưa vào công nghệ (trừ phi có mơ hồ) Đừng yêu cầuGiá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 8

người dùng phải gõ 00 cho toàn bộ số tiền, đưa ra các giá trị mặc định mọi lúc

có thể và không bao giờ yêu cầu người dùng đưa vào những thông tin có thể tựđộng thu thập hay tính toán được bên trong 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 9

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 chobấ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ứ 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ậm chí chỉ cần cho chính mình để :

• 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ấpvà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

• Mịn pan và zoom bằng cách sử dụng chuột (với sự hỗ trợ thêm cho cácbá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ácyếu tố Web và các yếu tố chung khác Các biến thể được cung cấp trong nhiềutrườ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ềukhiể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

• 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ầntù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 tincầ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 chocá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ạntì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ụnggầ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ậptin 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

• Sử dụng tiêu chuẩn ICO tập tin mà sau này có thể được sử dụng trongsả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 ranhiề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ìnhsoạ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ê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

• 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ácnhau 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ẫutươ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ệmcủ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ạngthá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ơikhá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

• 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 quytắ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ếtkiệm giấy, mực in và xem xét thời gian

– Ngoài ra để tạo ra tài liệu đặc điểm kỹ thuật, thiết kế có thể được xuấtkhẩ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ếukhô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ó ứngdụ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ụngtrong 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 ảnhkhá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

• Sao chép toàn bộ một thiết kế như là một hình ảnh để dán vào một ứngdụ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 đốitượng của bạn Đôi khi bạn cần độ trung thực cao để chấp nhận và đôi khi bạncần độ trung thực thấp để khuyến khích thông tin phản hồi và thay đổi GUIDesign 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ếumuố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

• Kho lưu trữ máy chủ có thể được trên mạng nội bộ (LAN) hay trên mạngInternet

• 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ệutham 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ầuhế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ácyêu cầu để làm việc

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 16

• 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à

 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ơntoà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áchơ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

• 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ểnkhai 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áttriể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ẵnsà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ếpcậ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ámphá các trường hợp đặc biệt sớm trong vòng đời dự án, trước khi quá muộ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 17