一、什么是 Linear 风设计？依旧是多图长文一篇，请酌情阅读。设计师都是视觉动物，废话不多说，上图：这是指一种在大面积暗色背景下，使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体，外加流畅克制的微动效来组织和修饰界面元素的网页设计风格。

一、什么是 Linear 风设计？ 依旧是多图长文一篇，请酌情阅读。

设计师 都是视觉动物，废话不多说，上图：

这是指一种在大面积暗色背景下，使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体，外加流畅克制的微动效来组织和修饰界面元素的网页 设计风格 。

其独特又神秘的锋利质感，就是为了体现界面所承载产品的专业感。这种风格早已在国外设计圈流行多时，很多产品也都纷纷推出了 Linear 设计风格的网页。

大家可能在各种概念设计稿上见过 Linear 设计的影子，只是叫不出它的名字，或者并不知道这种风格源自于同名的一款 SaaS 软件。

更多设计风格科普：

超全总结！金刚区图标设计的 10 大风格 金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，也是风格切换最为活跃的。

阅读文章 >

二、Linear 首先是一个产品 老规矩，先从产品背景讲起，如果你只对设计部分感兴趣，也可以跳到下一节。但适当了解一下产品背景，会对掌握 Linear 设计风格更有帮助。

1. 为谁设计

“Linear 的设计风格是为了符合软件工程师对于「专业」的要求。黑色背景、灰色 Inter 无衬线字体、一个紫色渐变圆形 logo，基于大多数工程师都很喜欢的暗色编程环境，最大限度的减少设备能耗和视觉疲劳。”

以上出自 Linear 的 CEO （前 Airbnb 的首席设计师） Karri Saarinen 的一段访谈。他很好的解释了 Linear 的设计初衷，也道出了 Linear 其实是一款专门针对软件开发的协同管理的工具，目标用户主要是软件开发工程师和设计师。

Linear 应用局部图

Karri Saarinen 十分推崇 Apple 的设计美学和产品标准。Apple 对于设计的不懈追求，严格的成品把控，都深深启发着他们这一代人。他希望 Linear 的产品设计将来也可以与 Apple 比肩。

国内互联网刻板印象之一就是：程序员或工程师都是格子衫加兜帽衣，不善言辞，也没有审美要求。

那为什么一款主打技术受众的软件需要把自己的设计去跟 Apple 对标？难道是因为国外的开发者更懂时尚？

其实无关国内外，优秀的开发者都是对设计很敏感的，要说有哪个开发者代码写得很棒，但对设计却毫不在意，这我是不信的。像 Linear 这样一款重视美学和追求极致体验的协作工具，就是为他们量身打造。

当然，要与 Apple 比肩，听起来是有些狂妄！Linear 的各种产品标语更是傲气冲天，比如「Linear 是构建产品的更好方式」「与你以往使用过的任何工具都不同」「只为世界上最好的产品团队提供支持」等等。

不过了解下 Linear 的发展路径，感觉他们「狂」一点倒也不是不行。

2. 发展之路

Linear 创立于 2019 年 4 月，由 Karri Saarinen、Jori Lallo、Tuomas Artman 三位芬兰籍创始人在美国联合创办。产品一经发布就大受关注，短短两个月，其内测候补名单上就拥有了 10000 名用户。

Linear 三位联合创始人

Linear 的前身是 Lallo 和 Saarinen 在旧金山开发的协作书签系统 Kippt，后来被知名加密货币交易公司 Coinbase 收购，Saarinen 和 Lallo 也在 2014 年加入了该公司并分别担任设计主管和软件工程师，只是他们都未等到 Coinbase 上市就已离开去创业。

2019 年 11 月，红杉为 Linear 领投了 420 万美元种子轮融资；2020 年 12 月，红杉再次领跑并为 Linear 筹集了 1300 万美元的 A 轮 融资。

从 2021 年实现盈利到 2023 年，Linear 的银行现金已高于种子轮加 A 轮 融资的总额。目前已拥有数千家客户，包括初创团队和企业级用户。

3. 产品形态

Linear 有网页版和桌面端应用，可以跨平台同步使用，不限于 Mac、Windows 和手机、平板等移动设备。暂时不支持 Linux 桌面端，但可以使用网页版。

虽然没有移动端应用，不过最近加入的设计师 Alex Cornell 就是专门负责 App 设计的，想必也是在规划中了。

当然，Linear 的设计重心还是在于打磨桌面端体验，毕竟 B 端 产品主要使用场景并不在移动端。

另外，Linear 也支持离线模式，无需做任何额外操作，不用担心断网数据丢失。数据存储方面，使用的是谷歌云加密服务，服务器在美国。

应用下载页

4. 功能特色

Linear 的服务市场主要面向北美和欧洲，服务器在国外，在国内几乎没有使用场景。

毕竟国内也有不少项目协同工具，中小团队用 Teambition、Worktile 或者 Tower 足够了，要求不高的用石墨、语雀、飞书、Notion 这类文档工具也都可以 cover 日常需求。大厂更不必说，出于数据安全考量，基本都使用内部自研系统。

所以这里，我们不花太多篇幅来探讨 Linear 的功能细则，了解一下即可。

既然叫 Linear，那么产品肯定就是要强调线性解决方案的。敏捷开发已经过时，Linear 打造的是现代软件开发的新标准。

首先，一切操作都可以通过键盘组合键来进行，内置全局命令菜单，50ms 的实时同步速度，内置专为现代化软件团队打造的工作流。

其次，可以快速创建任务并在上下文中讨论问题，可以无缝切换列表和看板视图并支持自定义，支持周期管理和跨团队 roadmap 规划。

再者，集成了专业开发组件并能联动各大代码、数据、设计平台，任务可无缝衔接，使软件开发实现自动化。

最后，Linear 还提供了设计精美的高级报告和分析功能，支持数据导出。

官网有详细介绍和演示，这里不一一展开讲述了。

不过，我们倒是可以通过 Linear 的「Roadmap」设计来感受一下其功能考究程度。

Linear 的 roadmap 不光设计得很漂亮，还非常灵活实用。你可以在 timeline 上随意拖动任务条来调整优先级，也可以通过拖拽任务条来改变日期跨度。此外，系统内置的各种任务状态和属性图标也非常精致。

Roadmap

另外，Linear 还有一个类似 Apple 人机交互指南的使用准则：「Linear Method」，不同于使用文档，更偏重理念性，感兴趣也可以去看看。

Linear Method

5. 定价策略

大多数 SaaS 软件都会提供免费版本，Linear 也不例外。

只是不同于其他产品会对免费版本做各种功能阉割。Linear 的免费版和收费版差别主要在管理权限上，免费用户也可以使用其大部分核心功能，团队成员数同样没有上限。

具体收费：标准版可按月支付：8 美元/月，适合成员人数在 50 人以下；超过 50 人，建议选择升级版，按年计费：14 美元/月。

另外，客户订阅费用的 1% 会通过 Stripe Climate 捐出，用于助力新兴除碳技术的发展，帮助去除大气层中的二氧化碳。所以也是一家很有环保意识的企业了！

6. 设计团队

Linear 背后是一个仅 30 人的小型创业团队，团队成员分布于各个国家，全部远程协作。

虽然 CEO 自己也是设计师出身，但目前已经不再负责设计执行。设计团队现由三名专职设计师组成，负责网页和桌面端的是：首席设计师 Adrien Griveau 和设计师 Edgar Ambartsoumian。

另一位是新加入的移动端设计师 Alex Cornell，曾是一位在 YouTube 上活跃过的音乐人，他入职后的第一个项目是做数据功能宣传视频，精致流畅的动画结合特制的音效，视听体验非常美妙，这部分后面会再具体讲到。

不同于我们之前了解的 Bento 和 Arc 那种花活很多的团队风格，Linear 的团队气质和他们的产品如出一辙：严谨沉稳但又很独特。

其独特在招聘启示上就可以窥见一二，比如设计师的 JD 里要求必须讨厌「A/B 测试」，比如工程师招聘时警告说自己的团队规模超小但素质极高。

另外还有一个很独特的地方就是：Linear 的设计师不对设计稿进行图层命名。按说初级设计师往往被教育最多的就是：图层一定要命名好，以方便与他人对接。

Linear 设计文件图层截图

从上图这张公开的设计稿里我们可以看到，设计师不仅不命名图层，在 Figma 里甚至不会对元素做框架化和组件化处理，都是简单粗暴的编组、编组、再编组。这又很不符合我们的 Figma 使用认知。是不是觉得能做出一流设计的团队竟然会这么「不专业」？

团队的解释是：Linear 的设计稿并不在设计师之间对接，专人专项，设计稿只和开发人员对接。这在网上一度引起争议，有些设计师表示这很不专业，有些则认为设计稿落地结果更重要，不用太在意形式。

但老实讲，如果对接时拿到图层结构混乱，命名不规范的设计文件，确实会很头大。国内设计团队大部分都做不到专人专项，一份设计稿可能要在不同设计师之间经手多次，Linear 这种习惯咱就不学了！

7. Linear 和 Arc

读过我文章的朋友，都知道 Arc 这款浏览器。与 Arc 一样，Linear 也是优先考虑键盘操作的，在 Linear 应用中大部分操作都可以完全用快捷键来进行，这能大大提升操作效率，也很符合开发者的工作习惯。

去年 3 月份，Linear 应用程序也集成了 Arc，支持在 Arc 浏览器命令栏键入直接创建 Linear 任务。其官网更新日志中毫不掩饰对 Arc 的推崇，称其和 Linear 一样，速度极快、设计精美！可谓是英雄惜英雄了。

三、Linear 还是一种设计风格 “我们一直想把 Linear 设计得很漂亮的原因之一是：如果你有一个漂亮的项目管理工具，那么任何东西都可以变得漂亮。”

这是 Linear 的联合创始人 Tuomas Artman 对”项目管理工具为何要如此注重视觉设计“的解释。

Linear 称其设计是像素级，高精度，优雅 UI 和一流性能的绝佳组合。倒也不觉得这算夸大其词，因为无论官网还是应用界面，都挑不出任何设计细节问题。

查看其官网 CSS 样式会发现：界面上的渐变背景，发光特效甚至噪点效果都是代码实现；位图切图也采用了体积更小的 WebP 格式，矢量图形则完全采用 SVG 格式，能用代码实现的就不用切图；代码层面大量应用了 mask-image 属性和 radial-gradient 以及 linear-gradient 等渐变函数；此外还有大量的常规动效和交互动效。

这样的实现策略，很大程度上规避了切图所带来的细节问题，但对产品性能又会是不小的考验，需要有技术团队的认可和鼎力支持才行。不然，想把这种风格的设计应用在交互层面上，是很难单靠设计师自己去推进的。

图中星空背景由 SVG 切图结合代码来实现

下面就通过一些界面展示图，来直观感受 Linear 的设计风格：

1. 官网界面展示

产品展示页局部图

页面交互动效

页面常态动效

招聘页面主视觉

自述页面

这个由首席设计师 Griveau 操刀的自述页面，主插图复刻了 iMac 的前身 Macintosh 的外观样式，内容展示结合视差滚动创意十足。

实时数据服务页面

网页地址： https://linear.app/features/insights

这个页面配上声音，浏览体验太美妙了，要使用 Chrome 或 Arc 打开，别的浏览器可能无法播放。内嵌视频就是前面提到过的新晋设计师 Alex Cornell 来到 Linear 后的首秀，动画大部分在 AE 中完成，视频后期用 Premiere 剪辑，Alex 说自己大概制作了将近 100 多个小时的动画。

2. 应用界面展示

Linear 应用内工作台样式，弹出的浮层，背景都做了半透模糊处理。

Linear 应用内截图

Linear 系统还内置了至少 8 款界面皮肤供用户选择。

用户也可以自定义主题，可以在开源网站 linear.style 上查找更多主题。

但主题不能多端同步，而且只能设置自己在使用的应用程序皮肤，团队成员看到的还是他自己的主题样式。

3. 活动界面展示

Linear 去年年终推出了项目总结活动页，用户不仅可以预览到 Linear 的年终总结数据，还可以一键生成自己团队的项目总结。

Hero Image 的动效不是一整个 gif 动图或者视频，而是在静态切图上叠加了一层动态点阵滤镜，打造了一种做旧失真的故障风视效。

滚动视差交互结合精美的可视化数据表，体验超级赞。数据图形全部采用 SVG 格式，点击按钮还可以复制完整图片。

四、拆解 Linear 式设计思路 看到这里，我们已经很了解 Linear 式设计风格了。

光说不练假把式，请设计师打开 Figma，来一起拆解下 Linear 的设计思路（需要具备 Figma 操作基础）。

我们先来学习下 Linear 是怎么做多色渐变融合背景的：

第一步：新建一个矩形，给它添加 angular（角度渐变 ），按你喜欢的色值来添加。

第二步：编辑 angular 的色值，你可以调整手柄来选择渐变的角度。

第三步：给这个矩形添加图层模糊属性，参数可随意设定。

第四步：给矩形添加 mask。

第五步：复制一层渐变矩形，按你喜欢的风格选择图层叠加样式，并适当调整不透明度。

第六步：调整复制层的 angular 手柄来调整两层渐变融合的效果，并适当调整图片角度。

OK，一个专属于你的多色渐变融合背景诞生了！

小试牛刀，感觉如何，简单不？

趁热打铁，我们再来挑战复刻一下 Linear 旧版官网 Hero Image 里的应用图标：

查看样式会发现，此图标只在顶层贴了张 SVG 格式的镂空 logo，其他都是用代码实现，一共分为 4 层。

旧图标结构图

下面，打开 Figma 继续跟我操作：

第一步：新建一个圆角矩形描边框，这里有一个关于设置 iOS 级别平滑圆角的小 tip，操作见以下动图演示。

