前言 “这个做不了、很难做的啊、我没时间啊、改这个有什么意义吗？不是上次刚改过么怎么又让我改？”

“我都没见过哪个设计师像你这样，不就几个像素而已？有必要扣这么细吗，能用就行了啊。还改？！我觉得这已经很好看了啊，这么搞很麻烦的啊……”

各位设计师是不是已经开始按耐不住摩拳擦掌了，以上场景在跟开发提需求和设计走查的时候经常碰到，或是无奈或是生气，但开发就是有无数种理由拒绝你。

毫不客气的说，这个问题一般都会在你职业生涯中的某个阶段碰到，或早或晚，虽迟但到一般不缺席。想必很多 设计师 都踩过下面这个坑…

上线后还原不到位被领导职责“你这设计怎么做的，为什么这里设计成这样?”一对设计稿，一把辛酸泪…你正想极力辩解，不好意思，领导说：“我 只 看 结 果。”

就问你气不气？气不气？

开发到底为什么拒绝你？ 收起大刀，咱先分析一波。这个问题不会随着技术的变化而改变，也不像是方法论拥有固定的解题策略，但是在面试中又经常碰到，比如“开发不配合、还原度不高时怎么办”。这足以说明很多公司都会有这个问题，其实说到底还是人的问题，那我们就来看看“当事人”是怎么说的。

由于某些原因对接过很多开发，也咨询了几个前端朋友。不管开发口头拒绝的原因有多么千奇百怪，一般情况下，开发反感或者不愿意配合设计还原都可以归纳为以下几个原因：

1. 业务紧，任务重

也许是项目赶着上线，也许是一堆需求还未交付，当开发手头有更重要的事情要处理时，他没办法分心或者用额外的劳动力去做设计优化的内容。很多时候给定的工时就那些，若是跟绩效挂钩就更别提了。我做需求改 bug 已经要加班了，还要我配合你调来调去的，是你还会有这个心情吗？

因此设计师也要关注项目的整个排期，尝试着去宏观把握项目进度，做到理解或评估开发的工时。多站在对方的角度考虑现状。再者就是要判断走查结果的优先级，开发侧的用户体验因素如性能、bug 数等要优先于界面还原。毕竟用户体验并不等于界面的开发实现。当连 bug 都没修完的情况下，还死盯着几个像素去抠显然是不妥的。完全可以先把低优先级的问题记录下来，留着某个版本再一起更新优化。

2. 有背职业方向

前端的方向一类偏视觉展示的（动效视觉还原组件搭建等），一类偏数据层面的（算法之类）。共性都需要比较强的数据处理和逻辑能力。

有些开发会十分明确自己的方向，比如往算法类的会认为专注视觉还原侧是在浪费时间，因此在面对该类需求时内心会产生一定的排斥心理。他们经常不关注体验这种东西。

其实像还原这种的都算开发底层的基础能力。就像 UI 有的偏交互有的偏视觉，但一个偏交互的 UI 说不愿意画图标这说不过去吧。说到底本职工作还是设计。

3. 水平不够

设计圈里都流传着这样一句话“没有实现不了的效果，只有不想做的开发”。

不想做更倾向于是态度问题，不会做是能力问题。但所有技术不都是由不会到会么，况且大部分的还原问题借助搜索引擎是可以解决的，只是要权衡学习成本与收益的问题。若是实在基础的问题都不愿意去做，必要的时候可以让设计领导同开发领导反馈。

4. 价值观不一致

有部分开发会不认可设计，你跟他谈对齐亲密性，他跟你说听不懂要下班；他不想也不愿意去接受或了解设计的作用，沉浸在自己的认知体系里，自然也就不会认同你。这种是很少数了，只能说是公司招人不慎，可以尝试多次沟通，依然无果后，与领导反馈。

以上就是常见的开发不愿意配合的原因了，有些情况会由于客观条件确实难以解决，有时候可能睁一只眼闭一只眼就过去了。

那么有什么其他的办法呢？

设计师该怎么做？ 开发本身的问题很多时候我们作为设计师没办法介入，作为设计师，更应该从自身出发去解决问题。

掐指一算对接过的开发也不在少数，软磨硬泡，用尽毕生所学与其斗智斗勇，在耗尽气力之前终习得了一点心法同大家探讨，文末也一同附上了所有用到的工具和宝典配合使用，希望对大家有帮助。

1. 良好的沟通是前提 所有的合作都是基于沟通进行下去的，好的沟通方式会直接决定结果。别一听开发不愿意做上来就急眼干架，友谊的小船说翻就翻，都是同事，不出意外以后还要天天见面的。这样只会显得自己更不专业，冷静冷静…

首先要保持客观，聚焦问题。作为设计师要明确方案解决的问题是什么，为什么要做这个方案，尽可能地深入剖析问题根源，试着对着一个问题连续问自己 5 个为什么。这样在对接需求时，既能做到证明自己的方案是对的，同时也可以游刃有余的回复对方的疑问。

另一方面，在沟通或设计评审时，可以广泛的听取他人的建议，每个人的出发点和认知是不同的，这就意味着看待问题的角度会不一样，多记录并思考别人的视角会更加拓宽自己的思维，这也有利于设计交接。

说了这么多，举几个最常见的可直接落地的实际方案：

1. 条件允许的话，搬个凳子直接坐在开发旁边磨（前期最好也可以带点小零食慰问品，收了礼总得给个面子改改吧，这招通常都很管用），面对面沟通细节是最高效的。

有一些开发压根不懂设计，基本的对齐都看不出来，不是不愿意做，是真的看不出来。不要笑，一大把。这种方式虽然前期比较耗时间，但既可以培养感情，同时比聊天式的沟通更清晰高效。因为面对面的沟通能够感受到你的情绪和状态，有句话怎么说来着“线上聊千遍，不如线下见一面”。

2. 尽量跟开发混好点。比如有球局就一起去打打、有机会就一起吃吃饭、平时有聚会就多玩玩唠唠嗑。混熟了调个样式什么的那还不是分分钟的事情。

3. 在解释自己的方案时，可以用“我有解释清楚吗”而不是“我这么说你听得懂吧？”多站在听者的角度去阐述。

2. 有一定的前端基础常识 别担心，我并不会在这里提如何敲代码。想必很多从事设计师的朋友一部分原因是被代码劝退了，二选一选了设计。

设计师没有要求一定要会写代码，但做到看懂一些常规的内容其实不会很难，一方面提高我们走查还原的效率，一方面也是自己“专业”的体现，提高开发信任感，同时沟通也能更顺畅。

熟悉主流 UI 框架

当前市面上最主要的就 3 个：移动端 H5 的 Vant，PC 端的 Element 和 Ant。官网都有组件库的源文件，导入 sketch 就可以直接调用了。

这里顺带提一嘴，element 是基于 vue 开发的，而 ant 主流是 react，但也有 vue 版（ https://2x.antdv.com/docs/vue/introduce-cn ）

因此动手前一定要提前跟前端确认用哪套框架再进行设计。尤其是 B 端，非大团队是没有足够的人力和资源去搞源生的。大部分公司前期的开发都是基于 ant 或 Element，可直接用官方组件做设计稿，市面上的话 Element 的占有率还是会偏多一些。

考虑到开发效率与成本，基本上样式都是基于框架调整的，所以碰到差距非常大的样式最好是提前跟前端确认。

走查工具的应用

再提工具之前，建议大家学习了解一下“盒模型”的概念，它是前端设计布局还原设计稿的基础，下面要讲的工具也会用到，篇幅有限，关于盒模型的内容就不展开了，有兴趣的可以自行搜索。

写给设计师的速成指南：一小时快速了解 CSS 基础 这一章，我们开始学习 CSS 样式表有关的知识点，通过 CSS 来控制 HTML 标签和元素的样式的方法和规范。

阅读文章 >

不知道大家有没有遇到过以下这种场景：

开发上线后发现实际效果跟预期的有点差距，可能想微调字体大小或者间距或者某个颜色，要么屁颠屁颠求开发大爷调整一下，要么就自己再用软件做调整试错，这些方法也不是不行，但是有种更快捷的方式。下面提到的两个工具就可以帮到你。

浏览器审查定位，快速试错

第一步：键盘 F12 或鼠标右键点击“检查”调出如图所示的代码界面。

第二步：点击右上角的小箭头，再移动到左侧页面寻找你想查看的任何元素，比如“UI 设计_百度百科”，鼠标移上去时就可以看到基础的元素属性了。

第三步：单击刚刚要选择的元素“UI 设计_百度百科”，在右侧就会自动定位到对应的代码，双击可以自己随便打字，按 enter 立即生效，有时候测试文本极限值的时候用这个方法就不用再打开 sketch 敲文本了。

第四步：定位元素，设计试错。重头戏来了，还是选中刚刚的“UI 设计_百度百科”为例，点击代码块右上角的“Computed”，很好，现在映入眼帘的这个大色块就是传说中的盒模型了。简单理解就是前端在实现时，每个元素都用类似于盒子的这种模式一层套一层实现的，没错，你也可以理解为套娃。

鼠标移动到对应的某一层，就可以看到每一层对应在界面的哪个位置。比如这里的 padding 就是对应左侧界面的绿色条高度：10px。

那快速试错又怎么理解呢？比如我们现在想调整“UI 设计_百度百科”上面的间距，点击下方的“Filter”，输入 padding 就可以看到这个数值了。

点击箭头直达修改路径，双击修改直接生效。

要改其他的属性同理。这样就避免了请开发大爷帮忙，也省去了用软件去调整试错设计效果了。

为了方便大家理解，我录了个小视频，大家可以直接配合食用。

以上的方法技巧比较投机，适合实在害怕或者没有时间学习代码的同学，用这个方法可以帮助你省下很多时间。

当然这只是很小的一个例子，应用在各种场景后会有很多新发现的，就比如某些在线设计的网址可以用这种方式拿到原始图片，大家可以自己多去尝试。

