網(wǎng)頁設(shè)計軟件的選取，主要還是看你的使用場景，是靜態(tài)的，還是動態(tài)的，是單個頁面/活動頁的網(wǎng)頁設(shè)計，還是整個網(wǎng)站的網(wǎng)頁設(shè)計，所用軟件/工具當(dāng)然是不一樣的。
下面小編根據(jù)不同的使用場景，不同的使用方法，來推薦不同的網(wǎng)頁設(shè)計工具，幫助各位小伙伴快速選取智能的設(shè)計工具。
靜態(tài)單頁面設(shè)計
對于靜態(tài)的單頁面設(shè)計，沒有動效，沒有交互，實現(xiàn)起來也相對比較簡單。請看各路神仙的神操作及設(shè)計利器。
方法一：
工具：手機美顏/美圖秀秀/PS
直接選擇一個現(xiàn)成的模板，替換了圖片、文字，然后就上線了，高級一些的用PS處理下圖片，更有直接盜圖的。
當(dāng)然了作圖軟件推薦PS，不會的選用其他圖片處理軟件，可跳過此段。
是最流行的圖像編輯器之一，UI設(shè)計師入門的必備界面設(shè)計工具。相信不是設(shè)計行業(yè)的小伙伴，也略知一二。
PS作為UI界面設(shè)計神器，也是必備的網(wǎng)頁設(shè)計軟件，有著強大的圖片編輯和處理功能，想要什么的圖形都可以用PS來實現(xiàn)，可用于攝影的后期制作，可給圖像添加各種濾鏡，調(diào)整亮度，對比度等，生成高分辨的圖形。
PS：如果要制作圖標(biāo)，需要用到矢量繪圖軟件AI來制作，這樣放大才不會失真。
方法二
工具：PS+上線了
直接用響應(yīng)式的網(wǎng)頁設(shè)計軟件，比如像是上線了這樣簡單的響應(yīng)式建站工具，你只需要選擇喜歡的模板，然后稍微調(diào)整下不同模塊的布局（順序）就可以做出一個很漂亮的網(wǎng)站。
模板化建站就會千篇一律嗎？在上線了，你可以看到無數(shù)的人在十分鐘之內(nèi)就搭建出了一個獨特的網(wǎng)站，并且完全不需要學(xué)習(xí)代碼。
智能標(biāo)注、一鍵切圖、交互原型，摹客iDoc一次搞定
立即體驗
動態(tài)網(wǎng)頁設(shè)計
如今動態(tài)網(wǎng)頁設(shè)計在網(wǎng)頁設(shè)計中的應(yīng)用已經(jīng)越來越廣泛，而且國內(nèi)許多公司開始重視動態(tài)網(wǎng)頁設(shè)計。動效在UI設(shè)計中的應(yīng)用其實比我們想象中的還要強大，好的動效設(shè)計可以給用戶提供一個良好的視覺感受，從而加強與用戶之間的交互體驗。
動效設(shè)計，需要頁面交互，組件交互，甚至動畫的制作，相對復(fù)雜，要用到的網(wǎng)頁設(shè)計軟件也會多一些。
網(wǎng)頁設(shè)計軟件常用搭配：原型設(shè)計工具+動畫制作工具+協(xié)作工具
1. 網(wǎng)頁設(shè)計軟件——原型設(shè)計： // / 1）
但只支持Mac，其他系統(tǒng)請繞道。
是一款強大的界面設(shè)計工具，專為UI設(shè)計師打造的軟件，可讓你的界面設(shè)計變得更簡單，更高效。如果你是一個UX或者UI設(shè)計師，那么你一定知道這個強大的UI界面設(shè)計軟件。
如果你想轉(zhuǎn)行做UI設(shè)計師，那么你一定不能錯過這個好用的設(shè)計工具。
2）
國產(chǎn)軟件，這個工具是我在看到的推薦。提供豐富的交互設(shè)計和頁面切換功能， 設(shè)計師簡單點擊或拖拽即可實現(xiàn)交互動畫的添加，操作簡單動態(tài)網(wǎng)頁制作方法，就是界面是手繪風(fēng)格。
動態(tài)網(wǎng)頁設(shè)計教程：/blog/post/1116
3）
是一款基于網(wǎng)頁的在線原型設(shè)計和協(xié)作工具。 設(shè)計師上傳已設(shè)計好的頁面，為其添加熱區(qū)，完成多樣的原型交互動畫。
但是，由于此款在線原型工具并不支持界面或UI部件的直接制作或編輯，設(shè)計師更多的將其作為原型演示工具，而非原型制作工具。
2. 動效制作工具推薦 AE-強大的動效視覺處理軟件
AE是Adobe After 的簡稱，是Adobe公司推出的一款關(guān)于圖形和視頻處理的界面設(shè)計工具。
AE這款界面設(shè)計工具可以幫助UI設(shè)計師對圖像視頻進行任何特效處理，是一個靈活的基于層的2D和3D后期合成軟件。
AE包含了上百種特效及預(yù)置動畫效果，可與，，等軟件無縫結(jié)合，創(chuàng)建無與倫比的視覺效果。
推薦幾個動畫庫：
①. .CSS
.CSS是一個國外的CSS3動畫庫，它的動畫庫有多達60種動畫效果，幾乎包含了所有常見的動畫效果。借助這個動畫庫動態(tài)網(wǎng)頁制作方法，設(shè)計師可以輕松、快速制作出CSS3動畫效果。
②. MAGIC
Magic 動畫是一個獨特的CSS3動畫特效包，設(shè)計師可以在自己的網(wǎng)站項目中自由地使用，只需簡單的在頁面引入 CSS樣式: magic.css 或者壓縮版本magic.min.css 就可以了。
③. .JS
.js是一款功能非常強大的可視化CSS3動畫代碼生成js庫插件。可以在可視化的條件下編輯CSS3的各種動畫效果。此外，.js還可以單獨使用，通過js代碼來完成各種CSS3動畫效果。
3. 協(xié)同軟件 ① -強大的協(xié)作
專為UI設(shè)計師與開發(fā)工程師量身打造的協(xié)作型界面設(shè)計工具。作為一名UI設(shè)計師，你需要把你的設(shè)計傳達給開發(fā)團隊，而的設(shè)計是為了實現(xiàn)這一目標(biāo)。
②iDoc
iDoc操作很簡單，設(shè)計師直接從/XD/PS上傳制作的設(shè)計稿，前端工程師可以直接在面板右側(cè)會直觀的看到每個元素的大小，顏色，邊距，甚至可以直接導(dǎo)出樣式代碼。
另外，UI設(shè)計師還可以直接在UI界面上給開發(fā)人員添加注釋，標(biāo)記，備注等。填補了產(chǎn)品、開發(fā)與設(shè)計之間的溝通障礙，為設(shè)計師和開發(fā)人員節(jié)省了大量寶貴的時間。
你不知道的神操作模式
產(chǎn)品根據(jù)目標(biāo)用戶設(shè)置好原型，交由美工配色優(yōu)化后，交由產(chǎn)品開發(fā)。產(chǎn)品和美工共用，精簡版的人員配置：產(chǎn)品+美工+前端。
如果上述人員配置和操作已經(jīng)讓你吃驚的話，接下來請屏氣凝神。
縮減用人成本后就是：前端+美工共用，前端畫原型，美工配色，前端開發(fā)，如下圖：
神配置就是一個工程師，一個人全搞定，你見過么？
小結(jié)：
以上不同配置，不同網(wǎng)頁設(shè)計軟件，各位小伙伴按需索取。在智能的時代設(shè)計智能的產(chǎn)品，我們當(dāng)然不能用石器時代的工具，雖然有些夸張，但是我們的時間更寶貴，不是么，更好的搭配，更高的效率。