第二步：添加渐变色和模糊值，我们前面已经做好了一张渐变图，可以直接复制它的属性过来。

第三步：添加一个等比例圆形，复制渐变和模糊值

第四步：复制矩形框，添加填充色，复制渐变和模糊值。

第五步：放上镂空 logo，完成！

打开旧版官网，我们还能看到应用图标下会出现类似电影开场的激光动效，其实他们一开始只想做一个点亮图标的简单动效，考虑到是首次发布，要留下记忆点，就采用了更显著的效果。

网页地址： https://linear.app/releases/2020-12

旧版官网动画截图

另外这版官网从设计构想到实施，只用了一周时间，执行力和完成度之高也是让人佩服。

现在的官网 Hero Image 使用入口按钮取代了应用图标的位置。这是因为，一方面他们不想靠太多的视效来干扰用户浏览官网，还是以实用为先。另一方面知名度和市场既然已经打开，找来官网的大部分人都是想要快速进行注册和使用，还是要以效率为先。

五、Linear 式网页制作实操 最近正好跟 Framer 官方教程学了 Linear 官网的流光小动效。

趁热打铁，再来复刻一下（需要具备 Framer 软件基础）。

可以先在 Figma 里设计完成界面，再通过 Figma to HTML with Framer（插件加链接） 插件导入到 Framer 里制作，使其成为真正可交互的网页，全程零代码。

篇幅原因省略界面制作部分，源文件和插件贴在文末，可以在 Framer 里打开跟我一起做：

Framer 内界面全貌

第一步：紧贴截图右上角，新建一个宽 100px，高 1px 的矩形；布局选择 absolute （绝对定位）；填充色选择横向渐变，色值区间：#5E6AD2，0%～#6875E8，80%。

第二步：选中矩形，在右侧属性栏点击 effect（效果）；在弹出菜单里点选 loop（循环）；选择 delay（延迟）3 秒，为每次的循环增加一个缓冲时间；scale（比例） 设为 1。

第三步：矩形需要向右水平移动，所以我们需要设置 offset （移动路径）的 X 轴坐标参数，可以边点击步进器向上箭头边进行预览，顺势给矩形敲定一个合理的退场位置。

第四步：更改矩形的 opacity（不透明度），好让它以淡出的形式退场。这里直接把 opacity 的参数改为 0 即可。

第五步：然后设置 transition（过渡动效），缓动选择 ease out（缓出），把动画播放时长改为 1.5s。

预览一下，动画每隔 3s 播放一次，播放一次耗时 1.5s。

第六步：因为我们需要做出流光沿截图外边缘滑动的效果，所以在截图的纵向上也需要添加一段渐变矩形。

可以直接复制横向矩形，再把宽高参数对调，然后因为是向下移动，所以要设置 offset （移动路径）的 Y 轴坐标参数。

因为要制造流动的感觉，所以两段渐变不能同步进行，所以把 Delay 的时间改小一些，比如改成 2。其他操作都一样，篇幅原因，这里就不重复了

然后点击右上角蓝色「Publish」按钮，更新一下，发布完成！

现在你已经做了一个真实的 Linear 风格的网页了，去浏览器里看一看效果吧。

操作十分简单，但效果却非常显著，小小流光动效大大提升了页面质感。

好啦，到这里，你已经会做 Linear 式设计了，那就愉快地应用到设计工作当中吧，相信一定会为你的作品锦上添花的。

六、还有哪些 Linear 风产品？ 采用 Linear 设计风格的网站和应用其实都有一个专属的名称叫做：Linears。

下面就来看看都有哪些不错的 Linears 值得我们学习借鉴！

1. Raycast

首推 Raycast，一款我自己在用的 Mac 上的效率工具，类似 Mac 原生的 Spotlight，听名字都知道它也是 Linear 那挂的。Raycast 有强大的插件社区，目前产品也已接入 AI 功能，正在内测中。

Raycast 官网

Raycast 的设计也是自成一派，每打通一个应用就会为其重设计一款 Raycast 风格的应用图标（犹记得当年锤子手机也是这么干，时光啊！），包括当时给 Arc 设计的这个图标一放出来，也是立马就被刷屏了！

Raycast 的官网设计文件可以在 Figma 里打开来看一下细节：

切换到轮廓模式，可以看到设计图是相当复杂的，层级很多。

2. Cron

Cron 是一款连续两年获得 Product Hunt 金猫奖的日历应用，号称是为专业人士和团队打造的下一代日历。也是我自己在用的产品，用户体验不错，网页端使用需要在官网申请候补。

Cron 官网

这款应用目前已经被 Notion 收购了，跟 Arc 也是好基友（数数 Arc 到底有多少好基友），最近 Arc 浏览器的固定标签也支持了对 Cron 进行预览。

Notion 发推晒自己的好基友

3. FEY

一个投资管理桌面应用程序，官网做得也很有质感，背后团队是 Narative，一个远程协作的独立工作室。

Narative 团队官网

4. Linears.art

一个专门搜集 Linears 的网站，需要更多灵感可以去逛逛。

总结一下 来复习一下，前面我们了解了 Linear 这款产品，一起拆解了 Linear 的设计思路，并对其设计进行了复刻实操，最后又欣赏了一些 Linear 风格的产品。

既然学习了 Linear 的设计风格，也更应该学习其背后先进的产品理念。

Linear 的 CEO 认为，当下软件市场竞争激烈，所有的产品团队实际上都是边冲刺边工作的，大家都在追求增长，几乎没有精力去打磨设计，造成产品同质化严重又毫无生气。

反过来，无法在功能上提供太多实用价值的产品，又会通过堆砌各种有趣的设计元素来转移注意力，造成过度设计，给用户的操作铺满障碍，让人不知所措。

如何兼顾设计体验与实用性是创新型产品必须去考虑的事情。Linear 给很多产品都打了样，也帮很多初创产品树立了信心。

这里再插播一下，前段时间硅谷银行危机导致很多初创公司受到影响，Linear 则自发向初创公司（即使不是 Linear 的客户）无偿提供借款，以帮助他们临时过渡，格局之大也的确值得称道。

也许做一款设计精美、性能卓越、有格局讲格调，又能平衡好产品体验和商业价值的产品。并不在于雇佣多少人分多少组，不在于讲多少 PPT 和开多少会，更不在于打不打卡坐不坐班，甚至不在于设计稿要不要给图层命名。

只要做这件事的人都是专业的，就足够了！

学习资料：

提醒一下，互联网产品迭代快，所以文章内容具有时效性。仅能保证文章发出时，相关内容和图片都是最新的，非必要不对内容进行更新。若对产品感兴趣建议收藏以下地址，筛选了学习资料一并贴出，请自行拓展阅读。

Linear 相关资料

Linear 官网 Linear 旧版官网 帮助文档 使用准则 有趣的自述文件 实时数据服务页面 设计精美的活动页面 年度总结活动页面 YouTube 账号 CEO 讲述设计对初创公司的重要性 针对 Linear 创始人的访谈 Linear 风格网站

Raycast 官网 Cron 官网 FEY 官网 Linears.art Framer 相关资料

Framer 官方教程 Figma to HTML with Framer 插件 文中的 Framer 设计文件 文中的 Framer 动效官方教程 文中涉及图片格式和 CSS 属性

WebP：

https://developers.google.com/speed/webp?hl=zh-cn https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types https://github.com/Bulandent/blog/issues/17 SVG：

https://flaviocopes.com/svg/ https://developer.mozilla.org/zh-CN/docs/Web/SVG 蒙版属性：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image https://css-tricks.com/clipping-masking-css/ 渐变函数：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient 噪点效果：

https://juejin.cn/post/7130053304113889311

ControlNet 的作用是通过添加额外控制条件，来引导 Stable Diffusion 按照创作者的创作思路生成图像，从而提升 AI 图像生成的可控性和精度。在使用 ControlNet 前，需要确保已经正确安装 Stable Diffusion 和 ControlNet 插件。如还未安装，可以参考这篇文章...

ControlNet 的作用是通过添加额外控制条件，来引导 Stable Diffusion 按照创作者的创作思路生成图像，从而提升 AI 图像生成的可控性和精度。在使用 ControlNet 前，需要确保已经正确安装 Stable Diffusion 和 ControlNet 插件。如还未安装，可以参考这篇文章中的教程进行安装部署：

超详细！AI 绘画神器 Stable Diffusion 基础教程 一、AI 绘画工具的选择与运用 1. 工作场景下 AI 绘画工具的选择 目前文生图的主流 AI 绘画平台主要有三种：Midjourney、Stable Diffusion、DALL·E。

阅读文章 >

目前 ControlNet 已经更新到 1.1 版本，相较于 1.0 版本，ControlNet1.1 新增了更多的预处理器和模型，原有的模型也通过更好的数据训练获得了更优的性能。以下我做简要梳理，想要了解更多内容可以参考作者的文档： https://github.com/lllyasviel/ControlNet-v1-1-nightly

ControlNet 的使用方式非常灵活，既可以单模型应用，也可以多模型组合应用。清楚 ControlNet 的一些原理方法后，可以帮助我们更好的提升出图效果。以下通过一些示例，简要介绍 ControlNet 的实际用法。

一、ControlNet 单模型应用 1. 线稿上色

方法： 通过 ControlNet 边缘检测模型或线稿模型提取线稿（可提取参考图片线稿，或者手绘线稿），再根据提示词和风格模型对图像进行着色和风格化。

应用模型： Canny、SoftEdge、Lineart。

Canny 边缘检测：

Canny 是比较常用的一种线稿提取方式，该模型能够很好的识别出图像内各对象的边缘轮廓。

使用说明（以下其它模型同理）：

展开 ControlNet 面板，上传参考图，勾选 Enable 启用（如果显存小于等于 4G，勾选低显存模式）。 预处理器选择 Canny（ 注意： 如果上传的是已经经过预处理的线稿图片，则预处理器选择 none，不进行预处理），模型选择对应的 control_v11p_sd15_canny 模型。 勾选 Allow Preview 允许预览，点击预处理器旁的?按钮生成预览。 其它参数说明：

Control Weight：使用 ControlNet 生成图片的权重占比影响（多个 ControlNet 组合使用时，需要调整权重占比）。 Starting Control Step：ControlNet 开始参与生图的步数。 Ending Control Step：ControlNet 结束参与生图的步数。 Preprocessor resolution：预处理器分辨率，默认 512，数值越高线条越精细，数值越低线条越粗糙。 Canny 低阈值/高阈值：数值越低线条越复杂，数值越高线条越简单。 Canny 示例：（保留结构，再进行着色和风格化）

SoftEdge 软边缘检测：

SoftEdge 可以理解为是 ControlNet1.0 中 HED 边缘检测的升级版。ControlNet1.1 版本中 4 个预处理器按结果质量排序：SoftEdge_HED > SoftEdge_PIDI > SoftEdge_HED_safe > SoftEdge_PIDI_safe，其中带 safe 的预处理器可以防止生成的图像带有不良内容。相较于 Canny，SoftEdge 边缘能够保留更多细节。

SoftEdge 示例： （保留结构，再进行着色和风格化）

Lineart 精细线稿提取：

Lineart 精细线稿提取是 ControlNet1.1 版本中新增的模型，相较于 Canny，Lineart 提取的线稿更加精细，细节更加丰富。

Lineart 的预处理器有三种模式：lineart_coarse（粗略模式），lineart_realistic（详细模式），lineart_standard（标准模式），处理效果有所不同，对比如下：

Lineart 示例： （保留结构，再进行着色和风格化）

2. 涂鸦成图

方法：通过 ControlNet 的 Scribble 模型提取涂鸦图（可提取参考图涂鸦，或者手绘涂鸦图），再根据提示词和风格模型对图像进行着色和风格化。

应用模型：Scribble。

Scribble 比 Canny、SoftEdge 和 Lineart 的自由发挥度要更高，也可以用于对手绘稿进行着色和风格处理。Scribble 的预处理器有三种模式：Scribble_hed，Scribble_pidinet，Scribble_Xdog，对比如下，可以看到 Scribble_Xdog 的处理细节更为丰富：

Scribble 参考图提取示例（保留大致结构，再进行着色和风格化）：

Scribble 手动涂鸦示例（根据手绘草图，生成图像）：

也可以不用参考图，直接创建空白画布，手绘涂鸦成图。

3. 建筑/室内设计

方法：通过 ControlNet 的 MLSD 模型提取建筑的线条结构和几何形状，构建出建筑线框（可提取参考图线条，或者手绘线条），再配合提示词和建筑/室内设计风格模型来生成图像。

应用模型：MLSD。

建筑/室内设计风格模型下载：

https://civitai.com/?query=Interior https://civitai.com/?query=building MLSD 示例： （毛坯变精装）

4. 颜色控制画面

方法：通过 ControlNet 的 Segmentation 语义分割模型，标注画面中的不同区块颜色和结构（不同颜色代表不同类型对象），从而控制画面的构图和内容。

应用模型：Seg。

Seg 语义参考： https://docs.qq.com/sheet/DYmtkWG5taWxhVkx2?tab=BB08J2

Seg 示例： （提取参考图内容和结构，再进行着色和风格化）

如果还想在车前面加一个人，只需在 Seg 预处理图上对应人物色值，添加人物色块再生成图像即可。

5. 背景替换

方法：在 img2img 图生图模式中，通过 ControlNet 的 Depth_leres 模型中的 remove background 功能移除背景，再通过提示词更换想要的背景。

应用模型：Depth，预处理器 Depth_leres。

要点：如果想要比较完美的替换背景，可以在图生图的 Inpaint 模式中，对需要保留的图片内容添加蒙版，remove background 值可以设置在 70-80%。

