创建博物馆网站 UI/UX + 演示🍿

普拉多博物馆完整演示

介绍

概念

实现

结束

普拉多博物馆完整演示

普拉多博物馆完整演示

Kerthin / pradoMuseum-templateSait

普拉多博物馆所在地，用于观赏绘画。

描述

该模板是一个用于浏览著名普拉多博物馆中伟大艺术家作品的网站。您还可以找到有关画作和艺术家本人的信息。

• 启动应用程序
  • 下载存储库；
  • 使用命令行或终端登录下载的存储库；
  • 输入命令行‘npm run start’或者‘serve-s build’，进入终端指定的地址。

• 请注意，该项目是使用 CREATE REACT APP 制作的。

• 演示

使用技术。

创建该项目使用了以下技术：

软件平台

图书馆

包管理器

---

文档

该项目的存储库分为几个部分：

• src- 此存储库用于存放项目开发所需的文件。所有项目文件均从此存储库编译而成；
• docs- 一个存储所有编译代码和所有媒体的存储库……

在 GitHub 上查看

介绍

两年前，我在 Behance 上闲逛时，看到了一个很有意思的作品，是为西班牙普拉多博物馆的网站重新设计的，名字叫做《带有虚拟现实体验的普拉多博物馆网站》。

当然，我并不想实现整个项目，因为我对在 Behance 上看到的作品的 UI 和 UX 逻辑不太理解。

此外，我只是想创建一个小型的单页项目。考虑到这应该是我的第一个 React 项目，所以我想立即指出，这里的代码非常糟糕，而且这篇文章也算不上任何教程。而且我懒得把代码拆分成组件，所以它全部写在一个文件中。我不会教任何人任何东西，只是想告诉你我是如何实现这个项目的。

概念

这个想法很简单，我想实现一个单页网站，我可以使用菜单选择我感兴趣的艺术家并查看他的作品以及有关他的信息，这些信息将显示在主页和特殊的侧面菜单中。

所有信息都存储在一个特殊的对象中，您可以通过此链接查看。该对象本身包含三个阶段。

国家 👉 艺术家 👉 他的画作
我们的阵列中 有7个国家，艺术家总数为27。

2 menus网站上有。One menu是主页面，它按国家/地区展示艺术家。second menu是辅助页面，它显示所选艺术家的信息（菜单位于侧面，您可以通过clicking on the portrait主屏幕上的艺术家图标打开它）。

实现

01. 主页

首先，我决定创建一个主页来显示有关艺术家的简要信息。

1.在最顶部我有一个打开菜单的按钮。

2.中间是关于艺术家的简要信息（years of life，name，country of birth）。

3.下方是所选艺术家的肖像，位于圆形区块中。当您click点击该图标时，会出现一个侧边菜单open，其中会展示艺术家的画作以及有关艺术家的更多详细信息（early life，synopsis）。

4.最底部是有关图片的信息，该信息显示在主屏幕上（name、year of creation、artist's name）。

02. 艺术家菜单

该菜单计划全屏显示。因此，在输出信息之前，我需要先设计出打开该菜单的动画。

1. 动画
打开菜单的动画应该看起来像是打开时将主页向下移动。具体实现如下：

汉堡菜单本身采用两条形成十字的闭合线的形式。

2. 艺术家
现在是时候绘制艺术家列表了。为此，我们需要将艺术家的信息分解成各个部分，并以列的形式显示，这些列按国家/地区类别划分。

// ----- Picture Components
function PictureInfo(props) {
  return(
    <div className="picture__textWrap">
      <div className="picture__text">
        <h1 className="picture__date">{props.dateWritten}</h1>
        <p className="picture__name">{props.name}</p>
      </div>
    </div>
  );
}

function PictureImg(props) {
  return(
    <div className="picture__imgWrap">
      <div className="picture__img">
        <div className={`picture__imgBg ${props.imgBook}`}></div>
      </div>
    </div>
  );
}

function Picture(props) {
  return(
    <div className="picture">
      <div className="picture__info">
        <PictureInfo dateWritten={props.dateWritten} name={props.name} />
        <PictureImg imgBook={props.imgBook} />
      </div>
    </div>
  );
}

