iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

30 天重新設計印度氣象局官網首頁系列 第 12

Day 12 wireframe 大城市綜覽 + 天氣預報( side project 配對單有意者請進)

今天開了配對單給大家做 side project,有興趣可以來找找夥伴,前後端 / UIUX 皆可~

side project 配對單連結:
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing

昨天的半完成線稿

今天要繼續把黑白線稿完成,昨天已經完成了互動式地圖和預報資訊,現在要來解決底下大城市天氣預覽、天氣預報新聞區、天氣系統查詢區三個地方。

雖然實際沒有去做太多的用戶研究,但在印度閃電頻率似乎非常的重要(在多處看到),所以我後來也加了進去。

大城市天氣綜覽

大城市天氣資訊主要是解決兩個問題:
第一、可以迅速的了然各大城市目前的天氣狀況
第二、法國氣象局的客製化城市設計我很喜歡,但因為導覽列已經有點滿了,所以我決定把它合併。使用者自由的添加城市,新城市便會覆蓋前一個預設城市。

做設計就是各種不同的嘗試XD
我嘗試了幾種不同的設計,後來我選擇了最右邊的。我只留下了風速、降雨機率、天氣 icon 、與溫度,盡量保持簡潔。

模擬不同長度的縣市名稱

再來,我又考慮到不同長度的縣市名稱。
印度有許多非常長的縣市名稱,那這樣子網頁版該怎麼設計會比較好呢?

嘗試了一些不同的方法,想要盡量讓畫面看起來是整齊一致。

我發現最長的地名大概是 2-3 行,但兩行為大宗,所以我會給他一個 min-height ,讓他的標題可以對齊,這樣子不管標題是幾行,都可以盡量保持一致。

看起來好多了~~~

天氣預報新聞區

天氣預報區,我想要把最近的天氣預報放在這裡,一進氣象局官網能夠看到最近 / 未來1週的預報,整體體驗會相當的不錯(至少我會期待看到)。

旁邊是3到4則最近的新聞,或是政府的宣導事項。

天氣系統查詢區

根據之前在資訊架構面做的4個分類,選擇的相對應的icon,不過這裡還沒完成XDD

我使用了之前收集的Icon,別人做好的東西就是好好用

今天得去忙接案的事情,明天再加上footer好好的弄完。
先這樣,晚安嗷嗷~~


上一篇
Day 11 wireframe 黑白線稿設計 ( topbar + 地圖)
下一篇
Day 13 wireframe 黑白線稿 ( 互動式地圖設計 + footer )
系列文
30 天重新設計印度氣象局官網首頁22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言