创建主题

您将首先复制一个现有的故事,并创建一个新的主题来设置其样式。

  1. 使用您的 ArcGIS 组织帐户登录 ArcGIS StoryMaps
    注:

    如果您没有组织账户,请参阅软件访问权限选项

  2. 打开故事地平线上的烟

    森林火灾照片上的故事标题文本

  3. 滚动并阅读其内容。

    故事包括地图、照片、文本、按钮和数据源链接。 您将创建一个您拥有并可以编辑的副本。

  4. 在功能区单击更多操作按钮,然后单击复制故事

    复制故事

  5. 复制窗口中,单击是,复制
  6. 删除标题中的文本(副本),只留下地平线上的烟

    该故事目前使用默认主题,白色背景,深灰色文本,蓝色的强调部分。 这些颜色不适合这个故事。 野火烟创造了一种黑暗、朦胧和不祥的气氛。 故事里的地图和照片适合这种气氛,但主题不适合。 您将会寻找不同的主题。

  7. 在功能区中,单击设计

    “设计”按钮

  8. 设计窗格中,在主题下,单击 Mesa

    已选中 Mesa 主题

  9. 滚动故事来观察变化。

    Mesa 主题比默认的峰会主题更适合故事的颜色,但它创造的气氛感觉轻松而清晰。 您将创建一个自定义主题,使故事看起来更加烟雾弥漫、阴郁,并且有点不祥。

  10. 单击管理我的主题链接。

    管理我的主题链接

  11. 单击新建主题按钮。

    “新建主题”按钮

  12. 选择起点窗格中,单击 Obsidian,然后单击选择

    选择一个主题作为起点

    选择一个主题作为起点可将主题的颜色、字体和其他特征加载到编辑器中作为起点。 由于您已决定为故事营造一种更暗、更烟雾缭绕的感觉,因此 Obsidian 的深色背景和红色强调色是一个不错的起点。

  13. 在侧窗格中,删除无标题主题并键入

    主题已重命名为“烟”

选择字体和颜色

