實(shí)際上，網(wǎng)頁(yè)設(shè)計(jì)本身一直在逐步的轉(zhuǎn)變和調(diào)整，這也使得我們所用的工具和服務(wù)也逐步隨之轉(zhuǎn)變。所以，我們需要推薦一些最新的、實(shí)用的、貼合當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)需求的工具和服務(wù)，來(lái)幫助用戶更好的應(yīng)對(duì)不斷進(jìn)化的需求。

今天所搜集的這14款工具和服務(wù)，覆蓋網(wǎng)頁(yè)設(shè)計(jì)所涉及到的各個(gè)不同的層面，有線框圖工具，HTML轉(zhuǎn)化服務(wù)，甚至包括一部非常極客的漫畫。這14個(gè)工具與服務(wù)覆蓋面足夠廣，總歸有幾個(gè)會(huì)讓你動(dòng)心。

Codester

Codester 是一個(gè)可以購(gòu)買各種代碼片段的在線商店，對(duì)于網(wǎng)頁(yè)和APP開發(fā)者而言，它是非常有用的，可以極大的提升項(xiàng)目開發(fā)的效率，推進(jìn)進(jìn)度。Coderster 中配備了各種不同語(yǔ)言的源代碼，無(wú)論是iOS、Android平臺(tái)還是Corona、Unity 還是 Titanium，不一而足。同時(shí)，它還涵蓋了不同平臺(tái)的網(wǎng)頁(yè)主題和插件，包括 Drupal、Wordpress、Magento，甚至還有HTML5和 Tumblr。

如果你想通過(guò)腳本來(lái)增強(qiáng)你的應(yīng)用，其中還有JS、PHP、Python、C和Java 的腳本，幫你提升你的APP。你可以在搭建出基本框架之后，從Codester 購(gòu)買相應(yīng)的圖形化的素材和內(nèi)容填充進(jìn)來(lái)，從LOGO到UI全覆蓋。

這里絕大多數(shù)的代碼片段和內(nèi)容素材都選擇了規(guī)范的授權(quán)協(xié)議，并且相關(guān)的插件都提供了一定的技術(shù)支持周期（便于更新和修改）。而許多賣家都會(huì)提供相應(yīng)的說(shuō)明文章，幫你更好的了解這些產(chǎn)品的功能。

Visme

如果你也想將自己的想法轉(zhuǎn)變?yōu)橐巳雱俚膬?nèi)容，同全世界進(jìn)行分享，那么Visme 這款強(qiáng)大的工具非常適合你。Visme 本身并不復(fù)雜，它能夠幫你將那些獨(dú)樹一幟的點(diǎn)子以演示文稿、信息圖表、報(bào)表、網(wǎng)頁(yè)內(nèi)容、線框圖等多種形式展現(xiàn)出來(lái)。

Visme 的控制面板非常易用，其中的編輯選項(xiàng)能夠確保用戶能夠隨心所欲地創(chuàng)建想要的內(nèi)容，無(wú)需代碼知識(shí)和編程經(jīng)驗(yàn)。為了讓數(shù)據(jù)和圖表更具吸引力，其中內(nèi)置了超過(guò)100款不同類型的信息圖模板，可以讓你創(chuàng)建出極具傳播力的內(nèi)容。

Visme 內(nèi)置的模板有著極強(qiáng)的拓展性，可以同不同類型的素材搭配起來(lái)使用，比如動(dòng)畫，讓你的設(shè)計(jì)擁有更多的可能性。

PSD2HTML

PSD2HTML 是一個(gè)高端的設(shè)計(jì)格式轉(zhuǎn)換服務(wù)供應(yīng)商，幫你將你所設(shè)計(jì)的PSD文檔轉(zhuǎn)換為HTML/CSS代碼，甚至是Wordpress 主題和網(wǎng)頁(yè)模板。如果你是一名深耕設(shè)計(jì)而非專業(yè)的前端/程序員，那么這項(xiàng)服務(wù)能夠讓你的設(shè)計(jì)快速的實(shí)現(xiàn)為實(shí)際可用的頁(yè)面，甚至產(chǎn)品。

