2018年度最佳網頁設計與開發教程

任何一個網站從開發到最終上線， 都是需要團隊協作且謹慎的一個過程，而實際中往往會遇到各類問題，所以網頁設計師通常需要扮演多種角色，除了掌握必備的網頁設計技能外，更應該對後期的開發流程及內容有所瞭解，以便從全域性來把握網頁的美觀與實用。這裡小編總結了一些實用易懂的設計與開發教程，大家先睹為快吧！

（一）網頁設計教程

1.響應式設計

響應式設計師由著名網頁設計師Ethan Marcotte最初提出來的設計概念，隨後席捲前端和設計領域，如今已成為網頁設計的大趨勢之一。響應式設計的網頁現在已經很多了，而相關的教程也是數不勝數：

響應式網頁設計：它是什麼以及如何使用？

推薦指數：★★★★★

這是一篇很不錯的入門基礎教程，作者Kayla Knight將會引導你逐步瞭解響應式設計的基礎知識，並讓你明白它的基礎原理。如果你對網頁設計感興趣，這篇文章不容錯過。

響應式網頁設計指南

推薦指數：★★★★★

對於需要更進一步瞭解響應式網頁設計理論，及實際的產品設計、介面設計及與互動設計的不同點，這篇文章都會告訴你。

2.扁平化設計

現如今，扁平化設計比起最初的風格已經沒有那麼“平”了，更清晰的層次，更豐富的細節，以及更優秀的視覺體驗，使得它依然佔據主流，而且跟響應式設計有著極高的契合度。

35個扁平化網站設計靈感

推薦指數：★★★★

這篇文章列舉了大量扁平化設計例項，並對應將其設計的亮點做說明，幫助你更好地瞭解如何排版、配色以及網頁佈局等等。

扁平化是否已經失寵？10個案例告訴你答案

推薦指數：★★★★★

這篇文章追根溯源將扁平化設計的發展史及現狀進行介紹，同時列舉和對比了它的優缺點，對於想要已經入門或正想嘗試扁平化設計的小夥伴來說，有很好的引導價值。

3.字型設計

受限於技術的原因，網頁設計中的字型，並不像平面設計中使用那麼自由，除了比較固定的一些字型（例如雅黑、宋體、黑體等）外，很多特殊字型的設計也只能通過圖片的方式進行呈現。

23款網頁設計師必備經典私藏英文字型

推薦指數：★★★★★

這裡總結了23個網頁設計中，可能會經常用到的英文字型，部分有些粗細的變化，但能在網頁中作為文字展示，有比較好的自由度和延伸性。

全球知名的5大頂尖字型及其用法

推薦指數：★★★★★

這裡蒐羅了全球各地的網頁設計中，最常用的6中字型，包括：Google字型、Open Sans字型、Montserrat字型等，每款字型中都附有下載連結和貼心的用例示範。

4.表單設計

網頁表單是訪問者與網站擁有者主要的溝通途徑，因此確保網頁表單容易理解和使用的重要度，自然不必多說。然而要做到不讓表單乏味，還是有很多獨特且有趣的小技巧的。

網頁後臺設計：列表設計、表單設計

推薦指數：★★★★

這篇文章詳細介紹了，網頁後臺中的表格和表單的設計細節，從選單/導航、資料/圖形展示、表格，到表單、控制元件/元件以及彈窗等，都有涉及。

3個表單設計的最佳技巧

推薦指數：★★★★★

你可以知道，設計師、商人甚至普通的訪客對錶單設計的不同想法，以及應該避免的雷區和提高使用者體驗的小心機。

（二）網頁開發教程

下面是針對網頁開發及建設內容的站點，其中包括對CMS（比如WordPress）的討論，CSS和HTML教程程式碼等。

1. Instant Shift

這個站點在國外的網頁設計師和開發人群中很流行，裡面有很多關於網站搭建工具、CSS，教程等高質量的博文。

2. CSS-Tricks

這是由Chris Coyler建立的只涵蓋CSS內容的部落格站點，其中包括網頁開發與設計的各個方面，以文章、視訊、程式碼片段、教程等形式進行呈現。

3. Mockplus

作為簡潔高效的原型設計工具，Mockplus的博文提供了豐富的設計開發教程，涵蓋前端開發人員需掌握的技能、建站模板、初級iOS開發、UI開發與前端開發的不同等內容，支援訂閱推送。

4. Six Revisions

這個網站是Jacob Gube在2008年建立，包括構建網站及應用程式的整個工作流程。每週釋出更新教程、新聞及指南，針對的讀者人群，包括PS到自由職業者。

5. Smashing Magazine

這個站點轉為設計師和開發人員打造，提供了一系列相關的文章和教程，內容包括程式碼、移動應用程式和設計、圖形等。當然，也有不少的網站主題、PS、CSS等。

（三）網頁開發與設計工具

正所謂“工欲善其事，必先利其器”。想要成為一個優秀的設計師，工具的使用也是至關重要的一個因素。這裡小編也準備了網頁設計與開發中需要用到的工具清單，不妨試試。

1.UI設計工具

• PS：又名Adobe Photoshop CS，是目前公認的很好的通用平面美術設計軟體，主要功能包括：影像處理和繪圖。
• Adobe Illustrator：一款不錯的向量圖形處理工具，可應用於網頁、多媒體影像以及印刷出版等頁面的製作，適合小到大型的複雜專案。
• Fireworks：類似於於Illustrator，不僅具備編輯向量圖形與點陣圖影像的靈活性，還提供了一個預先構建資源的公用庫。

2.互動原型工具

• Mockplus：強大易用的快速原型製作工具，一鍵拖拽建立互動，海量UI資源與封裝元件，團隊協作省時省力。
• Sketch：一款輕量的線上向量設計工具，可以基於製作好的視覺設計稿做互動，周邊的外掛及教程比較豐富。
• InVision：主要針對原型設計和團隊協作提供服務，也是將預先做好的視覺設計稿上傳後，新增連結來生成線上原型。

3.網頁開發工具

• Dreamweaver：目前公認的專業級網頁製作程式，支援HTML、CSS、PHP、JSP及ASP等眾多指令碼語言的語法著色顯示，是初學者或專業級網站開發人員必選工具。
• FrontPage：一款輕量級靜態網頁製作軟體，適合開發靜態網站的新手使用。
• CSS Design：適用於對CSS對進除錯的專業級應用，也支援即時檢視樣式功能，方便程式的除錯和效果的對比。

其實，沒有所謂最好的工具、只有最適合的，選工具其實是make a balance的過程。最重要的，還是自己經過學習與思考後沉澱下來的經驗和創造力，設計之路一起加油！