it-swarm-vi.tech

Thiết kế cho trình duyệt web di động

Cách tiếp cận tốt nhất để thiết kế một trang web để chạy trên hầu hết các trình duyệt web di động hiện đại là gì?

Nhắm mục tiêu các trình duyệt dựa trên WebKit là đủ?

8
rick schott

Không, nhắm mục tiêu WebKit là không đủ. Điều đầu tiên cần làm là xem xét có hai phân khúc của thị trường di động: dựa trên cảm ứng và không dựa trên cảm ứng. Điều này ảnh hưởng đến cách bạn thiết kế trải nghiệm người dùng di động của bạn. Rất may, những ứng dụng dựa trên cảm ứng sẽ có xu hướng đáng kể đối với WebKit (Android, iPhone và WebOS). Những cái khác chủ yếu sẽ là IE Mobile (IE Mobile 6 trên Windows Mobile 6.5 và một cái mới dựa trên IE7/IE8 trên Windows Phone 7) và Opera = (Di động và Mini). Tham khảo điều này danh sách các trình duyệt di động trên Wikipedia để biết thêm thông tin về công cụ kết xuất và khả năng.

Đối với các nền tảng dựa trên cảm ứng, một thư viện như Sencha Touch có thể giúp bạn tạo trải nghiệm tương đương trên tất cả các thiết bị, nhưng sẽ khó tạo ra trải nghiệm tương đương trên tất cả các thiết bị. Thực tế, tôi khuyên bạn đừng thử . Sự khác biệt giữa các nền tảng di động cảm ứng và không cảm ứng đang trở nên quá lớn, gần giống như sự khác biệt của UX khi cố gắng điều chỉnh giao diện người dùng trên máy tính để bàn trên màn hình có kích thước di động - hoạt động ổn trên các nền tảng dựa trên cảm ứng vì chúng sử dụng mô hình "thu phóng" của iPhone - nhưng bạn sẽ khó có thể có được bất cứ điều gì hữu ích từ phương pháp đó cho các nền tảng cũ hơn hoặc không liên lạc.

Tuy nhiên, hãy xem xét bài viết của LukeW và các cuộc thảo luận tiếp theo về thiết kế cho thiết bị di động trước , đây không nhất thiết là câu trả lời cho câu hỏi của bạn nhưng có thể được coi là một nguyên tắc tốt: bắt đầu thiết kế bằng cách xác định những điều người tiêu dùng muốn làm trên trang web của bạn và làm cho những thứ đó có sẵn một cách nhanh chóng và dễ dàng. Phần lớn đó luôn là thiết kế tốt trên khắp tất cả nền tảng, vì vậy theo nghĩa đó, bạn có thể sử dụng đó làm mẫu hướng dẫn thiết kế di động của mình.

12
Rahul

Tôi đã thực hiện một số thử nghiệm ngày hôm qua với iPhone 3. Đây là kinh nghiệm của tôi:

  • Đừng cho rằng chiều rộng là 320 pixel, do đó sử dụng bố cục chiều rộng chất lỏng.

  • Sử dụng đúng loại tài liệu. Tôi sử dụng XHTML Mobile 1.2. Nhưng tôi không chắc đây có phải là cái đúng không.

  • Làm cho các nút lớn.

  • Không di chuột, vì vậy hãy sử dụng các biểu tượng để cho biết các yếu tố ui khác nhau làm gì.

4
neoneye

Thuật ngữ di động đang phát triển bên ngoài lĩnh vực điện thoại và bắt đầu bao gồm các thiết bị như máy tính bảng, đòi hỏi màn hình cảm ứng năm đến chín inch. Ngoài ra, một thiết kế di động nên chiếm cả hai hướng ngang và dọc. Trên hết những gì neoneye nói, một vài đề xuất/đề xuất khác.

  • Sử dụng một số lề hoặc phần đệm để đảm bảo không có văn bản nào nằm ngay cạnh của màn hình.
  • Ngoài việc sử dụng bố cục chiều rộng chất lỏng (chiều rộng có thể đi từ 320px đến 1024px), hãy đảm bảo các yếu tố thiết kế bạn sử dụng bao bọc tốt. Ví dụ, các nút trông được bọc tốt hơn so với một danh sách ngang.
  • Văn bản cần phải lớn hơn một chút, nhưng vẫn dễ đọc. Theo quan điểm của tôi, phong cách đánh máy tốt ít nhất cũng quan trọng như ở đây. Các yếu tố của phong cách đánh máy được áp dụng cho web là một tài liệu tham khảo tốt.
3
waymost

Nếu đối tượng của bạn có thể đủ điều kiện hơn một chút thì bạn có thể đưa ra một số giả định có giáo dục rằng hầu hết khách hàng đang sử dụng thiết bị chính hoặc trình duyệt kết xuất. Giải quyết các nhu cầu cốt lõi của đối tượng chính của bạn đầu tiên. Cố gắng phân phối ứng dụng của bạn trên tất cả các nền tảng như nhau trong "khởi đầu" có thể là một nhiệm vụ quá khó khăn.

Dưới đây là một số bài viết hữu ích tôi đã đi qua:

Tham chiếu trên thiết bị di động http://www.quirksmode.org/mobile/

2
hungrysquirrel