Thời tiết là một phần lớn trong cuộc sống hàng ngày của chúng tôi. Vì vậy, nó luôn luôn cần thiết cho các trang web và ứng dụng di động để báo cáo. Người dùng sẽ muốn kiểm tra mọi thứ từ các điều kiện hiện tại bên ngoài nhà của họ đến dự báo về điểm nghỉ mát yêu thích của họ.
Một giao diện người dùng hấp dẫn có thể làm cho thời tiết dễ hiểu hơn và thậm chí là giải trí hơn một chút. Các nhà thiết kế đạt được điều này thông qua sự kết hợp của màu sắc, hình ảnh động và các biểu tượng vui nhộn. Đôi khi một bất ngờ bất ngờ hoặc hai cũng có thể có tác động tích cực.
Chúng ta hãy xem một số ví dụ về UI thời tiết phù hợp với thiết kế của một ngày nắng.
Thời gian ngoài biên giới
Giao diện người dùng dựa trên thẻ dường như phù hợp tự nhiên với dữ liệu thời tiết. Tất cả bạn cần là tất cả mọi thứ trong một không gian gọn gàng và có tổ chức. Nhưng mảnh vỡ này phá vỡ với truyền thống. Animate kịch bản thời tiết khác nhau vượt ra ngoài thẻ nhỏ. Mưa, tuyết và mặt trời nổ bên ngoài biên giới của thẻ.
Xem thẻ thời tiết bút hoạt hình của Steve Gardner
Chỉ đẹp
Điều làm cho giao diện thời tiết này hoạt động là sự đơn giản của nó. Việc sử dụng các hình dạng quen thuộc và tròn cùng với độ tương phản màu cao tạo điều kiện cho việc đọc. Ngoài ra, các hiệu ứng cuộn đi kèm chắc chắn sẽ thu hút sự chú ý của người xem.
Xem thiết kế của ứng dụng Pen Simple Weather của Colin Espinas
Biểu tượng trừu tượng
Dưới đây là một nhóm các biểu tượng CSS3 trông rõ ràng khác với hình ảnh thời tiết thông thường. Chúng là một chút trừu tượng, với hình ảnh động đơn giản mà thêm cá tính. Mặc dù có phần lớn hơn trong ví dụ này, các kiểu cũng cho vay các biểu tượng nhỏ. Họ cung cấp một cách để nổi bật mà không chiếm quá nhiều không gian.
Xem các biểu tượng thời tiết mùa xuân hoạt hình (CSS thuần) của Akhil Sai Ram
phong trào SVG
Bộ sưu tập các biểu tượng SVG hoạt hình này rất sắc nét. Các phong trào hoạt hình là trực quan và đáng chú ý, nhưng không quá mức. Thậm chí tốt hơn là chúng là các vectơ và có thể được thu nhỏ theo bất kỳ kích thước nào. Họ sẽ bổ sung tốt cho tất cả các ứng dụng thời tiết.
Nhìn vào cây bút bất kỳ biểu tượng thời tiết nào được tuyên thệ bởi Nat
Thời tiết địa phương của bạn theo yêu cầu
Các dịch vụ dựa trên vị trí là tuyệt vời để cung cấp thông tin có liên quan cho khách truy cập trang web của bạn. Đoạn này là một ví dụ tuyệt vời, vì nó phát hiện vị trí của bạn và hiển thị thời tiết hiện tại. Bản đồ Google trong nền cũng là một liên lạc tốt đẹp.
Xem Pen Show Thời tiết địa phương của Den McHenry
Sóng mềm
Đoạn trích này kết hợp các khía cạnh khác nhau của các ví dụ khác trong danh sách này. Nó dựa trên vị trí, có một hộp đựng giống như thẻ và sử dụng hình ảnh động đơn giản. Kết quả là một widget thời tiết khá tối thiểu, nhưng đáng chú ý. Đó là bằng chứng cho thấy bạn không cần quá nhiều người dùng với thiết kế quá nhiều để thông báo cho họ.
Xem Thẻ thời tiết mã hóa Aviator Pen
Bây giờ và sau đó
Dưới đây là một tiện ích hấp dẫn thay thế bạn và cho bạn thấy những gì mong đợi cho đến nửa đêm ngày hôm sau. Ngay từ đầu, bạn sẽ tìm thấy nhiệt độ hiện tại và các dữ liệu liên quan khác. Cuộn xuống và xem mọi thứ sẽ như thế nào trong ba giờ. Các nền video đi kèm thực sự làm cho cái nhìn.
Xem khả năng lưu chuyển của bút – CIT261 của họa sĩ họa sĩ Wapon
Đây là Mario với thời tiết hôm nay
Mặc dù giao diện người dùng thời tiết tuyệt vời này không chính xác, nhưng thật thú vị khi xem. Ngôi sao của chương trình không cần giới thiệu, và mặt trời giận dữ trên bầu trời mang lại những ký ức (hay kinh dị). Bạn cũng luôn có thể kết nối điều này với API để có được một dự báo thực sự.
Xem Pen Super Mario Weather từ ErreC
Trang phục cho thời tiết của bạn
Hiển thị thời tiết trên trang web của bạn không nhất thiết là khó khăn trong ý nghĩa kỹ thuật. Nhưng thiết kế một giao diện người dùng bắt mắt (trong khi vẫn kín đáo) là một thách thức thực sự.
Các ví dụ ở đây (với ngoại lệ có thể có của Mario) cung cấp một cách rõ ràng và độc đáo để hiển thị thông tin quan trọng. Sử dụng hoạt hình đặc biệt thú vị vì nó thêm bối cảnh cho các loại thời tiết khác nhau. Ngoài ra, nó còn vui hơn cả một hình ảnh tĩnh.
Tìm kiếm nhiều đoạn của UI thời tiết? Đóng gói ô của bạn và đi đến bộ sưu tập CodePen của chúng tôi!
