Nguyễn Thái Duy

Ghi chép của cá nhân. Các bài viết trong blog này là do mình viết, vì vậy xin đừng đem đi nơi khác khi chưa có sự đồng ý của mình.

Chuẩn bị

Trước khi bắt đầu thiết kế giao diện cho Android app, cần chuẩn bị các thông tin sau:

  1. Đối tượng người sử dụng
  2. Phần cứng của thiết bị: bao gồm các phím chức năng, kích thước màn hình…
  3. Phiên bản hệ điều hành.
  4. Các thành phần giao diện mà hệ điều hành hỗ trợ. Điều này có thể ảnh hưởng đến cách thiết kế workflow cho app, cũng như cách thiết kế GUI cho các đối tượng giao diện.

Chi tiết từng mục:

I. Đối tượng người sử dụng.

Yếu tố này quyết định không chỉ việc thiết kế giao diện cho app, mà còn ảnh hưởng đến toàn bộ quá trình sản xuất app đó. Trong việc thiết kế giao diện, có thể xem xét yếu tố này như sau:

Đối tượng người sử dụng mà app nhắm tới là đối tượng người sử dụng bình thường (phân biệt với đối tượng đã có nhiều kiến thức về ICT nói chung và smartphone nói riêng). Đối tượng này thường có đặc điểm:

– Không có nhu cầu mày mò tìm hiểu đối với những thứ liên quan đến máy tính, công nghệ. Họ không dành nhiều thời gian cho việc tìm hiểu cách một chương trình, một thiết bị hoạt động ra sao. Quan điểm của họ đối với các thiết bị công nghệ, hay app, là: làm được việc họ muốn làm, một cách đơn giản nhất, hoặc theo thói quen hay sự hình dung trước của họ trong đầu.
– Yếu tố bắt mắt, đẹp đẽ lung linh của app không quá quan trọng, tuy rằng có thì vẫn hơn không. Đẹp đẽ lung linh bắt mắt thực tế lại tùy cảm nhận của mỗi người, nhưng chắc chắn hoàn toàn không giống những trang web mà banner quảng cáo flash nhấp nháy. Thực sự là rất ức chế những tay thiết kế web mà có cái sở thích nhét những thứ nhấp nháy lòe loẹt đấy lên giao diện, lúc đấy chỉ muốn đấm vào màn hình.

Vậy để đáp ứng được mong muốn của người sử dụng khi ấn nút download app của mình trên market, cần ghi nhớ khi thiết kế:

– Tinh giản chức năng hết sức có thể. Tinh giản cả về số lượng lẫn cách thức người dùng thực hiện chức năng đó.

Về số lượng:

Có nhiều thời điểm, chúng ta luôn mong muốn app của mình có đầy đủ chức năng nhất. Điều này không sai. Tuy nhiên, nếu xét riêng trên môi trường smartphone, thì do smartphone: 1. Smartphone là smartphone, không phải máy tính. 2. Người sử dụng cũng không có nhiều thời gian, hay cơ hội, để sử dụng hết các chức năng chúng ta nhét vào. 3. Kích thước màn hình vô cùng hạn chế; vậy nên, việc tinh giản các chức năng là cần thiết. Có thể thiết kế chức năng theo cách sau:

Lượt 1: Liệt kê hết các chức năng chúng ta mong muốn có. Tất cả. Lúc này cần tham lam.

Lượt 2: Xem xét từng chức năng cụ thể, loại bỏ các chức năng không quá quan trọng (không có nghĩa là chức năng thừa). Có thể xem xét việc gộp một vài chức năng làm một.

Lượt 3: lặp lại lượt 2.

Về cách thức người dùng thực hiện một chức năng cụ thể:

Lúc này, cần sử dụng các kiến thức, nghiên cứu… về hành vi người dùng, về thói quen người dùng khi sử dụng một app. Chi tiết sẽ được tìm hiểu và viết trong một phần riêng. Mục tiêu của việc tìm hiểu này nhằm đưa ra một giao diện thân thiện với người sử dụng.

