DESIGN

用代码做设计 · 译文


我们正处于设计工具复兴的中期,在 Sketch 1.0 发布后的八年里,它已经和传统的设计工具形成了一波竞争浪潮,并且随着设计师可用工具成倍增加,一些曾经被边缘化的理念将会面向更多的受众。

其中有一个数字产品设计的理念将会显著改变:深度整合设计和代码。如今的工具中,Figma 可以实时更新 React 代码,InVision、Abstract 和 Zeplin 解决了设计到开发的交付问题,Framer X 可以直接在工作区渲染可交互的 React 组件,这些都是未来趋势的一些迹象。

和我一样喜欢写代码的设计师能够意识到,这场革命是必然会到来的,我自己的工作方式已经被我的 CSS、HTML 和 Javascript 知识影响。然而对于我和其他很多设计师来说,设计依然是先于代码的,极少情况(如果有)下它们会反过来。

最近我有了一些机会去使用代码进行设计,在《华尔街日报》的两个较大的项目中,编写代码给我带来了一些新的想法,比如有些在设计早期会碰到如「使用真实的数据看起来效果如何?」之类的问题将会很容易解决。直接使用代码探索视觉创意,让我意识到代码作为设计工具的惊人潜力。

案例 1:《华尔街日报》杂志

我在 2017 年 8 月加入《华尔街日报》,接手的第一个项目是重新设计《华尔街日报》杂志首页。

《华尔街日报》杂志是一档时尚、艺术和生活方式的付费杂志,有着一流的内容:电影和电视明星的定期专栏,时尚、艺术、潮流饮食与文化领域的名人。在这次重新设计之前,该杂志在线版还未推出。

传统方式

我在 Sketch 中实现最初的想法,用鼠标画出填充了文字和图片的矩形,在 Sketch 中要做到像素级别的精确很容易并且也有必要,对此我进行了不计其数的微小调整。我会很在意 10 像素作为间距是否太大,或 14 点的字用于署名是否太小,当然这些都是设计师该做的事。


我对《华尔街日报》主页改版的第一次尝试结果

我将这些矩形内容填满了整页,所有东西都按网格排列,我很习惯地选择了我认为合适的照片和标题排布方式,而忽略了跳出于此平衡去思考。


设计过程中,我的设计总是被束缚于矩形之中

这种设计方式对于任何使用过 Sketch、Adobe Illustrator、Photoshop 或者如 Invision Studio、Framer 这类新产品的人来说都应该很熟悉,这是当前设计方式现状。

打破网格

某个周末,我觉得如果用代码将我的设计想法做成原型会很有趣(事实确实如此)。在 Sketch 中建立的 Symbol 体系会在大内容量下变的越来越慢,我认为这些情况在浏览器中应该会表现的更好。此外,我一直想尝试新的 CSS 网格,并加强我对 Flexbox 的使用经验。


不是很完美但最终很独特的原型

当我再次打开这个项目时,我惊讶地发现页面在未完成的状态下看起来很不错,而如果我用传统的设计视角来看待它时,与 Sketch 文件内设计的不一致,让它看起来像是未完成的作品。

内容没有严格的网格划分,元素周围有不对称和不太正常的留白,一条不规则的边缘引导着我的视线,并且如果我花更多时间在代码上,又可以尝试更多的方式。最后,我没有在 SKetch 中继续摆弄像素,而是从浏览器中截屏,将其粘贴回 Sketch 中。


我没有让内容填满所有的可用空间,而是让图片按原始分辨率显示

意外惊喜

由于缺乏经验,我忽略了设置媒体查询来指示页面应该如何适应小屏幕。结果,内容溢出了浏览器的边缘,用户需要在页面上滑动来查看更多内容。


滚动以查看溢出内容

这次「意外」让人感到兴奋和新奇,在 Sketch 中,我使用的是无限大画布的静态区域,所以不会出现溢出现象,所有东西总是固定位置,不过,在小屏幕设备上,左右滑动是一种愉悦的导航形式(感谢 Tinder),尤其是在内容明显脱离框架的情况下。如果没有在我手机浏览器中看到这种情况,我可能从来都不会想过要尝试一下。

