代码设计指南2023年完成
设计到编码是一个熟悉工作流程。设计师使用设计工具创建一个原型,和开发人员将它转换成代码的简化版本标准产品开发过程。
UXPin合并将这一过程颠倒了一个革命性的代码到设计的工作流。本文解释了代码设计和如何提高产品开发过程有四个案例研究,包括FinTech巨大的贝宝。了解更多关于UXPin合并。
代码设计是什么?
代码设计是一个用户体验UXPin使用合并技术开发的工作流程。与合并,设计者可以将UI组件从一个库导入UXPin设计编辑器并使用它们来构建完全交互式prototypes-a过程被称为component-driven原型。
Component-driven原型给设计师所有代码的好处,而不需要编写或学习一门编程语言。
这段代码为用户体验设计师设计工作流提供了一些好处,利益相关者,和产品团队:
- 设计师构建生产就绪的原型,在设计过程中增加测试范围。
- 使用“现成的”代码组件意味着设计师不从开云体育官方下载安装包手机版头开始设计,减少投放市场的时间,同时增加原型品质,忠诚,和功能。
- 利益相关者可以更好地可视化设计的愿景,因为合并原型看起来像一个最终产品。
- 设计传递顺畅的用更少的摩擦,因为设计师和工程师说同样的语言,使用相同的真理的来源。
- 提高设计系统采用因为合并整合了组件库产品开发工作流程。
- 拖放工作流使其他领域产品设计更容易。
设计代码和代码设计
代码设计的挑战
代码设计是传统的用户体验流程。设计团队创建原型和原型使用标准的基于图像的设计工具开发人员转换为代码。
设计到编码工作流的最大挑战在于,它会创建一个设计师和工程师之间的差距。弥合这一差距,设计师必须使用外部工具,写详细文档,与开发者必须解释原型和交互功能。
即使所有这些额外的工作和解释,最终产品往往不符合设计师的规范和期望。设计师和工程师争论谁是罪魁祸首,但真正的问题是语言障碍。设计师使用矢量图形工具,而工程师处理代码。
设计方案的代码
代码到设计工作流桥梁设计师和工程师之间的差距。他们仍然说着不同的语言,但技术合并有利于设计和开发之间的翻译。
设计团队与视觉UI元素,而工程师处理代码的驱动——从两个角度相同的组件。
团队合作从这个代码到设计的工作流设计系统中受益最大。
与设计到编码的工作流程,团队工作有两个版本的设计系统:
- 基于图像的UI工具包的设计工具
- UI组件库编程
代码设计消除了这种分离,因为设计团队和工程师使用相同的组件库从相同的存储库创建一个真正的单一来源的真理。
设计用例的代码
你可能会想,“这代码到设计的东西听起来很不错,但它如何转化为实际产品开发?”很高兴你发问。这里有四个用例,公司使用代码到设计的产品开发。
贝宝
2019年,贝宝完全重新设计其内部产品开发过程使用UXPin合并。贝宝的内部用户体验团队有一个独特的挑战,有五个设计师/一千工程师管理60 +产品。没有两个产品看起来相同的,每一个可用性和设计不一致问题。
艾丽卡的骑手,UX铅EPX在贝宝,任务是解决这一问题。添加一层复杂性,艾丽卡必须创建一个工作流使贝宝的产品团队设计、测试和交付产品。他们缺乏设计技能和设计工具几乎没有任何经验。
尝试一些解决方案使用传统的基于图像的工具后,艾丽卡发现合并。贝宝的用户体验团队合并使用一个定制的UI设计系统UXPin流利同步。
贝宝的涉众想测试这个新代码到设计投资的有效性。艾丽卡的实验涉及创建单页原型的两个版本:一个使用一个基于图像的工具和其他使用UXPin合并。结果好于预期:
- 基于图像的工具:一个小时
- UXPin合并:8分钟
合并原型远优越的保真度和功能。与一些指导,贝宝的产品团队实现相同的结果。
忿怒
软件开发人员在忿怒四级流程设计系统的成熟度。
- 阶段一:PDF风格指南
- 阶段二:HTML和CSS模式库
- 阶段三:UI组件和组件库
- 四个阶段:一个完全集成的单一来源的真理,没有设计或代码所需的版本
ires困在第三阶段,不确定如何之间的桥梁设计和开发达到最终来临之前团队发现代码到设计的方法。
这对ires工作流勾选所有选项在那一刻:
- 单个存储库为设计师和工程师所需的组件构建和发布产品。
- 设计师和工程师之间更好的对齐,无缝设计的传递。
- 没有从头设计或前端编程。
- 没有设计漂移或跨组织的不一致。
- 现实的、交互式原型给测试参与者和利益相关者的准确表示最终的产品。
- 机会尝试黑暗主题切换模式或多品牌设计系统。
TeamPassword
最早的两个用例是企业产品。但是代码到设计能为创业企业和小型团队做什么?在市场竞争激烈的密码管理TeamPassword运作。创业公司面临的最大挑战是他们没有任何用户体验设计师。
为创业公司委托人民密码和敏感数据可用性问题和设计不一致侵蚀信任,破坏TeamPassword和导致的声誉。
TeamPassword的工程师做了所有的设计和用户测试使用代码原型。虽然这些原型准确地代表了产品的功能和用户体验,构建和迭代思想是耗时。
2022年,TeamPassword切换到梅设计系统,同步到UXPin使用合并。而不是开发原型,工程师使用他们在UXPin定制梅反应库。这个代码到设计工作流显著减少投放市场的时间,同时减少可用性问题和设计漂移。
当TeamPassword开发者更新设计系统存储库,UXPin变化自动同步,所以他们总是最新的版本。合并的版本控制允许团队跟踪更改和切换版本在测试期间。
dotSource
dotSource是德国的数字产品咨询和开发机构。公司使用多个设计系统向客户提供产品和解决方案。
dotSource交付这些产品最大的问题是冗余进程和重复的工作,有两个设计著UI组件设计和发展一个组件库。设计系统的文档创建第三个团队必须维护。
dotSource“单一的真理”实际上是三个来源,而不是许多组织遇到的——问题与设计系统。
dotSource知道他们必须做单一的真理来源基于代码但是不知道怎么实现这个工作流使用传统的基于图像的设计前他们发现UXPin合并。
dotSource使用合并的故事书集成同步UXPin的设计系统。故事书让dotSource更新设计系统的存储库,文档和UXPin与每个版本的组件。
“切换到基于代码设计工作流是唯一的方式围绕这些映像的局限性。基于代码原型工具像UXPin合并技术使这个工作流通过渲染代码(而不是矢量图形),就像一个浏览器。UXPin, UI组件的外观和行为完全一样对于开发人员来说,有效地缩小差距的设计和开发,真正的单一来源的真理。”——dotSource
UXPin代码设计是如何工作的?
产品团队代码组件导入UXPin时有两个选择:开云体育官方下载安装包手机版
- 进口产品设计系统
- 导入一个开源的UI库(梅、引导蚂蚁设计等)
有三种方法可以把这些库UXPin:
- Git集成:同步反应从库UXPin组件库。
- 故事书集成:允许团队同步许多前端框架,包括反应,Vue,角,Web组件,和灰烬,等等(发现故事书的完整列表的文档)。
- npm集成:设计师可以进口UI组件从npm开源库注册使用合并组件管理器(MCM)。
我们有三个教程使用npm集成和组件管理器:
Git和故事书集成更加复杂,需要技术技能完成合并设置UXPin的技术支持团队。
组件与UXPin相结合的模式
与UXPin模式,设计师可以将UI组件来创建新的UI模式和模板。这个功能是特别有用,当设计系统并没有一个特定的元素。
例如,假设您需要添加一个仪表板分析你的产品,但没有图表的设计系统。你可以找到一个开源npm注册UI库,导入包使用罗马数字,并添加图表组件创建新模式,同时保持相同的保真度和功能。团队可以促进该模式设计系统或使用它作为了。
准备好开始使用代码来设计吗?访问我们的合并页面请求访问这个革命性的基于代码的技术。
