本文继续聊设计思维与技术思维的mix,基于志荣做的访谈《第三期采访:设计师如何在智能化时代持续学习和成长?》,mixlab社区重新梳理了4个内容跟大家分享下。
作者们:
ML04-00
产品设计师/数字极客/跨界学习者
公众号:HackHYourself
ML01-TVB
独立开发者/交互设计师
公众号:薛志荣
ML00-shadow
无界社区发起人/设计师/程序员
1 编程思维与设计思维
编程思维可以帮助非理工科背景的设计师了解什么是抽象、复用、结构化和参数化,这些都是编程的思考方式。比如说设计师要搭建组件库或者整理设计规范的时候,要考虑怎么把最开始看起来很杂乱的元素抽取出来形成多种模式,这些思维就非常重要了。
——结构化的思维往往是技术思维,例如平面设计领域,平面设计师最后设计完成的是一张设计图,而在计算机/技术的思维角度看,其实是一份结构化的数据。
例子:
svg格式的图,看起来跟我们传统的图片没啥区别。例如mixlab的logo:
实际上,svg的文件形式保存了图形的群组关系及位置、区域、色彩等数据,如:
svg这种文件格式,从技术的角度可以通过数据操作反推设计,而设计可以无缝转化为结构化的数据。
再看我们设计师常用的photoshop,其psd文件也是结构化的数据:通过代码可以解释成:
代码语言:javascript复制{ children:
[ { type: 'group',
visible: false,
opacity: 1,
blendingMode: 'normal',
name: 'Version D',
left: 0,
right: 900,
top: 0,
bottom: 600,
height: 600,
width: 900,
children:
[ { type: 'layer',
visible: true,
opacity: 1,
blendingMode: 'normal',
name: 'Make a change and save.',
left: 275,
right: 636,
top: 435,
bottom: 466,
height: 31,
width: 361,
mask: {},
text:
{ value: 'Make a change and save.',
font:
{ name: 'HelveticaNeue-Light',
sizes: [ 33 ],
colors: [ [ 85, 96, 110, 255 ] ],
alignment: [ 'center' ] },
left: 0,
top: 0,
right: 0,
bottom: 0,
transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } },
image: {} } ] } ], document:
{ width: 900,
height: 600,
resources:
{ layerComps:
[ { id: 692243163, name: 'Version A', capturedInfo: 1 },
{ id: 725235304, name: 'Version B', capturedInfo: 1 },
{ id: 730932877, name: 'Version C', capturedInfo: 1 } ],
guides: [],
slices: [] } } }
可以使用psd.js来解释psd文件
https://github.com/meltingice/psd.js
解释psd后能做什么?得到了设计图的结构化数据,用机器来做设计就变得容易多了(后续更新此部分内容)
2 掌握技术原理对设计的帮助
如果你知道深度学习的一些原理,它到底能实现什么,不能实现什么,它的能力范围到底在哪里,当你以后用到深度学习,就大概知道你要做的设计界限在哪。比如说,基于一个人脸图像库,用GAN(生成对抗网络)来自动生成人脸。这个看起来应用的范围蛮广的,但真正做过一遍以后,你可能会有更多的考虑。比如说数据集从哪里来?是有现成的数据集还是手动获取一批?如果你手动获取的数据集样本量很少,基本不用想自动生成人脸这事了;即便数据量很大,当你发现最终结果人脸是歪的,你就会知道这套技术还没成熟,没法达到要求,那你可能不会把它用到设计里。
所以,深度学习需要考虑数据集是否够多、设定的目标和打分规则是否明确,这些因素都会直接影响设计目标的实现。真正动手学习以后,才会更加清楚深度学习能不能解决设计问题。
——关于数据量大小的问题,现实中,我们很多需要解决的问题都是基于小数据来进行的,例如,做一些卡通人脸的生成,如果采用GAN的方式,得具备大量的卡通头像数据,生成效果见图:
但,我们不采用GAN的方式,还有其他方法吗?有!
通过预设大量的五官图像,通过机器随即组合成一个卡通人像:
通过预设五官就可以生成人脸,而GAN的方法,更多的还停留在研究阶段。
中场休息,推荐基本深度学习的书:
3 AI对交互设计的影响
AI技术对交互流程的影响,在往期的文章也有所提及,例如《TensorFlow.js、迁移学习与AI产品创新之道》
这里再补充一些例子。
例如,之前需要用户填写一些必填信息才能跳到下一步,但如果通过AI技术基于用户的历史数据做分析和判断,整个信息填写可能就不需要了,这就会影响到整个交互流程。
——还有个例子,我们比较常见的制作海报的方式,可能是简化版的PS工具,需要我们添加图片,文字,还要挪动图片跟文字的位置,设置大小等等,而AI的技术,可以让我们仅输入几个文案就可以生成海报(例如ARKIE智能设计),这个对交互的流程也是产生比较大的改变的。
再有目前mixlab正在连载的《从Storyboard到DIY实现一个漫画生成器-02》也是利用技术,简化交互流程,达到用户只需输入一张图片,即可制作漫画的目的。
4 艺术也是可以被机器所创作的
这里举AI与音乐的例子,如果用工程的角度去看待音乐,它其实跟数学还有编程有密切的关系。如果把声音还原为一种物理现象,它更多是力学研究的对象,甚至跟电学和光学的原理有不少相通之处。从这个角度出发理解声音跟音乐之后,你可以尝试加入一些新的元素,例如AI,做出更多有趣、可以互动的声乐装置。用算法生成音乐,正如用算法做设计,需要的是把音乐结构化,然后运用机器创造新的音乐~
——此部分,可以看00的更新:
MakeNoise01 - 声音是什么?
MakeNoise02 - 频率和音高
MakeNoise03 - 振幅/响度/音量/增益 大乱斗
近期mixlab也会更新算法作曲相关的内容,敬请期待哦~