Frontend Mentor 天气预报 App | 设计篇

A1exlindev大约 2 分钟

项目背景

基于已有的天气预报 API, 实现一个天气预报 App.

大致交互如下

仅有一个页面
具有响应式设计，大部分信息展示组件的形状基本保持一致。少量 (如搜索框) 有变更
下拉框里进行详细配置

详细功能点参考原站点open in new window.

下面我们对交互稿进行分析，规划实现方案。

总体布局和组件规划

整体布局比较简单，基本符合居中流式向下的布局。大致可以划分为以下几个部分

标题栏。包括 Logo 和设置下拉框
巨大标题
搜索框*
当前天气信息*
天气预报

标有 * 的组件在不同宽度的表现不同，需要进行一定的 CSS 设计。

细化一下，主要实现的组件树可以这样划分

App
- Header
  - Logo
  - SettingsDropdown
  - SettingsModal
- Main
  - GreetText
  - SearchBox
  - CurrentWeather
    - WeatherCard
    - CurrentMetrics
- Forecast
  - ForecastCard (x7)
- HourlyForecast
  - HourlyForecastCard (x12)

设计指定了色板，我们可以写进 tailwind.config 的 extend.colors 字段里方便复用.

const config: Config = {
  theme: {
    extend: {
      colors: {
        neutral: {
          "900": "hsl(243, 96%, 9%)",
          "800": "hsl(243, 27%, 20%)",
          "700": "hsl(243, 23%, 24%)",
          "600": "hsl(243, 23%, 30%)",
        }
      }
    }
  }
}

响应式实现

整体布局

宽屏下，主要信息栏目分为两栏，左侧为主要卡片和日预报，右侧放置小时预报。而移动设计中则为单栏布局。要实现这样的效果，我们可以结合使用 Tailwind CSS 的响应式设计类和 Flexbox 布局。

不妨设计这样的 DOM 结构

<Main className="flex flex-col lg:flex-row">
  <div className="flex-1 flex flex-col lg:mr-8">
  {/*             ^ 撑开容器 */}
    <CurrentWeather />
    <DailyForecast />
  </div>
  <div className="w-full lg:w-1/3">
    <HourlyForecast />
  </div>
</Main>

这里，Main 组件在小屏幕下为单列布局 (flex-col), 在大屏幕 (lg:) 下变为双列布局 (flex-row)。左侧的主要信息栏使用 flex-1 来撑开容器，并在大屏幕下添加右边距 (lg:mr-8) 以分隔两栏。右侧的小时预报栏在小屏幕下占满宽度 (w-full), 在大屏幕下占据三分之一宽度 (lg:w-1/3)。

这样就可以实现在不同屏幕尺寸下，布局自动调整为单栏或双栏，确保内容在各种设备上都能良好展示。

组件适配

这里有比较大布局变化的组件只有搜索框和天气卡片。同样，利用断点控制类名切换 flex 方向就可以轻易控制布局差异。

统一设计语言

设计稿已经指定了每一个控件的颜色。设计用中性白色和不同明度的灰色作为文字颜色，并选取了蓝紫色作为按钮的强调色。

比较容易忽略的细节是，不同尺寸的控件其实用到了三种不同尺寸的圆角。