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

2023-10-29 17:22:10 來源/作者: / 己有:1人學(xué)習(xí)過

iOS Human Interface Guidelines
Material Guidelines(翻墻)

采用概念 2 的:

Skeleton
Pure
Bootstrap

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

靈感和實(shí)例資源:

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

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

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

Airbnb UI Toolkit Web
Salesforce1 UI Kit
Housing UI Style Guide

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

也可借助工具:

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

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

Frontify Style Guide | Frontify 是一個面向設(shè)計(jì)團(tuán)隊(duì)的協(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。在大量的自由和開源前端框架項(xiàng)目中,選擇有維護(hù)支持,自身喜歡或熟悉的即可。

可用工具:

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

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