About a Designer (5) “基础”不简单

Beforweb · 公众号 · VR · 2020-10-18 13:39

正文

Beforweb 重新开动的时候说起“About a Designer”也会继续，那么我们继续。

前情回顾下？去年 12 月完成了第一章内容，关于我“从手机销售到网页设计师”的转行历程——从第一代触屏智能手机，到野蛮自学立志转行，到艰难维生进退维谷，最终幸运地抓住机会成为网页设计师，故事告一段落。

然而在最初的“ 广而告之 ”当中，预计会叨念的还不止这些；接下来的更多内容应该会试着围绕一个个话题展开，而不再以流水账大故事作为驱动了。

About a Designer

“基础”不简单

几周前收到一份 widget 的设计稿。形式很简单，medium 规格，上下两组内容单元，各自包含一行标题和一行描述，逻辑如下：

标题 A
描述 A

标题 B
描述 B

然而我第一眼看到之后的印象却是：

标题 A

描述 B
标题 B

描述 C

很明显，“描述 A”本应与“标题 A”保持较近的距离，形成逻辑上的分组；但设计稿中的“描述 A”却和“标题 B”过近，以至于使人误认为它是“内容 B”的描述信息；而原本的“标题 A”与“描述 B”被错误的距离所分隔，于是形成了各自独立的感知。

毕竟来自正经产品团队，设计师大体具备最基本的专业度，这类基础性的问题理应避免。每每遇到这类情况，我总会想到那本《写给大家看的设计书》。

我的第一本“设计书”

正如在上一篇当中聊到，我在 2006 年 4 月加入博客大巴，成为一名网页设计师。当时的主要工作是设计制作博客模板——即便十四年之后的如今回想起来，这份工作也仍然很棒——职责之一是设计模板的主题外观，天马行空挥洒想法，只要气质符合博客大巴的整体基调；职责之二就是自力更生完成所有前端代码，还原设计方案，并且兼容包括 IE 6 在内的各种主流浏览器——如此具有综合性与挑战性的工作。

如今只能通过历史快照工具来回顾十四年前的工作成果

作为一个“一定要很努力”的新手，在第一年里，我更多是在游泳中学习游泳——设计方面，参考着 CSS Zen Garden 等网站进行了大量的模仿练习，无论是“感觉”还是PS、Illustrator 的水平都有了不少提升；前端方面，“标准化 Web 开发”方面的书也正经开始学习起来，转手实践到自己的设计里，页面写得越来越健壮灵活。但所有这些“学习”，更像是在忙着应对这份让我感到非常兴奋而又陌生的工作；我仍然没有去学习一些真正意义上关于“设计”的东西。

博客模板这种东西，主题风格与视觉创意只是“设计”当中的一部分；真正决定了用户是否愿意长久使用的，还是文本内容方面的呈现质量，包括日志本身以及侧边栏里的信息等等。在“应对”这份工作一年多之后，我越发频繁地感到内容部分总是哪里不对。正像第二篇里所说，“对我来说，学任何东西似乎都是持续往复着这样的循环…先上手，再矫正收归，继而保持迭代”，于是我估摸着到了该收归经验和补充理论知识的时候了。

学习理论自然从读书开始。买来一批“设计书”，每晚约 10 点至夜里 1 点，坐在客厅一边陪着一只叫做斑斑的幼猫…一边狂读——2007年秋天，刚刚开始养斑斑，出于安全考虑先将它和推推隔开，单独养在客厅；又怕隔离太孤独，于是这样每晚坐在客厅读书，也算给它个陪伴。上手的第一本便是《写给大家看的设计书》，约莫当时从书名判断够初级，缺乏学科背景的人也不会有什么阅读障碍一类。

当年的幼猫，如今也已十三岁

回头看来突然发现，自从养猫开始，学习方式也健康了很多嘛，不再像卖手机时期那样摧枯拉朽的自毁了；平静的甚至有些禅意嗯。

印象里就是开悟了，“原来是这么回事哦”这样。“亲密性”，“对齐”，“重复”，“对比”——读过这四点简单的原理，抬头再去看网页，博客，包括书籍杂志、印刷品——凡是涉及通过文字内容传递信息的载体，原来里面都蕴含着这些最基本的规则——原来这些全部都是有意设计过的；而那些设计不当的内容，其中的问题也变得一目了然，包括自己在第一年里设计的那些博客模板——要么是内容表现出的分组关系没有正确体现它们之间的逻辑关系；要么是文本的对齐方式缺乏统一性或有意的差异性；要么是没有通过正确的重复模式来传达信息的类型逻辑；要么是没有综合运用多种设计元素来构建信息的层次与对比，进而难以体现内容的主次关系。

而当我试着遵照这些原理规则去调整页面里的文本内容样式时，我发现了三方面的收益：

以上这些问题逐渐得到解决，页面看上去越来越“对”了。
这让我开始更多地从目标用途、重要性和逻辑关系的角度来打量各种类型的信息，而不再只是简单地把它们看作“文本”。
从前端实现的角度，也越来越理解元素语义的重要性——信息的逻辑关系一定是可以体现在高度语义化的 HTML 代码里的。

坦诚讲，那时我甚至不确定也并没有很在意这本书里的内容是否真的属于所谓的“设计原理”，因为它们看起来太朴实无华且显而易见了。但我非常确定这些东西会让页面内容不仅看起来更“漂亮”，同时读起来也更轻松，更容易快速地甚至是下意识地理解信息的性质与含义。

想到 Mike Stern 在 2017 年 WWDC 上讲过的一句话，“或许你会觉得这些原理看起来非常基础或是显而易见，但在很多时候，意义最为深远的，往往正是那些看上去非常简单的东西。” 就是这么回事。这里也为各位推荐“ 图文版 WWDC 设计分会：基础设计原理 ”这套内容。

“基础设计原理”，WWDC 2017，Mike Stern.

基础问题？

直到如今我也认为以上这些基础到有些朴素的“规则”是设计师最基本的职业能力之一。然而事实是，那之后的十四年间，直到如今，我们仍然会时不时就在这样那样的产品界面或其他信息媒介当中发现大大小小的脱离不开这些基础范畴的问题，包括本文开头提到的情形。

我从不愿把原因归结为“设计师的基本能力缺失”一类，理由很简单——我是一个依靠胡乱自学和莫名其妙的运道从手机销售转行到互联网设计的门外汉， 我在很长一段时间内都真心相信我所具备的意识与能力应该是这个行业的下限，是所有设计或相关专业出身的设计师所必然具备的 ；我更愿意相信这类状况多数是因为如今的设计师们必须将更多精力放在相对“高阶”的问题当中，例如利用缜密的数学手段研究用户行为，终日处理复杂的业务逻辑和服务流程，或是打磨风格化的视觉效果等等，因而在无意中忽略了一些相对基础的东西。

About a Designer (5) “基础”不简单

正文

请到「今天看啥」查看全文