用React刻自己的投资Dashboard Day2 - 网站Wireframe设计

要实际动手制作wireframe之前，先来规划一下图表的内容有什麽，一般来说，投资相关的数据会是时间序列的数据，也就是说会一段时间间隔就会有一笔新的数据，所以通常X轴会放时间，Y轴则是放入要观察的数据值区间，举下图为例，这张图是美国的消费者物价指数：

资料来源: FRED

除了图表之外，我还希望能够在旁边加上图表的观察重点或是使用说明，甚至是可以让使用者自己调整图表的时间区间，去放大缩小图表，举例如下图：

如上述的图表可能会有很多个，所以这次打算将它做成一个小网站，加上分类及筛选功能方便使用。

Mobile first设计原则

由於这次做成RWD网站，我的习惯是采用mobile first设计原则，从小尺寸的内容开始设计，到大的尺寸的时候再多加一些内容或是更改排版，如下图，从最左边手机到右边的电脑，能放的内容逐渐变多。

接下来就要来画wireframe啦，这次专案比较简单一些，因此选择用Figma这个线上工具来画，它的优点是免费功能已足以一般设计使用，使用起来还蛮直觉的，还可以建立元件并设计元件在不同尺寸的呈现方式。

经过一番时间，很快地wireframe就产出来啦，我选择比较常见的576px与992px为切点，去区分不同宽度的排版，另外用这两个切点去设计，之後也可以直接套用Bootstrap去写程序，会很快速。

这篇完成了投资Dashboard的wireframe，接下来就可以进入开发阶段罗，下一篇就会开始用React架设整个专案，蛮期待的。