BÁO CÁO BÀI TẬP LỚN Đề tài: Thiết kế giao diện di động

Sự phát triển mạnh mẽ của chất lượng phần cứng đã tạo điều kiện cho việc phát triển các ứng dụng trên các thiết bị di động trở nên đa dạng và phong phú hơn bao giời hết.Các thiết bị di đ

BÁO CÁO BÀI TẬP LỚN

Đề tài: Thiết kế giao diện di động

Lớp : D08CNPM1

Thành viên nhóm : 1.Vũ Hoài Nam

2.Vũ Xuân Long 3.Hoàng Văn Nam 4.Phạm Thị Nhung

Mục lục

1 Giới thiệu chung 2

2 Các loại ứng dụng thường gặp trên thiết bị di động2 3 Chiến lược thiết kế giao diện cho các ứng dụng trên thiết bị di động 3

4 Các thành phần chính của thiết kế di động 6

5 Thiết kế cho màn hình di động 15

6 Các công cụ trợ giúp thiết kế di động 18

7 Ví dụ minh họa cho các thiết bị di động cụ thể 19

8 Đánh giá tính dùng được của giao diện di động 21

1 Giới thiệu chung.

Hiện nay thế giới đang chứng kiến một sự bùng nổ nhanh chóng của các thiết bị

di động.Theo dự báo của Cisco thế giới sẽ có tới hơn 10 tỷ thiết bị được kết nối vớimạng Internet di động vào năm 2016, vượt cả dân số theo dự báo của thế giới ở thời điểm đó là 7,3 tỷ người.Các thiết bị di động đang nhanh chóng trở nên phổ biến,hiện đại và tiện dụng hơn

Sự phát triển mạnh mẽ của chất lượng phần cứng đã tạo điều kiện cho việc phát triển các ứng dụng trên các thiết bị di động trở nên đa dạng và phong phú hơn bao giời hết.Các thiết bị di động được phát triển trên các nền tảng hệ điều hành khác nhau.Mỗi hệ điều hành đều xây dựng cho mình nhưng kho ứng dụng riêng.Ví dụ Google Play của Android, AppStore của Apple…vv

Do tính chất đặc thù nên người dùng yêu cầu cần phải có những phiên bản website riêng cho việc lướt web,những thiết kế ứng dụng thân thiện, đơn giản đẹp mắt nhưng vẫn đầy đủ chức năng trên các thiết bị di động.Chính vì thế mà việc nghiên cứu và đưa ra các nguyên tắc cho thiết kế các thiết bị di động là rất cần thiết.Nó giúp cho các nhà thiết kế có thể có cái nhìn sâu sắc hơn về thiết giao diện trên thiết bị di động

2. Các loại ứng dụng thường gặp trên thiết bị di động

Các ứng dụng trên các thiết bị di động đang phát triển mạnh,đa dạng và phong phú đã đáp ứng gần như đầy đủ các nhu cầu cần thiết của người sử dụng.Các ứng dụng phổ biến bao gồm:

- Website phiên bản di động

- Game

- Các ứng dụng tiện ích: Như xem báo,dự báo thời tiết,chỉnh sửa ảnh ….vv

thiết bị di động.

Thiết kế cho màn hình nhỏ hơn

Khi thiết kế cho màn hình thiết bị di động, bạn phải đi vào xem xét kíchthước nhỏ hơn của màn hình Đây sẽ là khó khăn cho những người trongchúng ta được sử dụng để thiết kế cho màn hình lớn HD với khả năng hiểnthị đồ họa ở 1920X1200 hoặc cao hơn

IPhone 4 hiện nay có độ phân giải 640 x 960 và iPad thì cao hơn là 1024

x 768 Một số điện thoại như Android và Blackberry có kích thước mànhình 320 × 240 Đó là nhỏ hơn so với những gì chúng ta đang sử dụng,nhưng nó rất quan trọng để lưu ý khi thiết kế trang web di động của bạn

Các nhà cung cấp dịch vụ liên tục tung ra các dịch vụ có tốc độ nhanhhơn theo thời gian, nhưng vẫn còn chắp vá chỉ tốt nhất trong một số khuvực Cộng với một số người sử dụng, không có kế hoạch giới hạn dữ liệu, trảtiền để tải dữ liệu Vì vậy, các nhà phát triển, phải suy nghĩ lại về nhữngngày đầu của modem Bạn cần giảm mã, và loại bỏ các thẻ không cần thiết.Giữ hình ảnh nhỏ, và nén cho nhẹ hơn trong mỗi lần tải về

