原文：http:///web-design-tutorial

如果你想學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，隨便到圖書館或網(wǎng)上一找，便會(huì)發(fā)現(xiàn)，怎麼這麼多資料？

網(wǎng)上關(guān)於網(wǎng)頁(yè)設(shè)計(jì)的資料雖然很多，但就是資料太多，初學(xué)者根本無從入手。

我叫Jack，是一位Awwwards認(rèn)可得獎(jiǎng)，有多年的編程教學(xué)經(jīng)驗(yàn)的編程員。

今天，這篇「網(wǎng)頁(yè)設(shè)計(jì)教學(xué)2019 - 9個(gè)課程」，將會(huì)分開9個(gè)章節(jié)，由基本概念，架站方法到編程學(xué)習(xí)路徑等。內(nèi)容濃縮至你真的需再知道才會(huì)講解，用最簡(jiǎn)單易明的「人話」去說明各種概念，讓你打穩(wěn)基礎(chǔ)，好好去學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)。

如果你正在想學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，看這篇文章就對(duì)了！

準(zhǔn)備好了？我們開始吧！

1. 基本概念

要編寫一個(gè)網(wǎng)頁(yè)，原來可以分為前臺(tái)（Frontend)及後臺(tái)（Backend)。

前臺(tái)（Frontend）就是網(wǎng)頁(yè)的外觀。例如你看到的文字，圖片，美麗的排版等等，通通都是前臺(tái)（Frontend）。

後臺(tái)（Backend）就是網(wǎng)頁(yè)的功能。例如網(wǎng)站可以讓你註冊(cè)，提交數(shù)據(jù)等等，就是後臺(tái)（Backend）。

還是不明白？讓我們看看這個(gè)例子：

假設(shè)你到一家網(wǎng)店買東西，看見一個(gè)漂亮的主頁(yè)。

在主頁(yè)中，你看見一件T Shirt，於是按了那T Shirt一下。現(xiàn)在你處?kù)禩 Shirt這頁(yè)。

然而，事實(shí)上，當(dāng)你由Home到T Shirt時(shí)，中間其實(shí)會(huì)經(jīng)過一臺(tái)Server（伺服器）。

在這臺(tái)Server（伺服器）上，會(huì)有一些Program運(yùn)行。而這些Program，是有Logic的。比方說，可能你以前從來沒有訪問過這網(wǎng)站。於是，它便不讓你看到T Shirt這頁(yè)，反而是帶你到Register這一頁(yè)。

另外一個(gè)情況，就是你原來已訪問過這網(wǎng)站。因此，它今次便會(huì)帶到T Shirt這頁(yè)。

在Server上的這些Program，便是後臺(tái)（Backend)。

接下來，我們來看看Frontend及Backend，是由什麼編程語(yǔ)言組成的。

Frontend是由3種編程語(yǔ)言組成，它們分別是：

1. HTML

2. CSS

3. Javascript

至於Backend，則有很多種選擇：PHP, NodeJS, C, JAVA, RUBY, PHY, Python......我們只要選擇一種來用就可以。

2. 內(nèi)容管理系統(tǒng)(CMS)

接下來，另外一個(gè)重要概念，就是內(nèi)容管理系統(tǒng)(CMS)。

CMS的全寫叫Content Management System。意思就是讓一個(gè)不懂編程的人，也能夠更新網(wǎng)頁(yè)的內(nèi)容。

有了一個(gè)CMS後，你便可以像更新Facebook一樣，輕易地更新網(wǎng)頁(yè)內(nèi)容。

跟據(jù)https://trends./cms，Wordpress是現(xiàn)今最多人用的CMS。

3. 響應(yīng)式設(shè)計(jì)(Responsive)

現(xiàn)今的網(wǎng)站，約有1/3的流量都是從手機(jī)而來。

因此，如何確保網(wǎng)站在手機(jī)，IPAD等都美觀地顯示，也是一個(gè)重要的題目。

而最常見的處理手法，就是使用響應(yīng)式設(shè)計(jì)(Responsive)。

讓我們看看例子吧：

在桌面上是這樣的：

在手機(jī)上則是這樣的。

你會(huì)看到，透過一些外觀的小改動(dòng)，在桌面或手機(jī)也可以美麗地呈現(xiàn)網(wǎng)頁(yè)。

我們通常會(huì)利用CSS，及少許Javascript做到Responsive的效果。

4. 架站步驟

一般來說，要建立一個(gè)網(wǎng)站或平臺(tái)，一共有4個(gè)步驟。