案例 2:WSJ.com 的新主页

WSJ.com 的主页是《华尔街日报》在线产品中最重要的部分之一,不夸张的说,平均每个月《华尔街日报》的网站首页会被数以百万计的人浏览数千万次。在 2018 年夏天,我开始重构 WSJ.com 主页的设计语言,我自然会感到无从下手,从哪里开始?

在对工作进行评估时,我意识到其中一个组件——带有文章链接的卡片,占了页面的 80% 的空间。对此,我开始创建一套简单、灵活的卡片系统,以统一主页上的 100 个以上的内容。

卡片背景

目前的 WSJ.com 主页制作于 2014 年,在这个项目中,当时工程团队决定冒险使用 Facebook 的一项名为 React 的新技术。用 React 构建意味着组件的高度可配置,内容可以根据变量以各种方式显示。


当前主页中的一个卡片

随着新的卡片组件的设计和开发,它们被命名和分类,「LS-LEAD」被「LS-LEAD-NO-IMAGE」和「LS-LEAD-ALT」继承,像「SPOTLIGHT-SEVEN」这样的布局就是用这些组件构建的。


SPOTLIGHT-SEVEN 页面布局

随着卡片上层级的增加,低级别的一些信息如标题大小、媒体位置、时间戳和相关内容会被抽象出来以便于不同尺寸图片的展示。此时,编辑者已经可以通过更新一个值就对页面布局进行全局改动。

推翻重来

设计期间我再次意识到一个 Sketch 的限制性,在准备用户测试时,我花了太多的时间来复制和粘贴内容,而我希望的仅是制作一个报道列表,让页面承载它,并且做尽可能少的调整。

因此在一个周末,我从零开始制作了一个看着有些低效的程序,用 HTML 和 CSS 来渲染 WSJ 主页。


用我新的卡片组件系统更新的主页

在写这个程序时,我开放了各个卡片的低级别配置,通过调整配置来获取样式,这很有趣,因为这有不确定性,当然这些在追求像素精确为目的的 Sketch 中自然是无法做到的。

我可以像这样往组件中传入一些参数:

 {
  "headline": {
    "size": "l"
  },
  "byline": false,
  "media": false,
  "bullets": false
}

然后得到一张看起来这样的卡片:


一个有标准标题没有图片的卡片变体

但如果我稍微改变下这些参数,我可以在 60 秒内获得出完全不同的卡片:


一个有居中标题和图标的卡片变体

乘法设计

在我的简单原型中,每个文章卡片有 26 个可配置项,这意味着,对于每个报道,都有超过 100 万种可能的卡片类型,在 Sketch 中这将是一个难以维护的噩梦。


上百万中可能的变体中的 10 种

但是在代码中,这个组件大约是 300 行 HTML 和 CSS 代码,以及少量的 NodeJS 代码用来将 WSJ.com 主页的实时数据填入卡片,我们可以对组件稍作修改便可看到全局性的变化。做乘法设计意味着做一点修改便会有全局性的输出,这样能让我的设计变得更缜密。

结论

这些新的设计软件的出现,对于设计师来说意味着代码将成为操作这些工具的核心,但是没必要等待 Framer X 的邀请或其他任何新的 beta 版本的软件,你现在就可以使用代码作为设计工具进行设计,以下是一些关于如何学习的建议:
* Wes Bos 有一些很棒的关于 CSS 和 Javascript 的课程,包括关于 React 和 Node 的介绍。他的课程会围绕一些有趣的项目展开,教学风格非常有意思。
* Daniel Schiffman 有很多关于创意艺术编程的视频。他的教学方式是从问题出发并找出解决方案,这更让人有沉浸感并感到非常自然。
* Codecademy 有非常深入的交互式课程,我偶尔会做一些关于 Javascript 的练习用来复习。
Twitter 上还有一个充满活力的工程师和设计师社区,他们激励我使用代码作为设计工具。如果你想将代码运用于设计,可以与我交流,我是@ilikescience

脚注:
1. 我想在以后的文章深入探讨这个话题,现在我建议你先阅读 Jon Gold 的书《Declarative Design Tools》

原文作者:Matthew Ström

Standard

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据