網(wǎng)站布局和設(shè)計(jì)指南，零基礎(chǔ)也能看懂！

時(shí)間：2023-10-06 08:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-06 08:18:01 來源：網(wǎng)站運(yùn)營

網(wǎng)站布局和設(shè)計(jì)指南，零基礎(chǔ)也能看懂?。涸?freeCodeCamp 社區(qū)閱讀原文。

如果你想兼職為客戶搭建網(wǎng)站，或只是建立自己的作品集，那么你可能面臨這樣的難題：

在沒有任何網(wǎng)站設(shè)計(jì)技巧的情況下，如何建立一個(gè)網(wǎng)站？

有以下方案可供你選擇：

• 你可以雇一個(gè)網(wǎng)站設(shè)計(jì)師——不過設(shè)計(jì)師或者說好的設(shè)計(jì)師收費(fèi)不低。
• 你也可以在 Fiverr，Upwork，豬八戒等等平臺(tái)找一個(gè)收費(fèi)低的設(shè)計(jì)師——但是你也知道這是有風(fēng)險(xiǎn)的。
• 或者你可以直接從網(wǎng)上下載一個(gè)免費(fèi)甚至是高級(jí)的主題模板——不過通常這并不能滿足你的所有要求

還有個(gè)方法是自己學(xué)習(xí)一些設(shè)計(jì)和布局網(wǎng)站的技巧，然后打造出自己的前端展現(xiàn)效果。

不過在你成為一名出色的設(shè)計(jì)師之前，不妨閱讀一下這篇文章。當(dāng)然了，如果你想制作復(fù)雜的網(wǎng)站，那還是得找一位專業(yè)設(shè)計(jì)師和你搭檔。

但是我也相信你可以學(xué)會(huì)如何設(shè)計(jì)簡(jiǎn)單的網(wǎng)站，這可以應(yīng)對(duì)大部分小企業(yè)的網(wǎng)站需求。

這個(gè)方法包括：

• 了解網(wǎng)站視覺呈現(xiàn)的基礎(chǔ)
• 調(diào)查現(xiàn)有網(wǎng)站設(shè)計(jì)以獲得靈感和想法

以上兩點(diǎn)正是我用來建立自己的網(wǎng)站的技巧。當(dāng)然，這只是一個(gè)很簡(jiǎn)單的設(shè)計(jì)，不是特別精致。但是通常簡(jiǎn)單的設(shè)計(jì)就可以滿足你的需求。

只要你掌握了設(shè)計(jì)布局網(wǎng)站的基礎(chǔ)，就可以建立自己的網(wǎng)站或是兼職給客戶定制。

當(dāng)然，你可以從每一次網(wǎng)站設(shè)計(jì)過程中積累經(jīng)驗(yàn)。隨著技能的提升，你將可以創(chuàng)造出越來越復(fù)雜的設(shè)計(jì)。

以下是這個(gè)過程中的關(guān)鍵步驟：

• 確定網(wǎng)站的基礎(chǔ)內(nèi)容
• 規(guī)劃網(wǎng)站布局
• 整合設(shè)計(jì)
• 完成作品

每一步都需要調(diào)查支撐——瀏覽其他網(wǎng)站看看他們是怎么做的，然后將其中好的部分復(fù)用到你自己的網(wǎng)站中。

需要重點(diǎn)提醒的是：我并不是鼓勵(lì)你去抄襲別人的樣式或者圖片。（最重要的是，簡(jiǎn)單的復(fù)制粘貼并不能提升你的技能。）

我的觀點(diǎn)是從別人優(yōu)秀的作品中獲得創(chuàng)意靈感，再創(chuàng)造出相似的設(shè)計(jì)。

確定網(wǎng)站的基礎(chǔ)內(nèi)容

在你選擇顏色或是字體之前，先回答以下幾個(gè)關(guān)于網(wǎng)站的常見問題：

1. 這個(gè)網(wǎng)站是用來推廣哪種業(yè)務(wù)的？

披薩店？攝影工作室？還是書店？網(wǎng)站推廣對(duì)于任何商業(yè)都是有用的，因此你可以任意選擇。