Xem xét một điện thoại di động thân thiện :Cấu trúc trang Cột

Khi tải trang trên điện thoại nó thường được thu nhỏ bằng tất cả cáccách để có thể hiển thị tất cả lên màn hình Màn hình của hầu hết tất cả cácđiện thoại quá nhỏ vì thế trang này không thể đọc được cho đến khi nó đượcthu nhỏ Điều này không phải là lý tưởng bởi vì nó tạo ra nhiều bước hơncho người sử dụng trong khi đọc nội dung của trang Thông thường họ sẽphải di chuyển cả hai chiều dọc và ngang trong khi đọc

Thay vì cố gắng thực hiện một cột bố trí phù hợp trong một màn hìnhđiện thoại di động.Người dùng sẽ vẫn có khả năng phải di chuyển, nhưng nó

sẽ chỉ là theo chiều dọc

Đơn giản hóa và Tối ưu hóa nội dung của bạn

Xem xét việc loại bỏ các liên kết bổ sung và nội dung mà không phải

là trong khu vực nội dung chính Các sản phẩm thường thấy ở các bên hoặc

footer của các trang web truyền thống thường có thể được loại bỏ để tậptrung sắp xếp hợp lý và đơn giản.

Bằng cách loại bỏ những nội dung này, bạn cũng làm giảm kích thướctrang và thời gian tải, đó là một khía cạnh quan trọng của thiết kế trang diđộng

Giảm Navigation và User Input

Nhập liệu người dùng có thể gặp khó khăn trên một số điện thoại Nókhông nhanh như một bàn phím truyền thống, và người dùng có khả nănggây ra những sai lầm Chúng ta có thể làm cho một vài điều chỉnh để giảm

số lượng đầu vào cần thiết từ người sử dụng Ví dụ, thông tin có thể đượckéo từ tài khoản hiện có của một người dùng trong quá trình thanh toán.Danh mục có thể được giảm đến một trình đơn thả xuống.Chúng tôi cũng cóthể tận dụng lợi thế của một điện thoại xây dựng trong các chức năng:

Tránh kích cỡ tuyệt đối

Khi thiết kế cho màn hình nhỏ hơn tránh xác định kích thước điểmảnh tuyệt đối Ví dụ nếu bạn xác định có chiều rộng 200px, có thể là phầnlớn các màn hình trên một số điện thoại.Hãy thử sử dụng các kích thướctương đối như ems và tỷ lệ phần trăm, do đó kích thước sẽ tự động điềuchỉnh

Tránh cuộn …

Theo tôi bạn chỉ đơn giản là không thể tránh tất cả di chuyển tronghầu hết trường hợp, với kích thước màn hình nhỏ hơn các thiết bị di động,nhưng bạn có thể thực hiện một số điều chỉnh để giảm thiểu các di chuyển.Tạo ra một bố trí cột 1 như đã đề cập ở trên để tiếp tục di chuyển theo chiềudọc là lý tưởng Giảm số lượng hình ảnh và nội dung trên trang đó là mộtgợi ý tốt Ngoài ra xem xét thêm nội dung trong tiêu đề, chẳng hạn như logo

và định hướng, chúng có thể đẩy nội dung xuống trang gây di chuyển khôngcần thiết

Thiết kế cho màn hình cảm ứng

Màn hình cảm ứng trên điện thoại thông minh giúp cải thiện trảinghiệm người dùng, trừ khi nói đến khai thác các nút bấm rất nhỏ và các liênkết văn bản Ngón tay thường là quá lớn để xác định chính xác một liên kết

văn bản nhỏ Đối với các liên kết và định hướng quan trọng xem xét việc sửdụng các nút lớn kéo dài chiều rộng của màn hình

Chọn Font cho nội dung của bạn

Với khả năng nhúng các font vào trang web, cần thiết để lựa chọn mộtphông chữ có thể đọc được trên một màn hình nhỏ Tránh kịch bản và phôngchữ viết tay, ngay cả đối với tiêu đề hoặc văn bản được dự định là lớn hơn.Thậm chí lớn hơn văn bản xuất hiện trên điện thoại nhỏ