接下来,您将选择有助于营造严肃氛围的字体和颜色。 您将借用故事中已有的地图和照片中的颜色,并确保这些颜色符合对比度的可访问性准则。

  1. 在侧窗格中,展开颜色部分并单击背景色菜单。
  2. 删除 #0e1116 并键入 #272520

    将“背景颜色”设置为 272520

    页面的背景颜色变为深棕色。 这个颜色和烟雾预报图中的背景色(海洋的颜色)是一样的。

    采用深色文本的深色背景

    提示:

    您可以在 web 浏览器上安装扩展模块,允许您从地图、照片和其他图形中查找颜色的十六进制值。 取色器就是这种扩展模块的一个例子。

  3. 对于页眉颜色,选中使用主题颜色

    稍后,您将在分类法部分中设置此属性。 选中此选项即可在该部分中进一步自定义这些颜色。

  4. 单击强调色菜单。 从基本颜色列表中,选择橙色选项或键入 #C86624

    强调颜色设置为橙色

  5. 滚动示例故事,查看橙色强调色出现的位置。

    强调色会影响按钮、链接、分隔符和引号。 橙色与火联系在一起,所以它很适合你故事的主题。

  6. 展开排版部分。

    字体是有个性的。 您正试图为这个主题设定一个严肃的基调,所以应该避免任何看起来过于随意、戏谑或装饰性的字体。 Charter BT 字体有正式的个性,所以很适合您的主题。 这个菜单中的许多可用字体也可能是合适的,所以字体的选择很大程度上取决于个人喜好。 选择字体的时候,想想每一种都会让你想起什么。 让你想起婚礼请柬、儿童读物或在线游戏的字体可能不是野火烟雾故事的最佳选择。 一种让你想起公文的字体比较合适。

    目前用于标题的 Charter BT 字体是一个不错的正式字体选项,因此您将保持不变。

  7. 对于标题和副标题,请单击颜色菜单。 类型 #A6671B

    标题文本变为从您的故事中的一张照片借用的黄橙色。

    橙色字体的标题文本

    颜色菜单旁边会出现一个警告符号。 它表示文本和背景颜色之间的对比度较低,使得文本难以阅读。

    带有警告图标的背景色

  8. 在颜色选择器窗口中,单击不清晰可见旁边的箭头。

    #A6671B 的对比度

    本节中的信息告诉您文本颜色与背景的对比度。 列出的数字是对比度。 如果对比度符合 WCAG 2.1 AA 指南设定的阈值,则认为对比度清晰可辨。 在这种情况下,橙色与背景形成很好的对比,但不会与次要背景形成对比。

    次要背景色是棕色背景色的一个较浅版本。 它是自动生成的,不可配置。 您将使橙色变浅,以便在两种背景下都清晰可见。

  9. 在颜色选取器框中,将圆圈向左上方移动一点。 或者,键入 #BC7F38

    对比度数字变为绿色,表示与两种背景颜色的对比度足够。

    #BC7F38 的对比度

    不应忽略对比度警告。 虽然您或许可以使用选择的颜色无障碍阅读标题,但其他人可能不能。 遵循这些警告可以让您创造一个通俗易懂的故事。

    对于段落文本,您将选择与标题和副标题相同的字体。 在制图中,通常建议只使用一种或两种字体,因为使用较少的元素比使用较多的元素更容易设计出吸引人且有效的地图。 你将把这个建议扩展应用到你的主题设计中,在故事中只使用一种字体。

  10. 对于段落,选择 Charter BT

    将你的主题限制为一种字体,可以让您在颜色上有更大的变化空间。

  11. 对于段落,将颜色更改为 #C8BEA4

    段落文本设置为浅米色

    这种颜色是标题颜色的淡色版本。 它不太饱和,这使它更充满烟雾弥漫的感觉,并有助于它符合故事的主题。 它也更亮,增加了它与背景的对比度。 文本越小,对比度对易读性越重要。

  12. 对于标题,将颜色设置为 #B5ADB7,一种淡而不饱和的紫色。

    标题文本颜色设置为浅紫色

    三种文字颜色的灵感来自故事中的一张照片。

    郊区附近烟雾弥漫的天空

    借用照片和图片的颜色是设计配色方案的可靠方法。 这些颜色将有助于根据照片的色调来设定故事的基调。 橙色和黄色文本颜色也与地图的符号系统相匹配。

    带图例的地图

    它们的颜色不完全一样,但它们足够相似,让故事感觉一致。

    浅紫色在棕色背景下看起来很好,但它只出现在少数地方。 你可能想在其他地方重复使用这种颜色。 您将把它设置为可选的强调色,以便以后可以访问它。

  13. 在侧窗格中,向上滚动。 在颜色部分的可选强调色下,单击第一个颜色菜单并将其设置为 #B5ADB7

    可选强调颜色

    该颜色不会立即应用于任何故事元素,但稍后会在故事构建器中提供。

设置其他设计元素

