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. Do đó, các trang web và ứng dụng di động luôn được yêu cầu để tạo báo cáo. Người dùng sẽ kiểm soát mọi thứ từ các điều kiện hiện tại bên ngoài nhà của họ để dự đoán vị trí 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. 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à biểu tượng vui nhộn. Đôi khi một hoặc hai bất ngờ bất ngờ có thể có tác động tích cực.
Hãy xem xét một số ví dụ về giao diện người dùng thời tiết phù hợp với thiết kế cho một ngày nắng.
Thời gian xuyên biên giới.
Giao diện người dùng dựa trên bản đồ dường như là một bổ sung tự nhiên cho dữ liệu thời tiết. Tất cả bạn cần là tất cả mọi thứ trong một căn phòng gọn gàng và ngăn nắp. Nhưng mảnh vỡ này phá vỡ với truyền thống. Animate các kịch bản thời tiết khác nhau vượt ra ngoài bản đồ nhỏ này. Mưa, tuyết và tia nắng mặt trời vượt ra ngoài biên giới của thẻ.
Kiểm tra bản đồ thời tiế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 nổi tiếng và tròn cùng với độ tương phản màu cao giúp dễ đọc. Các hiệu ứng cuộn đi kèm cũng thu hút sự chú ý của người xem.
Xem thiết kế cho ứng dụng Colin Espinas Pen Simple Weather
Biểu tượng trừu tượng
Dưới đây là một nhóm các biểu tượng CSS3 khác biệt đáng kể 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 mang lại cá tính. Mặc dù có phần lớn hơn trong ví dụ này, các kiểu cũng phù hợp với 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 biểu tượng thời tiết mùa xuân hoạt hình của Akhil Sai Ram (CSS thuần túy)
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, chúng là các vectơ và có thể được thu nhỏ theo bất kỳ kích thước nào. Chúng là một bổ sung tốt cho bất kỳ việc sử dụng thời tiết.
Kiểm tra mùa xuân một số biểu tượng thời tiết được hát từ Nat
Thời tiết địa phương của bạn theo yêu cầu
Dịch vụ định vị 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 trích này là một ví dụ tuyệt vời vì nó ghi lại 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 chương trình biểu diễn địa phương của 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 thùng chứa bản đồ và sử dụng các 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 để cập nhật cho họ.
Xem Bản đồ thời tiết mã hóa Aviator Pen
Bây giờ và hơn thế nữa
Dưới đây là một tiện ích hấp dẫn nắm bắt vị trí của bạn và cho bạn thấy những gì mong đợi cho đến nửa đêm ngày hôm sau. Bạn có thể tìm thấy nhiệt độ hiện tại và dữ liệu liên quan khác ngay từ đầu. Cuộn xuống và xem mọi thứ trông như thế nào trong ba mươi giờ. Các nền video đi kèm thực sự hoàn thành giao diệ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 trong thời tiết ngày 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 đến những ký ức đẹp (hay kinh dị). Bạn cũng có thể kết nối nó với API bất cứ lúc nào để có được một dự báo thực sự.
Bút thời tiết Super Mario của Visa ErreC
Tùy chỉnh trang web của bạn cho thời tiết
Hiển thị thời tiết trên trang web của bạn không khó về mặt kỹ thuật. Thiết kế một giao diện người dùng nổi bật (nhưng không phô trương) 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. Hoạt hình đặc biệt thú vị để sử dụng vì chúng thêm bối cảnh cho các loại thời tiết khác nhau. Nó cũng vui hơn một hình ảnh tĩnh.
Tìm kiếm nhiều phần hơn trong giao diện người dùng thời tiết? Đóng gói ô của bạn và truy cập bộ sưu tập CodePen của chúng tôi!