我們這次選擇推廣名叫 Central Coffee 的虛擬咖啡店。因?yàn)槿藗兌枷矚g喝咖啡，對(duì)不對(duì)？

2. 這個(gè)網(wǎng)站要包含什么樣的頁面？

網(wǎng)頁通用頁面包括主頁、關(guān)于我們、聯(lián)系我們和有關(guān)公司產(chǎn)品的介紹。

確定頁面構(gòu)造最好的方法就是先做一個(gè)簡(jiǎn)單的在線調(diào)查。

調(diào)查現(xiàn)有網(wǎng)站

選擇3-4個(gè)相似行業(yè)的網(wǎng)站，觀察網(wǎng)站都包含哪些頁面。

注意網(wǎng)站是如何設(shè)計(jì)的并記錄下來：

• 網(wǎng)站包含哪些頁面，
• 網(wǎng)站整體樣式是怎樣的，
• 導(dǎo)航和搜索的便捷性，
• 還有其他你感興趣的方面。

Theme Forest 是一個(gè)尋找示例網(wǎng)站很好的地方，上面有大量免費(fèi)和高級(jí)的網(wǎng)站模板以及主題。如果你有關(guān)注最流行的主題，就會(huì)知道他們通常是好設(shè)計(jì)的典范。

下面是一個(gè)我找到的咖啡店示例：

The7

頁面： 單頁網(wǎng)站包含以下模塊：主頁、關(guān)于我們、地址、價(jià)格、菜單、新聞、媒體報(bào)道、博客

樣式： 現(xiàn)代簡(jiǎn)潔，高質(zhì)圖片

導(dǎo)航： 便捷導(dǎo)航

這些是我從“芝加哥的咖啡店” 研究中找到的一些網(wǎng)站：

The Wormhole Coffee

頁面： 主頁、博客、地址/聯(lián)系方式、工作機(jī)會(huì)

樣式： 偏現(xiàn)代風(fēng)，店鋪照片走復(fù)古風(fēng)

導(dǎo)航： 并不很容易看出這是一家咖啡店，網(wǎng)站導(dǎo)航有點(diǎn)難度

Caffe Streets

頁面： 單頁網(wǎng)站，模塊包含：主頁、咖啡（關(guān)于我們）、菜單、烘焙、時(shí)間機(jī)器（果汁）以及聯(lián)系表格

樣式： 現(xiàn)代簡(jiǎn)約風(fēng)（方格布局）

導(dǎo)航： 我很喜歡固定下拉菜單的設(shè)計(jì)，點(diǎn)擊每個(gè)菜單可以看到相應(yīng)的內(nèi)容。

Build Coffee

頁面： 單頁網(wǎng)站，模塊包括：主頁、關(guān)于我們、營業(yè)時(shí)間、地址、網(wǎng)上商城、餐飲、活動(dòng)以及聯(lián)系方式

樣式： 簡(jiǎn)約風(fēng)，白底文字中間穿插全幅圖片

導(dǎo)航： 很容易導(dǎo)航

Sawada Coffee

頁面： 主頁、關(guān)于我們、食品飲料、媒體報(bào)道、聯(lián)系方式及營業(yè)時(shí)間、餐廳以及招聘信息

樣式： 主要為圖片，文字較少

導(dǎo)航： 導(dǎo)航不太容易找-我差點(diǎn)沒注意到右邊角落的側(cè)邊欄

記錄下對(duì)自己網(wǎng)站有用的點(diǎn)

瀏覽了一些咖啡店網(wǎng)站之后，我們更清楚他們的相似點(diǎn)，心中也大致了解哪些對(duì)我們有用哪些用處不大。

基于以上調(diào)查，你可以記下對(duì)自己網(wǎng)站有用的點(diǎn)。

我認(rèn)為即將建立的 Central Coffee 網(wǎng)站，是包含以下模塊的簡(jiǎn)約風(fēng)單頁網(wǎng)站：

• 頭部導(dǎo)航欄
• 主頁
• 關(guān)于我們
• 菜單
• 地址/聯(lián)系方式
• 頁腳

