它们都有不错的视觉交互实现

设计灵感 急速飞驰 浏览

小编:早在应用的最初期,就已经有开发者想通过可视化的方式来解决应用 UI 编辑的问题,例如很早期的 VisualBasic, 当然作为 Web 开发者也一样,可视化编辑对于 Web 开发者来说更加有意义。

  早在应用的最初期,就已经有开发者想通过可视化的方式来解决应用 UI 编辑的问题,例如很早期的 VisualBasic,

  当然作为 Web 开发者也一样,可视化编辑对于 Web 开发者来说更加有意义。这是由于 Web 应用的特性所决定的。但同样带来的挑战也是由于这个特性,Web 应用多种多样,千变万化,并且可能随着不同的设计潮流来改变原来的实现。所以到目前为止并没有一个很通用的可视化编辑工具。 纵览业界有名的页面搭建平台(如、websitebuilder.com 等等),它们都有不错的视觉交互实现,但是也仅仅能够处理特定类型的 Web 应用。

  正因为这种变化性,作为一名工程师要做的就是要找到其中不变的部分以及会经常变化的部分,并抽象不变的部分,以形成一套通用的能力。 对于可视化编辑场景,不变的地方是什么?对,是编辑,就是页面的编辑功能。那么变化的地方是什么?是组件,组件本身会不断变化。但对组件的编辑能力是不变的。

  有了这个基本思路,我们再深入思考一下,如何抽象组件编辑能力,并将这种能力通过一个产品表现出来。

  对于这类应用,可以将它看成一个 Word 文档,也就是一个类编辑器应用。这样可以给自己一个思考的方向。所以也就形成了以下这些特性的抽象。

  按照上图所示,如果说我们将应用的所有功能都抽象出来了,接下来就要想办法去完善功能的细节,并且需要很明确这些功能之间的关系,在自己的脑海内必须形成一张图。

  首先明确,我们要设计这样一个应用,首先哪些必要的因素。作为一个前端复杂应用,一般都会有一些通用的设计模式。

  这张图将复杂应用划分成 4 个部分,分别是 编辑器、配置文件(JSON Schema)、太阳城娱乐城运行时框架、以及云端存储。 本质上来讲就是将页面的组件抽象成一个个配置文件(JSON Schema),并且可以编辑该配置文件。然后可以通过一些手段持久化该配置文件。最后获取该配置文件并通过渲染器变成我们想要的页面。 整体的思路大致是这个样子。

  架构模式上,大致会分成这么几个层次。这个分层参考了很多此类型应用的架构模式。

  场景层:最顶层的场景,属于可视化编辑器的上层。 编辑层:这个层次就是对 Schema 进行编辑的输出地。 引擎层:这个层次的职责在于说提供操作 Schema 的 API 接口。 协议层:也就是最底层的 Schema 协议,用来描述页面的JSON文件。 渲染层:这里的渲染层可以理解成一个组件体系的驱动程序。例如 React 渲染器、Vue 渲染器等等。

  这里首先来讲讲 编排层 和 渲染层的划分,其实这一块很多应用都有不同实现思路。 这里解释一下为什么有这两层的划分,其实关键点在于说是否将编辑和渲染放在一个层次中处理。

  如果放在一个层次里处理,有些场景、例如占位符、拖拽体验上来讲会更加直接,更加友好。 但是面对这种复杂的交互体验,将渲染和编辑放在一起太容易造成这一层特别重,扩展性和可维护性上大打折扣。其实很多市面上主流的类编辑器应用都做了分层,但是我当时并不知道为什么需要将这两层区分来看待,最终我也采用了分层的方案,思考这种方案的时候没有想太多,先按照主流方案来。

  开放、封闭原则开放封闭原则(OCP,Open Closed Principle)的核心点是在于封装变化,降低耦合。 既然分层了,那么一定追寻这个原则,顺着这个思路想, 分层就意味着需要面对这样的问题,因为两个层次虽然在某些地方是隔离开来的,但是仍然有些地方是需要联系的,这样就需要想明白哪些是是封闭的,那些是开放的?

  在这里设计的整体采用 Event Bus 机制来处理两个层次对外通讯。 渲染层内部提供 Preview、Snapshot、Resize 等功能,对外通过事件机制将消息广播出去,给订阅该消息的模块得以处理。 而遮罩层提供了 RenderLine、Proxy、Insertion 等功能,设定响应拖拽的各种生命周期钩子来处理。在遮罩层上,几乎承载了页面上的所有的拖拽交互,是一个典型的消费者。

  对于遮罩层的计算来看,原理其实也很简单,就是将 渲染层 的 DOM 计算结果同步到 遮罩层,然后 遮罩层 用 DIV 的方式绘制出对应的外框。

  整个遮罩层会分成 4 个区域,分别是 Cover、 Handles、Insertion、Proxy 四个区域, Cover 的作用是拖拽的激活热点, Handles 的作用是额外的一些操作项, Insertion 的作用是插入提示点, Proxy 的作用是拖拽组件的占位符。

  其他的分区还好,这里着重讲一下 Insertion 这个。这里的 Insertion 是计算拖拽需要插入的节点,那么如何去判定插入的节点是上下左右呢? 这里大致分为两步,

  这里缩放的作用就是在组件原有边框大小区域下,进行一定比例缩放,形成一个虚框,通过虚框与实框间的间距作为热点,来判断拖拽的方向。

  这里的 inside 是利用point-in-polygon来判断拖拽点在哪一个热区范围内。从而确认放置的方向。

  其实整个应用的各个点都值得思考。可以想象到这样一个应用的诞生过程并不容易,需要结合很多产品特性来综合考虑。希望能通过这篇文章引导大家一起来思考产品本身,而不仅仅限定在技术细节上。

  如果大家看了这么久,都没有体感,那么下面一张图就是我们这个产品思路的一个实现。

  文章可随意转载,但请保留此原文链接, 非常欢迎有激情的你加入 ES2049 Studio,简历请发送至/p>

  以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持码农网

  本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

  [美] 埃雷兹·艾登、[法] 让-巴蒂斯特·米歇尔 / 王彤彤、沈华伟、程学旗 / 浙江人民出版社 / 2015-9 / 54.90元

  科学的传播速度有多快?今时今日我们很少谈论上帝了吗?人们什么时候开始用“having sex” 而不用“making love”? 史上的人是在哪岁成名的?语法的变化速度到底有多快?哪些作家被纳粹审查得最彻底? “donut” 什么时候开始取代“doughnut”? 我 们能否预测人类未来?比尔·克林顿和花椰菜哪个更出名? 《可视化未来》一书的两位作者通过与“谷歌图书”的合作,得以有机会研究......一起来看看《可视化未来》这本书的介绍吧!

当前网址:http://www.builder.org.cn/linggan/webdesign/3299.html

 
你可能喜欢的: