前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >全栈设计+编程的方法论,以“猜对联”小程序为例

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

作者头像
mixlab
发布2018-04-17 15:58:54
1K0
发布2018-04-17 15:58:54
举报
文章被收录于专栏:MixLab科技+设计实验室

趁着快过年,花了 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

比如,我们需要表达这一串内容:

代码语言:javascript
复制
{
  borderStyle:'1px solid blue',
  childContent: [    'Name: ',
    { fontWeight:'bold', 
      labelContent:'Sebastian Markbåge' 
    }
  ]
};    

可抽象为:

代码语言:javascript
复制
{
‍  firstName:'Sebastian', 
  lastName:'Markbåge' ‍
}    

写成代码:

代码语言:javascript
复制
function FancyUserBox(user) {  return {
    borderStyle:'1px solid blue',
    childContent:[      'Name: ',
      NameBox(user.firstName + ' ' + user.lastName)
    ]
  };
}

4.2 组合

Composition

我们有基础组件 FancyBox

代码语言:javascript
复制
function FancyBox(children) { 
    return { 
        borderStyle: '1px solid blue',
        children: children 
        }; 
} 

我们把 FancyBox 加上 NameBox 组件,组装成另一个组件 UserBox

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-02-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 科技Mix设计Lab 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档