送給 xdm 的 10 個 web 在線前端資源,優雅永不過時~
哈嘍,你瓜又來了,1234,再來一次,好資源分享,永不停止。
請記住:是否使用工具是區別人類和動物的關鍵。—— 馬克思
1. 設計確認清單-checklist.design
我們知道不同類型的頁面都是由一些不同的關鍵元素組成的:
比如: 登錄頁包括有:網站logo、登陸標題、賬户名輸入框、密碼輸入框(或者驗證碼)、重置密碼按鈕、註冊按鈕 等等;
博客主頁包括有:Hero(強調主題)、導航欄、佈局設計、博客文章預覽、分享按鈕 等等;
購物車頁面包括有:商品元數據(名稱、大小、價格、圖片等)、修改或移除按鈕、配送信息、促銷、優惠券、支付方式 等等;
checklist.design 會把這些不同類型頁面的關鍵元素悉數列出來,當你要設計某個頁面的時候,直接根據它的 checkList 表,對照着進行設計、開發,滿足要求了,就打勾✔
做出來的效果一定合理、驚豔~🤩
除了頁面,還有具體到頁面組件的關鍵元素、業務流程的關鍵元素,它也都給你列出來了;
這還不夠,它貼心的在每一項元素加了 tips,以及頁面的靈感啟發,收羅了 dribbble 上很酷的網站示例!
u1s1,下次開發 web 網頁,我一定要打開 http://www.checklist.design/ 對照看看~~
2. 3D效果-Spline
網頁想做 3D 效果?
推薦 Spline,它簡直就是 3D 效果製作界的潘多拉的魔盒 ~
倉庫裏的 3D 資源不要太多!
尼瑪,還有工作台支持自定義製作,簡直不要太逆天!!
3. “人物”設計-humaaans
humaaans 支持設計 各種各樣 的“人物”的角色 👍
還有以“人”為中心的設計模板提供:你需要什麼樣的“人”?
4. 3D圖標-3dicons
再來一個 3D 圖標扛把子好庫 —— 3dicons,沒錯,品類多、製作精~ 按需所取~
5. 網頁設計-webframe
webframe 收羅了各種類型的網頁設計,我認為它的優勢在於,可以讓你一目瞭然,將同類型的頁面設計盡收眼底;還有,它足夠簡單、清新~
6. 漸變色-webgradients
網頁需要取漸變色?來看 webgradients ~
這麼 用心的交互,頂一個👍
7. 腦圖學習路徑-Learn Anything
學技術,就來 Learn Anything,它的特點在於:通過腦圖連線的方式串聯各種學習資源,github 庫等;
比如學習 JS:
額,不過就是費點英語,不行就機器翻譯吧。。
8. 攻城獅簡歷-standardresume
開發攻城獅專用的簡歷製作網站:standardresume
分分鐘按照步驟填信息,最後一鍵製作,就是標準、漂亮的簡歷了~
9. 網站博物館-museum-of-websites
museum-of-websites 記錄了世界範圍內知名網站的界面歷史發展過程。
本瓜大致看了下,它雖然還是藉助於 http://web.archive.org/ ,但是對各個歷史節點做出了梳理,還是很不錯的,再去查閲的時候,就很清晰了~
10. 代碼配色-ray.so
ray.so 支持在線生成各種代碼配色,你鍾愛哪款呢?
OK,以上便是本次分享,針不戳~ 希望你也能用這些在線資源,用的開心 o( ̄▽ ̄)ブ
覺着不錯,點個贊吧👍👍👍
我是掘金安東尼,輸出暴露輸入,技術洞見生活,再會~
往期同類型資源推薦文章:
- 呵呵,JavaScript 真好玩(苦笑臉)
- 送給 xdm 的 10 個 web 在線前端資源,優雅永不過時~
- 寧不會真以為咱前端仔只會切圖吧?!喏,給你 2021 最酷網頁設計指南!
- 3 分鐘温故知新 RxJS 創建實例操作符
- 手摸手吿訴 UI 妹子數據可視化 20 條優化細則【切圖仔直接收藏】
- JS【數組合並】的性能差異對比
- 日拱算法:用兩個棧實現隊列&包含min函數的棧
- Hooks 對於 Vue 意味着什麼?
- 5 個 JavaScript 寫法小技巧分享
- 日拱算法之不能不知道的“紅黑樹”
- 日拱算法之判斷平衡二叉樹
- AVL 樹旋轉及 JS 實現,平衡樹支稜起來~
- 大小堆解決【數據流中位數】問題,nice 圖解~
- 雙指針解決【接雨水】問題,yyds
- 回溯法解決電話號碼的字母組合,經典~
- 收藏:生成 UUID 的三種方式及測速對比!
- 還能把瀏覽器當作 Web 服務器?騷操作,學廢了~
- 遇到這幾個 JS “神(qi)奇(pa)“寫法也是醉了......
- 夾吃灰,推薦:實現 SVG 動畫的 5 個 JavaScript 庫~
- 三連彈!原生實現異步處理利器 —— Observable