很多開發(fā)者認為，善于設(shè)計是一種與生俱來的能力，創(chuàng)造力是與生俱來的。 但設(shè)計是一種可以像其他任何東西一樣學(xué)習(xí)的技能。 您不一定非要成為藝術(shù)家才能創(chuàng)建漂亮的網(wǎng)站，這需要練習(xí)。 看身邊朋友的博客和自己的網(wǎng)站，很多人用的是開源的后臺網(wǎng)站模板。 不知道是局限性太大，想要的內(nèi)容格式必須按照模板來。 網(wǎng)站越不順眼，越?jīng)]有成就感。

本文將向您展示如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)化為代碼的過程來實踐設(shè)計。

為什么要自己設(shè)計？

當(dāng)您可以使用 UI 庫或預(yù)制模板時，為什么要自己設(shè)計？以下是設(shè)計網(wǎng)站的一些好處。

●①在人群中脫穎而出。 許多開發(fā)人員博客都使用類似的模板，很容易看出它并不是自己設(shè)計的。 如果你的個人網(wǎng)站的目的是展示你的能力，那么使用模板可能會降低別人對你的肯定，而你自己設(shè)計的獨特風(fēng)格會讓你的網(wǎng)站在眾多網(wǎng)站中脫穎而出。

●②練習(xí)技巧。 設(shè)計它將幫助您實踐設(shè)計原則、工具、HTML 和 CSS。 您可以更輕松地開發(fā)用戶界面并將它們帶到網(wǎng)絡(luò)上。 設(shè)計一個獨特而現(xiàn)代的個人網(wǎng)站。

以前做私活的時候，不知道怎么設(shè)計頁面，搬其他站點頁面的時候，修改圖片和一些頁面的時候不知道怎么用工具。 設(shè)計的頁面是僵硬和不靈活的。 客戶不滿意。 ，沒有給你心動的感覺。

●③ 更好的應(yīng)用性能。 您的網(wǎng)站將是輕量級的，并且使用自定義 CSS 具有更好的性能。 如果您包含一個 UI 庫或模板，它可能包含大量代碼以涵蓋您未使用的所有可能的自定義設(shè)置。 如果將未使用的代碼發(fā)送給用戶，可能會對您網(wǎng)站的性能產(chǎn)生負面影響。 網(wǎng)頁加載慢、打開慢是很多人不能接受的。

●④ 發(fā)展職業(yè)技能。 在 Web 開發(fā)角色中，您可能不必從頭開始實施完整的網(wǎng)站設(shè)計，但您應(yīng)該能夠制作出與現(xiàn)代設(shè)計一致的美觀界面。 成為“全棧開發(fā)者”通常意味著精通后端語言或前端框架，同時熟悉設(shè)計和產(chǎn)品知識。 全棧開發(fā)人員應(yīng)該具備一些基本的設(shè)計知識，并能夠為用戶提供一致的體驗。 當(dāng)然，我從中學(xué)到了很多技能和知識，這是毋庸置疑的。

●⑤可能會很有趣。 創(chuàng)造讓您引以為豪的東西是一種有趣的體驗。 如果你花一些時間來練習(xí)它，磨練它，創(chuàng)建你自己的頁面，那不是很好嗎，發(fā)現(xiàn)生活中的美是一件美麗的事情，但我認為創(chuàng)造美更值得驕傲。

開始設(shè)計你的網(wǎng)站，不要直接寫頁面，從代碼設(shè)計頁面。 很難從代碼編輯器中可視化設(shè)計，我建議先使用可視化設(shè)計工具，然后將結(jié)果轉(zhuǎn)換為代碼。 現(xiàn)在有一些快速代碼生成模板，我覺得小項目可以用，比如我們個人站點，大項目不適合表現(xiàn)。

▲制作界面原型的軟件，我最喜歡的是一款手繪的輕量級軟件。 我喜歡它的原因是：

開始你的表演

●①創(chuàng)建線框

第一步是創(chuàng)建網(wǎng)站的低保真線框。 創(chuàng)建線框有助于在添加視覺設(shè)計和內(nèi)容之前建立頁面結(jié)構(gòu)。 線框不一定要漂亮，它應(yīng)該專注于內(nèi)容的布局。 您可以手繪，也可以使用設(shè)計工具的基本功能。

