送給 xdm 的 10 個 web 線上前端資源，優雅永不過時~

語言: CN / TW / HK
時間 2022-04-27 13:15:12

哈嘍，你瓜又來了，1234，再來一次，好資源分享，永不停止。

請記住：是否使用工具是區別人類和動物的關鍵。—— 馬克思

1. 設計確認清單-checklist.design

我們知道不同型別的頁面都是由一些不同的關鍵元素組成的：

比如： 登入頁包括有：網站logo、登陸標題、賬戶名輸入框、密碼輸入框（或者驗證碼）、重置密碼按鈕、註冊按鈕 等等；

部落格主頁包括有：Hero（強調主題）、導航欄、佈局設計、部落格文章預覽、分享按鈕 等等；

購物車頁面包括有：商品元資料（名稱、大小、價格、圖片等）、修改或移除按鈕、配送資訊、促銷、優惠券、支付方式 等等；

checklist.design 會把這些不同型別頁面的關鍵元素悉數列出來，當你要設計某個頁面的時候，直接根據它的 checkList 表，對照著進行設計、開發，滿足要求了，就打勾✔

做出來的效果一定合理、驚豔~🤩

image.png

除了頁面，還有具體到頁面元件的關鍵元素、業務流程的關鍵元素，它也都給你列出來了；

這還不夠，它貼心的在每一項元素加了 tips，以及頁面的靈感啟發，收羅了 dribbble 上很酷的網站示例！

image.png

u1s1，下次開發 web 網頁，我一定要開啟 http://www.checklist.design/ 對照看看~~

2. 3D效果-Spline

網頁想做 3D 效果？

推薦 Spline，它簡直就是 3D 效果製作界的潘多拉的魔盒 ~

image.png

倉庫裡的 3D 資源不要太多！

image.png

尼瑪，還有工作臺支援自定義製作，簡直不要太逆天！！

image.png

3. “人物”設計-humaaans

humaaans 支援設計 各種各樣 的“人物”的角色 👍

5c0061a47aefa4500f0f42d1_rotating-mixing-optimized.gif

還有以“人”為中心的設計模板提供：你需要什麼樣的“人”？

image.png

4. 3D圖示-3dicons

再來一個 3D 圖示扛把子好庫 —— 3dicons，沒錯，品類多、製作精~ 按需所取~

image.png

image.png

5. 網頁設計-webframe

webframe 收羅了各種型別的網頁設計，我認為它的優勢在於，可以讓你一目瞭然，將同類型的頁面設計盡收眼底；還有，它足夠簡單、清新~

image.png

6. 漸變色-webgradients

網頁需要取漸變色？來看 webgradients ~

image.png

這麼 用心的互動，頂一個👍

7. 腦圖學習路徑-Learn Anything

學技術，就來 Learn Anything，它的特點在於：通過腦圖連線的方式串聯各種學習資源，github 庫等；

image.png

比如學習 JS：

image.png

額，不過就是費點英語，不行就機器翻譯吧。。

8. 攻城獅簡歷-standardresume

開發攻城獅專用的簡歷製作網站：standardresume

image.png

分分鐘按照步驟填資訊，最後一鍵製作，就是標準、漂亮的簡歷了~

9. 網站博物館-museum-of-websites

museum-of-websites 記錄了世界範圍內知名網站的介面歷史發展過程。

本瓜大致看了下，它雖然還是藉助於 http://web.archive.org/ ，但是對各個歷史節點做出了梳理，還是很不錯的，再去查閱的時候，就很清晰了~

image.png

10. 程式碼配色-ray.so

ray.so 支援線上生成各種程式碼配色，你鍾愛哪款呢？

image.png

OK，以上便是本次分享，針不戳~ 希望你也能用這些線上資源，用的開心 o(￣▽￣)ブ

覺著不錯，點個贊吧👍👍👍

我是掘金安東尼，輸出暴露輸入，技術洞見生活，再會~

image.png

往期同類型資源推薦文章：

「」
「」