Depth_leres 示例： （将原图背景替换为办公室背景）

6. 图片指令

方法：通过 ControlNet 的 Pix2Pix 模型（ip2p），可以对图片进行指令式变换。

应用模型：ip2p，预处理器选择 none。

要点：采用指令式提示词（make Y into X），如下图示例中的 make it snow，让非洲草原下雪。

Pix2Pix 示例： （让非洲草原下雪）

7. 风格迁移

方法：通过 ControlNet 的 Shuffle 模型提取出参考图的风格，再配合提示词将风格迁移到生成图上。

应用模型：Shuffle。

Shuffle 示例：（根据魔兽道具风格，重新生成一个宝箱道具）

8. 色彩继承

方法：通过 ControlNet 的 t2iaColor 模型提取出参考图的色彩分布情况，再配合提示词和风格模型将色彩应用到生成图上。

应用模型：Color。

Color 示例：（把参考图色彩分布应用到生成图上）

9. 角色三视图

方法：通过 ControlNet 的 Openpose 模型精准识别出人物姿态，再配合提示词和风格模型生成同样姿态的图片。

应用模型：OpenPose。在 ControlNet1.1 版本中，提供了多种姿态检测方式，包含：openpose 身体、openpose_face 身体+脸、openpose_faceonly 只有脸、openpose_full 身体+手+脸、openpose_hand 手，可以根据实际需要灵活应用。

OpenPose 角色三视图示例：

要点：上传 openpose 三视图，加载 charturner 风格模型（ https://civitai.com/?query=charturner ），添加提示词保持背景干净 (simple background, white background:1.3), multiple views

10. 图片光源控制

方法：如果想对生成的图片进行打光，可以在 img2img 模式下，把光源图片上传到图生图区域，ControlNet 中放置需要打光的原图，ControlNet 模型选择 Depth。

应用模型：Depth。

要点：图生图中的所有参数和提示词信息需要与原图生成时的参数一样，具体原图参数可以在 PNG Info 面板中查看并复制。

示例：

二、ControlNet 多模型组合应用 ControlNet 还支持多个模型的组合使用，从而对图像进行多条件控制。ControlNet 的多模型控制可以在设置面板中的 ControlNet 模块中开启：

1. 人物和背景分别控制

方法：设置 2 个 ControlNet，第一个 ControlNet 通过 OpenPose 控制人物姿态，第二个 ControlNet 通过 Seg 或 Depth 控制背景构成。调整 ControlNet 权重，如 OpenPose 权重高于 Depth 权重，以确保人物姿态被正确识别，再通过提示词和风格模型进行内容和风格控制。

应用模型：OpenPose、Seg（自定义背景内容和结构）、Depth。

示例：

2. 三维重建

方法：通过 Depth 深度检测和 Normalbae 法线贴图模型，识别三维目标。再配合提示词和风格模型，重新构建出三维物体和场景。

应用模型：Depth、Normalbae。

示例：

3. 更精准的图片风格化

方法：在 img2img 图生图中，通过叠加 Lineart 和 Depth 模型，可以更加精准的提取图像结构，最大程度保留原图细节，再配合提示词和风格模型重新生成图像。

应用模型：Lineart、Depth。

示例：

4. 更精准的图片局部重绘

方法：在 img2img 图生图的局部重绘中，通过叠加 Canny 和 Inpaint 模型，可以更加精准的对图像进行局部重绘。

应用模型：Canny、Inpaint。

示例：

万字长文！带你从零开始入门AI绘画神器Stable Diffusion 一、本地部署 Stable Diffusion 1. 前言 目前市面上比较权威，并能用于工作中的 AI 绘画软件其实就两款。

阅读文章 >

欢迎关注作者微信公众号：「DUX Design Center」

大家好，这里适合你们聊设计的花生~不知道有没有小伙伴和我一样，已经把小红书当做搜索引擎在用，遇到问题都会先到上面搜搜看有没有相关的帖子。因为真的太好用了，无论什么问题都能在上面找到最新最实用的回答或解决办法。而优设旗下的多个设计账号其实也早已入驻小红书，继续在新平台上为设计师们提供服务。

大家好，这里适合你们聊设计的花生~

不知道有没有小伙伴和我一样，已经把小红书当做搜索引擎在用，遇到问题都会先到上面搜搜看有没有相关的帖子。因为真的太好用了，无论什么问题都能在上面找到最新最实用的回答或解决办法。而优设旗下的多个设计账号其实也早已入驻 小红书 ，继续在新平台上为 设计师 们提供服务。

那今天就为大家推荐 8 个与优设相关的小红书账号， 它们各有特点，从中可以学到各种有关设计和插画的干货知识和技巧，一起来看看吧~

往期回顾:

配色不用愁！6个设计师必看的色彩灵感网站 大家好，这里适合你们聊设计的花生~ 配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。

阅读文章 >

一、优设 直达： https://www.xiaohongshu.com/user/profile/5fabce35000000000100a82c

「优设」是优设网的官方小红书账号，账号的运营团队拥有 11 年的设计自媒体运营经验，累积了大量专业实用的设计干货知识和资源，这些内容都会小红书上持续分享。当下 AIGC 对设计行业的影响越来越大，优设也在及时跟进相关方面的进展，为大家分享热门的 AI 设计工具、使用技巧和资讯。无论你从事的是哪个设计方向，肯定能从这个账号中学到有用的知识。

二、优设灵感频道 直达： https://www.xiaohongshu.com/user/profile/5f56f1ad00000000010033de

「优设灵感频道」是优设基础训练营的官方小红书账号，会定期分享各种顶级审美灵感、设计技巧、效率神器以及免费的设计素材包。账号还有 2 个非常热门的专题，一是“海报改前改后”，展示同一张海报经老师指导后的效果对比；二是“海报设计过程”，用视频展示一张海报从纯文案到成品的排版设计过程，最高收获过小红书的 8000+ 点赞，看完之后你肯定能学会不少新的设计思路。

三、教设计的优优 直达： https://www.xiaohongshu.com/user/profile/5e4cae4600000000010037f2

优优教程网： https://uiiiuiii.com/

「教设计的优优」是优优教程网的官方小红书账号，专注于分享各种设计小教程、实用技巧，也有各种有助于提升审美和拓展知识面的灵感。如果你刚开始学习平面设计，优优分享的各种字效、排版和海报设计教程肯定可以让你惊呼“学到了！"。另外也别忘了多去优优教程网看看，上面有更多系统性的免费自学教程等着大家探索和学习 ~

四、做设计的小肥肥 直达： https://www.xiaohongshu.com/user/profile/59a034dc5e87e76012cc4f66

肥肥是优设训练营的金牌讲师，也是 Adobe 官方教程的合作设计师。她专注分享各种好看又实用的海报设计教程，制作的“超逼真折纸文字效果”教程在小红书上获得了 80000+ 的点赞和收藏，被很多做设计的小伙伴学习借鉴，是名副其实的网红设计师。肥肥老师还会根据节日和设计流行趋势制作对应的视频教程，帮助大家学习最新最有用的设计知识和技巧。

五、全蛋 AIR 直达： https://www.xiaohongshu.com/user/profile/5cee12ed000000001201e2d6

全蛋是优设网的设计总监，网红字体优设标题黑的主创之一，在版式设计上有自己独特的见解和风格。他日常会在小红书上分享与版式设计、字体混搭、文字组编排相关的设计干货，也会不定期以视频的方式讲解海报排版的思路，想学习字体混搭、提升版式设计能力的小伙伴千万不要错过这个宝藏账号~

六、Asen-阿森 直达： https://www.xiaohongshu.com/user/profile/601fa1f50000000001005ed9

阿森是优设训练营插画课的金牌讲师、视觉中国签约画师。她擅长画面的色彩光影处理，会定期在小红书上更新各种手绘小知识和原创插画创作思路，现在也在坚持每天更新色彩速涂。如果你也在学习绘画，可以关注阿森老师，和她探讨你在绘画过程中遇到的问题。

七、插画师小光 sir 直达： https://www.xiaohongshu.com/user/profile/5ff3b6c7000000000101d9e4

小光老师是优设百万人气插画师，擅长 IP 形象、表情包、Q 版头像及各种商业插画，他经常在小红书上分享各种 Q 版人物的绘画技巧。随着 AI 技术的发展，小光老师也在积极探索 AI 在插画上色、2D 转 3D 方面的应用，分享了很多基础入门教程，想学习相关内容的小伙伴可以多多关注。

八、wuli_石头 直达： https://www.xiaohongshu.com/user/profile/5c5c4e59000000001d033eba

石头老师是优设大课堂的金牌讲师，拥有扎实的手绘功底，也精通 Procreate 绘画 。他擅长欧美插画风格的人物造型，能用简单的色块和线条生动准确地刻画人物的外形及性格特征。石头老师经常在小红书上分享人物造型和光影速涂方面的技巧和创作思路，喜欢人物插画的小伙伴不要错过。

以上就是本期的为大家推荐的 8 个小红书账号，非常适合设计师和插画师日常浏览，感兴趣的话就马上打开小红书关注起来吧~ 喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~

推荐阅读:

虎年“hú”利！资深插画师手把手教你100%成功上架微信表情包 农历虎年越来越近，家中挂起的条条腊肉，街边装饰的串串红灯笼，都让过年的氛围越来越浓，大家想放假的心情是不是也越来越迫不及待了呢？

阅读文章 >

不会3D怎么做立体海报？3个案例教会你！ hello，大家好，我是小肥肥，又和大家见面了。

阅读文章 >

在 B 端设计中，如何保证最终的交付质量，让用户可以得到体验更优更顺畅的产品功能呢？更多干货：如何保证设计交付质量？来看京东高手的实战经验！

在 B 端设计中，如何保证最终的交付质量，让用户可以得到体验更优更顺畅的产品功能呢？

更多干货：

如何保证设计交付质量？来看京东高手的实战经验！ 在 B 端交互设计中会遇到，在最后走查时发现，最终上线功能的交互与原有设计差距较大，甚至被研发重构。

阅读文章 >

一、为什么需要设计质量保证 良好的用户体验并非偶然发生，是可以由团队来保证的。在一个 产品设计 中，用户体验涵盖了产品团队所做的一切，包括开发、产品、测试、设计等。每个人的角色都会影响到客户体验，尤其是交互设计和视觉设计。为了使我们所做的设计质量能够得到保证，最常见的方式就是在产品验收环节进行设计走查验收了。而经常作为一个项目上线前的最后环节之一，设计师经常在临近的上线的时候才开始介入，导致到最后经常由于时间不充裕只能修改部分设计和功能上的问题。

作为设计师，我们的工作不会以将设计交给开发而结束。随着产品的开发，我们需要核对整个开发环节是否符合我们的交互规范。如果没有设计质量保证，那么许多功能将不得不重新开发来修复交互和视觉问题，用户得不到更好的用户体验，轻则耗费更多时间，重则直接影响用户放弃使用该产品，这可能还会导致其他不可预见的问题。

设计质量的保证仅靠最后临门一脚的设计走查验收远远是不够的。无论是 C 端还是 B 端产品，设计走查是开发一款产品的过程中不可或缺的一个环节，在需求全周期中各个环节都要加入对设计质量的把控。

二、设计验收实施步骤和方案 1. UX/UI 设计师需不需要走查

很多小伙伴认为视觉走查都应该是测试同学的任务，除了测试产品问题，视觉上也要测试同学去处理，不可否认的是，测试同学确实会找到一些视觉、交互、开发上的问题，但常常有一定的局限性也过于理想化。

测试同学主要负责前后端的问题，比如前端同学引用图片的静态资源加载问题，后端功能和接口的问题。而此时如果视觉上面的问题也交给测试同学去处理，那么设计质量是很难得到保证的。

首先 B 端产品是一个复杂的系统，产品功能多、逻辑复杂、业务分支多等因素，仅靠测试同学去找到所有问题，不但处理不过来，同时具备这些能力也是很难的。因为一个产品的交互设计和视觉设计是由设计师制定的，所以设计师参与走查验收不但可以通过不同的视角测试和查看产品设计质量问题，还可以快速定位到测试同学不易察觉和发现的设计细节点，如颜色的细微差别、图标的使用、字体的行高行间距等问题。

2. 制定验收标准/项目排期表

要保证设计质量，在 B 端设计中不是易事，由于后期验收的功能和验收人员都不尽相同，为了达到统一的验收标准，我们首先需要制定验收标准，最终形成与产品设计并行的一个流程，才能有效保证质量。有标准可依，才能做事不慌。

在接到需求后，可以根据以往的经验或者根据产品经理给出的项目排期表，确定本次需求的设计优先级，这样在确定优先级后，可以对不同等级的功能进行实施制定。

通过项目排期表我们可以清楚的看到项目的相关责任人、研发同学及功能需求说明等。这样在验收的时候可以快速找到相关责任人提出问题，如相对应的开发和产品。还可以通过排期表查看如项目时间安排、优先级等重要信息。

3. 走查验收哪些内容

按照上面的表，我们整个设计验收可以从交互层面、视觉层面和整体体验三个方面进行：

①交互层面

交互层面是整个产品的功能导向，因为 B 端产品功能和逻辑复杂，我们要通过功能性、易用性、可操作性和高效性入手来提高用户体验，衡量用户对产品的实际感知，如结构设计、页面布局和信息组织方式，能否被快速理解，用户是否能正确操作，顺利使用产品完成任务及完成效率和负荷程度，避免承受非必要、繁琐、小心谨慎的操作过程。

②视觉层面

视觉层面是前端页面的静态效果是否和设计稿一致，包括色彩、字体、布局、排版等细节。通过全局通用、功能动效、视觉规范快速定位到问题并提出问题。这块内容一直是开发和设计难以达成一致的重灾区。

