亲,欢迎光临天天书吧!
错缺断章、加书:站内短信
后台有人,会尽快回复!
天天书吧 > 其他类型 > 偏宠小青梅,学霸他蓄谋已久 > 第163章 代码与画笔的交响
  • 主题模式:

  • 字体大小:

    -

    18

    +
  • 恢复默认

项目交付后的第三天,苏念晚收到了一条消息。

不是周明轩发的,不是陆星辞发的,是客户直接发在群里的:“网站上线了,效果很好。谢谢你们。”

苏念晚盯着那行字,看了很久。上线了。她画的设计稿,他写的代码,周明轩做的后端,变成了一个真实的、可以访问的、别人正在使用的网站。她忽然觉得,之前那些熬夜、那些改稿、那些算不对的行高,都值了。

手机又震了一下。陆星辞发了一条私信给她:“看到了?”

“嗯。”

“什么感觉?”

她想了想,打字:“像是自己的孩子出生了。”

他沉默了几秒,然后发:“那我们的孩子还挺好看的。”

苏念晚看着那行字,脸一下子红了。什么叫“我们的孩子”?她盯着屏幕,心跳得很快。她想回点什么,但又不知道回什么。最后只打了一个字:“嗯。”

发出去之后,她觉得这个“嗯”太冷淡了,又加了一句:“主要是你写代码写得好。”

“主要是你画得好看。”

她笑了,把手机扣在胸口,靠在椅背上。窗外的阳光从窗帘缝隙里漏进来,在天花板上画了一条金线。她看着那条金线,忽然觉得,这个世界很大,有很多她不知道的东西。但没关系,因为他在她身边。他们一起做了一个网站,一起得到了客户的认可,一起看着那个网站上线。这是他们一起完成的第一件事,但不会是最后一件。

项目交付后不到一周,周明轩在群里发了新的消息。

“客户提了新需求,要做响应式优化。手机端和平板端的显示有问题。”

苏念晚看着那行字,脑子里一片空白。响应式优化?她记得陆星辞给她讲过响应式设计,但她只懂了概念,不知道怎么落地。她画设计稿的时候,只画了电脑端,手机端和平板端只是简单调整了一下间距,没有仔细考虑。

“苏念晚,手机端的设计稿需要重新画。”周明轩在群里说。

她打字:“好。”但她的心里很虚。她不知道手机端的设计稿该怎么画,不知道导航栏在小屏幕上怎么显示,不知道图片在小屏幕上怎么缩放,不知道表单在小屏幕上怎么布局。她什么都不知道。

放学后,她去了树屋。陆星辞已经到了,电脑开着,屏幕上是一堆她看不懂的代码。她走过去,坐在他旁边,叹了口气。

“怎么了?”他问。

“响应式。”她说,“我不会。”

他停下来,看着她。“哪里不会?”

“全部。”

他想了想,然后打开了一个绘图软件。“我画给你看。”

她愣了一下。他画给她看?他不是设计师,他是程序员。他怎么会画设计稿?他拿起数位笔,在绘图软件里画了一个手机屏幕的框。然后在框里画了导航栏——不是电脑端那种横排的导航栏,而是一个汉堡菜单图标,点击之后从左侧滑出菜单项。

“手机屏幕小,放不下那么多导航项。”他一边画一边说,“所以要用汉堡菜单。把导航项藏起来,用户需要的时候再点开。”

他在框里继续画。内容区的排版也变了,电脑端是两列布局,手机端变成了一列。图片的尺寸也变了,电脑端是大图,手机端是小图。字体的大小也变了,电脑端是16px,手机端是14px。

“响应式设计的核心,不是把电脑端的东西缩小放到手机端。”他放下笔,看着她,“是根据屏幕的大小,重新组织内容。让用户在手机上也能方便地使用。”

她看着他画的那些示意图,忽然觉得,他不仅是一个程序员,还是一个懂设计的人。她一直以为,设计是她的工作,代码是他的工作。但他画的那些示意图,比她画的还要清晰。

