绘制GNOME应用程序模型

我以前的高水平编写了关于设计Gnome应用程序，但不是关于绘制UI样机的实际过程我们在GNOME设计团队中的方式。在本教程中，我们将在稍后再次从以前的教程中获取读取它，并从头开始绘制Inkscape中的一些样机。

在我们开始之前，让我们来看看我们将要基于这件事的草图。我已经重新绘制了我最后的应用程序设计博客文章中的一些草图，只需将需要本教程的零件。

我建议在跳入这个之前看看其他博客帖子，因为它将在基本设计模式上给您一些背景，并逐步显示我们如何进入此布局。

在设计了应用程序的基本结构之后（例如，在纸张上的草图）但在开始实施之前，请检查您的布局与真实UI元素的样子有好处。

这并不意味着模型需要从GTK样式表重新创建每个渐变和突出显示。这样做会使模型很难编辑并在样式表演变时保持同步。然而，可以使类似的东西，边界半径，按钮造型等，看起来非常接近他们将如何使用相对较少的努力来看待实施的版本。这就是为什么在GNOME设计团队上我们在Wifframe和Mockup之间使用简化的样式，其中大小和指标主要是像素 - 完美，但UI视觉效果不是。

这种级别的保真度非常适合尝试改变布局，放置个人控制，不同的图标隐喻等。在开始开发之前最重要的事情是最重要的事情。一旦实现正在进行中，通常存在额外的迭代在设计的不同方面，但是那些并不总是需要模型，因为您可以在该点直接迭代代码。

为了能够跟随本教程，您需要安装一些应用程序：

接下来，您需要GNOME模型模板。这是一个具有许多我们最常见的UI模式的SVG文件，它使您可以通过复制和调整这些现有组件来进行模型，而不是必须自己绘制每个元素。您可以从Gnome Gitlab下载模板。

最后，您需要最近版本的Cantarell，Gnome的接口字体。有可能的是，虽然您可能安装了具有该名称的字体，但它不是正确的版本，因为某些发行版和谷歌字体仍然在旧版本（仅有2个重量，而不是5）。您可以在此处下载新版本。

如果您从未使用过Inkscape，则可能是更好的做更多一般初学者教程作为第一步。我将熟悉导航和对象操纵基元，例如选择，移动/缩放/旋转，重复，操纵Z索引，分组/取消组合，并通过组层次结构导航。

尽管如此，这是我们主要使用的功能的快速概述。

inkscape有很多功能，但我们只需要一小部分我们正在做的事情。毕竟，大多数接口只是嵌套矩形;）

SNAP控件（右边缘的工具栏）：INKSCAPE具有非常细粒度的捕获控制，以配置在画布上移动项目时应捕捉到帆布上的项目（例如路径节点，对象中心，路径交叉点）。这有点是，但非常有用，确保事情与网格对齐。图标工具提示是您的朋友:)

当对齐事物或使用像素网格时，具有可见页面网格非常有帮助。它可以用＃快捷方式或在“视图”菜单中切换。

我开始做的一种先进的事情是使用路径效果仅在矩形的特定角上获得圆角。与使圆角烘烤成几何形状相比，这是方便的，因为它保持圆形柔性，因此可以缩放对象而不会影响圆角。

这个功能非常隐藏，看起来很复杂，但一旦你知道它在哪里，它就不是那种可怕。你可以在路径和gt中找到它;路径效果...＆gt; +＆gt;角落（圆角/倒角）。

您会发现样机模板使用该路径效果技术，例如窗户上的圆形底角。

对于应用程序图标而言，它并不是模拟，但仍然很好：Gnome调色板。 inkscape 1.0+默认包含它，因此您可以从右侧的箭头菜单中选择它。

否则，您也可以通过专用的Color Palette应用程序获取，或从Gitlab下载.gpl并将其放入〜/ .var / app / org.inkscape / confir / iNkscape / Palettes for FlatPak Inkscape或〜/ .config / inkscape / parettes如果它在主机上。

随着这种方式，让我们开始做我们的样机！首先，我们需要一个基本页面开始。我们可以通过打开该文件并将其保存在我们最终想要我们的样机的名称下，从空白页面文件开始。读后来。

