继续聊技术思维与设计思维的mix

本文继续聊设计思维与技术思维的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对交互设计的影响

赞 (0)

相关推荐