改進用戶界面與體驗的21種JavaScript和CSS庫

作者：陳峻編譯 2018-12-10 11:00:00

當自己的網站應用流暢運行之后，下一步您就需要讓它看起來更美觀生動。本文列舉了21種實用的JavaScript和CSS庫，可幫助您實現更加酷炫的效果。

【51CTO.com快譯】當自己的網站應用流暢運行之后，下一步您就需要讓它看起來更美觀生動。本文列舉了21種實用的JavaScript和CSS庫，可幫助您實現更加酷炫的效果。

1. Algolia

如果您想在自己的網站上添加具有自動完成功能的表單，那么您肯定會用到這個庫。由于其精準和快捷的特點，我非常喜歡它帶有的地圖功能。這個庫能夠讓您在地址區域處添加地圖功能，以方面用戶搜索位置。

2.Wired Elements

假設有客戶要求您為他創建出一種看上去各個元素都像是手繪的頁面(如下圖所示)，當然并非是那種介于兩種元素之間的圖案，那么Wired Elements就能幫助您實現這個效果。這款JavaScript庫能夠幫助您設計出各種看上去酷似手繪效果的UI元素。

3. Micron.js

這是一種JavaScript庫，它能夠被用作實現CSS動畫效果。同時，它能夠幫助用戶實現在各種DOM元素上添加交互性的效果。因此，您可以通過僅調用一個簡單的“click”事件，來為對象添加有趣的動畫效果。

4.Flat-Remix.CSS

這款CSS庫持有麻省理工學院頒發的許可。它為廣大開發者提供了一套預設計好的元素集合，以實現更好、更快的Web開發。該庫中的各類元素都具有最新的用戶體驗趨勢，即清晰的邊界和強烈的色差。具體請參考：https://www.lambdatest.com/blog/10-analytics-tools-optimizing-ux/。

5.React Spring

這是一款JavaScript + CSS的庫，它提供一套基于物理形態的轉換。在獨特的創意設計過程中，它通過各種動畫效果來激發開發者的創新。其內置的JavaScript API提供了各種工具來創建復雜的動畫，這些往往是那些單靠使用CSS所無法實現的。

[[251831]]

6. SimpleBar

如果您希望有一些自定義的滾動條，那么SimpleBar就是一種能夠助你一臂之力的高效JavaScript庫。它既簡單易用，又非常輕巧。同時，它不僅能夠支持縱向和橫向滾動條，也可以在所有主流的瀏覽器上運行，且不會產生兼容性問題。

7.Apex Charts

如果您想創建一些外觀精美、像素流暢的SVG(可縮放矢量圖形，Scalable Vector Graphics)圖表的話，這款開源的JavaScript + CSS的庫就很適合您。您可以在各式各樣的條塊、餅圖、熱度圖和混合圖表中進行選擇、定制、并得到相應的互動響應。

[[251832]]

8. Anime.JS

一直以來，動畫效果是網站用來提升用戶體驗的關鍵因素之一。如今，隨著Flash的使用頻率持續下降，人們把目光投向了JavaScript + CSS庫。Anime.JS以其靈活的特性，能夠為您的應用程序添加各類動畫效果和元素的變換。

9. Embetty

如果您想在不破壞隱私的前提下，在自己的網站中，顯示各種諸如視頻或tweets(推特)之類的外部流媒體內容的話，那么Embetty就能為您提供此類解決方案。通過添加諸如embetty-video、或embetty-tweet的標簽，以及相應的類型，您可以輕松地添加各種預想的流媒體元素。

10.Hybrids

作為一款易用的JavaScript庫，Hybrids使用的是純函數和普通的對象。因此，您可以自行定義各種元素。同時，它還支持在不用刷新頁面的前提下，替換模塊，并更新各種自定義的元素。

11.Animate on Scroll

如果您希望自己的網站具有視差滾動(parallax scrolling)功能的話，那么這款JavaScript庫就能讓您的用戶在向下滾動時，看到簡約而有趣的動畫。在具體效果上，界面可以從指定的錨位置開始顯示褪色的效果，您可以通過營造這種用戶體驗，讓用戶“流連忘返”于此。

12. Bideo.JS

如今，許多人都喜歡有全屏幕播放的視頻，而非單純的靜態圖像作為背景。Bideo.js就是一款能讓您在響應頁面的背景上全屏播放視頻的小巧型代碼庫。

13. chart.js

這是一款實用的JavaScript庫，它允許用戶將各種獨具匠心的圖表，添加到自己的網站上。通過它所提供的大量模板，您能夠以一種和諧的方式，去利用好網頁上的留白和其他各種元素。

14. Cleave.js

您是否考慮過：在您的網站上，當用戶瀏覽到與生活閱歷相配的數字顯示時，會是多么的愉悅?例如，將一串電話號碼0204142277轉化為(020)414-2277的顯示形式。Cleave.js就能夠將這些簡單的概念，轉換成為個性化的用戶體驗。

15.Smooth UI

這是一款開源的JavaScript庫，它是一些由React按照開發者的風格創建的各種組件。它能夠幫助您基于現有的主題，定制化地設計出精美的Web應用程序。

16. Curtains.js

這是一款輕量級的WebGL + JS庫，它主要被用于給網站上的媒體元素提供動畫效果。它能夠把網站上的圖像和視頻轉換成為3D紋理的界面，并使用著色器來進行動畫效果的處理。雖然它比較易用，但是您仍需要具有過硬的HTML、CSS和JavaScript知識。

17. Math.js

該數學庫提供了諸如表達式分析器之類的各種函數。它能夠幫助開發者實現各種單位、分數、矩陣、和其他關鍵數學函數。

18. X-Chart

這款JavaScript庫能夠讓開發人員，創建一個通過拖動來調整大小的數據可視化系統。您可以使用它來設計精美的圖表，包括：餅圖、柱狀圖和圈狀圖等。

19.Box-shadows.css

Box-shadows帶有CSS3的最新功能(請詳見https://www.lambdatest.com/blog/top-18-free-css3-resources-to-build-fast-lightweight-websites/)，因此它具有跨瀏覽器的兼容性。通過使用該庫，您只需在自己的網站上添加少量的代碼元素，便可輕松地實現各類框體的陰影效果。更令人興奮的是，您還可以添加當鼠標劃過時出現的陰影效果。