③整体体验

因为现在很多项目涉及到多端设计，如果不对多端设计差异的把控，一般很容易出问题，如 PC 端和移动端、iOS 端和 Android 端、小程序和 APP 等，在设计方法上都存在巨大差异，两者在交互事件上也存在很大差别，那么它们之间的交互内容和视觉内容是否符合设计需求，是否有遗漏和错误，也属于整体体验的检查内容。

三、什么时候可以进入走查 当验收标准和走查内容确认后，什么时候可以进入走查了？这个问题很多设计师的答案都不一样，因为开发周期，迭代周期，项目的难易程度等因素不一致，导致进入走查的时间也是不一样的。

针对日常迭代视觉体验走查，设计师常常会在测试同学完成产品 bug 测试后开始进入，进行视觉和交互走查，然后提交问题给开发进行解决。

而前面也说到，设计质量的保证仅靠最后临门一脚的设计走查验收远远是不够的。无论是 C 端还是 B 端产品，设计走查是开发一款产品的过程中不可或缺的一个环节，需要在需求全周期中各个环节都要加入对设计质量的把控。

5. 需要验收还原到什么程度

产品验收、设计走查验收目的是为了保证设计质量，所以这个其实是没有非常硬性标准的，不同公司、不同项目、不同设计师都可能不一样。一般来说，还原度标准：C 端＞B 端＞后台。

当验收标准制定后，通过对照验收标准来确定需要验收的范围即可，开发一个项目时，为了使项目进展更加准确，通常项目采用时间倒排，这个时候需要给走查验收留好时间，以防止由于时间不充裕只能修改部分设计和功能上的问题。

6. 走查验收遵循的原则

当产品开发完之后我们要对产品进行视觉和交互走查，那怎么做设计走查工作呢？都需要走查哪些方面呢？

针对产品可用性，1995 年人机博士尼尔森（Nielsen）提出了一个尼尔森十大可用性原则，也叫尼尔森十大交互原则、用户体验十大原则，用于评价产品体验的好坏。原则分为为：系统可见性原则、场景贴切原则、可控性原则、一致性原则、防错原则、协助记忆原则、灵活高效原则、审美和简约 设计原则 、容错原则、人性化帮助原则。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

但是，由于时间久远，互联网发展迅速，用户人群和使用场景也不相同，在这种情况下除了可以继续使用尼尔森十大可用性原则，我们也可以根据自己的产品特性制定适合自己的一套可用性原则。这里我们在尼尔森十大可用性原则的基础上进行拆解，分成视觉呈现、界面设计、导航设计、信息设计、交互设计、信息架构、功能需求层、内容需求八个方面进行分段走查。

①视觉呈现

1）重要的内容明显且清晰

用户的第一感官动作是扫页面，所以重要的文字、图像、功能应该足够明显、清晰，减少不必要的视觉元素和无关紧要的信息，以便操作和使用。

2）配色方案和品牌识别

基于品牌调性的配色方案，清晰明了，不刺眼、不反感。

3）一致性

相同功能，操作、用法保持一致。

②界面设计

4）交互和非交互元素区分明显

可交互的元素应该更清楚的显示出来，而非交互的元素不应该看起来是可交互的。

5）页面布局清晰

模块与模块之间结构清晰，相关功能、内容应该在同一模块中。

③导航设计

6）导航分类清晰

导航分类清晰，让用户方便快速地找到想要的功能。

④信息设计

7）通俗易懂的文案

将所有复杂的术语、行话和缩写，用易懂的方式说清楚，说人话。无法简单描述的词语需要给出解释。

8）清晰地选项

提供清晰的表单列表，分组明确，需要步骤的明确需要几步，需要准备的提前告知。

⑤交互设计

9）操作反馈

及时对用户做出的操作给予反馈，如操作成功、操作失败，等待中就告知用户等待多久。

10）符合预期

任何操作跳转符合用户心理预期（如点击取消支付时，却显示支付成功）。

11）避免重复/过多的操作

不要要求让用户多次输入相同的内容或同一操作。

12）给用户控制度和自由度

让用户自主做决定，可以引导用户做系统希望做的。

13）遵循原则

除非特殊原因，否则请遵循互联网所形成的规定。

14）防错处理

最好的做法是做到用户无法出错的设计，其次是在用户可能出错的时候给予提醒，如果误操作，可提供恢复的方法，如果无法恢复，一定要反复警示提醒。

15）容错

用易懂的方式说明错误原因，并提供建设性的解决方案（如页面加载失败，提供失败原因之外应该提供重新加载的按钮；登录失败，提示失败原因之外应该提供注意大小写之类的建议）。

16）帮助记忆

减少用户对信息的记忆负荷，帮助用户在需要之前信息的时候提供相关信息。

17）灵活高效

可以满足新用户和老用户的使用场景，并且不要因为小部分人的需求而放弃大部分人的需求，切记以点概面。

⑥信息架构

18）清晰地信息架构

信息分类清晰，层级关系明确，任务路径清晰。

⑦功能需求

19）提供用户需要和期望的功能

提供用户可以方便快捷操作的功能（如列表信息过多的情况下提供搜索，筛选功能）。

20）对复杂的操作给予帮助

对复杂的功能提供新手帮助和清晰的解释。

⑧内容需求

21）提供必要但不多的内容

提供足够用户能够完成任务的内容，而不是过多的不必要的内容。

整体维度如下图所示：

7. 高效走查验收的前提

了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。

在对接的整个流程中，本文梳理了前中后三个阶段分别需要做的准备工作，来帮助解决设计师和开发如何高效验收的问题。

①前期规范

1）规范制定

这里的规范制定包含设计规范和开发规范。规范的目的是为了统一设计内部及前端工程师的开发，提升团队的协作效率，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。设计侧，我们把颜色、字体、组件等内容预设定成规范，保证了视觉上的统一，也方便组件的复用。同样针对同一项目的开发，开发侧也可以制定相应的开发组件，将颜色、字号、功能模块进行组件化，方便后期迭代的组件化使用。

如果面对跨平台、多页面、多组件的复杂场景下，为了保证整体的用户体验的一致性，我们也可以制定原子组件设计，是由原子、分子、组织、模版和页面共同协作，可以帮助我们创造出一套符合公司产品的设计系统。

4000字长文！帮你掌握高级设计师都会的原子设计理论 原子设计理论是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。

阅读文章 >

2）交互文档说明

交互文档的说明可以从内到外对产品设计考量信息结构的布局和优先级的落地，以及对用户体验一致性的把握。高保真的交互文档说明，能让 UI 设计师更好按照交互稿去实现交互设计师想要表达的东西，可以更专注于表现层的设计。

成熟的交互注释和描述细节程度决定开发时反复沟通的频率，大到功能流程的设计，小到某个交互事件的定义。总之，好的交互文档说明，可以让 UI 设计师和开发更专注自己做的事，不但可以更好地实现效果，还可以减少开发过程中遇到的问题和沟通成本。

B端的交互文档如何写？这篇保姆级教程收藏起来！ 今天要分享的，是后台和社群里几乎每天都有人问的交互文档该怎么写的问题。

阅读文章 >

3）设计文件输出

我们在做设计交付前期，需要把全部的页面、操作状态、切图标注、动效视频等文件整理好交给前端开发，为了方便多个前端开发协同的使用，我们可以按照版本号或者功能进行排列放置。关于设计稿内的设计与工具使用，这里不做赘述。

②中期跟进

1）设计评审

我们需要通过设计评审去帮助团队实现产品目标，帮助设计师发现更优的设计思路，与开发对齐目标，减少沟通成本，保证团队整体设计的一致性。

设计评审意义就是把问题前置化。通过评审可以把视觉问题和开发说明清楚，结合交互文档对设计理念、组件规范、动效、特殊样式等模块进行讲述，帮助开发同学理解。同时开发同学也要及时反馈是否有还原困难，如是否有技术限制、是否有组件改动困难、实现成本过高等问题。

2）实时反馈、实时跟进

在项目正式上线前，会出现产品临时更改需求、状态页面缺失、功能不好实现、估时估的不准确等问题。如果不及时反馈及时跟进，那么很容易在测试上线后暴露出的问题，可能导致了延期等状况。所以信息的同步非常重要，在项目组成立时，把涉及到的项目成员建立项目沟通群，所有相关信息同步在群内，有问题及时沟通，必要时拉会或者面聊。

3）测试用例

一般来说，交互稿与 UI 稿交付给前端开发同学后，设计师就要开始忙下一个需求了。直到通知设计走查前，设计师暂时不会再随时跟进需求进展，而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中，设计师也需要在关键节点参与其中，确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例，所以需要再次和研发与测试同学对齐所有交互内容，保证交互设计内容不会在此阶段被降级甚至直接去掉。

③后期验收

1）设计走查

设计走查验收也叫还原度验证、设计走查、设计验证。是保证研发实际实现的效果是否和设计稿一致的过程。接下来我们详细讲解后期验收这块。

2）输出文档及推动优化

由于时间、开发难度等原因，或多或少会遗留一些没有解决的问题，那么这个时候我们需要把这些遗留问题输出文档进行下一版本的迭代优化推动。

8. 验收方法和验收的工具

关于验收方法和验收工具，每个公司每个团队每个设计师所使用的都不尽相同，工具的作用也是为了提升工作效率，目的也是为了找出问题并解决问题，这里列举了我常用的两种方法和一种工具，如果大家还有其他更好的方法或者工具，可以评论区一起交流和提升。

①通过截图对比，整理到协同表格工具里提交给前端开发进行解决。

这种对比的方式更直观，能让前端开发快速定位问题所在，通过问题描述可以可以知道具体问题所在，快速响应快速解决。

在线协同表格，可以使用飞书、腾讯等在线表格等。在线文档的优势是可以在线协同快速处理问题。

②直接在设计稿上截图对比，添加问题描述，提交 JIRA 给开发。

这种方式和第一种方法相似，由于现在大部分公司使用 Figma、MasterGo、即时设计等在线协同设计软件，因为支持多人协作、实现同步等，所以这种直接在设计图上标注对比，方便前端开发快速定位问题，提交 JIRA 可以快速收集需求、跟踪任务和敏捷管理等。

③字节跳动出品的一款走查插件 Copixel

通过叠加开发稿和视觉稿，来找出问题，解决开发还原度低、设计走查低效的问题，实现高质量的项目还原效果，保障更极致的用户体验。

让设计稿还原度更高！两款高手都在用的B端设计走查神器 B 端设计师在工作当中一定会遇到这样的情况：因为上线的项目与设计稿不符而与前端进行争论、为了知道开发颜色使用是否准确只有“截图”，然后在设计软件当中“吸色”来进行判断。

阅读文章 >

总结 设计走查的完善可以保证设计质量，设计师在流程的早期意识到交互或者视觉问题，可以在项目的过程中就保证设计质量，而无需反复进行交互和视觉处理。除此之外还可以解决一下问题。

1.  让设计师了解技术问题

如果设计师在测试正在开发的功能，将会更好地理解出现的技术问题。这不仅有助于设计人员了解其设计的优点和缺点，而且还有助于防止这些问题出现在未来的功能中。

2. 增加协同和沟通

协作和沟通是团队成功的关键因素。如果每个人都一起工作并在问题出现时意识到问题，就会增加寻找解决方案的协作。

3. 在开发的过程中帮助构建正确的界面

如果走查验收就是开发的一部分，那么在开发功能和界面时就解决问题，就不用开发结束后再返回进行交互或视觉的更改。

4. 节省时间

可以让项目流程进展更高效，节省时间。

5.  揭露不可预见的错误

在开发一个项目时，经常出现修复一个问题时产生了其他的错误，通过尽早记录问题，可能会发现潜在的更大的看不见的问题。

在互联网时代，设计师通过整个生产过程中与开发合作并清楚的表达自己的想法，设计师可以帮助高效的交付产品，在了解整个验收过程，以确保我们的工作在最终的项目或者产品中得到体验，我们也会很自豪的说，看这个功能、这个界面、这个图标是我设计的。

文章如有不到之处还请指正，如果你有更好的关于走查验收相关的意见和好的想法，可以在评论区发表评论，让我们一起进步！

参考文献：

如何做好设计还原？从这5个方面入手！ 作为设计师，一个老生常谈的话题就是还原度检查。

阅读文章 >

如何保证设计交付质量？来看京东高手的实战经验！ 在 B 端交互设计中会遇到，在最后走查时发现，最终上线功能的交互与原有设计差距较大，甚至被研发重构。

阅读文章 >

在 B 端设计中，如何保证最终的交付质量，让用户可以得到体验更优更顺畅的产品功能呢？更多干货：如何保证设计交付质量？来看京东高手的实战经验！

在 B 端设计中，如何保证最终的交付质量，让用户可以得到体验更优更顺畅的产品功能呢？

更多干货：

如何保证设计交付质量？来看京东高手的实战经验！ 在 B 端交互设计中会遇到，在最后走查时发现，最终上线功能的交互与原有设计差距较大，甚至被研发重构。

阅读文章 >

一、为什么需要设计质量保证 良好的用户体验并非偶然发生，是可以由团队来保证的。在一个 产品设计 中，用户体验涵盖了产品团队所做的一切，包括开发、产品、测试、设计等。每个人的角色都会影响到客户体验，尤其是交互设计和视觉设计。为了使我们所做的设计质量能够得到保证，最常见的方式就是在产品验收环节进行设计走查验收了。而经常作为一个项目上线前的最后环节之一，设计师经常在临近的上线的时候才开始介入，导致到最后经常由于时间不充裕只能修改部分设计和功能上的问题。

