 原文：http:///web-design-tutorial 如果你想學(xué)習(xí)網(wǎng)頁設(shè)計(jì)，隨便到圖書館或網(wǎng)上一找，便會(huì)發(fā)現(xiàn)，怎麼這麼多資料？ 網(wǎng)上關(guān)於網(wǎng)頁設(shè)計(jì)的資料雖然很多，但就是資料太多，初學(xué)者根本無從入手。 我叫Jack，是一位Awwwards認(rèn)可得獎(jiǎng)，有多年的編程教學(xué)經(jīng)驗(yàn)的編程員。 今天，這篇「網(wǎng)頁設(shè)計(jì)教學(xué)2019 - 9個(gè)課程」，將會(huì)分開9個(gè)章節(jié)，由基本概念，架站方法到編程學(xué)習(xí)路徑等。內(nèi)容濃縮至你真的需再知道才會(huì)講解，用最簡單易明的「人話」去說明各種概念，讓你打穩(wěn)基礎(chǔ)，好好去學(xué)習(xí)網(wǎng)頁設(shè)計(jì)。 如果你正在想學(xué)習(xí)網(wǎng)頁設(shè)計(jì)，看這篇文章就對了！ 準(zhǔn)備好了？我們開始吧！目錄1. 基本概念要編寫一個(gè)網(wǎng)頁，原來可以分為前臺（Frontend)及後臺（Backend)。 前臺（Frontend）就是網(wǎng)頁的外觀。例如你看到的文字，圖片，美麗的排版等等，通通都是前臺（Frontend）。 後臺（Backend）就是網(wǎng)頁的功能。例如網(wǎng)站可以讓你註冊，提交數(shù)據(jù)等等，就是後臺（Backend）。 還是不明白？讓我們看看這個(gè)例子： 假設(shè)你到一家網(wǎng)店買東西，看見一個(gè)漂亮的主頁。
