视觉这一章我写得最重。原因是——视觉是绝大多数产品团队的弱项,但它对产品成败的影响,被严重低估。
问 PM "视觉设计的目标是什么",一般的回答是这几个词——美观、大方、大气、好看、符合 VI 标准。
这些都不是视觉设计的目标。
这些是结果,不是目标。一个东西好看、大气、符合品牌规范——这些是用户用完之后的感受,是设计师做完之后的成果说明,但不是设计师做这件事的"目标"。
视觉设计真正的目标只有一个——识别。
更准确地说:让用户在最短的时间里,快速、准确地识别交互对象、判断使用方法。
这是视觉的第一要务。其他所有东西——审美、品牌、调性、风格——都建立在这个基础上。如果用户连这是按钮还是装饰都看不出来,你视觉再"美",也是失败的。
我那时候做产品评审,看视觉稿,第一关从来不是问"好看不好看"。第一关是问——这个用户一眼能不能看明白哪里可以点、哪里是状态、哪里是装饰?如果这一关过不了,设计稿打回去重做,不讨论审美。
识别这件事,听起来低端,实际上是视觉里最难的。一个真正好的视觉设计师,他做的不是"画得多漂亮",是"让信息按对的优先级跳进用户眼睛里"。这件事需要的是对信息层级、对视觉权重、对人眼注意力分布的深刻理解,跟"画得漂亮"完全是两码事。
接下来讲规范。视觉规范我用四个词总结——慎用颜色、对齐、合适且统一的字体、留白。
慎用颜色。这是最容易做错的一件事。
颜色是视觉里最强的信号——一抹红色比所有文字都更先抓住眼睛。所以颜色不是用来"装饰"的,颜色是用来"标记重要"的。
我看过太多产品,主界面上有十几种颜色,每一种都在抢注意力。一个产品如果什么都是亮色的,就等于什么都不是亮色的——用户的眼睛会麻木,所有强调全部失效。
我那时候的原则是——一个核心界面,主色调不超过 3 种,强调色不超过 1 种。强调色只用在你最想让用户看到的那个东西上——通常是主操作按钮。其他所有地方,用灰度的层次来组织信息。
这条规矩听起来保守,但它能把 80% 的视觉烂尾摁住。
对齐。这是看起来最不重要、实际上最重要的一件事。
我看一个 APP 的视觉水平,不看它的图标设计、不看它的插画、不看它的动效——我看它的对齐。
把界面截图放到屏幕上,我用手指比划。一个有视觉素养的团队,界面上所有相邻元素的边、轴、间距,都是严格对齐的。这一种产品看起来"干净"——这种"干净"不来自任何具体的元素,它来自对齐本身。
而绝大多数团队的视觉,问题就是不对齐。这个标题左边距 16,旁边的副标题左边距 18,下面的按钮左边距 20。差几个像素,人眼说不出哪里不对,但能感觉到"乱"。这种"乱"的感觉是不可挽救的——你视觉细节做得再多,只要有一处不对齐,这种"乱"的总体感就在那里。
强制对齐带来三件好事——更轻松的识别、更轻松的交互、更明确的反馈。还有一个隐藏的好处——留白带来的文艺感。一个严格对齐的界面,留白就自然出现了,而留白就是高级感的来源。
合适且统一的字体。字体下面专门讲。
留白。这是中国团队最不擅长的一件事。
我们的视觉传统里有"留白"二字,但放到产品 UI 里,几乎所有团队都做不到。原因是——业务方总想塞东西。塞一句运营文案、塞一个 banner、塞一个营销入口、塞一个"猜你喜欢"。每一个 stakeholder 都在为自己的诉求争取像素。结果就是,界面上每一寸都被填满,没有一处可以让眼睛休息。
我在评审会上经常说一句话——留白不是"还没填的地方",留白是"被选择不填的地方"。这两件事完全不同。前者是没做完,后者是有意识的克制。一个真正成熟的产品设计,留白是"设计出来"的,不是"剩出来"的。
字体单独拿出来讲。
字体在 UI 视觉里的作用比绝大多数人意识到的要大得多。我归纳过五个作用——
准确的信息识别。字体首先要"读得清"。一个标题字看不清,所有的视觉设计都是空谈。在小屏幕上、在弱光环境下、在用户匆匆一瞥的时候——你的字体能不能站住,是产品识别的底线。
流畅的表达内容。字体不只是"看得清",还要"看得舒服"。同样一段话,用不同的字体、不同的字号、不同的行距来呈现,阅读体验天差地别。一个好的字体配置,让用户读三千字也不累;一个差的,读三段就想关掉。
清晰的信息层次。字体是建立信息层级最有力的工具——通过字号、字重、字形的对比,标题、副标题、正文、注释,在用户眼里自动分层。绝大多数产品的信息层次是乱的,根源就在字体使用上。
高效的吸引注意力。一个粗体大字,可以瞬间把用户的视线抓过来。这是字体的"刀刃"功能——但用太多,就钝了。
和谐的视觉风格。字体本身有调性。Helvetica 是中性、现代、克制的;Garamond 是古典、文学、慢的;Didot 是优雅、高级、奢华的;Futura 是几何、未来、机械的——这些调性会传染到整个产品。你选什么字体,等于在告诉用户你是什么样的产品。
我那时候给团队科普过几款经典英文字体——
Didot:优雅,高对比度的衬线体,用在高级品牌、时尚产品上特别合适。Vogue 杂志用这一款。 Futura:几何感强,德国的现代主义字体,Nike 的部分识别用这一款。 Garamond:法国古典衬线体,书籍排版的经典。 Avant Garde:七十年代的几何字体,极简、强烈。 Helvetica:中性、克制、几乎所有现代品牌的默认选择。 冬青、兰亭、华文、苹方:中文字体里几款主力黑体。在视觉风格上各有差别——苹方是苹果定的,兰亭是常用商业体,冬青是日本风,华文是中文老牌。
一个产品的中英文字体搭配,直接决定它的"气质"。我那时候花在字体上的功夫,不少于花在交互上的功夫——因为它一旦定错,后面所有的视觉都是错位的。
这一句话我反复在团队里念——字体不同,阅读效果显著不同。
很多团队的工程师在写界面的时候,对字体随手就写——用系统默认字体、随便选一款"看起来差不多"的。但同一段文字,你用 Helvetica 写、用 Times 写、用 Comic Sans 写、用 Impact 写——四种完全不同的阅读体验,完全不同的产品调性。
中文也一样。同一句"今天下午三点见面",用宋体写、用黑体写、用楷体写、用幼圆写——四种完全不同的感觉。
字体本身就在传递信息。它在用户读到内容之前,已经先告诉了用户"我是什么样的人在跟你说话"。一个对字体没有感觉的团队,等于一个不会说话的团队——他们的产品永远长一张麻木的脸。
最后讲一件最朴素的事——怎么提高视觉水平。
我的答案就一句:视觉搞不好,还是看的少。
视觉是一种"看得多了自然就懂"的东西,跟语言一样。一个视觉水平不够的人,你跟他讲再多原则、给他看再多书,效果都有限。他真正需要的是看——看大量的好东西,看到他自己看一眼就能判断"这个不对"。
我那时候逼团队做的一件事:每周看 50 个好产品的截图。不是看 50 个产品的功能,是看 50 张截图——看人家是怎么排版的、是怎么对齐的、是怎么用色的、是怎么留白的。看的过程中我不要求他们写感想,我只要求他们看。看半年,审美就上来了。
看什么?三类东西——
第一,看顶尖的国际产品。苹果原生应用、谷歌系产品、Stripe、Linear、Notion、Things、Bear——这些产品的视觉是有标杆意义的。你看完它们,你的眼睛就有了一把尺。
第二,看平面设计和印刷品。视觉的根在平面设计——海报、画册、杂志、书籍封面、唱片封套。看十年的 D&AD 获奖作品、看 The Society of Publication Designers 的年鉴、看东京 TDC 的获奖、看上海图书馆的进口杂志区——一个真正懂视觉的产品人,他的视觉教养绝大部分来自屏幕之外。
第三,看建筑、看空间、看自然。视觉的最高境界是空间感——比例、节奏、层次、留白。这些东西在建筑里、在自然界里、在那些做得好的空间里,都能找到。看产品 UI 学不到这一层,要去现实世界里看。
视觉这件事没有捷径,要长期看。但只要你愿意花时间在"看"上,你的视觉水平会一直涨。这是一个回报最稳定的投入——比读任何方法论书都靠谱。
我对一个产品经理是不是真的爱产品的判断之一就是——他平时刷不刷 Dribbble、Behance、Pinterest,他逛不逛美术馆,他买不买好的纸质杂志。如果他对"看"本身没有兴趣,他做产品的天花板就在那里了。