規(guī)劃網(wǎng)站布局

此刻我們已經(jīng)勾畫出這個(gè)網(wǎng)站有了的大致框架，接下來就是確定各個(gè)頁面或者模塊需要填充的內(nèi)容。我們最終確定的布局也可以被稱為“線框圖”。

現(xiàn)在我們還沒給這個(gè)線框圖具體的設(shè)計(jì)，也就是字體、顏色或者照片都不確定。我們只需要大致清楚需要填充什么類型的內(nèi)容，或是他們?cè)陧撁嬷械奈恢?。這更像是現(xiàn)階段的結(jié)構(gòu)圖或是藍(lán)圖。

頭部導(dǎo)航

我喜歡 Seven Coffee 和 Caffe Streets 的頂部導(dǎo)航欄。




不過這兩個(gè)網(wǎng)站的 logo 都是居中的，我喜歡設(shè)置為靠左，首先是 logo，然后是其他部分。

這是桌面版本，對(duì)于平板電腦和手機(jī)，可以默認(rèn)在頂部排列 logo 和側(cè)邊欄。

點(diǎn)擊側(cè)邊欄，從右邊展示收縮導(dǎo)航菜單。

主頁

因?yàn)檫@是單頁網(wǎng)站，“主頁”就是一進(jìn)入網(wǎng)站時(shí)在屏幕上看到的部分。我喜歡 Seven Coffee 網(wǎng)站店名下的小標(biāo)簽設(shè)計(jì)。

這里可以是一張背景圖片（像是 Build Coffee）上面有文字，這樣的布局同時(shí)適用于電腦和手機(jī)端。

關(guān)于我們

所有的網(wǎng)站的都會(huì)有簡(jiǎn)短的關(guān)于我們模塊，有些是圖片介紹。我準(zhǔn)備放一段關(guān)于咖啡店的介紹文字以及一些店內(nèi)環(huán)境照片，這樣可以吸引用戶來店里看看。

菜單

每家網(wǎng)站都有不同的菜單：

• Seven Coffee 的菜單是一個(gè)價(jià)格表
• Caffe Streets 只有商品清單
• Build and Sawada 提供的是 PDF 版本菜單的外部鏈接

我個(gè)人不喜歡在手機(jī)上瀏覽網(wǎng)站的時(shí)候還需要下載個(gè) PDF 文件，因此我準(zhǔn)備提供帶有圖片的簡(jiǎn)易食品飲料菜單。

地址/聯(lián)系方式

我想把地址、營業(yè)時(shí)間和聯(lián)系方式放在頁面底部。用戶習(xí)慣從網(wǎng)站頂部開始滾動(dòng)到底部，這樣把有行動(dòng)訴求的放在底部，當(dāng)他們?yōu)g覽完所有內(nèi)容想著接下來的行動(dòng)時(shí)，這些內(nèi)容可以促進(jìn)他們采取行動(dòng)，特別是看到咖啡店的路線指引。

頁腳

頁腳部分很小，只有小塊的版權(quán)信息。

完整框架

下面是我用免費(fèi)在線工具M(jìn)ockflow創(chuàng)建的電腦和手機(jī)版本的完整網(wǎng)頁框架。在這個(gè)網(wǎng)站上創(chuàng)建首個(gè)項(xiàng)目是免費(fèi)的，之后如果你還需要?jiǎng)?chuàng)建模板，就需要付費(fèi)。Mockflow 很好上手，我也很喜歡這種素描風(fēng)格，挺有趣的。

確定基礎(chǔ)設(shè)計(jì)規(guī)范

再提醒一下，我們不是要制作一個(gè)很詳細(xì)很漂亮的網(wǎng)站。不過我們也需要掌握一些基礎(chǔ)，像是：

色彩方案

簡(jiǎn)單來說，色彩方案就是用于網(wǎng)站的不同顏色，就像是繪畫、裝修自己的家一樣。通常你會(huì)大面積使用像是灰色白色的中性色調(diào)，再結(jié)合一兩種明亮重點(diǎn)的顏色以突出重要的部分，例如鏈接和按鈕。