作为设计师，我们的工作不会以将设计交给开发而结束。随着产品的开发，我们需要核对整个开发环节是否符合我们的交互规范。如果没有设计质量保证，那么许多功能将不得不重新开发来修复交互和视觉问题，用户得不到更好的用户体验，轻则耗费更多时间，重则直接影响用户放弃使用该产品，这可能还会导致其他不可预见的问题。

设计质量的保证仅靠最后临门一脚的设计走查验收远远是不够的。无论是 C 端还是 B 端产品，设计走查是开发一款产品的过程中不可或缺的一个环节，在需求全周期中各个环节都要加入对设计质量的把控。

二、设计验收实施步骤和方案 1. UX/UI 设计师需不需要走查

很多小伙伴认为视觉走查都应该是测试同学的任务，除了测试产品问题，视觉上也要测试同学去处理，不可否认的是，测试同学确实会找到一些视觉、交互、开发上的问题，但常常有一定的局限性也过于理想化。

测试同学主要负责前后端的问题，比如前端同学引用图片的静态资源加载问题，后端功能和接口的问题。而此时如果视觉上面的问题也交给测试同学去处理，那么设计质量是很难得到保证的。

首先 B 端产品是一个复杂的系统，产品功能多、逻辑复杂、业务分支多等因素，仅靠测试同学去找到所有问题，不但处理不过来，同时具备这些能力也是很难的。因为一个产品的交互设计和视觉设计是由设计师制定的，所以设计师参与走查验收不但可以通过不同的视角测试和查看产品设计质量问题，还可以快速定位到测试同学不易察觉和发现的设计细节点，如颜色的细微差别、图标的使用、字体的行高行间距等问题。

2. 制定验收标准/项目排期表

要保证设计质量，在 B 端设计中不是易事，由于后期验收的功能和验收人员都不尽相同，为了达到统一的验收标准，我们首先需要制定验收标准，最终形成与产品设计并行的一个流程，才能有效保证质量。有标准可依，才能做事不慌。

在接到需求后，可以根据以往的经验或者根据产品经理给出的项目排期表，确定本次需求的设计优先级，这样在确定优先级后，可以对不同等级的功能进行实施制定。

通过项目排期表我们可以清楚的看到项目的相关责任人、研发同学及功能需求说明等。这样在验收的时候可以快速找到相关责任人提出问题，如相对应的开发和产品。还可以通过排期表查看如项目时间安排、优先级等重要信息。

3. 走查验收哪些内容

按照上面的表，我们整个设计验收可以从交互层面、视觉层面和整体体验三个方面进行：

①交互层面

交互层面是整个产品的功能导向，因为 B 端产品功能和逻辑复杂，我们要通过功能性、易用性、可操作性和高效性入手来提高用户体验，衡量用户对产品的实际感知，如结构设计、页面布局和信息组织方式，能否被快速理解，用户是否能正确操作，顺利使用产品完成任务及完成效率和负荷程度，避免承受非必要、繁琐、小心谨慎的操作过程。

②视觉层面

视觉层面是前端页面的静态效果是否和设计稿一致，包括色彩、字体、布局、排版等细节。通过全局通用、功能动效、视觉规范快速定位到问题并提出问题。这块内容一直是开发和设计难以达成一致的重灾区。

③整体体验

因为现在很多项目涉及到多端设计，如果不对多端设计差异的把控，一般很容易出问题，如 PC 端和移动端、iOS 端和 Android 端、小程序和 APP 等，在设计方法上都存在巨大差异，两者在交互事件上也存在很大差别，那么它们之间的交互内容和视觉内容是否符合设计需求，是否有遗漏和错误，也属于整体体验的检查内容。

三、什么时候可以进入走查 当验收标准和走查内容确认后，什么时候可以进入走查了？这个问题很多设计师的答案都不一样，因为开发周期，迭代周期，项目的难易程度等因素不一致，导致进入走查的时间也是不一样的。

针对日常迭代视觉体验走查，设计师常常会在测试同学完成产品 bug 测试后开始进入，进行视觉和交互走查，然后提交问题给开发进行解决。

而前面也说到，设计质量的保证仅靠最后临门一脚的设计走查验收远远是不够的。无论是 C 端还是 B 端产品，设计走查是开发一款产品的过程中不可或缺的一个环节，需要在需求全周期中各个环节都要加入对设计质量的把控。

5. 需要验收还原到什么程度

产品验收、设计走查验收目的是为了保证设计质量，所以这个其实是没有非常硬性标准的，不同公司、不同项目、不同设计师都可能不一样。一般来说，还原度标准：C 端＞B 端＞后台。

当验收标准制定后，通过对照验收标准来确定需要验收的范围即可，开发一个项目时，为了使项目进展更加准确，通常项目采用时间倒排，这个时候需要给走查验收留好时间，以防止由于时间不充裕只能修改部分设计和功能上的问题。

6. 走查验收遵循的原则

当产品开发完之后我们要对产品进行视觉和交互走查，那怎么做设计走查工作呢？都需要走查哪些方面呢？

针对产品可用性，1995 年人机博士尼尔森（Nielsen）提出了一个尼尔森十大可用性原则，也叫尼尔森十大交互原则、用户体验十大原则，用于评价产品体验的好坏。原则分为为：系统可见性原则、场景贴切原则、可控性原则、一致性原则、防错原则、协助记忆原则、灵活高效原则、审美和简约 设计原则 、容错原则、人性化帮助原则。

用超多案例，帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

阅读文章 >

但是，由于时间久远，互联网发展迅速，用户人群和使用场景也不相同，在这种情况下除了可以继续使用尼尔森十大可用性原则，我们也可以根据自己的产品特性制定适合自己的一套可用性原则。这里我们在尼尔森十大可用性原则的基础上进行拆解，分成视觉呈现、界面设计、导航设计、信息设计、交互设计、信息架构、功能需求层、内容需求八个方面进行分段走查。

①视觉呈现

1）重要的内容明显且清晰

用户的第一感官动作是扫页面，所以重要的文字、图像、功能应该足够明显、清晰，减少不必要的视觉元素和无关紧要的信息，以便操作和使用。

2）配色方案和品牌识别

基于品牌调性的配色方案，清晰明了，不刺眼、不反感。

3）一致性

相同功能，操作、用法保持一致。

②界面设计

4）交互和非交互元素区分明显

可交互的元素应该更清楚的显示出来，而非交互的元素不应该看起来是可交互的。

5）页面布局清晰

模块与模块之间结构清晰，相关功能、内容应该在同一模块中。

③导航设计

6）导航分类清晰

导航分类清晰，让用户方便快速地找到想要的功能。

④信息设计

7）通俗易懂的文案

将所有复杂的术语、行话和缩写，用易懂的方式说清楚，说人话。无法简单描述的词语需要给出解释。

8）清晰地选项

提供清晰的表单列表，分组明确，需要步骤的明确需要几步，需要准备的提前告知。

⑤交互设计

9）操作反馈

及时对用户做出的操作给予反馈，如操作成功、操作失败，等待中就告知用户等待多久。

10）符合预期

任何操作跳转符合用户心理预期（如点击取消支付时，却显示支付成功）。

11）避免重复/过多的操作

不要要求让用户多次输入相同的内容或同一操作。

12）给用户控制度和自由度

让用户自主做决定，可以引导用户做系统希望做的。

13）遵循原则

除非特殊原因，否则请遵循互联网所形成的规定。

14）防错处理

最好的做法是做到用户无法出错的设计，其次是在用户可能出错的时候给予提醒，如果误操作，可提供恢复的方法，如果无法恢复，一定要反复警示提醒。

15）容错

用易懂的方式说明错误原因，并提供建设性的解决方案（如页面加载失败，提供失败原因之外应该提供重新加载的按钮；登录失败，提示失败原因之外应该提供注意大小写之类的建议）。

16）帮助记忆

减少用户对信息的记忆负荷，帮助用户在需要之前信息的时候提供相关信息。

17）灵活高效

可以满足新用户和老用户的使用场景，并且不要因为小部分人的需求而放弃大部分人的需求，切记以点概面。

⑥信息架构

18）清晰地信息架构

信息分类清晰，层级关系明确，任务路径清晰。

⑦功能需求

19）提供用户需要和期望的功能

提供用户可以方便快捷操作的功能（如列表信息过多的情况下提供搜索，筛选功能）。

20）对复杂的操作给予帮助

对复杂的功能提供新手帮助和清晰的解释。

⑧内容需求

21）提供必要但不多的内容

提供足够用户能够完成任务的内容，而不是过多的不必要的内容。

整体维度如下图所示：

7. 高效走查验收的前提

了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。

在对接的整个流程中，本文梳理了前中后三个阶段分别需要做的准备工作，来帮助解决设计师和开发如何高效验收的问题。

①前期规范

1）规范制定

这里的规范制定包含设计规范和开发规范。规范的目的是为了统一设计内部及前端工程师的开发，提升团队的协作效率，从而实现设计稿到线上页面输出统一的设计语言，从根本提升设计质量和还原度。设计侧，我们把颜色、字体、组件等内容预设定成规范，保证了视觉上的统一，也方便组件的复用。同样针对同一项目的开发，开发侧也可以制定相应的开发组件，将颜色、字号、功能模块进行组件化，方便后期迭代的组件化使用。

如果面对跨平台、多页面、多组件的复杂场景下，为了保证整体的用户体验的一致性，我们也可以制定原子组件设计，是由原子、分子、组织、模版和页面共同协作，可以帮助我们创造出一套符合公司产品的设计系统。

4000字长文！帮你掌握高级设计师都会的原子设计理论 原子设计理论是一种分层思考的思维模式，能很好的指导我们去落地设计系统，帮助我们提升对产品设计整体把控的能力。

阅读文章 >

2）交互文档说明

交互文档的说明可以从内到外对产品设计考量信息结构的布局和优先级的落地，以及对用户体验一致性的把握。高保真的交互文档说明，能让 UI 设计师更好按照交互稿去实现交互设计师想要表达的东西，可以更专注于表现层的设计。

成熟的交互注释和描述细节程度决定开发时反复沟通的频率，大到功能流程的设计，小到某个交互事件的定义。总之，好的交互文档说明，可以让 UI 设计师和开发更专注自己做的事，不但可以更好地实现效果，还可以减少开发过程中遇到的问题和沟通成本。

B端的交互文档如何写？这篇保姆级教程收藏起来！ 今天要分享的，是后台和社群里几乎每天都有人问的交互文档该怎么写的问题。

阅读文章 >

3）设计文件输出

我们在做设计交付前期，需要把全部的页面、操作状态、切图标注、动效视频等文件整理好交给前端开发，为了方便多个前端开发协同的使用，我们可以按照版本号或者功能进行排列放置。关于设计稿内的设计与工具使用，这里不做赘述。

②中期跟进

1）设计评审

我们需要通过设计评审去帮助团队实现产品目标，帮助设计师发现更优的设计思路，与开发对齐目标，减少沟通成本，保证团队整体设计的一致性。

设计评审意义就是把问题前置化。通过评审可以把视觉问题和开发说明清楚，结合交互文档对设计理念、组件规范、动效、特殊样式等模块进行讲述，帮助开发同学理解。同时开发同学也要及时反馈是否有还原困难，如是否有技术限制、是否有组件改动困难、实现成本过高等问题。

2）实时反馈、实时跟进

在项目正式上线前，会出现产品临时更改需求、状态页面缺失、功能不好实现、估时估的不准确等问题。如果不及时反馈及时跟进，那么很容易在测试上线后暴露出的问题，可能导致了延期等状况。所以信息的同步非常重要，在项目组成立时，把涉及到的项目成员建立项目沟通群，所有相关信息同步在群内，有问题及时沟通，必要时拉会或者面聊。

3）测试用例

一般来说，交互稿与 UI 稿交付给前端开发同学后，设计师就要开始忙下一个需求了。直到通知设计走查前，设计师暂时不会再随时跟进需求进展，而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中，设计师也需要在关键节点参与其中，确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例，所以需要再次和研发与测试同学对齐所有交互内容，保证交互设计内容不会在此阶段被降级甚至直接去掉。

③后期验收

1）设计走查

设计走查验收也叫还原度验证、设计走查、设计验证。是保证研发实际实现的效果是否和设计稿一致的过程。接下来我们详细讲解后期验收这块。

2）输出文档及推动优化

由于时间、开发难度等原因，或多或少会遗留一些没有解决的问题，那么这个时候我们需要把这些遗留问题输出文档进行下一版本的迭代优化推动。

8. 验收方法和验收的工具

关于验收方法和验收工具，每个公司每个团队每个设计师所使用的都不尽相同，工具的作用也是为了提升工作效率，目的也是为了找出问题并解决问题，这里列举了我常用的两种方法和一种工具，如果大家还有其他更好的方法或者工具，可以评论区一起交流和提升。

①通过截图对比，整理到协同表格工具里提交给前端开发进行解决。

这种对比的方式更直观，能让前端开发快速定位问题所在，通过问题描述可以可以知道具体问题所在，快速响应快速解决。

在线协同表格，可以使用飞书、腾讯等在线表格等。在线文档的优势是可以在线协同快速处理问题。

②直接在设计稿上截图对比，添加问题描述，提交 JIRA 给开发。

这种方式和第一种方法相似，由于现在大部分公司使用 Figma、MasterGo、即时设计等在线协同设计软件，因为支持多人协作、实现同步等，所以这种直接在设计图上标注对比，方便前端开发快速定位问题，提交 JIRA 可以快速收集需求、跟踪任务和敏捷管理等。

③字节跳动出品的一款走查插件 Copixel

通过叠加开发稿和视觉稿，来找出问题，解决开发还原度低、设计走查低效的问题，实现高质量的项目还原效果，保障更极致的用户体验。