走查神器：CSS Peeper

CSS Peeper 是一款 Chrome 浏览器插件。主要用来辅助走查，如果你是得了看到代码就头疼的病，F12 审查也帮不了你，那这款绝对是你的最佳良药了。

1. 快速查看元素属性以及间距。字号、行高、色值、字重、元素间距，哪里不懂点哪里，验收原来还可以如此轻松。

2. 预览网页所有色值。只要有不按规范的基本无所遁形，全站色值给你扒过来，查颜阅色，我是专业的。

3. 一键下载网站图片素材。下载图片什么的那是信手拈来，图标 banner 任意素材，只要你是图，我就下的来。

就问你香不香吧。

以上两款都可以帮助我们快速的验收，回归主题，这一节主要提到的是了解前端基础常识，其实主要还是为了更好的交接，说到这就顺带提一下设计交付的小技巧：

1. 除了交付静态图外，还要带上交互说明。比如基础的字段极限值、图标的 hover、禁用状态、适配方案等等，这些是产品不一定考虑的到的，在设计执行过程中可以另起一个画板一并写下来，避免开发时的频繁沟通。

另外涉及微交互/难实现或难描述的样式，都可以拿现成已上线的成品给到开发去做参考，直接调用代码、学习或改动都可以增加他们的效率或者提高他们去做的意愿。毕竟说再多不如见一面，动态效果总比文案描述要容易理解，不是所有开发都能够看一眼静态图就知道怎么实现。

2. 设计稿完成后在交付开发时要有一次正式的交接，也可以带上测试，大概阐述一下设计稿的一些还原、交互难点以及注意点，毕竟还未正式介入开发，若有问题可以及时处理。小的问题一般在开发执行时才会碰到，到时再给到设计支持就行了。

3. 注意标注平台的设计稿布局和分组。先给大家感受一下普遍的在线平台设计图，包括但不限于蓝湖、慕客、Codesign 等。

很多时候画布一多，设计稿全堆一起，就算是设置好对齐，隔开间距，但还是遭不住一多就难以定位的问题。就算是产品自带的分散功能也没办法解决。

开发一点进来，我是谁？我在哪？我要点哪里？图一多就乱难免会引起一定的不适感。

那么有什么解决办法吗？

这个时候可以把设计稿按类别/模块整理清楚，一个模块的设计稿尽量不要超过 10 张，多了就考虑建一个子类别，另外要多建一个画板做好分组。同时平台自带的分组功能也要应用上，设计稿的命名也要准确便于利用搜索去定位。

最后就是按版本建立大的文件夹存放设计稿。切忌所有的稿都放在一个画布里，多了不方便找是其次的，卡到想你锤烂屏幕的心才是最难受的。

既然一直谈体验，那么看稿的开发就是我们的核心用户了，好的阅览体验说不定能带来更高的代码效率呢。千万不要小看这些细节，都是一些小事情，无外乎命个名以及拖动拖动画板，耐心一点也就几分钟的事。这些都是个人能力与专业的体现。

3. 建立走查机制 前面讲的都是基于个人角度出发，而建立走查机制有点偏团队侧了。将走查纳入整个产品设计流程的一部分，提测后就可以进入走查阶段了，过程中需要记录并与开发沟通修改还原问题。

一来可追溯防背锅（你懂的），二来让还原的问题有沉淀，方便我们去记录和复盘。

类似这样的表格模板，因为各个团队大小和工作模式都不一样，所以字段会有所差异，有的也有产、设、测共同维护的表。这个可以按实际情况参考这个模板适当增加删减，另外走查时除了视觉类的，也可以通过交互自查表去做一些验证，查缺补漏。

其中特别注意的一点就是走查反馈尽量写的细致一些。比如截图后在图片上带上箭头指向，同时配合文字填写在“问题描述”那一列里，是间距差了还是不对齐等等，有色值给错的就把正确的色值也标注上。

最后，就算存在赶时间赶项目的情况，也要有基础的设计底线，有些原则性的内容不能随意更改，比如通用的设计准则、一致性等，设计师需要根据实际情况把握好这个平衡点，对走查内容做筛选沉淀。

4. 提升设计在团队的影响力 这里的“设计”不仅是指设计师本人，还可以引申到具体的设计输出、设计团队等一切跟设计相关的人和事务。

比如做一些设计知识分享、设计团队（或个人）项目的复盘总结，让结果呈现更加的专业化，期间还可以引入用户的声音、用户研究结论、数据分析等。这些都是建立信任、提高影响力的方式，长期执行下来会带来很大价值的。

5. 培养开发的用户体验意识 开发的设计意识越高，设计落地自然就越顺畅。一方面通过上面提到的技术分享耳濡目染，不断提高开发侧的设计认知。

另一方面相关考核可以把开发侧的用户体验因素权重提高。比如，稳定性、性能、系统资源占用与消耗、bug 数、bug 解决率等，同时在招聘时也适当做一些筛选。再者就是常说的界面还原度了，视觉、交互动效与优化等，可以通过验收次数等来做一定的量化。

不过要达到这一点比较难，尤其是刚建立的小团队。过程涉及多方协作，还要具体看开发侧的认知和配合情况，需要基于人和现有的工作流去建立起设计共识，因此还是得细水长流，逐个攻破。

结尾 以上提到的种种是对开发不配合，设计难还原等相关问题的思考，经验有限，不一定能解决所有情况，具体的落地也会因人而异。如果实在接受不了也改变不了现状，在实力允许的情况下大不了就换咯，大团队在流程上肯定要更规范和成熟的。

我也遇到过很贴心的开发小哥，他甚至可以与你一起探讨解决方案，视觉还原什么的都是基操，压根不用你担忧。这种的开发只能说是可遇不可求了，碰到了一定抓住好好珍惜~

如何进行有效的设计沟通？我总结了这7个技巧 Netflix 制作了一部艺术纪录片，名叫《Abstract：The Art of Design 》，这部纪录片探访全球创意艺术名家，分享这些世界顶级设计领域的设计师所持的创意艺术理念、工作方式等。

阅读文章 >

欢迎关注作者微信公众号：「Andy聊设计」

前言 用户体验 是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考，这是每个设计师所追求的。这篇文章举了大量的例子，来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。

即刻 圈子点赞-不同圈子，不同的点赞表达

1. 使用场景

在不同社区或不同话题下，给别人点赞的含义是不同的，如何更好地贴合用户感知。

2. 设计思考

设计目标：解决用户在浏览圈子时，通过符号快速感知当前是什么圈子，丰富的图案彩蛋给用户探索空间提升圈子活跃度。

设计方案：即刻作为兴趣社区，圈子是一大特色，可以快速找到中意的圈子。

为了增加趣味性以及产品特色，通过在点赞图标做不同尝试。

把小手点赞用圈子同关联图案代替，例如：（街头摄影扫街组-相机代替点赞）、（一起听播客-头戴耳机代替点赞）、（不好笑便利店-反转的微笑代替点赞）等等。

趣味性的同时，把不同圈子的含义也通过图标表达出来，给用户文字和图标双重理解，强化产品感知，形成品牌记忆。是一个细致的洞察点，值得学习。

网易云音乐 唱片彩蛋-神奇的老鹰飞出屏外

1. 使用场景

一些经典影视流传至今，并伴随用户点滴岁月，有时听一首歌会带来回忆与重温，如何给予用户更多情感与惊喜。

2. 设计思考

设计目标：解决听觉享受的单一模式，给用户视听双重享受，产生记忆点，用情感绑定用户粘性。

设计方案：在听哈利波特主题曲（Hedwig’s Theme）1 分钟左右时，黑胶唱片中飞出一只老鹰，冲出画面。

当我在听歌时，看到这一场景瞬间惊了一下，之后更多是温暖的感觉，让我对网易云音乐产生了一定听歌享受，不仅如此，还在评论区积极留言与互动，这些举动都为评论区增加了活跃度，间接提高产品 UGC 做贡献。

网易蜗牛读书 时间阅读- 通过限制阅读时间，给予用户阅读珍惜感

1. 使用场景

阅读收费会让人有读书持续性，控制阅读时长同样会让用户感到时间稀缺性从而提高阅读效率。

2. 设计思考

设计目标：解决 DAU 问题，通过 1 小时阅读打造产品特点，同时沉淀目标用户群体。

设计方案：当打开 App 进入阅读页面时，后台自动从 60 分钟逐渐递减。

当剩余 0 分钟时不可阅读书籍，并且底部有明确的时间显示，给用户一种时间宝贵的感受。从而提高阅读效率，专注阅读同时，用户对产品也会有更深的记忆点，间接提高用户活跃度，毕竟免费无限时长的书籍可能在手机里存放了 1 年都没有打开过。打造时间稀缺性，让用户产生强烈动机，用户更愿意读书，产品 DAU 提升一举两得。

飞猪 锁定状态 – 贴合场景，易于理解更易传播给用户强感知

1. 使用场景

每次购买车票都会出现出票中的弹窗，显示进度条状态，有时在进度条上做文章往往会产生更大的设计价值。

2. 设计思考

设计目标：降低出票过程的等待焦虑，结合业务给用户状态感知，从而产生品牌记忆提高使用黏性。

设计方案：在出票弹窗中，用火车车身代替进度条展示。

当进度增加，火车由左向右移动，车尾用行驶中的速度感表示，在弹窗页中火车在持续前进，贴合用户场景，相比单一进度条，此做法有效降低用户等待焦虑同时提升产品亮点，达到用户加深印象的作用。

美团外卖 点餐提醒- 多点食物时，温馨提醒避免铺张浪费

1. 使用场景

当点外卖时，有时会一不小心点了好多，吃不完也退不掉的情况。

2. 设计思考

设计目标：解决用户多点食物时无感知问题，提高点餐易用性，给予用户友好使用体验。

