UI知識(shí),教你建立一套UI設(shè)計(jì)規(guī)范(3)

來(lái)源:zhihu 作者:王瑞 學(xué)習(xí):4615人次

UI知識(shí),教你建立一套UI設(shè)計(jì)規(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+

3. Specification (Spec):

“Spec”應(yīng)以盡量降低設(shè)計(jì)師精力消耗,并能讓開(kāi)發(fā)人員清晰理解為標(biāo)準(zhǔn)。提高效率并保證質(zhì)量的基礎(chǔ),是選擇合適的工具。

在繪制設(shè)計(jì)稿所用的圖形編輯軟件中啟用擴(kuò)展和插件,直接生產(chǎn)“Spec”,高效直擊主題:

specKing | Photoshop($19,推薦,正在使用)
Specctr | Photoshop, Illustrator($49 ,PS 和 AI 單獨(dú)出售)
Markly App | Photoshop, Sketch($39.99,PS 和 Sketch 單獨(dú)出售)
Sketch Measure | Sketch(自由)

一些其他插件也提供制作“Spec”功能,比如:

PNG EXPRESS | Automated Design Delivery for Photoshop($29)
Ink | A Photoshop documentor plugin(免費(fèi))

團(tuán)隊(duì)協(xié)作平臺(tái)和其他工具:

Avocode | 簡(jiǎn)化設(shè)計(jì)師與開(kāi)發(fā)人員之間的協(xié)作流程(Web 產(chǎn)品),提供 Slice(切圖)、Spec、圖層轉(zhuǎn) CSS 等功能。

Zeplin | 同樣是一款有質(zhì)量的設(shè)計(jì)協(xié)作軟件。目前僅支持 Sketch 設(shè)計(jì)稿,PS 支持仍在開(kāi)發(fā)中。產(chǎn)品處于邀請(qǐng)內(nèi)側(cè)階段。

UI知識(shí),教你建立一套UI設(shè)計(jì)規(guī)范

Frontify | 上文“Style Guide 工具”提到過(guò),屬協(xié)作平臺(tái),支持對(duì)設(shè)計(jì)稿“Spec”。

UI知識(shí),教你建立一套UI設(shè)計(jì)規(guī)范

Assistor PS | 可獨(dú)立在系統(tǒng)中運(yùn)行的 PS 協(xié)助軟件,但需借用 PS 載入設(shè)計(jì)文檔。提供 Slice,Spec 等功能。

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!