让设计稿还原度更高！两款高手都在用的B端设计走查神器 B 端设计师在工作当中一定会遇到这样的情况：因为上线的项目与设计稿不符而与前端进行争论、为了知道开发颜色使用是否准确只有“截图”，然后在设计软件当中“吸色”来进行判断。

阅读文章 >

总结 设计走查的完善可以保证设计质量，设计师在流程的早期意识到交互或者视觉问题，可以在项目的过程中就保证设计质量，而无需反复进行交互和视觉处理。除此之外还可以解决一下问题。

1.  让设计师了解技术问题

如果设计师在测试正在开发的功能，将会更好地理解出现的技术问题。这不仅有助于设计人员了解其设计的优点和缺点，而且还有助于防止这些问题出现在未来的功能中。

2. 增加协同和沟通

协作和沟通是团队成功的关键因素。如果每个人都一起工作并在问题出现时意识到问题，就会增加寻找解决方案的协作。

3. 在开发的过程中帮助构建正确的界面

如果走查验收就是开发的一部分，那么在开发功能和界面时就解决问题，就不用开发结束后再返回进行交互或视觉的更改。

4. 节省时间

可以让项目流程进展更高效，节省时间。

5.  揭露不可预见的错误

在开发一个项目时，经常出现修复一个问题时产生了其他的错误，通过尽早记录问题，可能会发现潜在的更大的看不见的问题。

在互联网时代，设计师通过整个生产过程中与开发合作并清楚的表达自己的想法，设计师可以帮助高效的交付产品，在了解整个验收过程，以确保我们的工作在最终的项目或者产品中得到体验，我们也会很自豪的说，看这个功能、这个界面、这个图标是我设计的。

文章如有不到之处还请指正，如果你有更好的关于走查验收相关的意见和好的想法，可以在评论区发表评论，让我们一起进步！

参考文献：

如何做好设计还原？从这5个方面入手！ 作为设计师，一个老生常谈的话题就是还原度检查。

阅读文章 >

如何保证设计交付质量？来看京东高手的实战经验！ 在 B 端交互设计中会遇到，在最后走查时发现，最终上线功能的交互与原有设计差距较大，甚至被研发重构。

阅读文章 >

大家好，这里适合你们聊设计的花生~不知道有没有小伙伴和我一样，已经把小红书当做搜索引擎在用，遇到问题都会先到上面搜搜看有没有相关的帖子。因为真的太好用了，无论什么问题都能在上面找到最新最实用的回答或解决办法。而优设旗下的多个设计账号其实也早已入驻小红书，继续在新平台上为设计师们提供服务。

大家好，这里适合你们聊设计的花生~

不知道有没有小伙伴和我一样，已经把小红书当做搜索引擎在用，遇到问题都会先到上面搜搜看有没有相关的帖子。因为真的太好用了，无论什么问题都能在上面找到最新最实用的回答或解决办法。而优设旗下的多个设计账号其实也早已入驻 小红书 ，继续在新平台上为 设计师 们提供服务。

那今天就为大家推荐 8 个与优设相关的小红书账号， 它们各有特点，从中可以学到各种有关设计和插画的干货知识和技巧，一起来看看吧~

往期回顾:

配色不用愁！6个设计师必看的色彩灵感网站 大家好，这里适合你们聊设计的花生~ 配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。

阅读文章 >

一、优设 直达： https://www.xiaohongshu.com/user/profile/5fabce35000000000100a82c

「优设」是优设网的官方小红书账号，账号的运营团队拥有 11 年的设计自媒体运营经验，累积了大量专业实用的设计干货知识和资源，这些内容都会小红书上持续分享。当下 AIGC 对设计行业的影响越来越大，优设也在及时跟进相关方面的进展，为大家分享热门的 AI 设计工具、使用技巧和资讯。无论你从事的是哪个设计方向，肯定能从这个账号中学到有用的知识。

二、优设灵感频道 直达： https://www.xiaohongshu.com/user/profile/5f56f1ad00000000010033de

「优设灵感频道」是优设基础训练营的官方小红书账号，会定期分享各种顶级审美灵感、设计技巧、效率神器以及免费的设计素材包。账号还有 2 个非常热门的专题，一是“海报改前改后”，展示同一张海报经老师指导后的效果对比；二是“海报设计过程”，用视频展示一张海报从纯文案到成品的排版设计过程，最高收获过小红书的 8000+ 点赞，看完之后你肯定能学会不少新的设计思路。

三、教设计的优优 直达： https://www.xiaohongshu.com/user/profile/5e4cae4600000000010037f2

优优教程网： https://uiiiuiii.com/

「教设计的优优」是优优教程网的官方小红书账号，专注于分享各种设计小教程、实用技巧，也有各种有助于提升审美和拓展知识面的灵感。如果你刚开始学习平面设计，优优分享的各种字效、排版和海报设计教程肯定可以让你惊呼“学到了！"。另外也别忘了多去优优教程网看看，上面有更多系统性的免费自学教程等着大家探索和学习 ~

四、做设计的小肥肥 直达： https://www.xiaohongshu.com/user/profile/59a034dc5e87e76012cc4f66

肥肥是优设训练营的金牌讲师，也是 Adobe 官方教程的合作设计师。她专注分享各种好看又实用的海报设计教程，制作的“超逼真折纸文字效果”教程在小红书上获得了 80000+ 的点赞和收藏，被很多做设计的小伙伴学习借鉴，是名副其实的网红设计师。肥肥老师还会根据节日和设计流行趋势制作对应的视频教程，帮助大家学习最新最有用的设计知识和技巧。

五、全蛋 AIR 直达： https://www.xiaohongshu.com/user/profile/5cee12ed000000001201e2d6

全蛋是优设网的设计总监，网红字体优设标题黑的主创之一，在版式设计上有自己独特的见解和风格。他日常会在小红书上分享与版式设计、字体混搭、文字组编排相关的设计干货，也会不定期以视频的方式讲解海报排版的思路，想学习字体混搭、提升版式设计能力的小伙伴千万不要错过这个宝藏账号~

六、Asen-阿森 直达： https://www.xiaohongshu.com/user/profile/601fa1f50000000001005ed9

阿森是优设训练营插画课的金牌讲师、视觉中国签约画师。她擅长画面的色彩光影处理，会定期在小红书上更新各种手绘小知识和原创插画创作思路，现在也在坚持每天更新色彩速涂。如果你也在学习绘画，可以关注阿森老师，和她探讨你在绘画过程中遇到的问题。

七、插画师小光 sir 直达： https://www.xiaohongshu.com/user/profile/5ff3b6c7000000000101d9e4

小光老师是优设百万人气插画师，擅长 IP 形象、表情包、Q 版头像及各种商业插画，他经常在小红书上分享各种 Q 版人物的绘画技巧。随着 AI 技术的发展，小光老师也在积极探索 AI 在插画上色、2D 转 3D 方面的应用，分享了很多基础入门教程，想学习相关内容的小伙伴可以多多关注。

八、wuli_石头 直达： https://www.xiaohongshu.com/user/profile/5c5c4e59000000001d033eba

石头老师是优设大课堂的金牌讲师，拥有扎实的手绘功底，也精通 Procreate 绘画 。他擅长欧美插画风格的人物造型，能用简单的色块和线条生动准确地刻画人物的外形及性格特征。石头老师经常在小红书上分享人物造型和光影速涂方面的技巧和创作思路，喜欢人物插画的小伙伴不要错过。

以上就是本期的为大家推荐的 8 个小红书账号，非常适合设计师和插画师日常浏览，感兴趣的话就马上打开小红书关注起来吧~ 喜欢本期推荐的话请大家多多点赞收藏进行支持，之后会继续为大家推荐更多干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~

推荐阅读:

虎年“hú”利！资深插画师手把手教你100%成功上架微信表情包 农历虎年越来越近，家中挂起的条条腊肉，街边装饰的串串红灯笼，都让过年的氛围越来越浓，大家想放假的心情是不是也越来越迫不及待了呢？

阅读文章 >

不会3D怎么做立体海报？3个案例教会你！ hello，大家好，我是小肥肥，又和大家见面了。

阅读文章 >

ControlNet 的作用是通过添加额外控制条件，来引导 Stable Diffusion 按照创作者的创作思路生成图像，从而提升 AI 图像生成的可控性和精度。在使用 ControlNet 前，需要确保已经正确安装 Stable Diffusion 和 ControlNet 插件。如还未安装，可以参考这篇文章...

ControlNet 的作用是通过添加额外控制条件，来引导 Stable Diffusion 按照创作者的创作思路生成图像，从而提升 AI 图像生成的可控性和精度。在使用 ControlNet 前，需要确保已经正确安装 Stable Diffusion 和 ControlNet 插件。如还未安装，可以参考这篇文章中的教程进行安装部署：

超详细！AI 绘画神器 Stable Diffusion 基础教程 一、AI 绘画工具的选择与运用 1. 工作场景下 AI 绘画工具的选择 目前文生图的主流 AI 绘画平台主要有三种：Midjourney、Stable Diffusion、DALL·E。

阅读文章 >

目前 ControlNet 已经更新到 1.1 版本，相较于 1.0 版本，ControlNet1.1 新增了更多的预处理器和模型，原有的模型也通过更好的数据训练获得了更优的性能。以下我做简要梳理，想要了解更多内容可以参考作者的文档： https://github.com/lllyasviel/ControlNet-v1-1-nightly

ControlNet 的使用方式非常灵活，既可以单模型应用，也可以多模型组合应用。清楚 ControlNet 的一些原理方法后，可以帮助我们更好的提升出图效果。以下通过一些示例，简要介绍 ControlNet 的实际用法。

一、ControlNet 单模型应用 1. 线稿上色

方法： 通过 ControlNet 边缘检测模型或线稿模型提取线稿（可提取参考图片线稿，或者手绘线稿），再根据提示词和风格模型对图像进行着色和风格化。

应用模型： Canny、SoftEdge、Lineart。

Canny 边缘检测：

Canny 是比较常用的一种线稿提取方式，该模型能够很好的识别出图像内各对象的边缘轮廓。

使用说明（以下其它模型同理）：

展开 ControlNet 面板，上传参考图，勾选 Enable 启用（如果显存小于等于 4G，勾选低显存模式）。 预处理器选择 Canny（ 注意： 如果上传的是已经经过预处理的线稿图片，则预处理器选择 none，不进行预处理），模型选择对应的 control_v11p_sd15_canny 模型。 勾选 Allow Preview 允许预览，点击预处理器旁的?按钮生成预览。 其它参数说明：

Control Weight：使用 ControlNet 生成图片的权重占比影响（多个 ControlNet 组合使用时，需要调整权重占比）。 Starting Control Step：ControlNet 开始参与生图的步数。 Ending Control Step：ControlNet 结束参与生图的步数。 Preprocessor resolution：预处理器分辨率，默认 512，数值越高线条越精细，数值越低线条越粗糙。 Canny 低阈值/高阈值：数值越低线条越复杂，数值越高线条越简单。 Canny 示例：（保留结构，再进行着色和风格化）

SoftEdge 软边缘检测：

SoftEdge 可以理解为是 ControlNet1.0 中 HED 边缘检测的升级版。ControlNet1.1 版本中 4 个预处理器按结果质量排序：SoftEdge_HED > SoftEdge_PIDI > SoftEdge_HED_safe > SoftEdge_PIDI_safe，其中带 safe 的预处理器可以防止生成的图像带有不良内容。相较于 Canny，SoftEdge 边缘能够保留更多细节。

SoftEdge 示例： （保留结构，再进行着色和风格化）

Lineart 精细线稿提取：

Lineart 精细线稿提取是 ControlNet1.1 版本中新增的模型，相较于 Canny，Lineart 提取的线稿更加精细，细节更加丰富。

Lineart 的预处理器有三种模式：lineart_coarse（粗略模式），lineart_realistic（详细模式），lineart_standard（标准模式），处理效果有所不同，对比如下：

Lineart 示例： （保留结构，再进行着色和风格化）

2. 涂鸦成图

方法：通过 ControlNet 的 Scribble 模型提取涂鸦图（可提取参考图涂鸦，或者手绘涂鸦图），再根据提示词和风格模型对图像进行着色和风格化。

应用模型：Scribble。

Scribble 比 Canny、SoftEdge 和 Lineart 的自由发挥度要更高，也可以用于对手绘稿进行着色和风格处理。Scribble 的预处理器有三种模式：Scribble_hed，Scribble_pidinet，Scribble_Xdog，对比如下，可以看到 Scribble_Xdog 的处理细节更为丰富：

Scribble 参考图提取示例（保留大致结构，再进行着色和风格化）：

Scribble 手动涂鸦示例（根据手绘草图，生成图像）：

也可以不用参考图，直接创建空白画布，手绘涂鸦成图。

3. 建筑/室内设计

方法：通过 ControlNet 的 MLSD 模型提取建筑的线条结构和几何形状，构建出建筑线框（可提取参考图线条，或者手绘线条），再配合提示词和建筑/室内设计风格模型来生成图像。

应用模型：MLSD。

建筑/室内设计风格模型下载：

https://civitai.com/?query=Interior https://civitai.com/?query=building MLSD 示例： （毛坯变精装）

4. 颜色控制画面

方法：通过 ControlNet 的 Segmentation 语义分割模型，标注画面中的不同区块颜色和结构（不同颜色代表不同类型对象），从而控制画面的构图和内容。

应用模型：Seg。

Seg 语义参考： https://docs.qq.com/sheet/DYmtkWG5taWxhVkx2?tab=BB08J2

Seg 示例： （提取参考图内容和结构，再进行着色和风格化）

如果还想在车前面加一个人，只需在 Seg 预处理图上对应人物色值，添加人物色块再生成图像即可。

5. 背景替换

方法：在 img2img 图生图模式中，通过 ControlNet 的 Depth_leres 模型中的 remove background 功能移除背景，再通过提示词更换想要的背景。