Ngoài ra xem xét sự thích hợp của khoảng cách chữ và khoảng cáchdòng để giữ cho nội dung của bạn có thể đọc được càng tốt

Flash, Java, các khung hình và cửa sổ Ups Pop

Hầu hết các thiết bị di động không hỗ trợ, Flash, Java Applet, khung

và cửa sổ pop up.Hãy tránh các công nghệ này khi phát triển trang web diđộng của bạn Với thông báo gần đây của Adobe mà họ đã ngừng phát triểnFlash Player cho các trình duyệt trên các thiết bị di động

Cách nhìn của CSS về điện thoại di động

Dưới đây là một số lời khuyên chung của CSS cân nhắc khi thiết kế dànhcho điện thoại di động

o Thiết lập độ rộng wrapper của bạn tỷ lệ phần trăm so với độ rộng cốđịnh để trang của bạn sẽ quấn kích cỡ màn hình khác nhau

o Set đoạn văn, tiêu đề và định hướng để hiển thị khối để điền hình

o Điện thoại di động Safari không hỗ trợ đầy đủ @ font-face

o Hãy nhìn vào CSS3 truy vấn truyền thông cho việc tạo ra một phiênbản di động của trang web của bạn

o giữ cho mọi thứ đơn giản và sắp xếp hợp lý

Các bộ công cụ giao diện người dùng di động và các biểu tượng

Nếu bạn nghiêng nhiều hơn một chút về các bên phát triển so với thiết

kế, không cần phải lo sợ Có rất nhiều các bộ công cụ giao diện người dùng

có sẵn cho các trang web điện thoại di động

4 Các thành phần chính của thiết kế di động.

Xác thực và ủy quyền

Việc thiết kế một xác thực có hiệu quả và chiến lược ủy quyền là quantrọng với việc bảo mật và tính tin cậy của ứng dụng Tính xác thực yếu cóthể khiến ứng dụng của bạn bị sử dụng trái phép Thiết bị di động thườngđược thiết kế cho người sử dụng duy nhất và thường thiếu hồ sơ và bảo mật.Khả năng của các thiết bị di động qua bluetooth cũng có thể mang đếnnhững rủi ro cho người sử dụng Thiết kế di động gặp khó khắn do bị giánđoạn kết nối Việc thiết kế xác thực và ủy quyền:

Thiết kế xác thực và ủy quyền cho cả hai kết nối đầy đủ và kết nốikhông đầy đủ; bao gồm đồng bộ hóa trong không gian, đồng bộ hóa tới PC,phát hiện ra bluetooth, đồng bộ hóa trên mạng riêng ảo và đồng bộ hóa thẻnhớ SD

Các thiết bị khác nhau phải khác nhau trong mô hình bảo mật chươngtrình của chúng, là cái mà có thể ảnh hưởng đến ủy quyền truy cập tàinguyên

Không đảm bảo được rằng bảo mật có sẵn trên các nền tảng lớn hơn

sẽ có trong di động Ngay cả khi bạn đang sử dụng các công cụ tương tự Vídụ: danh sach kiểm soát truy cập (ACL) là không có sẵn trong windowmobile và do đó bảo mật tập tin không có trong hoạt động hệ thống

Caching: bộ nhớ đệm.

Sử dụng bộ nhớ đệm để cải thiện hiệu năng và đáp ứng trong ứngdụng và để hỗ trợ hoạt động khi không có kết nối mạng Bộ nhớ đệm có thểtối ưu hóa tra cứu dữ liệu tham khảo, tránh đi đường vòng và ngăn chặn xử

lý không cần thiết Khi quyết định những dữ liệu vào bộ nhớ đệm xem xétgiới hạn tài nguyên của thiết bị; bạn sẽ có không gian lưu trữ ít hơn so vớimáy tính để bàn Các hướng dẫn thiết kế bộ nhớ đệm:

Xác định mục tiêu hiệu suất của bạn Ví dụ: xác định thời gian đápứng tối thiểu và tuổi thọ của pin Kiểm tra hiệu năng của thiết bị cụ thể sẽ sửdụng Hầu hết các thiết bị di động chỉ sử dụng bộ nhớ flash, có thể chậm hơn

sơ với bộ nhớ được sử dụng trong máy tính để bàn

Thiết kế bộ nhớ tối thiểu Bộ nhớ cache chỉ chứa dữ liệu là hoàn toàncần thiết cho các ứng dụng để hoạt động