在主頁中，你看見一件T Shirt，於是按了那T Shirt一下。現(xiàn)在你處於T Shirt這頁。
到目前為止，你已經(jīng)看到了兩個(gè)layout，分別是Home及T Shirt。這兩個(gè)不同的layout，就是前臺（Frontend)。 然而，事實(shí)上，當(dāng)你由Home到T Shirt時(shí)，中間其實(shí)會(huì)經(jīng)過一臺Server（伺服器）。 在這臺Server（伺服器）上，會(huì)有一些Program運(yùn)行。而這些Program，是有Logic的。比方說，可能你以前從來沒有訪問過這網(wǎng)站。於是，它便不讓你看到T Shirt這頁，反而是帶你到Register這一頁。
另外一個(gè)情況，就是你原來已訪問過這網(wǎng)站。因此，它今次便會(huì)帶到T Shirt這頁。 在Server上的這些Program，便是後臺（Backend)。
後臺（Backend)除了有Program外，還會(huì)有Database（數(shù)據(jù)庫）。Database主要負(fù)責(zé)儲存數(shù)據(jù)，例如用戶的登入電郵，密碼等等。 接下來，我們來看看Frontend及Backend，是由什麼編程語言組成的。 Frontend是由3種編程語言組成，它們分別是：
HTML主要是負(fù)責(zé)外觀的結(jié)構(gòu)。 至於Backend，則有很多種選擇：PHP, NodeJS, C, JAVA, RUBY, PHY, Python......我們只要選擇一種來用就可以。 你可能會(huì)問，我應(yīng)該選擇哪一種語言來學(xué)呢？以我的經(jīng)驗(yàn)，PHP比較普遍，多人使用。NODEJS則功能強(qiáng)大，但很難學(xué)。C, JAVA, Python等等都是熱門的編程語言，但卻不是寫Website的最好選擇。 2. 內(nèi)容管理系統(tǒng)(CMS)接下來，另外一個(gè)重要概念，就是內(nèi)容管理系統(tǒng)(CMS)。 CMS的全寫叫Content Management System。意思就是讓一個(gè)不懂編程的人，也能夠更新網(wǎng)頁的內(nèi)容。 如果網(wǎng)頁沒有CMS，你不懂編程的話，是不能夠更新網(wǎng)頁內(nèi)容的！ 有了一個(gè)CMS後，你便可以像更新Facebook一樣，輕易地更新網(wǎng)頁內(nèi)容。 跟據(jù)https://trends./cms，Wordpress是現(xiàn)今最多人用的CMS。
像Wordpress，Drupal等等，我們稱之為「開源」的CMS。意思是它們的源代碼是公開的，全世界的編程員也可以一起維護(hù)，開發(fā)這些源代碼。你可以免費(fèi)，合法地使用它去為你或你的客人建立網(wǎng)站。 3. 響應(yīng)式設(shè)計(jì)(Responsive)現(xiàn)今的網(wǎng)站，約有1/3的流量都是從手機(jī)而來。 因此，如何確保網(wǎng)站在手機(jī)，IPAD等都美觀地顯示，也是一個(gè)重要的題目。 而最常見的處理手法，就是使用響應(yīng)式設(shè)計(jì)(Responsive)。 響應(yīng)式設(shè)計(jì)(Responsive)就是使用同一堆源碼，讓你的網(wǎng)站在桌面，Tablet或手機(jī)上都可以美觀地呈現(xiàn)。 讓我們看看例子吧：
在手機(jī)上則是這樣的。
你會(huì)看到，透過一些外觀的小改動(dòng)，在桌面或手機(jī)也可以美麗地呈現(xiàn)網(wǎng)頁。 我們通常會(huì)利用CSS，及少許Javascript做到Responsive的效果。 4. 架站步驟一般來說，要建立一個(gè)網(wǎng)站或平臺，一共有4個(gè)步驟。 他們分別是：
1. 用家體驗(yàn) （USER EXPERIENCE） 建立一個(gè)網(wǎng)站的第一步，原來並不是直接坐下來畫layout或是做Programming。反而，你應(yīng)該要跳出自己是設(shè)計(jì)師的身份，把自己當(dāng)作網(wǎng)站的用戶，想想看：
如果可以的話，最好是找出這班目標(biāo)用戶，和他們聊聊天吧！ 和目標(biāo)用戶聊天，除了可以了解以上問題的答案外，更重要的是，你可以從與他們對話中，了解他們說話的用字，語句，把他們都記下來。 不要小看這些語句！遲一點(diǎn)你在為網(wǎng)頁寫文字內(nèi)容的時(shí)候，這些語句會(huì)對你幫助很大。因?yàn)樗麄兌际菑哪繕?biāo)用戶親口說出來的。 2. 資訊架構(gòu) （INFORMATION ARCHITECTURE） 第2步，我們叫「資訊架構(gòu)（INFORMATION ARCHITECTURE）」。這一步有點(diǎn)像一個(gè)橋樑，去把你想做的東西，變成編程員會(huì)看得懂的東西。 資訊架構(gòu)（INFORMATION ARCHITECTURE）通常有以下的東西：
Sitemap很容易去理解。你網(wǎng)頁將會(huì)有什麼頁，便把它們都列出來。如下圖，網(wǎng)站有Home, Service, Contact等頁：
WireFrame則是用一枝筆，把網(wǎng)頁大概的樣子畫出來：
上圖其實(shí)是twitter的wireframe! (來源： WireFrame不用畫得漂亮，它只是你網(wǎng)站外觀的大概，初稿。接下來我們還是會(huì)把它交給設(shè)計(jì)師去設(shè)計(jì)。 3. 設(shè)計(jì) （VISUAL DESIGN） 當(dāng)有了sitemap及wireframe後，我們便會(huì)把它交給設(shè)計(jì)師去做設(shè)計(jì)。 設(shè)計(jì)師通常會(huì)使用AI，Photoshop，ADOBE XD等軟件去做設(shè)計(jì)。如下圖：
要注意設(shè)計(jì)出來的會(huì)是一個(gè)圖檔。圖檔是靜態(tài)的，而網(wǎng)頁則是動(dòng)態(tài)的。因此，設(shè)計(jì)師在設(shè)計(jì)時(shí)，還應(yīng)考慮當(dāng)中的動(dòng)態(tài)元素。 4. 開發(fā) （DEVELOPMENT） 當(dāng)設(shè)計(jì)完成後，你便可以把設(shè)計(jì)交給編程員，去做開發(fā)了。 編程員通常會(huì)跟著設(shè)計(jì)，把外觀Frontend做好，然後再做後面的功能Backend或把網(wǎng)頁連上CMS。 5. 常見的3種架站方法在前一章，你學(xué)習(xí)了不同的概念，如Frontend/Backend，CMS等等。 然而，作為新手的你，想實(shí)際去建立一個(gè)網(wǎng)站，究竟有什麼方法呢？ 以下是現(xiàn)今, 市面上最常見的3種架站方法： 1. 使用第3方服務(wù)如wix/shopify 1. 使用第3方服務(wù)如wix/shopify 難易度：★☆☆☆☆ 如果你不想編程，最簡單的架站方法，就是使用第3方服務(wù)如wix/shopify，去建立一個(gè)網(wǎng)站。 wix/shopify提供簡易的drag & drop介面，讓你使用他們的模版，去建立網(wǎng)站。 wix.com讓你建立一般的公司網(wǎng)頁：
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.org，而不是wordpress.com。wordpress.org是一套免費(fèi)，開源的CMS。而wordpress.com則是像wix一樣的第3方服務(wù)。 利用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)頁。在設(shè)計(jì)前，我一定會(huì)先看看
做Research時(shí)，你除了可以看見你競爭對手網(wǎng)頁的layout外，還可以看到他們的用字，表達(dá)的內(nèi)容等等。對你在設(shè)計(jì)網(wǎng)頁時(shí)，非常有用。 7. 培養(yǎng)設(shè)計(jì)美感我在教授網(wǎng)頁設(shè)計(jì)時(shí)，發(fā)現(xiàn)學(xué)生常常遇到一個(gè)問題： 明明他們選擇的template很美麗，但當(dāng)真正使用，做出來的作品卻不太專業(yè)。 為什麼呢？ 原來，他們?nèi)狈υO(shè)計(jì)美感。修改template時(shí)往往把它改得亂七八糟，不倫不類。 設(shè)計(jì)美感是要培養(yǎng)的。而最快去培養(yǎng)設(shè)計(jì)美感的方法，就是： 多看一些美麗的作品 behance收集了世界各地最美麗的平面設(shè)計(jì)
awwwards收集了世界各地最美麗的網(wǎng)頁設(shè)計(jì)
最後，如果發(fā)現(xiàn)自己的設(shè)計(jì)美感還是不太行，在修改template時(shí)，就盡量不要做大的修改！以免改得不倫不類。 8. 編程學(xué)習(xí)路徑好了！如果你終於下定決心，要學(xué)習(xí)網(wǎng)頁編程。那麼，你應(yīng)該從哪裡開始學(xué)起？ 我的建議，是你應(yīng)該由Frontend語言開始學(xué)。 第一樣需要學(xué)習(xí)的是HTML（外觀的結(jié)構(gòu)）。 關(guān)於HTML的教學(xué)，可以參考以下文章： 接下來可以學(xué)習(xí)CSS（讓外觀更美麗）。 學(xué)習(xí)完基本CSS後，你可以學(xué)習(xí)一些常用的CSS Framework，例如Bootstrap。再進(jìn)一步就是CSS的動(dòng)態(tài)元素，如CSS3 Animation，GSAP等等。 Framework是一堆一早寫好的源碼，讓你隨時(shí)使用。利用不同的Framework，可以讓你大大加快開發(fā)速度。 再下來就是javascript。 學(xué)習(xí)完基本javascript後，我們通常還會(huì)學(xué)習(xí)jQuery。jQuery是javascript以上的一個(gè)Framework，實(shí)際應(yīng)用很多。 到了這步後，你已經(jīng)成為了一個(gè)Frontend Developer！如果你想更深入去編寫Web APP，更可以學(xué)習(xí)一些Web APP Framework，如Angular，React等等。 至於後臺，你則需要選擇一種語言去專精。 在眾多後臺語言中，我會(huì)建議初學(xué)者學(xué)習(xí)PHP。因?yàn)楸容^普及又易學(xué)。 學(xué)習(xí)完基本PHP後，你可以學(xué)習(xí)一些以PHP為語言的CMS開發(fā)，例如Wordpress，OctoberCMS等等。 如果你想開發(fā)功能繁複的平臺，你更可以學(xué)習(xí)一些PHP MVC Framework，如Laravel等等。成為一個(gè)真正的Backend Developer。 MVC 全名是Model-View-Controller。開發(fā)功能繁複的平臺時(shí)，我們通常會(huì)利用MVC去架構(gòu)後臺功能。（現(xiàn)階段看不明白是正常的?。?/p> 9. 網(wǎng)址與伺服器在前幾章節(jié)，我們常常提及到伺服器（Server）。 究竟，什麼是伺服器呢？ 「伺服器」其實(shí)就是一臺連著互聯(lián)網(wǎng)的電腦。這臺電腦的主要作用是，讓其他人看見這臺電腦上的網(wǎng)頁。
如何在茫?；ヂ?lián)網(wǎng)中找到這臺「伺服器」？當(dāng)然，它會(huì)有一個(gè)地址，這個(gè)地址就是叫IP Address。 IP Address通常都像這樣：192.3.4.2。很難記吧？因此，我們把它弄得易記一點(diǎn)，就變成網(wǎng)址(Domain)了。 整個(gè)上網(wǎng)的流程，就像這樣：
明白了嗎？看到這裡，通過這9個(gè)章節(jié)，相信大家己對網(wǎng)頁設(shè)計(jì)，掌握了各種重要的基礎(chǔ)概念。 今天的教學(xué)到這裡，希望大家可以好好學(xué)習(xí)！ |
|
|
