Bài giảng Tương tác người máy: Chương 11 - Thiết kế Icons
lượt xem 3
download
Bài giảng "Tương tác người máy: Chương 11 - Thiết kế Icons" trình bày các nội dung kiến thức trọng tâm về: Khái niệm và vai trò của Icons; Các chuẩn cho thiết kế Icon; Qui trình thiết kế; Đánh giá... Mời các bạn cùng tham khảo chi tiết bài giảng tại đây.
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: Bài giảng Tương tác người máy: Chương 11 - Thiết kế Icons
- Prepared by MSc Luong manh Ba Chương XI: Thiết kế ICONS Nội dung 11.1. Khái niệm và vai trò của Icons 11.2. Các chuẩn cho Thiết kế Icon 11.3. Qui trình thiết kế 11.4 Đánh giá Update 8-07 Dept. of SE, August-2002 HCI – Four. 42
- Prepared by MSc Luong manh Ba 11.1. Tổng quan • Các icon (biểu tượng/ hình vẽ) được sử dụng trên màn hình để thực hiện sự tương tác giữa các ứng dụng và ND. • Các biểu tượng đồ hoạ có thể cung cấp sự độc lập về ngôn ngữ trong khi trao đổi thông tin với ND. • Là một phần của giao diện đồ hoạ cung cấp khả năng học, hiểu và ghi nhớ các phần tử chức năng của hệ thống và trợ giúp ND khi thao tác với những phần tử đó. • Thường một giao diện người dùng đồ hoạ – GUI sẽ cung cấp một biểu diễn ẩn dụ cho các nhiệm vụ của ND. Các biểu tượng có thể biểu diễn các ẩn dụ một cách trực tiếp, hay một đối tượng vật lí một cách gián tiếp. Update 8-07 Dept. of SE, August-2002 HCI – Four. 43
- Prepared by MSc Luong manh Ba 11.1. Tổng quan (tiếp) • Phân loại biểu tượng: – Biểu diễn các đối tượng vật lý như ổ đĩa, máy in,… – Biểu diễn các chức năng cuả HT (action Icons) – Biểu diễn các đối tượng điều khiển (data controls) Cách hiểu của người dùng về các biểu tượng đối tượng Update 8-07 Dept. of SE, August-2002 HCI – Four. 44
- Prepared by MSc Luong manh Ba 11.1. Tổng quan (tiếp) • Cấu trúc khái niệm của đối tượng biểu tượng Khung làm việc được sử dụng để chỉ rõ các biểu tượng đối tượng- ISO 11581 Update 8-07 Dept. of SE, August-2002 HCI – Four. 45
- Prepared by MSc Luong manh Ba Chương XI: Thiết kế ICONS 11.1. Khái niệm và vai trò của Icons 11.2. Các chuẩn cho Thiết kế Icon 11.3. Qui trình thiết kế 11.4 Đánh giá Update 8-07 Dept. of SE, August-2002 HCI – Four. 46
- Prepared by MSc Luong manh Ba 11.2 Các chuẩn cho thiết kế Icons • Có nhiều chuẩn cho thiết kế đảm bảo tính tiện dụng (Usability) Update 8-07 Dept. of SE, August-2002 HCI – Four. 47
- Prepared by MSc Luong manh Ba 11.2 Các chuẩn (tiếp) Update 8-07 Dept. of SE, August-2002 HCI – Four. 48
- Prepared by MSc Luong manh Ba Các cách tiếp cận các chuẩn • Các chuẩn ISO hướng xử lý (Process-Oriented ISO • Standards) – ISO 9241-11 Hướng dẫn tính dùng được – ISO 13407 : Các quá trình thiết kế người dùng trung tâm cho các hệ thống tương tác – ISO/TR 18529 : Công thái học cho tương tác người dùng – hệ thống . Các mô tả quá trình , chu trình , vòng đời hướng người dùng – ISO/TR 16982 : Công thái học cho tương tác người dùng – hệ thống. Các phương pháp tính dùng được hỗ trợ cho thiết kế hướng người dùng • Các chuẩn ISO hướng sản phẩm (Produit-Oriented ISO Standards) – ISO/IEC 9126 – 1 : mô hình cho chất lượng của sản phẩm dựa trên công nghệ , kỹ thuật – ISO/IEC 9126 – 2 : tính dùng được trong các thước đo chất lượng bên trong và bên ngoài Update 8-07 Dept. of SE, August-2002 HCI – Four. 49
- Prepared by MSc Luong manh Ba Chuẩn ISO 9241 cho tính tiện dụng Update 8-07 Dept. of SE, August-2002 HCI – Four. 50
- Prepared by MSc Luong manh Ba Chuẩn ISO 11581 cho thiết kế ICON • ISO/IEC 11581: 6 phần – ISO/IEC 11581 – 1 : Tổng quan về các biểu tượng – ISO/IEC 11581 – 2 : Các biểu tượng đối tượng – ISO/IEC 11581 – 3 :Các biểu tượng con trỏ - ISO/IEC 11581 – 4 các biểu tượng điều khiển - ISO/IEC 11581 – 5 các biểu tượng các thanh công cụ - ISO/IEC 11581 – 6 : Các biểu tượng hành động. Update 8-07 Dept. of SE, August-2002 HCI – Four. 51
- Prepared by MSc Luong manh Ba Chuẩn ISO 11581 cho thiết kế ICON(tiếp) Update 8-07 Dept. of SE, August-2002 HCI – Four. 52
- Prepared by MSc Luong manh Ba Biểu tượng đối tượng • Chú ý "Biểu tượng đối tượng là một thuật ngữ được sử dụng trong ISO/IEC 11581 để miêu tả các biểu tượng biểu diễn các chức năng bằng cách liên kết với một đối tượng và có thể được di chuyển hay mở ra. Các kiểu biểu tượng khác được mô tả trong các phần khác của chuẩn này ". Update 8-07 Dept. of SE, August-2002 HCI – Four. 53
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế 1. Approach Icon Design Holistically "If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities." This is one of two major points made in this article on icon design. He goes on to explain how failing to plan how the whole set of icons will work together from the beginning will ensure a huge waste of time, as redesign will be inevitable. Update 8-07 Dept. of SE, August-2002 HCI – Four. 54
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 2. Consider Your Audience Symbols may differ for common elements you may use for your designs. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country." Update 8-07 Dept. of SE, August-2002 HCI – Four. 55
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 3. Design for the Size the Icon will be Used At Update 8-07 Dept. of SE, August-2002 HCI – Four. 56
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) The approach taken for small icons and large icon design is immensely different. Firewheel has a good article that covers the scaling subject called Icon Design: Bitmap vs Vector. Also, review this article on Icon Design Sizing over at Mezzoblue. It covers some inherent issues with designing icons for small sizes. Update 8-07 Dept. of SE, August-2002 HCI – Four. 57
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 4. Keep Icons Simple and Iconic The icons below look really cool. It requires a judgment, though, as to whether the loss of some of the quick recognition of the symbol is worth the added design around the symbol. At a large size it works just fine, as they function similar to illustrations. At smaller sizes though, a less-dressed solution may be preferable. Update 8-07 Dept. of SE, August-2002 HCI – Four. 58
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 5. Cast Consistent Lighting, Reflections, and Shadows The guidebook gives really specific rules for the Vista Icon set. This gives more exacting standards for icon designers and ensures a unified icon system. Following is a specific rule to see an example, "Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space." There are many more rules in this guide. Update 8-07 Dept. of SE, August-2002 HCI – Four. 59
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 6. Utilize a Limited Perspective "The various perspectives are achieved by changing the position of an imaginary camera capturing the icon." The image below shows the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom). Update 8-07 Dept. of SE, August-2002 HCI – Four. 60
- Prepared by MSc Luong manh Ba 7 nguyên tắc thiết kế (tiếp) 7. Create Consistent Icon Set Styles Lighting and Perspective certainly contribute to the style of an icon, though there are many other factors that can contribute to the style as well. If you're trying to fit your icon into a grunge-style Web site design, you'll likely be adding texture to the style of the icon's design. Update 8-07 Dept. of SE, August-2002 HCI – Four. 61
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Bài giảng công nghệ CAD/CAM: Chương 4: CƠ SỞ CỦA CAD
11 p | 135 | 29
-
Ảnh hưởng của khí H2S tới công tác khoan- Các biện pháp phòng chống
7 p | 119 | 8
-
Bài giảng Tương tác người máy: Chương 9 - Lương Mạnh Bá
11 p | 10 | 4
-
Bài giảng Tương tác người máy: Chương 9 - Các kỹ thuật đánh giá
63 p | 11 | 4
-
Bài giảng Tương tác người máy: Chương 10 - Thiết kế trợ giúp
41 p | 17 | 3
-
Bài giảng Tương tác người máy: Chương 8 - Hỗ trợ cài đặt giao tiếp người dùng - máy tính
29 p | 17 | 3
-
Bài giảng Tương tác người máy: Chương 7 - Ký pháp đối thoại và thiết kế
60 p | 13 | 3
-
Bài giảng Tương tác người máy: Chương 6 - Đặc tả yêu cầu ND và phân tích nhiệm vụ
41 p | 14 | 3
-
Bài giảng Tương tác người máy: Chương 5 - Mô hình GOM, Keytrock
35 p | 18 | 3
-
Bài giảng Tương tác người máy: Chương 4 - Các nguyên tắc và vòng đời hình sao trong thiết kế giao tiếp người dùng - máy tính
65 p | 16 | 3
-
Bài giảng Tương tác người máy: Chương 2 - Nhân tố máy tính trong tương tác người máy
15 p | 8 | 3
-
Bài giảng Tương tác người máy: Chương 1 - Tâm lý nhận thức của con người trong giao tiếp và xử lý
22 p | 13 | 3
-
Bài giảng Tương tác người máy: Chương 0 - Tổng quan về HCI
51 p | 10 | 3
-
Bài giảng Tương tác người máy: Chương 3 - Các dạng tương tác Người dùng - máy tính
29 p | 12 | 2
-
Bài giảng Nguyên lý máy: Chương 5 - TS. Phạm Huy Hoàng
20 p | 5 | 2
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline: 093 303 0098
Email: support@tailieu.vn