他們分別是：

1. 用家體驗(yàn) （USER EXPERIENCE）

2. 資訊架構(gòu) （INFORMATION ARCHITECTURE）

3. 設(shè)計(jì) （VISUAL DESIGN）

4. 開發(fā) （DEVELOPMENT）

1. 用家體驗(yàn) （USER EXPERIENCE）

建立一個(gè)網(wǎng)站的第一步，原來並不是直接坐下來畫layout或是做Programming。反而，你應(yīng)該要跳出自己是設(shè)計(jì)師的身份，把自己當(dāng)作網(wǎng)站的用戶，想想看：

• 網(wǎng)站的用戶是誰(shuí)？

• 他們年紀(jì)有多大？是男是女？

• 他們有什麼特點(diǎn)？興趣？

• 他們?yōu)槭颤N要上你的網(wǎng)頁(yè)？有什麼目標(biāo)？

• 有什麼功能是他們喜愛/不喜愛的？

如果可以的話，最好是找出這班目標(biāo)用戶，和他們聊聊天吧！

不要小看這些語(yǔ)句！遲一點(diǎn)你在為網(wǎng)頁(yè)寫文字內(nèi)容的時(shí)候，這些語(yǔ)句會(huì)對(duì)你幫助很大。因?yàn)樗麄兌际菑哪繕?biāo)用戶親口說出來的。

2. 資訊架構(gòu) （INFORMATION ARCHITECTURE）

第2步，我們叫「資訊架構(gòu)（INFORMATION ARCHITECTURE）」。這一步有點(diǎn)像一個(gè)橋樑，去把你想做的東西，變成編程員會(huì)看得懂的東西。

資訊架構(gòu)（INFORMATION ARCHITECTURE）通常有以下的東西：

• Sitemap

• WireFrame

Sitemap很容易去理解。你網(wǎng)頁(yè)將會(huì)有什麼頁(yè)，便把它們都列出來。如下圖，網(wǎng)站有Home, Service, Contact等頁(yè)：

WireFrame則是用一枝筆，把網(wǎng)頁(yè)大概的樣子畫出來：

上圖其實(shí)是twitter的wireframe! (來源：
https://www./photos/jackdorsey/182613360)

3. 設(shè)計(jì) （VISUAL DESIGN）

當(dāng)有了sitemap及wireframe後，我們便會(huì)把它交給設(shè)計(jì)師去做設(shè)計(jì)。

設(shè)計(jì)師通常會(huì)使用AI，Photoshop，ADOBE XD等軟件去做設(shè)計(jì)。如下圖：

4. 開發(fā) （DEVELOPMENT）

當(dāng)設(shè)計(jì)完成後，你便可以把設(shè)計(jì)交給編程員，去做開發(fā)了。

編程員通常會(huì)跟著設(shè)計(jì)，把外觀Frontend做好，然後再做後面的功能Backend或把網(wǎng)頁(yè)連上CMS。

5. 常見的3種架站方法

在前一章，你學(xué)習(xí)了不同的概念，如Frontend/Backend，CMS等等。

然而，作為新手的你，想實(shí)際去建立一個(gè)網(wǎng)站，究竟有什麼方法呢？

以下是現(xiàn)今, 市面上最常見的3種架站方法：

1. 使用第3方服務(wù)如wix/shopify

如果你不想編程，最簡(jiǎn)單的架站方法，就是使用第3方服務(wù)如wix/shopify，去建立一個(gè)網(wǎng)站。

wix/shopify提供簡(jiǎn)易的drag & drop介面，讓你使用他們的模版，去建立網(wǎng)站。

wix.com讓你建立一般的公司網(wǎng)頁(yè)：

shopify.com讓你建立網(wǎng)店：

當(dāng)然，使用這些第3方服務(wù)也有其缺點(diǎn)。就是你沒有網(wǎng)站源代碼掌控權(quán)（因?yàn)槟闶窃谑褂盟麄兊姆?wù)）。因此，網(wǎng)站的靈活度，可擴(kuò)充性會(huì)較低。另外，某部分服務(wù)也可能需要收費(fèi)。

2. 使用Wordpress架站

利用Wordpress架站是另外一個(gè)非常流行的方法。

Wordpress是一個(gè)最多人使用的CMS。它是免費(fèi)，開源，也具備大量模版及可擴(kuò)充的功能。即使你不懂編程，你也可以利用wordpress架站。

