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
1. Sơ lược về Hệ tương tác và tương tác Người – Máy
Hệ tương tác là hệ thống chấp nhận đầu vào từ người sử dụng và cung cấp đầu ra
(một cách rõ ràng) cho người sử dụng.
Tương tác Người - Máy hay còn gọi là giao tiếp Người – Máy là một lĩnh vực liên
quan đến thiết kế, đánh giá và cài đặt hệ thống máy tính tương tác cho con người sử
dụng và nghiên cứu các hiện tượng xảy ra trên đó.
Việc thiết kế một giao diện tốt cho một hệ thống không phải là việc dễ dàng.
Người sử dụng luôn đòi hỏi hệ thống phải đáp ứng được những gì mà họ mong đợi.
Nếu chỉ sử dụng kiến thức về phân tích thiết kế và lập trình, chúng ta sẽ vẫn chưa thể
đạt được mục đích mong muốn. Do đó, đặt ra nhu cầu cần phải nghiên cứu về con
người – máy tính – kĩ thuật tương tác để hỗ trợ phát triển được một 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 nhau. Trong đó, các lĩnh vực chính có thể
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ế,

năm trước, việc xây dựng một ứng dụng trên Mobile không còn là vấn đề quá khó với
sinh viên. Tuy nhiên, để xây dựng một ứng dụng thỏa mãn những tiêu chí đề ra khi
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 hiện đề tài này với mục đích áp dụng những gì đã học của
môn học vào trong thực tế, xây dựng thử nghiệm một ứng dụng nhằm kiểm tra những
tính chất của một hệ tương tác trên thiết bị di động.
Trong quá trình thực hiện đề tài, nhóm thực hiện không tránh khỏi những thiếu sót.
Mong nhận được góp ý của cô giáo và các bạn!
II. Những vấn đề khi xây dựng giao diện tương tác
trên môi trường iOS
Ngày nay, với sự bùng nổ của công nghệ thông tin, các thiết bị di động cũng phát
triển hết sức mạnh mẽ. Người dùng không chỉ cần một chiếc điện thoại để nghe, gọi,
nhắn tin nữa. Thay vào đó, điện thoại di động có thể làm được nhiều hơn thế, thay thế
cho nhiều thiết bị cồng kềnh khác. Không chỉ phát triển về kiểu dáng, cấu hình mà
còn cả về ứng dụng. Viết ứng dụng mobile đang là một lĩnh vực đầy tiềm năng của
ngành Công nghệ thông tin. Lập trình iOS là một trong những nghề đang lên hiện nay.
1. Sơ lược về iOS
iOS là hệ điều hành trên các thiết bị di động của Apple. Ban đầu, hệ điều hành này
chỉ được phát triển để chạy trên iPhone, nhưng sau đó nó đã được mở rộng để chạy
trên các thiết bị khác của Apple như iPod Touch, iPad và Apple TV. Tính đến
31/5/2011, kho ứng dụng AppStore của Apple đã có khoảng 500000 ứng dụng iOS
(theo “Apple Introduces New iPod touch”. Apple Press Release) và được tải về tổng
cộng khoảng 15 tỷ lần. Trong quý 4 năm 2010, khoảng 26% smart phone chạy hệ điều
hành iOS, sau hệ điều hành Android của Google và Symbian của Nokia. (“Google’s
Android becomes the world’s leading smart phone platform”. Canalys).
iOS được giới thiệu lần đầu tại Hội nghị và Triển lãm Macworld diễn ra tháng 1
năm 2007 và được phát hành tháng 9 năm đó. Khi đó, nó chỉ đơn giản là “iPhone chạy
OS X” mà chưa có tên và không hỗ trợ ứng dụng của bên thứ ba. Tháng 3/2008,
Apple phát hành bản dùng thử đầu tiên với một cái tên mới cho hệ điều hành này, đó
là “iPhone OS”. Tháng 6 năm 2010, Apple đổi tên iPhone OS thành iOS.

