设计切换基础——从设计师开发人员需要什么?
设计的传递是一个紧张的时间。设计师和工程师说不同语言和工作在不同的约束条件,使沟通和协作具有挑战性。
弥合这一差距的第一步是定义开发工程师需要什么。这些需求的沟通设计过程将帮助设计师做好相应和简化设计切换过程。
我们已经包括了一系列工程师需要从设计师在切换,他们不需要什么,如何优化你的交接使用复杂的工具。
这样的工具之一是UXPin合并。它使您能够设计原型设计和工程之间的单一来源的真理,这是交互式组件。设计者可以把他们的应用程序的UI元素UXPin,和与开发者更容易分享设计交接。创建无缝设计的传递与世界上最先进的设计工具。访问我们的UXPin合并页面。
表的内容
从开发人员的角度设计切换
我们谈了很多关于设计/开发人员合作和创造更好的设计切换流程。关键的结论是设计师和工程师必须在设计过程的早期开始传递。
工程师必须提供一个列表以设计师的文件、文档、资产,他们需要开发最终产品规格。团队还必须确定一个文件结构和命名约定一切容易定位。
定义技术和开发人员需要在项目的开始,使设计团队建立工具、工作流和基础设施(文件、项目管理软件等)来支持一个流线型的切换过程。
开发人员需要什么设计师?
创建一个设计系统(即使你的产品不使用)
许多工程师在隔离和把它们构建组件为前端的发展与项目文件基于组件的前端框架等反应。为你的项目创建一个设计系统或风格指南将有助于推动这一工作流程,便于开发最终产品。
大多数设计工具需要额外的插件或扩展,但UXPin提供它设计系统功能标准的每一个计划。UXPin对设计系统有四类:
- 颜色
- 排版
- 资产
- 组件
设计师还可以包括书面设计系统文档,所以一切都在一个地方。如果现有的产品已经使用元素从您的设计系统,找到正确的文件名和通知工程师,以避免重复工作。
有组织的组件
除了创建一个设计系统,设计者必须组织组件,这样更容易编码系统。这个例子来自材料设计安排UI元素的类型。
设计师也可以分类组件使用原子设计原则:
- 原子:基本元素
- 分子:UI组件
- 生物:更大的组件和模式
文件结构和命名约定
工程师使用存储库文件结构和命名约定成功的工作流和协作是必不可少的。镜像这些实践对设计项目减少了设计师和工程师之间的“语言障碍”。
文档
设计师必须创建书面文件来支持注释模型和原型。书面文档是一个故事提供上下文交互,接口和用户流当用户点击“元素X”?成功/错误/警告消息是什么?如果用户没有登录吗?
信息架构
原型和模型不足以开发网站和数码产品。工程师需要看到一切都在一起,通过信息架构,用户流的开始和结束。
线框图、流程图展示信息架构是最好的方法。设计师可以分享这些工程师使用米罗或一个免费的工具谷歌Jamboard。另外,UXPin提供了用户流设计库为您的信息架构构建流程图。
工程师可以使用此信息架构文件结构组织和准备每个屏幕之前,他们开始发展。
模拟和原型
工程师使用模型来开发每个用户界面和原型创建导航点,交互,和动画。原型的保真度和交互性越高,就越容易为工程师解释和复制他们用更少的文档和解释。
虽然大多数设计工具创建漂亮的模型,他们缺乏特性交互原型。UXPin是由代码,给构建完全交互式原型设计师工具和特性,外观和感觉像最终产品。
一些关键UXPin原型功能包括:
- 州:多个州应用到一个元素,每个都有不同的属性,交互,和动画。设计者可以使用状态来创建简单的互动就像按钮状态或复杂的组件手风琴,多级导航,等等。
- 的相互作用:UXPin提供了一个广泛的触发器,行动,和动画复制代码交互。有条件的相互作用允许设计者创建动态的基于用户操作经验,发展给工程师一个精确的参考。
- 变量:UXPin特性功能完整形式设计者可以使用它来捕获用户输入和使用这些数据在原型。帮助工程师了解产品的输入变量必须工作,包括重要的错误信息来帮助用户完成任务。
- 表达式:类似于javascript函数来创建复杂的交互表单验证或完全功能的购物车。工程师可以使用这些表达式作为写作的基础产品的Javascript函数。
规范
规范给工程师的详细信息界面的CSS属性像间距,字体大小、高度、宽度等。设计工具通常有插件或扩展自动化这个过程。
UXPin的内置规范模式允许开发人员选择UI元素查看规格,包括起动器自动生成CSS可以复制/粘贴。
检查表
一个设计交接清单列举所有设计师给工程师。这个清单是一个最重要的文件,因为它确保设计师记得一切移交和工程师确认他们收到了一切。
什么样的开发人员不需要
什么样的开发人员不需要设计传递他们所做的事情一样重要!正如上面你可以看到的,有许多工件,和文档工程师必须参考开发最终产品。太多的信息可以迷惑和延迟发展,而工程师筛选不必要的文档。
工程师不需要访问你用户体验研究工件像用户角色,旅行地图、竞争分析等高级概览,报道,足以概括和总结你的设计解决的问题。
选择开发人员友好的设计传递工具
设计师使用基于图像的设计工具Figma和草图必须依靠额外的工具和插件设计的传递。这些额外增加的设计成本和创造犯错的余地。
即使有这些额外的工具,设计师仍然与忠诚和功能,限制原型范围。有时,他们使用视频和gif来演示的相互作用,这需要额外的上下文和澄清工程团队和涉众。
UXPin是一个端到端的设计工具与设计师需要的一切从概念到最终设计切换。设计师可以构建原型,准确复制最终产品的经验,没有留下歧义有关功能,导航,互动,和动画。
工程师可以查看原型、模型、文档和下载资产从一个规格,和组件接口。团队可以在传递通过协作UXPin的评论甚至分配的评论直接问题特定的团队成员。
UXPin也集成了松弛和Jira所以产品开发团队和涉众可以保持更新与设计协调管理和项目状态。
意念使用一个工具,线框图,原型,原型、测试、用户流程,设计系统,文档和设计的传递创造了一个富有成效的环境设计师,因为他们不需要在平台之间进行切换。UXPin优质原型意味着设计师花更少的时间解释功能和交互,创建一个平滑过渡从设计到代码。
无缝(没有)交接UXPin合并
UXPin使得设计传递容易,UXPin合并技术促进无缝(no)交接过程哪里有没有设计或写前端代码!设计师拖拽,而工程师复制/粘贴。
UXPin合并同步设计系统(私人或开源)驻留在回购UXPin设计编辑器,让设计师相同的组件库工程师开发最终产品使用。这个单一来源的事实意味着设计师和工程师说相同的语言和工作在相同的约束。
任何更改组件库的库自动同步UXPin,通知更新的设计团队。合并的版本控制允许设计者选择切换到最新版本的时候,他们可以改变设计系统的早期版本。
合并组件是完全互动,包括属性定义的设计系统,包括状态、颜色、大小等,设计师可以通过调整这些属性属性面板,这UXPin显示为JSX对工程师在设计传递复制。
设计系统产品负责人尼克•艾略特和地区ires产品设计主管,指出合并有巨大的潜力简化公司的切换过程:
“工程师不再需要从头开始,已经知道使用什么样的组件和设置。它会帮助我们避免“设计漂移”我们经常看到的。间距和字体都应该保持一致,因为它是所有驱动的从一个地方。”
准备好做出痛苦的设计传递过去的事了吗?切换到UXPin合并创建一个无缝交接产品开发过程(没有)。访问我们的合并页面为更多的细节以及如何请求访问。
