Tìm hiểu và thiết kế giao diện tương tác trên iOS. Xây dựng ứng dụng Metronome hỗ trợ người học nhạc đếm nhịp

Trường Đại học Bách Khoa Hà Nội Viện Công nghệ Thông tin và Truyền thông HCI04 – BTL05 BÁO CÁO BÀI TẬP LỚN Môn: Tương tác Người – Máy Đề tài: Tìm hiểu và thiết kế giao diện tương tác trên iOS. Xây dựng ứng dụng Metronome hỗ trợ người học nhạc đếm nhịp Giảng viên hướng dẫn: TS. Vũ Thị Hương Giang Nhóm sinh viên thực hiện: Nguyễn Văn Minh () 20071970 HTTT – K52 Mai Ngọc Dương 20070009 HTTT – K52 Dương Mạnh Linh 20071697 HTTT – K52 Vũ Văn Thiện 20072737 HTTT – K52 Lê Quang Vịnh 20073503 HTTT – K52 Hà Nội, tháng 10 năm 2011 MỤC LỤC I. Giới thiệu chung 3 1. Sơ lược về Hệ tương tác và tương tác Người – Máy 3 2. Nội dung của đề tài 3 3. Mục đích của đề tài 3 II. Những vấn đề khi xây dựng giao diện tương tác trên môi trường iOS 3 1. Sơ lược về iOS 3 2. Lập trình trên iOS 3 III. Xây dựng giao diện tương tác trên iOS Ứng dụng Metronome 3 1. Giới thiệu về Metronome 3 2. Đặc tả yêu cầu và phân tích nhiệm vụ 3 2.1. Điều chỉnh mức Tempo 3 2.2. Điều chỉnh nhịp điệu (Meter) luyện tập 3 2.3. Lưu lại cấu hình hiện tại của Metronome 3 2.4. Load lại những cấu hình đã Save 3 2.5. Điều chỉnh âm lượng của ứng dụng 3 2.6. Flash màn hình trong quá trình luyện tập 3 2.7. Bậttắt trợ giúp 3 2.8. Bậttắt chức năng Autolock screen của Device 3 2.9. Thay đổi SubDivision 3 2.10. Khóa điều khiển khi đang tập luyện. 3 2.11. Chỉnh Tempo theo nhịp nhập vào của người dùng. 3 3. Thiết kế giao diện tương tác cho hệ thống. 3 3.1. Giao diện cho chức năng điều chỉnh mức Tempo 3 3.2. Giao diện cho chức năng thay đổi nhịp điệu Meter 3 3.3. Giao diện cho chức năng SaveList 3 3.4. Giao diện chức năng Load các cấu hình đã save 3 3.5. Giao diện cho chức năng bậttắt trợ giúp 3 3.6. Giao diện cho chức năng thay đổi âm lượng 3 3.7. Giao diện cho chức năng Flash Screen 3 3.8. Giao diện các chức năng khác 3 4. Đánh giá 3 IV. Kết luận 3 V. Phân công công việc 3 VI. Tài liệu tham khảo 3