為了創(chuàng)建線框，我喜歡將設(shè)計視為一系列矩形。 網(wǎng)頁上的元素是從上到下流動的矩形塊。 從矩形開始不需要藝術(shù)天賦。

●②網(wǎng)站結(jié)構(gòu)

您在線框中放置的元素由您決定。 您可以考慮添加導(dǎo)航欄、頁眉、博客文章和頁腳。 您可能不需要所有這些，可以讓它們保持基本狀態(tài)，稍后再添加。 確定要包含的內(nèi)容并將這些部分合并到線框中。 如果您在布局方面遇到問題，請查看類似的網(wǎng)站，模仿該網(wǎng)站內(nèi)容的結(jié)構(gòu)，然后根據(jù)您的需要進行修改。

線框不必是完美的。 網(wǎng)站結(jié)構(gòu)到位后，您可以繼續(xù)進行視覺設(shè)計。

●③ 應(yīng)用視覺設(shè)計

要將低保真線框轉(zhuǎn)換為設(shè)計，您可以使用免費的設(shè)計工具，例如 Figma（下一代設(shè)計神器）。 如果你沒用過設(shè)計程序，也可以用ps來實現(xiàn)，但是會有點慢，不過我在國內(nèi)還沒找到像Figma這么好用的工具。

●④實施布局

首先，創(chuàng)建一個空白畫布來表示一個空白瀏覽器頁面。 通過為您的內(nèi)容創(chuàng)建容器，在您的設(shè)計工具中實現(xiàn)線框。 我建議先從黑白開始，這樣您就可以專注于布局。

優(yōu)化您的布局，使元素大小合適、對齊并在它們之間留有空間。

●⑤添加節(jié)和占位符內(nèi)容

看起來像一個網(wǎng)站后，讓它看起來更漂亮。 通過弄清楚是什么讓布局看起來有吸引力，您可以模仿其他網(wǎng)站的外觀以添加到您自己的網(wǎng)站中。

在此階段，考慮形狀、大小、邊框和陰影。 逐漸升級基本的矩形，變成你喜歡的風(fēng)格。

●⑥更新布局

排版和間距對美學(xué)有很大幫助。 如果排版正確，即使是簡單的設(shè)計也可以是高質(zhì)量的。 同樣，您可以模仿另一個網(wǎng)站或搜索字體和字樣資源以融入您的設(shè)計中。 但一定要注意版權(quán)。

記得曾經(jīng)有一家公司不顧字體版權(quán)問題，在自己的網(wǎng)站上使用方正字體，被指控侵權(quán)，需要賠償。

●⑦上色

接下來，為網(wǎng)站添加顏色。 通過建立您的品牌來賦予您的網(wǎng)站特色。 想想您希望您的網(wǎng)站如何吸引讀者。 如果您希望它看起來干凈簡潔，請選擇不太亮的顏色，保持漸變微妙，并選擇易于閱讀的字體。 如果你想讓它看起來有趣，選擇明亮的顏色，使用充滿活力的漸變，應(yīng)用背景紋理，使用圓形元素，并選擇粗體。

添加顏色看起來很嚇人，但您不需要知道它是如何工作的。 如果您的設(shè)計以黑白兩色開始，您可以選擇單色來突出元素，使設(shè)計栩栩如生。 如果你想超越這一點，我建議你選擇一種或兩種你喜歡的顏色，并使用該顏色的不同亮度變化。 這有助于創(chuàng)建一個有凝聚力的主題，而無需成為色彩專家。 選擇背景色和前景色時，請通過檢查顏色對比度來牢記可讀性。

例如，為背景設(shè)置深藍色，為文本設(shè)置淺藍色。 對于白色背景顏色，您可以為標(biāo)題使用中等深淺的藍色。

將顏色融入設(shè)計后，繼續(xù)檢查整體設(shè)計感覺并進行調(diào)整。

●⑧注重細節(jié)

設(shè)計的時候，應(yīng)該退后一步，審視整個設(shè)計，細化。 通過用簡單的語言描述你所看到的來批評你的設(shè)計，然后將該陳述轉(zhuǎn)化為要解決的技術(shù)問題。

