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

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

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-02-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

在未来五年中Python趋势,能否超过JavaScript成为第一语言?

JavaScript和Python是两门非常有影响力的编程语言,二者都是我们在打造跨平台应用时会用到的主流语言。在过去的这些年中,尽管JavaScript始终占...

1662
来自专栏Crossin的编程教室

我是如何在自学编程9个月后找到工作的

昨天在我在国外网站 reddit 上看到一篇文章,作者分享了他自学编程 9 个月后找到工作的经历。文章不到一天就得到3千多赞,2百条回复。我看了下内容,非常中肯...

2743
来自专栏落影的专栏

程序员进阶之算法练习(一)

前言 我对编程能力的认知包括三块: 基础知识:数据库、操作系统、网络原理等; 编码能力:软件架构(MVVM、MVP)、设计模式、编程语言(C、JAVA、C++)...

4046
来自专栏程序员互动联盟

【编程指导】如何成为一名真正的程序员?

本人十几岁开始写程序,近十几年来都在教人写程序,还经营着一个可能随时倒闭的软件公司,主要的开发语言是C#。 首先,我不认为《算法导论》是所有程序员必须一开始就掌...

36510
来自专栏老九学堂

给程序员们的小秘籍

● 前言 ● 编者是一个工作多年的程序员,也有做过一些大中型项目的经验。尝过成功的滋味,也体验过失败的痛苦。虽然觉得自己离真正的高手还有距离,但也希望能分享出自...

3737
来自专栏一枝花算不算浪漫

[面经]春季跳槽面筋总结 [2018年3月17]

1083
来自专栏腾讯社交用户体验设计

从零开始的异视觉设计

1617
来自专栏Golang语言社区

Golang语言社区-【H5游戏开发基础】web前端开发分享-css,js入门篇

关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心...

4355
来自专栏风火大数据

如何快速成为数据分析师

  说来我正式接触数据分析也快一年,对速成还是有一些心得。优秀的数据分析师是不能速成的,但是零经验也有零经验的捷径。

43918
来自专栏一枝花算不算浪漫

[面经]春季跳槽面筋总结 [2018年3月17]

4179

扫码关注云+社区

领取腾讯云代金券