Chọn vị trí thich hợp bộ nhớ cache, chằng hạn như trên các thiết bị, tạicổng di động hay trong máy chủ cơ sở dữ liệu

Đảm bảo rằng dữ liệu nhạy cảm được mã hóa khi bộ nhớ đệm, đặcbiết là khi dữ liệu bộ nhớ đệm trong các phương tiện truyền thông khôngnhững thế cũng xem xét việc mã hóa dữ liệu trong bộ nhớ đệm trong bộ nhớthiết bị di động

Xác định ranh giới tin cậy với tầng ứng dụng di động: giữa máy chủ

và máy khách, giữa máy chủ với cơ sở dữ liệu Điều này giúp bạn xác định ởđâu và làm như thế nào để chứng thực

Truyền thông: Communication

Thiết bị truyền thông bao gồm truyền thông không dây và truyềnthông có dây với một máy chủ.cũng như truyền thông thông qua bluetoothhay cổng hồng ngoại Khi truyền thông qua không khí thì chú trọng việc bảo

vệ tránh bị trộm cắp, giả mạo Nếu đang giao tiếp qua các giao diện dịch vụweb, sử dụng cơ chế như tiêu chuẩn ws-sercure để đảm bảo dữ liệu Giaotiếp thiết bị không dây có nhiều khả năng bị gián đoạn hơn so với thông tinliên lạc từ một máy tính và ứng dụng của bạn có thể được yêu cầu hoạt độngtrong thời gian dài ở trạng thái bị ngắt kết nối Hướng dẫn thiết kế chiếnlược truyền thông:

Thiết kế không đồng bộ, truyền thông theo luồng để cải thiện hiệunằng và khả năng sử dụng trong vệc kết nối Giới hạn băng thông kết nốitrên các thiết bị di động có thể làm giảm hiệu suất và ảnh hưởng đến khảnăng sử dụng Sử dụng các giao thức truyền thông phù hợp, xem xét các ứngdụng hoạt động khi nhiều loại kết nối có sẵn Hãy xem xét cho phép ngườidùng lựa chọn kết nối để sử dụng, và để tắt thông tin liên lạc bảo vệ pin phùhợp.

Nếu đang thiết kế 1 ứng dụng chạy trên thiết bị di động xem xét cáctác động nhận được một cuộc gọi điện thoại trong quá trình truyền thônghoặc thực hiện chương trình Thiết kế ứng dụng cho phép dừng và hoạt độnglại hay thậm chí thoát khỏi ứng dụng

Bảo vệ thông tin liên lạc trên các kết nối không đáng tin cậy, chẳng hạnnhư các dịch vụ web và các phương thức qua không gian Xem xét sử dụng

mã hóa và chữ ký điện tử cho các dữ liệu nhạy cảm và đảm bảo dữ liệu điqua VPN được bảo vệ

Nếu bạn đang sử dụng WCF để giao tiếp và phải thực hiện hàng đợitin nhắn, xem xét việc sử dụng WCF lưu trữ và chuyển tiếp

Quản lí cấu hình

Khi thiết kế quản lý cấu hình thiết bị xem xét làm thế nào để xử lýthiết bị reset, cũng như việc bạn muốn cho phép cấu hình của ứng dụng quakhông khí hay từ một máy chủ Xem xét các hướng dẫn sau đây:

Chọn một định dạng phù hợp với thông tin cấu hình Xem xét mộtđịnh dạng nhị phân trên XML để giảm thiểu sử dụng bộ nhớ Đảm bảo rằngviệc mã hóa dữ liệu lưu trữ trong tập tin cấu hình

Đảm bảo rằng thiết kế của bạn hỗ trợ khôi phục cấu hình sau khi resetthiết bị Làm thế nào để đồng bộ hóa thông tin cấu hình khi kết nối quakhông khí hay tới một máy tính

Nếu bạn có một cơ sở hạ tầng Active Directory, xem xét việc sử dụnggiao diện hệ thống quản lý trung tâm thiết bị di động để quản lý cấu hìnhnhóm, xác thực và ủy quyền của các thiết bị

Truy cập dữ liệu

Truy cập dữ liệu trên thiết bị di động bị hạn chế bởi kết nối mạngkhông đáng tin cậy và hạn chế phần cứng của chính thiết bị đó Khi thiết kếtruy cập dữ liệu, xem xét làm thế nào băng thông thấp, độ trễ cao và kết nốiliên tục ảnh hưởng đến thiết kế Hướng dẫn thiết kế sau đây:

