這幾天一直在折騰網(wǎng)站上一個(gè)動態(tài)組件的設(shè)計(jì)，由此展開聊聊怎么將網(wǎng)站頁面處理得好看一點(diǎn)。

主要有三點(diǎn)，一是制作標(biāo)準(zhǔn)，二是圖片效果，三是配色搭配。

聊到頁面的制作標(biāo)準(zhǔn)，我自己統(tǒng)一的點(diǎn)主要是字體字號、內(nèi)外邊距。就是在開始網(wǎng)站搭建的時(shí)候，直接延用原先主題的設(shè)計(jì)標(biāo)準(zhǔn)，然后將其記錄下來。

后續(xù)自己獨(dú)立去做任何區(qū)塊時(shí)，直接使用記錄好的那個(gè)標(biāo)準(zhǔn)便可以了。

我平時(shí)是有看一些設(shè)計(jì)案例的，但我發(fā)現(xiàn)那些高階酷炫的案例中，會綜合使用多種字體并搭配不同的字號。

說實(shí)話這種效果我是無能為力，畢竟不是專業(yè)的設(shè)計(jì)師，能實(shí)現(xiàn)基礎(chǔ)效果、將頁面做得干凈、統(tǒng)一便好了。

說完設(shè)計(jì)的標(biāo)準(zhǔn)，剩下就是圖片效果。

我知道很多小伙伴做圖片的時(shí)候會隨機(jī)去搜索引擎上找一張圖，然后編輯軟件剪裁一下便使用到自己的網(wǎng)站上了。

但這個(gè)過程中有個(gè)比較嚴(yán)重的問題，就是很多時(shí)候通過這種方式找的圖片不合格，不是像素模糊就是尺寸比例不行。

所以對于圖片這塊，如果你能熟練使用 AI 生成圖片的話，我建議是直接使用 AI 進(jìn)行制作。

實(shí)在不行的話，去一些版權(quán)圖庫上搜索自己想要的素材，然后直接付費(fèi)吧。如果實(shí)在不想掏那十幾塊錢，不妨試試那幾個(gè)萬能的電商軟件。

解決好上面兩個(gè)問題，還剩一個(gè)配色，我覺得對頁面整體的效果影響很大。

起初搭建網(wǎng)站的時(shí)候，我的做法是從上到小都使用一個(gè)統(tǒng)一的白色。但是后面能力稍微提升了點(diǎn)，自然就對頁面效果有了更高的要求。

但是我自己是不會搭配顏色的，一般獲取配色的渠道有兩個(gè)，分別是看同行案例與查詢專業(yè)的配色網(wǎng)站。

平時(shí)調(diào)研的調(diào)研信息時(shí)候，看到不錯(cuò)的頁面直接記錄下來，然后用取色器保存下他們的配色方案。

這樣的案例積累的多了，后面自然也就知道什么顏色搭配什么顏色了。

除此之外，還有一種能便捷獲取配色的方式，即查詢專業(yè)的配色網(wǎng)站。

找這樣的網(wǎng)站其實(shí)非常簡單，直接在搜索引擎上搜索“color palettes”關(guān)鍵詞，便能發(fā)現(xiàn)很多很多這樣的網(wǎng)站，直接看你想看的結(jié)果就行了。

一般在設(shè)計(jì)頁面之前，我會確定核心主色（可以根據(jù)品牌 Logo 來確定），然后將這個(gè)主色放到配色網(wǎng)站里面去搜索，看看他們給的推薦是什么。

等有了反饋之后，選擇一個(gè)自己喜歡的配色方案，并將其應(yīng)用到網(wǎng)站的全局變量里就好了。

基本上這三步操作下來，我們做的頁面都能達(dá)到及格標(biāo)準(zhǔn)，且操作得更熟悉，后續(xù)的頁面效果越好。