每个创建专业产品并关心他们的用户的人都会认真对待入职培训。它在弥合用户和应用程序之间的差距方面起着重要作用。它是一个伟大的用户体验的基础。它根本不能被忽视。
由于有许多入职解决方案，为了使事情变得更容易，我们准备了这个入职CSS和JavaScript代码片段的集合。虽然它们并不都是充满艺术魅力和奢侈的插图，但它们都将为你创建自己的用户友好的入职用户界面打下坚实的基础。
1.法比奥-奥塔维尼的美丽的入职用户界面
我们的第一个代码例子是一个令人赏心悦目的入职解决方案，它使用美丽的图形和用户友好的动画。它基于一个传统的水平滑块，提供了众所周知的三点式导航。它有三个屏幕，但你可以很容易地将这个数字增加到你的项目所需要的数量。如果你想让你的入职培训不显眼，请使用这个片段。
请看笔DailyUI--#023入职培训 ，作者Fabio Ottaviani
2.使用jQuery的入职培训幻灯片by Hainer Savimaa
前面的例子采用了比较传统的入职路线，而这个片段利用了分体式布局，提供了一个精心组织的UI来显示信息，让你把视觉内容和文本内容分开。除了经典的基于点的导航之外，还有支持 "下一步 "和 "返回 "的按钮，供那些喜欢传统控制的人使用。
请看Hainer Savimaa用jquery制作的PenOnboarding幻灯片
3.Nahom Ebssa的简单入职设计
这个最小化设计的入职片段设法在一个小屏幕上容纳所有必要的信息，同时还提供了一个舒适的用户体验。至于导航，由于没有后退按钮，它可能感觉有点不完整，但你可以很容易地自己添加。总的来说，这个代码片段可以作为你自己的入职用户界面的一个伟大的基础。
参见Nahom Ebssa的 "PenOnboarding"。
4.Fersho Pls的极简入职界面
受Ennio Dybeli创造的出色的入职界面的启发，这个入职界面片段，以其最小的设计和流畅的动画行为，在概念上并没有什么突破。细节是标准的，过渡也是基本的，但它们却完美地结合在一起。这个概念很简单，但却直指要害。它是小型项目的理想选择。
请看Fersho Pls的PenOnboarding。
5.分屏登场旋转木马by Dario Corsi
我们已经在这个系列中介绍了一个分屏布局，但这一次，入驻的用户界面被旋转了九十度，变成了一个传统的条纹布局--看起来很像几年前的一个基本滑块。除此之外，它还有可能涵盖你需要传递给用户的所有入职信息。即使它有一个相对较宽的布局，你也可以迅速使其响应。
请看达里奥-科西的 "入职转盘"。
6.Nick Wanninger设计的经典入职用户界面
这个片段不是那种用美丽的美学或非凡的动画来赢得用户的东西。相反，它可以作为你自己入职创作的基础。它没有特别花哨的设计--只是一个经典的结构。与之前的片段不同，这个组件用短线代替了点，用标准的箭头代替了 "下一步 "和 "返回 "的字样，但结果仍然让人感觉很直观。
请看Nick Wanninger的《PenOnboarding》。
7.马特-斯温森的安卓应用入职培训
这个入职用户界面可能看起来很过时，但它的工作做得非常好。它分为两部分。第一部分显示了四个标准的旋转木马屏幕，可以用来为访问者提供更多的信息，第二部分包括一个电子邮件订阅表，供那些想通过按下 "开始 "按钮直接进入主题的人使用。
请看Mat Swainson的PenAndroid App Onboarding。
8.Cuberto的开源Liquid Swipe
我们已经看过一些解决方案，它们为连续显示一系列的屏幕截图或动画提供了基础技术。Liquid Swipe则有点不同。它以一个过渡效果为中心，完美地模仿了液体刷屏行为，感觉非常自然。你可以从其GitHub repo下载文件。
从本质上讲，可以用一个基本的旋转木马系统来创建一个入职UI。你所需要做的就是把每张幻灯片分成两部分。一个是内容，另一个是导航。之后，你可以添加你自己的创意和过渡效果，使用户体验不仅是信息丰富，而且令人愉快。