Xem xét việc sử dụng một cơ sở dữ liệu thiết bị cục bộ cung cấp dịch

vụ đồng bộ hóa chẳng hạn như SQL server compact edition

Không đảm bảo rằng thiết bị lưu trữ sẽ luôn luôn có sẵn, như mộtngười sử dụng có thể xóa vào bât kỳ thời gian nào Kiểm tra sự tồn tại củamột thiết bị lưu trữ di động trước khi sử dụng FlushFileBuffers

Nếu sử dụng XML để lưu trữ hoặc chuyển dữ liệu Xem xét kichthước tổng thể của nó và tác động đến hiệu suất XML làm tăng băng thông

và các yêu cầu lưu trữ địa phương

Giảm thiểu tác động hiệu quả bằng cách thiết kế để truy cập cơ sở dữliệu hiệu quả và xử lý dữ liệu Hãy xem xét việc sử dụng các đối tượng đánhmáy thay vì tập dữ liệu để giảm chi phí bộ nhớ và cải thiện hiệu suất Tránhquá trình hoạt động chuyên sâu, điều hướng thông qua các tập dữ liệu lớn

Các đặc trưng của thiết bị

Thiết kế thiết bị di động và phát triển là duy nhất do tính chất hạn chế

và khác nhau của thiết bị phần cứng Giữ cho môi trường thiết bị khôngđồng nhất khi thiết kế ứng dụng di động Yếu tố trong sự thay đổi kích thướcmàn hình và định hướng, hạn chế bộ nhớ và không gian lưu trữ và băngthông kết nối mạng Lựa chọn hệ điều hành di động phụ thuộc vào loại thiếtbị

Tối ưu hóa ứng dụng cho thiết bị bằng cách xem xét các yếu tố kíchthước màn hình và định hướng, mạng băng thông, không gian bộ nhớ lưutrữ, hiệu suất xử lý , khả năng các phần cứng khác.

Xem xét thiết bị cụ thể mà sử dụng để tăng cường chức năng úngdụng như xử lý đồ họa đơn vị, GPS, thông tin phản hồi

Nếu đang phát triển nhiều hơn một thiết bị thiết kế đầu tiên cho cáctập con của các chức năng tồn tại trên tất cả các thiết bị và sau đó tùy chỉnh

để phát hiện và sử dụng các tính năng thiết bị cụ thể khi có sẵn

Xem xét các tài nguyên bộ nhớ hạn chế và tối ưu hóa các ứng dụngcủa bạn để sử dụng tài nguyên tối thiểu của bộ nhớ Khi bộ nhớ thấp, hệthống có thể phát hành lưu trữ mã ngôn ngữ trung gian để giảm bộ nhớriêng

Tạo mã module cho phép loại bỏ module dễ dàng từ việc thực thi.Điều này bao gồm các trường hợp riêng biệt các tập tin thực thi nhỏ hơnđược yêu cầu do hạn chế về kích thước bộ nhớ điện thoại

Quản lí ngoại lệ

Thiết kế một chiến lược quản lý ngoại lệ hiệu quả là quan trọng đốivới bảo vệ tin cậy của ứng dụng Xử lý ngoại lệ trong ứng dụng di độngngăn ngừa những chi tiết ngoại lệ nhạy cảm được tiết lộ cho ngươi sử dụng.Cải thiện mạnh mẽ ứng dụng Hướng dẫn thiết kế:

Thiết kế ứng dụng để khôi phục lại trạng thái tốt được biết đến sau khixảy ra trường hợp ngoại lệ mà không tiết lộ với người sử dụng cuối cùng

Chỉ bắt ngoại lệ nếu bạn có thể xử lý chúng và không sử dụng ngoại lệ

để kiểm soát luồng logic Đảm bảo rằng thiết kế một lỗi xử lý tổng thể đểnắm bắt các trường hợp ngoại lệ không được quản lý

Thông báo đầy đủ thông tin lưu trữ về các ngoại lệ Đảm bảo các tinnhắn ngoại lệ thân thiện sử dụng và chúng không tiết lộ thông tin nhạy cảm

về các lỗi quan trọng và trường hợp ngoại lệ

Logging