如果你需要一些色彩靈感，可以嘗試sample color palettes這樣的畫布。

而對(duì)于我們的網(wǎng)站 Central Coffee，我將使用 Canva 鏈接中的 Fall Collection——這是個(gè)基于棕色的暖色調(diào)。

我試圖營造舒適懷舊的咖啡店風(fēng)格。

字體

回到之前提到的網(wǎng)站，其中大部分網(wǎng)站都使用無襯線字體（這種字體沒有襯線，或是像打印出來的文字）。

對(duì)于大部分文字內(nèi)容，我會(huì)選擇簡(jiǎn)單的字體，對(duì)于標(biāo)題和提要?jiǎng)t使用好看加粗的字體。

你可以通過 Google Fonts 找到適用于你網(wǎng)站的免費(fèi)字體，但是盡量不要選擇太多，因?yàn)椴煌淖煮w、字重和樣式都會(huì)增加網(wǎng)站的加載時(shí)間。

圖片/照片

選擇一種適合網(wǎng)站商業(yè)類型的樣式。對(duì)于咖啡店來說，你通常會(huì)選擇吸引人的照片，像是體現(xiàn)燈光柔和、復(fù)古舒適的店內(nèi)環(huán)境以及人們?cè)诘陜?nèi)輕松交談以及店內(nèi)的食品飲料的圖片。

你也可以從免費(fèi)的設(shè)計(jì)網(wǎng)站上找到適合你網(wǎng)站的配圖和 logo，例如：

• Canva
• Vectr
• Snappa

建立網(wǎng)站

現(xiàn)在我們已經(jīng)有了展示各個(gè)部分布局的線框圖，也有關(guān)于前端樣式的設(shè)計(jì)指南。

因?yàn)槲覀儧]有可以給出詳細(xì) PSD 的設(shè)計(jì)師，所以可以直接對(duì)照著之前建造的框架來開始編寫我們的網(wǎng)站。

我通常編寫網(wǎng)站前端的步驟如下：

1. 建立網(wǎng)站文件
2. 構(gòu)建文件結(jié)構(gòu)
3. 讓任務(wù)跑起來（我用的是 Gulp）
4. 為每個(gè)模板建立單獨(dú)的 HTML 文件

接下來對(duì)于每個(gè) HTML 文件進(jìn)行以下步驟：

1. 創(chuàng)建基礎(chǔ) HTML 元素的框架
2. 一個(gè)個(gè)編寫頁面元素
3. 為每個(gè)元素加入 css 樣式，首先要確保每塊內(nèi)容的正確布局
4. 檢查頁面在瀏覽器中的展示，并繼續(xù)修改優(yōu)化

確保你的網(wǎng)頁是響應(yīng)式的

在編寫網(wǎng)站時(shí)，應(yīng)該確保你的樣式在電腦、平板以及手機(jī)上展現(xiàn)的樣式是差不多的。

你可以在電腦上檢查不同瀏覽器的顯示樣式，而對(duì)于手機(jī)端，你也可以使用谷歌瀏覽器的開發(fā)者工具來模擬不同手機(jī)設(shè)備的顯示效果。

要知道模擬工具不會(huì)百分百模擬出你實(shí)際在手機(jī)或是平板上看到的效果，因此最終還是要在真機(jī)上檢查實(shí)際顯示效果。

有以下網(wǎng)站可供模擬移動(dòng)設(shè)備調(diào)試：

• Responsinator.com （免費(fèi)）
• Screenfly by Quirktools （免費(fèi)）
• Browserstack （收費(fèi)）——Browserstack 可以讓你在真機(jī)上調(diào)試效果。

作品完成!

這張是完成后的 Central Coffee 網(wǎng)站截圖。

你也可以通過 on my Github.io page 自己檢查下網(wǎng)站效果。

以上就是我在沒有聘請(qǐng)?jiān)O(shè)計(jì)師的情況下自己設(shè)計(jì)建立的網(wǎng)站。

希望這篇文章對(duì)你有用。如果你有任何想法也可以在下方評(píng)論區(qū)留言。