设计方案：在商家点餐页面中，当重复点两份套餐或相同食物时，会在顶部呼出一个提示窗口，点餐请适量，环保又健康。

虽然提示文案固定，但给予用户的是贴心的关心，情感化的背后，给用户更多是产品的温暖一面，弱化冷冰冰的感觉。

酷狗音乐 悬浮窗-强化运营，同时视觉降噪二者结合

1. 使用场景

常置的悬浮层时常会遮挡部分信息，再滑动浏览时会进行遮挡与干扰。

2. 设计思考

设计目标：解决频效问题，即强化运营浮窗又提高滑动浏览时的内容检索，提高浏览体验。

设计方案：在有悬浮窗的页面，用户通过向上滑动页面，悬浮窗进行透明度显示，透出底部信息，增加页面浏览完整性。

当停止后，悬浮窗显示，给予用户强感知。类似的做法还有滑动时悬浮窗划入屏外，只展示三分之一或更小的区域，来有效提升页面阅读统一性。

酷狗音乐 播放状态-歌名与歌词流畅切换，满足快捷预览需求

1. 使用场景

在悬浮层听歌时，往往想要一遍浏览内容一遍查看实时歌词，毕竟有的歌曲好听想要跟着哼唧但无奈看不到歌词的情况，但又想同时一心二用，浏览评论或查看其他内容。

2. 设计思考

设计目标：解决悬浮播放器查看实时歌词功能，提高听歌看歌词易用性。

设计方案：当用户播放一首歌曲返回首页后，底部悬浮播放器会显示歌曲名称。

用户想看实时歌词时，通过在悬浮区域向右滑动手势，能看到黑胶唱片向右移动的动画，并且歌名消失，出现歌词显示，同步人声位置，有种卡拉 OK 的感觉，让用户清晰锁定当前歌曲的歌词位置，提升查看体验。

大数据行程码 箭头缩放-实时动态，有效降低截屏展示风险

1. 使用场景

疫情防控，人人有责。为保障用户出行安全，避免截屏出行导致经过风险地区而不自知的情况，同时为预防二次传播提供保障。

2. 设计思考

设计目标：解决部分用户用截图侥幸过安检的心态，提高大数据行程码的专业权威性，避免风险提升用户安全保障。

设计方案：在通信行程卡页面中，给予圆圈箭头缩放动画，相比静态图片，此方法更具实时性与动态性，在开发层面只需要写缩放区间，难度系数弱。

但对于想要截屏抱有侥幸心理的用户增加了一层屏障。这种细小的 设计细节 ，不就是为了更好服务用户做出的体验向改版点嘛。同时通过设计保障业务安全且可持续性。

乐刻运动 室温反馈- 问卷调查的良好反馈，降低面对面询问时用户的不良感受

1. 使用场景

健身房温度有时过冷或过热，原因在于室外突然降温而室内还是保持原有温度，身体温差大难以适应。

店长线下统计人力物力成本，且很难覆盖到所有人，也有用户不想被人打扰，但又不好意思直接向店长反馈情况。

2. 设计思考

设计目标：解决室内温度用户满意度统计问题，提高统计效率，快捷调整室内温度，给用户良好训练环境。

设计方案：乐刻健身房进门要通过 App 扫码开门，这就表示用户要进行训练必须使用 App。

通过用户扫码开门后，呼出底部浮层，反馈当前室温是否适宜，并且有文字提示“匿名反馈，店长不会看到你的信息”给用户隐私保障。同时疫情期间降低面对面询问室温是否合适的风险，也减少用户尴尬回答的情况，是一个良好的用户体验向设计。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束，我们下期再见！

10个产品细节剖析，看看大厂是如何做设计的！ 前言 作为一名 UI 设计师，要有一双洞察美的眼睛，挖掘产品中令人喜欢与贴心的地方，为自己后续的产品设计打造基础。

阅读文章 >

欢迎关注作者微信公众号：草蓉三石

前言 用户体验 是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考，这是每个设计师所追求的。这篇文章举了大量的例子，来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。

即刻 圈子点赞-不同圈子，不同的点赞表达

1. 使用场景

在不同社区或不同话题下，给别人点赞的含义是不同的，如何更好地贴合用户感知。

2. 设计思考

设计目标：解决用户在浏览圈子时，通过符号快速感知当前是什么圈子，丰富的图案彩蛋给用户探索空间提升圈子活跃度。

设计方案：即刻作为兴趣社区，圈子是一大特色，可以快速找到中意的圈子。

为了增加趣味性以及产品特色，通过在点赞图标做不同尝试。

把小手点赞用圈子同关联图案代替，例如：（街头摄影扫街组-相机代替点赞）、（一起听播客-头戴耳机代替点赞）、（不好笑便利店-反转的微笑代替点赞）等等。

趣味性的同时，把不同圈子的含义也通过图标表达出来，给用户文字和图标双重理解，强化产品感知，形成品牌记忆。是一个细致的洞察点，值得学习。

网易云音乐 唱片彩蛋-神奇的老鹰飞出屏外

1. 使用场景

一些经典影视流传至今，并伴随用户点滴岁月，有时听一首歌会带来回忆与重温，如何给予用户更多情感与惊喜。

2. 设计思考

设计目标：解决听觉享受的单一模式，给用户视听双重享受，产生记忆点，用情感绑定用户粘性。

设计方案：在听哈利波特主题曲（Hedwig’s Theme）1 分钟左右时，黑胶唱片中飞出一只老鹰，冲出画面。

当我在听歌时，看到这一场景瞬间惊了一下，之后更多是温暖的感觉，让我对网易云音乐产生了一定听歌享受，不仅如此，还在评论区积极留言与互动，这些举动都为评论区增加了活跃度，间接提高产品 UGC 做贡献。

网易蜗牛读书 时间阅读- 通过限制阅读时间，给予用户阅读珍惜感

1. 使用场景

阅读收费会让人有读书持续性，控制阅读时长同样会让用户感到时间稀缺性从而提高阅读效率。

2. 设计思考

设计目标：解决 DAU 问题，通过 1 小时阅读打造产品特点，同时沉淀目标用户群体。

设计方案：当打开 App 进入阅读页面时，后台自动从 60 分钟逐渐递减。

当剩余 0 分钟时不可阅读书籍，并且底部有明确的时间显示，给用户一种时间宝贵的感受。从而提高阅读效率，专注阅读同时，用户对产品也会有更深的记忆点，间接提高用户活跃度，毕竟免费无限时长的书籍可能在手机里存放了 1 年都没有打开过。打造时间稀缺性，让用户产生强烈动机，用户更愿意读书，产品 DAU 提升一举两得。

飞猪 锁定状态 – 贴合场景，易于理解更易传播给用户强感知

1. 使用场景

每次购买车票都会出现出票中的弹窗，显示进度条状态，有时在进度条上做文章往往会产生更大的设计价值。

2. 设计思考

设计目标：降低出票过程的等待焦虑，结合业务给用户状态感知，从而产生品牌记忆提高使用黏性。

设计方案：在出票弹窗中，用火车车身代替进度条展示。

当进度增加，火车由左向右移动，车尾用行驶中的速度感表示，在弹窗页中火车在持续前进，贴合用户场景，相比单一进度条，此做法有效降低用户等待焦虑同时提升产品亮点，达到用户加深印象的作用。

美团外卖 点餐提醒- 多点食物时，温馨提醒避免铺张浪费

1. 使用场景

当点外卖时，有时会一不小心点了好多，吃不完也退不掉的情况。

2. 设计思考

设计目标：解决用户多点食物时无感知问题，提高点餐易用性，给予用户友好使用体验。

设计方案：在商家点餐页面中，当重复点两份套餐或相同食物时，会在顶部呼出一个提示窗口，点餐请适量，环保又健康。

虽然提示文案固定，但给予用户的是贴心的关心，情感化的背后，给用户更多是产品的温暖一面，弱化冷冰冰的感觉。

酷狗音乐 悬浮窗-强化运营，同时视觉降噪二者结合

1. 使用场景

常置的悬浮层时常会遮挡部分信息，再滑动浏览时会进行遮挡与干扰。

2. 设计思考

设计目标：解决频效问题，即强化运营浮窗又提高滑动浏览时的内容检索，提高浏览体验。

设计方案：在有悬浮窗的页面，用户通过向上滑动页面，悬浮窗进行透明度显示，透出底部信息，增加页面浏览完整性。

当停止后，悬浮窗显示，给予用户强感知。类似的做法还有滑动时悬浮窗划入屏外，只展示三分之一或更小的区域，来有效提升页面阅读统一性。

酷狗音乐 播放状态-歌名与歌词流畅切换，满足快捷预览需求

1. 使用场景

在悬浮层听歌时，往往想要一遍浏览内容一遍查看实时歌词，毕竟有的歌曲好听想要跟着哼唧但无奈看不到歌词的情况，但又想同时一心二用，浏览评论或查看其他内容。

2. 设计思考

设计目标：解决悬浮播放器查看实时歌词功能，提高听歌看歌词易用性。

设计方案：当用户播放一首歌曲返回首页后，底部悬浮播放器会显示歌曲名称。

用户想看实时歌词时，通过在悬浮区域向右滑动手势，能看到黑胶唱片向右移动的动画，并且歌名消失，出现歌词显示，同步人声位置，有种卡拉 OK 的感觉，让用户清晰锁定当前歌曲的歌词位置，提升查看体验。

大数据行程码 箭头缩放-实时动态，有效降低截屏展示风险

1. 使用场景

疫情防控，人人有责。为保障用户出行安全，避免截屏出行导致经过风险地区而不自知的情况，同时为预防二次传播提供保障。

2. 设计思考

设计目标：解决部分用户用截图侥幸过安检的心态，提高大数据行程码的专业权威性，避免风险提升用户安全保障。