“你什么时候学会这些的?”她问。

“学代码的时候学的。”他说,“前端开发必须懂响应式。”

她低下头,看着那些示意图。她忽然觉得,自己以前太依赖他了。每次遇到不懂的东西,她就直接问他,让他教她。她从来没有试过自己去查、去学、去搞明白。她觉得自己应该长大了,不能什么都靠他。

“星星哥。”

“嗯?”

“你把那些示意图发给我。我自己画。”

他看着她,沉默了两秒,然后把文件发给了她。“好。”

那天晚上,苏念晚一个人在树屋里画手机端的设计稿。

陆星辞没有来。她说她想一个人试试,他说好,然后去了图书馆。树屋里很安静,只有她一个人,和她的电脑。她打开他画的示意图,看了一遍,然后关掉,开始自己画。

手机屏幕的框,她画了。汉堡菜单,她画了。一列布局,她画了。小图,她画了。14px的字体,她标了。她画完第一版,看着屏幕,觉得哪里不对。她又打开他画的示意图,对比了一下,发现自己的间距不对。她改了一下,又发现颜色不对。她又改了一下,又发现圆角不对。她改了一遍又一遍,改到后来,觉得自己画的和他的示意图一模一样了。

她把设计稿发给他。“画完了。你看看。”

过了几分钟,他回:“导航栏的汉堡菜单,点击之后菜单从哪里滑出来?”

她愣了一下。她只画了汉堡菜单,没画菜单滑出来的效果。她赶紧补了一张图,画了菜单从左侧滑出来的样子。

“好了。再看看。”

又过了几分钟,他回:“菜单项的字体大小,电脑端是16px,手机端应该是14px。你标的是16px。”

她低头看了看,果然,她忘了改。她又改了一遍,把16px改成了14px。

“好了。”

“图片的圆角,电脑端是8px,手机端应该是4px。你标的是8px。”

她又改了。

“按钮的高度,电脑端是48px,手机端应该是40px。你标的是48px。”

她又改了。

“表单的间距,电脑端是24px,手机端应该是16px。你标的是24px。”

她改着改着,忽然笑了。她想起他说的那句话——“你自己发现的,记得住。我告诉你的,记不住。”他明明可以直接告诉她所有问题,但他没有。他一个一个地提,让她自己改。这样下次画手机端设计稿的时候,她自己就会注意。

“好了。还有吗?”

“没有了。”

她如释重负,靠在椅背上,看着天花板。树屋里很安静,只有电脑风扇嗡嗡的声音。她一个人坐在那里,忽然觉得,没有他在旁边,树屋好像变大了。不是真的变大了,是她在感觉里,觉得树屋变空了。

手机震了一下。她拿起来看,是他发的:“画完了就回家。太晚了。”

她打字:“你呢?”

“在图书馆。马上回。”

“好。”

她收拾好东西,关了灯,走出树屋。外面的天很黑,星星很亮。六月的夜晚,蛙鸣声从远处传来,一声一声的,像在唱歌。她走在回家的路上,路灯一盏一盏地从头顶掠过,影子从长变短,从短变长。她踩着自己的影子,一步,一步。以前都是踩着他的影子,现在只有自己。她忽然觉得,一个人的路,很长。

第二天晚上,他们在树屋里碰头。

陆星辞打开电脑,开始写响应式的代码。苏念晚坐在旁边,看着他写。她看不懂那些代码,但她注意到,他写的代码里有一些奇怪的东西——@media,max-width,min-width。她不知道那些是什么意思,但她没有问。她不想每次遇到不懂的东西就问他,她要自己查。

她打开浏览器,搜了一下“@media什么意思”。搜索结果出来了——是cSS3的媒体查询,用于响应式设计。她看了几篇文章,大概懂了。@media就是告诉浏览器,当屏幕宽度小于某个值的时候,用这套样式;当屏幕宽度大于某个值的时候,用那套样式。她看着那些代码,忽然觉得,代码没有她想象的那么难。它只是一套规则,和画画一样。画画是用线条和颜色表达想法,代码是用规则和逻辑表达想法。不一样,但又一样。

