疫情数据分析平台（二）：ui布局和展现

在前端中，有一个非常重要的前期工作：ui设计。一般公司企业开发中，ui设计由专业的ui设计师完成，再递交给前端开发工程师完成代码实现，但是该项目中我同时担任ui设计，需要对我们项目的平台进行一个可视化的设计。

在代码开发前，我必须设想ui的大致样式，随后再进行开发。市面上有很多可以用来设计ui的软件，包括adobe的Photoshop、adobe的xd等，这里使用adobe的xd进行设计，其优势在于简单易上手，无需多余的学习成本。

经过项目组讨论，决定该平台网站尽量直观和明显，于是希望在首页便承载疫情地图功能以及其他功能的入口，因此我设计了如下的设计稿：

首先大致确定功能，并将这些功能模块分布于网页中，顶部设计有导航栏，可以鼠标点击跳转不同功能模块。设计出大致的模块和样式后，便可以稍微细化，在本次细化中，主要是对功能模块承载的功能进行了详细设定：

给出例子进行展示，方便前端代码开发（我）理解，之后就照着这个模板进行微调。值得注意的是，在设计稿中，稿子宽度是1920，和现有常见电脑分辨率一致，在代码开发中，注意比例和排布可以减少在其他分辨率下排布混乱