Xcube智能一键生成H5(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

一个活动页的头部基本上是由三个大部分组成:背景、标题和辅助元素。我们发现在背景的纹样和辅助元素加入品牌符号是最能被感知的。所以在头部这一部分,我们针对背景、和辅助元素,将头部切分为底色、主题图形和漂浮物三个方面来进行规范会比较直观。

Xcube智能一键生成H5

除了头部规范,我们针对黄钻活动整理了所有能标准化的内容,制作成各种常用信息结构的组件,文本、图片、图文搭配、链接、按钮、抽奖组件等,也规范了一些组件样式和配色方案。

Xcube智能一键生成H5

Xcube智能一键生成H5

cp设计师在页面排布时只需要在我们固定的框架下和选择合适的配色方案的基础上进行填充即可,可以把时间集中在头部的设计上。在找cp公司尝试了几次之后发现输出质量和效率都有大幅度提升。

新的头部规范及标准化组件的可行,让我们有了把所有标准化组件整合在一个系统当中的想法,系统可以实现通过组建自由搭配出活动页面,然后不断丰富头部及其他组件的视觉素材以适配不同的活动主题,在组件和素材足够丰富的前提下,甚至可以直接根据关键词自动生成想要的活动页面,所以最终我们就开始了Xcube系统的搭建。

Xcube的搭建

Xcube是基于QQ空间营收类活动所搭建的H5活动页面智能生成系统,系统通过预设活动组件的组合来完成页面生成。系统内会有各种类型活动的相关组件,这些模板以及组件和素材会有各种比如圣诞节,春节,热闹等不同维度的标签,在系统直接输入关键词,即可有一套符合产品需求的页面生成,然后在此基础上编辑活动内容包括配置,到最终的发布都能一次性解决,甚至包括最终各个场景位置的banner素材图都能通过预设的尺寸自动生成。

Xcube智能一键生成H5

Xcube最主要的用户是产品经理,如何让产品经理去自己制作一个活动页面,必须跳出设计师的角色去思考并去简化整个页面的设计过程。

每一个产品经理都会有自己常用的活动类型,我们首先按照这些活动类型制作常用的活动组件,然后搭配好相应活动类型的模板,产品可以直接在首页选择一个常用模板进行编辑,也可以从空白新建一个新的活动页面。组件库中也有很多通用的组件类型,可以满足任何信息结构。

在首页选择从空白新建,产品经理可以直接选择我们搭配好的预设皮肤进行编辑,也可以从页面配色的选择开始,然后再组建库中选择相应的组建实现页面的生成。也可以直接输入关键字让系统直接随机生成搭配出相对应的配色及页面元素,优先的智能匹配素材使得同一个页面当中的素材视觉风格保持统一,同样也可以在此基础上进行编辑和修改。

Xcube智能一键生成H5

组件编辑区域里面会根据关键字或者当前配色自动显示匹配的素材样式,也可以手动上传新的图片素材,上传过程中可编辑图片素材信息及标签,方便系统之后智能识别。

头部也预设了很多样式,可以直接替换文案,也可针对核心字段进行简单段样式调整。

对于页面组件的编辑,系统可进行实时保存,并有上一步撤回的功能,也可以恢复默认设置,右侧组件编辑区域在设置组件样式的同时也可以进行组建的配置。

Xcube智能一键生成H5

编辑中也可以切换到预览模式,根据不同机型进行预览,让产品经理对页面核心信息的位置有所把握,切回编辑模式可继续编辑。确认所有的编辑之后可直接配置活动以及测试部署,并提交审核。一直到最终的外网部署发布都能在同一个场景完成。

活动页面制作完成之后可以在我的活动和全部活动里进行查看和管理。

Xcube智能一键生成H5

目前Xcube平台已经搭建完成,品牌的视觉符号及素材也在不断的丰富中,Xcube的普及会大大提升日常运营活动的效率。

cp不用在进行繁琐的垒页面和改尺寸的任务,相同的或者更少的时间可以用来制作素材,而且这些素材也可以保存在系统的素材库中进行重复使用;视觉也不用再花额外的时间去进行审核工作,产品也省去了跟多方沟通的时间,由于产品能直接配置活动,也省去了所有的开发成本,在这整个链条中,产品,视觉,交互,重构,开发包括cp所有利益相关者的成本都得到了优化。不仅仅是运营活动,Xcube也可用于更多高频且固定框架的页面的制作上,后期我们会继续优化并增加更多功能,相信Xcube日后会节约更多的实际成本。

目前Xcube正在持续优化,暂时只针对内部使用。

 收藏