Thiết kế ứng dụng di động trên đầu cuối

HỌC VIỆN CƠNG NGHỆ BƢU CHÍNH VIỄN THƠNG IT BÀI GIẢNG PT THIẾT KẾ ỨNG DỤNG TRÊN ĐẦU CUỐI DI ĐỘNG THIẾT KẾ VÀ SÁNG TẠO ĐA PHƢƠNG TIỆN T C GIẢ THS BÙI THỊ THU HUẾ Hà nội - 2014 LỜI NĨI ĐẦU Giáo trình “Thiết kế ứng dụng di động” dùng cho sinh viên tham khảo, thuộc lĩnh vực công nghệ Đa phương tiện, với hai đơn vị học trình Nội dung tài liệu đề cập (i) Tổng quan thiết kế ứng dụng di động; (ii) Thiết kế ứng dụng di động; (iii) Sáng tạo ứng dụng di động Trong vài năm lại đây, ngành phát triển ứng dụng di động phát triển mạnh mẽ Giáo trình lập trình ứng dụng di động có nhiều dành cho sinh viên đại học cơng nghệ thơng tin Nội dung giáo trình liên quan đến thiết kế tương tác, thiết kế giao diện tư sáng tạo thiết kế ứng dụng di động Và đặc biệt dành cho sinh viên ngành thiết kế Tài liệu đánh số chương mục theo chữ số Ả rập Một số hình vẽ bảng biểu chương có giá trị minh hoạ Một số hình vẽ trích từ tài liệu tham khảo, để tiện đối chiếu có thơng tin sâu IT Nội dung trình bày vấn đề lĩnh vực thiết kế ứng dụng di động, số nguyên tắc vấn đề cần quan tâm thiết kế ứng dụng di động Nội dung tập trung cụ thể vào quy trình thiết kế, thiết kế giao diện thiết kế hình ảnh cho ứng dụng di động Chương giáo trình giới thiệu case study tiêu biểu thiết kế sáng tạo ứng dụng di động với học áp dụng Trong chương có thuật ngữ thích Tiếng Anh giúp đọc giả hiểu rõ từ gốc sử dụng PT Nội dung ứng dụng di động, sản phẩm đa phương tiện tương tác gắn liền với công nghệ Một số thông tin liên quan đến kĩ thuật, thiết bị có nghĩa thời đoạn, mang tính minh họa Sinh viên sử dụng thiết bị phần mềm tương đương để thực xử lí liệu đa phương tiện Tác giả xin chân thành cám ơn cán Viện Công nghệ thông tin truyền thông CDIT, Học viện Cơng nghệ bưu viễn thơng PTIT trợ giúp để hoàn thành tài liệu MỤC LỤC MỤC LỤC DANH MỤC HÌNH VẼ DANH MỤC BẢNG BIỂU 11 CHƢƠNG 1.TỔNG QUAN VỀ THIẾT KẾ ỨNG DỤNG DI ĐỘNG 12 1.1 Ứng dụng di động 12 1.1.1 Khái niệm ứng dụng di động 12 1.1.2 Phân loại ứng dụng di động 12 1.1.2.1 Phân loại ứng dụng di động theo kỹ thuật phát triển 12 1.1.2.2 Phân loại ứng dụng di động theo ngữ cảnh 15 1.1.3 Kho ứng dụng hệ điều hành di động 19 Kho ứng dụng di động 19 1.1.3.2 Hệ điều hành di động 19 IT 1.1.3.1 1.1.4 Ứng dụng di động sống hàng ngày 20 1.1.5 Đặc điểm thiết kế ứng dụng di động 24 1.2 Thiết bị đầu cuối di động 25 1.2.1 Các loại thiết bị di động 25 Phân loại theo mục đích sử dụng 25 1.2.1.2 Phân loại theo hệ điều hành 28 PT 1.2.1.1 1.2.2 Đặc trưng thiết bị đầu cuối di động 31 1.2.2.1 Đa phần hình cảm ứng 31 1.2.2.2 Kích thước hình linh hoạt 32 1.2.2.3 Giới hạn lượng – Pin 35 1.2.2.4 Có tích hợp cảm biến 36 1.2.2.5 Đa phần có định vị 39 1.2.2.6 Có khả kết nối 40 1.2.2.7 Một số đặc trưng khác 41 1.2.3 Các dạng tương tác người dùng với thiết bị di động 45 1.2.3.1 Điều khiển trực tiếp (Entry directional) 45 1.2.3.2 Focus and Cursor 45 1.2.3.3 Các phím cứng 46 1.2.3.4 Accesskey 47 1.2.3.5 Các cử hình 47 1.2.3.6 Các cử xúc giác 49 1.2.3.7 1.3 Cử từ xa 51 Đặc điểm hành vi ngƣời dùng di động 52 1.3.1 Tính di động 52 1.3.2 Dễ ngắt quãng tập trung 52 1.3.3 Tính sẵn sàng 53 1.3.4 Tính cộng đồng 53 1.3.5 Hoàn cảnh người dùng 54 1.3.6 Sự nhận dạng 54 1.4 Vòng đời phát triển ứng dụng di động 54 1.4.1 Xây dựng tưởng 55 1.4.2 Thiết kế 56 1.4.3 Phát triển kiểm thử 56 1.4.4 Phân phối 57 IT CHƢƠNG 2.THIẾT KẾ ỨNG DỤNG DI ĐỘNG 59 2.1 Thiết kế phác thảo 59 2.1.1 Vai trò thiết kế phác thảo 59 2.1.2 Kiến trúc thông tin 60 2.1.3 Wireframe 60 Các phương pháp để thực wireframe 61 2.1.3.2 Các bước thực phác thảo Wireframe 63 PT 2.1.3.1 2.1.4 2.2 Prototype 65 2.1.4.1 Tạo Prototype giấy 66 2.1.4.2 Tạo Prototype máy tính 67 Thiết kế giao diện 67 2.2.1 Các thành phần trang 67 2.2.1.1 Thanh cuộn (Scroll) 68 2.2.1.2 Khu vực hiển thị phụ (Annunciator Row) 69 2.2.1.3 Thông báo (Notification) 70 2.2.1.4 Tiêu đề (Title) 71 2.2.1.5 Menu 73 2.2.1.6 Quảng cáo 74 2.2.2 Hiển thị thông tin 75 2.2.2.1 Danh sách theo chiều dọc (Vertical List) 75 2.2.2.2 Băng chuyền (Carousel) 77 2.2.2.3 Lưới (Grid) 78 2.2.2.4 Dải phim (Film Strip) 79 2.2.2.5 Trình chiếu (Slideshow) 80 2.2.2.6 Không gian vô tận (Infinite Area) 81 2.2.2.7 Danh sách lựa chọn (Select List) 82 2.2.3 2.2.3.1 Điều khiển bắt buộc (Imperative control) 83 2.2.3.2 Điều khiển lựa chọn (Select Control) 85 2.2.3.3 Điều khiển tiếp nhận (Entry control) 88 2.2.3.4 Điều khiển hiển thị (Display control) 89 Thiết kế hình ảnh 90 2.3.1 Cấu trúc hình ảnh 90 2.3.1.1 Nhóm (group) 90 2.3.1.2 Hệ thống phân cấp (Hierarchy) 92 2.3.1.3 Căn chỉnh (alignment) 94 2.3.2 Màu sắc 94 IT 2.3 Control 83 2.3.2.1 Tạo khác biệt 94 2.3.2.2 Nhấn mạnh 96 2.3.2.3 Phân loại 97 2.3.3 Background icon 97 Background 97 2.3.3.2 Icon 99 PT 2.3.3.1 CHƢƠNG SÁNG TẠO ỨNG DỤNG DI ĐỘNG 104 3.1 Sáng tạo ứng dụng với đặc trƣng thiết bị di động 104 3.2 Case study 106 3.2.1 Case study 1: What’s Shackin’s 106 3.2.2 Case study 2: Foodspotting 108 3.2.3 Case study 3: Not for Tourists 111 3.2.4 Case study 4: Convertbot 114 3.2.5 Case study 5: Realtor.com 116 3.2.6 Case study 6: Twine 117 3.3 Bài tập 120 3.3.1 Bài tập Xây dựng tưởng 120 3.3.2 Bài tập Thiết kế phác thảo 121 3.3.3 Bài tập Thiết kế lại 122 3.3.4 Bài tập Tạo Prototype 123 3.3.5 Bài tập Thiết kế đồ họa – Bài tập nhà 124 PT IT TÀI LIỆU THAM KHẢO 125 DANH MỤC HÌNH VẼ Hình 1-1: Ba loại kỹ thuật phát triển ứng dụng di động 12 Hình 1-2: Giao diện ứng dụng Native PicFrame 13 Hình 1-3: Giao diện ứng dụng dạng Web Forecast.co cung cấp thông tin thời tiết 14 Hình 1-4: Ứng dụng Hybrid 15 Hình 1-5: Một ví dụ ứng dụng Utility 16 Hình 1-6: Ví dụ ứng dụng Locale 16 Hình 1-7: Ví dụ ứng dụng cung cấp thông tin 17 Hình 1-8: Ứng dụng Productivity 18 Hình 1-9: Ví dụ ứng dụng Immersive 18 Hình 1-10: Thống kê tỷ lệ ứng dụng kho ứng dụng Apple store tháng 7/2012 21 Hình 1-11: Ứng dụng TeacherKid AppStore 21 IT Hình 1-12: Ứng dụng eClicker Presenter – AppStore 22 Hình 1-13: Ứng dụng Cardiograp 22 Hình 1-14: Ứng dụng Name card maker 23 Hình 1-15: Ứng dụng Sổ thu chi 23 Hình 1-16: Ứng dụng Zing MP3 24 PT Hình 1-17: Ứng dụng Allrecipes.com 24 Hình 1-18: P835 WVGA PDA hãng ASUS 26 Hình 1-19: MC55 EDA hãng Motorola 26 Hình 1-20: Một số điện thoại di động tính hãng Nokia chạy hệ điều hành Series 40 (S40) 26 Hình 1-21: Một số điện thoại thơng minh 27 Hình 1-22: Máy tính bảng 27 Hình 1-23: Ultra-Mobile PC sản xuất Gigabyte 28 Hình 1-24: Smartwatch Sony Fan kính thơng minh Google glass 28 Hình 1-25: Các loại điện thoại iPhone iPad 29 Hình 1-26: Một số mẫu điện thoại tablet chạy Android 30 Hình 1-27: Thiết bị chạy Windows phone 30 Hình 1-28: Sử dụng mục tiêu lớn cho hình cảm ứng 32 Hình 1-29: Ví dụ pop-up menu ứng dụng di động 32 Hình 1-30: Kích thước hình thiết bị dp 33 Hình 1-31: Cài đặt mức độ sáng hình hiển thị 37 Hình 1-32: Thay đổi mức độ sáng hình phím cứng thiết bị 37 Hình 1-33: Định hướng thiết bị làm thay đổi bố cục nội dung ứng dụng 38 Hình 1-34: Marble Maze sử dụng cảm biến chuyển động để di chuyển bóng bạc qua mê cung 38 Hình 1-35: ProCamera sử dụng cảm biến gia tốc để cải thiện khả chụp ảnh 39 Hình 1-36: Ứng dụng định vị 40 Hình 1-37: LinkedIn cho phép người dùng kết nối với thành viên LinkedIn khác qua Bluetooth 41 Hình 1-38: Ứng dụng Postman cho phép người dùng thêm ảnh vào bưu thiếp 42 Hình 1-39: Ứng dụng Photoshop 42 Hình 1-40: Ứng dụng SnapTell 43 Hình 1-41: a, Ứng dụng Google search; b, Ứng dụng QuickVoice 44 IT Hình 1-42: Ứng dụng chiếu sáng đèn flash 44 Hình 1-43: Phím cứng điều khiển trực tiếp 45 Hình 1-44: ví dụ điều khiển định hướng 45 Hình 1-45: Ví dụ kiểu tương tác trỏ 45 PT Hình 1-46: Khu vực cho Focus & Cursor 46 Hình 1-47: Các phím cứng 46 Hình 1-48: Sử dụng Accesskey để truy cập nhanh vào danh sách 47 Hình 1-49: Các tương tác cử hình 48 Hình 1-50: Các loại cử Two point action 49 Hình 1-51: Roll handset (từ hình ngửa chuyển sang hình úp) 50 Hình 1-52: Shake handset 50 Hình 1-53: Cử hướng tới thiết bị cầm tay 50 Hình 1-54: Cử gần thiết bị 51 Hình 1-55: Cử từ xa 51 Hình 1-56: Mơ hình vịng đời phát triển ứng dụng di động 55 Hình 1-57: Pha xây dựng tưởng 55 Hình 1-58: Pha thiết kế 56 Hình 1-59: Pha phát triển kiểm thử 57 Hình 1-60: Pha phân phối 58 Hình 2-1: Information Architecture 60 Hình 2-2: Wireframe 60 Hình 2-3: Wireframe thực giấy nhanh chóng 61 Hình 2-4: Tấm kim loại mẫu dùng để thiết kế wireframe 62 Hình 2-5: Sử dụng Template để thiết kế Wireframe 62 Hình 2-6: Mobile Sheet page 63 Hình 2-7: Ví dụ mẫu flow cho ứng dụng 64 Hình 2-8: Wireframe vẽ phác thảo mobile sheet 65 Hình 2-9: Wireframe có sử dụng keyboard in sẵn dán vào khung hinh 65 Hình 2-10: Wireframe thực máy tính 65 Hình 2-11: Prototype giấy 66 Hình 2-12: Thiết kế rời thành phần giao diện cho Prototype 66 Hình 2-13: Quay video thiết kế giấy 67 IT Hình 2-14: Một số thành phần chủ chốt giao diện ứng dụng 68 Hình 2-15: Scroll 68 Hình 2-16: Khu vực hiển thị phụ hình ứng dụng 69 Hình 2-17: Các icon phổ biến khu vực hiển thị phụ 70 Hình 2-18 Icon biểu diễn tình trạng pin 70 PT Hình 2-19: Sắp xếp biểu tượng khơng kích thước 70 Hình 2-20: Lựa chọn biểu tượng đơn giản cho người dùng 70 Hình 2-21: Notification ứng dụng Facebook 71 Hình 2-22: Title ln sử dụng trang, cửa sổ, pop-up 72 Hình 2-23: Title trang chọn, tap kéo 72 Hình 2-24: Hiển thị menu ẩn phím cứng phím mềm 73 Hình 2-25: Menu xuất người dùng kéo vào hình 74 Hình 2-26: Menu cố định ln hiển thị 74 Hình 2-27: Quảng cáo đặt trang 75 Hình 2-28 Vertical list 75 Hình 2-29: Infinite list nạp liệu 76 Hình 2-30: Thumbnail list 76 Hình 2-31: Fisheye list 77 Hình 2-32: Carousel biểu diễn dạng 3D 77 Hình 2-33: Carousel biểu diễn theo chiều dọc chiều ngang 78 Hình 2-34: Biểu diễn thông tin dạng lưới 78 Hình 2-35: Tương tác với item grid 79 Hình 2-36: Kéo khung hình để lựa chọn Film strip 79 Hình 2-37: Tương tác với Film strip 80 Hình 2-38: Mơ hình slideshow 81 Hình 2-39: Biểu diễn đồ với dạng Infinite Area 81 Hình 2-40: Infinite Area ứng dụng biểu diễn biểu đồ 82 Hình 2-41: Select List dùng cho danh sách chiều dọc 82 Hình 2-42: Select list dùng danh sách dạng lưới 83 Hình 2-43: Ví dụ Button hệ điều hành Android, iOS, Window phone 84 Hình 2-44: Butcon Bottom tab iOS 84 Hình 2-45: Một số dạng icon hệ điều hành Android, iOS, Windows phone 84 IT Hình 2-46: App bar windows phone 85 Hình 2-47: Link dùng để liên kết đến trang 85 Hình 2-48: Check box 86 Hình 2-49 Flip-flop button 86 Hình 2-50: On – Off button 86 PT Hình 2-51: Radio button 86 Hình 2-52: List control dạng danh sách dọc 87 Hình 2-53: Combo box 87 Hình 2-54: Date picker control windows phone 88 Hình 2-55: Entry control slider 88 Hình 2-56: Text edit control 89 Hình 2-57: Text Control 90 Hình 2-58: Yahoo stock quote 91 Hình 2-59: eTrade stock quote (top and bottom) 91 Hình 2-60: Urbanspoon restaurant screen Yelp restaurant screen 92 Hình 2-61 a, Twitterific Tweet form b, TweetDeck Tweet form 93 Hình 2-62: a,iThermometer app b,All Recipes recipe screen 93 Hình 2-63: USA TODAY Huffington Post 94 Hình 2-64: Ứng dụng Facebook Flickr 95 Hình 2-65: a, iLike b, iConcertCal 95 3.3.5 Bài tập Thiết kế đồ họa – Bài tập nhà PT IT Sinh viên sử dụng phần mềm đồ họa Photoshop, Illustrator để thiết kế lên giao diện trực quan ứng dụng theo chuẩn kích thước yêu cầu kỹ thuật Kết thúc tập sinh viên cần nộp đầy đủ giao diện hình ảnh ứng dụng Các file đồ họa xuất kích thước theo tiêu chuẩn 124 TÀI LIỆU THAM KHẢO [1] Adrian Mendoza, “Mobile User Experience”, 2014, Elsevier Inc [2] Steven Hoober Eric Berkman, “Designing Mobile Interfaces”, 2012, O’Reilly Media [3] Barbara Ballard, “Designing the Mobile User Experience”, 2007, John Wiley & Sons Ltd, [4] Suzanne Ginsburg, “Designing the iPhone User Experience”, 2011, Pearson Education, Inc [5] Cameron Banga, Josh Weinhold, “Essential mobile interactive design”, 2014, Addison Wesley [6] Microsoft, “Windows User experience guidelines”, 2012, Microsoft [7] http://developer.android.com/design/index.html [8]https://econsultancy.com/blog/8279-android-doubles-market-share-to-take-52-5-ofsmartphone-market IT [9 http://archive.financialexpress.com/news/google-android-lords-over-85-pct-of-smartphoneos-market-share-apple-s-ios-distant-second-idc/1284435 [10] https://developer.apple.com/library/ios/navigation/ PT [11] http://dev.windows.com/en-us/design 125 ... thiết kế ứng dụng di động, số nguyên tắc vấn đề cần quan tâm thiết kế ứng dụng di động Nội dung tập trung cụ thể vào quy trình thiết kế, thiết kế giao di? ??n thiết kế hình ảnh cho ứng dụng di động. .. ứng dụng di động; (ii) Thiết kế ứng dụng di động; (iii) Sáng tạo ứng dụng di động Trong vài năm lại đây, ngành phát triển ứng dụng di động phát triển mạnh mẽ Giáo trình lập trình ứng dụng di động. .. VỀ THIẾT KẾ ỨNG DỤNG DI ĐỘNG 12 1.1 Ứng dụng di động 12 1.1.1 Khái niệm ứng dụng di động 12 1.1.2 Phân loại ứng dụng di động 12 1.1.2.1 Phân loại ứng dụng