function Pictures(props) {
  return (
    <React.Fragment>
      {Object.entries(props.pictures || {}).map(([ i, j ]) => (
        <Picture key={i} name={i} {...j} />
      ))}
    </React.Fragment>
  );
}
// ----- END Picture Components


// ----- Painter Components
function PainterInfo(props) {
  return(
    <div className="painter__textWrap">
      <div className="painter__text">
        <h1 className="painter__name">{props.name}</h1>
        <p className="painter__years">{props.born} - {props.died}</p>
      </div>
    </div>
  );
}

function PainterImg(props) {
  return(
    <div className="painter__imgWrap">
      <div className="painter__img">
        <div className={`painter__imgBg ${props.class}`}></div>
      </div>
    </div>
  );
}

function Painter(props) {
  return(
    <a href="#" onClick={() => props.onClickLink(props)}>
      <div className={`painter ${props.active ? 'active' : ''}`} onClick={() => props.onClick(props)}>
        <div className="painter__info">
          <PainterInfo name={props.name} born={props.born} died={props.died} />
          <PainterImg class={props.class} />
        </div>
      </div>
    </a>
  );
}
// ----- END Painter Components


// ----- Сountries Components
function CountryTitle(props) {
  return(
    <div className="countryTitle">
      <h2 className="countryTitle__name">{props.name}</h2>
    </div>
  );
}
function Сountries(props) {
  return(
    <div className="swiper-slide">
      <CountryTitle name={props.name} />
      {Object.entries(props.painters).map(([ i, j ]) => (
        <Painter key={i} name={i} {...j} onClickLink={props.onSelectLink} onClick={props.onSelectWriter} active={i === props.selected} />
      ))}
    </div>
  );
}
// ----- END Сountries Components

现在我们需要将所有内容添加到我们的菜单中。

但这里我们遇到了一个问题。事实上，我们的数组中有 7 个国家/地区，而菜单中最多只能显示 4 个国家/地区。为此，我们需要在菜单中实现滑块功能，以便可以滚动浏览国家/地区列表。

为此，我决定使用Swiper.jsCSS 。使用和可以简单地实现这一点FLEX，但我希望滑块可以通过手势滚动。

事情是这样的：

3. 选择艺术家
最后一件事是实现艺术家选择功能。为此，我们需要在click选择所需艺术家时，将对象中存储的艺术家信息传输到侧边菜单，在那里显示该艺术家的画作和更多详细信息。重要的是，画作数量应与对象中规定的数量一致。在选择所需艺术家时，也需要menu closes独立地选择艺术家。

03. 侧边菜单

剩下的就是实现侧边菜单。它将以三列的形式呈现。first第一列显示艺术家的简介，第二列second显示作品，third第三列显示艺术家生平的更多详细信息。

现在您需要在这些列中显示有关在顶部菜单中选择的艺术家的信息。

结束

好了，就这样吧。我提前为提交的信息弄得乱七八糟表示歉意。不过，正如我之前所写，我并没有打算在这篇文章里教任何人任何东西。在这篇文章里，我只是想展示一下我以前的作品，并没有什么特别之处。

普拉多博物馆完整演示

Kerthin / pradoMuseum-templateSait

普拉多博物馆所在地，用于观赏绘画。

描述

该模板是一个用于浏览著名普拉多博物馆中伟大艺术家作品的网站。您还可以找到有关画作和艺术家本人的信息。

• 启动应用程序
  • 下载存储库；
  • 使用命令行或终端登录下载的存储库；
  • 输入命令行‘npm run start’或者‘serve-s build’，进入终端指定的地址。

• 请注意，该项目是使用 CREATE REACT APP 制作的。

• 演示

使用技术。

创建该项目使用了以下技术：

软件平台

图书馆

包管理器

---

文档

该项目的存储库分为几个部分：

• src- 此存储库用于存放项目开发所需的文件。所有项目文件均从此存储库编译而成；
• docs- 一个存储所有编译代码和所有媒体的存储库……

在 GitHub 上查看

感谢大家的关注。希望你们每个人都有自己喜欢的艺术家，并能无限欣赏他们的作品。

回头见。