说说设计体系、风格指南和模式库

目录

一、定义

二、设计体系

2.1 Design system

2.2 风格指南

2.3 Component

三、样式库


一、定义

设计体系(Design system):可共享的设计语言的基础合集,包含了设计价值,语义,语法和上下文。

风格指南(Style guide):包含一个设计体系的样式,组件,实例和原则的物理或数字文档,并解释如何使用。

样式库(Pattern library):有组织的一组可复用的组件,通常会包含代码实例,设计指南和用例。

组件(Component):一个独立且可复用的样式,代表了一个特定界面或功能。

二、设计体系

2.1 Design system

Design system是一种可重用的设计规范和组件库,可帮助设计师和开发人员在一致的视觉和交互模式下构建高质量的数字产品。它是一套设计、开发、文档和管理工具的集合,可以为跨团队和项目提供一致的品牌体验和用户体验。它通常包括设计原则、颜色、字体、排版、图标、组件、模板、样式指南、交互模式和代码库等内容。通过使用设计系统,团队可以更快地构建产品,减少设计错误,提高一致性和可维护性,并节省时间和资源。

设计体系是团队中共享的语言,而语言的核心是保证系统的交流顺畅。编程语言使人们可以和计算机进行交流,平时说的语言可以让人们与讲同样语言的任何人沟通。而设计语言为你团队的设计思想赋予意义,并帮助团队之间传达这种意义。当使用一种共享的语言时,交流想法就会统一和具体,从而更容易。

即使当你还没有建立设计体系的时候,你的团队也在使用它。想想你是如何传达设计理念的,某些词定义了某种界面元素的类型,某些组件应该在外观和交互上不相同。甚至不需要刻意去将它写成文档,你们都有一个关于事情如何工作的共同假设。当然,如果没有文档,假设可能并不总是一致。

为了保证你的设计语言更加一致和明确,你的团队应该创建一个风格指南(Style guide)。

2.2 风格指南

Style guide(样式指南)是一个文档,其中包含了一个品牌或产品的视觉和声音方面的规范和指南。它通常包括标准化的规则和指导方针,用于确保品牌的一致性和统一性,以及为设计和写作提供支持。样式指南通常包括设计元素(例如颜色、字体、图标和图像)、排版和布局、品牌声音(例如用语、风格和声音标识)以及使用指南(例如品牌名称、标志和其他标识符)。样式指南的主要目的是确保品牌或产品在所有的渠道和媒体上都保持一致的外观、感觉和声音,从而提高品牌知名度和可识别性。

设计指南是设计系统的物理或数字呈现形式,通过参考设计风格指南,团队成员可以开始掌握定义系统的各个部分和决策。

在网络出现之前,风格指南主要用于定义书写和印刷设计的标准和样式,像AP Stylebook或Chicago Manual of Style这样的书仍然是写作者和编辑在大多数主要出版社如何保持一致性和定义最佳实践的基础资源。

如今,数字出版商和产品设计团队建立风格指南来帮助巩固他们团队的设计语言。风格指南帮助他们编纂已建立的规范,记录现有的模式和程序,并使新成员快速跟上进度。

数字设计的风格指南可以包含以下部分或全部:

  • 设计原则(Design principles)
  • 最佳实践(Best practices)
  • 品牌风格指南(Brand style guide)
  • 书写风格(Writing styles)
  • 图标设计(Iconography)
  • 图像(Imagery)
  • 样式库(Pattern library)
  • 代码风格指南(Code style guide)
  • 模板(Templates)
  • 工具(Tools & Utilities)
  • 说明文档(Further documentation)
2.3 Component

Component(组件)是指一个可重复使用的、独立的、具有特定功能的UI元素。组件通常由HTML、CSS和JavaScript代码组成,可以通过简单的调用或复制粘贴来在不同的部分或页面中使用。组件的使用可以提高开发效率,同时也可以确保界面设计的一致性和可维护性。常见的组件包括按钮、表单、导航、卡片、对话框等。组件的开发方式可以基于不同的框架或库,例如React、Angular、Vue等,也可以使用纯原生的HTML、CSS和JavaScript进行开发。组件化的开发模式已成为现代Web开发的重要趋势之一,为Web应用和网站的开发提供了更好的可扩展性和可维护性。

