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

36 31 0
  • Loading ...
1/36 trang

Thông tin tài liệu

Ngày đăng: 13/04/2018, 15:31

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ÀI: Tìm hiểu giao diện chức GUI Design Studio v5 Giáo viên hướng dẫn: Th.S Nguyễn Thành Thái Môn: Tương tác người máy Danh sách nhóm 1) Nguyễn Minh Mẫn 2) Lê Hoàng Long 3) Nguyễn Văn Thao 14032221 14019291 14013921 Mục lục: I Khái niệm thiết kế giao diện Giao diện người dùng mặt, hay gọi thành phần trung gian để thực giao tiếp, người với máy tính Nó nơi người sử dụng nhập thơng tin vào hệ thống máy tính (đầu vào) nhận thông tin phản hồi từ máy tính (đầu ra) Giao diện có nhiều loại khác mặt cấu trúc giống Chúng bao gồm người dùng, hệ thống, đầu vào đầu Hệ thống Đầu vào Đầu Người sử dụng Ví dụ: Giả sử dùng chương trình đồ hoạ để vẽ hình vng Mơ hình thơng tin đầu vào đầu cho bảng sau: Nhu cầu người dùng Đầu vào người dùng Đầu hệ thống Người dùng muốn dùng công cụ để vẽ Người dùng nhấp chuột vào biểu tượng hình ngơi cơng cụ Hệ thống thay đổi hình dạng trỏ thành hình dạng ngầm định để sẵn sàng vẽ Người dùng thực vẽ hình ngơi Người dùng kích kéo trỏ chuột để vẽ Hệ thống hiển thị hình dạng thu thực tế trình di chuyển chuột II Giới thiệu GUI Design Studio 2.1 Giới thiệu GUI Design Studio Professional Edition GUI Design Studio phần mềm công cụ thiết kế chuyên biệt cho tham gia vào việc thiết kế ứng dụng giao diện người dùng, bao gồm 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 tư vấn GUI Design Studio sử dụng bạn cần phải rút ứng dụng trơng giống hiển thị phận kết nối với như: • Tạo đề xuất dự án • Nắm bắt yêu cầu • Tạo hình giả lập • Sản xuất chi tiết kỹ thuật chi tiết cho nhà phát triển • Đề xuất cải tiến sản phẩm có  Tạo thuyết trình cho người dùng bên liên quan chí cần cho để: • Xác minh thiết kế • Khám phá lựa chọn thay • Đánh giá kịch sử dụng khác • Các tính năng:  Tạo thiết kế giao diện người dùng nhanh chóng dễ dàng • Cho dù hình bạn chi phối cửa sổ ứng dụng, trang Web, phụ bảng điều khiển tùy chỉnh thiết kế hình đầy đủ tính cho phép bạn tạo chúng cách nhanh chóng dễ dàng • Kéo thả vị trí yếu tố thiết kế • Edge cơng cụ chụp chun ngành cho phép yếu tố để cần nhấp vào • Mịn pan zoom cách sử dụng chuột (với hỗ trợ thêm cho bánh xe di chuyển độ nghiêng) • Khơng giới hạn undo / redo • Cut, Copy, Paste Nhân đơi lệnh • Cơng cụ liên kết khoảng cách  Truy cập Hơn 120 Built -Trong yếu tố thiết kế • Tạo hình cách sử dụng điều khiển Windows tiêu chuẩn, yếu tố Web yếu tố chung khác Các biến thể cung cấp nhiều trường hợp để tăng tốc độ xây dựng Kết hợp yếu tố để tạo điều khiển tùy chỉnh biến thể • Khung hình Windows Hộp thoại • Thanh cơng cụ, Menu menu Popup • Hộp văn bản, chỉnh sửa hộp Combos • Buttons, Radio Buttons Hộp kiểm tra • Bars Di chuyển, Sliders quay • Danh sách, thư mục bảng • Tabs, Tab Bars Panels • Bars tiến Rulers • Ribbon Bar Tab Panels, menu, nút yếu tố khác • Các trang Web, Panels, Buttons Danh sách văn • nhiều  Các yếu tố tùy biến (mới 4.0) • Tạo thiết lập riêng bạn yếu tố thường sử dụng, nhóm yếu tố • Chuyển tập tin thiết kế thành 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 thả để thêm yếu tố tùy chỉnh để thiết kế chỉnh sửa theo yêu cầu • Lấy tạo thư viện dự án riêng bạn thành phần tùy chỉnh liên kết chúng vào dự án bạn làm việc • Gói thư viện thành phần tùy chỉnh để chia sẻ với người khác  Dự án Thiết kế Mẫu (mới 4.0, ấn chuyên nghiệp) • Turbo tăng suất bạn cách mẫu thiết kế thay phơng trống • Tạo dự án dựa mẫu • Chèn mẫu mẫu thiết kế vào dự án có với tất tập tin cần thiết • Chèn ln ln tạo tập tin để an tồn để sử dụng cho mẫu lặp lại thư mục • Trình duyệt hiển thị hình thu nhỏ để giúp bạn lựa chọn cho phép bạn tìm thấy mẫu theo thể loại chọn từ mẫu bạn sử dụng gần • Tạo mẫu từ dự án tồn thư mục dự án tập tin thiết kế cá nhân • Nhập mẫu chia sẻ mẫu riêng bạn với người khác  Bao gồm biểu tượng hình ảnh định dạng đa dạng • Thêm đồ họa vào thiết kế bạn điều chỉnh bố trí họ cách dễ dàng với yếu tố khác • Kéo thả hình ảnh từ tập tin dự án • Phổ biến hình ảnh định dạng hỗ trợ bao gồm BMP, GIF, JPEG PNG • Minh bạch GIF PNG 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 biểu tượng • Biểu tượng phổ biến chia sẻ dự án • Dự án có biểu tượng riêng • Sử dụng tiêu chuẩn ICO tập tin mà sau sử dụng sản xuất • Biểu tượng quy mơ để kiểm tra kích thước khác tránh phải tạo nhiều phiên tạo mẫu • Hơn 150 biểu tượng bao gồm để giúp bạn bắt đầu • Tạo biểu tượng riêng bạn cách sử dụng 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 trình soạn thảo biểu tượng khác ưa thích  Chú thích thiết kế bạn với Lớp phủ Ghi Side • Khi bạn cần phải giải thích thêm cho thiết kế bạn, bạn thêm thích yếu tố trang giữ họ khỏi cách thức ghi bên • Thêm hộp văn nổi, cặp ngoặc nhọn đánh dấu trực tiếp thiết kế • Thêm ghi định dạng để mơ tả thiết kế tồn • Thêm ghi định dạng để mơ tả phần tử cá nhân • Lưu ý yếu tố xuất công cụ quảng cáo trình thiết kế chạy mẫu thử nghiệm • Hiển thị ẩn thích thiết kế với phím nhấn  Có sử dụng lại thành phần thiết kế Modular Masters • Chia nhỏ dự án bạn thành thiết kế thành phần nhỏ tái sử dụng số lượng mẫu thiết kế • Chia sẻ thành phần thiết kế phận bảng điều khiển tùy chỉnh thiết kế nhiều • Thành phần sử dụng thành phần khác với mức độ làm tổ • Thay đổi thành phần ban đầu phản ánh nơi họ sử dụng • Ghi đè lên thuộc tính yếu tố thành phần trường hợp thiết kế cụ thể • Tái sử dụng thiết kế phổ biến nhiều dự án cách đặt chúng thư viện  Sử dụng thiết kế bạn để tạo thử nghiệm động • Tạo thiết kế hình cá nhân hữu ích, Studio Thiết kế giao diện cho phép bạn kết nối chúng lại với theo cách khác mang lại cho họ sống nguyên mẫu tương tác • Đồ họa, mơ tả quy trình làm việc ứng dụng • Ngay chạy kiểm tra thiết kế bạn nguyên mẫu tương tác • Sử dụng neo vào vị trí xác nơi bạn muốn • Tabbed giao diện hỗ trợ cách dễ dàng • Điều hướng từ điểm nóng ảnh bitmap • Sản xuất 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 hình hiệu để xem cách thiết kế bạn phù hợp với kích thước hình khác • Khơng có kịch mã hóa tham gia  Tăng cường tương tác (mới 4.0, ấn chuyên nghiệp chỉ) • Tận dụng lợi tính tương tác mang lại cho mẫu thử nghiệm bạn với sống tạo ý tưởng bạn thiết kế thực tế • 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 liệu hành vi khác, với điều khiển bàn phím • Gán liệu biến yếu tố để sử dụng giá trị họ nơi khác mẫu thử nghiệm • Văn nhiều yếu tố chứa nội dung động cách nhúng liệu biến • Kiểm sốt điều hướng tự động thông qua việc sử dụng biểu thức logic kinh doanh có chứa biến chức khác • Bảng điều kiện hiển thị nội dung khác tùy thuộc vào số lượng biểu thức giá trị liệu • Thay đổi khả hiển thị nhà nước cho phép yếu tố theo quy tắc dựa giá trị liệu  Tạo tài liệu đặc điểm kỹ thuật • Thể mẫu thử nghiệm điều hướng phương cách mạnh mẽ để có cảm giác ứng dụng gợi ý kiến phản hồi, bạn cần để sản xuất tài liệu truyền thống tĩnh để chia sẻ với colleages người sử dụng • Tự động hệ tài liệu đặc điểm kỹ thuật đầy đủ • Bao gồm tất thiết kế, hình thiết kế tất ghi thích • Tạo tài liệu hướng dẫn đầy đủ bao gồm thay đổi để tiết kiệm giấy, mực in xem xét thời gian  Tạo thiết kế để đánh giá bên ngồi • Ngồi để tạo tài liệu đặc điểm kỹ thuật, thiết kế xuất để xem xét số cách khác 10  Annotations Chứa cơng cụ để thích  Storyboard Chứa bảng chọn Close, Accept, Back, Forward,… 22  Data Chứa liệu hình ảnh, danh sách tên, thu chi, liệu mua bán (nếu có) hệ thống bán hàng, liệu người thiết kế cần cho giao diện mà họ thực  Note 23 Chú thích cho đối tượng mà người dùng muốn  Chức cơng cụ Ngồi thành phần phần mềm cung cấp cho người dùng số chức liên quan công cụ hệ thống New, Open, Save, Copy, Paste,… Đặc biệt quan công cụ Make Connection Node, Run Prototype 24 III Demo sản phẩm 3.1 Bước 1: Khởi tạo Project • Mở chương trình GUI Design Studio • Sử dụng lệnh File > New Project để mở hộp thoại tạo Project tiến hành nhập tên cho Project 3.2 Bước 2: Tạo hộp thoại nhiệm vụ • Chọn panel Elements nhóm Windows and Dialogs • Tìm phần tử Dialogs kéo thả chúng vào phần thiết kế tiến hành đặt lại tên (Notepad) Hình 1: Tạo cửa sổ cho chương trình • Tiếp theo ta thiết lập menu task bar cho giao diện NotePad: vào Toolbars and menus • Tìm phần tử Menu Bar kéo thả vào Dialogs trước đó, canh chỉnh hợp lí 25 Hình 2: Thêm Menu bar cho giao diện • Sau có Menu Bar, ta tiến hành tạo giao diện chức cho mục File, Edit,… • Chọn Popup Menu bên Menu Bar kéo thả vào phần Dialogs, canh chỉnh cho hợp lý • Nháy đúp vào Popup xóa hai thành phần Popup menu cách nháy vào nhấn Delete • Sau xóa xong ta tiến hành Insert phần tử cần thiết New, Open, Save, Save As,… • Thêm xong ta có bảng menu chức cho mục File 26 Hình 2.1: Chỉnh sửa thơng tin cho menu Hình 2.2: Thêm chức 27 Hình 2.3: Menu chức sau thực xong • Chỉnh sửa phần chức cho Edit tương tự mục File Hình 3: Thêm Popup menu cho Menubar Edit 28 Hình 4: Thêm Edit text cho giao diện 3.3 Tạo liên kết giao diện chức Sau thiết kế xong giao diện, chức cần thiết cho Project, công việc ta phải liên kết chúng lại với để xem cách thức hoạt động phần mềm GUI Design Studio • Dùng cơng cụ Make Connection Mode ( dùng phím tắt F4) • Ta tiến hành nối giao diện lại, cho giao diện liên kết với phải với chức mục ta thiết kế trước 29 Hình 5: Tạo liên kết cho Menubar Popup menu 30 Hình 6: Tạo thêm Popup Menu cho chương trình Hình 7: Nối Menu Format với Popup menu Format 31 32 Hình 8: Nối Menu View với Popup menu view Hình 9: Nối Menu help với Popup menu help 33 Hình 10: Mở menu chọn File chạy thử Hình 11: chạy thử menu Edit 34 Hình 12: Chạy menu Format Hình 13: Chạy thử menu view 35 Hình 14: Chạy menu Help 36 ... Giới thiệu GUI Design Studio 2.1 Giới thiệu GUI Design Studio Professional Edition GUI Design Studio phần mềm công cụ thiết kế chuyên biệt cho tham gia vào việc thiết kế ứng dụng giao diện người... niệm thiết kế giao diện Giao diện người dùng mặt, hay gọi thành phần trung gian để thực giao tiếp, người với máy tính Nó nơi người sử dụng nhập thơng tin vào hệ thống máy tính (đầu vào) nhận thơng... kết thúc trình cài đặt Giao diện sau cài đặt xong 2.3 Chức  Project Chứa thiết kế giao diện làm làm lưu lại máy tính  Elements 20 Chứa thành phần cần thiết cho giao diện, phần mềm hỗ trợ tối
- Xem thêm -

Xem thêm: Báo cáo chức năng và giao diện của GUI Studio v5, Báo cáo chức năng và giao diện của GUI Studio v5, II. Giới thiệu GUI Design Studio

Từ khóa liên quan

Gợi ý tài liệu liên quan cho bạn

Nhận lời giải ngay chưa đến 10 phút Đăng bài tập ngay