继续聊技术思维与设计思维的mix
- 2019 年 10 月 8 日
- 笔记
本文继续聊设计思维与技术思维的mix，基于志荣做的访谈《第三期采访：设计师如何在智能化时代持续学习和成长？》，mixlab社区重新梳理了4个内容跟大家分享下。
作者们：
ML04-00
产品设计师／数字极客／跨界学习者
公众号：HackHYourself
ML01-TVB
独立开发者／交互设计师
公众号：薛志荣
ML00-shadow
无界社区发起人／设计师／程序员
1 编程思维与设计思维
编程思维可以帮助非理工科背景的设计师了解什么是抽象、复用、结构化和参数化，这些都是编程的思考方式。比如说设计师要搭建组件库或者整理设计规范的时候，要考虑怎么把最开始看起来很杂乱的元素抽取出来形成多种模式，这些思维就非常重要了。
——结构化的思维往往是技术思维，例如平面设计领域，平面设计师最后设计完成的是一张设计图，而在计算机／技术的思维角度看，其实是一份结构化的数据。
例子：
svg格式的图，看起来跟我们传统的图片没啥区别。例如mixlab的logo：
实际上，svg的文件形式保存了图形的群组关系及位置、区域、色彩等数据，如：
svg这种文件格式，从技术的角度可以通过数据操作反推设计，而设计可以无缝转化为结构化的数据。
再看我们设计师常用的photoshop，其psd文件也是结构化的数据：通过代码可以解释成：
{ 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的更新：
近期mixlab也会更新算法作曲相关的内容，敬请期待哦～