其實(shí)PSD2HTML的使用并不復(fù)雜，所有的一切都是在一個(gè)網(wǎng)頁(yè)上實(shí)現(xiàn)的。你只需要在這個(gè)頁(yè)面中上傳你的設(shè)計(jì)稿，提供你的電子郵件地址，并且對(duì)你的設(shè)計(jì)進(jìn)行注釋，還可以針對(duì)一些具體的選項(xiàng)進(jìn)行設(shè)定，就可以提交了。這其中包含了許多靜態(tài)設(shè)計(jì)中不會(huì)涉及到的具體功能，比如留蘭香的兼容性，可縮放的字體，炫酷的插件，響應(yīng)式的布局，視網(wǎng)膜屏幕的支持，流行的CMS系統(tǒng)（諸如Wordpress、Drupal、Joomla、Shopify和Magento）等等。

Simbla

Simbla 為設(shè)計(jì)師們提供了一種全新的網(wǎng)站搭建的模式，它同樣是通過(guò)托拽來(lái)控制布局，相比其他的同類產(chǎn)品，Simbla 的布局效果在各個(gè)平臺(tái)上的顯示效果會(huì)更加優(yōu)秀，即使你沒有太多經(jīng)驗(yàn)，也能創(chuàng)造出細(xì)節(jié)精致到位的網(wǎng)頁(yè)。

Themify.me

從數(shù)以千計(jì)的主題商店里面挑出一款符合需求的Wordpress主題，絕對(duì)是一個(gè)工作量可怕的體力活。而 Themify 出現(xiàn)之后，你就不需要在這個(gè)問(wèn)題上糾結(jié)了，它的設(shè)計(jì)團(tuán)隊(duì)就是為了幫你打造夢(mèng)想級(jí)主題而存在的。他們將最好的主題和插件整合到他們的軟件商店中，你可以從這些精心制作的主題和插件中選取你需要的，一個(gè)優(yōu)質(zhì)的網(wǎng)站就這么誕生了。

HotGloo

HotGloo 正在成為最主流的在線線框圖工具。你可以借助HotGloo 搭建出可交互的原型，無(wú)論是網(wǎng)頁(yè)、App還是可穿戴設(shè)備，這些原型還可以讓設(shè)計(jì)團(tuán)隊(duì)和客戶之間進(jìn)行協(xié)同。預(yù)制的UI元素庫(kù)內(nèi)容非常豐富，讓你能夠簡(jiǎn)單快捷地搞定線框圖和原型的設(shè)計(jì)。

Droplr

Droplr 是為數(shù)不多的在國(guó)內(nèi)還能訪問(wèn)的海外云存儲(chǔ)服務(wù)，錄屏和密碼保護(hù)只是它眾多功能中的一小部分，它主要的工能還是云存儲(chǔ)和分享，無(wú)論是大型的照片還是視頻，文檔。你還可以在PS、AI和Sketch中裝上對(duì)應(yīng)的插件，搞定各種設(shè)計(jì)稿的同步和分享。Droplr 目前已經(jīng)全面免費(fèi)，付費(fèi)部分的價(jià)格也還算合理。

Codepad

Codepad.co 是最新的HTML 在線代碼編輯器之一，它可以幫你在線存儲(chǔ)代碼，稍后使用。作為一項(xiàng)在線服務(wù)，Codepad 可以進(jìn)行版本控制，并且能夠以公開和私密兩種方式來(lái)共享代碼，便于開發(fā)者進(jìn)行在線協(xié)作。作為一個(gè)以用戶為中心的服務(wù)，它的界面其實(shí)有點(diǎn)像我們常見的社交媒體的樣式，有時(shí)間軸，能夠互相關(guān)注。

Host Tracker

如果你的業(yè)務(wù)有相應(yīng)的網(wǎng)站、博客，那么Host Tracker 絕對(duì)值得你了解一下，這項(xiàng)服務(wù)能夠盡量確保你的個(gè)人信息的安全，并且降低網(wǎng)站被入侵的機(jī)率。通過(guò)多協(xié)議監(jiān)控，Host Tracker 會(huì)進(jìn)行統(tǒng)計(jì)和報(bào)告，針對(duì)安全問(wèn)題進(jìn)行提示和警報(bào)，通過(guò)更新來(lái)高效地提升網(wǎng)站的安全。