三、样式库

正如上面看到的,样式库只是组成风格指南的一部分。它们可能在内容和使用方面构成了风格指南中最大的一部分,但不能代替整个风格指南。

在构建样式库时,你应该为添加的每个模式考虑以下问题:

  • 模式名称:
  • 视觉表现:
  • 设计元素
  • 代码示例
  • 变形
  • 用例
  • 注意事项
  • 相关元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211639.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matplotlib 默认属性和绘图风格

matplotlib 默认属性 一、绘图风格1. 绘制叠加折线图2. Solarize_Light23. _classic_test_patch4. _mpl-gallery5. _mpl-gallery-nogrid6. bmh7. classic8. fivethirtyeight9. ggplot10. grayscale11. seaborn12. seaborn-bright13. seaborn-colorblind14. seaborn-dark15. sea…

Chart 7 内存优化

文章目录 前言7.1 Adreno GPU OpenCL内存7.1.1 内存声明周期7.1.2 Loacl Memory7.1.3 Constant memory(常量内存)7.1.4 Private Memory7.1.5 Global Memory7.1.5.1 Buffer Object7.1.5.2 Image Object7.1.5.3 Image object vs. buffer object7.1.5.4 Use of both Image and buf…

C语言数据结构-双向链表

文章目录 1 双向链表的结构2 双向链表的实现2.1 定义双向链表的数据结构2.2 打印链表2.3 初始化链表2.4 销毁链表2.5 尾插,头插2.6 尾删,头删2.7 根据头次出现数据找下标2.8 定点前插入2.9 删除pos位置2.10 定点后插入 3 完整代码3.1 List.h3.2 Lish.c3.3 test.c 1 双向链表的结…

ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。百度使用哪种方式?

在Ajax中,GET和POST是两种常见的HTTP请求方法。它们有以下区别: GET请求:使用GET请求时,参数数据会附加在URL的末尾,以查询字符串的形式发送给服务器。GET请求是幂等的,也就是说多次发送相同的GET请求&…

键盘打字盲打练习系列之矫正坐姿——4

一.欢迎来到我的酒馆 盲打,矫正坐姿! 目录 一.欢迎来到我的酒馆二.继续练习二.矫正坐姿1.键鼠快速选购指南2.椅子快速选购指南 三.改善坐姿建议 二.继续练习 前面的章节,我们重点向大家介绍了主键盘区指法和键盘键位。经过一个系列的教程学习…

Mybatis环境搭建

1、开发环境 IDE:IntelliJ IDEA 2022.2.1 (Ultimate Edition) 构建工具:maven 3.6.1 MySQL版本:MySQL 5.7 MyBatis版本:MyBatis 3.5.14 2、工程创建 创建一个Maven工程giser-java-mybatis-demo 基础依赖如下: &…

【Python】pip命令及使用

PIP命令 下面是一个整理成表格的pip命令及使用的示例&#xff1a; 命令使用示例说明pip install <package>pip install requests安装名为"requests"的包pip uninstall <package>pip uninstall requests卸载名为"requests"的包pip listpip li…

用友U8 Cloud 多处反序列化RCE漏洞复现