应用模型：Depth，预处理器 Depth_leres。

要点：如果想要比较完美的替换背景，可以在图生图的 Inpaint 模式中，对需要保留的图片内容添加蒙版，remove background 值可以设置在 70-80%。

Depth_leres 示例： （将原图背景替换为办公室背景）

6. 图片指令

方法：通过 ControlNet 的 Pix2Pix 模型（ip2p），可以对图片进行指令式变换。

应用模型：ip2p，预处理器选择 none。

要点：采用指令式提示词（make Y into X），如下图示例中的 make it snow，让非洲草原下雪。

Pix2Pix 示例： （让非洲草原下雪）

7. 风格迁移

方法：通过 ControlNet 的 Shuffle 模型提取出参考图的风格，再配合提示词将风格迁移到生成图上。

应用模型：Shuffle。

Shuffle 示例：（根据魔兽道具风格，重新生成一个宝箱道具）

8. 色彩继承

方法：通过 ControlNet 的 t2iaColor 模型提取出参考图的色彩分布情况，再配合提示词和风格模型将色彩应用到生成图上。

应用模型：Color。

Color 示例：（把参考图色彩分布应用到生成图上）

9. 角色三视图

方法：通过 ControlNet 的 Openpose 模型精准识别出人物姿态，再配合提示词和风格模型生成同样姿态的图片。

应用模型：OpenPose。在 ControlNet1.1 版本中，提供了多种姿态检测方式，包含：openpose 身体、openpose_face 身体+脸、openpose_faceonly 只有脸、openpose_full 身体+手+脸、openpose_hand 手，可以根据实际需要灵活应用。

OpenPose 角色三视图示例：

要点：上传 openpose 三视图，加载 charturner 风格模型（ https://civitai.com/?query=charturner ），添加提示词保持背景干净 (simple background, white background:1.3), multiple views

10. 图片光源控制

方法：如果想对生成的图片进行打光，可以在 img2img 模式下，把光源图片上传到图生图区域，ControlNet 中放置需要打光的原图，ControlNet 模型选择 Depth。

应用模型：Depth。

要点：图生图中的所有参数和提示词信息需要与原图生成时的参数一样，具体原图参数可以在 PNG Info 面板中查看并复制。

示例：

二、ControlNet 多模型组合应用 ControlNet 还支持多个模型的组合使用，从而对图像进行多条件控制。ControlNet 的多模型控制可以在设置面板中的 ControlNet 模块中开启：

1. 人物和背景分别控制

方法：设置 2 个 ControlNet，第一个 ControlNet 通过 OpenPose 控制人物姿态，第二个 ControlNet 通过 Seg 或 Depth 控制背景构成。调整 ControlNet 权重，如 OpenPose 权重高于 Depth 权重，以确保人物姿态被正确识别，再通过提示词和风格模型进行内容和风格控制。

应用模型：OpenPose、Seg（自定义背景内容和结构）、Depth。

示例：

2. 三维重建

方法：通过 Depth 深度检测和 Normalbae 法线贴图模型，识别三维目标。再配合提示词和风格模型，重新构建出三维物体和场景。

应用模型：Depth、Normalbae。

示例：

3. 更精准的图片风格化

方法：在 img2img 图生图中，通过叠加 Lineart 和 Depth 模型，可以更加精准的提取图像结构，最大程度保留原图细节，再配合提示词和风格模型重新生成图像。

应用模型：Lineart、Depth。

示例：

4. 更精准的图片局部重绘

方法：在 img2img 图生图的局部重绘中，通过叠加 Canny 和 Inpaint 模型，可以更加精准的对图像进行局部重绘。

应用模型：Canny、Inpaint。

示例：

万字长文！带你从零开始入门AI绘画神器Stable Diffusion 一、本地部署 Stable Diffusion 1. 前言 目前市面上比较权威，并能用于工作中的 AI 绘画软件其实就两款。

阅读文章 >

欢迎关注作者微信公众号：「DUX Design Center」

随着多模态大模型 GPT-4 的发布，“多模态”这个词语走进了大家视野中。然而多模态并不是新兴概念，近年来它已作为一种人机交互的方式运用在了智能汽车中。车机交互是怎样发展至今的？

随着多模态大模型 GPT-4 的发布，“多模态”这个词语走进了大家视野中。然而多模态并不是新兴概念，近年来它已作为一种人机交互的方式运用在了智能汽车中。车机交互是怎样发展至今的？多模态到底是什么？又如何合理的进行多模态设计？

本文将通过介绍汽车与车载系统发展和多模态背景，浅述多模态交互在智能车机发展的原因，并将总结车内的多模态设计应用现状，最后尝试为多模态设计提供可供参考的建议。

7000字干货！电动汽车仪表盘设计指南 当一辆电动汽车驶来时，人们最先注意到的可能是它那极具未来感的外观设计。

阅读文章 >

一、汽车与车载系统的发展 1886 年，卡尔·本茨发明了世界上第一辆获得“汽车制造专利”的三轮汽车。同年 7 月，戴姆勒发明了第一辆四轮汽车。至今一百多年，随着技术、社会和人文环境的发展，汽车已从传统的单一代步工具发展为当下具有多种功能的智慧座舱——可以帮助我们在路上掌握实时交通和新闻，提供音乐和电影流，甚至具有自动驾驶和自动泊车功能。而未来也将进一步朝着人机交互、情感交互的移动载体方向发展。

车载界面与系统也在随之变化，1923 年的福特 T 型车——最早的批量生产的汽车之一，有一个用于监控充电系统的单仪表。1986 年，别克为第七代 Riviera 配备了触摸感应屏幕，这也是第一辆配备触摸屏显示器的量产车。该屏幕可以控制音量、无线电台或调整温度和风扇速度，但这种概念仅在几年后就又被机械按键所取代。

1986 年的别克 Riviera

直到 2010 年初，触摸屏显示器成为一种常见的车内配件。2014 年，苹果推出了集成 iPhone 和汽车仪表屏幕的智能车载系统 CarPlay，Google 也相继推出对标产品 Android Auto，以上两种系统核心都是将手机系统平移到车载屏幕上，让驾驶员可以使用车载屏幕来与手机上的应用互动，以此拓宽系统使用场景、丰富汽车驾驶体验。如今，汽车厂商纷纷在车内嵌入越来越大的电子屏幕，越来越多地取代传统的机械按钮布局，以此来凸显车辆的科技与高端。

2023 年的奔驰 EQS

随着车内集成的功能模块越来越多，智能化提升也给驾驶员带来了更多的操作负担。逐渐增加的信息内容会带来认知过载、分心等问题，驾驶员也从仅需操纵机械按键转变到现在的屏幕触控、语音交流、手势交互……人车之间的交互途径增加并且更加多样化，智能汽车交互不再仅是手机系统在另一个界面的延展，如何在车内实现高效、安全、易用的人机交互是 设计师 们需要针对性思考的。

二、多模态是什么 “模态”（modality）一词是由德国物理与生理学家赫尔姆霍兹提出的生物学概念，即生物凭借感知器官与经验来接收信息的通道，例如人类通过五感来获取外界信息。模态的概念一开始在人文学科领域运用，后来被引申到计算机科学领域，指计算机与物理世界联系的通道。

多模态就是多种通道的结合。即人通过多种感官、综合使用手势、眼动、图文、音视频等不同信息载体与机器进行交流的形式。

例如十几年前的音乐播放器，人们只能通过单一的物理按键来操纵。而现在市面上流行的智能音箱，人们可以通过触摸屏、语音、甚至是手势来与其互动。

左：sony 磁带机 右：小度 x8 智能音箱

近期 OpenAI 发布的多模态大模型 GPT-4 之所以被称为多模态模型，也是因为比起 Chat GPT 只支持单一文字模态输入输出外，GPT-4 可以接受图像和文本这两种模态输入。

人类生来具有多种感官，因此与事物的互动本质上是多模态的，多模态的交互使人可以用最自然的各种行为和通道与机器互动，也是人机交互追求的自然交互的一种。

三、多模态交互设计可以解决驾驶中哪些问题 多模态交互为何会在车载场景愈演愈烈？除了硬件发展以及非驾驶类任务的引入势必会带来模态拓宽外，多模态交互在驾驶场景有着独特的优点。随着技术进步，人们可以在车内做越来越多的事情，比如听歌、看视频、回复信息等。而这些多样的车内任务一定程度上会影响驾驶员的驾驶状态。研究表明，多模态可以降低驾驶员在执行多种任务时的认知负荷，以及减弱驾驶者在多种信息处理中的分心，从而提升驾驶的安全性。

1. 降低认知负荷：高效处理并行任务

多重资源理论（Multiple Resource Theory，MRT）表明，每个通道能处理的信息是有上限的，当信息过载时，会导致人的认知负荷，从而降低效率。比如当你聚精会神看视频时，视觉通道就被极大的占用，更难用余光注意到界面外发生的一切。

主要驾驶任务（比如观察路面、后视镜、车内信息等）大部分需要视觉支持，随后是因控制方向盘和操作辅助功能而产生的肢体操作。

假设，你在开车时想要完成导航这一任务，如果通过在屏幕「手动输入」导航目的地来完成，视觉和肢体通道除了要支持驾驶任务外，还要额外承受导航带来的负荷。如果使用「语音」进行 导航 ，就可以保持视觉与肢体资源不被额外占用，语音通道的引入有效降低了负荷，使驾驶员可以在驾驶时更快更安全的并行处理多个任务。

2. 高效引起注意力：及时提醒司机从分心状态恢复接管辅助驾驶

研究证实，人对于多模态信息的处理速度更快，例如视觉+听觉或视觉+听觉+触觉警告比单一模态的警告更能迅速获得注意，因此更适合对用户反应速度要求较高的驾驶场景。

在手机端的很多界面中，设计师会使用红点、弹窗等方式作为提醒引起用户注意，但是在驾驶场景中，用户的注意力主要集中在路面，依然使用单一的视觉方式提醒，可能会影响反应效率。现在多个车厂辅助巡航的接管提醒已运用多模态信息，如蔚来的辅助巡航需要司机接管时，仪表盘会有视觉弹窗提示，同时配合听觉通道的语音提醒，方向盘和驾驶座椅会有触觉通道的震动提醒。这样的多模态提醒可以使司机快速理解当前状态，并迅速接管驾驶。

四、车内的多模态应用现状 如今，多模态交互越来越多的被运用在量产车上。佐思汽研出具的《2022 年中国汽车多模态交互发展研究报告》将现有车内多模态交互趋势分为五点：

1. 随着大屏、多屏、智能面材的趋势，触控交互应用范围逐渐扩大

中控台大屏让触控成为主流交互方式。例如奔驰 EQS 和小鹏 P7 几乎取消了中控台上的实体按键，使用触控操作替代。

座舱多屏化，使触控的控制范围从前排扩展到车门、车窗、座椅等部件。例如理想 L9 使用 touchbar 取代仪表盘，此通过副驾屏、后排影音屏等实现五屏交互。

理想 L9 的大屏多屏车机

2. 语音交互由被动向主动进化，个性化、情感化需求将得到满足

可见即可说、连续对话、音源定位、免唤醒等语音技术已在 2022 年上市新车上广泛搭载，语音交互方式更加趋向自然。

目前语音功能重点是打造个性化体验，例如蔚来、小鹏、理想等智能化 EV 品牌主要从声音、形象、技能自定义等方面入手进行打造。

小鹏车内语音可同时服务多人

蔚来的智能语音助手 nomi

3. 人脸识别算法的成熟使个性化进一步落地

用户可通过面部识别登陆 ID，实现车辆间的个人信息流转。目前蔚来 ET7/ET5、小鹏 P7/G9、岚图梦想家等车型已搭载相关功能。

小鹏的人脸识别设置界面

4. 手势识别功能作为交互方式的补充

目前手势识别主要应用在多媒体切换、音量控制、电话接听、灯光控制等方面，主要作为交互方式的补充。

福特 EVOS 手势交互

5. 指纹、虹膜、静脉、心率等车内生物识别应用尚处于探索阶段

虹膜/眼球追踪可增强驾驶员检测的精度，通过车内摄像头可实时检测驾驶员在行车过程中的疲劳行为特征（打呵欠、长时间闭眼等），在发生疲劳行为时及时做出预警。

凯迪拉克 Super Cruise 眼球追踪

五、如何进行多模态设计 多模态交互虽然可以使人机交互更自然，在驾驶场景更具优势，但在引入设计时也有需要注意的地方。

前文提到，一个通道接受的信息是有上限的，过多就容易造成认知负荷。然而，每为用户增加一种感官通道实际上也是在引入复杂。不同的任务所消耗的通道资源有所不同，因此适当管理可用的通道资源是非常重要的。针对这些任务，设计师选用哪种模态会更适合？不同模态的增加究竟会降低负荷还是带来负荷？可以通过 VACP 模型，结合“场景-模态-任务”三个维度，把不同感官的资源占用进行量化，从而来探索具体场景与任务下的多模态设计。

VACP 模型( Visual , Auditory , Cognitive , Psychomotor ) 每一个字母都代表不同的感官通道，V 是视觉、A 是听觉、C 是认知、P 是运动。每一个任务所占用的资源都可以被拆解为这 4 类，视觉和听觉是指任务中关注的外部信息，认知是指任务所需的信息处理能力，运动是指完成任务时的身体行为。从 0-7 进行打分，分数越高即该通道资源被占用的程度越高。

VACP 标准打分量表

以下结合 VACP 模型和“场景-任务-模态”举例多模态设计设计流程：

1. 拆解场景

以驾驶场景为例，用户作为驾驶员，在驾驶过程中可拆解为行车、辅助巡航、人工接管、驻车等场景。这里我们选取行车场景。