rất mạnh mẽ của ngôn ngữ C. Objective-C kết hợp các đặc điểm ưu tú nhất của C và
ngôn ngữ SmallTalk. Objective-C khá đơn giản để học và có đầy đủ các khả năng của
một ngôn ngữ lập trình hướng đối tượng.
Objective-C đơn giản và nhỏ gọn nhưng lại là một thành phần mở rộng rất mạnh
của ngôn ngữ chuẩn ANSI C. Objective-C cung cấp đầy đủ các khả năng lập trình
hướng đối tượng nhưng lại được thực thi theo cách khá đơn giản và dễ dàng.
Hầu hết các ngôn ngữ lập trình hướng đối tượng cung cấp:
. Một thư viện các Objects.
. Các công cụ phát triển cần thiết
. Hỗ trợ hướng đối tượng và các thư viện liên quan.
Objective-C cũng cung cấp đầy đủ các thành phần trên. Bạn có thể sử dụng
Objective-C để phát triển một phần mềm hoàn thiện. Apple đã chọn Objective-C làm
ngôn ngữ lập trình chính cho hệ thống máy Mac và iPhone.
Là ngôn ngữ hướng đối tượng nên Objective-C giải quyết các vấn đề lập trình dựa
trên khái niệm các Object. Nó bao gồm 3 phần:
1. Interface
Interface của một lớp(class) thông thường được định nghĩa trong file header với đuôi
.h. Nó chính là phần khai báo của một lớp.
2. Implementation
Mã nguồn của chương trình được viết trong phần implementation của một lớp và
được định nghĩa trong một file có đuôi .m. Đây là nó phần định nghĩa của lớp.
3.Instantiation
Sau khi khai báo và định nghĩa một lớp, chúng ta có thể thực thể hóa lớp này bằng
việc cấp phát bộ nhớ cho new object của lớp đó.
Lập trình giao diện tương tác trên iOS là một khái niệm rộng, chứa đựng nhiều cách
thức khác nhau để xây dựng hệ tương tác.
Vì toàn bộ tương tác của người dùng với ứng dụng trên iOS đều thông qua giao diện
cảm ứng, tương tác bằng tay nên khi thiết kế hệ tương tác cần chú ý đến thói quen
của người dùng. Vị trí, cách sắp đặt phải thuận tiện với người dùng nhất.
Có hai cách thức cơ bản để xây dựng ứng dụng tương tác trên iOS, đó là sử dụng

Các mức BPM được phân thành các thang được quy chuẩn quốc tế. Thang đo phổ
biến của một Metronome bao gồm:
 LARGO: 40-60 BPM
 LARGHETTO: 60-66 BPM
 ADAGIO: 66-76 BPM
 ANDANTE: 76-108 BPM
 MODERATO: 108-120 BPM
 ALLEGRO: 120- 176 BPM
 PRESTO: 176-200 BPM
 PRESTISSIMO: 200-208 BPM
Một Metronome thường chỉ giới hạn mức Tempo từ 40-208 BPM. Với mức Tempo
cao hơn hay thấp hơn, rất ít khi được các nhạc sỹ, người học nhạc sử dụng (trừ một số
trường hợp như DJ hoặc thể loại nhạc nhanh).
2. Đặc tả yêu cầu và phân tích nhiệm vụ
Những yêu cầu đặt ra đối với ứng dụng Metronome trên iPhone:
 Chính xác: một Metronome dùng được cần phải chạy chính xác nhịp, tốc độ . Đây là
yêu cầu quan trọng nhất với những người trong lĩnh vực âm nhạc.
 Ổn định: yêu cầu đặt ra với Metronome là phải chạy ổn định trong một thời gian dài
để thỏa mãn nhu cầu tập luyện lâu của người dùng.
 Giao diện đẹp mắt: đây là yêu cầu cần thiết phải thỏa mãn với những ứng dụng
iPhone.
 Dễ dùng: với người lần đầu tiên sử dụng ứng dụng, Metronome phải đảm bảo người
dùng đó có thể sử dụng được nhanh chóng. Tất nhiên đối với người có kiến thức về
âm nhạc, còn đối với người không có nhiều hiểu biết về nhạc thì cần phải tìm hiểu
thêm các kiến thức khác liên quan.
 Cung cấp đầy đủ chức năng cho người sử dụng: trước hết là những chức năng cơ bản,
sau đó là các tính năng mở rộng, tiện dụng cho người dùng.
 Sử dụng thuận tiện: trước hết, việc sử dụng Metronome được cài đặt trên iPhone đã
mang tính tiện dụng cho người sử dụng. Thêm nữa, yêu cầu với ứng dụng cần phải
đảm bảo thao tác của người dùng là thuận tiện nhất cho quá trình sử dụng, tương tác.

 Nhịp điệu Meter.
 Sub-Division: thể hiện của một Beat khi chạy.
