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

2023-12-19 17:16:40 來源/作者: / 己有:0人學(xué)習(xí)過

最值得收藏的UI設(shè)計干貨!今天這篇從概念、靈感,方法及工具3個方面幫同學(xué)們理清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)、色板、品牌標(biāo)識規(guī)范(Brand Guideline)、Icon 等要素作出展示和說明。主要作用于設(shè)計團隊或設(shè)計師之間,展示產(chǎn)品的視覺設(shè)計風(fēng)格。便于風(fēng)格復(fù)用,規(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)的樣式風(fēng)格及實現(xiàn)其效果所對應(yīng)的代碼片段(HTML, CSS)作出說明解釋,包含交互和動效設(shè)計(以 JavaScript 為主)。例如:常見的基礎(chǔ)布局(Grid System)、字體排版(Typography)、按鈕、菜單、列表、對話框(Dialog)、Tooltip 等等。用于團隊 Web 設(shè)計和開發(fā)協(xié)作,統(tǒng)一產(chǎn)品風(fēng)格。復(fù)用時提升工作效率,同時也保證用戶體驗質(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)俗稱“標(biāo)注”)和 Measurement(量度)構(gòu)成。Annotation 既注釋設(shè)計稿中界面元素所使用的字體字型、色值等,Measurement 則注明各元素的尺寸及它們的邊距,留白等。用于設(shè)計師與開發(fā)人員之間溝通和工作交接,保證開發(fā)出地產(chǎn)品界面和視覺稿高度統(tǒng)一。

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

靈感:

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