在 React Studio 中设计响应式 Web 布局

rAc

144人浏览 · 2022-08-15 04:28:10

rAc · 2022-08-15 04:28:10 发布

现代网络必须适应各种屏幕尺寸。手机无处不在。很少有 Web 应用程序具有仅用于桌面的奢侈功能!但是使用 Photoshop 或 Sketch 等传统工具很难做出这样的响应式设计。

React Studio 具有强大的自动布局系统,具有即时设备预览功能,可用于创建灵活、响应迅速的用户界面。

本教程向您展示了您需要知道的一切。它与静态设计不同......但很容易,一旦你掌握了它!

欢迎!本教程将引导您了解React Studio中的一些最基本的布局功能,这是由Neonto创建的 Web 应用程序设计工具。您将了解关键线、覆盖、滚动流、“首屏”内容、排版样式以及许多其他适用于移动优先网页设计的有趣概念。

最终结果是一个单屏网站,如下所示:

布局演示(点击查看)

当您打开该链接时,请确保调整浏览器的大小,以便查看设计在不同尺寸下的表现。

如果您想查看已完成的教程项目,您可以在 React Studio 的项目模板中找到它(文件菜单 → “从模板新建”)。

重点是布局特性,所以这里没有涉及到很多关于 React Studio 的内容。例如,我们不会涉及导航、组件、高级交互、数据链接、脚本或 Sketch 导入器......但我们会不断致力于更多关于这些主题的内容等等。那么为什么不在 Medium 上关注我们或在 Twitter上关注我们,以确保您不会错过它?

我必须提到我们有一个相当棒的 Sketch 插件!您可以在 Sketch 中进行静态基线设计,然后在 React Studio 中将其转换为真实布局并导出为高质量的 React 代码:观看此视频

概述

布局演示屏幕只有少数元素,但它们有一些有趣的行为:

标题图片填满了小屏幕的宽度,但在大屏幕上留下了边距;
其余内容在一个列内,其边距适应屏幕大小;
文本输入字段(“姓名”和“电子邮件”)具有占位符文本,并根据材料设计指南进行样式设置;
电子邮件字段执行简单验证。如果您输入一些不是电子邮件地址的文本,它将以红色突出显示。

让我们从顶部开始逐步构建它。

在 React Studio 中,使用“Mobile-First Web App”设置启动一个新的空项目。您将看到一个项目地图,其中包含一个名为“开始”的屏幕:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27253%27%20height=%27206%27/%3e)

双击屏幕块打开它进行编辑。

标题图片

每个人都知道很酷的网页设计显示人们拿着智能手机,所以我们在这里也使用了这样的图片。您可以从这个链接(JPG, 916kB) 下载图像文件。 (顺便说一句,这张相当不错的照片是由 Neonto 的联合创始人兼营销负责人 Antti Sihlman 拍摄的!也许他应该是一名摄影师......?😋)

在React Studio中,点击工具栏中的_Import Image_按钮,找到下载的图片。当提示如何放置它时,选择“画一个盒子”。然后在画布内绘制一个区域。 (您绘制的区域实际上并不重要,因为我们接下来会更改对齐方式。)

您现在应该看到以下内容:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

让我们实现我们想要的布局。单击新图像将其选中,然后在 Inspector(右侧)中打开 Layout 选项卡。

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27366%27%20height=%27600%27/%3e)

左侧的屏幕截图显示了设置。物理尺寸、布局流程、对齐方式 — 这些都是我们可以用来制作布局的核心部分!

我们将对所有这些设置进行更改。其中大多数我们可以通过简单地在画布中拖动来改变视觉效果(例如,要调整元素的大小,只需抓住它的角并拖动)。但是,知道在需要时可以在哪里找到这些精确测量值是很有用的。

让我们从“对齐边缘”开始。我们希望这张图片固定在三个侧面:顶部、左侧和右侧。

因此,单击“右”旁边的复选框以启用它。然后为“顶部”和“左侧”偏移值输入一个零。

你现在应该看到这个:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

嗯,还是少了点什么。正如您在预览中看到的那样,图像的高度在所有设备尺寸上都是相同的。这使得内容被裁剪。

对于像背景图像这样的东西,这通常是你想要的。但在这种情况下,我们想显示完整的图像。实际上有三种不同的方法可以做到这一点,具体取决于您的设计要求:

