当前位置: 首页 > news >正文

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

上期周刊我们重点介绍了 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 往期回顾:

  1. 什么是 Design System
  2. 什么是 Design Principles
  3. Components 与 Patterns 究竟有什么区别

相关文章:

  • 敲代码需要一丝不苟,Node静态化,ejs文件里多了一条外联下的Bug问题
  • centos7 虚拟机安装docker-ce-17.09
  • 加权有向图问题2----多源最短路径问题(Floyd算法)和关键路径算法
  • 021——VUE中变异方法 push/unshift pop/shift
  • P1197 [JSOI2008]星球大战(并查集判断连通块+正难则反)
  • 泛型的继承和通配符,同时归纳集合部分的面试点
  • VS 之 InstallShield Limited Edition for Visual Studio 2015 图文教程
  • utf
  • shell 并发进程的例子
  • 新手练练----也做即时通信系统(1)
  • 2017双11技术揭秘—分布式缓存服务Tair的热点数据散列机制
  • 8.不绑定(ngNonBindable)
  • spring boot 2.0之使用spring boot
  • ELK实战之Tomcat的json日志收集
  • 爬虫如何解决验证码的问题
  • leetcode讲解--894. All Possible Full Binary Trees
  • nfs客户端进程变D,延伸linux的lock
  • php面试题 汇集2
  • react 代码优化(一) ——事件处理
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • Yii源码解读-服务定位器(Service Locator)
  • 关于for循环的简单归纳
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 排序算法学习笔记
  • 深度解析利用ES6进行Promise封装总结
  • 应用生命周期终极 DevOps 工具包
  • 用 Swift 编写面向协议的视图
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • No resource identifier found for attribute,RxJava之zip操作符
  • $.ajax()
  • (0)Nginx 功能特性
  • (02)Hive SQL编译成MapReduce任务的过程
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • (四)Controller接口控制器详解(三)
  • (四)linux文件内容查看
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (一)Dubbo快速入门、介绍、使用
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • .NET Core WebAPI中使用Log4net 日志级别分类并记录到数据库
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .NET上SQLite的连接
  • .NET中 MVC 工厂模式浅析
  • @DataRedisTest测试redis从未如此丝滑
  • @GetMapping和@RequestMapping的区别
  • @transactional 方法执行完再commit_当@Transactional遇到@CacheEvict,你的代码是不是有bug!...
  • [ 网络基础篇 ] MAP 迈普交换机常用命令详解
  • [2010-8-30]
  • [ARC066F]Contest with Drinks Hard
  • [ASP]青辰网络考试管理系统NES X3.5
  • [EFI]英特尔 冥王峡谷 NUC8i7HVK 电脑 Hackintosh 黑苹果efi引导文件