RedBooth

Redbooth 通過(guò)優(yōu)化團(tuán)隊(duì)的組織結(jié)構(gòu)和任務(wù)的管理，幫你的團(tuán)隊(duì)有效的提高責(zé)任感和團(tuán)隊(duì)意識(shí)。你可以通過(guò)任務(wù)排期和流程分析，幫助團(tuán)隊(duì)中每個(gè)成員任務(wù)完成的有效度和效率，推動(dòng)整個(gè)項(xiàng)目發(fā)展。

Invoice Ninja

對(duì)于每一個(gè)公司和團(tuán)隊(duì)而言，資金的消耗和流向都是相當(dāng)關(guān)鍵的信息。而Invoice Ninja 可以讓你在任何時(shí)候都能對(duì)公司的收支有個(gè)明確的認(rèn)知，它簡(jiǎn)化了其中信息流通的過(guò)程。你可以在線創(chuàng)建一個(gè)與你的產(chǎn)品和項(xiàng)目相關(guān)的庫(kù)，針對(duì)每個(gè)人設(shè)置個(gè)人所得稅，精準(zhǔn)的跟蹤全部信息。

Colorlib

如果你需要一個(gè)免費(fèi)的、定制項(xiàng)目多而全的的網(wǎng)站主題的話，Colorlib可能會(huì)給你留下極其深刻的印象。首先，這款主題本身就是為時(shí)下所流行的視網(wǎng)膜屏幕而生的，文字銳利，色彩鮮艷，圖標(biāo)細(xì)膩精致，圖片也都是精挑細(xì)選的。你可以重新編輯底部的版權(quán)信息，更改色彩、文字，調(diào)整每一個(gè)元素，即使你沒有任何代碼知識(shí)，也能非常順利的進(jìn)行調(diào)整與定制。

wpDataTables

不論是正式的分析報(bào)告還是日常的社交媒體中，信息可視化都是非常重要的內(nèi)容呈現(xiàn)方式，這也促使Touchmesoft創(chuàng)建了 wpDateTables這一工具，它讓W(xué)ordpress 用戶可以更加便捷地創(chuàng)建好用且易于管理的可視化信息內(nèi)容。

xFive

雖然網(wǎng)站服務(wù)供應(yīng)商越來(lái)越多，但是個(gè)性化的需求使得企業(yè)和機(jī)構(gòu)越來(lái)越難以找到一個(gè)完全系統(tǒng)而靠譜的解決方案了。而xFive 似乎能夠緩解這一現(xiàn)狀。xFive 是由專業(yè)的團(tuán)隊(duì)所創(chuàng)建，它能將你的需求切實(shí)可行的轉(zhuǎn)化為實(shí)際的產(chǎn)品，推進(jìn)整個(gè)項(xiàng)目實(shí)現(xiàn)。

A Lighter Finish!

有的時(shí)候，有趣的內(nèi)容能夠?qū)⒛銖臒灴菰锏拇a工作中解放出來(lái)，而這個(gè)Browserling 所床架你的程序員漫畫就能夠幫你放松下來(lái)！

【Nick Babich 的用戶體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)之談】

1. 輸入框設(shè)計(jì)：《講真，你真的懂得文本輸入框設(shè)計(jì)的那些潛規(guī)則么？》
2. 表單設(shè)計(jì)：《摳細(xì)節(jié)！設(shè)計(jì)高效好用表單的10個(gè)技巧》
3. 極簡(jiǎn)APP UI：《超贊！幫你打造極簡(jiǎn)風(fēng)APP UI 的實(shí)用設(shè)計(jì)技巧》
4. 前端開發(fā)：《有法可依！幫你衡量一個(gè)動(dòng)效是否合格的六個(gè)核心因素》
5. 面包屑：《并不簡(jiǎn)單！網(wǎng)頁(yè)中為你指路的面包屑到底應(yīng)當(dāng)怎么使用？》
6. 移動(dòng)端頁(yè)面：《跟著建議走！這樣的移動(dòng)端網(wǎng)站設(shè)計(jì)才對(duì)頭》

原文地址：designshack
原文作者：DAVID APPLEYARD
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com