全栈设计+编程的方法论，以“猜对联”小程序为例

趁着快过年，花了 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 的方法论 。仅从设计至开发这一链路进行探讨，没有过多的考虑商业价值／商业模式，仅仅是一次结合兴趣的实践探索。后续可以补上商业画布等其他商业思考的内容。

*

关于公众号：

本公众号定期更新人工智能&设计&科技内容。

谈点设计，敲点代码，偶尔创作点人工智能实验产品。

码字不易，开启新的打赏方式：