设计方案：在通信行程卡页面中，给予圆圈箭头缩放动画，相比静态图片，此方法更具实时性与动态性，在开发层面只需要写缩放区间，难度系数弱。

但对于想要截屏抱有侥幸心理的用户增加了一层屏障。这种细小的 设计细节 ，不就是为了更好服务用户做出的体验向改版点嘛。同时通过设计保障业务安全且可持续性。

乐刻运动 室温反馈- 问卷调查的良好反馈，降低面对面询问时用户的不良感受

1. 使用场景

健身房温度有时过冷或过热，原因在于室外突然降温而室内还是保持原有温度，身体温差大难以适应。

店长线下统计人力物力成本，且很难覆盖到所有人，也有用户不想被人打扰，但又不好意思直接向店长反馈情况。

2. 设计思考

设计目标：解决室内温度用户满意度统计问题，提高统计效率，快捷调整室内温度，给用户良好训练环境。

设计方案：乐刻健身房进门要通过 App 扫码开门，这就表示用户要进行训练必须使用 App。

通过用户扫码开门后，呼出底部浮层，反馈当前室温是否适宜，并且有文字提示“匿名反馈，店长不会看到你的信息”给用户隐私保障。同时疫情期间降低面对面询问室温是否合适的风险，也减少用户尴尬回答的情况，是一个良好的用户体验向设计。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束，我们下期再见！

10个产品细节剖析，看看大厂是如何做设计的！ 前言 作为一名 UI 设计师，要有一双洞察美的眼睛，挖掘产品中令人喜欢与贴心的地方，为自己后续的产品设计打造基础。

阅读文章 >

欢迎关注作者微信公众号：草蓉三石

大家好，我是和你们聊设计的花生。

Google、Twitter、Netflix、Pinterest、Producthunt 这些网站大家都肯定非常熟悉了，他们都是各自领域的翘楚，为我们享受丰富多彩的互联网生活提供了诸多便利。

那这些知名互联网公司是如何一步步发展壮大的呢？感兴趣的话，就和我一起去「Museum of Websites」里看看吧~

Museum of Websites 「网站直达」 https://www.kapwing.com/museum-of-websites

Museum of Websites 是一个展示知名互联网公司发展 历史 的网站，由美国公司 Kapwing 开发运营。

Kapwing 是一家研发在线视频剪辑软件的互联网公司，为什么要开发这样一个网站呢？可能是因为爱吧 —— 至少网站首页上这样说的。

Museum of Websites 界面十分简洁，规整成列着一些知名互联网公司的 Logo。点击进入就能够看到此公司的重要发展节点。

像我们 设计师 非常熟悉的 Pinterest，通过 Museum of Websites 我们可以了解到，它是在 2010 年正式推出的，并且在很长时间内保持封闭测试的状态——内容对所有人可见，但只有受邀请的用户才能注册登入。

而我们熟悉的红色大头钉 logo 并非一开始就有，Pinterest 在 2012 年才正式确定将红色的作为其标志色。也是从这一年开始，Pinterest 迅速发展壮大。

还有流媒体播放平台巨头 Netflix，从《绝命毒师》《行尸走肉》《纸牌屋》，到《鱿鱼游戏》《华灯初上》，Netflix 自制或投资的高质量作品不计其数。

但是通过 Museum of Websites，我们会发现 Netflix 在成立之初，提供的是 DVD 租赁服务，与其现在的主业务相去甚远。

Netflix 在 2007 年推出线上流媒体服务，摆脱 DVD 直接通过网络为会员提供视频观看服务。而在 2013 年才推出了自制剧《纸牌屋》，一举爆红。Netflix 从此转型，正式走上原创影视制作的道路。

Museum of Websites 会提供每一时期网站的主界面存档图片，在看这些互联网公司的 发展史 时，我们可以一窥设计风格的发展变化。比如 Logo 设计风格的变化，由原来带立体阴影的具象化图标，逐步往抽象扁平的方向演变，字体也以简约现代的无衬线体为主。

还有网页设计，也是越来越简洁直观：

如果你对网页设计发展史感兴趣的话，还可以看看另一个专门记录网页设计变化的网站 「 Web Design Museum 」 。

「Web Design Museum」里保存了各种由过去程序员和设计师打造的网页和视觉设计，非常有趣。特别是里面的时间线功能，可以清晰的了解知名网站的网页设计风格发展史。

这座网页设计博物馆，让我回到拨号才能上网冲浪的千禧年 你还记得二十年前的互联网吗？

阅读文章 >

总结 除了我提到的 Pinterest 和 Netflix，Museum of Websites 里面还展示了 YouTube、Facebook、Airbnb、Reddit、Producthunt 等诸多知名互联网公司的发展史。

那些重要的发展节点，在网站上只几句话就概括了，但背后的故事远没有这么简单。Netflix 如何扛过当时垄断行业的巨头 Blockbuster 的打压，一步步成为新的行业霸主；Twitter 如何力压同类产品，成为引爆新时代社交潮流的佼佼者；Producthunt 创始人如何从零开始，打造出世界上最大最专业的互联网产品交流展示平台等，都值得我们去做进一步的探索。

互联网世界变化莫测，一切都有可能发生。不知道创建 Museum of Websites 网站的互联网公司 Kapwing，是否有机会在未来的某一天，将自己的公司也列入其中呢？

