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，它很漂亮。