10 个免费的 CSS 和 JavaScript 入职用户界面

入职的目标是让新用户熟悉界面。 这有许多不同的风格，并且没有正确的方法来做到这一点。 但是，如果您研究网站和应用程序如何进行入职培训，您就可以为自己的工作汲取灵感。

借助这些免费的 CSS 和 JavaScript 载入 UI，您将获得大量灵感和代码片段来帮助您入门。

1. 旋转木马幻灯片

旋转轮播载入在屏幕空间有限的移动设备上非常流行。 但这种效果在您需要快速获取信息的网站上也同样有效。

查看 Nick Wanninger 创建的这个轮播幻灯片演示，了解我的意思。

这是一个完全免费的入门示例，使用 Flickity 和一些基本的 CSS 代码创建。 这适用于移动设备和台式机，因此如果您需要响应式解决方案，它是一个很好的选择。

2. React 日常用户界面

作为一个简单的实践设计，Jack Oliver 从头开始​​创建了这款 React Daily UI 笔。 这是我见过的最时尚的入职体验之一。

该界面具有虚拟文本，因为它不适合实际使用，但它非常干净，应该留出足够的空间来容纳几乎所有内容到页面中。

需要注意的一件事是，我无法通过滑动在移动设备上使用它，而且目前似乎只能识别水龙头。 但是对于仅单击的解决方案，它真的很棒。

3. 入职屏幕

这支笔不仅具有令人难以置信的入职界面，还具有自定义动画启动。

开发人员 Jeff Ham 熟悉界面，并创建了这个完美无瑕的入职屏幕。 它依赖 JavaScript 来创建“下一屏”动画和用户点击/点击的切换事件。

这个界面的一个很好的补充是底部的蓝色下一步按钮。 这让用户可以通过一个大的 CTA 逐屏推进。 我敢打赌，这会增加转换的总人数并提高整体体验的质量。

4. 董事会

这个 Boardal 片段相当独特，因为它不是你经常看到的东西。

它使用带有入职内容的模式窗口来帮助用户更快地浏览网站。 它是专为测试而创建的定制设计，是改进入职流程的最酷方法之一。

请注意，这在桌面上效果最好，因为它依赖于模态效果（不适合较小的屏幕）。

因此，如果您喜欢该设计并想要一种简单的方法来改善您网站的入职培训，那么不妨试试 Boardal。

5. 导览

通常，入职被认为是向用户介绍新页面和功能的逐步过程。 但我个人觉得导游更有用。

如果您想要一个简单的片段开始，那么这个导游是完美的。 它依赖于 Bootstrap 组件并使用带有“下一步”按钮的小工具提示来推进浏览。

如果用户生气或不再关心，用户可以随时关闭游览。 这使它成为一个可选的旅行，因此更少的人会被这个过程所困扰。

总的来说，这是我首选的入职方法，尽管设置它需要更多的努力。 但这个演示至少为您提供了一个开始的模板。

6. 材料之旅

另一种游览方法是突出特定功能的自动前进游览。

我发现的最好的例子是 Gregor Adams 创建的这支笔。 它基于材料指南，并使用突出显示的圆圈来展示页面的某些部分。 如果您的界面非常复杂，并且具有很多功能，那么这种技术是完美的。

通过使整个页面变暗，您可以一次将焦点集中到一个区域。 这会立即引起用户的注意，这正是您需要做的良好的引导。

我知道这不适用于所有网站，但如果您喜欢该界面，我强烈建议您尝试一下。

7. Android 应用引导

移动应用程序通常比网站更需要入职流程。 移动 UI 设计人员将功能塞进较小的屏幕是很常见的，这可能会在没有引导介绍的情况下使用户不知所措。

Mat Swainson 的这个入职指南是一个小而有说服力的例子，说明了智能手机应用程序可以做什么。

它基于 Android 模型，但它肯定不是您可以使用的唯一样式。 我喜欢它支持本机滑动的方式，即使在移动网络浏览器中也可以使用。

另外，顶部的小进度指示器很不错。 绝对是一个简单的入职页面，但如果您正在寻找灵感，则值得保存。

8. 离子介绍

你可以用 Ionic 做很多事情，这支笔就是一个很好的例子。

开发人员 Clifford Fajardo 创建了一个仅在 JavaScript 框架上运行的板载 Ionic 介绍。 它支持所有移动交互，如点击、滑动，如果您想要该功能，甚至支持双击选项。

Ionic 主要用于移动开发，它也适用于移动网站。 我不能说这个入职屏幕适合每个网站，但如果超过 50% 的受众来自移动设备，这是一个不错的选择。

9.垂直形式

带有轻微的果冻 UI 动画和真正简单的设计，这种垂直形式是一种独特的享受。

它使用 CSS flex 属性以及一些自定义 JavaScript 和 CSS 动画来充分发挥作用。 诚然，我确实发现内容有点薄，因此在详细的入职培训方面并没有提供太多内容。

但是，您可以毫不费力地采用此界面并真正将其变成您自己的界面，因此它确实留下了很多想象空间。

10. 导览工具提示

这是另一个导览示例，但这个示例使用了固定在页面上的完整工具提示框。

如果您查看该代码段，您会发现它没有内置到任何特定界面中。 相反，它只是一个为用户提供建议和进度步骤的浮动工具提示。

将此 UI 与一些固定的工具提示定位脚本相结合，可以让您轻松地在界面中移动这个东西，工具提示指向您的所有主要功能。 这个模板需要一些真正的定制才能让它工作，但对于一个简单的 UI，它很漂亮。