iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

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

用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

  • 分享至 

  • xImage
  •  

有了總體經濟的圖表之後,接下來就要來製作各國股市的資訊站,筆者最常看的就是台股的資訊,其次則是美股、英股、歐股、日股、匯率、利率...等等,想做的很多,剩下15篇的空間可能寫不完,不過沒關係,就先從wireframe開始吧!

投資Dashboard 2.0 wireframe

這邊只先畫了還沒點進去各個頁面的狀況,所以畫面都還是以之前總經圖表,不過上方導覽列的部分加上一些按鈕,是各種股市資訊的入口,下圖可能有點小,再下面一些有各尺寸分別的圖會比較清楚。

  • 全部尺寸

  • 小尺寸(右側三條線點進去會展開一排按鈕)

  • 中尺寸(上方導覽列顯示部分按鈕,隱藏部分按鈕在右側三條線按鈕內)

  • 大尺寸(將所有按鈕顯示在導覽列上)

小結:2.0版實作順序

接下來的順序,會先將導覽列的功能修改成可擴充按鈕的格式,並增加路由功能,不同路由會導引到不同頁面(不同的資訊分類),再來依序寫台股技術面、籌碼面、基本面,再往右側攻破一個個按鈕。想起來真是充滿挑戰的感覺呢,就繼續畫下去吧!


上一篇
用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題
下一篇
用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由
系列文
用React刻自己的投資Dashboard30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言