25款新鮮出爐的實用網頁設計工具大合集

發表於2015-09-01

工欲善其事,必先利其器,對於設計師而言尤其如此。好工具對於整個設計的加成是相當明顯的。不同的工具配合不同的設計流程和設計物件,對於效果和效率的提升都有顯著的效果。

隨著設計和開發壁壘的逐漸模糊,最新的設計工具也開始試圖融合設計和開發的流程,而免程式碼開發的擁簇則將更多的精力投放到無程式碼平臺的研發上去了。今天我們所蒐羅的新工具,包含了不少針對網站和APP的原型設計工具,另外一部分則是測試工具。這些工具中一部分已經發布有一陣子了,但是因為版本一直持續更新,非常值得一用,它們也姑且算是新工具吧!接下來,讓我給你一一介紹吧。

設計工具

Macaw Scarlet

Macaw Scarlet 之所以出現在這個列表當中,是因為這款工具還沒有正是釋出,但是非常值得期待!這款被稱為“實時設計環境”的工具會讓大家設計響應式網頁和APP更加方便。

Wagtail

Wagtail 並非是設計工具,而是一套內容管理系統(CMS),它的特殊之處在於這套系統包含了設計流程,尤其是針對內容的設計。

它有一個夢幻般的功能,叫做Streamfield,它的工作原理接近於Medium的內容編輯器,不同之處在於它更加易於定製化,功能也更加完備。

Magic Mirror for Sketch 3

這個名為Magic Mirror的工具是為Sketch 3的使用者所準備的,它可以幫你將一系列智慧物件所構建的原型融入到照片中去。

線框圖工具

Wire Flow

作為一款對繪圖並不友好的平板而言,線框圖工具Wire Fow是如此的好用,可以說讓我的老平板重生了過來。這款幾乎可以滿足你所有線框圖繪製需求的工具,可以在手機、平板上執行,並且擁有良好的視覺化的編輯功能,簡直是業界良心。

Apple Watch wire-frame kit

這是一套Apple Watch的線框圖工具,多的就不用介紹了!

PowerMockup

為蘋果的Keynote所定製的線框圖工具已經不止一款了,但是為PowerPoint設計的這類工具並不多,而PowerMockup 就是這樣的一款工具。

原型工具

Origami

Origami是一款Facebook釋出的原型工具,他們是這樣描述它的:”Origami 是一款免費的工具,用於設計現代的使用者介面。它可以幫你迅速元件原型,在iPhone和iPad上執行,迭代升級,並且匯出開發可用的程式碼。”

Marvel

這是一款非常簡單的原型工具,即使是免費版都可以幫你製作一個非常不錯的APP原型。它整合了Google Drive和Dropbox並且允許你將指定的影像組合到一起,快速製作APP原型。也正是這種雲端同步的方式,你所製作的原型也可以快速地傳遞到雲端,讓你的原型實時更新。

Protosketch

Protosketch 是一款為iPad所設計的原型設計APP。其中包內建了一套包含大量元件的 UI Kit,基本的向量編輯工具、對齊工具等等也都具備。

雖然它只適用於iPad並且處於測試階段,但是這可能是這個平臺上你最好的選擇。另外,它可以超出SVG和PDF格式的文件。

Frontify

Frontify 也是原型工具,而它的獨特之處在於,它還提供一系列工具幫你更好地組織和設計品牌形象和風格指南。從配色方案到成體系的樣式、UI元素,簡直是團隊設計的必備品。

Atomic

將你的PSD或者Sketch文件拖放到Atomic 當中可以生成對應的原型。版本控制、協作功能也都內建其中,這絕對是適合團隊協作迭代升級的工具。

Form

Form 是一款先進的原型建立工具,可以和你的iPhone聯動。你可以在電腦上建立好了原型之後,可以在手機上瀏覽。另外,它採用的是Material Design的設計規範,這使得原型看起來更漂亮。

Pixate

Pixate 是一款專注於手機顯示效果的原型工具,它可以幫你製作真正意義上高保真的“原生”的原型。

Web 開發

Sandvox

