DIY一个人工智能设计师_v0.0.1

本文包含了两个系列的内容:

《设计师会编程,程序员懂艺术》

《写给设计师的人工智能指南》

在这里给设计师介绍人工智能在设计领域的应用,也亲手实现了一个融合设计、编程的小实验产品。

AI真的可以替代设计师?取代设计师的工作吗?在我实验完这个产品后,我觉得再过几年,会有大批的设计师失业。真的,效率高,方案选择余地大,最先被取代的将是一些最简单的设计工作,新手设计师的生存空间会非常小。

下面进入正文,我们先总结下AI在设计行业的应用,我觉得都可以统称为智能设计助理。包含2个方向:

提供设计建议

自动生成设计方案。

1

基于大数据,提供设计建议

设计师贴身助理,业主的设计顾问

这类属于“提供设计建议”,有两个细分方向,一个是面对设计师的,一个是面对有设计需求的业主的。

1.1 设计大数据

根据设计的类型,提供行业的设计趋势,包括样式、风格、典型案例、设计手法等等,甚至是提供该领域最优秀设计师最高产设计师性价比最高的设计师等等。比如logo设计,输入想要用到的行业,设计助理可以告诉你所在行业的logo流行趋势,色调分布,图案构成,所用的字体样式等等设计数据。

1.2 设计质量评估助手

评判设计效果,基于设计大数据,生成某个设计方案的评价报告。比如设计师或者业主提交一份设计图给设计助理,助理可以直接帮你评判设计的“好坏”。

这个事情,还没有看到很好的案例,比较接近的可以看dribbble的这个页面,色彩、标签、分享数据等。

2

自动生成设计方案

人工智能设计师

用户按照某种流程,输入需求,然后设计助理自动生成无限套设计方案给用户。比如鲁班、深绘、ARKie等,都是提供海量设计方案为目的。

我们来研究下ARKie:

ARKie是一款

字体排版、自动生成作品、无限方案的智能设计助手。

其交互逻辑是这样的:

1 输入文字

2 选择模版

3 生成方案

逻辑简单,但做的事不简单,我们可以分析下实现过程。

2.1 从技术的角度看ARKie实现过程:

打开chrome浏览器的开发者工具,可以看到ARKie的网页结构、请求数据、返回数据,还可以找到内置一些经典的文案模版。

通过鼠标点击可以切换不同的文案,或者用户输入自己的文案;

前端先通过标点符号的切割,把文案切割好

这是我测试的正文内容:

数据提交到服务器后,返回一组数据。这组数据内容包括图片的URL,文字排版的位置,字体样式,颜色等。

前端通过svg来生成方案。

为什么是svg?因为用svg可以方便的控制字体样式、各种滤镜效果,最重要的是可以很方便的导出为图片格式。

ps:

最近直接用电脑打开网站没法自动生成方案了,原因是需要在微信的环境里使用。那么开发者工具也没法分析其实现方式了。不过可以用Anyproxy来实现,这个在我的一篇文章里提到过,当时是用来爬取微信公众号文章的。

2.2 ARKie的特点

通过文字匹配适合的图片作为底图;

自动排版;

多种尺寸规格可选;

简单的用户交互逻辑;

方便使用,基于微信;

当然,自动排版的文字跟图片有时候重合在一起效果并不好,文字的样式也是几种版式随机切换;

3

自己动手做个AI设计师

技术思想:

以设计助理的第二个方向为主,我们来动手实现一个AI设计师的V0.0.1版本。总的技术核心是:

以“文”搜图 + 图片合成

形象点可以理解为:

Google+photoshop

用户输入一句文案,文案经过分词,用分词结果匹配图片,然后再合成文字与图片。

实现路径,有2种:

整合第三方服务

自行构建搜索服务。

第三方服务可以用Unsplash API,非常简单,只需要到官网去注册下,然后调取相应的api即可,国外开源的图片库;还可以采用hack点的方式,封装baidu或google搜索引擎的服务。

自行构建搜索服务,需维护一套图片库。

图片需预先标注好关键词,通过图像识别标记结合人工标记。

这边我用到了图像识别开放平台Clarifai | Image & Video Recognition API ,官网注册下,调取api接口,返回图片内容标签后,我们可以通过人工辅助修正标签,毕竟机器不一定都靠谱哈,下图是我正在开发的另一个工具,一个采集图片,提取颜色,识别内容的工具。

4

用Electron+NodeJS实现

