今天我就要給大家推薦幾種好用的網頁設計工具，有了這些工具可以幫助設計師更加輕鬆地完成工作。

網站伴隨著網路的快速發展而快速興起，成為了上網的主要依託，而網頁設計也因此成為了眾多設計師的寵兒。今天我就要給大家推薦幾種好用的網頁設計工具，有了這些工具可以幫助設計師更加輕鬆地完成工作。

Avocode是前端切圖神器，它實現從視覺到程式碼的過渡，自動生成匯出圖片的程式碼。

相容：Sketch，Photoshop，Adobe XD，illustrator 和 Figma。

交接和檢查 - 提供設計並獲得規格

切換並檢查任何設計。

Avocode是一個獨立於平臺的工具，可幫助團隊將 Sketch，PSD，XD，AI 和 Figma 設計轉換為 Web，React Native，iOS 或 Android 程式碼。

輕鬆匯入檔案，只需拖放即可將設計檔案匯入Avocode。

設計管理 - 保持設計版本同步

跟蹤設計變更，觀察您的專案開發。

保持您的設計檔案在雲中的組織，同步和備份，以便您的團隊可以持續訪問最新的設計版本。

原型 - 分享、玩耍和檢查原型

涵蓋從原型到 Avocode 程式碼的工作流程。

二、 Pixlr

Pixlr Editor 是一個超強的免費線上處理圖片工具，可滿足您的所有編輯需求。完全控制您的影象，包括圖層和效果。簡單點說，Pixlr Editor 就是一個類似 Photoshop 的 web 軟體，適合進行圖片處理。

Pixlr 還新推出了 Pixlr X，一個免費的線上修圖工具。內建多種特效及濾鏡，曝光對比調整、相框與特殊光線等等。

三、Webydo

Webydo 是一個線上網站設計及託管平臺，幫助網頁設計師擺脫傳統的網站建站流程，Webydo的工具能夠將他們的設計自動轉換成的HTML5網站，設計師在這個過程中無需接觸任何的手動程式設計工作。因此Webydo迅速成為一些設計師的最愛的網頁設計工具。

四、Wagtail

Wagtail是一個開源的，響應式CMS，旨在加快Web開發的速度。它提供多語言和多站點支援。CMS採用直觀的內容結構，支援複雜網站的所有基本元件。

treamField

可以按任意順序建立和排列不同內容型別的程式碼塊。

程式碼段

可以將現有內容新增到另一個頁面。可以在網站的不同位置以不同的格式複製。

資源管理器

其功能和元件以模組化的結構進行組織，提供簡單的內容導航。

影象裁剪

CMS自動檢測面部和其他影象特徵，並進行相應地裁剪。也可以取消自動檢測，定義自己的影象的焦點。

表單構建器

Wagtail可以建立具有任意數值域的表單。可以在管理介面中儲存表單提交，以供日後檢索，可選擇將每個表單提交到指定的地址。

五、Mobirise

Mobirise是一款適用於 Windows 和 Mac 的免費離線應用，可輕鬆建立中小型網站，登陸頁面，線上簡歷和投資組合。1500多個漂亮的網站塊，模板和主題可幫助您輕鬆入門。

非常適合那些不熟悉Web開發錯綜複雜的非技術人員以及喜歡儘可能以視覺方式工作而不需要與程式碼抗爭的設計人員。對於快速原型製作和小客戶專案的編碼人員也很有用。

響應式自然

使用者介面非常友好。可以在視覺編輯器中預覽網站在不同裝置螢幕上的顯示效果。

簡單易用，不必編碼

Mobirise是一個簡單易用的免費網站構建器 - 只需將網站元素拖放到您的頁面，新增內容並將其樣式設定為您喜歡的樣式 - 無需技術技能。

現成程式碼塊

Mobirise提供了各種現成的程式碼塊，包括粘性頭部，漢堡包選單，沉浸全屏模式，視訊背景，Bootstrap 輪播外掛，內容滑塊，帶有燈箱外掛的響應式網頁圖片庫等等。

無限託管能力

使用Mobirise構建的網站可以託管在任何地方，無論是Amazon S3，Github，Google Drive，FTP還是本地驅動器。

六、UX FLOWCHART CARDS

UX流程圖卡（UX FLOWCHART CARDS），強大的網站結構規劃工具，專業的網站建設者，涵蓋54種常用UX模板，讓設計師能夠快速搭建專業的使用者體驗流程圖，節省大量時間且架構清晰。幫助設計師和產品經理把握產品全貌，思考使用者體驗，聚焦重要環節。

原型講解，需求視覺化

流程卡是非常有效的將需求轉化為具體設計稿的思考工具。

方案探討，隨時修改糾錯

修改、移動、自定義都很容易，大大節省建立修改的時間成本。

頭腦風暴，快速搭建思維模型

操作簡單，幫助設計師和產品經理快速記錄思路。

七、Figma

Figma是一個實時協作的介面設計工具。它有三個難能可貴的功能：實時協作，向量網路和版本控制。Figma 就像是基於瀏覽器並具有實時協作功能的 Sketch。