Sandvox 是一款為非程式設計人員所設計的Mac應用。Sandvox很大程度上是一個基於模板的體系,不過對於高階使用者而言,同樣可以手動調整。

儘管Sandvox同樣可以作為CMS系統來使用的時候,並不會比其他的Blog系統更“前衛”,但是它的功能一直在持續更新,對於新手而言,也是一套更加人性化的解決方案。

XPRS

這是一個給新手的網站建設工具,XPRS會免費提供給個人使用,商用有更專業的解決方案。

WordPress 架設工具

Themify Flow

雖然有許多人一致詬病Wordpress,但是它依然具有強大的生命力。比如Themify這個工具就很令人驚豔,它在傳統的釋出系統上搭建了一個設計工具,其結果是Themify Flow 允許你真的能靠簡單託拽生成反應靈敏,可用性極高的響應式主題,並且它是免費而開源的!

Cornerstone

Cornerstone 是上面Themify Flow的競爭對手,它也是一個託拽是WP主題生成工具。不過它的運作方式稍有不同,比如它提供實時程式碼編輯器,為前端和其他的設計和開發者提供不同級別的訪問許可權和功能。不過它不是免費的,除非你購買了X Theme。

Qards

Qards 也是Wordpress 頁面搭建工具,它為你搞定了絕大多數的設計工作,不過相比於其他的構建單個模板,Qards選擇的方案是以卡片的形式堆疊構成頁面。一般而言,Qards 會為你預製一套頁面佈局,你可有混合搭配構建你自己的方案,針對不同的功能而選擇不同的設計。

協作和生產力工具

Relay

Relay 是一款快速便捷的分享協作工具,它擁有針對Adobe CC、Sketch、Chrome和OSX的外掛/APP,不論你所做的專案是什麼,分享吧。

Skala Preview

想看看你在Photoshop中的設計在實際裝置上長啥樣?簡單,裝上Skala Preview吧,你可以在幾乎所有移動裝置上預覽。不同於其他同類工具的資訊傳遞方式,Skala Preview選擇的是USB介面來傳遞,更老派,卻更有效。

RightFont

RightFont 是Mac平臺上的一款快速而漂亮的字型管理工具,可以和Adobe CC於Sketch進行聯動。

新鮮出爐的程式碼

jQuery 3

jQuery 3 剛剛釋出,儘管沒有宣佈新的特性,但是大量的舊功能被重新編寫,並且Bug進行了修復,效能也得到了提升。

Simpler Sidebar

說道jQuery,還有一些新鮮出爐的外掛讓設計師的工作更容易,尤其是對那些需要編寫程式碼的設計師而言。Simper Sidebar 就是這樣的一個側邊欄外掛,小巧快速。

Labelauty

全新的單選框和多選框樣式,用這套程式碼就可以告別瀏覽器的預設樣式了。

smart-placeholder

填寫表單的時候,使用者體驗設計很重要。不使用佔位符讓人迷惑,使用佔位符同樣也存在問題,使用者填寫的時候偶爾也會迷失。而這裡的智慧佔位符兼具了兩者的優勢,當你填寫表單的時候,佔位符會自動下移,保持提醒的功能。

老工具的新生

其實許多早已存在的工具,在新版本上投注了相當的精力,更新了許多優秀的功能,這絕對是無法忽視的。不信往下看:

Webflow

Webflow 以全新的方式整合了更多的第三方服務。現在你已經可以從Webflow將功能新增到網路表單當中。

InVision

作為一款著名的線上協作工具,InVision 持續不斷地推出新功能,穩步更新,對於移動端測試也無限制,工作流程管理,整合了Dribbble 服務。為了更好地協作溝通,InVision還增加了聊天表情符……

Strikingly

最近幾個月,Strikingly 增加了一套全新的網頁編輯器,協作平臺,甚至為自家的部落格新增了RSS源……

Adobe Muse

最後,是Adobe Muse。現在的Muse已經可以新增任何TypeKit字型了,對於網頁設計師而言,這是一個非常有用的更新。現在的Muse 可以輕鬆建立部落格、電商網站等內容向的站點。另外,正如同其他最新的Adobe CC套件中的工具,Adobe Muse也整合了Adobe相簿服務。

相關文章