GNOME模型通常由一个或多个观点组成，该观点布置在“页面”中所需的尺寸，以使内容适合。顶部通常是标题和描述，以及其他标题来解释关于所需的个人屏幕的东西（例如）。

可以在文档属性（Ctrl + Shift + D）中调整页面尺寸。这里有一个有用的快捷方式是Ctrl + Shift + R，它调整到当前选择的边界框中的大小（注意：如果您调整的速度仅限于您的大小是例如您为此目的设置的矩形，则只能使用此快捷方式。调整页面的大小大小从像素网格关闭的东西会破坏它，因为它移动了文档来源）。

既然页面已设置，我们可以添加我们的第一个屏幕。这是我们将首先绘制的草图：

作为第一步，让我们从图案模板中带有View Switcher.svg的窗口模板。在InkScape中打开该文件，选择最左上的屏幕，复制它并将其粘贴到您的模型文件中。

在大致定位窗口后，使用顶部的条形中的数字位置条目检查确切的位置，并确保两个x和y位置都是完整的整数（如果它们不是整数，它意味着您的模型是关闭像素网格的模型和看起来模糊）。

值得注意的是，在这种情况下，我们刚刚从纯粹的默认模板开始，它往往是从现有应用程序的现有样机开始的速度更快。 GNOME GITLAB上的App-Mockups存储库充满了现有的模型，以借用来自或用作新样机的起点或用作起点。那个说，根据他们的年龄，那些样机可能是使用过时的模式，所以检查特定的样机最后更新时是否有好处:)

让我们首先将标题调整到我们在草图中的内容。方便地，几个按钮无需在模板上完全更改。我们需要做的就是将搜索按钮移动到左侧，删除“添加”按钮，然后调整切换器。

作为一般规则，元件之间的间距是6像素的倍数（SO 6,12,18,24 ......）。例如，标题栏内的按钮周围有6px填充，以及各个按钮之间的6px。

移动/放置元素时，请务必确保捕捉到边界框处于活动状态（最顶层捕捉控制组）。与之前的窗口的放置一样，验证尺寸和位置是否甚至是工具栏中的整数。

接下来：视图切换器。您可以通过更改三个标签来开始，然后在其各自的容器上重新居中图标+标签组。非活动项目具有不可见的容器，因此它们有点是要选择的。

对于图标，您可以触发图标库并搜索以下图标：

*此图标尚未包含，但将在未来的版本中包含

您可以使用“复制到剪贴板”功能直接粘贴到Inkscape中。在粘贴之前，导航到相关的图标组（每个图标用不可见的16px矩形分组，因为这是图标Canvas大小）。放置图标时，请务必将其驻留在隐形画布矩形上，并将其放在像素网格上。您可能希望打开大纲模式（通过显示模式的Ctrl + 5周期）以更轻松地处理无形的矩形。

替换图标后，将标签字符串更改为文本工具，然后水平移动图标+标签块，以便它们看起来居中在其容器中。我个人只是通过眼睛手动执行此操作而不是使用对齐工具，因此我不会丢失对像素网格的象征，但您也可以对齐，然后手动将其移动到像素网格上的最近位置。

让我们看看下一个内容。我们可以从模板中保留ListBox的基本结构，但显然我们要更改列表中的内容。

我准备了一些示例内容，我们可以将其复制并粘贴到我们的模型中。每篇文章由三个标签组成，一个使用常规字体大小（10.5pt），两个使用较小的字体（9pt）。元数据标签还使用较轻的灰色，以将其与正文副本区分开（您可以使用颜色选择器工具在模板中的列表中右侧的标签上获取颜色）。

模板中的列表被分组，并具有剪切掩码，以切断底部的滚动内容。由于我们的布局是不同的，无论如何我们可以通过简单地解除（Ctrl + Shift + G）来删除剪辑。接下来，我们可以删除除第一行之外的所有内容，并将其更改为我们的第一条。

为了作为相同标签的一部分容纳多个内容，一个常见的模式是使用中间点（“·”）作为分隔符。 Pro提示：字符应用程序使您可以轻松地查找像Mockup中使用的印刷符号。

在第一个列表框中添加文章后，我们需要底部的“显示更多”按钮。为此，我们可以只调整列表大小，以便它扩展到最后一篇文章，并在该区域添加居中标签。

