1. Thiết kế cho điện thoại di động

Cách đây không lâu, các nhà thiết kế đã sang trọng khi thiết kế chủ yếu cho các màn hình máy tính để bàn sắc màu rực rỡ. Những điều này đã cung cấp một khung vẽ rộng lớn cho phép các nhà thiết kế có nhiều không gian để làm việc. Đôi khi, có lẽ là một chút quá nhiều. Những hạn chế buộc phải có một cách tiếp cận thực tế hơn, giảm bớt sự lộn xộn về mặt hình ảnh và sự tô điểm vô nghĩa.

Điểm bắt đầu của bất kỳ thiết kế web nào nên xem xét màn hình nhỏ nhất mà một trang web có thể được hiển thị. Làm việc trong giới hạn của màn hình nhỏ hơn sẽ tạo ra trải nghiệm nhất quán trên các thiết bị.

Chế độ xem trước đa thiết bị của Webflow cho biết thiết kế sẽ trông như thế nào trên các thiết bị khác nhau và cho phép bạn thực hiện các điều chỉnh trong quá trình thực hiện.

Trước khi bạn tạo khung dây cho thiết kế di động, hãy đảm bảo rằng bạn:

• Biên soạn nội dung cần thiết và xác định cách tổ chức
• Tạo tiêu đề cho mỗi phần
• Xác định lời gọi hành động và vị trí của chúng
• Lập kế hoạch loại phần tử tương tác bạn sẽ sử dụng

Và lập kế hoạch làm thế nào để tất cả các yếu tố này chảy trong một cột đơn thiết kế.

2. Sử dụng các hình ảnh động và hành vi tương tác trong cử chỉ

Di động có nghĩa là không gian màn hình nhỏ hơn, điều quan trọng là nội dung và các yếu tố tương tác phải nổi bật và truyền đạt rõ ràng mục đích của chúng.

Tương tác vi mô là những đợt bùng nổ nhỏ về khả năng sử dụng truyền cảm hứng cho ai đó thực hiện hành động với phản hồi ngay lập tức. Nút "thích" là một tương tác vi mô phổ biến được sử dụng cho mọi thứ, từ ảnh mèo dễ thương trên Instagram đến chia sẻ và bình luận trên Facebook.

Chúng tôi đánh dấu thích hoặc trái tim đó mà không cần nghĩ đến việc công khai sự chấp thuận của chúng tôi. Chúng tôi vuốt sang trái hoặc sang phải trên các ứng dụng hẹn hò và ngay lập tức được thưởng bằng tin tức rằng ai đó cũng thích chúng tôi. Tương tác vi mô làm cho việc tương tác trở nên nhanh chóng và trực quan - chúng là thời điểm xác định trên nhiều trang web và ứng dụng.

Tương tác dựa trên cuộn giống như tương tác vi mô: chúng thêm chuyển động vào màn hình phẳng mà chúng ta cầm trên tay. Chúng thêm các yếu tố động vào thiết kế và hoạt động như hướng dẫn, thu hút sự chú ý của người dùng, dẫn họ đến nơi bạn muốn, như biểu mẫu đăng ký.

3. Giữ cho nó đơn giản

Khi thiết kế cho thiết bị di động, hãy tách mọi thứ xuống các thành phần cơ bản của nó. Nó không phải là về văn bản nhàm chán, không có nội dung trôi nổi trong một khoảng trống - nhưng nếu bạn có thể làm cho nó hoạt động, sẽ có thêm sức mạnh cho bạn. Đó là về việc tinh chỉnh các yếu tố để chỉ những gì quan trọng còn lại.

Điều này có nghĩa là loại bỏ các mục không cần thiết như đồ họa và hoạt ảnh bận rộn không bổ sung cho trải nghiệm người dùng. Bóng đổ cực độ và các đồ họa mô phỏng không gian ba chiều khác được gạt sang một bên để có một thiết kế thực tế hơn.

Thay vào đó, hãy sử dụng màu sắc thu hút sự chú ý và không gian âm rộng rãi. Kết hợp với kiểu chữ đơn giản, điều này có thể tạo ra một phương pháp thiết kế dễ điều hướng và tải nhanh.

4. Giữ sự chú ý của họ với thời gian tải trang nhanh chóng

Máy tính để bàn có bộ vi xử lý nhanh hơn, sức mạnh tính toán cao hơn và không cần phải nhồi nhét nhiều megabyte vào các kết nối 3G hẹp. Chúng có thể chứa các kích thước tệp lớn hơn như các video clip dài. Bạn không muốn ai đó chỉ vào trang của bạn bị sa lầy bởi các tệp không được tối ưu hóa cho thiết bị di động.

Khi bạn chuẩn bị hình ảnh cho một thiết kế, hãy đảm bảo:

Advertisement