它看起來緊湊嗎？ 增加填充和邊距。 文字閱讀困難？ 選擇更清晰的字體或增大字體大小。 增加背景和前景之間的顏色對比度。 內(nèi)容難以識別？ 添加具有更高字體粗細的標(biāo)題。 在標(biāo)題和段落之間添加更多間距。 看起來草率或不一致？ 在水平和垂直線上對齊元素。 在設(shè)計器中設(shè)置參考線有助于確保元素正確對齊。 調(diào)整填充和邊距以保持一致的垂直間距。 通過為標(biāo)題和段落設(shè)置字體和大小使文本保持一致。 避免過多的文本更改。 確保所有顏色都適合您的調(diào)色板。

設(shè)計完成后，就該開始將其轉(zhuǎn)換為代碼了

●①創(chuàng)建HTML結(jié)構(gòu)

網(wǎng)站上有一個項目可以直接生成頁面的HTML結(jié)構(gòu)并添加CSS代碼。 它已經(jīng)開源。 如果你有興趣，可以去看看。 真的是掛了。

中國沒有這樣的項目。 想搞拖拽式開發(fā)的大佬倒是不少，但沒見過誰真正做到了。 如果做不到，那絕對不是技術(shù)實現(xiàn)不了。 拖放的本質(zhì)是在組件庫的基礎(chǔ)上添加組件。 增加了一層交互界面，所以組件化是拖拽式開發(fā)的第一步，剩下的其實就是“”，但真正實現(xiàn)起來有很多限制。

可拖動組件應(yīng)該封裝控制層和視圖層。 原則上耦合度越低越好，內(nèi)聚度越高越好。 最好自己集成，只對外暴露配置項，也就是說，拖一個組件到界面后，要有動態(tài)生成配置面板的機制。 ""也有簡單的配置機制，但離生產(chǎn)級別還差得很遠。 這里可以約定一個規(guī)則，從而可以讀取組件的配置項。 也可以通過組件枚舉，也可以在界面上做，兩者各有利弊；

相互依賴的組件之間的數(shù)據(jù)交互會出現(xiàn)問題，因為各個組件的輸入輸出不能完全一致，依賴組件之間無法實現(xiàn)無縫訪問。 常規(guī)開發(fā)中，開發(fā)者會手動做一些“適配”的工作，比如對組件A的輸出進行裁剪或者修飾，傳遞給組件B，但是現(xiàn)在是拖拽，這個數(shù)據(jù)修改做不了，你可以修改組件，讓它們相互適配，或者在拖拽系統(tǒng)中一步到位 可以在網(wǎng)上做一套數(shù)據(jù)修改的中間函數(shù)，讓操作者自己去適配，但兩者都有很大的缺點。

所以這里我們要一步步切分頁面，盡可能的響應(yīng)式，按照設(shè)計稿填寫的內(nèi)容填寫HTML結(jié)構(gòu)中的元素。

●②小貼士

當(dāng)把一個布局變成一個完整的設(shè)計時，我喜歡考慮將設(shè)計從上到下分成幾個部分的水平線。 頂部的導(dǎo)航欄可能是第一個切片。 中間的可能是一片，最下面的可能是一片。 我會用明顯的線條來區(qū)分它們，并用不同的顏色，既美觀又清晰。

一般在企業(yè)工作，都是設(shè)計師給出設(shè)計稿，說出效果。 我們從頭到尾跟著設(shè)計師的稿子，加上交互效果，直接把頁面剪下來。

●③下一步

頁面設(shè)計完成，用代碼制作個人網(wǎng)站，然后后臺配置，網(wǎng)站部署到服務(wù)器上。 這里我們使用CMS內(nèi)容管理系統(tǒng)作為我們網(wǎng)站的后臺。 使用方法，點擊閱讀，由于是自己設(shè)計的網(wǎng)站，所以忽略里面的免費模板。

至于后期的網(wǎng)站速度優(yōu)化，之前也提到過代碼優(yōu)化，寫了一篇文章詳細講解，大家也可以看看。

你不知道的“前端性能優(yōu)化”知識我都總結(jié)了

網(wǎng)站打開速度慢，這些才是重點，不要覺得不重要

總結(jié)

您將通過自己設(shè)計和編碼，然后上網(wǎng)來學(xué)習(xí)這一點。

有朋友在自己設(shè)計和搭建自己的網(wǎng)站嗎？ 或者覺得你們公司的設(shè)計師無非是模仿就是模仿，不管是什么設(shè)計，都是一樣的？ 讓我們一起交流吧。