**禁用裁剪。**如果你想在可用的布局框中显示完整的图像,你可以告诉 React Studio 不要裁剪图像。此设置可在 Element 选项卡中找到。
**进行特定于设备的覆盖。**如果您觉得其中一个屏幕上的图像尺寸需要更大,您可以简单地为该特定尺寸进行覆盖。 (为此,双击设备预览,然后调整图像大小。它将在图像的大小属性上创建一个覆盖。)
设置图像以保持其内容纵横比。 有时您知道要显示整个图像,并相应地调整布局。

对于这个演示,我们将选择最后一个选项。在 Layout 选项卡中,单击“始终保持内容纵横比”复选框。您将看到设备预览更新以显示完整图像。

标题图像边距的布局覆盖

好的,现在我们有完整的图像显示。但它在最大的设备尺寸上非常大。如何添加我们在完成版本中的边距?

双击设备预览中的最大屏幕尺寸(如果此视图被隐藏,请转到查看>显示设备预览)。这会将您带入覆盖模式。它由编辑区域中的深绿色背景颜色指示。

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

选择图像并打开 Layout 选项卡。看到左右偏移字段旁边的那些“覆盖”按钮了吗?这就是我们接下来要使用的。

单击左对齐的“覆盖”按钮,然后选择“设置覆盖”。现在按下按钮,表示在此屏幕尺寸下此设置有覆盖。如果再次单击该按钮,您将找到清除覆盖的选项,以及具有活动覆盖的所有格式的列表:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27394%27%20height=%27145%27/%3e)

对右对齐执行相同的操作。

现在我们必须覆盖,但值仍然为零。要更改边距,您可以在编辑区域中直观地拖动元素的边缘,或者在偏移字段中输入特定的数值。 (对了,您也可以通过点击数字字段并用鼠标向左或向右拖动来输入值 — 试试吧!)

对于已发布的演示,偏移值设置为左侧 +50,右侧 -50:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

在进行更多编辑之前,请返回 基本格式:双击设备预览中的第一个屏幕尺寸。 (如果我们不返回基本格式,我们以后可能会意外地创建覆盖。)

基本格式实际上是一个项目范围的设置:如果要更改它,请单击项目地图中的_应用程序设置_块...但是对于大多数移动友好的网络应用程序,我们建议将基本格式保持为最小的设备大小。 (这就是“移动优先”设计的全部意义:首先考虑最受限制的用户体验,然后再扩展。)

可滚动的内容和元素

接下来我们需要创建内容列 — 但首先,让我们修复一些有关布局的问题。

当我们导入图像时,它被放置在Foreground group中。你可以在 React Studio 屏幕底部的 Elements 列表中看到它。该组中的元素固定在屏幕上的其他内容之上。它非常适合导航页脚之类的东西,但在这种情况下,我们希望页眉图像与内容一起滚动。

为了使其可滚动,我们只需将其放入 Scroll Flow 组。在 Elements 列表中,单击图像元素的名称(在“Foreground”组标题下方的行中),然后将其拖到“Scroll Flow”标题下。而已。图像现在是可滚动内容的一部分。

接下来,让我们添加内容元素。我们先把碎片扔进去,然后再修复布局!所以不要担心事情一时看起来不对劲。

要创建新元素,请从元素调色板拖放到编辑区域的右侧。当您将一个元素拖放到屏幕上时,默认情况下它会进入 Scroll Flow 组。 (如果您希望它进入前景,请在拖动时按住 Alt 键。)

从调色板中,抓取以下元素并将它们扔到屏幕中:

扩展文本块
透明占位符图像(圆形“N”标志)
文本字段
另一个文本字段
另一个扩展文本块

您现在将看到以下内容:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27549%27%20height=%27600%27/%3e)

好的,我们需要修复内容。对于两个文本块,输入任何文本(双击文本块进行编辑)。发布的演示使用了一些“Lorem ipsum”占位符文本 — 你可以从那里复制。

对于第一个文本块,将其设置为标题样式。选择文本元素,然后在_元素_选项卡的_文本设置_下,选择样式。

然后让我们对文本字段进行一些样式设置。选择第一个字段并输入占位符文本:“您的姓名”(在 Element 选项卡中)。还启用复选框“使用 UI 框架样式”。

