許多開發(fā)人員認(rèn)為擅長設(shè)計是一種天生的能力，而創(chuàng)造力是與生俱來的。但是設(shè)計是一項可以像其他任何東西一樣學(xué)習(xí)的技能。你不必天生就可以創(chuàng)建一個漂亮的網(wǎng)站的藝術(shù)家，這需要實踐。

在身邊的小伙伴的博客，自己的網(wǎng)站來看，很多人都是用了開源后臺的網(wǎng)站模板，熟不知局限太大，自己想要的內(nèi)容板式也要跟著模板走，越往后看著自己的站點越不順眼，沒有一點成就感。本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。

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

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

●

①在人群中脫穎而出。

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

●

②練習(xí)技巧。

設(shè)計它會幫助你練習(xí)設(shè)計原則，工具，HTML和CSS。你將更容易開發(fā)用戶界面并將其引入網(wǎng)絡(luò)。設(shè)計出獨特且符合現(xiàn)代潮流的個人站點。以前接私活的時候，不會設(shè)計頁面，搬運其它站點頁面，導(dǎo)致自己修改圖片和部分頁面的時候，不會使用工具，設(shè)計出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。

●

③更好的應(yīng)用程序性能。

你的網(wǎng)站將是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括UI庫或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發(fā)送給用戶，則會對你網(wǎng)站的性能產(chǎn)生負(fù)面影響。加載慢，打開網(wǎng)頁慢，被很多人不接受。

●

④發(fā)展職業(yè)技能。

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

●⑤可能會很有趣。

創(chuàng)造出令自己感到驕傲的東西是一種有趣的經(jīng)歷。如果您花一些時間練習(xí)它，琢磨它，打造出屬于自己的頁面，豈不是更好，生活中發(fā)現(xiàn)美是一件很美好的事，但我覺得創(chuàng)造美更讓人覺得驕傲。開始設(shè)計你的網(wǎng)站，不要直接寫頁面，從代碼里設(shè)計頁面。很難從代碼編輯器中可視化設(shè)計，我建議先使用可視化設(shè)計工具，然后將結(jié)果轉(zhuǎn)換為代碼。現(xiàn)在有一些快速的代碼生成模板，我覺得小項目可以用一下，就比如說我們的個人站點，大型項目追求性能，就不合適了。

▲制作界面原型的軟件，我最喜歡的是 Balsamiq Mockups，一個手繪風(fēng)格的、輕量級的小軟件。我喜歡它的理由是：

快——它能讓我以最快的速度把界面原型畫出來。手繪風(fēng)格——用它畫出來的界面是不折不扣手繪風(fēng)格，很酷。都是現(xiàn)成的——它已經(jīng)內(nèi)置了常用的控件和圖標(biāo)，基本夠用了。開始你的表演

●①創(chuàng)建線框

第一步是

創(chuà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)航欄，頁眉，博客文章和頁腳。您可能不需要所有的這些內(nèi)容，可以將其保留為基本內(nèi)容，以后再添加。確定要包括的內(nèi)容并將這些部分合并到線框中。如果你在布局這塊遇到問題，可以查看一個類似的網(wǎng)站，模仿網(wǎng)站內(nèi)容的結(jié)構(gòu)，然后對其進行修改以適合你的需求。線框不一定是好的。在擁有合適位置的網(wǎng)站結(jié)構(gòu)之后，就可以轉(zhuǎn)向視覺設(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)化您的布局，以使元素大小適當(dāng)，對齊并在它們之間留出空間。

●⑤添加部分和占位符內(nèi)容

在看起來像一個網(wǎng)站之后，使其看起來更漂亮。通過弄清楚是什么使布局看起來有吸引力，可以模仿其他網(wǎng)站的逼格樣式來添加到自己的網(wǎng)站。在此階段，請考慮形狀，大小，邊界和陰影。用你喜歡的樣式逐漸升級基本矩形。

●⑥更新版式

字體和間距的設(shè)計對美觀大有幫助。如果排版得當(dāng)，即使是簡單的設(shè)計也可以是高質(zhì)量的。同樣，你可以模仿另一個網(wǎng)站或搜索字體和字體資源，以將其納入你的設(shè)計中。但是一定要注意版權(quán)。記得有家企業(yè)，不管字體版權(quán)問題，在自家網(wǎng)站使用方正字體，被告侵權(quán)，這是需要賠償?shù)摹?/p>

●⑦給它上色

接下來，為站點添加顏色。通過建立品牌來賦予網(wǎng)站特色?？紤]一下你希望網(wǎng)站如何吸引讀者。如果你希望它看起來干凈且極少，請選擇不太亮的顏色，漸變保持微妙，并選擇易于閱讀的字體。如果你希望它看起來有趣，請選擇明亮的顏色，使用鮮艷的漸變，應(yīng)用背景紋理，使用圓形元素，然后選擇醒目的字體。

添加顏色似乎令人生畏，但你無需了解顏色原理即可。如果您的設(shè)計是從黑白開始的，則可以選擇一種單色來強調(diào)元素，以賦予設(shè)計生命。如果你想超越此范圍，建議您選擇一種或兩種您喜歡的顏色，然后使用該顏色的不同亮度變化。這有助于創(chuàng)建一個具有凝聚力的主題，而不必成為色彩專家。選擇背景色和前景色時，請通過檢查顏色對比來牢記可讀性。例如，將深藍(lán)色設(shè)置為背景，然后將較淺的藍(lán)色設(shè)置為文本。對于白色背景色，可以將藍(lán)色的中等亮度用作標(biāo)題。將顏色合并到設(shè)計中后，請繼續(xù)檢查總體設(shè)計感并進行調(diào)整。

