专栏首页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

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

{
  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),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 算法驱动型的设计

    “Everything should be made as simple as possible, but not simpler” — Albert Eins...

    mixlab
  • 关于无障碍设计的七件事

    作者简介:Jesse Hausler,Salesfoce无障碍设计专家。旨在通过教育大家「通用设计」来实现为所有用户而设计。

    mixlab
  • 建筑师跨界无人驾驶技术,探索空间设计与智能技术的融合

    PIX是喻川的无人驾驶项目,他希望无人驾驶的移动方式会降低出行成本,消除出勤的焦虑与时间。只需手机上的几个按键就实现:

    mixlab
  • 3D探索 | 卡噗内容趋势设定

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 导语 卡噗对于我们来说,是首个3D社交类项目。随着卡噗内容设计和质量日趋成熟...

    腾讯ISUX
  • 阿里UCAN设计论坛 · 会议纪要

    用户体验背景下ued未来的两个关键词是创意与智能。从产品的角度来说是与用户的交互和视觉表达,依赖于三个部分:

    宇相
  • MySQL8.0关系数据库基础教程(四)-带有条件的查询语句

    WHERE 位于 FROM 之后,指定一个或者多个过滤条件,满足条件的数据才会返回。

    JavaEdge
  • 架构设计最常用的15个原则

    凹谷
  • 【SDL最初实践】安全设计

    “为了减少产品设计带来的安全隐患,避免后续发现问题时,对功能实现流程甚至程序架构大刀阔斧改动带来高昂代价。在产品设计阶段,需要加入必要的安全活动,减少并消除产品...

    aerfa
  • 大数据助力发现阿尔茨海默症的最早征兆

    大数据文摘

扫码关注云+社区

领取腾讯云代金券