Phần 2 - 20 bí quyết cần có trong thiết kế web mobile

Phần 2 - 20 bí quyết cần có trong thiết kế web mobile
      Accelerated Mobile Pages

Tiếp theo bài viết, 20 bí quyết cần có trong thiết kế web mobile phần 1 - chúng tôi cập nhật đến bạn phần 2 của bài viết này, gồm 10 bí quyết hay trong...

Tiếp theo bài viết, 20 bí quyết cần có trong thiết kế web mobile phần 1 - chúng tôi cập nhật đến bạn phần 2 của bài viết này, gồm 10 bí quyết hay trong thiết kế web mobile.

11. Tuân thủ đúng các nguyên tắc và khuôn mẫu UI (Giao Diện Người Dùng)


Mọi hệ điều hành đều có một tập hợp UI và các nguyên tắc tương tác được người dùng sử dụng. Nếu bạn kiến tạo một ứng dụng Android, đừng bao giờ chỉ đụng đến thiết kế ứng dụng iOS và dùng nó đúng như thông thường, thay vào đó hãy biết tối ưu hóa và hiểu rằng mọi hệ điều hành đều khác nhau. Tìm hiểu các yếu tố khiến vì sao chúng lại khác nhau đến vậy, đồng thời việc tuân thủ đúng các nguyên tắc hướng dẫn chắc chắn sẽ giúp ứng dụng bạn tạo ra dễ sử dụng hơn nhiều.


12. Xem xét tính tương thích với phiên bản cũ và tính phân mảnh

tinh tuong thich
Tính tương thích và tính phân mảnh

Khi bắt tay thực hiện các ứng dụng, công việc không hoàn toàn chỉ đơn giản dành cho iOS hay Android. Mỗi hệ điều hành đều có nhiều phiên bản khác nhau, và không phải người dùng nào cũng luôn cập nhật ngay phiên bản mới. Tỉ lệ chấp nhận của các phiên bản mới cũng thường xuyên biến đổi, đôi khi iOS mới được chấp nhận khá nhanh nhưng chính điều đó lại khiến Android mới bị chậm chạp và phân mảnh hơn. Hãy đảm bảo bạn không chỉ thiết kế website di động cho những phiên bản mới nhất, mà còn cho rất nhiều phiên bản khác mà người dùng mục tiêu của bạn cơ bản đang ứng dụng.

13. Xác định điểm xuất phát và điểm ngắt


Xác định xuất phát điểm


Khi đáp ứng thiết kế, việc xác định điểm xuất phát và điểm ngắt chính là xương sống của công việc thiết kế website di động. Có một số công cụ có khả năng giúp bạn xác định được cả số lượng cột, độ rộng và lề gáy cũng như cung cấp nhiều hướng dẫn về cách thức chúng làm việc trên các màn hình cỡ nhỏ. Trong một số trường hợp, một phương pháp tiếp cận cố định mà trong đó độ rộng cột luôn giữ nguyên lại trở nên thích hợp hơn cả. Mặt khác, cũng có những trường hợp phương pháp tiếp cận mang tính biến thiên hoặc kết hợp cả hai dạng trên lại khá hữu dụng.

Nhưng dù thế nào, điểm xuất phát và điểm ngắt, chẳng hạn như độ phân giải màn hình khác nhau làm thay đổi hoạt động hiển thị nội dung từ một layout này sang layout khác luôn là người bạn đáng tin cậy khi bạn đáp ứng và thực hiện các module webstie của mình.

14. Phải bắt đầu từ đâu – Thiết bị di động hay PC trước?



Bắt đầu từ web Mobile

Thiết kế cho các thiết bị di động trước đang là một chủ đề khá nóng ở thời điểm hiện tại. Một số người cảm thấy rất thoải mái với vấn đề này. Trong khi số khác lại không vồn vã như vậy. Vì nhiều lý do, việc xác định một phương pháp tiếp cận đúng hay sai là rất hiếm.

Điều quan trọng là tập trung vào nội dung và luôn đặt những màn hình cỡ nhỏ trong tư duy của bạn, tuy nhiên, việc hoàn tất các phác thảo cho thiết bị di động thường là một chặng đường dài, trong khi những xác định chi tiết hơn dành cho PC lại không phải là vấn đề gì to tát. Miễn là bạn cân nhắc đến nội dung mobile website của mình, lý do tại sao nó ra đời và nó sẽ vận hành như thế nào qua nhiều loại thiết bị. Cứ xuất phát từ điểm mà bạn cảm thấy thoải mái nhất, nhưng hãy thử nghiệm cả hai.

15. Xác định chiến lược sắp xếp nội dung


Sắp xếp nội dung trên website mobile

