汽车仪表盘上的mrnurl是什么意思?(汽车出现mrnurl是什么意思)
MRNURL在车载仪表板上是什么意思?(汽车出现Mrnurl意味着什么)
多年来,美国集团外带一直在快速增长,但整个客户UI组件并不统一。但在发展过程中,由于缺乏统一的标准UI,突出了各种问题,建立了插头画插件的出现。外卖技术团队将其作为UI一致性的起点,最终帮助团队降低开发成本并提高交货质量,为美国团队提供良好的支持服务。
本文介绍了背景草图插件项目,引导我们深入了解草图插件项目。它还详细介绍了这项技术的优缺点,并提供了详细的实际步骤和步进坑摘要。我希望这篇文章能够帮助您创建一致的体验。
|一致的经验是更好的体验
|一致的经验是更好的体验。 - 着名的设计师马克博博
背景
1.美元一致性项目
Tangram)2019年5月提出的,从美国绘制了来自美国和UI一致性的插入式小组。这是UI设计团队和R&ampd团队。其目的是提高用户体验的一致性,增强多功能性和重用速率多技术解决方案组件,降低了开发成本。天。目视检查的总体成本。
一路走走,外卖业务处于快速发展的阶段,人才一直在扩大,提高项目的复杂性。目前,该平台携带美国团体餐饮,仍然超级,闪光购物,运行差事,医学等商品类别。用户条目还涵盖了美国特派团APP Takeaway频道,外卖应用程序,公众评论和许多独立应用程序。因为客户始终更多地关注业务发展,以满足快速在线业务的需求,UI组件并意识到没有统一,但分散在各种业务场景中。在开发期间,缺乏统一的标准UI,继续突出以下问题:
UI / UE级别
UI缺乏设计规范,不同的应用程序,不同的语言平台设计和用户体验并不统一。
设计资源和缺乏统一的代码管理工具无法实现积累和降水,无法满足新业务的发展需求。
研发水平
(1)组件代码碎片,多发性开发,质量难以保证。
每个终端代码不是统一的API,维护和扩展成本高,很难改变主题并适应符暗模式的要求。
质量保证水平
每个版本都需要重复检查,频繁回归和验证组件质量。
PM水平
迭代版本低效率,低版本吞吐量要求,无法满足快速业务扩展。
基于实际痛点的开发工作和未来的客户能力的可预见的发展需求,我们迫切需要一套统一的UI设计规范,促成设计,建立统一的UI设计标准,所以从一个成熟的商业场景分开了从提供高质量的Android / iOS / MRN / Mach组件开发,可扩展,可配置的代码库,并具有支持多服务的高级代码重用并提高UI操作的效率。
我们使用草图插件块来实现设计规范,可以从建立中获取,以确保设计元素的设计标准,导致设计稿与业务的设计语言,并在每个平台UI组件库中实现了相应的实现。 ,所以建筑物阻塞插件成为起点的UI一致性,最终降低了开发成本,提高了交付质量,良好的服务我们的美国团队几个商业群体。
UI一致性摘录项目
2.素描插件
如果要保持UI的一致性,则无法打破规则。从色彩选择的设计阶段,字体规范,统一管理控制样式到代码开发阶段RD,API制作,多终端实现,必须遵守一组规则和规范草图插件结构是实现解决方案地面 。
在讨论其重要性之前,简要解释草图:素描是一款设计套件,由荷兰海牙大学队的团队波希米亚码开发。目前,Cayman的少于100名队员
素描易于理解,易于使用;要创建,更新所有组件符号,并与团队中的每个人共享,以实现设计资源共享和版本管理,告别“最终最终-1”。这是非常快速的迭代版本,我们可以继续增加新功能,以满足用户的需求,更多符互联网时代。可以使用真实数据设计素描。目前,我们的设计团队充分利用了草图设计。
设计语言包括图标字体,样本,文本规范,语音,插图,动画,组件等实际上,它不是抽象的概念。例如,人们会提到“美国使”,他们会想到“梅金汉黄”,想想可爱的“袋鼠”,想想骑摩托车,穿着骑手与明连衣裙用“美国使外卖” 。通过设计语言,我们可以更好地传达品牌概念和设计理念。 UI团队逐渐促使设计规范,量化构建块,使RD代码的设计描述的输出能够形成完整的闭环,以进一步加速整个服务的交付过程。
素描插件可用于快速设计标准页面。
构建块素描插件功能演示
3.构建块草图插件项目
事实上,市场上存在类似的插件。为什么你必须自己发展?由于UI设计语言与自己的业务有很强的相关性,颜色系统,图形,网格系统,投影系统,不同服务的图形关系非常不同,并且任何一个都会导致一致性损坏。
。现有插件提供的一般设计元素不能满足外卖设计团队的需求,这对于开发插件尤为重要,可以与业务和功能相关联。此外,统一品牌符号,品牌特征,也有助于深化用户心中的印象,统一的颜色和互动形式可以帮助用户深化产品的熟悉程度,良好的设计语言本身可以体验到该产品,您还可以更好地创建一致的体验。
经过一段时间后,构建块草图插件目前配备了iconfont,标准样本,组件库,数据填充,文本模板等功能。
我们可以从美国使的图标库中绘制由设计团队上传的SVG图标,并直接应用于设计;标准彩色板可以定义设计者的颜色使用范围,确保设计手稿中的颜色符设计规格;组件库包含外卖服务和常规组件的基本控件,该组件具有可以复用和标准化的功能,并对应于不同语言平台组件库中的代码,并且设计了组件库中的组件。提高UI设计效率,开发效率和取出效率;数据填充库可以实施图片填充和文本填充,图片包含商品和商家,包括菜肴,商店名称等。填实数据,让设计更直观,更接近线路环境;头部,字幕,正文,标题中的使用规范,文本模板中的标题,根据设计中的文本的位置,点击文本层直接应用字体,高线和字距。
此外,我们不断增加了学生反馈的新功能。同时,还有多个插件的使用场景,并且业务线路交换增加,因此构建块可以用于更多的团队服务,并期待它可以成为更多的设计师“亲密作“。构建块Sketch插件支持
4.为什么要写这篇文章?
我相信你已经完成了阅读内容上面的内容,如果你迫不及待地想要了解草图插件,这将很快提高你的团队发展效率?
事实上,在开始之前,我们可以了解一些不利的条件。个点,因为草图更新速度非常快,但官方文件非常简单又旧,所以许多着名的草图插件由于API的变化而被遗弃维护;第二点,由于技术堆栈混乱的发展,成熟的项目一般,没有来源,而开源项目基本上没有任何参考价值,其中大多数是“3年前更新”;一点,麦斯科开发材料更加差。
我们读了很多文件,但不在乎,好像很多维基说,如果一个非常预期的功能是实现的,提交人带来了它,人们无法触及心灵。了解以前的草图插件的科学,许多网友会发表评论“要求教学视频,我可以花钱。”踩到坑后,我们总结了一些发展经验。为了避免每个人“重复坑”,你可以早先从下班下班休息,我们决定编写一个开发文件的过程。虽然仍然存在许多差距,但是那些已经更新了多个版本的间隙,虽然那些已经更新了多个版本,但少你不能再如此困惑。
当然,即使你觉得你是“素描八”的发展类,我们也认为这篇文章也值得阅读,因为你将通过这篇文章到前端,移动,桌面和服务器各种开发知识。我们都知道,越来越多的公司已经开始喜欢完整的堆栈工程师,就像Facebook一样,基本上只招募了一个完整的堆栈工程师。你在心里思考吗:“它很有趣吗?但是一个插件?”不要轻易结论。
准备好?把它放了!
准备放弃编码好的,不要采取紧急点击键盘。毕竟,我们还没有决定使用哪种语言发展,这也是我们将发生的问题。素描插件的开发可能有两种方式:
1使用JavaScript + Cocoascript混发发模式,素描团队正式维护一组JS API,并在官方网站上写了一个非常令人兴奋的东西:“利用ES6,访问麦斯科斯框架并使用草图API而不学习目标-C或迅速。“
理想是非常漂亮的,但现实是非常骨头。此API仍然不,许多功能无法实现,因此我们需要将CoCoascript访问权限匹配对更丰富的内部API。
2使用Objective-C或Swift,并使用MacOS的UI Frame AppKit开发,简单和粗鲁,并且可以在使用OC运行时直接调用草图内部API。但这里应该做出特殊提醒,你要忍受的风险是:随着剪影的连续更新,内部API的名和使用可能会改变,因此还遗弃了许多知名的插件。
本文使用“混发展模式”来解释,我希望能给你一些小的灵感。素描发展原则
素描插件开发地质
2.环境配置
SKPM(Sketch Plugin Manager)是插件创建,构建和发布的官方工具的官方工具。 SKPM使用WebPack作为包装工具,当然,如果您熟悉前端知识,也可以使用汇总或跑步。但是,为了防止各种错误,不建议这样做。
SKPM提供一系列模板,可以帮助快速开始,最有用的是Skpm / webview,它有助于我们创建基于WebView显示的演示示例,SKPM将自动创建一个符号链接到插件添加到草图安装目录制作插件立即可用。
//基于WebPack的草图官方包工具SkpMnPminstall-GSKPM //创建示例项目SkpMcreatemy-Plugin - Template = Skpm / with-webview // instalthedepenciesnpminstall // build plugin npmrunbuild3.项目结构
插件捆绑
操作完成后,我们将获取以下插件目录,该目录使用标准化层次结构存储源代码文件,并构建生成的草图插件安装包。官方文档中没有最简单的演示,但使用当前开发的最常用的WebView模板,以避免“1 + 1”问题之后避免“1 + 1”问题,并且大量的一些插件在此基础上。
目录中的参数,我相信在观看评论后立即理解。但是,如果在前端开发中没有经验,则可能无法理解,在包装WebPack后,脚本文件的文件名将更改,例如资源中的WebView.js,将在资源中打包在插件中的文件夹,文件名更改为Resources_WebView.js,所以当您编写时,如果需要在HTML中引用此文件,则应使用打包的文件名,即: