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

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

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

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

Mục lục:

Hệ thống

Người sử dụng Đầu vào Đầu ra

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ệngiao 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 baogồ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ụ để vẽ

một ngôi sao

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

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

Người dùng thực

hiện vẽ hình ngôi

sao

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ểnchuột

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ứ aitham 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ảinghiệ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 GUIDesign 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ụngtrô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 trangWeb, 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àonhau

• 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ườnghợ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ùychỉ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ùychỉ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ầnthiế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ácmẫ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ìmthấ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ập tinthiế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 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ình soạnthả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ênthiế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 trongthư 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ệncũ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ươngtá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

 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ủabạ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áihộ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áctrong 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ệubiế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 logickinh 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ácbiể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ắcdự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ớicolleages 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ệmgiấ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ế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ó ứng dụngxem 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 trongViewer

• 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ácnhau

• 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ụngkhá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ượngcủ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 DesignStudio cho phép bạn thay đổi trình bày của bạn mà không cần phải thay đổithiế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ácmẫ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

• 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ácthay đổi được thực hiện bởi các thành viên khác (tự động trong hầu hết cáctrườ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ươngphá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êucầ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 địnhsớ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ăngthê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ỏathuậ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ơntrong 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ếnkhí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ểnnơ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àngnhanh 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 đượcviế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ậnthay 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àymộ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ườidùng là khả năng để kiểm tra quy trình làm việc với nhiều kịch bản để đảmbả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ểutrong 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ảithự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étchú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ầnthiế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ếucầ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ếubạ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êntruy 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ácchuyê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ụngtí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:

sẽ hiển thị như sau:

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

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

Ở 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ơimuố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ấmNext

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