美文网首页交互设计设计工具产品交互设计
阿里最新神器-fusion design 抢先知道

阿里最新神器-fusion design 抢先知道

作者: ruanxiaoruan | 来源:发表于2016-11-24 21:32 被阅读2311次

    上周四跑去望京阿里中心参加了京城UED奶茶会,一个名叫fusion design的东东~fusion design 是啥?其实我也不知道呀~~

    在去之前我查了很多很多网上的资料,fusion design.

    它们都是这样子的~

    excuse me ? 这是些什么鬼!~~据说还是杭州的team来分享,好像很高大上的样子。

    满脸的问号!~~不废话了,快去看!!!

    当我安安静静的听完!word 天!厉害了我的哥!感觉拥有了fusion design ,就拥有了全世界,从此走上幸福的社会主义大道!

    前方高能预警!跟着我解放你的双手,一起嗨!!

    此处分割线

    一开始被问到如下问题:

    你的职业经常加班么?

    是什么在影响你/你团队的工作效率?

    你尝试过使用组件/模版来提升工作效率么?

    使用模版工具过程中最大的困难是?

    有多人协同设计的经验么?团队协同过程中,最大的困难是什么?

    大写的懵逼!!这是问题吗?这难道不是互联网圈的daily life吗?

    --那我们有尝试过去解决问题吗?

    --有啊!!当然有!

    --但是经常会受限于人员的沟通成本啊

    --真的很麻烦啊

    --设计稿又改了,你们知不知道你们设计师改一点点我们工程师要改很多啊

    --晚上又要加班coding了

    --我们设计师有自己的组件库呀

    --我们工程师也有自己的组件库呀,可是我们跟不上设计师的节奏呀

    --此处省略一万字心酸血泪史-----------

    一转眼看到这样的问题,聪明如我立马就想到了这是个什么东西!!组件库!!不就是组件库嘛。antdesign蚂蚁金服不是也有一个这样的组件库嘛。

    这两年很多的team都在做组件库啊。

    简单聊组件库的优缺利弊。

    1.组内效率提升

    对设计师而言,组件库可以提高设计师之间的协作效率,中途接手项目的设计师也可以很快上手,业务中常使用的模块可以提炼出来填充团队的组件模版库,这样不仅能大大提高多人协作的效率,也可以很大程度上降低沟通和时间成本。

    对前端工程师来说,控件库的存在也可以极大程度的精简开发量,时间的输出上更加自由,不再受限于设计师视觉稿的反复调整时间排期,在视觉设计师分发的组件基础上自由打包配置页面就可以。

    2.协作成本

    好处大家都知道,理想状态中的工作流程也很美好。它分别解决了设计师的效率问题,也解决了开发同学的效率,然而设计师和开发工程师们的协作沟通成本问题并没有解决,它们依旧是彼此独立存在的模块在运行。

    3.时间成本

    组件库的搭建需要时间成本,细工出慢活,尤其是在单业务线场景下,版本迭代中的时间紧凑度很难再挪出时间去搭建自己的组件库,更多的是依赖设计师点对点传输更改。多业务场景中组件库的需求重要性就明显了!!可是,时间依旧是重要的限制因素。

    接下来就是重点了!!这个fusion design厉害了。它不仅解决了设计师与开发工程师单个角色的效率问题,还动态的解决了设计师与开发工程师合作过程中的问题,由线性的工作流变成动态的滚动工作流。

    1.重新定义了工作方式

    常规流程:线性的工作流或者并行的工作流。

    交互设计师的改动牵涉到视觉设计师的变动,视觉设计师的风格调整优化意味了前端工程师代码的改动,牵一发而动全身,尤其是前端工程师的工作量会存在大量的冗余返工。

    fusion design 定义了一个新的工作方式,代码先行的概念。常规流程中当设计师们一起协作时团队中一定存在一个组件规范者,大家遵循这个组件库的规范进行设计,它提供了线上的组件库,所有的更改都在组件库中,组件库的视觉样式直接打包生成代码。设计师用它组装页面,工程师用它制作demo。

    2.提供更轻巧的任务协作

    常规流程的任务协作人数不多时大家往往靠线上的文件单点传输完成,不仅耗时,还容易因为版本型号的差异化导致沟通成本增加。

    fusion design中参与的设计师只要关联自己负责的业务线,所有的组件更新都是自动更新,再也不用担心文件无尽的替换了。

    3.自由化配置组件

    当设计师和前端开发工程师的资料库联动后,前端工程师也可以更自由的配置组件,设计师也能自由化发挥而不必担心开发的时间成本和实现成本了。

    4.智能的一键更新打包

    fusion design不仅提供了外用插件更自由的标注生成html外,还对输出给前端工程师的所有文件有一键打包的功能,开发工程师只要更新api就可以获取最新的设计,从而最大程度上减少了开发过程中的劳力损耗。

    说了这么多,它到底是怎么实现的呢?

    在正常的工作业务模型中,假如设计师和开发的时间一共是24小时,我们的工作时间分配往往是这样的。

    我们可以清晰的看到每个角色在每个环节中的时间付出以及流程中不可控的时间浪费,这些浪费往往具有必然性。

    为了要解决这些问题,首先它从设计师和前端工程师的合作中剥离出三种角色,实际上只要我们能解决这三个角色产生的问题就可以。

    针对这三个角色 输出相对应的资料库。

    它拥有三个模块:ux  config  cool

    第一个 fusion ux平台。

    ux平台是给组件构建者撰写组件规范、设计规范、交互文档的在线文档,上面定义了字体、组件样式、交互规则,间距等等。业务设计师在工作中去参考UX平台的规范做设计。这个平台的目的是保证业务线相关的设计师输出的设计是统一。

    如何搭建ux平台?集合你们所有相关的业务线,搭建一个中台的概念,抽取骨架框架。可以参考ios md等官方文档去提取dpl框架。

    第二个是 fusion config 平台。

    Config平台供组件构建者在线配置/设计组件的平台,组件构建者直接在config平台用代码生成组件,管理、添加业务组件。在线组件的更新会发布到3处:1. UX平台,替换UX规范的组件预览图;2. FusionCool,将HTML代码写的组件转换成SKETCH能解读的SVG文件,分发给所有设计师;3. DEV平台,前端工程师收会收到一个组件代码更新“包”,替换线上线下的实际组件。

    第三个是fusion cool 平台。

    FusionCool:组件分发工具,主要面向所有设计师。当组件构建者完成组件设计发布组件后,每位设计师手上的Fusion Cool都会“自动”接收到构建者的发布的组件样式,确保无缝衔接组件更新。

    另外还涉及到一个dev平台。

    DEV平台:是开发者接收你的Config样式包的仓库。开发者可以在上面预览到设计师更新设计的所有组件样式,以及API,只需要拷贝API到代码中,就能完整还原构建者设计的组件,不需要开发新的。

    -------------------------------

    厉害了word 哥。是不是很神奇的一个平台。涉及到很多内部的东西,就不能展开太多去聊。但是这个可以帮助在线和多业务线的协同,能够最大程度的提高效率,节约时间提供了很好的解决思路。据说这个之后会对外开放哒!!!感兴趣的小伙伴们可以继续关注,也可后台留言交流呦!

    希望大家都能获取到很多的知识!

    今天是感恩节!祝大家开心!~~


    相关文章

      网友评论

      本文标题:阿里最新神器-fusion design 抢先知道

      本文链接:https://www.haomeiwen.com/subject/gahipttx.html