接下来,您将更改主题中按钮和链接的外观。

  1. 折叠颜色版式部分,展开按钮部分。

    示例故事跳转到示例按钮的位置。

    带有黑色文本的橙色按钮

    橙色的按钮看起来很醒目。 对于某些故事,粗体按钮是合适的。 例如,行动号召按钮应该非常突出。 但是,在您的故事中,您不希望按钮分散段落文本的注意力,所以您将它们更改为不太引人注意的较暗的颜色。

  2. 在侧窗格中,选中使用自定义颜色框。
  3. 将颜色设置为 #776f5b

    已选择使用自定义颜色选项

    这种灰褐色的颜色与故事正文的色调相似。 这是一种较暗的色调,不会分散人们对文本的注意力,但在背景下足够明亮,能够通过可访问性测试。

    带有白色文本的棕色按钮

    按钮文本也从黑色变为白色,以确保清晰的颜色对比。 您还需要将按钮设置为正方形,以便更好地将其与主题用于引用块的直线对齐。

  4. 按钮下,单击第一个带有方角的按钮类型。

    选择具有方角的按钮类型

  5. 展开链接部分并选择第二个选项。

    橙色强调色对于按钮来说太粗了,但是对于下划线链接来说似乎是合适的,所以您不会将其更改为自定义颜色。

    带橙色点下划线的链接

  6. 展开分隔符部分。 在位置下,选择最后一个选项。

    已选择最后位置选项

    示例分隔符延伸到故事的整个宽度。

    全角分隔符

    报价和底图还有更多选项。 既然这两个在您的故事里都没有使用,就不需要调整了。

发布主题

您将发布并分享您的主题,以便将其应用到您的故事中。

  1. 浏览示例故事并查看设计。

    它有一个严肃正式的外观,颜色与野火和烟雾的主题相匹配。

  2. 在功能区上,单击发布

    “发布”按钮

    您计划与公众分享故事地平线上的烟,因此您的主题也必须公开分享。 否则,无权访问主题的人将看到应用了默认主题的故事。

  3. 对于设置共享级别,选择所有人(公众)
  4. 对于高级选项,请选中允许复制框。

    共享设置

    这个选项允许复制您的主题并在以后修改它。

  5. 单击发布

将主题应用于故事

接下来,您将应用您的主题,并回顾它是如何改变您的故事外观和感觉的。 您将覆盖主题中的一种颜色。

  1. 带着您的故事返回浏览器选项卡。 或者,关闭带有您的主题的选项卡。
    注:

    如果您之前关闭了包含您的故事的选项卡,请登录到您的 ArcGIS 帐户。 单击内容选项卡,然后单击地平线上的烟 ArcGIS StoryMaps 项目。 单击编辑故事

  2. 在功能区中,单击设计
  3. 滚动到设计窗格的底部,然后单击浏览我的主题

    浏览我的主题按钮

  4. 在主题画廊中,单击烟雾卡。

    该主题将应用于故事。

  5. 关闭设计窗格,滚动浏览故事,查看它在新主题下的显示效果。

    主题已应用于故事。

    地图背景与故事背景无缝融合,文本和强调色适合照片和地图。

    主题已应用于故事。

  6. 滚动到故事的结尾。

    配额部分的第一行使用橙色标题和副标题。

    棕色背景上的橙色文本

    选择这种颜色时考虑的是较大的文本,而对于这种较小的字体,您更喜欢对比度较高的颜色。 您将覆盖主题并选择另一种颜色。

  7. 突出显示以此故事创建对象为开头的文本行。
  8. 在出现的菜单中,点按颜色按钮。

    颜色按钮和突出显示的文本

    建议下,列出了四种颜色。 这些包括您在主题中设置的标题和强调色。

  9. 建议下,单击浅紫色。 确认颜色对比列为清晰可辨

    已选择紫色强调色

    文本的颜色变为紫色。

    配额部分

发布故事

最后,您将发布故事并与公众分享。

  1. 在功能区上,单击预览

    “预览”按钮

  2. 单击是,继续
  3. 滚动浏览故事以查看它。
  4. 在预览工具栏上,单击关闭预览按钮。

    “关闭预览”按钮

  5. 在功能区上,单击发布
  6. 对于设置共享级别,选择所有人(公众)
  7. 单击发布

您的故事已经完成。 得益于您的自定义主题,它有一个适合其主题的基调和气氛。 在本教程中,您学习了以下技能:

  • 如何创建自定义主题,为您的故事设定合适的基调
  • 如何通过借用故事中已经存在的颜色来创造一种一致且统一的感觉
  • 如何选择符合无障碍指南的颜色

您可以在教程库中找到更多教程。