• Sử dụng hình ảnh có bố cục tốt, gọn gàng, có ý nghĩa
• Tối ưu hóa tất cả hình ảnh bằng phần mềm chỉnh sửa ảnh, như Photoshop
• Sử dụng hình ảnh tỷ lệ có kích thước chính xác cho bố cục
• Sử dụng video nền chất lượng cao nhưng chỉ khi cần thiết - hầu hết các thiết bị di động thậm chí sẽ không hiển thị những video này

5. Tạo nội dung của bạn phù hợp với thiết bị di động

Thiết bị di động đã thay đổi cách chúng ta trải nghiệm web. Thay vì ngồi ở một nơi yên tĩnh, đắm mình trong ánh sáng rực rỡ của màn hình máy tính để bàn, chúng tôi trải nghiệm web trên màn hình nhỏ trên chuyến tàu đi làm, xếp hàng tại cửa hàng tạp hóa, trong phòng chờ tại phòng khám của bác sĩ - ở mọi nơi và mọi nơi chúng tôi có một cửa sổ thời gian nhanh chóng.

Nội dung cần được chia thành các phần nhỏ để dễ tiêu hóa trong thời gian tương tác ngắn. Cũng như các yếu tố thiết kế trực quan cần được tinh chỉnh để chỉ những gì cần thiết, nội dung cũng vậy. Điều này có nghĩa là tạo ra các câu và đoạn văn ngắn gọn, trực tiếp và rõ ràng.

Tổ chức nội dung thậm chí còn quan trọng hơn trên thiết bị di động. Mọi phần sẽ liền mạch với phần tiếp theo. Không nên thay đổi nội dung chói tai. Mọi thứ sẽ có ý nghĩa khi ai đó cuộn qua nội dung. Một ý tưởng cần phải trôi chảy một cách hợp lý đến ý tưởng tiếp theo.

Lời kêu gọi hành động không phải là một lời thì thầm - chúng nên chỉ huy sự chú ý. Để viết các lời kêu gọi hành động hấp dẫn hơn:

• Cho người đọc một lý do để hành động
• Thu hút cảm xúc của họ
• Nhấn mạnh tầm quan trọng của sự kịp thời
• Truyền đạt một cách sáng tạo tính cách của thương hiệu

6. Sử dụng Pop-up bật lên đúng cách

Chúng tôi biết. Cửa sổ bật lên có một đoạn rap tệ. Nhưng giống như Clippy của Microsoft, họ có những ý định tốt nhất.

Cửa sổ bật lên là một công cụ quan trọng để chuyển đổi. Họ cần làm cho vẻ ngoài của mình trở nên hữu ích, thay vì gây mất tập trung. Một cửa sổ bật lên cần không chỉ là một lời nhắc chung chung - nó phải phù hợp với tính cách thương hiệu của bạn và truyền cảm hứng cho một hành động cụ thể sẽ thu hút người đọc một cái gì đó. Ngay cả khi nó chỉ là nội dung miễn phí hơn trong tương lai.

Cửa sổ bật lên cần được gắn với nội dung cụ thể. Thay vì hiển thị bừa bãi ở đầu mỗi trang, hãy dệt chúng vào kết cấu nội dung. Một cửa sổ bật lên phải có ý nghĩa trong bối cảnh của những gì đang được trình bày.

Một người dùng có thể đang xem qua các ngày lưu diễn cho một ban nhạc. Một cửa sổ bật lên yêu cầu họ tham gia một danh sách email về ngày tham quan là phù hợp. Chuyển đổi xảy ra khi cửa sổ bật lên hữu ích và phù hợp với ngữ cảnh. Nội dung phải cung cấp lý do để tìm hiểu thêm và thực hiện hành động.

7. Sử dụng form cho multi-step

Biểu mẫu có thể tốn thời gian và tẻ nhạt. Có bao nhiêu người trong chúng ta đã điền vào mọi trường và nhấn gửi chỉ để nhận được dòng chữ màu đỏ tức giận thông báo cho bạn có điều gì đó không ổn? Với một loạt các trường nội dung, thật dễ dàng để bỏ lỡ một cái gì đó.

Sự phát triển của các biểu mẫu nhiều bước đơn giản hóa quá trình nhập thông tin. Có một luồng logic, trong đó đầu vào của một loại thông tin sẽ chuyển sang loại thông tin tiếp theo. Biểu mẫu nhiều bước đặc biệt tuyệt vời cho các thiết bị di động. Tính năng này cho phép người dùng thiết lập tài khoản, xin việc hoặc điền vào hồ sơ hẹn hò một cách dễ dàng.

Thiết kế di động hướng đến sự đơn giản

Thiết kế di động đã thay đổi các tiêu chuẩn về khả năng sử dụng. Những gì đã từng là tốt cho máy tính để bàn bây giờ được coi là cồng kềnh. Thiết kế di động đã loại bỏ những trang trí không cần thiết và tìm ra nhiều tuyến đường trực tiếp hơn để hướng dẫn người dùng thông qua nội dung. Chúng tôi có thể xem một số ràng buộc về cuộc gọi là cơ hội để cải thiện cách mọi người trải nghiệm web.