“看懂了?”他的声音从旁边传来。

她转过头,看着他。他的眼睛看着她的屏幕,嘴角微微弯着。他知道她在查资料。他看到了她的搜索记录,但没有直接告诉她答案。他在等她自己去发现。

“懂了。”她说。

“那你知道为什么我的代码里有@media吗?”

“因为你要告诉浏览器,不同屏幕宽度用不同的样式。”

他点了点头。“还有呢?”

“还有……你要让网站在手机上也好用。”

他又点了点头。“还有呢?”

她想了想。“还有……你要让我的设计稿变成真的。”

他看着她,嘴角弯了一下。“嗯。”

她低下头,继续看他的代码。这一次,她看懂了。不是全部,是一部分。但那一部分,是她自己看懂的,不是他教的。她忽然觉得,自己好像长大了一点。不是年龄长大,是能力长大。

周六下午,三个人在线上开会。

周明轩在屏幕那头,戴着黑框眼镜,头发还是乱糟糟的。他看了看苏念晚,又看了看陆星辞,笑了。

“苏念晚,手机端的设计稿我看了,不错。”

苏念晚愣了一下。周明轩看了她的设计稿?她以为只有陆星辞看了。她的脸红了。“谢谢。”

“但有几个小问题。”周明轩说,“汉堡菜单的动画时间,你标的是0.3秒。我觉得0.2秒就够了,太快了用户反应不过来,太慢了用户觉得卡。”

苏念晚拿起笔记了下来。“好,我改成0.2秒。”

“还有,图片的懒加载,你标的是‘滚动到可视区域再加载’。这个前端实现没问题,但你要标注清楚,滚动到什么位置开始加载?距离底部多少像素?”

苏念晚又记了下来。“好,我补充。”

“最后,表单的验证提示。用户输入错误的时候,提示信息出现在哪里?什么颜色?什么字体大小?你要标清楚。”

苏念晚低头记着,忽然发现,周明轩提的问题,都是细节。不是大方向的问题,是细节。这意味着,她的设计稿大方向是对的,只需要打磨细节。她抬起头,看着屏幕上的周明轩。

“还有吗?”

“没了。”周明轩说,“改完发给我。”

会议结束了。苏念晚看着笔记本上记的那些问题,一条一条地改。她改完之后,发给周明轩,又发给陆星辞。过了几分钟,周明轩回了一个字:“好。”陆星辞也回了一个字:“好。”

她看着那两个“好”字,忽然笑了。她知道,“好”字后面,是“可以通过了”。但这一次,和上一次不一样。上一次,她画完设计稿,周明轩说“整体不错,有几个小问题”,陆星辞说“可以开始做高保真了”。那时候,她还是一个学生,他们在教她。这一次,周明轩提的问题都是细节,陆星辞没有提问题。这说明,她的设计稿已经达到了他们的标准。她不再是一个需要被教的学生,是一个平等的合伙人。

她靠在椅背上,看着窗外的天空。六月的天,蓝得发亮,云很白,一朵一朵地飘着。她忽然觉得,自己好像真的长大了。

项目进入最后的冲刺阶段。

每天晚上,苏念晚和陆星辞在树屋里待着。他写代码,她画图。树屋里很安静,只有键盘的敲击声和鼠标的点击声。但那种安静,不是无声的安静,是交响乐一样的安静。键盘的敲击声是鼓点,鼠标的点击声是节拍,窗外风吹树叶的哗哗声是背景音,偶尔他们的呼吸声是旋律。他们不说话,但他们的工具在说话。他的代码在说“我在构建”,她的画笔在说“我在描绘”。两种声音交织在一起,像一首没有歌词的歌。

周三晚上,陆星辞写完了一段代码,停下来,看着屏幕。

“怎么了?”苏念晚问。

“卡住了。”