选择第二个文本字段并选择以下设置:

占位符文本:“您的电子邮件”
字段类型:“电子邮件地址”
“使用 UI 框架样式”复选框已启用

通过将字段类型设置为电子邮件并启用 UI 框架样式,我们可以获得很好的验证行为,如果输入不是有效的电子邮件,该字段将获得红色突出显示。 (默认的 UI 框架是MUI,但我们很快就会提供插件,让您可以将其换成其他东西!)

您还可以选择所有元素(在编辑区域中拖动选择)并将它们向右移动,以使布局看起来更好一些。

这是您现在应该拥有的:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27283%27%20height=%27406%27/%3e)

注意到屏幕底部的溢出了吗?紫色线称为折叠。它向您显示最初可见的屏幕区域在哪里结束。 “首屏”的内容需要用户滚动才能看到。 (这通常是设计中的一个重要问题,例如,如果您有一个“号召性用语”类型的按钮,您希望立即可见)。

关键线

布局在其他设备尺寸上仍然一团糟。让我们将这些元素放在一个响应列中。为此,我们将使用 keylines。

单击工具栏中的“添加关键线”按钮。您会在编辑区域中看到一条垂直键线。通过顶部的小菱形指示器抓住关键线,并将其拖动到右侧。您将在检查器中看到关键线的位置更新。

将此关键线重命名为“Left”,并将其放置在距左侧 7.5% 的位置:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27360%27%20height=%27205%27/%3e)

创建另一个关键线。将其重命名为“Right”,并将其放置在距右边缘 -7.5% 的位置。 (您可以在上面显示的关键线检查器中手动输入这些设置。)

现在你有两条关键线:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27278%27%20height=%27248%27/%3e)

接下来,让我们将内容与这些关键线对齐。选择所有元素并单击编辑区域右下角的“对齐...”命令按钮,然后选择“左边缘到关键线”和“左”:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27298%27%20height=%27124%27/%3e)

接下来对齐两个文本元素和两个文本字段(但不是带有 N 标志的图像 - 那个将仅与左对齐!)。在 Layout 选项卡中,启用右对齐并选择右关键线:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27293%27%20height=%2749%27/%3e)

这就是我们现在所拥有的:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

让我们暂时忽略“N”标志。相反,请查看设备预览中的最大屏幕尺寸。看看文本内容如何挂在标题图像的左侧?这看起来不太好。相反,我们希望文本向右缩进。此外,我们希望图像和文本之间有更多的边距。

为了解决这个问题,让我们创建覆盖。双击设备预览中的最大屏幕尺寸。然后只需将关键线拖向中心即可。此外,选择第一个文本元素并将其向下移动一点。您会看到该特定屏幕的覆盖已创建:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

完成编辑覆盖后,请记住通过双击基本格式返回基本格式。

种字体(以及它们如何嵌入到您的网络应用中)

到目前为止,我们还没有触及文本元素的样式,除了将其中一个更改为使用 Headline 样式。让我们对排版做一些事情。

我们总是可以单独为元素设置字体,但最好使用 app-wide 样式。这些是您项目的排版基础。您可以在 App Settings 块中找到它们 — 在 Project Map 中单击它,然后在检查器中选择 App Styles 选项卡。

我们项目中使用的样式是“基本文本”和“标题”。我们可以看到两者当前都设置为使用系统字体:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27360%27%20height=%27327%27/%3e)

单击“其他字体”设置。出现用于选择字体的菜单按钮。单击按钮并选择名为 Source Sans Pro 的字体。然后,选择标题样式(字体设置上方的粗体文本)并在那里设置相同的字体。

两种样式现在都应设置为使用 Source Sans Pro。预览现在将反映此字体选择:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27335%27%20height=%27424%27/%3e)

Source Sans Pro 字体实际上包含在 React Studio 中。它是由 Adobe 创建的免费字体,即使在小屏幕上看起来也很棒,使其成为移动 Web 用户体验的绝佳选择。出于这个原因,我们在默认的 React Studio 安装中捆绑了字体。 (我们包含的另一种字体是 Open Sans,它同样可以免费使用并且在显示器上非常清晰。)

您还可以使用计算机上安装的任何其他字体。当您导出项目时,React Studio 会将字体文件复制到导出的 React/Webpack 项目的资产中。换句话说,你不需要做任何事情来在你的网站上启用高质量的字体!但是,有几点需要注意:

