大家好,我是徐晓曦,今天继续和大家分享Dooring低代码的技术实践,从辅助设计的维度,和大家分享Dooring在这方面的一些技术实践和展望。H5-Dooring断断续续迭代了3年。从UI设计,到组件材质,再到构建能力,不断更新,朝着更好的解决方案迈进,致力于打造极致的用户体验。接下来我要分享的内容主要来自组件由以下几个方面组成:1.组件面板可以自定义。传统的建筑系统构件面板基本是固定的。如果后期组件数量逐渐增多,会对用户端造成一定的负担。由于用户常用组件的数量有限,因此为了提高用户查找目标组件的效率,H5-Dooring提供了组件自定义面板,用户可以自定义常用组件的显示,并支持组件搜索:同时,编辑器支持组件搜索功能:通过这种方式,我们可以把组件素材的选择权交给用户,让用户拥有更多的自定义能力,从而提高搭建的快乐度。2.Canvas辅助设计Canvas辅助设计主要是帮助用户更准确地构建页面,让非技术人员也可以创建专业的页面设计。接下来,我想分享一下Dooring在画布上所做的改进。2.1参考线设计主要基于旧的设计软件PhotoShop。我们可以很方便的双击Dooring的尺子来生成参考线(包括x轴,y轴),我们可以将参考线拖动到画布上的任意位置,实现元素定位的参考。2.2标尺设计标尺设计主要是辅助参考线做出更准确的参考线对于位置和布局的规划,随着画布的缩放,参考线也会按比例缩放,保证与画布一致。2.3Gridlines网格线在设计中的价值在于用户可以在没有设计稿的情况下精确控制元素的布局位置,比如对齐、排列等,我们可以使用网格布局(Dooring的设计哲学之一)以更快地布局和排版页面。2.4调色板在传统的搭建平台中,如果没有丰富的模板支持,新手用户很难做出精美的页面,包括设计元素,包括配色等,所以基于这样的背景,Dooring推出了一款免费的素材资料库和配色面板,方便用户做页面设计参考:MaterialCurry经过我们的研究,列出了几个常用的类别:商业素材,生活素材,自然素材,插图素材,目前可用的配色方案:传统色,低色调,渐变色,通用配色方案,卡其色用户可以参考配色方案搭建不同配色风格的页面。3.视觉图形控件视图控件主要是为了方便用户调整画布,更快捷地控制画布中的元素。我们都知道,一旦页面中的元素多了,我们查找组件或者调整页面结构就会变得很麻烦。比如页面太长,我们需要向上滑动才能定位到指定位置。比如页面中的元素太多,我们想要快速找到某个元素并进行调整,就变得非常困难。因此,Dooring针对这些痛点做了一些改进和优化。3.1尺寸控制通过Dooring提供的画布控制面板,我们可以快速切换画布尺寸,或者通过手动输入自定义尺寸来改变画布尺寸。3.2图层管理为了解决上面分析的第二个问题,Dooring设计了图层管理面板。我们可以通过图层管理面板方便的对画布中的组件进行管理,比如:显示/隐藏组件、删除组件、调整组件顺序(后面会迭代),当然后面会提供更强大的图层面板.3.3快捷键支持为了方便用户在画布中高效的创作,快捷键是必不可少的,所以Dooring也提供了快捷键的能力:我们可以通过快捷键快速实现复制删除,粘贴图片等功能。4、建设模式创新。传统的施工平台一般都是自由布置或自然流动布置。搭建模式比较简单,难以满足用户不同业务场景的搭建需求,所以Dooring做了一些创新,同时支持两种搭建模式:自由布局、智能网格布局、用户可以更新不同的场景并随意切换。5、智能化设计展望后期,Dooring也会在智能化方向做一些努力,比如无痕生成页面、智能化参数化模板等,不断完善建筑体验和生态。如果大家有更好的建议,欢迎大家反馈~
