iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

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

Day 9 Prototype 製作 - 資訊配置與確認 (Adobe XD)

縱覽

接下來,要使用軟體將之前畫的紙上原型實現成簡單線稿,可能會花個三天慢慢做。

prototype 軟體其實蠻多的,像是sketch/ figma,我會選擇 Adobe XD 的原因是整合做得非常好,可以自由的在 XD 裡面選取圖片,放到 Photoshop 裡面編輯亮度,他的整合平台 Adobe Cloud也非常的完整,使用的快捷鍵也是我很熟悉的,上手容易(我今年二月才學會)。

簡單拉完版大概就是長這樣,大家參考一下

topbar + nav

這部分我會選擇只留下搜尋框和一些基本資訊,把社群放到 footer ,warning 放在醒目的標題下方,會比他應是塞在 topbar 更合適一點。

兩個導覽列(重要的我放了但忘記截圖XD),另外一個使用 breadcrumb 把它收好。

timeline

即時天氣地圖可以自由地設定預測日期,所以我設計了一個時間軸,比起之前參考的法國氣象局會更直觀一點。

至於群眾揭露(Public observation),因為國家民情不同,依靠民眾舉報的重要性在印度也許十分高,我設想 user 對於這個功能只有兩種狀況,第一種是完全不會用到,第二種是使用急迫性較高(土石流或山洪)。

所以我希望他要很清晰地被看到,但又不會遮擋視線,會用一個小小的icon浮動式的放在網頁角落,讓人可以即時舉報。

思考了一下timeline的位置,放在下方不符合非本日的預報使用動線(確認地點 -> 確認日期 -> 查看細節),所以我會放在上方。

news

新聞試了幾個版本,最新預報重要性仍是勝過新聞連結,主要是因為連結還要多點進去,決定要放在左邊。

forecast

預報這裡做的處理比較多,因為很多繁複的資訊都放在裡面,所以我分別點進去研究了一下,並將它分類。

有四項屬於跟「雨量」有關的,兩項是跟「季風」有關係的,兩項跟「颱風」有關,剩下的是完全無關,甚至民眾也非常少用到的。

還有一點,我研究這些名字完全不能理解它在做什麼,除非一個個點進去。

考慮到頁面長度與視覺負荷,我會選擇設計四個 TAB ,讓 user 選擇他今天是要看哪一種的資訊,點進去之後會看到 description ,等到確認這一個系統裡面的使用方式是他需要的,最後再進入。

希望這樣子能夠減少一個一個的試錯。

footer

我只有列三欄,第一項是相關的網站,舉凡各區的網站或是比較大型的國家官方網站都放在這裡。

中間是4個產品,最右邊是聯絡方式、網站地圖、QA,底下是目標 user 極少極少用到的 LINK,像是資料庫登入登出,就全部塞在最底下。

今天喘喘氣,下篇講一下字體、版面、icon 相關的 style guide~


上一篇
Day 8 紙上原型 dirty prototype
下一篇
Day 10 Prototype 製作 - 版面、字體、間距、圖示設定小技巧分享
系列文
30 天重新設計印度氣象局官網首頁22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言