0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP,主要聚焦成长型、创新型企业,提供企业级云ERP整体解决方案。 0x02 漏洞概述 用友U8 Cloud存在多处(TableInputOperServlet、LoginServlet 、FileTransportServlet、CacheInvokeServlet、ActionHandlerServlet、Servle…

12.9每日一题(备战蓝桥杯循环结构)

12.9每日一题&#xff08;备战蓝桥杯循环结构&#xff09; 题目 2165: 求平均年龄题目描述输入输出样例输入样例输出来源/分类 题解 2165: 求平均年龄题目 2166: 均值题目描述输入输出样例输入样例输出来源/分类 题解 2166: 均值题目 2167: 求整数的和与均值题目描述输入输出样…

GB/T 43212-2023 竹炭板检测

竹炭塑复合板是指以竹炭粉为主要原料&#xff0c;与塑料及其他助剂复配混合&#xff0c;经熔融挤出或模压成型等工艺制成的板材。 GB/T 43212-2023 竹炭板测试&#xff1a; 测试项目 测试方法 外观 GB/T 43212 尺寸 GB/T 19367 含水率 GB/T 17657 密度 GB/T 17657 吸…

【rabbitMQ】springboot整合rabbitMQ模拟简单收发消息

目录 1.创建项目和模块 2.添加rabbitMQ依赖 3.启动rabbitMQ服务 4.引入rabbitMQ服务端信息 5.通过单元测试模拟业务发送消息 6. 接收消息 1.创建项目和模块 2.添加rabbitMQ依赖 <!-- rabbitmq依赖--> <dependency> <groupId>org.sp…

JavaEE 09 锁策略

1.锁策略 1.1 乐观锁与悲观锁 其实前三个锁是同一种锁,只是站在不同的角度上去进行描述,此处的乐观与悲观其实是指在预测的角度上看会发生锁竞争的概率大小,概率大的则是悲观锁,概率小的则是乐观锁 乐观锁在加锁的时候就会做较少的事情,加锁的速度较快,但是消耗的cpu资源等也会…

排序算法-选择/堆排序(C语言)

1基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的 数据元素排完 。 2 直接选择排序: 在元素集合 array[i]--array[n-1] 中选择关键码最大 ( 小 ) 的数据元素…

PHP基础 - 数组遍历与排序

介绍 在PHP中,数组遍历和排序是常见的操作,用于对数组中的元素进行访问和排序 数组遍历 1)数值数组的遍历 使用 foreach 循环遍历数组:foreach 循环是最常用的遍历数组的方法,它可以遍历索引数组和关联数组。例如:$fruits = array("apple", "banana&q…

AG1KLPQ48 User Manual

1.&#xff09;软件安装&#xff1a; 解压缩或执行安装文件&#xff0c;安装 Supra 软件。执行文件为 bin 目录中的 Supra.exe。 运行 Supra&#xff0c;选择菜单 File -> Import license&#xff0c;选择 license 文件并导入 License。 2.&#xff09;新建项目&#xff1a;…

Python与CAD系列高级篇(二十一)批量将横向文本改竖向

0 简述 本篇介绍以下功能开发:一次性选择所有横向文本并批量修改为竖向。 1 需求 需求: ① 用户在cad中交互式选择所有需要修改方向的文本。 ② 将所有文本方向由横向改为竖向。 2 代码实现 代码实现: import win32com.client as win32 import pythoncomdef vtpnt(x, y, …

Elaticsearch 学习笔记

文章目录 Elaticsearch 学习笔记一、什么是 Elaticsearch &#xff1f;二、Elaticsearch 安装1 es 安装2 问题解决3 数据格式 三、索引操作1 PUT 请求&#xff1a;在postman中&#xff0c;向 ES 服务器发 PUT 请求&#xff08;PUT请求相当于创建的意思&#xff09;2 GET 请求&a…

Base64编码解码

一、Base64编码技术简介 Base64编码是一种广泛应用于网络传输和数据存储的编码方式。它将原始数据转换为可打印的字符形式&#xff0c;以便于传输和存储。Base64编码后的数据长度是原始数据长度的约3/4&#xff0c;具有一定的压缩效果。 Base64编码解码 -- 一个覆盖广泛主题工…

【trino权威指南】使用trino详解:trino client安装、查询sql、DBeaver连接trino、java通过JDBC连接trino

文章目录 一. Trino CLI1. 安装client2. 使用client执行sql 二. JDBC driver 连接Trino1. 通过DBeaver用户界面连接2. JDBC Driver in java2.1. 环境配置2.2. 注册和配置driver2.3. 连接参数2.4. 查询例子 一. Trino CLI 1. 安装client Trino CLI提供了一个基于终端的交互式s…

上海交通大学生存手册PDF

强烈推荐所有大学生去阅读《上海交通大学生存手册》。虽然它可能有些冗长&#xff0c;但非常重要&#xff0c;因为它道出了大学教育的本质。 如果几年前我能够看到这本书&#xff0c;也许我的大学生活会有所不同。现在我将向正在上大学或者将要上大学的你推荐这本书。 无论你…