Trường Đại học Bách Khoa Hà Nội Viện Công nghệ Thông tin Truyền thông HCI04 – BTL05 BÁO CÁO BÀI TẬP LỚN Môn: Tương tác Người – Máy Đề tài: Tìm hiểu thiết kế giao diện tương tác iOS Xây dựng ứng dụng Metronome hỗ trợ người học nhạc đếm nhịp Giảng viên hướng dẫn: TS Vũ Thị Hương Giang Nhóm sinh viên thực hiện: - Nguyễn Văn Minh (*) 20071970 HTTT – K52 - Mai Ngọc Dương 20070009 HTTT – K52 - Dương Mạnh Linh 20071697 HTTT – K52 - Vũ Văn Thiện 20072737 HTTT – K52 - Lê Quang Vịnh 20073503 HTTT – K52 Hà Nội, tháng 10 năm 2011 MỤC LỤC I Giới thiệu chung Sơ lược Hệ tương tác tương tác Người – Máy Hệ tương tác hệ thống chấp nhận đầu vào từ người sử dụng cung cấp đầu (một cách rõ ràng) cho người sử dụng Tương tác Người - Máy hay gọi giao tiếp Người – Máy lĩnh vực liên quan đến thiết kế, đánh giá cài đặt hệ thống máy tính tương tác cho người sử dụng nghiên cứu tượng xảy Việc thiết kế giao diện tốt cho hệ thống việc dễ dàng Người sử dụng ln địi hỏi hệ thống phải đáp ứng mà họ mong đợi Nếu sử dụng kiến thức phân tích thiết kế lập trình, chưa thể đạt mục đích mong muốn Do đó, đặt nhu cầu cần phải nghiên cứu người – máy tính – kĩ thuật tương tác để hỗ trợ phát triển giao diện người sử dụng với tính sử dụng cao HCI liên quan đến nhiều lĩnh vực khác Trong đó, lĩnh vực kể đến như: Khoa học máy tính, Trí tuệ nhân tạo, Ngơn ngữ học, Nghệ thuật, Thiết kế, Kỹ nghệ,… Nhận rõ tầm quan trọng lĩnh vực HCI vậy, từ cuối năm 80, nhiều quốc gia giới Anh, Mỹ, Nhật,… hình thành nhiều dự án nghiên cứu vấn đề Nội dung nghiên cứu tương tác người máy bao gồm:  Hiểu đặc điểm người tương tác với máy tính  Phân tích người thực máy tính giao diện chúng, hiểu rõ nhiệm vụ yêu cầu người dung  Xác định giao diện phải hoạt động với người sử dụng  Thiết kế giao diện máy tính phù hợp với mục đích, đặc điểm người  Thiết kế công cụ giúp nhà thiết kế để xây dựng giao diện tốt  Đánh giá tính chất tương tác Người – Máy tác động hệ thống với người Khi thiết kế hệ tương tác, yếu tố cần quan tâm đến chi phí, tính tiện dụng hệ thống, độ tin cậy, khả tương thích xã hội chấp nhận Nội dung đề tài Như trình bày trên, xây dựng ứng dụng chạy chưa đủ Ngày nay, yêu cầu người dùng không dung lại đó, mà hệ thống cần thỏa mãn nhiều tính chất khác nữa: giao diện tiện dụng, dễ dùng, dễ nắm bắt, tạo thích thú,… Nội dung đề tài nghiên cứu nhóm là:  Tìm hiểu lý thuyết hệ tương tác, tương tác Người – Máy  Tìm hiểu cơng nghệ xây dựng giao diện tương tác môi trường iOS: iPod, iPhone, iPad Apple  Xây dựng giao diện tương tác cụ thể mơi trường iOS Ở đây, nhóm thực chọn việc cài đặt ứng dụng Metronome hỗ trợ cho người học nhạc việc đếm nhịp để demo  Từ việc xây dựng ứng dụng Metronome iDevice kinh nghiệm xây dựng ứng dụng PC hay thiết bị mobile khác, so sánh khác thiết kế giao diện tương tác Mục đích đề tài Với việc học phân tích thiết kế hệ thống thơng tin kĩ thuật lập trình từ năm trước, việc xây dựng ứng dụng Mobile khơng cịn vấn đề q khó với sinh viên Tuy nhiên, để xây dựng ứng dụng thỏa mãn tiêu chí đề học mơn tương tác Người – Máy lại khơng phải dễ dàng Vì vậy, chúng em thực đề tài với mục đích áp dụng học mơn học vào thực tế, xây dựng thử nghiệm ứng dụng nhằm kiểm tra tính chất hệ tương tác thiết bị di động Trong trình thực đề tài, nhóm thực khơng tránh khỏi thiếu sót Mong nhận góp ý giáo bạn! II Những vấn đề xây dựng giao diện tương tác môi trường iOS Ngày nay, với bùng nổ công nghệ thông tin, thiết bị di động phát triển mạnh mẽ Người dùng không cần điện thoại để nghe, gọi, nhắn tin Thay vào đó, điện thoại di động làm nhiều thế, thay cho nhiều thiết bị cồng kềnh khác Khơng phát triển kiểu dáng, cấu hình mà ứng dụng Viết ứng dụng mobile lĩnh vực đầy tiềm ngành Công nghệ thơng tin Lập trình iOS nghề lên Sơ lược iOS iOS hệ điều hành thiết bị di động Apple Ban đầu, hệ điều hành phát triển để chạy iPhone, sau mở rộng để chạy thiết bị khác Apple iPod Touch, iPad Apple TV Tính đến 31/5/2011, kho ứng dụng AppStore Apple có khoảng 500000 ứng dụng iOS (theo “Apple Introduces New iPod touch” Apple Press Release) tải tổng cộng khoảng 15 tỷ lần Trong quý năm 2010, khoảng 26% smart phone chạy hệ điều hành iOS, sau hệ điều hành Android Google Symbian Nokia (“Google’s Android becomes the world’s leading smart phone platform” Canalys) iOS giới thiệu lần đầu Hội nghị Triển lãm Macworld diễn tháng năm 2007 phát hành tháng năm Khi đó, đơn giản “iPhone chạy OS X” mà chưa có tên khơng hỗ trợ ứng dụng bên thứ ba Tháng 3/2008, Apple phát hành dùng thử với tên cho hệ điều hành này, “iPhone OS” Tháng năm 2010, Apple đổi tên iPhone OS thành iOS Giao diện người dùng iOS dựa sở thao tác tay Người dùng tương tác với hệ điều hành thông qua nhiều tác động tay hình cảm ứng thiết bị iDevice Lập trình iOS Những người quen với hệ điều hành Windows làm việc Windows khó để thay đổi thói quen sử dụng hệ điều hành khác Tuy nhiên, cần bỏ thời gian ngắn chịu khó làm quen với hẳn thấy nhiều điều thú vị mà Windows khơng có Ví dụ, chuyển từ Windows sang MAC OS, bạn thấy MAC chẳng có hay ho khó dùng Tất nhiên tùy vào tính chất cơng việc mà người ta chọn hệ điều hành cho phù hợp Ở đây, công việc lập trình ứng dụng iPhone nên MAC OS số yếu tố cần phải có Ngồi ra, để lập trình ứng dụng iPhone, bạn cần phải có iPhone SDK Apple cung cấp xCode phiên dùng để coding kéo thả giao diện iPhone SDK xCode dễ dàng download trang web Apple Cịn MAC OS tốt mua đĩa dành cho PC Việc cài đặt MAC OS PC thật khơng dễ dàng máy PC có dịng MAC OS riêng hack để làm việc phần cứng tương ứng Ngơn ngữ lập trình ứng dụng iPhone Objective-C Đây ngơn ngữ lập trình hướng đối tượng Apple phát triển kế thừa trình biên dịch C tạo nên biên dịch cho Objective-C Vì mà trình biên dịch Objective-C biên dịch ngơn ngữ C/C++ Trong lập trình iPhone, bạn viết ngơn ngữ Application Objective-C ngơn ngữ lập trình xuất từ lâu, thiết kế phát triển từ năm 1980 Hiện tại, Objective-C lại trở nên phổ biến Apple chọn làm ngơn ngữ lập trình cho hệ thống Mac iPhone Objective-C thiết kế Brad Cox ông làm việc cho công ty Stepstone vào đầu năm 1980 Objective-C thiết kế để phục vụ mục đích lập trình hướng đối tượng Nó hoạt động giống tập hợp thành phần mở rộng mạnh mẽ ngôn ngữ C Objective-C kết hợp đặc điểm ưu tú C ngôn ngữ SmallTalk Objective-C đơn giản để học có đầy đủ khả ngơn ngữ lập trình hướng đối tượng Objective-C đơn giản nhỏ gọn lại thành phần mở rộng mạnh ngôn ngữ chuẩn ANSI C Objective-C cung cấp đầy đủ khả lập trình hướng đối tượng lại thực thi theo cách đơn giản dễ dàng Hầu hết ngơn ngữ lập trình hướng đối tượng cung cấp: Một thư viện Objects Các công cụ phát triển cần thiết Hỗ trợ hướng đối tượng thư viện liên quan Objective-C cung cấp đầy đủ thành phần Bạn sử dụng Objective-C để phát triển phần mềm hồn thiện Apple chọn Objective-C làm ngơn ngữ lập trình cho hệ thống máy Mac iPhone Là ngôn ngữ hướng đối tượng nên Objective-C giải vấn đề lập trình dựa khái niệm Object Nó bao gồm phần: Interface Interface lớp(class) thông thường định nghĩa file header với h Nó phần khai báo lớp Implementation Mã nguồn chương trình viết phần implementation lớp định nghĩa file có m Đây phần định nghĩa lớp 3.Instantiation Sau khai báo định nghĩa lớp, thực thể hóa lớp việc cấp phát nhớ cho new object lớp Lập trình giao diện tương tác iOS khái niệm rộng, chứa đựng nhiều cách thức khác để xây dựng hệ tương tác Vì tồn tương tác người dùng với ứng dụng iOS thông qua giao diện cảm ứng, tương tác tay nên thiết kế hệ tương tác cần ý đến thói quen người dùng Vị trí, cách đặt phải thuận tiện với người dùng Có hai cách thức để xây dựng ứng dụng tương tác iOS, sử dụng code đơn dùng Interface Builder để kéo thả Với việc dùng Interface Builder, việc trở nên nhanh chóng dễ dàng với ứng dụng không cầu kỳ Tuy nhiên, việc sử dụng code giúp cho việc điều khiển truy nhập vào ra, việc cá nhân hóa giao diện chủ động Ngoài ra, iOS hỗ trợ nhiều framework giúp lập trình viên dễ dàng việc thiết kế giao diện ứng dụng Tiêu biểu Cocos2D, Unity, Box2D, Tóm lại Objective-C là: - Thành phần mở rộng ngơn ngữ lập trình C - Là ngơn ngữ lập trình hướng đối tượng đơn giản mạnh mẽ - Là ngôn ngữ Apple sử dụng để phát triển ứng dụng cho hệ thống máy Mac iPhone III Xây dựng giao diện tương tác iOS - Ứng dụng Metronome Giới thiệu Metronome Metronome (máy đánh nhịp) dụng cụ thiếu giúp người học nhạc trình luyện tập nhạc cụ Nó hỗ trợ tăng khả chơi xác giữ ổn định nhịp sinh lý cho người học nhạc Những người chơi nhạc nên sử dụng Metronome từ tập Các nhạc sỹ sử dụng Metronome làm công cụ để điều chỉnh nhịp độ hát, cách điều chỉnh nhịp độ Metronome (Tempo) Máy đánh nhịp Metronome chạy theo tần số số Beat phút (BPM) Các khái niệm sử dụng Metronome bao gồm: Tempo (tốc độ Metronome, tính số Beat phút), Meter (nhịp điệu luyện tập VD: 3/4, 3/8, 6/8, 2/4,…), Sub Division (thể beat Metronome chạy) Trong lịch sử, có loại Metronome phổ biến sau đây:  Metronome cơ: sử dụng nặng để điều chỉnh Tempo  Metronome điện: xác so với Metronome Thường có nút vặn để điều chỉnh Tempo 3.3 Giao diện cho chức SaveList Trong chức này, người dùng thay đổi tên cấu hình mà muốn Save lại nên phần tên TextField để nhập tên cấu hình Các thơng số khác Tempo, Time signature Subdivision thay đổi Người sử dụng Save ngồi để điều chỉnh thông số lại trước Save 3.4 Giao diện chức Load cấu hình save Ứng dụng liệt kê cấu hình mà người dùng Save, cho phép người dùng chọn cấu hình muốn load Trong cấu hình, người dùng thấy thơng số cấu hình đó, bao gồm Tempo, Time Signature SubDivision Người dùng xóa bỏ cấu hình không sử dụng thay đổi ý định không load 3.5 Giao diện cho chức bật/tắt trợ giúp Như trình bày trên, phần trợ giúp có vai trị quan trọng với người sử dụng hệ thống Yêu cầu cho giao diện phần nhỏ (đỡ chiếm diện tích), ngắn gọn dễ hiểu Ở đây, thiết kế dạng Tooltip, ẩn dễ dàng thông qua điều chỉnh form Setting 3.6 Giao diện cho chức thay đổi âm lượng Người sử dụng có thói quen trượt Slide để thay đổi âm lượng (người sử dụng iPhone nói riêng smart phone khác nói chung), ứng dụng này, nhóm đặt Slider vị trí dễ nhìn người dùng chỉnh âm lượng Vì Slider cung cấp SDK không đẹp nên nhóm custom cho phù hợp với giao diện ứng dụng 3.7 Giao diện cho chức Flash Screen Vì giao diện chủ đạo ứng dụng Metronome màu tối nên yêu cầu đặt với giao diện chức Flash Screen phải có màu sáng để người dùng dễ dàng nhận Beat flash mà cần nhìn liếc qua Khi đến Beat cần flash, hình iPhone trắng sáng lên, thể rõ khác biệt, cho phép người dùng dễ dàng nhận 3.8 Giao diện chức khác Các chức lại chủ yếu cấu hình thơng số Device nên gộp lại vào Setting Khi cần điều chỉnh, người dùng cần mở Form settings từ giao diện ứng dụng Vì iPad, kích thước hình to nhiều iPhone nên khơng thể kéo View Settings to kín hình được, gây thẩm mỹ cho ứng dụng nên View Settings iPad chiếm phần nhỏ sau: Sau phân tích yêu cầu thiết kế giao diện tương tác thiết kế giao diện tương tác iPhone (toàn touch touch) nhóm thiết kế giao diện ứng dụng Metronome sau: Đánh giá Qua phần giao diện trên, ta thấy ứng dụng Metronome nhóm thỏa mãn số tính chất sau:  Tính thẩm mỹ: giao diện ứng dụng thiết kế đẹp mắt, màu sắc hài hòa, tạo cho người dùng có cảm giác sở hữu máy Metronome đại với nhiều chức  Tính tiện dụng: người sử dụng thao tác cách thuận tiện với chức Metronome (touch Button, open View, ) Thêm vào đó, nhiều tính hướng đến người sử dụng kĩ tính auto-lock screen, tap để thay đổi Tempo đưa vào làm tăng tính tiện dụng ứng dụng  Tính dễ dùng: với người sử dụng iPhone có kiến thức âm nhạc, khơng khó để họ dễ dàng sử dụng Metronome  Sự thích thú: giao diện bắt mắt tạo thích thú cho người sử dụng  Đầy đủ chức năng: với ứng dụng Metronome phục vụ tốt cho người học nhạc sáng tác nhạc, Metronome mà nhóm xây dựng đảm bảo đầy đủ chức  Chi phí: thay bỏ số tiền lớn để mua máy đánh nhịp thật, người dùng tận dụng iPhone với chi phí nhỏ sở hữu máy Metronome chun nghiệp khơng máy thật  Tính hiệu quả: người dùng tập luyện với ứng dụng tăng kĩ âm nhạc Thời gian dài hay ngắn tùy thuộc vào người sử dụng  Tính xác ổn định: việc sử dụng timer để đếm nhịp, Metronome có độ xác cao làm việc ổn định thời gian dài Ứng dụng test bug leak kĩ nên đảm bảo tính ổn định cao IV Kết luận Sau tìm hiểu thực cài đặt demo giao diện tương tác iDevice thông qua ứng dụng Metronome, nhóm thực rút số kết luận sau Thứ khác biệt xây dựng giao diện tương tác iPhone máy tính bình thường - Điều phải kể đến kích thước hình khác nhiều nên thiết kế giao diện phải khác Với thiết bị mà hình có kích thước 3.5inch chức phải thiết kế cho đặt đủ hình mà khơng tạo cảm giác trật trội cho người dùng - Thứ hai phù hợp với kiểu tương tác Với máy tính, di chuyển trỏ chuột nhấn bàn phím thiết bị chạy iOS, tất thao tác người dùng thông qua cảm ứng, touch touch Do đó, ứng dụng chạy iOS bắt buộc phải hỗ trợ cảm ứng tối đa (đơn đa điểm) - Khả xử lý đồ họa: dù đánh giá thiết bị mobile có xử lý tốt so với máy tính nay, iPhone xa khả xử lý Do đó, xây dựng giao diện tương tác iOS cần ý nhiều đến quản lý nhớ, quản lý thành phần đồ họa đảm bảo không bị leak - Tính thẩm mỹ: người sử dụng iPhone có u cầu khắt khe tính thẩm mỹ ứng dụng thiết bị họ Nhiều người sẵn sàng không cài đặt ứng dụng dù có chạy tốt giao diện đầu tư q Do đó, lập trình iPhone, giao diện cần trọng - Tận dụng tối đa hiệu ứng hỗ trợ thiết bị: bao gồm hiệu ứng cung cấp SDK Sensor thiết bị (xoay, trọng lực, ) Như vậy, việc xây dựng giao diện tương tác iOS có nhiều điểm khác biệt nhiều so với môi trường khác Đây công việc dễ không khó, khơng thể học Qua tập lớn này, nhóm thực học thêm nhiều kiến thức bổ ích Đó hiểu biết thêm hệ tương tác, cách thức xây dựng giao diện Mobile nói chung iOS nói riêng Những kiến thức thật bổ ích ngày nay, lập trình iPhone xu hướng nhiều lập trình viên giới Với phát triển mạnh mẽ Apple gia tăng đến chóng mặt iPhone tồn giới, lập trình iPhone sớm lĩnh vực quan tâm đến Công nghệ thông tin Việt Nam V Phân cơng cơng việc - Tìm hiểu lý thuyết chung tương tác Người – Máy: nhóm - Tìm hiểu cơng nghệ xây dựng tương tác iOS: Nguyễn Văn Minh, Lê Quang Vịnh - Tìm hiểu u cầu, tính cần có ứng dụng Metronome: Mai Ngọc Dương, Vũ Văn Thiện - Thiết kế giao diện tương tác ứng dụng Metronome: Vũ Văn Thiện, Dương Mạnh Linh - Cài đặt ứng dụng môi trường iOS (iPhone+iPad): Nguyễn Văn Minh, Lê Quang Vịnh - Test, kiểm thử ứng dụng: Mai Ngọc Dương - Viết báo cáo thu hoạch: Dương Mạnh Linh VI Tài liệu tham khảo - Tương tác Người - Máy Lương Mạnh Bá, Nhà xuất Khoa học Kỹ thuật - Bài giảng Nhập môn tương tác Người – Máy Vũ Thị Hương Giang, Viện Công nghệ thông tin Truyền thông - http://vi.wikipedia.org/wiki/Tương_tác_người-máy - Introduction to The Objective-C 2.0 Programming Language, Apple 2009 - Programming in Objective-C 2.0 (2nd Edition), Stephen G.Kochan - iPhone Open Application Development by Zonathan A Zdziarski - The iPhone Developer's Cookbook, Apple - Documents, xCode SDK, Apple - http://www.dientuvietnam.net/forums/vi-dieu-khien-ho-8051-53/lam-caimetronome-may-danh-nhip-46489/ - http://en.wikipedia.org/wiki/Tempo - http://en.wikipedia.org/wiki/Metronome - eBook Tương tác người máy, Bùi Thế Duy - http://www.streamingcolour.com/blog/tutorials/tracking-iphone-memory-leaks/ - http://shawnsbits.com/blog/2011/03/21/5-tips-for-new-designers-when-workingwith-developers/ - http://www.touch-code-magazine.com/top-10-tips-to-creating-profitable-iphoneapps/ - Và số trang support iPhone developer http://www.iphonedevsdk.com/forum/, http://stackoverflow.com/ như: ... đặt ứng dụng Metronome hỗ trợ cho người học nhạc việc đếm nhịp để demo  Từ việc xây dựng ứng dụng Metronome iDevice kinh nghiệm xây dựng ứng dụng PC hay thiết bị mobile khác, so sánh khác thiết. .. cho ứng dụng nên View Settings iPad chiếm phần nhỏ sau: Sau phân tích yêu cầu thiết kế giao diện tương tác thiết kế giao diện tương tác iPhone (toàn touch touch) nhóm thiết kế giao diện ứng dụng. .. với người sử dụng  Thiết kế giao diện máy tính phù hợp với mục đích, đặc điểm người  Thiết kế công cụ giúp nhà thiết kế để xây dựng giao diện tốt  Đánh giá tính chất tương tác Người – Máy tác