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

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

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

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

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

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

完成ui设计后，就可以进行代码的排布实现：

vue项目一大亮点便是其可以完成各种组件的封装，最后在最高层次的代码清晰明了，方便程序员开发和debug。借助element-ui，大致布局设计为：

<div class="home-box">
    <div class="header-box">
      <el-container class="header-box-container">
        <el-header></el-header>
      </el-container>
    </div>

    <div class="main-box">

      <el-container>
        <el-main class="el-main-map-box">
          <div class="map-area"></div>
        </el-main>
      </el-container>

      <el-divider></el-divider>

      <el-container>
        <el-main class="el-main-box">
         <div class="body-area"></div>
        </el-main>

      </el-container>

      <el-divider></el-divider>

      <el-container>
        <el-main class="el-main-box">
          <div class="body-area"></div>
        </el-main>

      </el-container>

      <el-divider></el-divider>

      <el-container>
        <el-main class="news-area">
          <div class="body-area"></div>
        </el-main>

      </el-container>
    </div>

    <div class="footer-box">
      <el-container>
        <el-footer>Footer</el-footer>
      </el-container>
    </div>

  </div>

可以看到，通过若干个elmain去限制内容区域，完成组件的编写后就可以将组件直接引入。