商业字体可能具有禁止在网站上嵌入字体文件的许可证。如果您不确定,请联系字体供应商。
Mac 上的某些标准字体的格式无法由 Web 浏览器加载,因此无法嵌入。如果是这种情况,您会在导出项目时看到警告。

如果您再次查看最终发布的演示,您会发现排版的最后一个区别。长文本块使用浅斜体字体,并且是中灰色(而不是黑色)。您可以通过选择文本元素并查看检查器中的 Element 选项卡来进行这些更改。

有交互的按钮

该演示的最后一部分是右下角的按钮。如果您在发布的演示中单击它,您将看到一条警告消息。这是一个简单的交互示例。

要创建按钮,请将“图标按钮”从元素调色板拖到编辑区域。

然后将新按钮与右键对齐:打开_Layout_选项卡并单击右对齐复选框以启用它。当提示对齐时,回答“保持大小和重新定位” — 这将清除左侧对齐设置。

图标按钮的默认内容是一个三行“汉堡”菜单图标,但很容易更改。 React Studio 包含数百个常用图标作为模板。或者,如果您不喜欢默认设置,您可以导入 SVG 矢量图像以用作图标内容。

打开元素选项卡并在按钮图标下查看。单击“模板”菜单按钮:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27384%27%20height=%27189%27/%3e)

我们用于演示的图标是一个名为“Share #6”的模板,但你当然可以使用任何你喜欢的东西。

打开 Interact 选项卡。单击“当用户点击时”旁边的复选框,然后选择“脚本”交互类型:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27367%27%20height=%27326%27/%3e)

这意味着我们希望在单击此按钮时运行一些 JavaScript 代码。 (可以针对单个用户事件进行一系列多次交互 — 查看右上角的加号和减号按钮。)

点击“编辑脚本”。这将打开脚本编辑器窗口。输入以下文本:

警报(“你好!”)

然后点击“保存”。该按钮现在将在单击时显示一个警告框。

预览和发布

让我们在网络浏览器中看看这个完成的设计!可以通过三种方式查看您的应用程序,只需在工具栏中单击即可访问所有这些方式:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27550%27%20height=%27100%27/%3e)

在 Web 浏览器中打开。 这会在您的本地计算机上运行所谓的开发 Web 服务器,并在 Web 浏览器中打开您的应用程序。
Mobile Preview. 此命令将您的项目导出为 React+Web 项目,在其上运行生产构建(例如缩小 JavaScript),然后在 Neonto 的服务器上为您的内容创建一个隐藏的 Web 链接。通过这种方式,您可以获得一个用于预览的真实 Web URL,因此您可以在自己的设备上轻松查看它。链接也可以共享。它是不可猜测的,但公开的,因此只有与您共享链接的人才能访问它。
发布到 Web。 此命令的工作方式与 Mobile Preview 类似,但它允许您选择站点的 URL 路径。例如,本教程中发布的演示是使用此功能从 React Studio 发布的,路径为“layoutdemo”。发布到路径后,其他任何人都无法使用该 URL,因此您实际上拥有它!

还有第四种方式,工具栏中的Export按钮。这将为您提供一个遵循最新最佳实践的完整 React+Webpack 项目。这里没有任何 Neonto 特定功能的“锁定”。如果您想将项目交给 Web 开发人员进行进一步开发,没有什么能阻止您这样做!这就是 React Studio 的真正威力:干净、高质量的 React 代码总是一键即可。

接下来是什么

感谢您阅读到这里!你是真正的冠军。希望您对使用 React Studio 工具集的响应式网页设计的真棒感到开明。 (如果没有,请告诉我们出了什么问题?)

我们正在建立学习材料的内容库。查看我们的 Medium 博客上的其他帖子。然后前往React Studio 站点获取视频教程 (YouTube) 等的链接。

如果您对想要查看的材料有任何疑问或建议,请随时与我们联系!您可以通过 [email protected] 或使用 React Studio 应用程序中的内置聊天功能与我们联系(查看帮助菜单)。

React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。你可以在这里找到 repo u003d>githu

React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子有人说比较 React 和 Angular 就像比较_苹果和橘子_。一个是处理视图的库,另一个是_完整的框架_。反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,