最近,以 chatgpt 为代表的 AI 被吵的特别火爆,类似“AI 是新一次工业革命”“AI 改变世界”的言论甚嚣尘上,但是,大部分人只是尝鲜用了几次后,就不再应用了,对 chatgpt 的感觉是:很厉害,但没什么用。
我前段时间也有在玩 AI,个人的感觉,chatgpt 确实极大地提高了我们的生产力,例如,应用 chatgpt 进行翻译,目前 chatgpt 的翻译比绝大部分的机翻都要好;还有我们可以用 chatgpt 来帮我们理解某个概念,帮我们制定健身计划,某个学科的学习步骤等等。
而后来我想到,针对于安排师的工作场景是否可以应用 ChatGPT 来帮我们写安排体系文档,安排体系和 ChatGPT 两个生产力工具结合在一起,是否会迸发出不一样的火花?
在文章开始之前,我先提出三个问题:
为了高效阅读,大家可以带着这三个问题阅读文章,在阅读结束后,大家可以回头想一想,这几个问题是否已经有答案了。
更多ChatGPT 干货:
一、安排体系文档
1. 安排体系
在引见安排体系文档之前,我们先聊一下什么是安排体系。在安排体系的范畴内,很多同学总是「安排体系」「安排规范」「组件库」「安排语言」等概念傻傻分不清楚。
我们这里把范围从小到大分别解释一下,帮助大家厘清这些概念。
安排语言:包括字体、色调、间距、圆角、布局等在内的根蒂根基视觉元素。
组件库:一个由 UI 组件按照一定的结构和顺序组织起来的集合。这些 UI 组件可以是按钮、文本框、下拉菜单等等,它们被安排成可以重复应用的模块,可以在不同的应用程序或页面中应用。
安排原则:即整个安排规范所要遵循的全局规则,为安排提供方向指导。例如 ant design 的安排原则就是:自然,确定性,意义感,生长性。
安排规范:安排语言、组件库、安排原则组合起来称为安排规范。
安排体系文档:对安排规范的解释说明,具体而言,这个文档细致解释了某样东西为什么是这样的,以及何时和如何应用它。
安排体系:安排规范和安排体系文档合称为安排体系。
而当我们捋清楚这些概念后,就会发现长期以来我们对于安排体系的理解存在误解。很多时候,我们所做的所谓安排体系实际上只能称为组件库。
关于安排规范,由于不属于本文重点,且较为根蒂根基,故不在此赘述。
2. 安排体系文档的价值
传递信息:文档可以将安排体系的信息传递给其他团队成员,包括开发人员、测试人员和其他安排师。这有助于确保所有人都了解安排体系的目的和功用。
统一视觉风格:文档可以确保安排体系的所有元素都符合同一视觉风格。这有助于确保安排体系的一致性和可识别性。
提高效率:文档可以为其他团队成员提供有关如何应用安排体系的细致信息。这有助于减少沟通成本并提高效率。
管理变更:文档可以帮助管理安排体系的变更。这有助于确保所有变更都得到记录和审查,从而减少错误和不一致性。
促进协作:文档可以促进安排师之间的协作。借助一些在线文档工具,安排师可以共享安排体系的信息和想法,从而提高安排体系的质量和效率。
3. 怎么写安排体系文档
①须要考虑的方面
目标受众:安排体系文档的受众包括安排师、开发人员、产品经理等,须要考虑不同受众的需求和背景,选择合适的语言和表达方式。
文档结构:安排体系文档应该具备清晰的结构,包括导言、安排原则、组件库、样子指南、交互指南、安排模板等实质。
图片和示例:安排体系文档须要配合图片和示例来解释安排原则和组件应用方法,以便于读者理解和应用。
规范和标准:安排体系文档应该包含规范和标准,以确保组件的一致性和可复用性。
革新和维护:安排体系文档须要定期革新和维护,以反映最新的安排趋势和技术发展,并保证文档的准确性和完整性。
②安排体系文档的组成部分
正如前文所言,文档是任何规模安排体系的必备工具。它使每个人都可以快速有效地做出一致的决策。如果我们可以提供细致的文档来支持安排体系的各个方面,就会发现应用者很快就可以上手这套安排体系。
但是,为了充分发挥文档的作用,安排体系绝不能简单地描述样子或组件规格。以下是我们可以添加到文档中的实质列表:
根蒂根基引见
即对这个组件的根蒂根基引见,引见这个组件的界说与功用
细致实质
对组件的细致引见,包括组件的元素构成与不同规格,例如不同尺寸等,也就是我们 figma 里组件的变体。
如何应用
即这个组件的应用场景,何时应用,何时不应用
相干实质
这里可以放一些相干组件,或者其他关于这个组件的更多引见
FAQ
FAQ 是”常见问题解答”的缩写,放一些针对这个组件常见的问题和解答,以便用户能够快速找到答案并解决问题。
革新时间
革新时间的作用是记录这个组件及其对应的安排体系文档的最新革新时间。
当然,以上这些不是每个部分都有,可以根据实际情况进行增删。
③实例
当然,从纯粹的理论角度来看,很难想象安排体系文档和安排规范是如何协同工作的,因为缺乏上下文的背景,我们这里以色彩和按钮为例,来分别演示一下安排语言和组件库,这里先演示下在不用 ChatGPT 辅助的情况下如何写。
色调
正如前文所述,安排体系的本质是与其他安排师以及开发人员更好地配合。在色调的部分中,须要包括这些实质:
根蒂根基界说
色板
应用指南– token
应用注意事项
相干实质
革新时间
接下来,我们看一下每个部分的实质。
1)根蒂根基界说
一个产品的色彩由主题色、中性色和辅助色构成,而主题色、中性色和功用色会根据当前界面的深浅模式而变动。
主题色:它是在UI界面和组件中显示最核心的色彩,展示界面的主要或重要的元素。
中性色:不用于强调功用也不用于强调功用性信息的色彩,例如背景色,明暗模式,文字,空间划分等。常用色是黑白灰。
功用色:用于强调界面中的元素。辅助色仅作为强调和突出,应慎重应用。辅助色也可以选择主题色的深色和浅色变体来用于界面元素对比。如数据图,插图等。其中,最常用的辅助色是功用色。功用色有成功、出错、失败、提醒、链接等。选取功用色时需符合用户对色彩的基本认知,例如看到绿色符号一般就知道操作成功,而并不须要读完所有的文字。
色调模型:在本体系中采用 HTC 色调模型进行安排,该模型更便于安排师在调整色调时对于色彩有明确的心理预期,同时也方便团队间的沟通。
2)色板
3)应用指南
为了方便阅读和应用,我们这里界说了色调 token,分为全局 token,别名 token 以及组件 token,token 之间层层嵌套,方便调用和后期调整。
具体界说和嵌套形式如下图:
4)注意事项
5)相干实质
这里可以放一些相干的其他文档的链接
HTC 模型简介及色彩推导(HTC 模型是谷歌提出的一个色调模型,色彩的推导方式有很多种,例如透明叠色、等序差值等,笔者探索后应用 HTC 模型是目前的最优方案,由于不是本文重点,故不在此赘述,大家感兴趣的话,以后可以专门写一篇色调指南))
6)革新时间
2023/05/27 05:14:13 AM
按钮
1)根蒂根基界说
按钮可以让用户执行某个操作或者跳转到另一个页面。它们有多种不同的样子,以满足不同的需求,并且可以用来引起用户的注意,提醒他们须要在哪里进行操作以便在流程中继续前进。
解构
2)属性变体
尺寸:S,高度为 24px;M,高度为 32px;L,高度为 40px
类型:主要按钮;次要按钮;文字按钮
状况:正常状况;焦点状况;悬停状况;活动状况或按下状况;进度/加载状况;禁用状况
3)应用指南
按钮的样子须要有可点击的能供性;
用户能从按钮上清晰得预测出行为结果。
4)革新时间
2023/05/28 11:14:13 AM
在看了上面的两个实例后,我们大概可以知道安排体系中的组件&样子的安排体系文档该如何写了
二、ChatGPT
尽管安排体系文档对于安排人员和开发人员之间的一致性和无缝协作至关重要,但是编写安排体系文档是一件非常乏味的任务。然而现在有了 ChatGPT,可以非常轻松地轻松生成非常优质的安排体系文档,进而简化流程。
1. 编写有效的聊天提醒
无论是问 ChatGPT 什么实质,我们给出的提醒的形式都是一致的,角色+实质+补充提醒。将这个模板代入到安排体系文档中,就是这三个部分:
①赋予其安排师的角色
我们可以将 ChatGPT 设置成某种职业人士,通过这样做,ChatGPT 给出的答案会更精准。
我们可以用这样的句式来发出指令:
假如你现在是一名 UI 安排师。
②叙述须要包含的实质
这块就须要我们在上文总结过的知识了,所有的安排体系文档都必定包含且通用的实质有,根蒂根基引见,细致实质,应用场景,相干实质。
提醒示例如下:
请为按钮组件生成安排体系文档。其中包括以下主题:根蒂根基引见,细致实质,应用场景,相干实质。
③补充自己安排体系的特定信息
我们须要为 ChatGPT 提供一些我们安排体系的特定信息,以便生成适合我们的自界说文档。
例如,按钮的尺寸,色彩等。
下面是提醒符的一个示例:
请注意:按钮有三个尺寸,分别是 S(24px),M(32px),L(40px)
按钮有四个状况,分别是默认,悬停,按下,禁用。
按钮有两种类型,分别是主按钮,次按钮
以下是完整的提醒示例:
假如你现在是一名 UI 安排师,请为按钮组件生成安排体系文档。其中包括以下主题:根蒂根基引见,细致实质,应用场景,相干实质。请注意:按钮有三个尺寸,分别是 S(24px),M(32px),L(40px) 按钮有四个状况,分别是默认,悬停,按下,禁用。按钮有两种类型,分别是主按钮,次按钮。
2. 按实际情况进行微调
尽管 ChatGPT 可以快速生成文档,但有时候它会写一些重复的车轱辘话或者生成不准确的信息。所以,我们有必要对生成结果进行检查并调整。
作为一位用户体验安排师,我越来越感受到安排体系对于提高用户体验的重要性。最近,我开始重读 Adobe 的安排体系,并发现它是 B 端中最完善且专业的安排体系之一。因此,我会继续深入阅读,并将这些学习到的知识应用到我的安排工作中。