利用wordpress架站的難度，會(huì)比wix/shopify高一點(diǎn)。（因?yàn)槟氵€需要設(shè)置伺服器等）然而，它的靈活度及可擴(kuò)充性則會(huì)大得多。你是完全掌控網(wǎng)站源代碼的。因此，你會(huì)編程的話，基本上任何的功能，外觀也可以加到你的網(wǎng)站裡。

了解更多Wordpress：Wordpress教學(xué)全攻略2019 - 15個(gè)課程

3. Custom Built Frontend + Backend

最後一種架站方法，當(dāng)然是自己Custom Built Frontend 和 Backend。這是我最常用的架站方法。聽下去好像很難，但其實(shí)現(xiàn)今的Frontend及Backend Framework已經(jīng)非常成熟，即使要從頭編寫一個(gè)網(wǎng)站外觀及功能，也可以很快。

6. 尋找靈感

在開始設(shè)計(jì)網(wǎng)站時(shí)，我們一定會(huì)做Research。

比方說，我正在為一家HR公司設(shè)計(jì)網(wǎng)頁(yè)。在設(shè)計(jì)前，我一定會(huì)先看看

• 其他HR公司的網(wǎng)頁(yè)(香港)

• 其他國(guó)家HR公司的網(wǎng)頁(yè)

• 香港/其他國(guó)家，做得出色的公司網(wǎng)頁(yè)

7. 培養(yǎng)設(shè)計(jì)美感

我在教授網(wǎng)頁(yè)設(shè)計(jì)時(shí)，發(fā)現(xiàn)學(xué)生常常遇到一個(gè)問題：

為什麼呢？

原來，他們?nèi)狈υO(shè)計(jì)美感。修改template時(shí)往往把它改得亂七八糟，不倫不類。

設(shè)計(jì)美感是要培養(yǎng)的。而最快去培養(yǎng)設(shè)計(jì)美感的方法，就是：

behance收集了世界各地最美麗的平面設(shè)計(jì)

awwwards收集了世界各地最美麗的網(wǎng)頁(yè)設(shè)計(jì)

最後，如果發(fā)現(xiàn)自己的設(shè)計(jì)美感還是不太行，在修改template時(shí)，就盡量不要做大的修改！以免改得不倫不類。

8. 編程學(xué)習(xí)路徑

好了！如果你終於下定決心，要學(xué)習(xí)網(wǎng)頁(yè)編程。那麼，你應(yīng)該從哪裡開始學(xué)起？

我的建議，是你應(yīng)該由Frontend語(yǔ)言開始學(xué)。

第一樣需要學(xué)習(xí)的是HTML（外觀的結(jié)構(gòu)）。

關(guān)於HTML的教學(xué)，可以參考以下文章：
HTML教學(xué)全攻略2019 - 9個(gè)課程

接下來可以學(xué)習(xí)CSS（讓外觀更美麗）。

學(xué)習(xí)完基本CSS後，你可以學(xué)習(xí)一些常用的CSS Framework，例如Bootstrap。再進(jìn)一步就是CSS的動(dòng)態(tài)元素，如CSS3 Animation，GSAP等等。

再下來就是javascript。

學(xué)習(xí)完基本javascript後，我們通常還會(huì)學(xué)習(xí)jQuery。jQuery是javascript以上的一個(gè)Framework，實(shí)際應(yīng)用很多。

至於後臺(tái)，你則需要選擇一種語(yǔ)言去專精。

在眾多後臺(tái)語(yǔ)言中，我會(huì)建議初學(xué)者學(xué)習(xí)PHP。因?yàn)楸容^普及又易學(xué)。

如果你想開發(fā)功能繁複的平臺(tái)，你更可以學(xué)習(xí)一些PHP MVC Framework，如Laravel等等。成為一個(gè)真正的Backend Developer。

9. 網(wǎng)址與伺服器

在前幾章節(jié)，我們常常提及到伺服器（Server）。

究竟，什麼是伺服器呢？

如何在茫?；ヂ?lián)網(wǎng)中找到這臺(tái)「伺服器」？當(dāng)然，它會(huì)有一個(gè)地址，這個(gè)地址就是叫IP Address。

IP Address通常都像這樣：192.3.4.2。很難記吧？因此，我們把它弄得易記一點(diǎn)，就變成網(wǎng)址(Domain)了。

明白了嗎？看到這裡，通過這9個(gè)章節(jié)，相信大家己對(duì)網(wǎng)頁(yè)設(shè)計(jì)，掌握了各種重要的基礎(chǔ)概念。

今天的教學(xué)到這裡，希望大家可以好好學(xué)習(xí)！