tags: 2021鐵人賽 React

投資Dashboard內容設計

要實際動手製作wireframe之前，先來規劃一下圖表的內容有什麼，一般來說，投資相關的數據會是時間序列的數據，也就是說會一段時間間隔就會有一筆新的數據，所以通常X軸會放時間，Y軸則是放入要觀察的數據值區間，舉下圖為例，這張圖是美國的消費者物價指數：

資料來源: FRED

除了圖表之外，我還希望能夠在旁邊加上圖表的觀察重點或是使用說明，甚至是可以讓使用者自己調整圖表的時間區間，去放大縮小圖表，舉例如下圖：

如上述的圖表可能會有很多個，所以這次打算將它做成一個小網站，加上分類及篩選功能方便使用。

Mobile first設計原則

由於這次做成RWD網站，我的習慣是採用mobile first設計原則，從小尺寸的內容開始設計，到大的尺寸的時候再多加一些內容或是更改排版，如下圖，從最左邊手機到右邊的電腦，能放的內容逐漸變多。

Figma - the collaborative design tool

接下來就要來畫wireframe啦，這次專案比較簡單一些，因此選擇用Figma這個線上工具來畫，它的優點是免費功能已足以一般設計使用，使用起來還蠻直覺的，還可以建立元件並設計元件在不同尺寸的呈現方式。

經過一番時間，很快地wireframe就產出來啦，我選擇比較常見的576px與992px為切點，去區分不同寬度的排版，另外用這兩個切點去設計，之後也可以直接套用Bootstrap去寫程式，會很快速。

小結

這篇完成了投資Dashboard的wireframe，接下來就可以進入開發階段囉，下一篇就會開始用React架設整個專案，蠻期待的。