it-swarm-vi.com

Thiết kế cho iPad

Tôi muốn làm cho trang web của tôi có thể truy cập được đối với những người có thiết bị iPad hoặc khác iOS .

Tôi cần cân nhắc những điều gì khi thiết kế giao diện người dùng tương thích với iPad hoặc iOS nói chung?

15
George Stocker

Hãy xem suy nghĩ của Jakon Nielsen về vấn đề này . video được liên kết ở dưới cùng chỉ dài 3 phút và rất thú vị, nếu không trực tiếp hữu ích.

Suy nghĩ chung (không có sự thật để sao lưu điều này ngoài kinh nghiệm cá nhân):

  • Nếu bạn cần quay lại thiết kế cho một nền tảng khác, hãy quay lại thiết kế PC, KHÔNG phải thiết kế iPod. Nếu bạn có thể chạm tay vào iPad (sớm), hãy thử duyệt Amazon.com mặc định trên iPad. Nó rơi trở lại giao diện người dùng iPod Touch/iPhone mặc định, có các nút điền ngang với văn bản ở phía bên phải và về cơ bản là không thể sử dụng được.
  • Dễ dàng nhìn thấy những điều nhỏ hơn là nhấp vào chúng. Theo kinh nghiệm của riêng tôi, hầu hết các văn bản có thể đọc được đều không thể nhấp được và tôi thường cần phóng to các liên kết (tức là trên Wikipedia).
  • Kiểm tra thiết kế của bạn trong cả chân dung và phong cảnh!
  • Di chuyển bàn tay của bạn mất nhiều năng lượng vật lý hơn một chút (và ít chính xác hơn) so với việc di chuyển chuột của bạn.
  • Sử dụng nhiều tab khó hơn so với PC (mặc dù có lẽ dễ hơn so với iPhone). Các liên kết đưa người dùng ra khỏi trang web có thể sẽ làm điều đó; đừng mong họ quay lại sớm.
  • Vòi tình cờ là phổ biến hơn so với nhấp chuột tình cờ.
  • Gõ (thậm chí để tìm kiếm) khó khăn hơn so với bàn phím.
  • Video nhúng YouTube hoạt động.
  • Hãy nhớ cơ sở người dùng mua iPad và thiết kế cho họ.
  • Cập nhật: Có các trình duyệt web khác. 95% người dùng có thể sử dụng Mobile Safari, nhưng nó có thể đáng để thử nghiệm ở một vài người khác. Ví dụ: tôi vừa phát hiện ra các trang web Stack Exchange không hoạt động (không thể đăng câu hỏi) trong Trình duyệt web nguyên tử .

Chúc may mắn!

14
Robert Fraser

Điều này áp dụng nhiều hơn cho câu hỏi UI chung của bạn:

Hãy suy nghĩ "chạm, không nhấp." Làm thế nào bạn (hoặc khách hàng tiềm năng của bạn) sử dụng ứng dụng với tay? Có một sự khác biệt cơ bản giữa việc chỉ vào thứ gì đó bằng chuột và chỉ vào thứ gì đó bằng tay của bạn. Có lẽ thực hiện các điều khiển quan trọng nhất ở bên cạnh để mọi người có thể tiếp cận chúng dễ dàng? Thử nghiệm với các khung dây khác nhau và yêu cầu mọi người đánh giá mức độ dễ sử dụng. Kiểm tra người dùng sớm trong quá trình có thể giúp tinh chỉnh thiết kế của bạn.

8
Scott M.

Tôi đã viết một blog về những điều cần xem khi thiết kế các trang web được tối ưu hóa/sẵn sàng cho iPad. Bạn có thể thấy nó hữu ích.

3
Jin

IPad được thiết kế để duyệt web. Màn hình lớn cho phép xem toàn bộ chiều rộng của trang web. Vì vậy, thiết kế cho trang web sẽ ổn trên iPad.

Đối với iPhone, iPod Touch, bạn có thể xem xét tạo một thiết kế khác, tạo giao diện người dùng tương tự như các ứng dụng iPhone gốc. Có những công cụ bạn có thể sử dụng, để thực hiện điều này có thể, nhưng nó sẽ rất nhiều công việc. Hãy xem Sencha Touch , cũng có thể được sử dụng cho iPad.

Nếu bạn không muốn sử dụng thứ gì đó như Sencha Touch, một điều khác mà bạn phải xem xét là sự tương tác của người dùng khá khác biệt với các thiết bị này. Chúng dựa trên cảm ứng và không dựa trên chuột. Một ví dụ là hiệu ứng di chuột sẽ không hoạt động với thiết bị dựa trên cảm ứng. Ngoài ra, nhấp chuột cũng khác với thao tác nhấn mà trình duyệt trên iOS chụp. Điều này có nghĩa là bạn có thể cải thiện tương tác của người dùng, bằng cách tùy chỉnh JavaScript bạn sử dụng cho iOS để làm cho nó trở nên tự nhiên và trực quan hơn.

Apple cũng đã thực hiện Hướng dẫn giao diện con người cho các ứng dụng gốc của họ trên iOS. Sẽ là một ý tưởng tốt để xem qua điều này, vì đây là những gì người dùng sẽ mong đợi từ các ứng dụng gốc. Có các trang web phù hợp với điều này, sẽ giúp họ hiểu trang web của bạn.

3
googletorp

Đừng quên kích thước màn hình và các bố cục khác nhau có thể có: Bố cục CSS của iPad với các chế độ định hướng ngang/dọc

2
Kostya

Hai vấn đề nữa tôi muốn thêm vào, đặc biệt là việc điều chỉnh một trang web hoặc ứng dụng hiện có thay vì thiết kế một trang web mới - những vấn đề này có vẻ tầm thường, nhưng vẫn:

  • Đảm bảo trang web hoặc ứng dụng của bạn không trả lời các hành động di chuột (như chú giải công cụ)
  • Hãy nhớ rằng không có nhấp chuột phải (ít phổ biến hơn trên web, nhưng đôi khi được tìm thấy trong các ứng dụng web)
1
Dan Barak

Các yếu tố cần phải lớn hơn trên ứng dụng máy tính để bàn, vì ngón tay kém chính xác hơn chuột.

Gần đây tôi đã sử dụng một số ứng dụng đồ họa, tôi thấy rằng có thể rất khó để đặt các vật thể chính xác bằng ngón tay của bạn vì chúng che khuất đối tượng bạn đang di chuyển. Một cách để khắc phục điều này có vẻ như Apple đã làm là chỉ bắt đầu di chuyển sau khi bạn đã di chuyển ngón tay một số, do đó, nó không còn nằm trên đối tượng bạn di chuyển.

Nhiều lựa chọn là rất rắc rối tại thời điểm này. Tôi không thích cách tiếp cận Apple của việc chạm một đối tượng bằng một ngón tay và nhấn nhiều đối tượng với đối tượng khác để tạo nhiều lựa chọn. Nó sẽ sụp đổ khi bạn cần nhiều hơn 4-5 đối tượng. Kéo chọn có thể hoạt động tốt hơn. Ví dụ: tab một công cụ chọn trước rồi kéo chọn nhiều đối tượng.

1
Erik Engheim