II. Phần cứng của thiết bị

Về phần cứng, có 2 yếu tố cần xem xét:

1. Màn hình

Điều đầu tiên cần biết về thiết kế giao diện cho Android, đó là công việc này giống như a pain in the ass. Các thiết bị chạy Android có nhiều thông số về màn hình, bao gồm cả thông số về kích thước màn hình tính theo inch, tính theo pixel, và số dpi (dot-per-inch). Những đặc điểm này quyết định việc thiết kế của app sẽ hiển thị như nào trên từng thiết bị. Và việc thiết kế cho ngần ấy loại màn hình là một công việc mệt nhọc, tay to.

Trước tiên cần xác định: không có MỘT kích thước cố định tính theo pixel nào cho người thiết kế để có thể làm việc với Android. Thay vào đó, ta có:

Về kích thước tính theo inch:

– Small: 2 – 3 inches

– Normal: 3 – 5 inches

– Large: 5 – 7 inches

– XLarge: 7 – 10 inches (đây là kích thước của tablet)

Theo kinh nghiệm của mình, việc xác định màn hình là small, normal, large hay gì gì không quá quan trọng. Cái cần quan tâm hơn đó là kích thước theo pixel, và số dpi.

Về kích thước theo pixel:

– QVGA (240×320)

– WQVGA400 (240×400)

– WQVGA432 (240×432)

– HVGA (320×480)

– WVGA800 (480×800)

– WVGA854 (480×854)

Về mật độ điểm ảnh trên một inch, hay số dpi, ta có:

– Low density – ldpi (120)

– Medium density – mdpi (160)

– High density – hdpi ( 240)

– Extra high density – xhdpi (320)

Bảng tổng hợp sau nói lên mối quan hệ giữa 3 thông số này:

ldpi (120) mdpi (160) hdpi (240) xhdpi (320)
small  QVGA (240×320)
normal WQVGA400 (240×400)
WQVGA432 (240×432)
HVGA (320×480) WVGA800 (240×400)
WVGA854 (240×432)
large WVGA800 (240×400)
WVGA854 (240×432)
xlarge

Bảng: Kích thước màn hình theo pixel và density.

Cho đến hiện tại, bảng  này đã bị đưa ra khỏi trang Multi-Screen Support của Android (http://developer.android.com/guide/practices/screens_support.html), do đến thời điểm hiện tại nhiều thông số trong bảng này đã không còn phù hợp, cũng như sự nảy sinh của thêm nhiều kích thước màn hình nữa. Tuy nhiên mình vẫn đưa ra đây, để có so sánh với bảng thống kê Screen Sizes and Densities bên dưới:

ldpi (120) mdpi (160) hdpi (240)  xhdpi (320)
small 3.2%
normal 1.2% 17.1% 75.5%
large 2.6%
xlarge 0.5%

Bảng: Sự phổ biến của các loại kích thước màn hình theo density. Số liệu từ 6/5/2011, Android Screen Sizes and Densities

screen sizes and densities chart

Hình: Biểu đồ so sánh sự phổ biến của các loại màn hình. Số liệu từ 6/5/2011, Android Screen Sizes and Densities

Theo biểu đồ trên có thể thấy:

– Loại kích thước màn hình phổ biến nhất là normal/hdpi và normal/mdpi. So sánh với bảng Kích thước màn hình theo pixel và density, có thể thấy 3 loại màn hình phổ biến nhất hiện nay, tính theo pixel, là WVGA800, WVGA854, và HVGA. Trong đó, WVGA800 và WVGA854 có cùng kích thước chiều rộng, chỉ khác kích thước chiều cao. Đối với nhiều app, việc kích thước chiều cao chỉ hơn kém nhau 54pixel không phải vấn đề quan trọng, nên nếu tóm lại, ta có thể chỉ cần quan tâm đến 2 loại màn hình WVGA800HVGA.

2. Phím chức năng

(còn tiếp)

Leave a comment