4.1 自然语言处理

先实现文案输入框

JS通过 addEventListener绑定按钮click事件,然后把输入的文案进行分词。这里我选择了”盘古分词”。

BosonNLP

IKAnalyzer

NLPIR

SCWS中文分词

结巴分词

盘古分词

庖丁解牛

搜狗分词

腾讯文智

新浪云

语言云

比如这句文案:

“他为你们遮风挡雨,抵抗全世界,默默的忍受你们闹脾气,为什么?为了让你们俩有未来…有自己的人生。”

分词结果,把词性标注了出来;

4.2 图片搜索与合成

我们可以把名词、形容词等,作为关键词,来搜索图片。

这里我选择了bing作为搜索服务,封装成了个api,供使用,用electron新建个webview,地址为

http://cn.bing.com/images/search?&q=%E6%98%A5%E5%A4%A9&qft=+filterui:aspect-square+filterui:license-L2_L3_L5_L6+filterui:photo-photo

这个地址是通过分析bing的搜索接口提取的,可以设置图片的版权、版式等。

然后判断webview的加载情况,加载完成后,用webview的executeJavaScript方法,注入javascript代码:

实际使用过程中,我把webview隐藏了,相当于一个headless browser。我就是用它封装各种网站的服务的,哈哈~

返回的是匹配图片的url数组,我在这里通过canvas的相关api进行了一些像素级的调整,包括颜色、亮度、对比度等,还用了css的filter滤镜功能,把图片处理了下。

文字部分,通过上文所说的分词,把关键词标注出来,关键词的字体我用了开源的庞门正道标题字。自动合成的效果如下:

我们还可以输入各种各样的文案体验下合成效果~

ps:

在写此文的时候,一不小心,做了3个模版,有空再继续做模版,丰富效果哈。

以上是我的一个实验产品,接下来我会继续迭代,直至可以发布使用~

迭代的方向,我也梳理了下,比如:

更复杂的自动排版:

文字排版方式根据图片内容来布置,需识别图片主体内容的位置范围;

文字样式多样化;

文字结合图标;

自建漂亮的图片素材库:

这个纯苦力活;

图片自动美化功能:

自动选择滤镜,处理方式,裁切方式;

文案自动修饰:

匹配相关的更有创意的文案供选择;

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2017-06-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

基于任务的导航设计

对于不同平台导航的交互形式与视觉样式,相信有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路。一个比较小众的领域,基于任务的导航(Task based N...

22910
来自专栏即时通讯技术

七牛云技术分享:使用QUIC协议实现实时视频直播0卡顿!

不做任何开发,就能实现弱网环境下实现实时视频直播零卡顿,听上去是不是天方夜谭?看完这篇文章你就知道,我们是如何做到的。

1482
来自专栏web前端教室

学习前端开发,不知道怎么做,不知道问什么了,怎么办

我刚开始搞培训的时候,不是很懂学生的心理。我想法很简单,你不会,我教你,你努力学,学会就挣钱,很清晰。但人本身是复杂的,他会受很多外在因素的影响。 他会想,我学...

2038
来自专栏腾讯社交用户体验设计

QQ音乐V5 : 星设定 - 腾讯ISUX

1452
来自专栏养码场

7G Vue.js 教程,55集从基础到2.0,简单灵活易上手,项目开发实用款!

一款MVVM框架,用于创建 Web 交互界面的库,通过响应式在修改数据的时候更新视图。其两大核心:数据驱动和组件化。

723
来自专栏大数据文摘

【独家】ECharts 2.0发布,大量细节曝光

2536
来自专栏理论坞

UI初学者的弯路,你走过几条?

对于初学UI设计的人而言,可能对UI具体是做什么,或者自己是否能顺利转行胜任这样的岗位存在一定的顾虑,今天我们就来重点说说UI是做什么的,以及学UI到有哪些需要...

572
来自专栏知晓程序

小程序版 QQ 推出 / 微信新增「语音加速功能」与「夜间模式」| 晓技巧

1812
来自专栏数据小魔方

Xcelsius(水晶易表)系列14——选择器高级用法(关于地图的动态交互)

今天开始跟大家分享水晶易表的另一逆天功能套件——动态交互数据地图。 其实严格来讲,地图也是作为一种特殊的图表,我们可以像阅读其他 统计图图表那样来通过地图来获得...

2594
来自专栏编程微刊

网站二次开发的总结

1466

扫码关注云+社区