全栈设计+编程的方法论，以“猜对联”小程序为例
趁着快过年，花了 2 天晚上从设计到开发，做了一款小程序 “ 猜对联 ” ，可以用于公众号吸粉，也可以朋友间拜年，也可以作为聚会的真心话大冒险游戏，玩法多样，全在用户手上。
小程序有个好处就是开发起来比较快，纯前端也可以上线一个产品，整个代码文件控制在 2M 以内就行。
点击体验 猜对联 小程序
进入正文前，分享最近看到的一句话，蛮有道理的，是曾仕强说的 ：
“
科学，科学应该理解为分科之学。
”
分科之学的教育局面导致了今天我们缺少了跨学科的能力，而往往跨界融合，可以带来意想不到的效果，举个著名品牌杜蕾斯的跨界营销案例：裁判用“安全套”给球员报时，杜蕾斯补时 4 分钟。
在 2017 年度总结中，MixLab 也提到了融合（ Mix ）的方法：用设计思维思考技术问题；用技术力量解决设计难题。2018 年初 MixLab 也尝试了编程 + 教育的融合：EASY · FULLSTACK · CO-WORK 易懂 · 全栈 · 共同的教育产品。MixLab 出品的 IOS APP 采色灵感，也是一款跨界融合的尝试：从设计到开发的全栈实践。在设计融合编程这条路上，MixLab 从不止步。
1
左右大脑的思维模式
Left vs. Right
如上图，左右大脑的思维模式，天然给设计与编程设下了分界线。右脑主宰艺术、创造力、感性、想象力，左脑则更多承担理性、逻辑、技术思维。再加上“分科而学”，形成了 2 种职业路径，开发者 & 设计师。
—— 插播一则小广告，MixLab 的微信群里聚集了一批集设计&编程技能的跨界人才哦～
2
东西方思想方法差异
Holistic vs. Analytic thinking
东方美学讲求含蓄，西方则以直白、理性见长。
东方，我们举枯山水的例子，以白砂寓意大海，置石寓意岛屿，一山一水隐喻自然景色，观赏者需要强大的想象力，来解读造园者的思想（ 禅宗 、“ 佛系 ” ）。
法国古典园林代表：凡尔赛宫。凡尔赛宫是国王君权的象征，显示了驯服自然的能力。太阳被作为国王的象征，在园林的主题中被反复强调。长达两公里的林荫大道分段布置着无数的喷泉、雕塑和绣毯一般的花坛，都按照几何图形严格对称。
3
设计思维
Design thinking
起源于斯坦福大学设计学院的一套科学方法论，主要内容：
观察：观察用户
理解：深入理解用户
定位：目标人群和环境
定义：定义一个设计指导观点
概念设想：想出新点子
可视化：用图可视化设计想法
方案评估：从技术、商业、文化等多维度评估
原型制作：功能原型
还有市场验证、迭代等。
这是一套可以系统指导设计活动的方法论，被广泛应用于互联网产品的设计中。但是在实践中，由于业务的复杂及公司的工作氛围问题，从业人员不一定能完整地实践这一整套流程，往往只是取其中一些环节进行。
4
编程中的抽象与组合思维
Abstraction and. Composition
大家使用过 React 都应该知道，我们会把各种重复使用的组件写成组件库，供开发中不断重用。这里引用 React 核心开发者 Sebastian Markbåge 写的例子。
4.1 抽象
Abstraction
比如，我们需要表达这一串内容：
{ borderStyle:'1px solid blue', childContent: [ 'Name: ', { fontWeight:'bold',
labelContent:'Sebastian Markbåge'
} ] };
可抽象为：
{
firstName:'Sebastian',
lastName:'Markbåge'
}
写成代码：
function FancyUserBox(user) { return { borderStyle:'1px solid blue', childContent:[ 'Name: ', NameBox(user.firstName + ' ' + user.lastName) ] }; }
4.2 组合
Composition
我们有基础组件 FancyBox：
function FancyBox(children) { return {
borderStyle: '1px solid blue',
children: children
}; }
我们把 FancyBox 加上 NameBox 组件，组装成另一个组件 UserBox 。
function UserBox(user) { return FancyBox([
'Name: ',
NameBox(user.firstName + ' ' + user.lastName)
]); }
再举个游戏开发的例子，写游戏的时候，会先写一个核心的引擎，把游戏场景、粒子系统、物理特效模拟等游戏中最普遍的对象抽象在一个代码库中，这个引擎中的组件会在游戏中不断复用。在web、桌面或手机应用开发中我们称为框架 Framework ，在游戏开发中我们叫它引擎 Engine ，在基础服务里为架构 Architecture ，这些的思维的共性就是抽象与组合思维。
4.3 设计中的抽象与组合
Design language
再看看设计，设计系统、设计语言、风格指南都扮演一个“组件库”的角色，把设计核心的内容抽象出来，然后具体业务使用的时候进行复用，调整，组装使用。例如有谷歌的 Material Design ，微软的 Fluent Design ，蚂蚁金服的 Ant Design 。
5
设计+编程的方法论
Design Mix Develop
基于设计思维 Design Thinking 及以上相关的研究，MixLab 探索了一套方法论，姑且先称为“ Design Mix Develop ”。下面以小程序产品：“ 猜对联 ”为例，我们看看 Design Mix Develop 思维模式。
猜对联
一款小程序产品的实验，蹭热点的游戏化体验产品设计与开发。
5.1 热点事件
春节
方法：观察
此次为 “ 蹭 ” 热点的方式，平时我们要多观察时事发展，热门产品的出现，捕捉可以施展拳脚的事件进行创作。
5.2 热点事件的元素
拜年、对联、红包、春晚、年夜饭、春运、团聚等等。
方法：头脑风暴，理解
基于热点事件，搜集尽可能多的相关元素，这个过程可以借助众人的头脑风暴，开拓思维，天马行空。然后，罗列的时候，需要对该元素有相当的理解，换位思考、理解用户基于该元素所触发的行为。
5.3 选取本次题材
对联
方法：定位
确定一个核心元素，选取的原则以可行性、可玩性等作为考量标准，也可以自行定义标准。
5.4 设计风格
中国味，配色采用橘红色，代表富贵吉祥，对联每一个字用田字格的元素，书法字体（采用开源可商业字体）
方法：定义，抽象
基于定位，确定设计的语言、风格，提炼设计的指导性的原则。
5.5 点缀
设计的主体是对联，毛笔砚台点缀。
方法：画龙点睛
再思考下，有没有其他的点睛之笔，烘托氛围，没有也不要紧，直接跳过即可。
5.6 用户体验
在整个流程里形成闭环。
方法：概念设想、思维可视、原型
制作产品的原型，考虑用户体验的路径变换带来的效果，并优化体验，尽量让每个环节形成闭环。
5.7 技术解决方案
方法：技术评估
从技术的角度可以对方案的实现进行评估，并梳理技术路线。
分享下技术解决中碰到的问题：
1 ）小程序使用外部字体的问题
小程序不能引用外部字体，外部字体文件较大；于是想到把对联中用到的字处理成 jpg ，直接调用。本次对联共有 300 多个字，需要借助代码来实现。利用 sketch 的扩展代码实现，批量生成中文字的 jpg 。
——用代码操作设计工具高效完成重复设计的工作。
2 ） 安卓机型引用本地中文文件名的图片时没法显示的问题
这个 bug 是上线后发现的，于是迅速找了个安卓手机，发现安卓不支持中文的图片文件名，于是在小程序加了个判断系统的命令，碰到安卓的，就不显示外部字体，直接采用系统默认字体啦。当然还有其他方案，比如把我前面生成的 300 多个字体图片文件名改成英文的，我没有采用。
——小程序并不能完美实现适配 Ios 跟 Android
以上分享了 7 个设计+编程 Design Mix Develop 的方法论 。仅从设计至开发这一链路进行探讨，没有过多的考虑商业价值／商业模式，仅仅是一次结合兴趣的实践探索。后续可以补上商业画布等其他商业思考的内容。
*
关于公众号：
本公众号定期更新人工智能&设计&科技内容。
谈点设计，敲点代码，偶尔创作点人工智能实验产品。
码字不易，开启新的打赏方式：