其中一些文章还具有与它们相关联的图像（在示例内容文件中有图像下载URL）。尚未被广场的图像需要剪切到布局的方形。在inkscape中这样做

通过从文件管理器拖放（或直接从网站粘贴到“复制图像”中拉动图像

将矩形放在尺寸/比例的位置，我们希望图像进入布​​局。在这种情况下，图像应该是80px方块，周围有12px间距。

选择图像和矩形，并进行对象＆gt;剪辑＆gt;放。请注意，剪辑对象（矩形）需要高于目标（图像）。

使用第一个列表完成后，我们可以将其移至一下并添加标题上方。您可以从列表中重新使用其中一个标题，并将其与列表容器水平对齐。标题基线和列表之间的间距也应该是12px，并且标题高于标题为18px到视图边缘。

对于第二个列表，我们可以复制我们的第一个列表，将其移动到下面，只需更改内容：

为了让它在底部精细切断我们可以带回剪切掩模。组列表，复制窗口背景矩形，并使用它作为列表的剪辑掩码。要使上一篇文章更加可见，我还在调整窗口背景的大小，首先稍高。

对于主菜单，我们几乎可以重新使用模板（左上角，画布外）的菜单。复制在模板开口和按钮上，并垂直对齐它，以便按钮与窗口中的一个相同的高度。

由于我们不需要默认的许多行为，因此我们需要做的就是更改几个标签，添加另一个分频器，并以应用程序的名称。

虽然，将我们留下了一堆空白，所以让我们通过选择底部节点并使用箭头键移动并移动它们：

现在我们有一个桌面视图，让我们做一个移动版本。让我们再看看我们的草图：

我们可以在此处重新使用桌面视图中的所有元素，但我们需要调整若干事物的大小和移动。

作为布局的起点，让我们带来移动模板。我喜欢将移动标题与桌面垂直对齐，因此所有标题按钮具有相同的垂直位置。

在移动尺寸上，没有足够的水平空间来保持标题栏中的视图切换器，因此只有一个标题。视图切换器位于底部的单独栏中。

对于标题栏，我们可以复制桌面样机中的按钮，并使用它们替换移动模板上的占位符按钮。

对于切换器，首先删除除其中之外的所有项目。然后将其余的剩余，并将背景矩形调整为少于视图宽度的比例。

之后，您可以重复两次项目，并将两个附加切换器项目移动到侧面：

现在，您可以更改图标和字符串，并删除两个项目上的背景，我们有一个完整的移动切换器：

在这种情况下，调整内容很容易。复制桌面样机中的列表，将其与模板中的列表左键对齐并删除原始列表。

然后我们只需要通过将句柄移动到基线右侧的句柄来调整文本框的大小，将文本截断到两行，将图像从右边缘移动到12px，并将“显示更多”标签。

对第二个列表重复同样的事情，我们有一个完整的移动布局！

如果我们缩小并一起看整件事，我们就可以看到这看起来几乎已经完成了：

但是，帆布大小对于我们拥有的内容来说太大了。打开文档属性（Ctrl + Shift + D），并将大小更改为大约1780×1100px。

现在模型已准备就绪，让我们导出一个PNG以便于分享。打开“导出”对话框（CTRL + Shift + E），在顶部选择“页面”，确保DPI为96，并设置文件路径。然后按Export，然后尝试在图像查看器中打开PNG以检查您是否错过了任何问题。

在设计团队上，我们通常将完成的样机推向Git存储库，但这是缺乏本教程的范围。 祝贺，你一直到最后！ 我希望这很有用，你会继续使用你学到的东西:) 您可以从GNOME Gitlab为本教程创建的Mockup uckup。 如果您对本教程的特定部分有问题并希望了解我是如何做到的，它可能会派上友好。 顺便说一下：inkscape-tutorial-resources存储库包含本教程中使用的所有模板和资源的快照，以防未来原始更改。 显然，对于真正的模型，我们会这样做其他屏幕（例如，文章页面，各种其他菜单，设置屏幕等），但我认为我们只使用这个屏幕涵盖了大部分基础知识。 如果您有疑问您可以免费评论或联系！