2. 定义任务

在行车场景下，驾驶员的主要驾驶任务有观察路面情况和车内信息、操纵方向盘和手刹、踩踏油门或刹车等。驾驶员需要通过视觉 V 观察当前路况，通过听觉 A 判断车周是否有鸣笛，通过认知 C 分析前方路况和交通信号，最后通过动作 P 进行相应操作。

3. 分析模态资源占用

将以上任务分别使用 VACP 量表打分，可以汇总得出行车场景下用户的模态资源占用特征。假设 VACP 量表打分分别为：视觉 V5.4；听觉 A2；认知 C4.6；运动 P5.8，即在行车场景中，听觉被占用的程度最低。

4. 对应设计

得到场景下的模态资源占用特征后，可以使用得分较低的模态来作为主要交互模态，以此分担高得分模态的认知负荷。因此我们可以多结合听觉来支持其他任务或接受提醒，例如可以在开车时使用语音对话来完成一些车内设置、音乐播放或进行导航。

综上，多模态设计就是设计师基于场景和任务，善加利用资源较高的通道，对通道资源再分配以达到用户认知平衡的过程。

结语 随着汽车的不断智能化，设计师的挑战是需要将逐渐复杂的车机系统用简单便捷的自然 交互设计 传递给用户，而多模态交互则是这一挑战的解题方法。多模态交互是人机自然交互的发展趋势，如何平衡多模态间的关系、合理的结合多模态进行设计是值得我们反复思考的。

参考文献：

《Engineering psychology and human performance》by Wickens, C. D. 《Attention: From Theory to Practice》by Arthur F. Kramer, Douglas A. Wiegmann, Alex Kirlik 《Visualizing natural language interaction for conversational in-vehicle information systems to minimize driver distraction》by Michael Braun 《2022年中国汽车多模态交互发展市场报告》by 佐思汽研 《Human performance modeling for discrete-event simulation: workload》by Keller, J 欢迎关注作者微信公众号：「We-Design」

随着多模态大模型 GPT-4 的发布，“多模态”这个词语走进了大家视野中。然而多模态并不是新兴概念，近年来它已作为一种人机交互的方式运用在了智能汽车中。车机交互是怎样发展至今的？

随着多模态大模型 GPT-4 的发布，“多模态”这个词语走进了大家视野中。然而多模态并不是新兴概念，近年来它已作为一种人机交互的方式运用在了智能汽车中。车机交互是怎样发展至今的？多模态到底是什么？又如何合理的进行多模态设计？

本文将通过介绍汽车与车载系统发展和多模态背景，浅述多模态交互在智能车机发展的原因，并将总结车内的多模态设计应用现状，最后尝试为多模态设计提供可供参考的建议。

7000字干货！电动汽车仪表盘设计指南 当一辆电动汽车驶来时，人们最先注意到的可能是它那极具未来感的外观设计。

阅读文章 >

一、汽车与车载系统的发展 1886 年，卡尔·本茨发明了世界上第一辆获得“汽车制造专利”的三轮汽车。同年 7 月，戴姆勒发明了第一辆四轮汽车。至今一百多年，随着技术、社会和人文环境的发展，汽车已从传统的单一代步工具发展为当下具有多种功能的智慧座舱——可以帮助我们在路上掌握实时交通和新闻，提供音乐和电影流，甚至具有自动驾驶和自动泊车功能。而未来也将进一步朝着人机交互、情感交互的移动载体方向发展。

车载界面与系统也在随之变化，1923 年的福特 T 型车——最早的批量生产的汽车之一，有一个用于监控充电系统的单仪表。1986 年，别克为第七代 Riviera 配备了触摸感应屏幕，这也是第一辆配备触摸屏显示器的量产车。该屏幕可以控制音量、无线电台或调整温度和风扇速度，但这种概念仅在几年后就又被机械按键所取代。

1986 年的别克 Riviera

直到 2010 年初，触摸屏显示器成为一种常见的车内配件。2014 年，苹果推出了集成 iPhone 和汽车仪表屏幕的智能车载系统 CarPlay，Google 也相继推出对标产品 Android Auto，以上两种系统核心都是将手机系统平移到车载屏幕上，让驾驶员可以使用车载屏幕来与手机上的应用互动，以此拓宽系统使用场景、丰富汽车驾驶体验。如今，汽车厂商纷纷在车内嵌入越来越大的电子屏幕，越来越多地取代传统的机械按钮布局，以此来凸显车辆的科技与高端。

2023 年的奔驰 EQS

随着车内集成的功能模块越来越多，智能化提升也给驾驶员带来了更多的操作负担。逐渐增加的信息内容会带来认知过载、分心等问题，驾驶员也从仅需操纵机械按键转变到现在的屏幕触控、语音交流、手势交互……人车之间的交互途径增加并且更加多样化，智能汽车交互不再仅是手机系统在另一个界面的延展，如何在车内实现高效、安全、易用的人机交互是 设计师 们需要针对性思考的。

二、多模态是什么 “模态”（modality）一词是由德国物理与生理学家赫尔姆霍兹提出的生物学概念，即生物凭借感知器官与经验来接收信息的通道，例如人类通过五感来获取外界信息。模态的概念一开始在人文学科领域运用，后来被引申到计算机科学领域，指计算机与物理世界联系的通道。

多模态就是多种通道的结合。即人通过多种感官、综合使用手势、眼动、图文、音视频等不同信息载体与机器进行交流的形式。

例如十几年前的音乐播放器，人们只能通过单一的物理按键来操纵。而现在市面上流行的智能音箱，人们可以通过触摸屏、语音、甚至是手势来与其互动。

左：sony 磁带机 右：小度 x8 智能音箱

近期 OpenAI 发布的多模态大模型 GPT-4 之所以被称为多模态模型，也是因为比起 Chat GPT 只支持单一文字模态输入输出外，GPT-4 可以接受图像和文本这两种模态输入。

人类生来具有多种感官，因此与事物的互动本质上是多模态的，多模态的交互使人可以用最自然的各种行为和通道与机器互动，也是人机交互追求的自然交互的一种。

三、多模态交互设计可以解决驾驶中哪些问题 多模态交互为何会在车载场景愈演愈烈？除了硬件发展以及非驾驶类任务的引入势必会带来模态拓宽外，多模态交互在驾驶场景有着独特的优点。随着技术进步，人们可以在车内做越来越多的事情，比如听歌、看视频、回复信息等。而这些多样的车内任务一定程度上会影响驾驶员的驾驶状态。研究表明，多模态可以降低驾驶员在执行多种任务时的认知负荷，以及减弱驾驶者在多种信息处理中的分心，从而提升驾驶的安全性。

1. 降低认知负荷：高效处理并行任务

多重资源理论（Multiple Resource Theory，MRT）表明，每个通道能处理的信息是有上限的，当信息过载时，会导致人的认知负荷，从而降低效率。比如当你聚精会神看视频时，视觉通道就被极大的占用，更难用余光注意到界面外发生的一切。

主要驾驶任务（比如观察路面、后视镜、车内信息等）大部分需要视觉支持，随后是因控制方向盘和操作辅助功能而产生的肢体操作。

假设，你在开车时想要完成导航这一任务，如果通过在屏幕「手动输入」导航目的地来完成，视觉和肢体通道除了要支持驾驶任务外，还要额外承受导航带来的负荷。如果使用「语音」进行 导航 ，就可以保持视觉与肢体资源不被额外占用，语音通道的引入有效降低了负荷，使驾驶员可以在驾驶时更快更安全的并行处理多个任务。

2. 高效引起注意力：及时提醒司机从分心状态恢复接管辅助驾驶

研究证实，人对于多模态信息的处理速度更快，例如视觉+听觉或视觉+听觉+触觉警告比单一模态的警告更能迅速获得注意，因此更适合对用户反应速度要求较高的驾驶场景。

在手机端的很多界面中，设计师会使用红点、弹窗等方式作为提醒引起用户注意，但是在驾驶场景中，用户的注意力主要集中在路面，依然使用单一的视觉方式提醒，可能会影响反应效率。现在多个车厂辅助巡航的接管提醒已运用多模态信息，如蔚来的辅助巡航需要司机接管时，仪表盘会有视觉弹窗提示，同时配合听觉通道的语音提醒，方向盘和驾驶座椅会有触觉通道的震动提醒。这样的多模态提醒可以使司机快速理解当前状态，并迅速接管驾驶。

四、车内的多模态应用现状 如今，多模态交互越来越多的被运用在量产车上。佐思汽研出具的《2022 年中国汽车多模态交互发展研究报告》将现有车内多模态交互趋势分为五点：

1. 随着大屏、多屏、智能面材的趋势，触控交互应用范围逐渐扩大

中控台大屏让触控成为主流交互方式。例如奔驰 EQS 和小鹏 P7 几乎取消了中控台上的实体按键，使用触控操作替代。

座舱多屏化，使触控的控制范围从前排扩展到车门、车窗、座椅等部件。例如理想 L9 使用 touchbar 取代仪表盘，此通过副驾屏、后排影音屏等实现五屏交互。

理想 L9 的大屏多屏车机

2. 语音交互由被动向主动进化，个性化、情感化需求将得到满足

可见即可说、连续对话、音源定位、免唤醒等语音技术已在 2022 年上市新车上广泛搭载，语音交互方式更加趋向自然。

目前语音功能重点是打造个性化体验，例如蔚来、小鹏、理想等智能化 EV 品牌主要从声音、形象、技能自定义等方面入手进行打造。

小鹏车内语音可同时服务多人

蔚来的智能语音助手 nomi

3. 人脸识别算法的成熟使个性化进一步落地

用户可通过面部识别登陆 ID，实现车辆间的个人信息流转。目前蔚来 ET7/ET5、小鹏 P7/G9、岚图梦想家等车型已搭载相关功能。

小鹏的人脸识别设置界面

4. 手势识别功能作为交互方式的补充

目前手势识别主要应用在多媒体切换、音量控制、电话接听、灯光控制等方面，主要作为交互方式的补充。

福特 EVOS 手势交互

5. 指纹、虹膜、静脉、心率等车内生物识别应用尚处于探索阶段

虹膜/眼球追踪可增强驾驶员检测的精度，通过车内摄像头可实时检测驾驶员在行车过程中的疲劳行为特征（打呵欠、长时间闭眼等），在发生疲劳行为时及时做出预警。

凯迪拉克 Super Cruise 眼球追踪

五、如何进行多模态设计 多模态交互虽然可以使人机交互更自然，在驾驶场景更具优势，但在引入设计时也有需要注意的地方。

前文提到，一个通道接受的信息是有上限的，过多就容易造成认知负荷。然而，每为用户增加一种感官通道实际上也是在引入复杂。不同的任务所消耗的通道资源有所不同，因此适当管理可用的通道资源是非常重要的。针对这些任务，设计师选用哪种模态会更适合？不同模态的增加究竟会降低负荷还是带来负荷？可以通过 VACP 模型，结合“场景-模态-任务”三个维度，把不同感官的资源占用进行量化，从而来探索具体场景与任务下的多模态设计。

VACP 模型( Visual , Auditory , Cognitive , Psychomotor ) 每一个字母都代表不同的感官通道，V 是视觉、A 是听觉、C 是认知、P 是运动。每一个任务所占用的资源都可以被拆解为这 4 类，视觉和听觉是指任务中关注的外部信息，认知是指任务所需的信息处理能力，运动是指完成任务时的身体行为。从 0-7 进行打分，分数越高即该通道资源被占用的程度越高。

VACP 标准打分量表

以下结合 VACP 模型和“场景-任务-模态”举例多模态设计设计流程：

1. 拆解场景

以驾驶场景为例，用户作为驾驶员，在驾驶过程中可拆解为行车、辅助巡航、人工接管、驻车等场景。这里我们选取行车场景。

2. 定义任务

在行车场景下，驾驶员的主要驾驶任务有观察路面情况和车内信息、操纵方向盘和手刹、踩踏油门或刹车等。驾驶员需要通过视觉 V 观察当前路况，通过听觉 A 判断车周是否有鸣笛，通过认知 C 分析前方路况和交通信号，最后通过动作 P 进行相应操作。

3. 分析模态资源占用

将以上任务分别使用 VACP 量表打分，可以汇总得出行车场景下用户的模态资源占用特征。假设 VACP 量表打分分别为：视觉 V5.4；听觉 A2；认知 C4.6；运动 P5.8，即在行车场景中，听觉被占用的程度最低。

4. 对应设计

得到场景下的模态资源占用特征后，可以使用得分较低的模态来作为主要交互模态，以此分担高得分模态的认知负荷。因此我们可以多结合听觉来支持其他任务或接受提醒，例如可以在开车时使用语音对话来完成一些车内设置、音乐播放或进行导航。

综上，多模态设计就是设计师基于场景和任务，善加利用资源较高的通道，对通道资源再分配以达到用户认知平衡的过程。

结语 随着汽车的不断智能化，设计师的挑战是需要将逐渐复杂的车机系统用简单便捷的自然 交互设计 传递给用户，而多模态交互则是这一挑战的解题方法。多模态交互是人机自然交互的发展趋势，如何平衡多模态间的关系、合理的结合多模态进行设计是值得我们反复思考的。

参考文献：

《Engineering psychology and human performance》by Wickens, C. D. 《Attention: From Theory to Practice》by Arthur F. Kramer, Douglas A. Wiegmann, Alex Kirlik 《Visualizing natural language interaction for conversational in-vehicle information systems to minimize driver distraction》by Michael Braun 《2022年中国汽车多模态交互发展市场报告》by 佐思汽研 《Human performance modeling for discrete-event simulation: workload》by Keller, J 欢迎关注作者微信公众号：「We-Design」