iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

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

用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

  • 分享至 

  • xImage
  •  
tags: 2021鐵人賽 React

2.0首頁想加上各國股市的最新盤勢資訊,畢竟這些資料是投資人每天都會需要看一下的,所以放在首頁會是不錯的選擇。

首頁會放的資訊包含:

  • 台股加權指數昨日收盤及三大法人買賣超資訊
  • 美國股市指數昨日收盤資訊,包含:道瓊、NASDAQ、標普、費半...等等
  • 國際股市指數,主要列出各國主要股市指數昨日收盤資訊

2.0版Wireframe

跟1.0版一樣,也是做了三個不同尺寸的設計稿,主要差別在於同一個水平位置顯示的資料數量多寡,在大尺寸的部份則是可以多提供一些資訊。

細部請看下面大圖:

  • width smaller than 576px

  • width between 576px and 992px

  • width bigger than 992px

小結

今天製作這幾個畫面也是花了不少時間,還好有Figma這個工具,免費但是非常好用,還是要再幫它推薦一下。
接下來就要開始實作拉,會串接免費的股市資源API,繼續製作更多資訊。


上一篇
用React刻自己的投資Dashboard Day18 - 選單列active style功能
下一篇
用React刻自己的投資Dashboard Day20 - 首頁功能切板
系列文
用React刻自己的投資Dashboard30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言