實時協作

Figma在Mac，Windows、Linux甚至是移動端（只能預覽）都可以執行。這將極大的改變團隊生態，讓設計師和開發者更好的協作。任何人都可以進來並檢視所有細節：字型，顏色，尺寸，間距等等。開發者們也可以輕鬆看到整個UI的佈局是如何適配不同螢幕尺寸的。

版本控制

版本控制在 Figma 裡更易於檢視，從而更快的進行不同版本的對比。使用起來比 Sketch 的版本控制要順手很多。

每個檔案的每個版本都在它們的伺服器上，這讓迭代變得很容易也很省心。

自適應佈局是現代設計工具必不可少的功能，你可以通過設定讓元素緊靠邊緣來組合你的整個約束條件，或是讓元素居中顯示。這和 Sketch 中的 Pin to Corner 和縮放物件差不多。不得不承認 Figma 的版本使用起來更視覺化也更直觀。

向量網路

向量網格是具有突破性的，不只是移動錨點，你可以直接移動線條，連線點也會自動的隨之移動。這是因為在 Figma 裡可以連線多條線，組成向量點陣的網格，而不是單純的起始點和結束點。這種難以置信的易用程度，一上手就知道。

網頁設計師一般還會使用的網站和工具如下：

網站

站酷（站酷 (ZCOOL) - 設計師互動平臺 - 開啟站酷，發現更好的設計！）

站酷是國內設計師最大的交流平臺，看大神作品，分享作品，快速提高設計能力的好去處。

Dribble是一個面向創作家、藝術工作者、設計師等創意類作品的人群，提供作品線上服務，供網友線上檢視已經完成的作品或者正在創作的作品的交流網站。Dribbble還針對手機推出了相應的軟體，可以通過蘋果應用商店下載使用 Dribbble移動應用。推薦理由是如果你在做配色時沒有好的想法，進Color裡，輸入自己預先想好的主色，就可以看到Dribbble大神們基於這個顏色做的設計了。

推薦理由是分類檢索功能簡直強大。支援多種索引方式，不管是索引作品還是設計師，使用者體驗都很人性化。想跟國內大神學東西的，可以直接在上面索引中國地區設計師。

目前介面最簡潔、資源最快的Mac軟體資源分享網站，你可以在網站中找到你需要的軟體，比如ai、ps、sketch、mindnote、xmind、Eagle等等。

Picular是一款色彩、顏色搜尋引擎，通過不同的關鍵詞，來尋找顏色。Picular 和搜尋引擎不同之處在於，它會直接提取「圖片搜尋」中，圖片的顏色，然後以純色顯示出來，支援中文。

PaperSizes是一個收集整理了支援250種國際紙張尺寸型別和長度的紙張大全網站，除了可以查詢各種紙張尺寸外，還可以對各種紙張尺寸長度進行檢索和換算，方便設計師及辦公人員處理與平面、紙張有關的各種問題。

工具/軟體

UXDOCK創意卡牌（uxdock）

又稱UX流程圖卡，它是一款強大的網站結構規劃工具，裡面涵蓋54種常用的UX模板，可以讓設計師能夠快速搭建出專業的使用者體驗流程圖，輕鬆把握產品的全貌。

Eagle 是一款圖片管理必備軟體，它可以收藏圖片、螢幕截圖、網頁設計、海報、Sketch、Pinterest，並支援 Mac 與 Windows 系統，讓你輕鬆搞定圖片整理。

MindNode是風格簡約和輕量的思維導圖應用，通過友好的視覺化介面將你的頭腦風暴更科學的組織起來。

它能讓負責定義需求和規格、設計功能和介面的專家能夠快速建立應用軟體或Web網站的線框圖、流程圖、原型和規格說明文件。

它可以用於建立和增強照片、插圖和3D圖稿，設計網站和移動應用程式，編輯視訊，模擬真實的繪畫等等。

Sketch是優秀的輕量級向量繪圖設計應用，對於網頁設計和移動設計者來說，比PhotoShop好用N倍！尤其是在移動應用設計方面。

它可以為印刷、網路、視訊和移動裝置建立logos、圖示、繪圖、排版和插圖。數以百萬計的設計師和藝術家使用Illustrator CC創作，從網頁圖示和產品包裝到書籍插圖和廣告牌。

網頁設計師工作中，一般常用哪些工具？

程式碼編輯

Cmd Markdown

免費線上Markdown編輯器，一直再用，很不錯。

反編譯

dotPeek

dotPeek 是 .NET 平臺的一款免費的反編譯工具，支援反編譯 .NET 1.0 ~ 4.0 到 C# 程式碼。

JustDecompile

Telerik 公司開發的 .NET 程式集反編譯引擎，為反編譯工具 JustDecompile 提供反編譯功能。

除錯

Fiddler

一款免費且功能強大的資料包抓取軟體。它通過代理的方式獲取程式http通訊的資料，可以用其檢測網頁和伺服器的互動情況，能夠記錄所有客戶端和伺服器間的http請求，支援監視、設定斷點、甚至修改輸入輸出資料等功能。fiddler包含了一個強大的基於事件指令碼的子系統，並且能夠使用.net框架語言擴充套件。所以無論對開發人員或者測試人員來說，都是非常有用的工具。

