1.設(shè)計(jì)確認(rèn)清單-checklist.design

我們知道不同類型的頁(yè)面都是由一些不同的關(guān)鍵元素組成的：

比如： 登錄頁(yè)包括有：網(wǎng)站logo、登陸標(biāo)題、賬戶名輸入框、密碼輸入框（或者驗(yàn)證碼）、重置密碼按鈕、注冊(cè)按鈕 等等；

博客主頁(yè)包括有：Hero（強(qiáng)調(diào)主題）、導(dǎo)航欄、布局設(shè)計(jì)、博客文章預(yù)覽、分享按鈕 等等；

購(gòu)物車頁(yè)面包括有：商品元數(shù)據(jù)（名稱、大小、價(jià)格、圖片等）、修改或移除按鈕、配送信息、促銷、優(yōu)惠券、支付方式 等等；

checklist.design 會(huì)把這些不同類型頁(yè)面的關(guān)鍵元素悉數(shù)列出來(lái)，當(dāng)你要設(shè)計(jì)某個(gè)頁(yè)面的時(shí)候，直接根據(jù)它的 checkList 表，對(duì)照著進(jìn)行設(shè)計(jì)、開(kāi)發(fā)，滿足要求了，就打勾?

做出來(lái)的效果一定合理、驚艷~

除了頁(yè)面，還有具體到頁(yè)面組件的關(guān)鍵元素、業(yè)務(wù)流程的關(guān)鍵元素，它也都給你列出來(lái)了；

這還不夠，它貼心的在每一項(xiàng)元素加了 tips，以及頁(yè)面的靈感啟發(fā)，收羅了 dribbble 上很酷的網(wǎng)站示例！

u1s1，下次開(kāi)發(fā) web 網(wǎng)頁(yè)，我一定要打開(kāi)
https://www.checklist.design/ 對(duì)照看看~~

2.3D效果-Spline

網(wǎng)頁(yè)想做 3D 效果？

推薦 Spline，它簡(jiǎn)直就是 3D 效果制作界的潘多拉的魔盒 ~

倉(cāng)庫(kù)里的 3D 資源不要太多！

尼瑪，還有工作臺(tái)支持自定義制作，簡(jiǎn)直不要太逆天！！

3.“人物”設(shè)計(jì)-humaaans

humaaans 支持設(shè)計(jì) 各種各樣 的“人物”的角色

還有以“人”為中心的設(shè)計(jì)模板提供：你需要什么樣的“人”？

4.3D圖標(biāo)-3dicons

再來(lái)一個(gè) 3D 圖標(biāo)扛把子好庫(kù) —— 3dicons，沒(méi)錯(cuò)，品類多、制作精~ 按需所取~

5.網(wǎng)頁(yè)設(shè)計(jì)-webframe

webframe 收羅了各種類型的網(wǎng)頁(yè)設(shè)計(jì)，我認(rèn)為它的優(yōu)勢(shì)在于，可以讓你一目了然，將同類型的頁(yè)面設(shè)計(jì)盡收眼底；還有，它足夠簡(jiǎn)單、清新~

6.漸變色-webgradients

網(wǎng)頁(yè)需要取漸變色？來(lái)看 webgradients ~

這么 用心的交互，頂一個(gè)

7.腦圖學(xué)習(xí)路徑-Learn Anything

學(xué)技術(shù)，就來(lái) Learn Anything，它的特點(diǎn)在于：通過(guò)腦圖連線的方式串聯(lián)各種學(xué)習(xí)資源，github 庫(kù)等；

比如學(xué)習(xí) JS：

額，不過(guò)就是費(fèi)點(diǎn)英語(yǔ)，不行就機(jī)器翻譯吧。。

8.攻城獅簡(jiǎn)歷-standardresume

開(kāi)發(fā)攻城獅專用的簡(jiǎn)歷制作網(wǎng)站：standardresume

分分鐘按照步驟填信息，最后一鍵制作，就是標(biāo)準(zhǔn)、漂亮的簡(jiǎn)歷了~

9.網(wǎng)站博物館-museum-of-websites

museum-of-websites 記錄了世界范圍內(nèi)知名網(wǎng)站的界面歷史發(fā)展過(guò)程。

本瓜大致看了下，它雖然還是借助于 https://web.archive.org/ ，但是對(duì)各個(gè)歷史節(jié)點(diǎn)做出了梳理，還是很不錯(cuò)的，再去查閱的時(shí)候，就很清晰了~

10.代碼配色-ray.so

ray.so 支持在線生成各種代碼配色，你鐘愛(ài)哪款呢？

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