Pinapps
首发于Pinapps
你该为产品设计怎样的气质

你该为产品设计怎样的气质

上期周刊我们重点介绍了 Design System 中 Components 与 Patterns 的差异性。相较于 Components,Patterns 关注的是对一系列问题的通用解决方案(建议),更多关注目标、方向以及对设计的直接指导。

在上一期中我们所介绍的 Pattern 更偏向于功能层面,我们也提到还有另一类 Pattern - Perceptual Pattern 对于一款产品的塑造同样也至关重要,这一期周刊我们将重点来聊聊这个 Perceptual Pattern。

什么是 Perceptual Pattern

Perceptual 从字面可以翻译为直觉、感性,Perceptual Pattern 的目的就是设计并向用户传递一个产品的观感,落到具体的设计过程中会体现在视觉、文案、动效、声效等方面。

在「Design Systems」中作者用「家」做了这样一个比喻:

我们每个人的家里都会有桌子、椅子、床、柜子… 虽然这些家具“模块”都一样,但每个人家里的款式、材质、色彩、摆放都不一样,如果再细一些,大家在家里播放的音乐、贴的墙纸也会不一样。 因此大家每个人的家里都会呈现出不同的风格,美式、地中海、日式、欧式… 这些影响风格差异的属性可以归纳起来定义为 Perceptual Pattern。

个比喻综合解释了我们在产品设计过程中经常提及的风格。不过「直觉、感性」这些词稍微有些抽象,不太容易与 Design System 所关注的内容进行对应。

就个人经验来说,我更倾向将 Perceptual 定义为产品的气质。如果将我们日常所做的人机交互想象成人“人”交互,那么这个气质就更好去理解了。

通常情况下我们会从一个人的外貌、谈吐、行为去形成对一个人的印象,让我们觉得他像一个工程师或是像一个设计师。

我找了四个不同风格的人物素材(如下图),如果说他们分别代表女大学生、工程师、设计师、商业人士,我想大家应该都没有太大的异议。如果下面的这位“工程师”聊起天、举手投足来很技术,那么没错,他是一个标准的工程师。

如果以上这些你觉得还不够说服力,那么前些时间火爆在屏幕上的孙八一同学就是一个最好的例子了。

其实不只是「中国有嘻哈」这档节目,在他之前参加的很多地下活动中也都是浓浓的商务风。相较于嘻哈鲜明的着装风格,在没有开口之前所有人都不会认为他是一个嘻哈歌手。

作为娱乐节目,孙八一同学的着装可能是一个卖点;但如果回到产品设计的角度,这可能会将大量的用户拒之门外。无论产品属于哪个业务领域,我们需要做到的是让用户相信在这个领域中我们的产品是专业的,这就是 Perceptual Pattern(气质模式)最需要关注和服务的地方。

在数字产品领域 Perceptual Pattern 可能会包含 Color、icon、illustration、imagery、typography、motion、voice&tone 等待,不过沿着前面的思路(气质),我们可以着重关注以下三个方面。

  • 外貌 - Style
  • 行为举止 - Motion
  • 谈吐 - Voice&Tone

Perceptual Pattern 需要围绕着整体、合理的呈现这些信息的人设而努力。他们不仅仅是一层皮(theme),还是共同为创建人设而形成的相互联系。接下来全文部分(付费部分)我们沿着以上三个方面来分别进行拆解,看看我们应该理解、创建属于自己产品的气质模式。


Design System 是 PinDesign 周刊的一个新系列,基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家,辅助大家的阅读。

加入 PinDesign 会员,获取本期主题「你该为产品设计怎样的气质 - Perceptual Pattern」的全文内容及本系列前三期周刊的赠送。

点击领取 PinDesign 会员计划 50 元优惠券

Design System 系列已更新:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊

文章被以下专栏收录

    我推荐的不仅仅是apps,更是一种态度。 偶尔我也会聊聊和 apps 相关的设计,请保持关注! 微信搜索「Pinapps」