版本管理

SourceTree

SourceTree 是 Windows 和 OS X 下免費的 Git 和 Hg 客戶端。支援建立、克隆、提交、push、pull 和合並等操作。

命令列工具

ConEmu

ConEmu是一個帶標籤的Windows終端，提供多標籤支援和豐富的自定義選項，是Windows下不可多得的Console.

其它

TeamViewer

TeamViewer是一個能在任何防火牆和NAT代理的後臺用於遠端控制，桌面共享和檔案傳輸的簡單且快速的解決方案。為了連線到另一臺計算機，只需要在兩臺計算機上同時執行 TeamViewer 即可，而不需要進行安裝（也可以選擇安裝，安裝後可以設定開機執行）。該軟體第一次啟動在兩臺計算機上自動生成夥伴 ID。只需要輸入你的夥伴的ID到TeamViewer，然後就會立即建立起連線。 可能被牆，訪問不穩定，推薦用向日葵代替

向日葵

向日葵遠端控制軟體是一款免費的集遠端桌面,遠端開機,遠端監控,支援內網穿透的一體化遠端控制軟體! 與TeamViewer類似。

網路流量監測IP雷達

IP雷達幫助你瞭解自己的電腦使用網路和讀寫硬碟的情況，顯示哪些程式正在讀寫你的硬碟。實時顯示本機上網流量，詳細到每個遠端IP的流量，及其域名、位置，顯示各類網速已經流量排名。4.0版本增加顯示網路遊戲流量，硬碟繁忙程度，支援將記錄的IP地址儲存到檔案。 很久未更新，可用Windows自帶的資源監視器替代。

FileZilla

FileZilla 客戶端是一個快速可靠的、跨平臺的FTP,FTPS和SFTP客戶端。具有圖形使用者介面(GUI)和很多有用的特性。

VS擴充套件

Web Essentials

VS2015,VS2013,VS2012,VS2010 Adds many useful features to Visual Studio for web developers. If you ever write CSS, HTML, JavaScript, Markdown, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier.

Bundler Minifier

VS2015 A Visual Studio extension that let"s you configure bundling and minification of JS, CSS and HTML files.

Web Compiler

The easiest and most powerful way to compile LESS, Scss,, Stylus, JSX and CoffeeScript files directly within Visual Studio or through MSBuild.

Image Optimizer

VS2015,VS2013,VS2012 Lossless optimization of JPEG, PNG and Gifs - including animated Gifs.

Web Analyzer

VS2015 Provides static analysis directly in Visual Studio for JavaScript, TypeScript, JSX, CSS and more.

Microsoft SQL Server Data Tools

VS2015,VS2013,VS2012 為資料庫開發人員提供了一個整合的環境，讓他們可以在 Visual Studio 內為任何 SQL Server 平臺（無論是內部還是外部）執行所有資料庫設計工作。資料庫開發人員可以在 VS 中使用 SQL Server 物件資源管理器輕鬆建立或編輯資料庫物件和資料，或執行查詢。

分享結束！

1、Photoshop：簡稱“PS”，是由AdobeSystems開發和發行的影象處理軟體。主要處理以畫素所構成的數字影象。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在影象、圖形、文字、視訊、出版等各方面都有涉及。

2、Illustrator：稱為“AI”，是一種應用於出版、多媒體和線上影象的工業標準向量插畫的軟體。向量圖形處理工具，該軟體主7a686964616fe58685e5aeb931333366306538要應用於印刷出版、海報書籍排版、專業插畫、多媒體影象處理和網際網路頁面的製作等，也可以為線稿提供較高的精度和控制，適合生產任何小型設計到大型的複雜專案。

3、CorelDRAW：該軟體是Corel公司出品的向量圖形制作工具軟體，這個圖形工具給設計師提供了向量動畫、頁面設計、網站製作、點陣圖編輯和網頁動畫等多種功能。

4、PageMaker：一種排版軟體，其長處就在於能處理大段長篇的文字及字元，並且可以處理多個頁面，能進行頁面編頁碼及頁面合訂。通過連結的方式置入圖，可以確保印刷時的清晰度，這一點在彩色印刷時尤其重要。

擴充套件資料

目前常見的平面設計專案，可以歸納為十大類：網頁設計、包裝設計、DM廣告設計、海報設計、平面媒體廣告設計、POP廣告設計、樣本設計、書籍設計、刊物設計、UI設計。

平面設計工作是一個主觀認定強的創意工作，大部分的平面設計師是透過不斷的自我教育來做進修、提升設計能力。譬如，平時就要多注意各式各樣的海報、文宣品、雜誌、書籍等的設計手法並加以蒐集，或是上網瀏覽其它設計師的作品，以激發自己的設計靈感。

平面設計師要有敏銳的美感，但對文字也要有一定的素養。因此，平時可以廣泛的閱讀，增加本身的知識領域及文字敏感度。