收藏Museo这个网站，各大博物馆和美术馆的免费图片都在这里了！ 前几天介绍过「法国罗浮宫资料库提供 48 万张收藏艺术品图库免费下载」： [link https://www.uisdc.com/louvre-site-des-collections] 其中还提到不少世界知名的美术馆、博物馆也都将馆藏数位化，即使在疫情期间无法出国一样可以透过网络搜

阅读文章 >

大家好，我是和你们聊设计的花生。

Google、Twitter、Netflix、Pinterest、Producthunt 这些网站大家都肯定非常熟悉了，他们都是各自领域的翘楚，为我们享受丰富多彩的互联网生活提供了诸多便利。

那这些知名互联网公司是如何一步步发展壮大的呢？感兴趣的话，就和我一起去「Museum of Websites」里看看吧~

Museum of Websites 「网站直达」 https://www.kapwing.com/museum-of-websites

Museum of Websites 是一个展示知名互联网公司发展 历史 的网站，由美国公司 Kapwing 开发运营。

Kapwing 是一家研发在线视频剪辑软件的互联网公司，为什么要开发这样一个网站呢？可能是因为爱吧 —— 至少网站首页上这样说的。

Museum of Websites 界面十分简洁，规整成列着一些知名互联网公司的 Logo。点击进入就能够看到此公司的重要发展节点。

像我们 设计师 非常熟悉的 Pinterest，通过 Museum of Websites 我们可以了解到，它是在 2010 年正式推出的，并且在很长时间内保持封闭测试的状态——内容对所有人可见，但只有受邀请的用户才能注册登入。

而我们熟悉的红色大头钉 logo 并非一开始就有，Pinterest 在 2012 年才正式确定将红色的作为其标志色。也是从这一年开始，Pinterest 迅速发展壮大。

还有流媒体播放平台巨头 Netflix，从《绝命毒师》《行尸走肉》《纸牌屋》，到《鱿鱼游戏》《华灯初上》，Netflix 自制或投资的高质量作品不计其数。

但是通过 Museum of Websites，我们会发现 Netflix 在成立之初，提供的是 DVD 租赁服务，与其现在的主业务相去甚远。

Netflix 在 2007 年推出线上流媒体服务，摆脱 DVD 直接通过网络为会员提供视频观看服务。而在 2013 年才推出了自制剧《纸牌屋》，一举爆红。Netflix 从此转型，正式走上原创影视制作的道路。

Museum of Websites 会提供每一时期网站的主界面存档图片，在看这些互联网公司的 发展史 时，我们可以一窥设计风格的发展变化。比如 Logo 设计风格的变化，由原来带立体阴影的具象化图标，逐步往抽象扁平的方向演变，字体也以简约现代的无衬线体为主。

还有网页设计，也是越来越简洁直观：

如果你对网页设计发展史感兴趣的话，还可以看看另一个专门记录网页设计变化的网站 「 Web Design Museum 」 。

「Web Design Museum」里保存了各种由过去程序员和设计师打造的网页和视觉设计，非常有趣。特别是里面的时间线功能，可以清晰的了解知名网站的网页设计风格发展史。

这座网页设计博物馆，让我回到拨号才能上网冲浪的千禧年 你还记得二十年前的互联网吗？

阅读文章 >

总结 除了我提到的 Pinterest 和 Netflix，Museum of Websites 里面还展示了 YouTube、Facebook、Airbnb、Reddit、Producthunt 等诸多知名互联网公司的发展史。

那些重要的发展节点，在网站上只几句话就概括了，但背后的故事远没有这么简单。Netflix 如何扛过当时垄断行业的巨头 Blockbuster 的打压，一步步成为新的行业霸主；Twitter 如何力压同类产品，成为引爆新时代社交潮流的佼佼者；Producthunt 创始人如何从零开始，打造出世界上最大最专业的互联网产品交流展示平台等，都值得我们去做进一步的探索。

互联网世界变化莫测，一切都有可能发生。不知道创建 Museum of Websites 网站的互联网公司 Kapwing，是否有机会在未来的某一天，将自己的公司也列入其中呢？

收藏Museo这个网站，各大博物馆和美术馆的免费图片都在这里了！ 前几天介绍过「法国罗浮宫资料库提供 48 万张收藏艺术品图库免费下载」： [link https://www.uisdc.com/louvre-site-des-collections] 其中还提到不少世界知名的美术馆、博物馆也都将馆藏数位化，即使在疫情期间无法出国一样可以透过网络搜

阅读文章 >

上期给大家普及了可视化大屏设计的概况，从硬件、GIS 数据、三维建模、动效设计、图形技术、渲染引擎的技术架构等六个方向的总结。今天给大家分享可视化中 UI 设计相关知识的总结。

可视化大屏设计快速入门指南，看这篇就够了！ 大家好，我是小六。

阅读文章 >

可视化大屏 UI 上文说到可视化设计是一个综合类交叉学科，同样在大屏 UI 设计中也是一个相对复杂的流程，我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑，推导设计方案。

设计前：一定要对用户需求充分分析和理解，要知道大屏的展示场景及设计分辨率，大屏的拼接方法都要有一定的了解，最后是跟开发沟通下实现的工具与方法。

设计中：构思布局，可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析，方便自己找参考。颜色上背景深色为主，为了更好地聚焦，数据可以采用亮色，有一定的对比关系，便于业务信息传达。字体上可以采用系统默认字体，数字采用特殊字体包的形式（这块根据实际需求，切记不要照搬）。图表选择恰当的展示形式，同时保证视觉上的统一（分清页面的主次关系，图表的展示切莫设计过度，容易造成抢主体）

设计后：再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示 demo 去现场测试，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。

下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。

1. 布局 通过硬件设备信息可以得到可视化的设计尺寸，基于尺寸新建设计画布后，第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达，都需要 设计师 对业务深入了解后才能用数据助力业务决策。

常见的大屏布局：居中结构、左右结构两种常见的布局形式以常规的 16：9 模板为例，下面列举的一些常见的布局形式，供大家参考。

居中结构

异形超宽拼接屏幕。

左右结构

布局的原则一定要主次分明，根据业务需求抽取关键性的指标，提取主要信息。可以在纸上大概画一下，然后在软件里具体细化布局。避免次要信息的面积过大，喧宾夺主，影响整体的视觉效果。

2. 风格 提起可视化大屏，大家都会联想到：科技感、FUI、HUD 这些关键词，可以说可视化大屏跟科技、数据这两词是强关联的，风格上也基本是这一类方向。

定义设计风格：一般会基于业务需求场景去定义几个设计关键词，根据关键词去找一些参考图，推导出贴合业务的设计风格。

我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例，我们在做设计的时候，只需调整卡片和标题的装饰，就能够展现出不同的设计风格。

3. 主视觉 主视觉部分大致分为：地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。

地球：粒子地球、地图贴图、地球模型。

地图：第三方在线地图（百度、高德、腾讯、谷歌）基于地图开放平台进行个性化配置。或者通过地理位置数据建模：如全国和各个省份的轮廓模型。

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

智慧城市：GIS 参数化生成简模和重点楼宇定制化建模。

行业类：多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

以下图片源于 DATAV

主视觉是可视化设计中的一大难点，不光是设计落地的时候也会有需要注意的点，这里建议大家在做之前一定要充分跟开发沟通，确认好技术选型，方便后期输出跟开发更加高效的对接。

4. 信息图表 图表的 设计原则 是易理解、可实现，能够准确表达数据意图，给用户传达明确信息。

8000 字深度长文！B端数据可视化设计指南（信息图表篇） 在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。

阅读文章 >

以下图片源于网络，如侵删

上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图，选择对应的数据图表。

比较

两个及以上变量数据，一是基于分类不同的对比，二是基于时间维度的对比。常见的图表：条形图、柱状图、雷达图、玫瑰图、桑基图等

联系

两个及以上数据之间的相关性，随时间变化比较关联。常见的图表：散点图、气泡图、多级饼图、热力图、力导向图等。

构成

指标里的数据都由哪几部分组成、每部分占比如何。常见的图表：饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

分布

指标里的数据主要集中在什么范围、表现出怎样的规律，想表达两个数据点之间数量的演变过程。常见的图表：阶梯折线图、面积图、直方图等。

基于图表的类型可分为：饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

饼图

适合展示分类的占比情况，不适合展示分类过多（超过 9 条数据）或者差别不明显的场景。

线形图

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时，不适合使用折线图。同样，当折线的条数过多时不建议将多条线绘制在一张图上。

柱状图

柱状图提供了分类数据的可视化展示，基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组，例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

混合图

折线图和堆叠柱状图的组合图表。同时显示两个坐标轴，用于展示两种不同类型的数据。

适用于带有细分分类的累计数据大小以及与之相关的趋势数据，例如在过去十年全国三大产业的具体产值，以及 GDP 增长率。

面积图

面积图强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

散点图

散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合，每个点都有一个变量的值决定水平轴上的位置，另一个变量的值决定垂直轴上的位置。

通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。

极坐标图

基于直角坐标系的径向变形（相当于把直角坐标卷起来）。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

关系图

可以展示数据的占比情况，还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。

树图

树图是一种流行的利用包含关系表达层次化数据的可视化方法，是研究多元目标问题的一般工具。 适合展示数据之间的层级关系，适合 6 条以上数据。

桑基图

一种特定类型的流程图，用于描述一组值到另一组值的流向，图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移，也帮助我们确定各部分流量在总体中的大概占比情况。

漏斗图

一种直观表现业务流程中转化情况的分析工具，总是开始于一个 100%的数量，结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析，比如流程流量分析、转化率分析。

热力图

将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布，适合做数据的预测统计，可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

其他图表

词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比，可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小，同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况，不适合展示分类过多或者差别不明显的场景。

5. 字体 文字是可视化展示中最重要的构成要素之一，可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体，与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

大屏设计中，中文字体一般会采用浏览器默认字体（微软雅黑、思源黑体、苹方等）页面中标题会采用特殊字体处理，常用的字体有：优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

优设标题黑官方下载！优设首款免费可商用中文字体来啦！ 设计初衷 这两年为了给读者更好的阅读体验，优设网/优优网的首屏 Banner 都有专人设计，为了让图片更有设计感和冲击感，每一张图我们都重新设计了字体。

阅读文章 >

6. 规范 建立规范的主要目的是：保证设计的一致性、提高开发效率和还原度、方便迭代 ，辅助设计和开发更好地完成设计的协作。

可视化设计中规范一般会分为：色彩、文字、图表、标题控件等，跟网页端规范同理，这里就不一一赘述了。

7. 动效 大 数据可视化 大屏设计少不了动效，动效是可视化重要的组成部分，动效能增加观感体验，凸显关键产品内容、强调功能信息关联，帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主，影响用户阅读，反而弱化了数据的展示。

动效的设计原则

动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类，用于突出产品核心功能和特点。界面信息按照一定的规律呈现，引导用户的视觉流向。

好的大屏设计应该是数据展示模块最好动效不宜过多，要有一定的主次关系变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效要结合数据变化，考虑极端情况的展示效果，最终输出一套完整的动效方案。

结语 以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项，能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明，后面会陆续更新相关文章，感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议，我们一起前行。

数据可视化大屏该如何设计？结合实战案例来教你！ 什么是数据可视化大屏 每年的双十一，天猫都会在狂欢节中直播战绩。

阅读文章 >

欢迎关注作者微信公众号：「小六可视化设计」

上期给大家普及了可视化大屏设计的概况，从硬件、GIS 数据、三维建模、动效设计、图形技术、渲染引擎的技术架构等六个方向的总结。今天给大家分享可视化中 UI 设计相关知识的总结。

可视化大屏设计快速入门指南，看这篇就够了！ 大家好，我是小六。

阅读文章 >

可视化大屏 UI 上文说到可视化设计是一个综合类交叉学科，同样在大屏 UI 设计中也是一个相对复杂的流程，我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑，推导设计方案。

设计前：一定要对用户需求充分分析和理解，要知道大屏的展示场景及设计分辨率，大屏的拼接方法都要有一定的了解，最后是跟开发沟通下实现的工具与方法。

设计中：构思布局，可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析，方便自己找参考。颜色上背景深色为主，为了更好地聚焦，数据可以采用亮色，有一定的对比关系，便于业务信息传达。字体上可以采用系统默认字体，数字采用特殊字体包的形式（这块根据实际需求，切记不要照搬）。图表选择恰当的展示形式，同时保证视觉上的统一（分清页面的主次关系，图表的展示切莫设计过度，容易造成抢主体）

设计后：再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示 demo 去现场测试，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。

下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。

1. 布局 通过硬件设备信息可以得到可视化的设计尺寸，基于尺寸新建设计画布后，第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达，都需要 设计师 对业务深入了解后才能用数据助力业务决策。

常见的大屏布局：居中结构、左右结构两种常见的布局形式以常规的 16：9 模板为例，下面列举的一些常见的布局形式，供大家参考。

居中结构

异形超宽拼接屏幕。

左右结构

布局的原则一定要主次分明，根据业务需求抽取关键性的指标，提取主要信息。可以在纸上大概画一下，然后在软件里具体细化布局。避免次要信息的面积过大，喧宾夺主，影响整体的视觉效果。

2. 风格 提起可视化大屏，大家都会联想到：科技感、FUI、HUD 这些关键词，可以说可视化大屏跟科技、数据这两词是强关联的，风格上也基本是这一类方向。

定义设计风格：一般会基于业务需求场景去定义几个设计关键词，根据关键词去找一些参考图，推导出贴合业务的设计风格。

我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例，我们在做设计的时候，只需调整卡片和标题的装饰，就能够展现出不同的设计风格。

3. 主视觉 主视觉部分大致分为：地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。

地球：粒子地球、地图贴图、地球模型。

地图：第三方在线地图（百度、高德、腾讯、谷歌）基于地图开放平台进行个性化配置。或者通过地理位置数据建模：如全国和各个省份的轮廓模型。

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

智慧城市：GIS 参数化生成简模和重点楼宇定制化建模。

行业类：多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

以下图片源于 DATAV

主视觉是可视化设计中的一大难点，不光是设计落地的时候也会有需要注意的点，这里建议大家在做之前一定要充分跟开发沟通，确认好技术选型，方便后期输出跟开发更加高效的对接。

4. 信息图表 图表的 设计原则 是易理解、可实现，能够准确表达数据意图，给用户传达明确信息。

8000 字深度长文！B端数据可视化设计指南（信息图表篇） 在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。

阅读文章 >

以下图片源于网络，如侵删

上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图，选择对应的数据图表。

比较

两个及以上变量数据，一是基于分类不同的对比，二是基于时间维度的对比。常见的图表：条形图、柱状图、雷达图、玫瑰图、桑基图等

联系

两个及以上数据之间的相关性，随时间变化比较关联。常见的图表：散点图、气泡图、多级饼图、热力图、力导向图等。

构成

指标里的数据都由哪几部分组成、每部分占比如何。常见的图表：饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

分布

指标里的数据主要集中在什么范围、表现出怎样的规律，想表达两个数据点之间数量的演变过程。常见的图表：阶梯折线图、面积图、直方图等。

基于图表的类型可分为：饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

饼图

适合展示分类的占比情况，不适合展示分类过多（超过 9 条数据）或者差别不明显的场景。

线形图

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时，不适合使用折线图。同样，当折线的条数过多时不建议将多条线绘制在一张图上。

柱状图

柱状图提供了分类数据的可视化展示，基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组，例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

混合图

折线图和堆叠柱状图的组合图表。同时显示两个坐标轴，用于展示两种不同类型的数据。

适用于带有细分分类的累计数据大小以及与之相关的趋势数据，例如在过去十年全国三大产业的具体产值，以及 GDP 增长率。

面积图

面积图强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

散点图

散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合，每个点都有一个变量的值决定水平轴上的位置，另一个变量的值决定垂直轴上的位置。

通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。

极坐标图

基于直角坐标系的径向变形（相当于把直角坐标卷起来）。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

关系图

可以展示数据的占比情况，还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。

树图

树图是一种流行的利用包含关系表达层次化数据的可视化方法，是研究多元目标问题的一般工具。 适合展示数据之间的层级关系，适合 6 条以上数据。

桑基图

一种特定类型的流程图，用于描述一组值到另一组值的流向，图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移，也帮助我们确定各部分流量在总体中的大概占比情况。

漏斗图

一种直观表现业务流程中转化情况的分析工具，总是开始于一个 100%的数量，结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析，比如流程流量分析、转化率分析。

热力图

将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布，适合做数据的预测统计，可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

其他图表

词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比，可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小，同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况，不适合展示分类过多或者差别不明显的场景。

5. 字体 文字是可视化展示中最重要的构成要素之一，可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体，与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

大屏设计中，中文字体一般会采用浏览器默认字体（微软雅黑、思源黑体、苹方等）页面中标题会采用特殊字体处理，常用的字体有：优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。

优设标题黑官方下载！优设首款免费可商用中文字体来啦！ 设计初衷 这两年为了给读者更好的阅读体验，优设网/优优网的首屏 Banner 都有专人设计，为了让图片更有设计感和冲击感，每一张图我们都重新设计了字体。

阅读文章 >

6. 规范 建立规范的主要目的是：保证设计的一致性、提高开发效率和还原度、方便迭代 ，辅助设计和开发更好地完成设计的协作。

可视化设计中规范一般会分为：色彩、文字、图表、标题控件等，跟网页端规范同理，这里就不一一赘述了。

7. 动效 大 数据可视化 大屏设计少不了动效，动效是可视化重要的组成部分，动效能增加观感体验，凸显关键产品内容、强调功能信息关联，帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主，影响用户阅读，反而弱化了数据的展示。

动效的设计原则

动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类，用于突出产品核心功能和特点。界面信息按照一定的规律呈现，引导用户的视觉流向。

好的大屏设计应该是数据展示模块最好动效不宜过多，要有一定的主次关系变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效要结合数据变化，考虑极端情况的展示效果，最终输出一套完整的动效方案。

结语 以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项，能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明，后面会陆续更新相关文章，感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议，我们一起前行。

数据可视化大屏该如何设计？结合实战案例来教你！ 什么是数据可视化大屏 每年的双十一，天猫都会在狂欢节中直播战绩。

阅读文章 >

欢迎关注作者微信公众号：「小六可视化设计」

去年我看了很多交互作品集，假如问我最怕在交互设计师或者 UI 设计师 的作品集里看到哪个东西，那必然是这个叫“ 用户画像 /Persona”的玩意，假如你的作品集里也有这个部分，并且和我下面这张图相似度超过 80%，建议看下去：

2018 年 ux planet 有一篇爆文叫“用户体验的巨大泡沫：从 UX 到产品设计”，其中有句话尤为经典： “创意咨询”从业者（你可以理解成体验设计师）更好懂了：他们都读一样的书，说一样的话。

Only Innovation Consultants are more predictable: all reading the same books, all saying the same predictable things.

做“用户画像”就是体验设计师的标配。每个做交互的都会像一个跳大神的挥舞手里的符箓一样挥舞“用户画像”，然后会把它放在神龛里供起来。尽管谁也不知道这个“画像”到底是从哪来的，是谁归纳的、怎么归纳的、基于什么归纳的？但设计师或者设计部门仍然怀着一种朴素的期待，双手合十等待“用户画像”像符箓一样发挥一些神秘的功效，导致用户体验马上从无到有，稳中向好——至少让今年的汇报稳中向好。

出现这样的问题，某种程度上也不能怪交互设计师，特别是刚入行的交互设计师。因为“用户画像”这个方法的愿景的确有道理、成果的确很吸引人、制作方法又的确极其含糊。我自己也或参与或主导过几场用户画像的制作，接下来我们细聊一下为什么做用户画像、以及怎么做更好。

是什么和不是什么 在说怎么做“用户画像”之前，我想先澄清一个横亘在许多人心头的疑惑点：在互联网公司，很多部门都会提“用户画像”，体验部门会提、产品部会提、商业分析/市场部也会提。实际上至少存在两种完全不同的“用户画像”概念，在设计部门我们使用的是作为设计推导工具的“用户画像”，而不是用户分层模型的“用户画像”。记住、消化这一点。

“用户画像”或者“persona”在 80～90 年代由艾伦·库珀 Alan Cooper，AKA“交互设计之父”提出，他当时提倡“在设计中，完全不要采用「用户/user」这个概念，而采用「用户画像/persona」取而代之”。这句话用中文讲可能显得有点怪，可以理解为不要为抽象的使用者做设计，而要将抽象的诉求还原成具体的人，为具体的、可以激发共情的人做设计。这么做是为了：

避免弹性用户 。弹性用户 elastic users 也是库珀发明的概念，他认为假如众多设计者不能对用户形成一致的共识、脑子里面没画面感，那么就难免鸡同鸭讲，你说用户需要 A 功能，我说用户也需要 B 功能。如此一来“用户”的诉求就在不断被拉扯，最后导致设计没有边界、设计者各做各的。

避免自我参照设计（Self-referential design），也就是“我要我觉得” 。库珀认为设计师或者开发者不是用户，因此不应该以己度人、根据自己的诉求和技能水平假设用户的诉求和技能水平，最后设计出自嗨的产品。

因此可以看出，库珀定义的、交互设计师嘴里的“用户画像”是一种为了提升共情、聚焦设计目标的设计工具，它最大的目的有三：

1. 让设计师可以调动共情能力

2. 让设计方案更有针对性

3. 提升设计/开发部门之间的协作共识

这三个目的都针对设计部门内部产出环节，在它们的作用下，用户画像提供了一种相对宏观的视角，可以帮助设计师直观的从感受上理解用户，辅佐设计师做出合理的设计决策，但：

1. 其精确度、解释力都非常有限，这种作为传统设计工具的“用户画像”无法直接推导出、应用于推荐系统逻辑。

2. 因为它是设计推导工具，它必须围绕着一个设计问题或者设计解决方案展开。设计师可以说只关注用户在这个问题上的相关行为：目标、动机、困惑等。而一切和问题解决无关的因素，比如一些人口统计学变量，都可以靠直觉或“经验”编一个，因为它们不对用户的行为产生关键性影响，也就不对设计方案产生影响。比如你正在做一个“个人中心”模块，用户是男是女、在湖南还是在广东，对这个模块的使用有影响吗？很难有。因此，作为设计工具的“用户画像”结论无法用于推广投放/营销这种非常受人口统计学因素（男女老幼）影响的领域。

我们再展开讲讲推荐算法的“用户画像”与体验设计的“用户画像”之间的区别。

做推荐算法的基本逻辑，是通过用户的特征、过往行为来推断用户的喜好、预测用户的行为，从而给他们合适的推荐；每个自然人都会有一个或多个标签或对应到一种画像。你会根据一些固定逻辑将用户分成不同的类型、打上不同的标签，比如这个用户只逛不买、最近 20 天看了同一款商品 20 次就是不下单，推测可能觉得贵，那这个用户就被打上了“价格敏感”的标记，系统则会根据这个标记匹配对应的广告：比如在开屏页推送团购广告，从而提升广告转化率。

而设计说的人物画像，是从许许多多的自然人用户中抽象出一个具有行为共性的“虚拟人类”；自然人与最终的画像并不一定有完全的对应关系。比如我们访谈了 100 个用户，50 个用户觉得价格是购买商品的第一考虑因素，这 50 个用户中 38 个用户一般等打折最低才下单；20 个用户喜欢收藏优惠券；15 个觉得现在的产品对优惠信息展示不足。

那么最后我们会将这 50 个用户目标一致的用户抽象成一个用户画像：他叫甄便宜，他每天收集优惠券、他一定会等最低价那天才会下单、他对现在的产品信息展示满意度一般。在现实中，这 50 个用户里可能没有一个人完全符合“甄便宜”的全部特征，也有可能有些人不仅符合这个用户画像，还符合其他的用户画像。

用户画像的迷思 既然用户画像这么好那么好，那我到底应该怎么做呢？——当你发出这一声疑问的时候，恭喜你找到了那个会让设计师顾左右而言他的问题点。即使是最近很火的、Google的coursera课，讲到这个部分的时候也会泛泛的建议你“做一些用户调研，或者至少做一些电话调研……然后开始把你的结论画成用户画像”。

好在交互入门教科书：交互设计精髓 about face 里，库珀稍微透露了一些做用户画像的方法手段，具体分成以下几步：

1. 分组：根据角色把用户分组

2. 访谈：在每个组内部进行访谈，并且找到一些行为变量（一般指行为、态度、动机等）

3. 映射：将找到的行为变量分成离散型的与连续型的，把连续型的变量画成单维度的轴（比如很不满意->很满意）并且将每个自然人受访用户放在这些轴上。

4. 聚类：看看是不是有很多个自然人用户，在 6-8 个轴上的位置都很接近。这说明这 6-8 个轴代表的行为变量组成了用户画像之间的关键差异点。

5. 优化：修修补补，往关键行为差异点的骨架上增添一些细节：年龄/性别/爱好/名字…

据我自己的实际操作中，这个语焉不详的指南给我造成了很多困难，最大的困难莫过于以下两点：

1. 映射的困难

访谈法得出的结论天然的不适合做程度上的比较。比如当你询问第一个用户产品用起来怎么样时，他说“还行，还可以”，而另一个用户会说“就还行吧，过得去”。这两种反馈孰好孰坏？可能第一个用户的“还行吧”是不错的意思，但第二个用户的“还行吧”是一种礼貌客气的说法，其实他觉得不太行，只是当着我的面不好说出来。

当你的设计组里有多个人同时在处理访谈数据时，问题就更多了。首先每个人对用户反馈的解读是不一样的。比如说这个人觉得“还行”是 4 分的意思，另一个完美主义者可能觉得“还行”必须代表 2 分不满意才对。其次访谈经验不太丰富的研究者，往往很难在遵循结构化访谈提纲、得到结构化的可比较结论的同时，还能挖掘出有价值的观点。最后大家一合计，发现用户 1 在 A 问题上表态了，用户 2 没在 A 问题上表态但在 C 问题上表态了，最后无法比较。

本来作为设计工具的用户画像，其具体操作中就处处充满了研究者个人的偏好和不确定性，再加上不同研究者之间的认知差异，最后的结论就是大写的随缘，换一个体验小组来做可能会得出完全不一样的结论。

2. 聚类的困难

访谈的用户越多，聚类的工作越难——这么说吧，当你访谈的用户接近100个，纯手工聚类、寻找共性的工作就难得几乎逼近不可能了。然而100个用户是否能代表产品所有用户的普遍情况？看你的产品体量，但大概率是太少了。

较少的访谈用户体量，虽然数据是好分析了，但代价则是对总体的代表性减弱了很多。一个无法体现大盘情况的研究，大概率无法获得业务方的支持。这也是为什么很多用户画像做好了以后就被静静放在某个团队文档里，用来证明“我们 UED 今年自驱型业务达标了”，而无法真正纳入使用。

怎么做更好 聊了那么多，接下来我们扣回标题，怎么做用户画像才能真正助力设计、至少征服你的面试官？以下有几个例子。

1. 谨慎地评估你是否需要用户画像

根据库珀自己写在 90 年代出版的《软件创新之路》里的说法，用户画像是“在（用户调研）的过程中发现的副产品”。（这本书英文叫“囚犯管理精神病院 inmates are running the asylum”，不知道为啥中文翻译得这么没意思）在我看来，用户画像只是一种成本比较高的、用聚类的思路+拟人化手段呈现你调研结果的形式，它依赖的底层依据仍然是访谈、问卷、数据分析结论。你不一定要选择用户画像作为呈现设计调研结论的方式。

发展阶段比较早期，远没有形成稳定用户群体的产品不用做用户画像。你大概率没有精力去花费这么大的工作量访谈这么多用户、分析这么多质性研究结论，并且在这个阶段下花费如此之大的精力在用户画像上性价比极低。敏捷地、迅速地分析你能拿到手的早期反馈（比如翻翻微博评价或者简单做些访谈足矣）。

没有迈入精细化运营的 B 端产品不用做用户画像。基于“角色”这个维度分析就足够了。当然你的产品更加精细化以后，可以基于角色这个骨架再去探索每个角色下不同的用户画像差异，并获得更细致的结论，比如 salesforce 就做了这件事（见： https://medium.com/salesforce-ux  ）

最重要的是，假如你不太懂用户画像是什么，不要在作品集里放用户画像。不然询问起执行细节来非常之尴尬，用户调研是工具，不是装饰品。即使你只是简单的在设计稿之前写一些真正影响到你设计方案的问卷结论或者访谈结论，也比放一个包装精美但言之无物的“用户画像”强很多。

2. 定性+定量结合

上面讨论了很多库珀提供的纯访谈法的弊端，主要是分析上非常困难。为了避免这种情况发生，我也和我在其他厂的朋友聊了一会，最后总结出这么一套相对轻松一些的做法：

先定性： 小规模的半结构化甚至开放式访谈，从访谈结论中收集可能影响用户行为的因素（比如用户说“因为我年纪大了，有点看不清字，所以我打开你们的产品以后先根据一个红色按钮的位置猜测放大镜功能在哪里”，那么“年龄”可能是一个影响用户行为的因素）。在这一步不做任何提炼。

再定量： 收集好可能的用户因素后，将这些因素编辑成问卷问题并投放问卷，问卷选肢参考此前访谈结论。（比如询问用户“你的痛点是什么？”选肢则是定性访谈中用户提到的点+一个开放式选项。）

使用定量的聚类工具分析： 比较难解释所以我这里也不打算展开。简单来说，我们会比较问卷中每个人每道题的得分（比如从 1-5），从而推算出不同用户的相似性，从而根据不同的问卷答案，将用户聚类成组。这样做需要一些统计学基础，但好处是一次性解决了定性数据映射、聚类的困难，同时又保证了画像的代表性。

最后使用定性数据填充细节： 做完上一个步骤以后，基于库珀对用户画像的定义，我们需要对用户添加一些人格化的细节。这些细节，比如生活习惯、兴趣爱好，可以从之前的定性数据中抽取，或者补充追加一轮更有针对性的小规模访谈。

3. 合理地呈现你的结论

上文已经说过了，库珀也提到用户画像中有些细节，说得好听是靠“经验推断”，说的难听些是靠编的。你的报告中，哪些是具有坚实证据支撑的聚类结论、哪些是为了提升共情而填充进来的无伤大雅的小细节？研究者有义务向相关方陈述清楚。

无论是在团队内协作或者是放在作品集里，用合理的篇幅展示研究方法、推导过程，最好有用户画像在具体场景和需求下的应用，是提升共识、降低不信任感的合理做法。

超详细！从0到1构建用户画像的流程与方法总结 用户画像作为一种设计工具，可以很好地帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品。

阅读文章 >

欢迎关注作者微信公众号：「白话说交互」

去年我看了很多交互作品集，假如问我最怕在交互设计师或者 UI 设计师 的作品集里看到哪个东西，那必然是这个叫“ 用户画像 /Persona”的玩意，假如你的作品集里也有这个部分，并且和我下面这张图相似度超过 80%，建议看下去：

2018 年 ux planet 有一篇爆文叫“用户体验的巨大泡沫：从 UX 到产品设计”，其中有句话尤为经典： “创意咨询”从业者（你可以理解成体验设计师）更好懂了：他们都读一样的书，说一样的话。

Only Innovation Consultants are more predictable: all reading the same books, all saying the same predictable things.

做“用户画像”就是体验设计师的标配。每个做交互的都会像一个跳大神的挥舞手里的符箓一样挥舞“用户画像”，然后会把它放在神龛里供起来。尽管谁也不知道这个“画像”到底是从哪来的，是谁归纳的、怎么归纳的、基于什么归纳的？但设计师或者设计部门仍然怀着一种朴素的期待，双手合十等待“用户画像”像符箓一样发挥一些神秘的功效，导致用户体验马上从无到有，稳中向好——至少让今年的汇报稳中向好。

出现这样的问题，某种程度上也不能怪交互设计师，特别是刚入行的交互设计师。因为“用户画像”这个方法的愿景的确有道理、成果的确很吸引人、制作方法又的确极其含糊。我自己也或参与或主导过几场用户画像的制作，接下来我们细聊一下为什么做用户画像、以及怎么做更好。

是什么和不是什么 在说怎么做“用户画像”之前，我想先澄清一个横亘在许多人心头的疑惑点：在互联网公司，很多部门都会提“用户画像”，体验部门会提、产品部会提、商业分析/市场部也会提。实际上至少存在两种完全不同的“用户画像”概念，在设计部门我们使用的是作为设计推导工具的“用户画像”，而不是用户分层模型的“用户画像”。记住、消化这一点。

“用户画像”或者“persona”在 80～90 年代由艾伦·库珀 Alan Cooper，AKA“交互设计之父”提出，他当时提倡“在设计中，完全不要采用「用户/user」这个概念，而采用「用户画像/persona」取而代之”。这句话用中文讲可能显得有点怪，可以理解为不要为抽象的使用者做设计，而要将抽象的诉求还原成具体的人，为具体的、可以激发共情的人做设计。这么做是为了：

避免弹性用户 。弹性用户 elastic users 也是库珀发明的概念，他认为假如众多设计者不能对用户形成一致的共识、脑子里面没画面感，那么就难免鸡同鸭讲，你说用户需要 A 功能，我说用户也需要 B 功能。如此一来“用户”的诉求就在不断被拉扯，最后导致设计没有边界、设计者各做各的。

避免自我参照设计（Self-referential design），也就是“我要我觉得” 。库珀认为设计师或者开发者不是用户，因此不应该以己度人、根据自己的诉求和技能水平假设用户的诉求和技能水平，最后设计出自嗨的产品。

因此可以看出，库珀定义的、交互设计师嘴里的“用户画像”是一种为了提升共情、聚焦设计目标的设计工具，它最大的目的有三：

1. 让设计师可以调动共情能力

2. 让设计方案更有针对性

3. 提升设计/开发部门之间的协作共识

这三个目的都针对设计部门内部产出环节，在它们的作用下，用户画像提供了一种相对宏观的视角，可以帮助设计师直观的从感受上理解用户，辅佐设计师做出合理的设计决策，但：

1. 其精确度、解释力都非常有限，这种作为传统设计工具的“用户画像”无法直接推导出、应用于推荐系统逻辑。

2. 因为它是设计推导工具，它必须围绕着一个设计问题或者设计解决方案展开。设计师可以说只关注用户在这个问题上的相关行为：目标、动机、困惑等。而一切和问题解决无关的因素，比如一些人口统计学变量，都可以靠直觉或“经验”编一个，因为它们不对用户的行为产生关键性影响，也就不对设计方案产生影响。比如你正在做一个“个人中心”模块，用户是男是女、在湖南还是在广东，对这个模块的使用有影响吗？很难有。因此，作为设计工具的“用户画像”结论无法用于推广投放/营销这种非常受人口统计学因素（男女老幼）影响的领域。

我们再展开讲讲推荐算法的“用户画像”与体验设计的“用户画像”之间的区别。

做推荐算法的基本逻辑，是通过用户的特征、过往行为来推断用户的喜好、预测用户的行为，从而给他们合适的推荐；每个自然人都会有一个或多个标签或对应到一种画像。你会根据一些固定逻辑将用户分成不同的类型、打上不同的标签，比如这个用户只逛不买、最近 20 天看了同一款商品 20 次就是不下单，推测可能觉得贵，那这个用户就被打上了“价格敏感”的标记，系统则会根据这个标记匹配对应的广告：比如在开屏页推送团购广告，从而提升广告转化率。

而设计说的人物画像，是从许许多多的自然人用户中抽象出一个具有行为共性的“虚拟人类”；自然人与最终的画像并不一定有完全的对应关系。比如我们访谈了 100 个用户，50 个用户觉得价格是购买商品的第一考虑因素，这 50 个用户中 38 个用户一般等打折最低才下单；20 个用户喜欢收藏优惠券；15 个觉得现在的产品对优惠信息展示不足。

那么最后我们会将这 50 个用户目标一致的用户抽象成一个用户画像：他叫甄便宜，他每天收集优惠券、他一定会等最低价那天才会下单、他对现在的产品信息展示满意度一般。在现实中，这 50 个用户里可能没有一个人完全符合“甄便宜”的全部特征，也有可能有些人不仅符合这个用户画像，还符合其他的用户画像。

用户画像的迷思 既然用户画像这么好那么好，那我到底应该怎么做呢？——当你发出这一声疑问的时候，恭喜你找到了那个会让设计师顾左右而言他的问题点。即使是最近很火的、Google的coursera课，讲到这个部分的时候也会泛泛的建议你“做一些用户调研，或者至少做一些电话调研……然后开始把你的结论画成用户画像”。

好在交互入门教科书：交互设计精髓 about face 里，库珀稍微透露了一些做用户画像的方法手段，具体分成以下几步：

1. 分组：根据角色把用户分组

2. 访谈：在每个组内部进行访谈，并且找到一些行为变量（一般指行为、态度、动机等）

3. 映射：将找到的行为变量分成离散型的与连续型的，把连续型的变量画成单维度的轴（比如很不满意->很满意）并且将每个自然人受访用户放在这些轴上。

4. 聚类：看看是不是有很多个自然人用户，在 6-8 个轴上的位置都很接近。这说明这 6-8 个轴代表的行为变量组成了用户画像之间的关键差异点。

5. 优化：修修补补，往关键行为差异点的骨架上增添一些细节：年龄/性别/爱好/名字…

据我自己的实际操作中，这个语焉不详的指南给我造成了很多困难，最大的困难莫过于以下两点：

1. 映射的困难

访谈法得出的结论天然的不适合做程度上的比较。比如当你询问第一个用户产品用起来怎么样时，他说“还行，还可以”，而另一个用户会说“就还行吧，过得去”。这两种反馈孰好孰坏？可能第一个用户的“还行吧”是不错的意思，但第二个用户的“还行吧”是一种礼貌客气的说法，其实他觉得不太行，只是当着我的面不好说出来。

当你的设计组里有多个人同时在处理访谈数据时，问题就更多了。首先每个人对用户反馈的解读是不一样的。比如说这个人觉得“还行”是 4 分的意思，另一个完美主义者可能觉得“还行”必须代表 2 分不满意才对。其次访谈经验不太丰富的研究者，往往很难在遵循结构化访谈提纲、得到结构化的可比较结论的同时，还能挖掘出有价值的观点。最后大家一合计，发现用户 1 在 A 问题上表态了，用户 2 没在 A 问题上表态但在 C 问题上表态了，最后无法比较。

本来作为设计工具的用户画像，其具体操作中就处处充满了研究者个人的偏好和不确定性，再加上不同研究者之间的认知差异，最后的结论就是大写的随缘，换一个体验小组来做可能会得出完全不一样的结论。

2. 聚类的困难

访谈的用户越多，聚类的工作越难——这么说吧，当你访谈的用户接近100个，纯手工聚类、寻找共性的工作就难得几乎逼近不可能了。然而100个用户是否能代表产品所有用户的普遍情况？看你的产品体量，但大概率是太少了。

较少的访谈用户体量，虽然数据是好分析了，但代价则是对总体的代表性减弱了很多。一个无法体现大盘情况的研究，大概率无法获得业务方的支持。这也是为什么很多用户画像做好了以后就被静静放在某个团队文档里，用来证明“我们 UED 今年自驱型业务达标了”，而无法真正纳入使用。

怎么做更好 聊了那么多，接下来我们扣回标题，怎么做用户画像才能真正助力设计、至少征服你的面试官？以下有几个例子。

1. 谨慎地评估你是否需要用户画像

根据库珀自己写在 90 年代出版的《软件创新之路》里的说法，用户画像是“在（用户调研）的过程中发现的副产品”。（这本书英文叫“囚犯管理精神病院 inmates are running the asylum”，不知道为啥中文翻译得这么没意思）在我看来，用户画像只是一种成本比较高的、用聚类的思路+拟人化手段呈现你调研结果的形式，它依赖的底层依据仍然是访谈、问卷、数据分析结论。你不一定要选择用户画像作为呈现设计调研结论的方式。

发展阶段比较早期，远没有形成稳定用户群体的产品不用做用户画像。你大概率没有精力去花费这么大的工作量访谈这么多用户、分析这么多质性研究结论，并且在这个阶段下花费如此之大的精力在用户画像上性价比极低。敏捷地、迅速地分析你能拿到手的早期反馈（比如翻翻微博评价或者简单做些访谈足矣）。

没有迈入精细化运营的 B 端产品不用做用户画像。基于“角色”这个维度分析就足够了。当然你的产品更加精细化以后，可以基于角色这个骨架再去探索每个角色下不同的用户画像差异，并获得更细致的结论，比如 salesforce 就做了这件事（见： https://medium.com/salesforce-ux  ）

最重要的是，假如你不太懂用户画像是什么，不要在作品集里放用户画像。不然询问起执行细节来非常之尴尬，用户调研是工具，不是装饰品。即使你只是简单的在设计稿之前写一些真正影响到你设计方案的问卷结论或者访谈结论，也比放一个包装精美但言之无物的“用户画像”强很多。

2. 定性+定量结合

上面讨论了很多库珀提供的纯访谈法的弊端，主要是分析上非常困难。为了避免这种情况发生，我也和我在其他厂的朋友聊了一会，最后总结出这么一套相对轻松一些的做法：

先定性： 小规模的半结构化甚至开放式访谈，从访谈结论中收集可能影响用户行为的因素（比如用户说“因为我年纪大了，有点看不清字，所以我打开你们的产品以后先根据一个红色按钮的位置猜测放大镜功能在哪里”，那么“年龄”可能是一个影响用户行为的因素）。在这一步不做任何提炼。

再定量： 收集好可能的用户因素后，将这些因素编辑成问卷问题并投放问卷，问卷选肢参考此前访谈结论。（比如询问用户“你的痛点是什么？”选肢则是定性访谈中用户提到的点+一个开放式选项。）

使用定量的聚类工具分析： 比较难解释所以我这里也不打算展开。简单来说，我们会比较问卷中每个人每道题的得分（比如从 1-5），从而推算出不同用户的相似性，从而根据不同的问卷答案，将用户聚类成组。这样做需要一些统计学基础，但好处是一次性解决了定性数据映射、聚类的困难，同时又保证了画像的代表性。

最后使用定性数据填充细节： 做完上一个步骤以后，基于库珀对用户画像的定义，我们需要对用户添加一些人格化的细节。这些细节，比如生活习惯、兴趣爱好，可以从之前的定性数据中抽取，或者补充追加一轮更有针对性的小规模访谈。

3. 合理地呈现你的结论

上文已经说过了，库珀也提到用户画像中有些细节，说得好听是靠“经验推断”，说的难听些是靠编的。你的报告中，哪些是具有坚实证据支撑的聚类结论、哪些是为了提升共情而填充进来的无伤大雅的小细节？研究者有义务向相关方陈述清楚。

无论是在团队内协作或者是放在作品集里，用合理的篇幅展示研究方法、推导过程，最好有用户画像在具体场景和需求下的应用，是提升共识、降低不信任感的合理做法。

超详细！从0到1构建用户画像的流程与方法总结 用户画像作为一种设计工具，可以很好地帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品。

阅读文章 >

欢迎关注作者微信公众号：「白话说交互」