iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

用React刻自己的投資Dashboard系列 第 2

用React刻自己的投資Dashboard Day2 - 網站Wireframe設計

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架設整個專案,蠻期待的。


上一篇
用React刻自己的投資Dashboard Day1 - 前言
下一篇
用React刻自己的投資Dashboard Day3 - React專案初始架構
系列文
用React刻自己的投資Dashboard30

尚未有邦友留言

立即登入留言