前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >人工智能设计师之智能排版的另一种实现方式

人工智能设计师之智能排版的另一种实现方式

作者头像
mixlab
发布2018-04-17 14:19:31
1.8K0
发布2018-04-17 14:19:31
举报

Flipboard的自动排版系统Duplo

最近在整理算法驱动设计的案例,翻到Flipboard的自动排版系统,再次研究了下,把相关的技术思路整理了下:

Flipboard主要要解决的是多种屏幕尺寸的排版方案选择,系统内置一些模版库,通过输入内容的决策树判断,组合出大量的排版方案(一般达到2000+以上),然后通过评估(打分,通过预先制定评分规则),选取分数最高的方案,然后进行再进一步的精细化排版。

一、大批量生成排版方案


例如:

生成3栏的横向版面,Duplo可以进行匹配组合,生成2000+个排版样式。

二、排版方案生成的逻辑


把复杂的版面进行拆解,分解成更小的单元,使用的时候,进行组合,拼装出目标版面。

如,上图从2栏的模版里选取适合的,加上从1栏的模版里选取的进行组合。

基于决策树的规则体系:

三、评估2000+个排版方案,从中选择最适合的的方案


构建一个评估函数,由Page flow、每一页面中文字所占比例、不同尺寸版面内容展示的一致性、图片的评估等构成。

3.1 Page flow

这里用到了Perlin noise算法,Perlin Noise 可以用来表现自然界中无法用简单形状来表达的物体的形态,比如火焰、烟雾、表面纹路等。这里运用它为每一种版面方案进行打分,下图是评分规则:

3.2 每一页面中文字所占比例

这里认为80%或更高的比例更适合,即得分越高。

3.3 不同尺寸版面内容展示的一致性

由于是考虑适配各种屏幕的排版方案,因而会考虑选取一种内容展示更一致的方案。

3.4 图片的评估

对于图片,大批量的排版方案中会采用不同的缩放和裁切参数,这里的评估采用opencv识别图片中的人脸,选择最佳的缩放和裁切参数。

综合以上的得分,选择一种排版方案。

四、进一步优化排版

通过栅格系统,再进一步地微调页面内各元素的位置与尺寸。

以上为本文的全文。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-01-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 科技Mix设计Lab 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档