通觀企業(yè)建站公司的項(xiàng)目開(kāi)發(fā)流程，大體上都離不開(kāi)項(xiàng)目前期溝通、項(xiàng)目立案、網(wǎng)站原型圖設(shè)計(jì)及論證、網(wǎng)頁(yè)界面視覺(jué)高設(shè)計(jì)、網(wǎng)站前端制作html生成及交互動(dòng)效設(shè)計(jì)、網(wǎng)站后端程序開(kāi)發(fā)、網(wǎng)站測(cè)試與基礎(chǔ)數(shù)據(jù)添加、網(wǎng)站驗(yàn)收與發(fā)布等這些步驟。而且隨著企業(yè)對(duì)網(wǎng)站制作和出質(zhì)量品要求越來(lái)越高，PM、網(wǎng)頁(yè)設(shè)計(jì)師、前端&后端工程師們?yōu)榱颂嵘紤]都在尋求更加好用的網(wǎng)頁(yè)排版設(shè)計(jì)、制作及開(kāi)發(fā)工具。今天我們分享一些常用的、好用的Web網(wǎng)頁(yè)設(shè)計(jì)工具，每個(gè)工具都附帶有網(wǎng)站網(wǎng)址，可實(shí)行在線高效辦公及項(xiàng)目協(xié)作，非常值得使用和推薦。
石墨文檔
-
官方網(wǎng)站網(wǎng)址：
https://shimo.im/welcome
Slogan:
多人實(shí)時(shí)協(xié)作的「云端 Office」
特色：
文檔
多人實(shí)時(shí)協(xié)作的輕量云端
表格
函數(shù)功能完整的安全協(xié)作表格
幻燈片
支持多端同步演示的云端幻燈片
表單
數(shù)據(jù)收集自動(dòng)匯總的在線表單
文檔
支持公文合同的專(zhuān)業(yè)云端文檔
思維導(dǎo)圖
激發(fā)集體創(chuàng)造力的云端思維導(dǎo)圖
白板
支持多方音視頻會(huì)議的互動(dòng)白板
協(xié)作空間
支持企業(yè)知識(shí)庫(kù)管理的協(xié)作空間
摹客
-
官網(wǎng)網(wǎng)站地址：
https://www.mockplus.cn/
Slogan:
設(shè)計(jì) + 協(xié)作，摹客就夠了
全流程協(xié)作、原型設(shè)計(jì)、設(shè)計(jì)規(guī)范，摹客來(lái)解決
用哪種設(shè)計(jì)工具，都能在摹客中工作
特色：
我的設(shè)計(jì)利器，團(tuán)隊(duì)的協(xié)作平臺(tái)
原型設(shè)計(jì)快速上手
海量組件和圖標(biāo)，拖拽即可得。
快速交互、快速設(shè)計(jì)、多種演示預(yù)覽方式。
摹客讓原型設(shè)計(jì)如此簡(jiǎn)單。
協(xié)同工作效率提升
從產(chǎn)品經(jīng)理、設(shè)計(jì)師到開(kāi)發(fā)工程師，一起協(xié)同工作，支持主流格式的產(chǎn)品文檔和設(shè)計(jì)稿。摹客，讓每個(gè)人更快，讓團(tuán)隊(duì)效能更高。
設(shè)計(jì)規(guī)范輕松管理
輕松定制設(shè)計(jì)規(guī)范、統(tǒng)一管理設(shè)計(jì)資源，還可以一鍵導(dǎo)出，團(tuán)隊(duì)共享、級(jí)聯(lián)應(yīng)用，摹客，讓設(shè)計(jì)資源的價(jià)值得以真正體現(xiàn)。
幕布
-
官方網(wǎng)站地址：
https://mubu.com/
Slogan:
極簡(jiǎn)大綱筆記 | 一鍵生成思維導(dǎo)圖
幕布，不只是大綱筆記，更是一種思考方式
特色：
思維導(dǎo)圖，超好用的思維輔助工具
在幕布中，大綱筆記與思維導(dǎo)圖可以一鍵轉(zhuǎn)換，再也不需要為思維導(dǎo)圖的編輯而頭疼
幕布幫你將寶貴的精力節(jié)省下來(lái)，讓你專(zhuān)注于內(nèi)容創(chuàng)作
Pixlr
-
Pixlr Editor 是一個(gè)超強(qiáng)的免費(fèi)在線處理圖片工具，可滿(mǎn)足您的所有編輯需求。完全控制您的圖像，包括圖層和效果。簡(jiǎn)單點(diǎn)說(shuō)，Pixlr Editor 就是一個(gè)類(lèi)似 Photoshop 的 web 軟件，適合進(jìn)行圖片處理。
特色：
Pixlr 還新推出了一個(gè)免費(fèi)的在線修圖工具。內(nèi)置多種特效及濾鏡，曝光對(duì)比調(diào)整、相框與特殊光線等等。
Pixlr X
官方網(wǎng)站地址：
https://pixlr.com/
Avocode
-
Avocode是前端切圖神器，它實(shí)現(xiàn)從視覺(jué)到代碼的過(guò)渡，自動(dòng)生成導(dǎo)出圖片的代碼。
特色：
交接和檢查 - 提供設(shè)計(jì)并獲得規(guī)格
切換并檢查任何設(shè)計(jì)。
Avocode是一個(gè)獨(dú)立于平臺(tái)的工具，可幫助團(tuán)隊(duì)將 Sketch，PSD，XD，AI 和 Figma 設(shè)計(jì)轉(zhuǎn)換為 Web，React Native，iOS 或 Android 代碼。
輕松導(dǎo)入文件，只需拖放即可將設(shè)計(jì)文件導(dǎo)入Avocode。
設(shè)計(jì)管理 - 保持設(shè)計(jì)版本同步
跟蹤設(shè)計(jì)變更，觀察您的項(xiàng)目開(kāi)發(fā)。
保持您的設(shè)計(jì)文件在云中的組織，同步和備份，以便您的團(tuán)隊(duì)可以持續(xù)訪問(wèn)最新的設(shè)計(jì)版本。
原型 - 分享、玩耍和檢查原型
涵蓋從原型到Avocode代碼的工作流程。
輕松將所有設(shè)計(jì)原型導(dǎo)入Avocode，讓團(tuán)隊(duì)的其他成員看到屏幕，評(píng)論和檢查之間的關(guān)系。
團(tuán)隊(duì)協(xié)作 - 討論變化并加快工作速度
通過(guò)Avocode您的團(tuán)隊(duì)，客戶(hù)和承包商終于可以查看您與他們共享的任何設(shè)計(jì)版本，討論變更并進(jìn)一步推動(dòng)您的項(xiàng)目。
兼容：Sketch，Photoshop，Adobe XD，illustrator 和 Figma
官方網(wǎng)站地址：
https://avocode.com/
Webydo
-
Webydo 是一個(gè)在線網(wǎng)站設(shè)計(jì)及托管平臺(tái)，幫助網(wǎng)頁(yè)設(shè)計(jì)師擺脫傳統(tǒng)的網(wǎng)站建站流程，Webydo的工具能夠?qū)⑺麄兊脑O(shè)計(jì)自動(dòng)轉(zhuǎn)換成的HTML5網(wǎng)站，設(shè)計(jì)師在這個(gè)過(guò)程中無(wú)需接觸任何的手動(dòng)編程工作。因此Webydo迅速成為一些設(shè)計(jì)師的最?lèi)?ài)的網(wǎng)頁(yè)設(shè)計(jì)工具。
官方網(wǎng)站地址：
https://www.webydo.com/
Mobirise
-
Mobirise是一款適用于 Windows 和 Mac 的免費(fèi)離線應(yīng)用，可輕松創(chuàng)建中小型網(wǎng)站，登陸頁(yè)面，在線簡(jiǎn)歷和投資組合。1500多個(gè)漂亮的網(wǎng)站塊，模板和主題可幫助您輕松入門(mén)。
非常適合那些不熟悉Web開(kāi)發(fā)錯(cuò)綜復(fù)雜的非技術(shù)人員以及喜歡盡可能以視覺(jué)方式工作而不需要與代碼抗?fàn)幍脑O(shè)計(jì)人員。對(duì)于快速原型制作和小客戶(hù)項(xiàng)目的編碼人員也很有用。
特色：
響應(yīng)式自然
用戶(hù)界面非常友好?？梢栽谝曈X(jué)編輯器中預(yù)覽網(wǎng)站在不同設(shè)備屏幕上的顯示效果。
簡(jiǎn)單易用，不必編碼
Mobirise是一個(gè)簡(jiǎn)單易用的免費(fèi)網(wǎng)站構(gòu)建器 - 只需將網(wǎng)站元素拖放到您的頁(yè)面，添加內(nèi)容并將其樣式設(shè)置為您喜歡的樣式 - 無(wú)需技術(shù)技能。
現(xiàn)成代碼塊
Mobirise提供了各種現(xiàn)成的代碼塊，包括粘性頭部，漢堡包菜單，沉浸全屏模式，視頻背景，Bootstrap 輪播插件，內(nèi)容滑塊，帶有燈箱插件的響應(yīng)式網(wǎng)頁(yè)圖片庫(kù)等等。
無(wú)限托管能力
使用Mobirise構(gòu)建的網(wǎng)站可以托管在任何地方，無(wú)論是Amazon S3，Github，Google Drive，F(xiàn)TP還是本地驅(qū)動(dòng)器。
官方網(wǎng)站地址：
https://mobirise.com/
Wagtail
-
Wagtail是一個(gè)開(kāi)源的，響應(yīng)式CMS，旨在加快Web開(kāi)發(fā)的速度。它提供多語(yǔ)言和多站點(diǎn)支持。CMS采用直觀的內(nèi)容結(jié)構(gòu)，支持復(fù)雜網(wǎng)站的所有基本組件。
特色：
StreamField
可以按任意順序創(chuàng)建和排列不同內(nèi)容類(lèi)型的代碼塊。
代碼段
可以將現(xiàn)有內(nèi)容添加到另一個(gè)頁(yè)面?？梢栽诰W(wǎng)站的不同位置以不同的格式復(fù)制。
資源管理器
其功能和組件以模塊化的結(jié)構(gòu)進(jìn)行組織，提供簡(jiǎn)單的內(nèi)容導(dǎo)航。
圖像裁剪
CMS自動(dòng)檢測(cè)面部和其他圖像特征，并進(jìn)行相應(yīng)地裁剪。也可以取消自動(dòng)檢測(cè)，定義自己的圖像的焦點(diǎn)。
表單構(gòu)建器
Wagtail可以創(chuàng)建具有任意數(shù)值域的表單?？梢栽诠芾斫缑嬷写鎯?chǔ)表單提交，以供日后檢索，可選擇將每個(gè)表單提交到指定的地址。
官方網(wǎng)站地址：
https://wagtail.io/
Figma
-
Figma是一個(gè)實(shí)時(shí)協(xié)作的界面設(shè)計(jì)工具。它有三個(gè)難能可貴的功能：實(shí)時(shí)協(xié)作，矢量網(wǎng)絡(luò)和版本控制。Figma 就像是基于瀏覽器并具有實(shí)時(shí)協(xié)作功能的 Sketch。
特色：
實(shí)時(shí)協(xié)作
團(tuán)隊(duì)可以直接在設(shè)計(jì)界面上進(jìn)行討論，令協(xié)作更加方便。
Figma在Mac，Windows、Linux甚至是移動(dòng)端（只能預(yù)覽）都可以運(yùn)行。這將極大的改變團(tuán)隊(duì)生態(tài)，讓設(shè)計(jì)師和開(kāi)發(fā)者更好的協(xié)作。任何人都可以進(jìn)來(lái)并查看所有細(xì)節(jié)：字體，顏色，尺寸，間距等等。開(kāi)發(fā)者們也可以輕松看到整個(gè)UI的布局是如何適配不同屏幕尺寸的。
評(píng)論功能是內(nèi)置的，團(tuán)隊(duì)成員可以針對(duì)你的設(shè)計(jì)留言，當(dāng)有新評(píng)論或者新回復(fù)時(shí)你也會(huì)收到提醒。一旦你完成了，就可以點(diǎn)擊“已解決”來(lái)隱藏意見(jiàn)。
版本控制
版本控制在 Figma 里更易于查看，從而更快的進(jìn)行不同版本的對(duì)比。使用起來(lái)比 Sketch 的版本控制要順手很多。
每個(gè)文件的每個(gè)版本都在它們的服務(wù)器上，這讓迭代變得很容易也很省心。
自適應(yīng)布局是現(xiàn)代設(shè)計(jì)工具必不可少的功能，你可以通過(guò)設(shè)置讓元素緊靠邊緣來(lái)組合你的整個(gè)約束條件，或是讓元素居中顯示。這和 Sketch 中的 Pin to Corner 和縮放對(duì)象差不多。不得不承認(rèn) Figma 的版本使用起來(lái)更視覺(jué)化也更直觀。
矢量網(wǎng)絡(luò)
矢量網(wǎng)格是具有突破性的，不只是移動(dòng)錨點(diǎn)，你可以直接移動(dòng)線條，連接點(diǎn)也會(huì)自動(dòng)的隨之移動(dòng)。這是因?yàn)樵?Figma 里可以連接多條線，組成矢量點(diǎn)陣的網(wǎng)格，而不是單純的起始點(diǎn)和結(jié)束點(diǎn)。這種難以置信的易用程度，一上手就知道。
官方網(wǎng)站地址：
https://www.figma.com/
UX FLOWCHART CARDS
-
UX流程圖卡（UX FLOWCHART CARDS），強(qiáng)大的網(wǎng)站結(jié)構(gòu)規(guī)劃工具，專(zhuān)業(yè)的網(wǎng)站建設(shè)者，涵蓋54種常用UX模板，讓設(shè)計(jì)師能夠快速搭建專(zhuān)業(yè)的用戶(hù)體驗(yàn)流程圖，節(jié)省大量時(shí)間且架構(gòu)清晰。幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理把握產(chǎn)品全貌，思考用戶(hù)體驗(yàn)，聚焦重要環(huán)節(jié)。
特色：
原型講解，需求可視化
流程卡是非常有效的將需求轉(zhuǎn)化為具體設(shè)計(jì)稿的思考工具。
方案探討，隨時(shí)修改糾錯(cuò)
修改、移動(dòng)、自定義都很容易，大大節(jié)省創(chuàng)建修改的時(shí)間成本。
頭腦風(fēng)暴，快速搭建思維模型
操作簡(jiǎn)單，幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理快速記錄思路。
官方網(wǎng)站地址：
https://www.uxdock.com/
小結(jié)
-
Web網(wǎng)頁(yè)設(shè)計(jì)、制作、開(kāi)發(fā)工具其實(shí)常用的還有很多種，而且同一種類(lèi)型的，不同設(shè)計(jì)師還因人而異。但不管怎么樣，對(duì)于大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，評(píng)分較高的口碑都不錯(cuò)的都在以上推薦的網(wǎng)頁(yè)設(shè)計(jì)工具當(dāng)中了。希望他們對(duì)你提高工作效率和出品品質(zhì)有幫助。
你還可以訪問(wèn)《9個(gè)網(wǎng)頁(yè)設(shè)計(jì)工具，讓你出品的網(wǎng)站設(shè)計(jì)作品更高顏值》