她凑过去看,屏幕上是一段她看不懂的代码。她不知道哪里卡住了,但她知道他的表情——眉头皱得很紧,嘴唇抿着,眼睛盯着屏幕,手指放在键盘上没有动。那种表情,她见过很多次。每次他遇到解决不了的问题,就是那种表情。

“休息一下吧。”她说。

他没动。

“星星哥,休息一下。”她又说了一遍。

他深吸一口气,靠在椅背上,闭上了眼睛。她看着他,忽然想起以前她做题做不出来的时候,他也是这样,让她休息一下。现在角色反过来了。她站起来,走到他身后,伸出手,轻轻按在他的太阳穴上。她的手指很凉,贴在他的皮肤上,像两片冰。她轻轻地按,一下,一下,很慢,很轻。

“你太紧张了。”她的声音很小,“放松。”

他没有说话,但他的眉头慢慢松开了,肩膀也松开了。她按了一会儿,手酸了,停下来。他睁开眼睛,转过头,看着她。

“什么时候学的?”他问。

“我妈头疼的时候,我帮她按过。”

他看着她。“谢谢。”

她摇摇头。“不用谢。”

她回到自己的座位上,继续画图。他转回头,继续写代码。这一次,那段代码很快就改好了。他写完之后,停下来,看着她。

“苏念晚。”

“嗯?”

“你有没有觉得,我们像一支乐队?”

她愣了一下。“什么乐队?”

“你画图,我写代码。你是旋律,我是节奏。”

她看着他,忽然笑了。“那谁是观众?”

“客户。”

她笑出了声。“那客户喜不喜欢我们的歌?”

他想了想。“应该喜欢。因为他们付钱了。”

她笑得更厉害了。她很少听他讲笑话,但他讲的笑话,每次都很好笑。不是笑话好笑,是他讲笑话的样子好笑。他讲笑话的时候表情还是很平静,好像在说一件很严肃的事,但内容却很轻松。那种反差,让她觉得可爱。

项目交付的前一天晚上,他们在树屋里待到了凌晨。

苏念晚画完了最后一张图,陆星辞写完了最后一行代码。两个人同时停下来,同时靠在椅背上,同时看着天花板。

“画完了?”他问。

“写完了?”她问。

两个人同时笑了。她不知道自己为什么笑,也许是太累了,也许是太高兴了,也许只是因为他在笑。她看着他,他也在看她。树屋里很安静,只有电脑风扇嗡嗡的声音。窗外的天快亮了,东边的天空泛起了一抹鱼肚白。

“星星哥。”

“嗯?”

“你说,明天客户会满意吗?”

“会。”

“你怎么知道?”

“因为我们尽力了。”

她低下头,嘴角弯着。她想起第一次画设计稿的时候,什么都不懂,连Figma都不会用。他教她响应式,教她栅格,教她行高怎么算。她画了一版又一版,改了一次又一次。她以为自己做不到,但他一直说“你可以的”。现在她做到了。不是她一个人做到的,是他陪着她做到的。

“星星哥。”

“嗯?”

“谢谢你。”

“不用谢。”

她抬起头,看着他的眼睛。他的眼睛很亮,映着窗外微弱的晨光,和她红红的眼眶。她忽然想,如果现在她说“我喜欢你”,会怎样?但她没有。不是不敢,是时候未到。她要等到项目交付之后,等到客户满意之后,等到所有人都说“你们做得很好”之后。她要让那句话,成为一个完美的句号。

她不知道的是——他也在想同样的事。他在等一个最好的时机,一个最合适的地方,一句最想说的话。他要把那句话,说在最恰当的时候,让她永远记得。

她不知道的是——那个时机,已经很近很近了。近到她下一次抬头,就能看到。

窗外,天快亮了。苏念晚和陆星辞坐在树屋里,一个画完了最后一张图,一个写完了最后一行代码。他们没有说话,但谁都不觉得无聊。因为最好的陪伴,不是无话不说,而是不说话,也不会觉得尴尬。