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

來源:zhihu 作者:王瑞 學習:4615人次

最值得收藏的UI設(shè)計干貨!今天這篇從概念、靈感,方法及工具3個方面幫同學們理清UI設(shè)計規(guī)范,同時有一大波神器推薦 

作者追波:https://dribbble.com/fiohistory

概念,靈感,方法和工具。

概念:

設(shè)計互聯(lián)網(wǎng)產(chǎn)品,Style Guide / Pattern Library 和純粹的 Specification 各具不同功能和作用,卻都含“設(shè)計規(guī)范”的概念。

1. Style Guide / Pattern Library:偏重視覺概念,一般以文檔或圖像格式呈現(xiàn)(不限定)。內(nèi)容:對設(shè)計作品中的字體(Typeface)、字型(Font)、色板、品牌標識規(guī)范(Brand Guideline)、Icon 等要素作出展示和說明。主要作用于設(shè)計團隊或設(shè)計師之間,展示產(chǎn)品的視覺設(shè)計風格。便于風格復用,規(guī)范第三方的品牌塑造(Branding)和接入。

實例參考(更多參考下文中“靈感”):

Brand Assets | Kickstarter
Logos & branding | Dropbox(翻墻)

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

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

2. Style Guide / Pattern Library:偏重(Web 前端)開發(fā)概念,基本都以網(wǎng)頁文檔形式呈現(xiàn)。內(nèi)容:對界面元素(UI Elements)的樣式風格及實現(xiàn)其效果所對應(yīng)的代碼片段(HTML, CSS)作出說明解釋,包含交互和動效設(shè)計(以 JavaScript 為主)。例如:常見的基礎(chǔ)布局(Grid System)、字體排版(Typography)、按鈕、菜單、列表、對話框(Dialog)、Tooltip 等等。用于團隊 Web 設(shè)計和開發(fā)協(xié)作,統(tǒng)一產(chǎn)品風格。復用時提升工作效率,同時也保證用戶體驗質(zhì)量。

實例參考(更多參考下文中“靈感”):

Pattern Library | MailChimp(翻墻)
Mapbox styleguide | Mapbox

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

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

概念 1 和 2 結(jié)合的實例(更多參考下文中“靈感”):

Product Style Guide, Visual guidelines | Salesforce
Style Guide | Lonely Planet

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

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

3. Specification (Spec):介于設(shè)計與開發(fā)之間,由設(shè)計師直接在視覺稿(Mockup)中創(chuàng)建。內(nèi)容:主要由 Annotation(注釋,國內(nèi)俗稱“標注”)和 Measurement(量度)構(gòu)成。Annotation 既注釋設(shè)計稿中界面元素所使用的字體字型、色值等,Measurement 則注明各元素的尺寸及它們的邊距,留白等。用于設(shè)計師與開發(fā)人員之間溝通和工作交接,保證開發(fā)出地產(chǎn)品界面和視覺稿高度統(tǒng)一。

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

靈感:

一些常用的項目和文檔都有采用上述的“概念”,比如采用了概念 1 的:

iOS Human Interface Guidelines
Material Guidelines(翻墻)

采用概念 2 的:

Skeleton
Pure
Bootstrap

而概念 3 往往僅在公司或團隊內(nèi)部使用(詳見下文“工具”)。

靈感和實例資源:

Website Style Guide Resources | 收錄大量案例,該項目同時也收錄了相關(guān)文章、工具、書籍、播客等。
Find Guidelines | 一個直觀的 Guideline 官方鏈接收集列表。
Brand Style Guide Examples | 同上
All The Style Guides | 同上,托管在 Tumblr ,以博客形式呈現(xiàn)。

方法和工具:1. Style Guide / Pattern Library:

方法不限,以能夠準確展現(xiàn)視覺設(shè)計風格和品牌識別(Identity)的規(guī)范為標準。正因其偏視覺化,編寫文檔不是必須的,可直接用圖形編輯軟件產(chǎn)出。例如:

Airbnb UI Toolkit Web
Salesforce1 UI Kit
Housing UI Style Guide

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

也可借助工具:

Style Inventory for Sketch | Sketch 插件,基于視覺稿生成 “Style Guide”。

Style Tiles | 用于快速制作“Style Guide”的 PSD 模版,

Frontify Style Guide | Frontify 是一個面向設(shè)計團隊的協(xié)作平臺,提供“Style Guide”生成和“Spec”工具。

CSS Stats | 解析 URl 對應(yīng)網(wǎng)站的 Style(主要依靠分析 CSS 文件),展示相關(guān)信息,比如字體尺寸(font-size)、色板、浮動(float)采用數(shù)量等。

Stylify Me | 填入網(wǎng)站 URL,自動生成對應(yīng)頁面的“Style Guide”。提供 PDF 文件保存。

2. Style Guide / Pattern Library:

因要制作出網(wǎng)頁文檔,且其中含有大量的 Web 組件(代碼片段)和元素(視覺),可借助前端框架高效產(chǎn)出,比如相對大眾的 Bootstrap,Semantic UI。在大量的自由和開源前端框架項目中,選擇有維護支持,自身喜歡或熟悉的即可。

可用工具:

設(shè)計師 Brad Frost 有一套叫做“原子設(shè)計(Atomic Design)”的 Web 設(shè)計理論,在該領(lǐng)域有一定影響,其核心概念就是復用“Pattern Library”,高率生產(chǎn) Web 頁面:

Atomic Design | Brad Frost(翻墻)
他為該理論創(chuàng)建了一個開源項目,基于 PHP:Pattern Lab | Build Atomic Design Systems

UI知識,教你建立一套UI設(shè)計規(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è)計師精力消耗,并能讓開發(fā)人員清晰理解為標準。提高效率并保證質(zhì)量的基礎(chǔ),是選擇合適的工具。

在繪制設(shè)計稿所用的圖形編輯軟件中啟用擴展和插件,直接生產(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 | 簡化設(shè)計師與開發(fā)人員之間的協(xié)作流程(Web 產(chǎn)品),提供 Slice(切圖)、Spec、圖層轉(zhuǎn) CSS 等功能。

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

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

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

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

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

學習 · 提示

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

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

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