UI知识,教你建立一套UI设计规范

2023-07-02 11:56:27 来源/作者: / 己有:2人学习过

iOS Human Interface Guidelines
Material Guidelines(翻墙)

采用概念 2 的:

Skeleton
Pure
Bootstrap

而概念 3 往往仅在公司或团队内部使用(详见下文“工具”)。

灵感和实例资源:

Website Style Guide Resources | 收录大量案例,该项目同时也收录了相关文章、工具、书籍、播客等。
Find Guidelines | 一个直观的 Guideline 官方链接收集列表。
Brand Style Guide Examples | 同上
All The Style Guides | 同上,托管在 Tumblr ,以博客形式呈现。

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

方法不限,以能够准确展现视觉设计风格和品牌识别(Identity)的规范为标准。正因其偏视觉化,编写文档不是必须的,可直接用图形编辑软件产出。例如:

Airbnb UI Toolkit Web
Salesforce1 UI Kit
Housing UI Style Guide

UI知识,教你建立一套UI设计规范

也可借助工具:

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

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

Frontify Style Guide | Frontify 是一个面向设计团队的协作平台,提供“Style Guide”生成和“Spec”工具。

CSS Stats | 解析 URl 对应网站的 Style(主要依靠分析 CSS 文件),展示相关信息,比如字体尺寸(font-size)、色板、浮动(float)采用数量等。

Stylify Me | 填入网站 URL,自动生成对应页面的“Style Guide”。提供 PDF 文件保存。

2. Style Guide / Pattern Library:

因要制作出网页文档,且其中含有大量的 Web 组件(代码片段)和元素(视觉),可借助前端框架高效产出,比如相对大众的 Bootstrap,Semantic UI。在大量的自由和开源前端框架项目中,选择有维护支持,自身喜欢或熟悉的即可。

可用工具:

设计师 Brad Frost 有一套叫做“原子设计(Atomic Design)”的 Web 设计理论,在该领域有一定影响,其核心概念就是复用“Pattern Library”,高率生产 Web 页面:

Atomic Design | Brad Frost(翻墙)
他为该理论创建了一个开源项目,基于 PHP:Pattern Lab | Build Atomic Design Systems