轻松的学习/课程视觉刷新

嗨,作为学习视觉刷新工作的一部分,设计小组一直在做(示例,1,2,)有人问我@西7@小狐狸探索对课程本身的小改进,例如什么是块?在这篇文章中,我提供了一些回顾作为背景,并最终为您的反馈提供了一些探索和建议。

今天出现的课程示例:

什么是块课程的截图。

可从以下位置访问此特定课程在这里。存在所述页面的设计在这里,但现在。视觉刷新的另一个目标是引入一个最小的tab-bar,以便为读者和讲师提供一个部分。


高级别建议

  • 隐藏管理员栏。
  • 用蓝莓取代超链接的经典蓝色。
  • 应用text-wrap:漂亮;跨越所有文本。理想情况下,它可以在整个wp.org网站上全局存在,但至少应该在这里。
  • 考虑在主列上设置一个960px的最大宽度,并将其放在画布的中心,就像在开发人员资源.

内容建议

有些内容样式我们希望可以在整个网站上以全球的方式进行填充,所以在这里提及它们并不是针对学习内容,而是针对所有内容。代码语法突出显示,例如:

代码示例的屏幕截图。

这些通知还可以使用一种新的风格:

通知截图。

创建屏幕截图的一般准则将有助于制定。例如,本页可以从更好的截图中获益,总是2倍的分辨率,最好是一个平台,使用现代配色方案来匹配WordPress.org网站WordPress.org网站 用户创建和共享WordPress代码的社区站点。这是你可以下载WordPress核心、插件和主题的源代码的地方,也是社区对话和组织的中心位置。https://wordpress.org/使用来自新调色板例如,最好使用浅蓝色a把通知放在这里或浅灰色,如果这些盒子需要使用:

本课方框段落的屏幕截图。

标题标题 你的网站的标题通常是人们会体验到的第一件事。位于页面顶部的刊头或页眉是网站外观的一部分。它可以影响访问者对您的内容和您/您组织的品牌的看法。它在不同的屏幕尺寸上也可能看起来不同。

课程标题的屏幕截图。

WordPress徽标的存在将带您回到主要的学习部分。除了删除“沉浸式”视图并添加通用WordPress.org页眉和页脚的更大更改之外,我们还可以将其更改为类似面包屑:

不同风格面包屑的屏幕截图。

下面还有1个边框。

提要栏提要栏 WordPress中的侧边栏是指WordPres主题使用的小部件可读区域,用于显示不属于主内容的信息。它并不总是侧面的垂直柱。它可以是内容区域、页脚、页眉或主题中任何位置下方或上方的水平矩形。

课程侧边栏的屏幕截图。
  • 将Open Sans替换为Inter。我们应该这样做,我们应该使用只有国际米兰和E.B.加拉蒙德字体。
  • 将颜色更新为木炭色。

最后会有一个模型将所有这些细节联系在一起,但这里有一个片段:

建议的侧边栏刷新的屏幕截图。

主要课程标题

课程标题截图。
  • 删除“模块1”的左边框,避免斜体,使用木炭色5,默认字体大小,默认字体粗细。
  • 标题和文本都使用木炭色。
  • 字体系列已正确设置为EB Garamond,但该web-font未排队,因此不会加载。
  • 正文的字体大小应为16px,而不是18px。

按钮

样式接近新按钮样式,但可能更接近:

按钮的屏幕截图。

一些改动会使它变得完美:1px边框,蓝莓文本,半加粗。

建议按钮样式的屏幕截图。

进度条

课程进度条的屏幕截图。

如果我们可以将灰色分隔符保持在1px,并覆盖更厚的圆形进度条,那将是理想的:

建议进度条的屏幕截图。

把它们绑在一起

课程视觉刷新完整建议的屏幕截图。

此次刷新最重要的是:

  • 正确加载EB Garamond。
  • 使用正确的木炭色。
  • 使用WP.org蓝莓色。
  • 简化字体大小、粗细和样式。

选项卡栏

另一个要求是教师的标签。它可能看起来像这样:

与之前相同的课程刷新建议的屏幕截图,但在顶部显示只有讲师才能看到的选项卡。标签上写着课程和讲师笔记。

让我知道你的想法!