●⑧注意細(xì)節(jié)

在設(shè)計時，你應(yīng)該退后一步來查看整個設(shè)計并進行完善。通過用簡單的語言描述您所看到的內(nèi)容來批判你的設(shè)計，然后將該陳述轉(zhuǎn)換為需要解決的技術(shù)問題。

看起來緊湊嗎？增加填充和邊距。文字難讀？選擇更清晰的字體或增加字體大小。增加背景和前景之間的顏色對比度。

內(nèi)容難識別？添加具有較高字體粗細(xì)的標(biāo)題。在標(biāo)題和段落之間添加更多間距?？雌饋聿萋驶虿灰恢拢?/p>

在水平和垂直的直線上對齊元素。在設(shè)計程序中設(shè)置指南可以幫助確保元素正確對齊。調(diào)整填充和邊距，以保持垂直方向上一致的間距。通過建立標(biāo)題和段落的字體和大小來使文本一致。避免文本變化太多。確保所有顏色都符合你的調(diào)色板。

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

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

Github上有個項目是pix2code ，它可以直接將頁面生成HTML結(jié)構(gòu)并附加CSS代碼，已經(jīng)開源了，感興趣的可以去看看，確實很吊。國內(nèi)暫時還沒有這樣的項目，想搞拖拽開發(fā)的老板真是不少，但沒見過誰家真正做出來了，做不出來肯定不是技術(shù)不能實現(xiàn)，拖拽的本質(zhì)是在組件庫基礎(chǔ)上加了一層交互界面，所以組件化是拖拽開發(fā)的第一步，剩下的其實就是"layoutit"了，但要真正落地，就有很多限制。

可拖拽的組件應(yīng)該是封裝了控制層和視圖層的，原則上耦合越低越好，內(nèi)聚越高越好，自己渾然一體最好，只對外暴露配置項，也就是說將一個組件拖拽到界面上之后，得有一個動態(tài)生成配置面板的機制，"layoutit"也有一個簡單的配置機制，但遠(yuǎn)遠(yuǎn)不是生產(chǎn)級別的，這里可以統(tǒng)一約定一個規(guī)則，讓組件的配置項可以被讀取，也可以按組件枚舉，硬做到界面上，都可以，都有優(yōu)缺點；

互相依賴的組件之間的數(shù)據(jù)交互會有問題，因為各組件的輸入輸出不可能完全一致，也就做不到依賴組件之間無縫接入，常規(guī)開發(fā)中開發(fā)者會手動做一些"適配"工作，比如將A組件的輸出剪裁或修飾一下傳給B組件，但現(xiàn)在是搞拖拽，這個數(shù)據(jù)修飾沒法做了，可以修改組件做到可以互相適配，或者一步到位在拖拽系統(tǒng)上做一套數(shù)據(jù)修飾的中間功能，讓操作者自己適配，都可以，都有很大的缺點。所以在這里我們也只好一步步的自己切頁面了，盡可能是響應(yīng)式的，同時按設(shè)計稿填充的內(nèi)容在HTML結(jié)構(gòu)填充元素。

●②小技巧

將布局變成完整的設(shè)計時，我喜歡考慮將設(shè)計從上到下劃分為多個部分的水平線。頂部的導(dǎo)航欄可能是第一個切片。中間的可能是一個切片，底部的是一個切片，我會將他們用明顯的線條區(qū)分開來，使用不用的顏色，美觀而又清晰。

一般在企業(yè)的工作的時候，都是設(shè)計師給設(shè)計稿，叮囑效果，我們按照設(shè)計師的稿子從頭到下附帶交互效果直接切頁面，

●③后續(xù)步驟

頁面設(shè)計完成并用代碼制作了個人網(wǎng)站，接下來配置后臺和網(wǎng)站在服務(wù)器的部署了，這里我們使用

SiteServer CMS

內(nèi)容管理系統(tǒng)來作為我們網(wǎng)站的后臺。如何使用，，既然是自己設(shè)計網(wǎng)站，我們就不理會它里面的免費模板了。

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

總結(jié)

通過自己設(shè)計和代碼編寫，以及后期的上線，你將會學(xué)到這些。自己設(shè)計網(wǎng)站將幫助你練習(xí)設(shè)計技巧，并讓你的網(wǎng)站脫穎而出創(chuàng)建線框以構(gòu)造內(nèi)容和功能使用設(shè)計工具將線框變成視覺設(shè)計。從您喜歡的設(shè)計中獲取靈感對頁面的HTML結(jié)構(gòu)進行編碼，以幫助了解需要使用哪些CSS來轉(zhuǎn)換這些元素，使用CSS設(shè)置頁面樣式以完善匹配你的設(shè)計通過部署，將其用作實踐項目或繼續(xù)改進設(shè)計，將其提升到一個新的水平，有沒有正在自己設(shè)計搭建站點的小伙伴啊？或者感覺自己公司的設(shè)計師無非就是模仿還是模仿，不管設(shè)計啥都千篇一律的？一起交流下。

當(dāng)前名稱：如何設(shè)計和編碼制作個人網(wǎng)站？
本文網(wǎng)址：http://m.rwnh.cn/news21/226321.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、定制網(wǎng)站、網(wǎng)站制作、Google、網(wǎng)站營銷、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)