UI知識,教你建立一套UI設計規(guī)范
Web Starter Kit(HTML, CSS, JS) | Google Web Fundamentals 提供的 Web 生產(chǎn)樣板,支持創(chuàng)建“Pattern Library”形式的文檔。(翻墻)
Style Guide Boilerplate(PHP) | “Pattern Library”樣板,類似 Pattern Lab。
更多方法類文章和工具列表可參考:
Website Style Guide Resources
50 Style Guide Tools, Articles, Books and Resources | Tuts+
“Spec”應以盡量降低設計師精力消耗,并能讓開發(fā)人員清晰理解為標準。提高效率并保證質(zhì)量的基礎,是選擇合適的工具。
在繪制設計稿所用的圖形編輯軟件中啟用擴展和插件,直接生產(chǎn)“Spec”,高效直擊主題:
specKing | Photoshop($19,推薦,正在使用)
Specctr | Photoshop, Illustrator($49 ,PS 和 AI 單獨出售)
Markly App | Photoshop, Sketch($39.99,PS 和 Sketch 單獨出售)
Sketch Measure | Sketch(自由)
一些其他插件也提供制作“Spec”功能,比如:
PNG EXPRESS | Automated Design Delivery for Photoshop($29)
Ink | A Photoshop documentor plugin(免費)
團隊協(xié)作平臺和其他工具:
Avocode | 簡化設計師與開發(fā)人員之間的協(xié)作流程(Web 產(chǎn)品),提供 Slice(切圖)、Spec、圖層轉 CSS 等功能。
Zeplin | 同樣是一款有質(zhì)量的設計協(xié)作軟件。目前僅支持 Sketch 設計稿,PS 支持仍在開發(fā)中。產(chǎn)品處于邀請內(nèi)側階段。
Frontify | 上文“Style Guide 工具”提到過,屬協(xié)作平臺,支持對設計稿“Spec”。
Assistor PS | 可獨立在系統(tǒng)中運行的 PS 協(xié)助軟件,但需借用 PS 載入設計文檔。提供 Slice,Spec 等功能。