Trừ khi bạn xác định được module nội dung trong các cột bên trái hoạt động khác biệt thế nào với module nội dung trong các cột bên phải đặt ở phía trên khi bạn chuyển sang một màn hình cỡ nhỏ, đồng thời được theo sau bởi các module cột giữa bên dưới và cuối cùng là cột phải bên dưới. Điều này ít khi tương tự với thứ tự quan trọng của các module nội dung riêng lẻ.

Để đảm bảo nội dung của bạn được hiển thị một cách đúng đắn từ PC đến thiết bị di động hoặc ngược lại, bạn cần phải xác định được cách thức mà các module nội dung sắp xếp và tái sắp xếp lại chúng. Sử dụng một số phương pháp tiếp cận đơn giản để khởi đầu, phác thảo xem hoạt động hiển thị nội dung sẽ thay đổi thế nào và giao cho nhóm thiết kế cộng tác của mình thực hiện. Luôn phát triển bản nguyên mẫu cúa nó và tăng cao độ phân giải cho những phần cần thiết.

16. Đừng quên điều hướng

Khi nói đến responsive design, một khu vực có khả năng tạo ra nhiều chú ý đối với người dùng nhưng lại thường xuyên bị bỏ sót chính là điều hướng. Brad Frost đã từng cho ra đời khá nhiều bài viết ấn tượng liên quan đến các tùy chọn khác nhau, cũng như những lý lẽ tán thành lẫn phản đối cho từng tùy chọn cụ thể. Thay vì để mọi thứ tự phát triển định nghĩa, bạn hãy đọc các bài viết này và xác định rõ cách thức điều hướng làm việc thế nào trên website di động của bạn.

17. Đừng ngại thử thách những gì đã có


Thử thách những gì đã có

Thế giới web có hàng loạt các thư viện và hướng dẫn mẫu cực kỳ hữu ích. Bạn hãy học tập và tìm kiếm cảm hứng cho riêng mình, nhưng cũng đừng ngại đến với những điều mới mẻ hay thách thức. Các nguyên mẫu đã ra đời hầu hết đều rất tuyệt, nhưng việc đẩy xa hơn ranh giới sáng tạo mới là thứ khiến chúng ta tiến lên, nhất là trong hoàn cảnh thế giới di động đang phát triển như vũ bão ngày nay.

18. Không phải mọi trang/ màn hình đều cần có wirefram/ hoặc thiết kế


Thiết kế chọn lọc những trang cần thiết


Người thiết kế web thường rất dễ sập vào cái bẫy ‘mọi thứ đều cần định nghĩa’. Trên thực thế, các trang xem cho mọi cỡ màn hình hoặc định hướng chưa hẳn trang nào cũng cần wireframe (bộ khung) hoặc thiết kế. Bạn hãy sử dụng phép phân tích như một người chỉ đường để xác định xem đâu mới là điểm nên tập trung, làm việc chặt chẽ nhóm phát triển và thiết kế, rồi sau đó tìm ra phương thức lẫn mức độ định nghĩa làm việc tối ưu cho bạn và dự án của mình. Tuy nhiên, cũng đừng bỏ qua việc thực hiện wireframe cho mỗi cỡ màn hình và định hướng chính.

19. Làm việc cộng tác và chặt chẽ qua các quy tắc


Quy tắc rõ ràng và chặt chẽ

Để đạt được kết quả cuối cùng tối ưu nhất khi thực hiện thiết kế di động nói riêng, và thiết kế nói chung, bất kỳ đội nhóm nào cũng phải cần đế sự cộng tắc chặt chẽ qua nhiều quy tắc khác nhau. Rất nhiều vấn đề sẽ chẳng hề xuất hiện cho đến khi wireframe tiến vào giai đoạn thiết kế, thiết kế bước tới giai đoạn xây dựng – do đó, khi làm việc với đội nhóm của mình càng nhiều, bạn càng phải sớm nhận biết và tìm ra giải pháp giải quyết.

20. Thực hiện nguyên mẫu, thử nghiệm, và lặp lại



Thử nghiệm tốt

Điều quan trọng nhất khi thực hiện thiết kế cho thiết bị di động chính là cho ra đời bản nguyên mẫu và lặp lại. Bạn cần cộng tác chặt chẽ với nhóm phát triển để xem xét xem đâu mới là thứ thực sự làm việc khi được xây dựng nên, đồng thời nhận biết được các tình huống cần đưa ra nhiều chi tiết thiết kế hơn. Sau đó bắt đầu thử nghiệm cùng với nhóm người dùng mình nhắm tới và tiếp nhận ý kiến phản hồi thực tế. Đó chính là vấn đề cuối cùng cần xử lý trước khi debut sản phẩm mobile website cộp dấu tên bạn!