2.4. Load lại những cấu hình đã Save
Tương tự như chức năng ở trên, chức năng này cho phép Metronome load lại
những cấu hình đã lưu cho người sử dụng dùng lại. Khi load SaveList, các thành phần
sẽ được load lại bao gồm:
• Mức Tempo
• Nhịp điệu Meter
• Sub-Division.
2.5. Điều chỉnh âm lượng của ứng dụng
Chức năng này cho phép người sử dụng thay đổi mức âm lượng sao cho phù hợp
với hoàn cảnh tập luyện. Ví dụ, người sử dụng có thể tắt âm khi tập cùng nhạc cụ
hoặc tăng âm lượng khi tập luyện trong môi trường ồn ào.
2.6. Flash màn hình trong quá trình luyện tập
Một số trường hợp người sử dụng không thể nghe được âm thanh phát ra từ
Metronome (môi trường ồn ào, người khiếm thính, tập trung vào chơi nhạc cụ, ).
Chức năng Flash màn hình cho phép người sử dụng có thể nhận ra các Beat mà không
cần nghe âm thanh của Beat, chỉ cần liếc nhìn qua màn hình là có thể biết được vị trí
của Beat hiện tại.
2.7. Bật/tắt trợ giúp
Phần trợ giúp cho phép người sử dụng mới có thể nhanh chóng biết cách sử dụng
Metronome ngay lần đầu tiên. Các thông tin trợ giúp cần ngắn gọn, dễ hiểu với người
sử dụng.
Chức năng bật/tắt trợ giúp cũng cho phép người sử dụng đã quen với ứng dụng có
thể tắt trợ giúp để tránh những bất tiện trong quá trình sử dụng và làm cho giao diện
chương trình thoáng hơn.
2.8. Bật/tắt chức năng Auto-lock screen của Device
Người học nhạc thường tập luyện trong một thời gian dài. Trong khi đó, một tính
năng của iDevice là tắt màn hình, lock screen để tiết kiệm pin. Sẽ rất bất tiện với
người sử dụng khi đang tập luyện lại phải dừng lại để bật màn hình lên. Do đó, chức

một Keyboard. Trong ứng dụng này, nhóm đã tự xây dựng một Keyboard để người
dùng có thể dễ dàng nhập vào Tempo mong muốn theo cách đơn giản nhất.
3.2. Giao diện cho chức năng thay đổi nhịp điệu Meter
Vì người dùng chỉ thay đổi nhịp để tập một số ít lần, sau đó tập ổn định với nhịp
đó nên giao diện thay đổi Meter sẽ để ẩn, chỉ hiện ra khi người dùng có nhu cầu. Sau
khi người sử dụng thay đổi xong Meter, view này sẽ đóng lại, cho người dùng tiếp tục
tập luyện.
class="bi x2 y55 wa h16"
3.3. Giao diện cho chức năng SaveList
Trong chức năng này, người dùng có thể thay đổi tên của cấu hình mà mình muốn
Save lại nên phần tên sẽ là một TextField để nhập tên cấu hình. Các thông số khác là
Tempo, Time signature và Subdivision không thể thay đổi được. Người sử dụng có
thể Save hoặc thoát ra ngoài để điều chỉnh các thông số lại trước khi Save.
3.4. Giao diện chức năng Load các cấu hình đã save
Ứng dụng sẽ liệt kê các cấu hình mà người dùng đã Save, cho phép người dùng
chọn cấu hình mình muốn load. Trong mỗi cấu hình, người dùng có thể thấy các
thông số của cấu hình đó, bao gồm Tempo, Time Signature và SubDivision. Người
dùng cũng có thể xóa bỏ đi những cấu hình mình không sử dụng nữa hoặc thay đổi ý
định không load nữa.
class="bi x12 ye9 wc h18"
3.5. Giao diện cho chức năng 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 mới sử
dụng hệ thống. Yêu cầu cho giao diện của phần này là nhỏ (đỡ chiếm diện tích), ngắn
gọn và dễ hiểu. Ở đây, chúng ta thiết kế dưới dạng các Tooltip, có thể hiện và ẩn được
dễ dàng thông qua điều chỉnh ở form Setting.
3.6. Giao diện cho chức năng thay đổi âm lượng
Người sử dụng có thói quen trượt một thanh Slide để thay đổi âm lượng (người sử
dụng iPhone nói riêng và các smart phone khác nói chung), do đó trong ứng dụng này,
nhóm đặt một Slider ở một vị trí dễ nhìn để cho người dùng chỉnh âm lượng. Vì Slider
được cung cấp bởi SDK không đẹp lắm nên nhóm đã custom nó cho phù hợp với giao