一个小小的播放页，虽然看上去那么的不起眼，但为了满足各类用户人群的特定需求，QQ 音乐就设计了 37 个功能，11 种分享方式…

拓展阅读：

从QQ音乐10.0的产品体验背后，聊聊聚焦Z世代的内容战役 各位好，我又来讲故事了：一个平静的夏日打开了QQ音乐，开屏视频（背景音乐100分）映入眼帘：「奇怪形状」的ip与粉白背景可可爱爱，接着首页出现了，咋一看是个连皮肤都懒得换的大版本更新，对设计师来说一点都不兴奋。

阅读文章 >

你是否每天都在使用 QQ 音乐收听歌曲，但是你有没有观察到 QQ 音乐的播放页其实藏着很多功能。一个小小的播放页，虽然看上去那么的不起眼，仿佛它的功能只是用来切歌、看歌词和单曲循环，但随着 QQ 音乐社交化、娱乐化的发展，如今这个播放页已经成为了一个重要的聚合页入口。本期「设计大侦探」的「细节猎人」，为你解剖 QQ 音乐播放页的 37 个功能，11 种分享方式以及 17 种歌曲海报。

歌曲 「歌曲」是播放页的默认分类，这个分类的功能比较多，所以我把它拆分为「个性化设置」、「听歌场景」、「音乐工具」和「分享方式」四种类型。「个性化设置」和「音乐工具」为用户提供多种音乐偏好的设置，满足各类用户需求，特别是音乐发烧友；「听歌场景」则是根据场景划分听歌需求，用户可以 K 歌、发起跟听，甚至邀请好友一起听，把听歌的行为社交娱乐化；「分享方式」则是利用腾讯强大的社交生态优势，为用户设计了丰富多样化的分享方式和个性化海报，吸引用户分享，传播，从而拉新引流。

个性化设置

银河音效

「银河音效」是为了满足各种耳机发烧友对音质的追求。「银河音效」按照重低音、环绕、曲风等类型进行分类，多达数十种，完美解决各类用户人群的需求。平台还推出独家定制音效，支持适配各类品牌耳机、音响和汽车，吸引用户购买 VIP 会员，激活变现。另外 QQ 音乐还推出一个「声音实验室」的栏目，包含了智能煲机（帮助耳机快速达到最佳状态）、4D 震动和动感闪光，黑科技赋能，让音乐更有趣。

播放设置

「播放设置」是一个为用户提供对音乐播放进行个性化设置的功能，包括无缝播放、淡入/淡出、音量平衡、智能音质增强等功能，可以满足某部分有特定音乐需求的用户。

播放器样式

平台为用户提供了多种播放器样式，包含了黑胶唱机（深、浅）、静态方形、旋转圆形、静态圆形、歌手写真等样式，还支持智能光效和音乐影片的播放背景，满足各类用户对播放器样式个性化设置的需求。

个性主题

「个性主题」为用户提供了丰富多样的主题装扮和头像挂件，包含明星、星座、影视、文艺等各种主题，当用户使用以后，整个 QQ 音乐的界面风格都会随之改变，这就像以前的 QQ 空间装扮，一键换肤，个性又时尚，深受年轻用户喜欢。「个性主题」作为为 QQ 会员独家专享打造的板块，是实现商业变现的重要手段。

收藏和屏蔽

当你喜欢某首歌曲的时候，你可以点击收藏，自动添加到你的默认歌单，这样对用户建立自己的歌单非常有帮助，从而提高用户留存率。而如果你不喜欢它的曲风，或者特别讨厌，你只需要点击屏蔽，平台在播放时会自动跳过，非常方便。

听歌场景

唱歌

「唱歌」是直接跳转到腾讯的另外一款音乐产品全民 K 歌，当用户听歌的时候突然想唱歌，那么可以直接进入全民 K 歌，有效降低用户的流失率，满足用户多场景的需求。

跟听

「跟听」是一个非常有趣的功能，用户进入跟听模式以后，可以邀请朋友加入自己的播放列表，也可以跟听其他用户的歌单。「跟听」为听歌增加了社交互动的属性，目前功能还比较简单，但让听歌的场景变得有趣、好玩。

一起听

「一起听」是一个社交互动式的听歌功能，用户可以邀请好友一起听歌。当朋友进入后，还支持发表情，就像一个聊天室。这就像是专门为一些年轻小情侣量身定制的听歌场景一样，平台还会为用户生成听歌记录，比如一起听歌的时间，听过的歌曲等，甚至还会生成一个心动等级，激发用户为了更高等级使用这个功能。

驾驶模式

「驾驶模式」非常简洁，系统会自动检测用户听歌的环境自动切换。这个功能的设计充分考虑了用户驾车时候需要换歌的场景，提供了语音找歌、个性电台、我喜欢的歌单、最近播放和电台，省去了用户开车时候不方便换歌的痛点， 用户体验 非常友好。

评论

一边听歌一边看评论已经成为现在年轻用户非常喜欢的听歌方式，在评论里，可以找到这首歌很多感人的故事，引发共鸣，勾起回忆。用户进入评论后，除了可以看见其他用户的精彩评论，还可以进入歌手的扑通小组（类似贴吧），和其他歌迷一起交流，从而增加用户时间，提升用户留存率。

音乐工具

片段播放

「片段播放」提供按歌词选和按音轨选两种形式，用户可以自由裁取需要循环的片段反复收听。这有点像过去我们使用 MP3 或复读机收听歌曲那样，功能虽然简单，但可以满足某些特定场景使用。

倍速播放

用户可设置歌曲播放的倍速，支持 0.5x 到 2.0x 播放，这个功能在听书的时候特别实用，非常方便。

定时关闭

用户在音乐播放中可开启定时关闭功能，比如 15 分钟、60 分钟等，这个功能在助眠的时候非常方便，当你慢慢睡着的时候，音乐也随之关闭。

设备投放

「设备投放」就是支持音乐投放到电视等其他电子设备，当一群朋友在家里为你过生日的时候，你可以把你的歌单直接投屏到电视，让大家一起陶醉在美好的音乐夜晚。

设置铃声

当你觉得某首歌曲特别好听，想把它设置为铃声的时候，你不用去应用市场搜寻其它工具，你只需要进入「设置铃声」，你可以自己截取喜欢的音乐片段，系统也会自动智能截选一段精彩的铃声。在右上角提供了详细的铃声设置流程，教程非常简单。其次 QQ 音乐还有一个铃声专区，里面提供了海量的铃声选择。

查看曲谱

查看曲谱是一个非常实用的功能，对于很多音乐爱好者来说，当在某个夜晚抱着吉他想弹奏某一首歌曲，你只需要打开「查看曲谱」，里面包含了智能吉他曲谱、智能尤克里里曲谱以及五线谱/六线谱/简谱。进入曲谱后，你还可进行自由编辑，比如编辑和弦、更改时值等。这种实用不起眼的小功能，对提升用户的满意度非常有帮助，可以抢夺用户时间，降低用户流失率。

分享方式

分享给好友

用户可以把歌曲分享给微信好友、QQ 好友，还可以通过私信方式分享给 QQ 音乐好友。

设置听歌状态

利用腾讯强大的产品生态，用户还可以把听歌状态同步到微信和 QQ，这不仅可以满足年轻用户个性化的追求，还能通过外部触发拉新引流。

分享到社区

用户可以把歌曲分享到朋友圈、QQ 空间、扑通动态和新浪微博，吸引用户分享传播，拉新引流。

歌曲海报

音乐卡片

「音乐卡片」为用户提供了 8 种精美的风格，有复古怀旧的磁带、CD 风格，有黑白胶唱机风格，还有专属的 VIP 会员专享风格。卡片内容包含歌曲的封面、歌名、歌手、音乐指数和过去 24 小时收听人数等信息，目的是为了吸引更多的用户扫码听歌，其次 VIP 会员卡片还加入了 QQ 音乐豪华绿钻音乐卡片标识，彰显 VIP 会员地位。

歌词海报

在以前磁带、CD 时代，抄歌词是广大音乐爱好者最美丽的回忆之一，「歌词海报」就是利用这样的分享场景，支持用户选择任意歌词，然后生成个性化的海报。「歌词海报」不仅提供了海量的背景图片，还支持用户自己上传，甚至还提供歌词字体选择，吸引用户主动分享。

高光视频

「高光视频」就是一段 30 秒的音频，提供了 6 个精美的模版，用户保存到手机后，可以短视频的形式分享到视频号、朋友圈等平台，和静态的海报不同，这样的传播形式更能引起其他用户的关注，从而拉新引流。

微信状态卡片

「微信状态卡片」为 QQ 音乐绿钻会员专享，为会员提供了多种精美的状态卡片，用户需要选择两行歌词，然后才能生成。这样个性化的设置同步到微信状态后，更能引起追求个性的年轻用户关注。

歌词视频

「歌词视频」相比高光视频，功能更丰富，首先不限制用户选择歌词数量，其次提供了风景、科幻、自然等不同主题的视频模版，而且还支持用户自己拍摄。用户还可以选择音乐播放的起点，添加视频动效和滤镜。通过这样短视频的方式吸引用户分享到视频号以及更多的短视频平台，传播拉新。

歌词 1. 弹幕

听歌弹幕就像视频弹幕，用户可以边听歌边发弹幕聊天，这是一个年轻用户非常喜欢的功能，用巴甫洛夫效应来解释，这就是用户对源源不断弹出的弹幕充满了期待，从而增加了听歌乐趣，提升用户使用时间。

2. 歌词动效

「歌词动效」为用户提供了多种个性化模版，满足年轻用户的各种个性化需求，其次也是实现商业变现的方式之一，用户需要开通 SVIP 才能享受更多精美的动效模版。

3. 歌词设置

用户可以调整歌词的字体大小、简繁转换、调整进度，还可以制作歌词海报进行分享。其中歌词海报支持静态图海报和视频海报制作，还提供了多种精美模版，吸引用户分享传播。

推荐 1. 歌曲信息

用户可以查看歌曲详细信息，包括歌手、专辑、发布时间以及详细的制作详情。

2. 音乐指数

「音乐指数」是一个非常创新的功能，QQ 音乐根据用户听歌的次数、搜索的次数制定了一个官方的指数评级。用户可以从这个页面看到歌曲的实时数据，包括今日、昨日音乐指数、全站排名、上升趋势和歌曲成就等。

3. 相关推荐

根据歌曲的曲风，平台会推荐相关歌曲，这有点像私人电台；其次平台还收录了歌曲的各种演绎版本，这真的非常方便，你可以轻松切换自己喜欢的版本；最后为用户推荐包含此歌曲的歌单、节目和视频，彻底抢占用户的时间。

总结 QQ 音乐的播放页设计，可以说把腾讯系 产品设计 的风格发挥得淋漓尽致。为用户提供各种丰富多样的个性化设置和音乐工具，播放器样式、银河音效、个性主题、歌词动效、曲谱、铃声，只有你想不到的，没有 QQ 音乐无法提供的。然后当你想要享受更多特权，你就需要付费开通 VIP，这简直就是腾讯系产品的杀手锏，准备了一千种方式和场景让你很自然的掏腰包。

其次把社交基因发挥到极致。跟听、一起听、弹幕这些都是为了活跃度最高、消费意愿最强的小情侣、小年轻用户准备的。也许有部分用户会质疑，我从来不使用这些功能，但作为一个月活超过 2 亿的平台型产品，QQ 音乐拥有众多各年龄阶段的用户，这就像上期我们分享的《顺丰速运为用户准备了 18 种寄件方式》一样，看似多余复杂，但其实是为了满足各类用户人群的特定需求。

18种寄件方式！从7个方面拆解「顺丰速运」的产品设计 顺丰把快递这个简单的消费行为按不同的场景、空间、时间、功能和用户划分，为用户提供了多达 18 种寄件方式！

阅读文章 >

我们无法改变世界，但可以一起拆解那些改变世界的产品！

欢迎关注作者微信公众号：「设计大侦探」

本文从确定目标价值、构建体系、优化交互细节等几个方面来阐述 雅座收银 的体验优化之路，多角度体现产品的性格：高效、简洁、可靠。

拓展阅读

B端案例实战！如何搞定数据生产后台的体验优化？ 项目背景 我们给用户提供的是一款专业资料查询阅读的 App，用户最看重的是资料覆盖是否全面，内容是否严谨。

阅读文章 >

B站雅座收银POS升级地址： https://www.bilibili.com/video/BV1av4y1M7Gv

雅座收银 POS 是微盟智慧餐饮业务矩阵中的一款基建产品，主要用于门店的点餐收银。随着业务和产品的发展需求，雅座收银 POS 迫切的需要进行一次体验优化升级。因此在保证存量客户的使用习惯前提下，我们将核心营业模块进行了升级改造。

本文将根据下图的叙事结构，从确定目标价值、构建设计体系、优化交互细节等几个方面来阐述雅座收银的体验优化之路，多角度体现雅座收银的产品性格——高效、简洁、可靠。

背景与目标 1. 项目背景

2021 年由于业务与团队的迅速扩张，现有的收银 POS 难以承载持续增加的用户需求。并且由于历史问题产品缺乏设计规范，导致整个开发过程中基于此类的问题不断凸显出来，而我们的用户对于产品体验也有了更高的诉求。基于这样的问题现状，可以直观感受到问题主要表现在 4 个显性维度：

「设计维度」：由于产品缺乏基础设计规范，在迭代过程中，用户体验无法保持一致性，用户操作感受与学习成本会不断增加。并且没有前期的设计沉淀，设计侧在接新需求的时候要花更多的时间去应对项目。 「研发维度」：基于“设计维度”的规范缺乏问题，直接导致研发侧组件代码碎片化严重，存在重复造轮子的情况。并且多数组件并未封装开发，导致一个弹窗出现在 5 个地方长相都不同，产品的质量难以保证。 「测试维度」：基于前面两个维度做的不到位，导致测试每次迭代发版都需要重复走查，增加了很多工作量 「产品维度」：前面 3 个维度的问题直接就会导致产品的版本迭代效率低，也会导致用户需求排期时限不断拉长，不利于产品的快速成长。 所以通过分析得出，如果基础的标准化规范以及操作标准，未构建好并有效的落地，前期为了满足业务快速成长的需求，这样做看不出大问题。产品进入快速成长阶段后，就会发现这样的问题会严重影响到产品的迭代成长。

2. 改版目标

基于以上问题，我们明确当前的改版目标从业务角度出发，要关注两个点

提升产品一致性 提升用户体验度

问题调研 对于一款进入稳定期的 ToB 产品，决定做大规模的专项优化时，首先需要明确待解决的问题类型，即我们上一节说的改版目标，其次针对类型给出解决方案。因此，我们必须弄清楚 3 件事：

是谁在用———-了解用户 有什么问题——-知己-产品现状拆解 人家怎么做的—–知彼-竞品分析 1. 了解用户 在项目初期，首先就同产品、运营等伙伴沟通用户的具体情况，我们了解到用户构成主要以年轻的女性群体为主，从用户使用产品时的工作环境、工作状态、工作情绪 3 个维度来了解实际使用场景，一句话概括：门店服务员在嘈杂的就餐环境中使用产品进行门店运营，并且饭点期间的工作状态是忙碌而迅速，在此期间的工作情绪也是烦躁、压力大。

那么针对这些用户面临的问题，映射在 产品优化 里的时候也是我们需要关注的点。

2. 知己–产品拆解 对于产品本身整体框架的拆解以及页面的梳理分析非常重要，我们在拆解的时候主要围绕三个维度进行拆解梳理，这样在问题梳理的时候可以更有侧重点的去发现问题。拆解前可以这样提问：

「交互」是否便捷高效？

「视觉」是否规范一致？

「体验」是否符合认知？

核心场景

本次优化，我们需要明确重点优化的核心场景链路，就是开台>点餐>结算这个流程。优化的侧重点也从这 3 个点切入。

问题归纳

明确了核心场景后，就开始问题梳理。去操作产品的每个步骤，记录问题点。可以是体验流程、交互细节或者是视觉问题。然后将其记录到表格当中，方便后期进行问题解决跟踪。

记录问题的同时也要思考已知的问题应该如何去优化

视觉层拆解

我们将整个产品视觉层面分别从原子、分子、组件、页面类型四个维度进行拆解。通过这样的方式将颜色、字体等基础规范到弹框、导航、输入框等组件一一归纳。由此我们对现有的视觉层面的问题基本一目了然，后期优化侧重点也基本明确了方向。

3. 知彼–竞品分析 前文中我们对于产品的拆解已经完成，明确了问题的核心点。在具体方案设计前，我们可以带着在自我拆解过程中发现的已知问题，去做竞品分析。

竞品分析是选取行业内龙头企业的产品 2-3 个即可，梳理已被市场验证的页面结构、操作流程以及场景业态，思考哪些亮点是我们可以借鉴的。

经过针对性的竞品分析，我们可以提炼出一些不错的设计准则或者交互方式运用到我们的优化当中

比如分析过程中发现，常规的终端产品数字按键通常为方形，以及桌台、菜品等卡片设计对采取的信息左对齐的方式，那么在后期优化的过程中就可以代入该方案。

问题汇总

通过以上的问题梳理后，大致的问题已经归类了出来。这时拉上产品、研发人员一起开会，阐述产品面临的问题，以及一些解决方案的初步设想。这样的目的主要是达成团队的共识，意识到项目体验优化这件事的价值。

经过整理分析，雅座收银的主要问题分为 3 大类

问题 1.交互层–效率低

效率低下是 B 端产品要尽量避免的一点。我们在梳理产品的过程中可以发现很多操作就有这样的问题，最明显的就是弹框。

很多居中的弹框并不能承载过多的内容，因此在一些高频操作里就需要去滑动弹窗进行选择。另外就是很多高频操作的操作路径过长。尤其是目前使用的终端机器屏幕很大，如果操作路径过长，很大程度上就会降低了操作效率。

问题 2.视觉层–层级乱

层级乱主要是信息模块的划分过于混乱，这一点在最核心的点餐页面体现的尤为明显。总结下就是以下 2 点：

多数的信息卡片（桌台、菜品卡片）布局采用居中对齐的方式，导致各种字段无法合理排列 旧有模式通过色块区分不同信息源，造成了不必要的视觉干扰 问题 3.体验层–不明确

尼尔森十大设计原则里的第一条–反馈原则，是非常影响使用体验的一个点，然而在我们现有产品中，很多操作并没有给予明确的提示反馈。对于用户来说，使用困惑与学习成本无疑成倍的增加了。

用超多案例，帮你掌握尼尔森十大设计原则（上） 对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。

阅读文章 >

用超多案例，帮你掌握尼尔森十大设计原则（下） 对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。

阅读文章 >

因此，针对以上这些显性问题，展开了对产品的体验优化工作。

设计策略 对于现存问题达成一致认可后，团队又讨论定义了雅座收银的产品性格关键词，用 3 个关键词概括：高效、简洁、可靠。后期整个产品是优化方向会紧紧围绕 3 个关键词展开。

「高效」设计规范建立、组件封装开发，更少的滑动操作、更短的操作路径。 「简洁」信息模块重新布局、去除不必要的视觉元素，进行视觉降噪提升信息可读性。 「可靠」提升用户的操作体验，任何操作反馈明确可知，给予用户可控感。

设计方案 1. 高效–视觉层 高效的构建主要体现在两个层面，视觉层+交互层。因此前期构建产品的规范，保持产品一致性是需要首要完成的任务，所以先从基础规范的构建开始。

色彩规范

雅座的品牌色为口碑橙，颜色上还是沿用了原先的主色调，然后利用 HSB 取值方式，保持 S 和 B 不变，H 的数值为 15 递增的方式，推导出 24 色带，然后进一步筛选后我们就可以得到基于品牌色明度、饱和度一致的 16 个辅助色板。

定义出最常用的色彩

原始色彩提取后，可以建立对应的拓展色板。整个产品所有用色都从拓展色板提取，保证了规范的一致性。并且前期优化的时候就可以让开发给每个颜色定义好相对应的名字（暂时只定义 1、2、6、8 的色值，其他的配色日常设计使用即可），方便开发过程中直接通过名字调用颜色

比如不同的黑色，我们可以取名 Black15 Black25 Black45 等等，使用时直接名字调用即可。

原子理论

为了使产品构建更具备规律可循，雅座收银 POS 运用了原子理论做设计，采用了 8 为最小模数进行布局设计，所有的模块、间距、大小遵循 8 的规律进行延展布局，使界面具备动态的韵律感。并且在开发过程中，也遵循 8 的准则进行界面布局，使产品视觉层更具备一致性。在与开发沟通的过程中，也直接告知对方，所有的间距都是基本 8 的倍数设置，降低了沟通成本。

由此，整个产品就像搭积木一样构建起来。

框架布局

用户的核心诉求就是迅速的开台>点餐>结算，因此页面的信息布局+功能架构上，我们紧紧围绕高效这个关键词展开优化。

在框架布局方面基本和之前类似，保持了一屏一列、一屏两列、一屏三列的布局模式。对比原来的布局方式，本次在整体结构的细节上做了更细致的调整。定义好模块的间距、模块与模块之间的距离，8 的增量进行布局。无论界面怎么变化，都是基于这样的三个框架规范去填充内容。在开台界面，依旧是保持了一屏一列的模式，整体属于一块信息，里面切割成无数的小桌台卡片。

进入到点餐页面的时候，就是一屏两列的布局。整体主要呈现了两块信息，购物车+菜品列表的操作模式。

下单成功后，就是常见的一屏三列。呈现了 3 块信息，从左往右操作步骤递增的模式。

栅格系统

8000多字！超全面的栅格系统入门手册！ 栅格的前世今生 产品设计从理解用户到定义问题，再到探索方案并输出草图乃至视觉稿，每一个阶段都关系到一个产品的成败。

阅读文章 >

原先的产品并没有运用栅格系统，导致在不断的迭代过程中，整个产品的规范逐渐偏离。在本次优化中，我们一并优化进去。

前面定义的最小原子为 8，我们在构建栅格的时候在 8 的基础上 8 划分页面。边距和水槽都为 24px。基于这样的设计规则，后面的产品迭代优化才能更具备规范性。

2. 高效–交互层 弹框优化

弹框是产品使用过程中出现频率非常高的一个组件，原先的弹框都采用居中弹框的形式，那么居中弹框最大的问题就是，当前选择过多的时候，可展示区域是有限的，增加了滑动操作

针对这个问题，我们给出了这样的设计策略：保持弹窗的操作形式不变，将居中弹框改为侧滑弹框，这样可以最大化的利用屏幕空间，尽可能多的展示可选项，减少滑动操作。

在点餐环节选择菜品的做法规格等操作时，弹框内的按钮选择数量至多可增加 33%以上，最大化的展示可选项数量，提高点餐人员的工作效率。

键盘

键盘是整个收银产品中使用频率非常高的一个组件。

原先的键盘都是圆形按钮，经过竞对分析，会发现常规的终端类产品按键都为方形。因此保持原先键盘的体积不变的前提下，优化后的按键可点击区域增加了 50%，降低误操作的概率。

并且针对收款环节的操作习惯将数字布局进行重新调整，使其排列顺序更加符合收银场景下的数字排列方式，同时最大化收款按键面积，合理规划收银键盘的布局方式。

输入表单

在我们原先的产品里还有个问题，就是表格填写查看的过程中，由于表头未对齐，整个视觉动线一直在来回切换。

针对这个问题，本次优化的时候就将表头文字统一进行了右对齐，这样用户进行表单填写查看的时候可以一条直线由上而下的查看，快速定位到填写内容。

即使填写的表单内容很多，也能高效的填写与查看表单内容。

操作路径

原先产品里多处使用场景当中，组件选择的都不恰当，直接就导致了整个用户操作路径非常的长。

通过下图我们看到选择一个订单状态，操作路径基本是贯穿了整个屏幕。因此，我们将原先的居中弹框改为下拉选择弹框，直接将操作路径缩短了 50%以上，减少用户在使用过程中手指移动的距离。

3. 简洁 左对齐卡片设计

对于原有产品的界面，桌台和点餐界面的卡片都采用了居中对齐的方式，这样做直接导致很多信息排不下，并且会出现卡片上下左右四个角都是角标，降低了信息的可读性。

带着这样的问题，在竞品分析过程中，我们发现了采用左对齐卡片式设计的方式要优于原有的居中对齐方式。

因此我们将信息归类，菜品和桌台类字段居于左侧，而角标类标记全部位于卡片的右侧。经过这样的调整优化，整个信息的展示可读性高于原先的布局方式，并且字段和标签进行了分类，也不会拥挤在一起。

留白去线视觉降噪

对于不同信息源，原有的处理方式是通过灰色背景的方式来区分，而这样做的问题是，当信息源过多的时候整个数据列表会失去重点，都是重点=没有重点。

因此我们采用字号对比、画面留白等方式进行信息模块的区分，去除不必要的视觉干扰。

规范金额单位使用

在收银产品当中，涉及到金额展示的地方非常多。原先的展示规则比较随意，我们并不能找到金额单位的使用规律。问题集中出现的地方：

部分页面价格不带「￥」单位 价格确定到小数点几位不明确 单位与数字的大小比例关系随意

因此优化的时候对于金额单位我们也做了总结分类，大致可以分为 3 类，根据出现的类型定义好金额的使用单位。

4. 可靠 容错&防错机制

根据尼尔森十大设计原则中对于容错原则的描述：无论错误场景设计的多好看，都不如在第一时间防止用户发生错误；该原则强调，产品需要有防错机制。

可靠这个特质对于 B 端产品来说是必不可少的。而在分析原先产品问题的时候就发现，产品的容错和防错做的不够到位。因此，我们对于一些输入环节增加了信息预判，避免用户输入完成后才给出错误提示，降低用户误操作的成本。以及一些输入的操作，例如标签、选择后的优惠券等等，可直接删除已选标签，给予用户一定的容错能力。

操作可知 反馈明确

1）无论当下操作是在加载中还是加载失败，第一时间给予用户明确的反馈，是非常重要的一件事，时刻给用户一种安全可靠的操作体验，明确当下的行为以及导致的行为结果。所以在桌台选择的处理方式上，我们增加显示了已选中的桌台名称，桌台信息+执行动作，明确告知用户当前已选的桌台以及将要执行的动作。

2）其次就是加载中的按钮的要给予一个明确状态。如果点击后的操作仍在执行中，我们没有给予反馈，就会使用户认为点击无效从而不停的点击，加重卡顿的情况。

文案描述精准

对于单一操作的确认文案，优化后更加精准。通过”确认 XX”和“暂不 XX”这样的文案融入到按钮当中，在执行的时候可以更加明确当前要执行的内容。例如要选择使用一张优惠券，我们就可以描述为“确认抵扣”或者“暂不抵扣”，从字面理解上来说，也会比单纯的：确认、取消“描述更精准。

设计沉淀 1. 规范搭建

在设计过程中，我们搭建了一套雅座收银 POS 的产品设计组件、并制定了相应的设计规范。保证后期产品迭代的一致性。

2. 开发提效

开发将常用的字号、色彩、圆角等属性定义好名字，在开发过程中直接通过名字调用构建样式。即使多人协作的情况下也能尽可能保证样式的一致性。

3. 宣发创意视频

由于本次产品更新的点比较多，为了让商户以及我们的客服团队能够更好更快的理解产品更新点。还额外做了配套的宣发视频用于介绍。

B站观看地址： https://www.bilibili.com/video/BV1av4y1M7Gv?share_source=copy_web

上线反馈 产品上线后，从视觉到交互得到了一次全新的提升，对比之前的版本系统性能和流畅度分别提升了 14%和 24%。

上线后来自内部和外部的反馈都是不错的。对于商户来说，学习的成本很低。因为在优化的同时大部分保持原有的操作习惯，整体视觉的改版上的反馈也是清爽了很多，上手简单。

项目小结 1. 流程沉淀

项目做完后，在整个产品优化过程中，无论是前期的问题调研，初步基础规范样式构建，还是后期的交互细节优化落地，我们始终都是围绕着，如何做一款更易用的收银工具为设计核心，进行产品的优化升级。

整个优化流程看起来好像工作量比较多、比较复杂，其实我们通俗的理解，就好像去医院看病医院，一共分为 4 个步骤去理解，查病因>写病历>动手术>去复查。

然后针对每个关键步骤，拆解出细分的行动计划，对应到我们整个 B 端产品的优化流程当中逐个击破。

2. 写在最后

微盟智慧餐饮的愿景是“数字餐饮，智慧生活”。雅座收银作为全场景一体化数字化解决方案中非常重要的”根产品”，始终围绕着如何做一款更易用的收银工具为核心，让门店整体运营状态更高效，同时提升营业人员在工作过程中的使用体验。助力餐饮企业实现真正的降本增效，而这也是收银产研团队一直在共同践行的目标。

欢迎添加作者的个人微信交流：

2019 年年末， 58UXD 重新整理了 58 同城的设计规范，在原有基础上将组件扩展到了 20 种，覆盖了 532 种组件状态以及接近 1000 枚的 图标 。在 2020 年将其正式更名为「LOCO Design System」，从此开始，这套设计系统支撑了 58 同城各业务线的日常迭代，成为协同各业务线设计部提升设计一致性的重要纽带，无缝链接用户、设备、场景的载体和触点，为用户提供完美的生活服务体验。

大厂组件：

有哪些组件值得学习？我梳理了8个大厂的设计组件！ 设计组件作为设计系统里的组成部分，可以说是构成这个系统最基础也是最实用的部分了。

阅读文章 >

「LOCO Design System」包含了大量的可复用资源，如 icon、全局样式、基础组件、布局、导航、输入等，可用来快速搭建的界面设计，大大提升 UXD 设计师的效率。

目前，「LOCO Design System」已集成到 58 自研的产品风火轮上，大家可以下载风火轮的 Sketch 插件即可拖拽设计资源到画板上进行编辑。

风火轮除了承载设计资产以外，还可以可通过 Sketch 插件上传设计稿到风火轮协作平台，实现标注和代码解析，可直接链接分享给产品和开发。下面我就来介绍下这款神器。

为设计者提升工作效率的 Sketch 插件，轻松调用「LOCO Design System」 通过 Sketch 插件进入设计师的工作流程，聚合设计资产，解决设计规范落地、设计资产可视化承载，提升设计规范和设计资产的使用率，增强资源共享避免重复设计。目前为止 sketch 插件可以承载 icon 库、组件库、场景库、插画库、基础运营库资源。大家可以通过我们的制作要求，上传自己的规范。

1. 组件资源-icon/色彩/组件/场景/插画

主要承载 58 集团「LOCO Design System」的设计规范和设计资产，供全体设计师共享使用。

2. 自有组件库快速生成

可自己制作组件 Library，导入风火轮 Sketch 插件。导入的组件 Library 需遵循《本地 Library 资源制作规范》。

3. 上传设计稿

可通过风火轮 Sketch 插件上传设计稿到风火轮协作平台，实现标注和代码解析，可直接链接分享给产品和开发同学。

设计师、产品、研发多角色一站式协同平台，设计稿在线可视化 通过风火轮协作平台进行团队管理，团队资产、项目管理，实现设计稿在线标注解析，供研发同学在线查看研发。同时还生成各种前端代码，供前端同学复制使用，缩短研发同学的工作路径，提升工作效率的同时顺应市场潮流，实现从设计到代码的愿景。

团队与项目

风火轮协作平台的团队项目，采用团队—（文件夹）—项目—分组—画板的层级进行设计稿的管理。 项目是从属于团队的。想使用项目相关功能，需要先创建/加入一个团队。为便于管理，一个团队下可建立多个项目。

项目文件管理

项目可存在于任何一级文件夹下。团队成员均可进行项目管理。项目文件中承载了项目中的全部内容（设计稿、切图、源文件、代码等）。

多方协作-编辑器

编辑器页面可进行设计稿画板标注/代码信息查看、设计图/切图下载。每个画板提供了标注模式和代码模式两种视图。

在标注模式下，可以查看图层的尺寸、位置、字体、文本内容、样式等信息，可以复制并使用标注样式代码；如果是切图，则可以下载对应的不同尺寸、格式的图片。 在代码模式下可查看平台解析当前画板，所生成的全部代码，可一键复制使用。

代码生成

在上传设计稿时选择生成代码，在协作过程中，平台会展示，整个设计项目的全部代码，供研发同学使用。我们目前生成的代码，高精度的还原了设计稿。

对于不同规模的产研团队，风火轮都没有任何的费用。良心的免费设计神器，大家快来解锁吧！

风火轮官网： https://fhl.58.com ，下载插件，获取 LOCO Design 的源文件

本文从确定目标价值、构建体系、优化交互细节等几个方面来阐述 雅座收银 的体验优化之路，多角度体现产品的性格：高效、简洁、可靠。

拓展阅读

B端案例实战！如何搞定数据生产后台的体验优化？ 项目背景 我们给用户提供的是一款专业资料查询阅读的 App，用户最看重的是资料覆盖是否全面，内容是否严谨。

阅读文章 >

B站雅座收银POS升级地址： https://www.bilibili.com/video/BV1av4y1M7Gv

雅座收银 POS 是微盟智慧餐饮业务矩阵中的一款基建产品，主要用于门店的点餐收银。随着业务和产品的发展需求，雅座收银 POS 迫切的需要进行一次体验优化升级。因此在保证存量客户的使用习惯前提下，我们将核心营业模块进行了升级改造。

本文将根据下图的叙事结构，从确定目标价值、构建设计体系、优化交互细节等几个方面来阐述雅座收银的体验优化之路，多角度体现雅座收银的产品性格——高效、简洁、可靠。

背景与目标 1. 项目背景

2021 年由于业务与团队的迅速扩张，现有的收银 POS 难以承载持续增加的用户需求。并且由于历史问题产品缺乏设计规范，导致整个开发过程中基于此类的问题不断凸显出来，而我们的用户对于产品体验也有了更高的诉求。基于这样的问题现状，可以直观感受到问题主要表现在 4 个显性维度：

「设计维度」：由于产品缺乏基础设计规范，在迭代过程中，用户体验无法保持一致性，用户操作感受与学习成本会不断增加。并且没有前期的设计沉淀，设计侧在接新需求的时候要花更多的时间去应对项目。 「研发维度」：基于“设计维度”的规范缺乏问题，直接导致研发侧组件代码碎片化严重，存在重复造轮子的情况。并且多数组件并未封装开发，导致一个弹窗出现在 5 个地方长相都不同，产品的质量难以保证。 「测试维度」：基于前面两个维度做的不到位，导致测试每次迭代发版都需要重复走查，增加了很多工作量 「产品维度」：前面 3 个维度的问题直接就会导致产品的版本迭代效率低，也会导致用户需求排期时限不断拉长，不利于产品的快速成长。 所以通过分析得出，如果基础的标准化规范以及操作标准，未构建好并有效的落地，前期为了满足业务快速成长的需求，这样做看不出大问题。产品进入快速成长阶段后，就会发现这样的问题会严重影响到产品的迭代成长。

2. 改版目标

基于以上问题，我们明确当前的改版目标从业务角度出发，要关注两个点

提升产品一致性 提升用户体验度

问题调研 对于一款进入稳定期的 ToB 产品，决定做大规模的专项优化时，首先需要明确待解决的问题类型，即我们上一节说的改版目标，其次针对类型给出解决方案。因此，我们必须弄清楚 3 件事：

是谁在用———-了解用户 有什么问题——-知己-产品现状拆解 人家怎么做的—–知彼-竞品分析 1. 了解用户 在项目初期，首先就同产品、运营等伙伴沟通用户的具体情况，我们了解到用户构成主要以年轻的女性群体为主，从用户使用产品时的工作环境、工作状态、工作情绪 3 个维度来了解实际使用场景，一句话概括：门店服务员在嘈杂的就餐环境中使用产品进行门店运营，并且饭点期间的工作状态是忙碌而迅速，在此期间的工作情绪也是烦躁、压力大。

那么针对这些用户面临的问题，映射在 产品优化 里的时候也是我们需要关注的点。

2. 知己–产品拆解 对于产品本身整体框架的拆解以及页面的梳理分析非常重要，我们在拆解的时候主要围绕三个维度进行拆解梳理，这样在问题梳理的时候可以更有侧重点的去发现问题。拆解前可以这样提问：

「交互」是否便捷高效？

「视觉」是否规范一致？

「体验」是否符合认知？

核心场景

本次优化，我们需要明确重点优化的核心场景链路，就是开台>点餐>结算这个流程。优化的侧重点也从这 3 个点切入。

问题归纳

明确了核心场景后，就开始问题梳理。去操作产品的每个步骤，记录问题点。可以是体验流程、交互细节或者是视觉问题。然后将其记录到表格当中，方便后期进行问题解决跟踪。

记录问题的同时也要思考已知的问题应该如何去优化

视觉层拆解

我们将整个产品视觉层面分别从原子、分子、组件、页面类型四个维度进行拆解。通过这样的方式将颜色、字体等基础规范到弹框、导航、输入框等组件一一归纳。由此我们对现有的视觉层面的问题基本一目了然，后期优化侧重点也基本明确了方向。

3. 知彼–竞品分析 前文中我们对于产品的拆解已经完成，明确了问题的核心点。在具体方案设计前，我们可以带着在自我拆解过程中发现的已知问题，去做竞品分析。

竞品分析是选取行业内龙头企业的产品 2-3 个即可，梳理已被市场验证的页面结构、操作流程以及场景业态，思考哪些亮点是我们可以借鉴的。

经过针对性的竞品分析，我们可以提炼出一些不错的设计准则或者交互方式运用到我们的优化当中

比如分析过程中发现，常规的终端产品数字按键通常为方形，以及桌台、菜品等卡片设计对采取的信息左对齐的方式，那么在后期优化的过程中就可以代入该方案。

问题汇总

通过以上的问题梳理后，大致的问题已经归类了出来。这时拉上产品、研发人员一起开会，阐述产品面临的问题，以及一些解决方案的初步设想。这样的目的主要是达成团队的共识，意识到项目体验优化这件事的价值。

经过整理分析，雅座收银的主要问题分为 3 大类

问题 1.交互层–效率低

效率低下是 B 端产品要尽量避免的一点。我们在梳理产品的过程中可以发现很多操作就有这样的问题，最明显的就是弹框。

很多居中的弹框并不能承载过多的内容，因此在一些高频操作里就需要去滑动弹窗进行选择。另外就是很多高频操作的操作路径过长。尤其是目前使用的终端机器屏幕很大，如果操作路径过长，很大程度上就会降低了操作效率。

问题 2.视觉层–层级乱

层级乱主要是信息模块的划分过于混乱，这一点在最核心的点餐页面体现的尤为明显。总结下就是以下 2 点：

多数的信息卡片（桌台、菜品卡片）布局采用居中对齐的方式，导致各种字段无法合理排列 旧有模式通过色块区分不同信息源，造成了不必要的视觉干扰 问题 3.体验层–不明确

尼尔森十大设计原则里的第一条–反馈原则，是非常影响使用体验的一个点，然而在我们现有产品中，很多操作并没有给予明确的提示反馈。对于用户来说，使用困惑与学习成本无疑成倍的增加了。

用超多案例，帮你掌握尼尔森十大设计原则（上） 对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。

阅读文章 >

用超多案例，帮你掌握尼尔森十大设计原则（下） 对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。

阅读文章 >

因此，针对以上这些显性问题，展开了对产品的体验优化工作。

设计策略 对于现存问题达成一致认可后，团队又讨论定义了雅座收银的产品性格关键词，用 3 个关键词概括：高效、简洁、可靠。后期整个产品是优化方向会紧紧围绕 3 个关键词展开。

「高效」设计规范建立、组件封装开发，更少的滑动操作、更短的操作路径。 「简洁」信息模块重新布局、去除不必要的视觉元素，进行视觉降噪提升信息可读性。 「可靠」提升用户的操作体验，任何操作反馈明确可知，给予用户可控感。

设计方案 1. 高效–视觉层 高效的构建主要体现在两个层面，视觉层+交互层。因此前期构建产品的规范，保持产品一致性是需要首要完成的任务，所以先从基础规范的构建开始。

色彩规范

雅座的品牌色为口碑橙，颜色上还是沿用了原先的主色调，然后利用 HSB 取值方式，保持 S 和 B 不变，H 的数值为 15 递增的方式，推导出 24 色带，然后进一步筛选后我们就可以得到基于品牌色明度、饱和度一致的 16 个辅助色板。

定义出最常用的色彩

原始色彩提取后，可以建立对应的拓展色板。整个产品所有用色都从拓展色板提取，保证了规范的一致性。并且前期优化的时候就可以让开发给每个颜色定义好相对应的名字（暂时只定义 1、2、6、8 的色值，其他的配色日常设计使用即可），方便开发过程中直接通过名字调用颜色

比如不同的黑色，我们可以取名 Black15 Black25 Black45 等等，使用时直接名字调用即可。

原子理论

为了使产品构建更具备规律可循，雅座收银 POS 运用了原子理论做设计，采用了 8 为最小模数进行布局设计，所有的模块、间距、大小遵循 8 的规律进行延展布局，使界面具备动态的韵律感。并且在开发过程中，也遵循 8 的准则进行界面布局，使产品视觉层更具备一致性。在与开发沟通的过程中，也直接告知对方，所有的间距都是基本 8 的倍数设置，降低了沟通成本。

由此，整个产品就像搭积木一样构建起来。

框架布局

用户的核心诉求就是迅速的开台>点餐>结算，因此页面的信息布局+功能架构上，我们紧紧围绕高效这个关键词展开优化。

在框架布局方面基本和之前类似，保持了一屏一列、一屏两列、一屏三列的布局模式。对比原来的布局方式，本次在整体结构的细节上做了更细致的调整。定义好模块的间距、模块与模块之间的距离，8 的增量进行布局。无论界面怎么变化，都是基于这样的三个框架规范去填充内容。在开台界面，依旧是保持了一屏一列的模式，整体属于一块信息，里面切割成无数的小桌台卡片。

进入到点餐页面的时候，就是一屏两列的布局。整体主要呈现了两块信息，购物车+菜品列表的操作模式。

下单成功后，就是常见的一屏三列。呈现了 3 块信息，从左往右操作步骤递增的模式。

栅格系统

8000多字！超全面的栅格系统入门手册！ 栅格的前世今生 产品设计从理解用户到定义问题，再到探索方案并输出草图乃至视觉稿，每一个阶段都关系到一个产品的成败。

阅读文章 >

原先的产品并没有运用栅格系统，导致在不断的迭代过程中，整个产品的规范逐渐偏离。在本次优化中，我们一并优化进去。

前面定义的最小原子为 8，我们在构建栅格的时候在 8 的基础上 8 划分页面。边距和水槽都为 24px。基于这样的设计规则，后面的产品迭代优化才能更具备规范性。

2. 高效–交互层 弹框优化

弹框是产品使用过程中出现频率非常高的一个组件，原先的弹框都采用居中弹框的形式，那么居中弹框最大的问题就是，当前选择过多的时候，可展示区域是有限的，增加了滑动操作

针对这个问题，我们给出了这样的设计策略：保持弹窗的操作形式不变，将居中弹框改为侧滑弹框，这样可以最大化的利用屏幕空间，尽可能多的展示可选项，减少滑动操作。

在点餐环节选择菜品的做法规格等操作时，弹框内的按钮选择数量至多可增加 33%以上，最大化的展示可选项数量，提高点餐人员的工作效率。

键盘

键盘是整个收银产品中使用频率非常高的一个组件。

原先的键盘都是圆形按钮，经过竞对分析，会发现常规的终端类产品按键都为方形。因此保持原先键盘的体积不变的前提下，优化后的按键可点击区域增加了 50%，降低误操作的概率。

并且针对收款环节的操作习惯将数字布局进行重新调整，使其排列顺序更加符合收银场景下的数字排列方式，同时最大化收款按键面积，合理规划收银键盘的布局方式。

输入表单

在我们原先的产品里还有个问题，就是表格填写查看的过程中，由于表头未对齐，整个视觉动线一直在来回切换。

针对这个问题，本次优化的时候就将表头文字统一进行了右对齐，这样用户进行表单填写查看的时候可以一条直线由上而下的查看，快速定位到填写内容。

即使填写的表单内容很多，也能高效的填写与查看表单内容。

操作路径

原先产品里多处使用场景当中，组件选择的都不恰当，直接就导致了整个用户操作路径非常的长。

通过下图我们看到选择一个订单状态，操作路径基本是贯穿了整个屏幕。因此，我们将原先的居中弹框改为下拉选择弹框，直接将操作路径缩短了 50%以上，减少用户在使用过程中手指移动的距离。

3. 简洁 左对齐卡片设计

对于原有产品的界面，桌台和点餐界面的卡片都采用了居中对齐的方式，这样做直接导致很多信息排不下，并且会出现卡片上下左右四个角都是角标，降低了信息的可读性。

带着这样的问题，在竞品分析过程中，我们发现了采用左对齐卡片式设计的方式要优于原有的居中对齐方式。

因此我们将信息归类，菜品和桌台类字段居于左侧，而角标类标记全部位于卡片的右侧。经过这样的调整优化，整个信息的展示可读性高于原先的布局方式，并且字段和标签进行了分类，也不会拥挤在一起。

留白去线视觉降噪

对于不同信息源，原有的处理方式是通过灰色背景的方式来区分，而这样做的问题是，当信息源过多的时候整个数据列表会失去重点，都是重点=没有重点。

因此我们采用字号对比、画面留白等方式进行信息模块的区分，去除不必要的视觉干扰。

规范金额单位使用

在收银产品当中，涉及到金额展示的地方非常多。原先的展示规则比较随意，我们并不能找到金额单位的使用规律。问题集中出现的地方：

部分页面价格不带「￥」单位 价格确定到小数点几位不明确 单位与数字的大小比例关系随意

因此优化的时候对于金额单位我们也做了总结分类，大致可以分为 3 类，根据出现的类型定义好金额的使用单位。

4. 可靠 容错&防错机制

根据尼尔森十大设计原则中对于容错原则的描述：无论错误场景设计的多好看，都不如在第一时间防止用户发生错误；该原则强调，产品需要有防错机制。

可靠这个特质对于 B 端产品来说是必不可少的。而在分析原先产品问题的时候就发现，产品的容错和防错做的不够到位。因此，我们对于一些输入环节增加了信息预判，避免用户输入完成后才给出错误提示，降低用户误操作的成本。以及一些输入的操作，例如标签、选择后的优惠券等等，可直接删除已选标签，给予用户一定的容错能力。

操作可知 反馈明确

1）无论当下操作是在加载中还是加载失败，第一时间给予用户明确的反馈，是非常重要的一件事，时刻给用户一种安全可靠的操作体验，明确当下的行为以及导致的行为结果。所以在桌台选择的处理方式上，我们增加显示了已选中的桌台名称，桌台信息+执行动作，明确告知用户当前已选的桌台以及将要执行的动作。

2）其次就是加载中的按钮的要给予一个明确状态。如果点击后的操作仍在执行中，我们没有给予反馈，就会使用户认为点击无效从而不停的点击，加重卡顿的情况。

文案描述精准

对于单一操作的确认文案，优化后更加精准。通过”确认 XX”和“暂不 XX”这样的文案融入到按钮当中，在执行的时候可以更加明确当前要执行的内容。例如要选择使用一张优惠券，我们就可以描述为“确认抵扣”或者“暂不抵扣”，从字面理解上来说，也会比单纯的：确认、取消“描述更精准。

设计沉淀 1. 规范搭建

在设计过程中，我们搭建了一套雅座收银 POS 的产品设计组件、并制定了相应的设计规范。保证后期产品迭代的一致性。

2. 开发提效

开发将常用的字号、色彩、圆角等属性定义好名字，在开发过程中直接通过名字调用构建样式。即使多人协作的情况下也能尽可能保证样式的一致性。

3. 宣发创意视频

由于本次产品更新的点比较多，为了让商户以及我们的客服团队能够更好更快的理解产品更新点。还额外做了配套的宣发视频用于介绍。

B站观看地址： https://www.bilibili.com/video/BV1av4y1M7Gv?share_source=copy_web

上线反馈 产品上线后，从视觉到交互得到了一次全新的提升，对比之前的版本系统性能和流畅度分别提升了 14%和 24%。

上线后来自内部和外部的反馈都是不错的。对于商户来说，学习的成本很低。因为在优化的同时大部分保持原有的操作习惯，整体视觉的改版上的反馈也是清爽了很多，上手简单。

项目小结 1. 流程沉淀

项目做完后，在整个产品优化过程中，无论是前期的问题调研，初步基础规范样式构建，还是后期的交互细节优化落地，我们始终都是围绕着，如何做一款更易用的收银工具为设计核心，进行产品的优化升级。

整个优化流程看起来好像工作量比较多、比较复杂，其实我们通俗的理解，就好像去医院看病医院，一共分为 4 个步骤去理解，查病因>写病历>动手术>去复查。

然后针对每个关键步骤，拆解出细分的行动计划，对应到我们整个 B 端产品的优化流程当中逐个击破。

2. 写在最后

微盟智慧餐饮的愿景是“数字餐饮，智慧生活”。雅座收银作为全场景一体化数字化解决方案中非常重要的”根产品”，始终围绕着如何做一款更易用的收银工具为核心，让门店整体运营状态更高效，同时提升营业人员在工作过程中的使用体验。助力餐饮企业实现真正的降本增效，而这也是收银产研团队一直在共同践行的目标。

欢迎添加作者的个人微信交流：

2019 年年末， 58UXD 重新整理了 58 同城的设计规范，在原有基础上将组件扩展到了 20 种，覆盖了 532 种组件状态以及接近 1000 枚的 图标 。在 2020 年将其正式更名为「LOCO Design System」，从此开始，这套设计系统支撑了 58 同城各业务线的日常迭代，成为协同各业务线设计部提升设计一致性的重要纽带，无缝链接用户、设备、场景的载体和触点，为用户提供完美的生活服务体验。

大厂组件：

有哪些组件值得学习？我梳理了8个大厂的设计组件！ 设计组件作为设计系统里的组成部分，可以说是构成这个系统最基础也是最实用的部分了。

阅读文章 >

「LOCO Design System」包含了大量的可复用资源，如 icon、全局样式、基础组件、布局、导航、输入等，可用来快速搭建的界面设计，大大提升 UXD 设计师的效率。

目前，「LOCO Design System」已集成到 58 自研的产品风火轮上，大家可以下载风火轮的 Sketch 插件即可拖拽设计资源到画板上进行编辑。

风火轮除了承载设计资产以外，还可以可通过 Sketch 插件上传设计稿到风火轮协作平台，实现标注和代码解析，可直接链接分享给产品和开发。下面我就来介绍下这款神器。

为设计者提升工作效率的 Sketch 插件，轻松调用「LOCO Design System」 通过 Sketch 插件进入设计师的工作流程，聚合设计资产，解决设计规范落地、设计资产可视化承载，提升设计规范和设计资产的使用率，增强资源共享避免重复设计。目前为止 sketch 插件可以承载 icon 库、组件库、场景库、插画库、基础运营库资源。大家可以通过我们的制作要求，上传自己的规范。

1. 组件资源-icon/色彩/组件/场景/插画

主要承载 58 集团「LOCO Design System」的设计规范和设计资产，供全体设计师共享使用。

2. 自有组件库快速生成

可自己制作组件 Library，导入风火轮 Sketch 插件。导入的组件 Library 需遵循《本地 Library 资源制作规范》。

3. 上传设计稿

可通过风火轮 Sketch 插件上传设计稿到风火轮协作平台，实现标注和代码解析，可直接链接分享给产品和开发同学。

设计师、产品、研发多角色一站式协同平台，设计稿在线可视化 通过风火轮协作平台进行团队管理，团队资产、项目管理，实现设计稿在线标注解析，供研发同学在线查看研发。同时还生成各种前端代码，供前端同学复制使用，缩短研发同学的工作路径，提升工作效率的同时顺应市场潮流，实现从设计到代码的愿景。

团队与项目

风火轮协作平台的团队项目，采用团队—（文件夹）—项目—分组—画板的层级进行设计稿的管理。 项目是从属于团队的。想使用项目相关功能，需要先创建/加入一个团队。为便于管理，一个团队下可建立多个项目。

项目文件管理

项目可存在于任何一级文件夹下。团队成员均可进行项目管理。项目文件中承载了项目中的全部内容（设计稿、切图、源文件、代码等）。

多方协作-编辑器

编辑器页面可进行设计稿画板标注/代码信息查看、设计图/切图下载。每个画板提供了标注模式和代码模式两种视图。

在标注模式下，可以查看图层的尺寸、位置、字体、文本内容、样式等信息，可以复制并使用标注样式代码；如果是切图，则可以下载对应的不同尺寸、格式的图片。 在代码模式下可查看平台解析当前画板，所生成的全部代码，可一键复制使用。

代码生成

在上传设计稿时选择生成代码，在协作过程中，平台会展示，整个设计项目的全部代码，供研发同学使用。我们目前生成的代码，高精度的还原了设计稿。

对于不同规模的产研团队，风火轮都没有任何的费用。良心的免费设计神器，大家快来解锁吧！

风火轮官网： https://fhl.58.com ，下载插件，获取 LOCO Design 的源文件

7月第1波 设计干货 合集来了！这一次我所搜集的干货合集当中，有图标合集也有插画合集，但是最值得一看的，是 icons8 出品的动态图标和效果超赞的 SVG 素材编辑工具，还有将 Svg 格式的平面矢量文件升级为 3d 动态内容的服务。另外别忘了往期的干货合集：

第一波！2022年6月精选实用设计干货合集 6月第1波设计干货合集来了！

阅读文章 >

第二波！2022年6月精选实用设计干货合集 6月第2波设计干货合集来了！

阅读文章 >

第三波！2022年6月精选实用设计干货合集 6月第3波设计干货合集来了！

阅读文章 >

第四波！2022年6月精选实用设计干货合集 6月第4波设计干货合集来了！

阅读文章 >

下面我们具体看看这一期的干货：

60+ 有趣的免费小插画合集 https://prettyrandomillustrations.webflow.io/

这个插画合集是设计师 Prem Pradeep 自己做 100 天设计挑战过程中完成的插画作品，其中内容涉及到的主题非常宽泛，相当随机，这套插画小合集可以免费获取，不过清晰度有限制，如果你其中有你特别需要的，可以下单购买付费的矢量版本。

免费开源极简图标大合集 https://feathericons.com/

Feather 是一个风格比较简约利落的开源图标合集，每个图标都在 24×24 的网格上，图标整体保持着高度的一致性和可读性。你可以一次性把所有的图标都下载下来，也可以在临时有需求的时候，直接在网站当中根据主题 和关键词来搜索合适的图标，修改尺寸和笔触粗细，然后直接复制粘贴，非常方便。

icons8 出品的动态图标 https://icons8.com/animated-icons/color

这是著名的图标和插画素材供应商 icons8 出品的图标服务，目前其中已经囊括了 3700+ 动画图标，这些图标全部以基于 Lottie 的 Json 格式、Gif、AE三种格式而存在，便于你在不同的流程之下使用。另外，这里的动态图标有 iOS 和 Material Design 样式的，也有符合 Windows 系统风格的，可以根据风格选取。这里的图标并非完全免费，有一部分是可以免费下载使用的，另外一部分是付费的。

高素质免费 UIkit 下载 https://www.pixeltrue.com/free-ui-kits

这是著名的设计素材服务商 Pixelture Packs 出品的免费 UIkit 合集，这个合集当中所提供的 UIKit 是完全免费可商用的，无需署名，直接拿来修改应用就行，对于做 UI 设计的同学而言，特别值得收藏一发。这些 UIKit 大多数都提供 Figma 和 Sketch 格式的文件，而且通常包含有几十个界面和大量的常用组件，相当好使。

绝美的免费 SVG 素材编辑平台 https://heazy.studio/

这个名为 Heazy 的 SVG 编辑平台能够帮你生成视觉效果特别独特和时髦的素材，你可以轻松地在 JavaScript 和 TypeScript 当中调用矢量的 SVG 数据，还可以导出为 PNG，或者应用到 React 组件上去。这个SVG 编辑平台提供了很多预先设计好的 SVG 素材，你可以借助内置的编辑器将他们改成你想要的样子。

将 SVG 升级为动态 3D 的高级工具 https://studio.morflax.com/shift

这个工具我是第一次注意到，它可以将你的 SVG 格式的2D矢量文件转化为 3D 的动画，从这点来说，它是可以帮助很多现有的SVG 素材的基础上进一步提升，特别值得尝试。这项服务完全版是收费的，免费服务是有限制的，感兴趣的同学可以上手试试。

给UI设计师的UI控件占位符服务 https://www.uifiller.com/

当我们需要用小图标的时候，可以直接在网站上搜索图标然后复制图标，粘贴到设计软件当中。现在终于有人更近一步了，直接将日常的 UI 控件的占位符直接设计好，选中你需要的占位符复制粘贴，也是一个提升设计效率的好办法！所以做 UI 设计的同学可以试试看。

在 Figma 中直接使用交互式小组件 https://www.figma.com/community/widgets/figma_design

现在 Figma 当中更新了新功能，Figma 官方和 Asana、Jira 等社区的开发者一同合作，将交互式小部件带到了 figma 的插件系统当中，这样一来，进化在进行设计的时候就不止有静态的元素了，还能使用直接可交互式的控件。

本文是送给即将进入职场的新生 设计师 们的经验总结，内容包括理论篇、面试篇、工作篇、成长篇。

拓展阅读：

从大学到职场前3年，设计师如何打造一个完美的开局账号？ 大家可能听到完美开局就有点兴奋，小说和游戏里的剧情真的可以在我们设计师的身上重演吗？

阅读文章 >

这半年有很多收获与感触，我见识到了个人偏好与认知偏差对业务发展带来的各种冲击，在那么一阵子想到了挺多的东西，后来想着围绕设计做一些回顾思考，希望能够从中提炼出一些有营养的东西。

认知偏差 ：

如何利用「认知偏差」达成设计目标？来看大厂的实战案例！ 前言 在近两年的电商相关设计实践中，积累和运用了一些关于改变用户认知和引导用户行为的心理学手段，例如心理账户、损失厌恶、社会认同等等。

阅读文章 >

如前面所讲，各类角色在职场上所秉持的个人偏好总是会对业务发展带来各种影响，如果是管理决策者，个人偏好更是会产生加倍的作用，且很有可能是副作用。回到设计上，亦是，所以这里想要聊一聊 设计偏好 在职场上的好与坏，如何扬长避短。

设计偏好是什么？ 先说说偏好；

偏好本质就是人们在内心的一种情感和倾向，一般引起偏好的感性因素会多于理性因素，并非是直观的。大多数情况下，偏好决定了作为个体在一定的环境和条件下所采取的决策与行为。

再说设计；

形形色色的设计其实就是指我们将设想经过合理规划与计划后，通过各种途径创造表达出来的过程。这个过程下的设计产物是多元化的，因此设计工作离不开各自设计产业的知识储备应用、输出技能、沟通协作、客户需求。所以设计偏好即围绕设计工作展开的一系列思考决策、设计倾向性，它围绕设计认知与心理展开，从思考到决策，从决策到输出，从输出到协作，设计偏好会伴随着大脑运作悄无声息的渗透到设计工作的点滴之中。

设计偏好的特征 对于这些偏好我们提炼了一些主要特征，了解这些特征能够使得我们对设计偏好有更好的认识与运用，能够自我的发觉和及时调整设计工作中偏好对决策与行为的作用，从而达到扬长避短的目的。

1. 内外一致性 偏好本身是一种潜藏在人们内心的一种情感和倾向，并且对个体行为决策会产生直接作用，因此可以看出偏好本身具备个人内心与外在行为的一致性，在相关的用户偏好研究中也明确指出的偏好具有内在的一致性和有序性，不难看出这也是偏好对工作输出能够直接产生作用的原因之一。

2. 利益最大化 偏好会使得我们决策时，倾向认为对自己更有利的方向，会使得我们选择对自身而言更有价值或是更易实现的方向，这种情况下偏好使得我们决策过程会遵从个人利益最大化；

3. 隐性倾向 通俗讲就是弱感知-潜意识的偏好倾向，这些偏好我们不能轻易感知到，因为大脑可能已经根据我们的习惯或喜好轻车熟路的开始决策和执行了，这就像是肌肉记忆一样，比方说我个人喜欢带一点粉的红色，那么我在设计中需要用到红色时就极有可能会自然的带一点粉，并且我们不会有明显的感知，在设计这么宽阔的领域中，相信这种场景还有很多。

4. 显性倾向 另外就是显性倾向表现，即强感知-主观性，常常依据个人的认知喜好或过往经验做事，对他人观点不易接受和理解，甚至会使得我们与他人观点不合争执起来，我们会捍卫自己的偏好或认知结构，举例我是一个极简主义的设计师，当我认为这款产品适合极简设计时，有人提出反对，我则会极力争取用极简设计，当然了，具体谁对谁错还要具体看待了。通常面对设计方案输出或决策的时候都要提防些，要学会同理心与聆听，减少偏激，力求有价值的争论。

5. 缺少客观性 设计偏好往往会附带个体的情感、性格、心理因素，主观性高于客观性，但是在实际的工作中我们更需要的是客观理性的结果，这也是主要的一个负面特征，对此我们只能通过提升自我认知，加深思考或共同讨论来减少非理性的偏好作用，或是丰富决策信息或科学利用工具进行辅助。

最常见的两类客观性缺失表现：

偏执表现

当我们在设计工作中遇到他人很坚定自己的想法，却又不能很好的解释说服大家，这就是一种偏执的表现，例如我说这个信息动态图文视频并茂，且图视频为主导，数量也比较可观，可以使用双列表瀑布流来进行呈现，可以展现更多的内容主体，但是对方就是觉得应该使用朋友圈这种结构来呈现，却又不能结合自身产品特征给出合适的理由。

引起的原因一方面是因为对方的认知里更加熟悉某种方式、含有自身的偏爱、亦或者过往经验里做过。这种偏激表现缺乏深层次的思考，以及自身认知局限，不能更好的客观理解和解释。

当然啦，你要是说你偏激，对于设计的细节总是钻牛角尖精益求精，那么秀儿请你保持。

从众表现

设计工作中的从众表现大多跟自身设计喜好以及权威趋势有一定关系，如果说一个设计师平时接触和体验的产品很片面，那么自身也会更加熟悉这些产品的设计风格，自己在输出时也较容易受到影响；

另一方面则是权威偏好，大公司的产品或是流行的设计趋势，总是容易吸引到 设计师 们，设计者也会尝试练习或不自觉地应用到自家产品中，这不是什么坏事，好东西就应该 Get 到用起来，但如果不进行深入的理解思考，看人家做自己也做就很容易忽略自家产品的特征差异，从而迷失自身本有的个性甚至略显跛脚。所以不要只是简单从众，别只是 Copy 到了表象内容。

6. 认知偏差 即认知偏见，使得偏好有失客观性且不能自知原因之一，认知是我们对事物的认识与理解，也是对知识的理解加工与运用过程。当我们获取的信息不全面，超出我们认知，以及心理活动作祟时就会产生错误的理解结果，就像是盲人摸象一般，很难有一个客观正确的导向。

并且在产品设计工作中，设计者也会运用常见的认知偏差或相关定律来实现商业目的，例如常见电商产品会显示更高的原价，其目标就是让用户进行比对锚定；

常见认知偏差举例

这些设计偏好需注意 不论是产品设计、交互设计还是界面设计，这些设计相关的偏好本质离不开设计的知识体系、思考决策、设计输出、协作沟通、学习提升多个方面，并且各色的设计偏好也穿插在其中。

1. 设计认知 设计认知就是我们对一系列设计相关的知识或信息收集，然后理解加工与应用。这些设计认知不仅是我们做好设计的基础保障，也是我们进行打破创新的内核。

我们即使每天都在设计工作中往返，但是不同的设计技法、设计模型、设计理论、设计风格都会有发展变化，自身在工作中的不断应用也会有自己的认识理解，也就是我们常说的温故知新。当我们具备了更深入和更广阔的认知后，我们就可以更加客观专业的进行设计或创新。

2. 设计经验 设计经验是重要的职能资源，是设计认知的体现，也是高效作业的必要条件。但经验属于过去式，长时间的惯性思考或依赖经验做事也会翻船，因为我们会忽略设计流程中一些细微变数，并且也会阻碍认知层面的更新完善。

就今年我们在申请支付宝 H5 支付资质前，我指出需要提前准备一些网页材料，技术 Leader 肯定的表示根本不需要，他们以前就没提交过，但实际上去申请时还是卡在了这一步。

3. 设计思维 不同设计思维偏好下，会影响我们面对设计问题的一系列思考过程；

思维方式(先考虑流程逻辑是一种逻辑思维、先想象界面内容再到下一个界面内容构建是一种具象思维) 思考角度（用户视角、商家视角、研发视角等） 思考重点（优质的体验、商业盈利、转化率、美观度等） 认知运用（一系列设计相关的知识认知运用） 设计规划（如设计策略：分析需求、定义目标、设想方案、绘制 DEMO、测试改进） …… 面对不同的设计问题，通过思考问题特征选用不同的设计思维是很重要的，良好的思维方式总是受益良久，懒散从简的思维只会使我们的设计敷衍了事，经不起推敲。

4. 设计决策 设计决策是我们在设计工作中对相关信息收集比对效果后进行站队或决定的过程，相比思考有时候决策参杂的偏好因素反而会更多，例如以下拆分出的四个要点：

惯性思维

大脑为减轻负荷，大多数时候都是在进行简单化思考，我们习惯性走捷径，这也是经验为我们带来的便利，但也使得我们容易忽略一些信息，或是认为差不多了就索性接受了这些不完美的结论，所以一旦发觉自己可能在为自己的便捷开脱或是信息收集不足想要盲断结论时，我们就当有所意识，不要让惯性思维成为了认知完善升级的绊脚石。

主观喜好

主观喜好在于更注重个体主观意识，同时喜好本身会覆盖很多方面，就界面设计为例，设计者可以有自己喜好的颜色、设计风格、设计工具、设计方式、设计流程等，这些关键点，在设计工作中我们会不自觉的代入这些自己喜好的元素，以至于我们会忽略掉他人的感受或想法，让我们产生有失客观性的结果。

审美偏好

人类是视觉动物，美观的事物总是更加被人青睐，但美是多元化的，但是由于人群的年龄、文化习俗、生活环境、人群特征的差异，审美均有所不同。在商业设计的背景下，我们往往不能只是从自身审美观去出发，而忽略了产品典型客户的审美倾向。

竞品偏好

颠覆式创新很难出现，往往都需要一定参考和演变来产生新的灵感，而且在实际的工作中，我们的产品大多都有相应的竞品，我们体验与参考，在互相的借鉴提升中，我们也会不知不觉地对这些竞品产生偏好，当我们需要类似的产品功能时，我们就会马上去看看某个竞品是如何做的，或者看看同类型的龙头产品是如何做的，这种偏好是带有主观色彩的，如果你在进行决策时简单的选择了靠近竞品的方式，那么久而久之你的产品各方面会愈发的接近某个竞品，这么做不一定正确先不说，也可能错失创新的机会。

在早些时候，配合运营 Leader 做需求时，受到运营 Leader 个人对某产品的使用偏好，我们给出了市面上更加前卫的交互方式，但最终还是比对某个竞品完成了功能开发，不过有趣的是，时过境迁那个竞品迭代成了我们当初提出的交互方式。

可能在思考决策间还有更多的内在偏好产生着影响，例如情绪、性格等，我们尽管没有办法做到时刻的理性，但是能够对这些大脑的偏好或局限有一定认识，也许我们下次的思考决策就会更加睿智。

5. 设计输出 如果只是个人的输出使用的话，实际上没有太多限制，一般都是根据个人的设计习惯来的，你先画手稿也好，还是直接使用程序输出也好，你用 A 程序做也好用 B 程序也罢，只要能够呈现出最终想要的结果就好。

其实真正值得关注的是输出效率、协同能力以及效果优势，尽管我们可能某个设计程序已经用的得心应手了，但是在职场之下，我们还是需要尝试各种新奇的工具或更高的版本，以保证可以更好的在职场下兼容团队协作与设计流程；

6. 协作沟通 办公场景下，一是面向组内二是面向上下游协作，组内沟通门槛会更小，上下游则门槛会更高，可能有专业上的隔阂。大部分时候为了更好的促进协作我们都需要撰写材料或是借助其他服务工具，以产品交互为例，我们往往为促成开发结果都需要撰写设计理念、设计规范、设计文档等，以使得设计能够被理解和开发落地，就文档的格式来说就存在不同的撰写偏好，并且浏览者也是，所以为了效率更高，我们应该去推动更具包容性和易读的文档格式，或者以大部分人更倾向的文档格式去开展，而不要仅根据个人习惯偏好去写。并且不同格式的文档各具特点，在适当的场景我们可以选择性使用。

7. 学习提升 学习方式

在进入职场后，我们会通过不同的学习方式进行自我提升，有的人偏爱看书、有人浏览文章、有人动手练习、有人参加培训班、也有人复盘分享，尽管各自有不同的学习方式喜好，但是回过头想想自己真的掌握了吗？面对网络的各种信息大潮，我们那渴望知识的三分热情时常被冲散，并且耐心不足，时常焦虑。所以这个时候应该反思你常常应用的学习方式有效率吗？有质量吗？有吸收吗？阶段目标达到了吗？

学习内容

面对职场内卷，学习什么内容经常是被动的，甚至大部分时候是从众的选择学习内容，同事学什么我看什么，朋友学什么我学什么，近期流行什么我学什么，也不乏职场教育的贩卖焦虑，这种情况下，我们的学习内容偏好往往是这个学一点那个学一点，沉不下心，没有方向没有阶段也没有消化。相关设计说起来都知道一点，纵深下去却又没什么质量，你以为你可以指点江山了，一顿操作后，却发现是纸上谈兵。

扬长避短指南 针对不同设计偏好，我们最好是能够有客观的认识，对好的继续保持，对坏的进行改善，即便没办法快速纠正，能够及时止损也是好的，面向这些设计偏好改善，我给自己整理了六个方面的指南，包含了自身认知到借助外界了解改善两层面。

1. 阅读学习

打工人哪有不摸鱼的，碎片化时间总是有的，只不过经常是给大脑填充了一堆无用的愉悦消遣内容罢了，了解自己的碎片化时间以及平时刷手机娱乐的习惯，对自己的学习方式以及学习内容进行规划改善是很有用的。今年我已经把一系列娱乐八卦短视频的应用卸载了，并尝试以文章或业内资讯等作为碎片化时间的主要消遣内容，并且阅读时对核心的内容进行精简小记，不定期的打开小记进行重温。其次作为设计者，良好的审美与眼界也是很重要的，即使眼高手低也好过眼低手低，因此不断的去浏览好的作品去扩展眼界与审美也是重要的学习过程。

逐渐拓展学习链路，即使业内专家，也都是对上下游协作有较好的认知了解的，并非只是局限在自己的某个设计领域内，因此在职场规划上，我们阅读学习的内容应该有意识的围绕设计工作的上下游展开，以加强自己的短板、职场竞争力、上下游协作等专业认知，不知不觉你解决问题的能力就会综合提升，成为更可靠的设计师。

2. 实践创新

对应不同的学习内容，通过练习加强掌握，有很多东西即使我们学会了，如果长时间不进行温习或应用也会生疏，即使我自己写的东西，放过一阵子后再次温习也可能有新的体会。对于新学习的内容，可以找合适的条件在工作场景中进行输出，只有结合工作背景学以致用时，才能取得更好的理解与掌握程度，也就是所谓的实践出真知。当我们在不断的应用或尝试后，会逐步产生更深入的理解，特别是通过更加广阔的设计视角看待时，我们会有更加透彻的认知，这些设计认知会成为我们日后优化创新的垫脚石。

3. 独立思考

数字化的时代，信息更加聒噪，在各种算法加持下，充斥着各种取悦我们的内容，大脑时常进入葛优躺状态，认知面有效的提升或深度思考频率愈发减少。而工作中我们更多的也是根据经验与认知在进行惯性思考决策，沉下心跟独立思考也显得愈发的宝贵，保持独立的思考能力必然是优秀者的必备特质。在认知不足的情况下，我们很难意识到我们正在犯错，就如前面部分所讲，完善和了解更多相关知识提升认知也是思考的重要条件之一。

4. 沟通探讨

多人沟通探讨可以有更多观念上的碰撞，可以刺激我们大脑进入系统思考，而使得思考效果优于惯性思考。而更多人参与思考或评审时，也能稀释掉个人的偏好棱角。

面向设计需求讨论时，需求背景、商业价值、应用场景、用户特征、设计目标这几个点都是我比较关注的，这些内容可以确保我们有效讨论以及带动思考，但同时也不要轻易从众，最好有自己的见解，不论是对 leader 还是组员都可以更好交代，也能确保不被他人的偏好轻易带偏。

对于设计结果输出，竞稿或多人研讨也能够获取到更多视角下的见解，以消弭更多的个人设计偏好带来的不良作用。在职场工作场景下，我们的沟通探讨可以是组内的专业提升学习，可以是跨组的业务观念探讨，也可以与用户进行沟通互动，亦或是一场同事意见交流，通过外部视角互相批评建议来改善了解自己。

5. 信息比较

收集更多信息甚至使用工具是为了更好的作出决策或全面的思考。当我们获取了更多的有效信息时，越是能够作出稳健正确的判断，所以当你拥有决策权时，你便应该想办法获取更多信息或科学的使用工具辅助。

以竞品分析为例，若结合个人的竞品偏好去洞察，我们所获取的信息不仅有限，还极有可能附带个人的偏好因素，而当我们收集到更多的核心竞品、边缘竞品、甚至跨行竞品信息后，有了更多见解和反思才能使得我们打破经验或认知的局限，作出更正确的判读。至于需求设计前结合产品背景、阶段、模式、用户来分析，考虑可行性、市场趋势、用户体验、商业诉求等多方面因素，配合数据分析、用户研究等手段就不额外说了，其根因也便是获取更多信息用于比较与决策。

6. 复盘总结

复盘总结在于回顾与思考，视角更具有全局性，能够客观的看到问题所在，也能提取精彩之处，并且经过一番思考总结后，有利于吸取教训提升认知，为下次工作做投资，同时也可以内部分享共勉，加强团队凝聚力，为后续协作润滑。一般复盘总结不限于项目，也可以是自己的工作表现、阶段目标、学习情况等。

结语 回过头来，在自己过往的经历中，也存在过因个人的设计偏好对工作或协作带来各种影响，只是此前并不能很好自知，若不是同事之间的探讨交流或深入的思考比对，独身一人设计的过程中，常常会被个人的设计偏好左右，而作为决策者甚至老板，更需慎重个人偏好的影响。另外面对职场内卷，生活压力我们时常焦虑，我们拿外界获取的各种信息与自身相比较，有时候甚至怀疑自己，以至于打乱了当下的计划或安排，所以尝试减少那些没用的信息获取，让自己沉下心来，做好当下的计划也是重要的一点。

最后感谢在匆忙的摸鱼中，抽出一点时间阅读此文，祝大家鱼儿越摸越肥，钱包越来越鼓～

这半年有很多收获与感触，我见识到了个人偏好与认知偏差对业务发展带来的各种冲击，在那么一阵子想到了挺多的东西，后来想着围绕设计做一些回顾思考，希望能够从中提炼出一些有营养的东西。

认知偏差 ：

如何利用「认知偏差」达成设计目标？来看大厂的实战案例！ 前言 在近两年的电商相关设计实践中，积累和运用了一些关于改变用户认知和引导用户行为的心理学手段，例如心理账户、损失厌恶、社会认同等等。

阅读文章 >

如前面所讲，各类角色在职场上所秉持的个人偏好总是会对业务发展带来各种影响，如果是管理决策者，个人偏好更是会产生加倍的作用，且很有可能是副作用。回到设计上，亦是，所以这里想要聊一聊 设计偏好 在职场上的好与坏，如何扬长避短。

设计偏好是什么？ 先说说偏好；

偏好本质就是人们在内心的一种情感和倾向，一般引起偏好的感性因素会多于理性因素，并非是直观的。大多数情况下，偏好决定了作为个体在一定的环境和条件下所采取的决策与行为。

再说设计；

形形色色的设计其实就是指我们将设想经过合理规划与计划后，通过各种途径创造表达出来的过程。这个过程下的设计产物是多元化的，因此设计工作离不开各自设计产业的知识储备应用、输出技能、沟通协作、客户需求。所以设计偏好即围绕设计工作展开的一系列思考决策、设计倾向性，它围绕设计认知与心理展开，从思考到决策，从决策到输出，从输出到协作，设计偏好会伴随着大脑运作悄无声息的渗透到设计工作的点滴之中。

设计偏好的特征 对于这些偏好我们提炼了一些主要特征，了解这些特征能够使得我们对设计偏好有更好的认识与运用，能够自我的发觉和及时调整设计工作中偏好对决策与行为的作用，从而达到扬长避短的目的。

1. 内外一致性 偏好本身是一种潜藏在人们内心的一种情感和倾向，并且对个体行为决策会产生直接作用，因此可以看出偏好本身具备个人内心与外在行为的一致性，在相关的用户偏好研究中也明确指出的偏好具有内在的一致性和有序性，不难看出这也是偏好对工作输出能够直接产生作用的原因之一。

2. 利益最大化 偏好会使得我们决策时，倾向认为对自己更有利的方向，会使得我们选择对自身而言更有价值或是更易实现的方向，这种情况下偏好使得我们决策过程会遵从个人利益最大化；

3. 隐性倾向 通俗讲就是弱感知-潜意识的偏好倾向，这些偏好我们不能轻易感知到，因为大脑可能已经根据我们的习惯或喜好轻车熟路的开始决策和执行了，这就像是肌肉记忆一样，比方说我个人喜欢带一点粉的红色，那么我在设计中需要用到红色时就极有可能会自然的带一点粉，并且我们不会有明显的感知，在设计这么宽阔的领域中，相信这种场景还有很多。

4. 显性倾向 另外就是显性倾向表现，即强感知-主观性，常常依据个人的认知喜好或过往经验做事，对他人观点不易接受和理解，甚至会使得我们与他人观点不合争执起来，我们会捍卫自己的偏好或认知结构，举例我是一个极简主义的设计师，当我认为这款产品适合极简设计时，有人提出反对，我则会极力争取用极简设计，当然了，具体谁对谁错还要具体看待了。通常面对设计方案输出或决策的时候都要提防些，要学会同理心与聆听，减少偏激，力求有价值的争论。

5. 缺少客观性 设计偏好往往会附带个体的情感、性格、心理因素，主观性高于客观性，但是在实际的工作中我们更需要的是客观理性的结果，这也是主要的一个负面特征，对此我们只能通过提升自我认知，加深思考或共同讨论来减少非理性的偏好作用，或是丰富决策信息或科学利用工具进行辅助。

最常见的两类客观性缺失表现：

偏执表现

当我们在设计工作中遇到他人很坚定自己的想法，却又不能很好的解释说服大家，这就是一种偏执的表现，例如我说这个信息动态图文视频并茂，且图视频为主导，数量也比较可观，可以使用双列表瀑布流来进行呈现，可以展现更多的内容主体，但是对方就是觉得应该使用朋友圈这种结构来呈现，却又不能结合自身产品特征给出合适的理由。

引起的原因一方面是因为对方的认知里更加熟悉某种方式、含有自身的偏爱、亦或者过往经验里做过。这种偏激表现缺乏深层次的思考，以及自身认知局限，不能更好的客观理解和解释。

当然啦，你要是说你偏激，对于设计的细节总是钻牛角尖精益求精，那么秀儿请你保持。

从众表现

设计工作中的从众表现大多跟自身设计喜好以及权威趋势有一定关系，如果说一个设计师平时接触和体验的产品很片面，那么自身也会更加熟悉这些产品的设计风格，自己在输出时也较容易受到影响；

另一方面则是权威偏好，大公司的产品或是流行的设计趋势，总是容易吸引到 设计师 们，设计者也会尝试练习或不自觉地应用到自家产品中，这不是什么坏事，好东西就应该 Get 到用起来，但如果不进行深入的理解思考，看人家做自己也做就很容易忽略自家产品的特征差异，从而迷失自身本有的个性甚至略显跛脚。所以不要只是简单从众，别只是 Copy 到了表象内容。

6. 认知偏差 即认知偏见，使得偏好有失客观性且不能自知原因之一，认知是我们对事物的认识与理解，也是对知识的理解加工与运用过程。当我们获取的信息不全面，超出我们认知，以及心理活动作祟时就会产生错误的理解结果，就像是盲人摸象一般，很难有一个客观正确的导向。

并且在产品设计工作中，设计者也会运用常见的认知偏差或相关定律来实现商业目的，例如常见电商产品会显示更高的原价，其目标就是让用户进行比对锚定；

常见认知偏差举例

这些设计偏好需注意 不论是产品设计、交互设计还是界面设计，这些设计相关的偏好本质离不开设计的知识体系、思考决策、设计输出、协作沟通、学习提升多个方面，并且各色的设计偏好也穿插在其中。

1. 设计认知 设计认知就是我们对一系列设计相关的知识或信息收集，然后理解加工与应用。这些设计认知不仅是我们做好设计的基础保障，也是我们进行打破创新的内核。

我们即使每天都在设计工作中往返，但是不同的设计技法、设计模型、设计理论、设计风格都会有发展变化，自身在工作中的不断应用也会有自己的认识理解，也就是我们常说的温故知新。当我们具备了更深入和更广阔的认知后，我们就可以更加客观专业的进行设计或创新。

2. 设计经验 设计经验是重要的职能资源，是设计认知的体现，也是高效作业的必要条件。但经验属于过去式，长时间的惯性思考或依赖经验做事也会翻船，因为我们会忽略设计流程中一些细微变数，并且也会阻碍认知层面的更新完善。

就今年我们在申请支付宝 H5 支付资质前，我指出需要提前准备一些网页材料，技术 Leader 肯定的表示根本不需要，他们以前就没提交过，但实际上去申请时还是卡在了这一步。

3. 设计思维 不同设计思维偏好下，会影响我们面对设计问题的一系列思考过程；

思维方式(先考虑流程逻辑是一种逻辑思维、先想象界面内容再到下一个界面内容构建是一种具象思维) 思考角度（用户视角、商家视角、研发视角等） 思考重点（优质的体验、商业盈利、转化率、美观度等） 认知运用（一系列设计相关的知识认知运用） 设计规划（如设计策略：分析需求、定义目标、设想方案、绘制 DEMO、测试改进） …… 面对不同的设计问题，通过思考问题特征选用不同的设计思维是很重要的，良好的思维方式总是受益良久，懒散从简的思维只会使我们的设计敷衍了事，经不起推敲。

4. 设计决策 设计决策是我们在设计工作中对相关信息收集比对效果后进行站队或决定的过程，相比思考有时候决策参杂的偏好因素反而会更多，例如以下拆分出的四个要点：

惯性思维

大脑为减轻负荷，大多数时候都是在进行简单化思考，我们习惯性走捷径，这也是经验为我们带来的便利，但也使得我们容易忽略一些信息，或是认为差不多了就索性接受了这些不完美的结论，所以一旦发觉自己可能在为自己的便捷开脱或是信息收集不足想要盲断结论时，我们就当有所意识，不要让惯性思维成为了认知完善升级的绊脚石。

主观喜好

主观喜好在于更注重个体主观意识，同时喜好本身会覆盖很多方面，就界面设计为例，设计者可以有自己喜好的颜色、设计风格、设计工具、设计方式、设计流程等，这些关键点，在设计工作中我们会不自觉的代入这些自己喜好的元素，以至于我们会忽略掉他人的感受或想法，让我们产生有失客观性的结果。

审美偏好

人类是视觉动物，美观的事物总是更加被人青睐，但美是多元化的，但是由于人群的年龄、文化习俗、生活环境、人群特征的差异，审美均有所不同。在商业设计的背景下，我们往往不能只是从自身审美观去出发，而忽略了产品典型客户的审美倾向。

竞品偏好

颠覆式创新很难出现，往往都需要一定参考和演变来产生新的灵感，而且在实际的工作中，我们的产品大多都有相应的竞品，我们体验与参考，在互相的借鉴提升中，我们也会不知不觉地对这些竞品产生偏好，当我们需要类似的产品功能时，我们就会马上去看看某个竞品是如何做的，或者看看同类型的龙头产品是如何做的，这种偏好是带有主观色彩的，如果你在进行决策时简单的选择了靠近竞品的方式，那么久而久之你的产品各方面会愈发的接近某个竞品，这么做不一定正确先不说，也可能错失创新的机会。

在早些时候，配合运营 Leader 做需求时，受到运营 Leader 个人对某产品的使用偏好，我们给出了市面上更加前卫的交互方式，但最终还是比对某个竞品完成了功能开发，不过有趣的是，时过境迁那个竞品迭代成了我们当初提出的交互方式。

可能在思考决策间还有更多的内在偏好产生着影响，例如情绪、性格等，我们尽管没有办法做到时刻的理性，但是能够对这些大脑的偏好或局限有一定认识，也许我们下次的思考决策就会更加睿智。

5. 设计输出 如果只是个人的输出使用的话，实际上没有太多限制，一般都是根据个人的设计习惯来的，你先画手稿也好，还是直接使用程序输出也好，你用 A 程序做也好用 B 程序也罢，只要能够呈现出最终想要的结果就好。

其实真正值得关注的是输出效率、协同能力以及效果优势，尽管我们可能某个设计程序已经用的得心应手了，但是在职场之下，我们还是需要尝试各种新奇的工具或更高的版本，以保证可以更好的在职场下兼容团队协作与设计流程；

6. 协作沟通 办公场景下，一是面向组内二是面向上下游协作，组内沟通门槛会更小，上下游则门槛会更高，可能有专业上的隔阂。大部分时候为了更好的促进协作我们都需要撰写材料或是借助其他服务工具，以产品交互为例，我们往往为促成开发结果都需要撰写设计理念、设计规范、设计文档等，以使得设计能够被理解和开发落地，就文档的格式来说就存在不同的撰写偏好，并且浏览者也是，所以为了效率更高，我们应该去推动更具包容性和易读的文档格式，或者以大部分人更倾向的文档格式去开展，而不要仅根据个人习惯偏好去写。并且不同格式的文档各具特点，在适当的场景我们可以选择性使用。

7. 学习提升 学习方式

在进入职场后，我们会通过不同的学习方式进行自我提升，有的人偏爱看书、有人浏览文章、有人动手练习、有人参加培训班、也有人复盘分享，尽管各自有不同的学习方式喜好，但是回过头想想自己真的掌握了吗？面对网络的各种信息大潮，我们那渴望知识的三分热情时常被冲散，并且耐心不足，时常焦虑。所以这个时候应该反思你常常应用的学习方式有效率吗？有质量吗？有吸收吗？阶段目标达到了吗？

学习内容

面对职场内卷，学习什么内容经常是被动的，甚至大部分时候是从众的选择学习内容，同事学什么我看什么，朋友学什么我学什么，近期流行什么我学什么，也不乏职场教育的贩卖焦虑，这种情况下，我们的学习内容偏好往往是这个学一点那个学一点，沉不下心，没有方向没有阶段也没有消化。相关设计说起来都知道一点，纵深下去却又没什么质量，你以为你可以指点江山了，一顿操作后，却发现是纸上谈兵。

扬长避短指南 针对不同设计偏好，我们最好是能够有客观的认识，对好的继续保持，对坏的进行改善，即便没办法快速纠正，能够及时止损也是好的，面向这些设计偏好改善，我给自己整理了六个方面的指南，包含了自身认知到借助外界了解改善两层面。

1. 阅读学习

打工人哪有不摸鱼的，碎片化时间总是有的，只不过经常是给大脑填充了一堆无用的愉悦消遣内容罢了，了解自己的碎片化时间以及平时刷手机娱乐的习惯，对自己的学习方式以及学习内容进行规划改善是很有用的。今年我已经把一系列娱乐八卦短视频的应用卸载了，并尝试以文章或业内资讯等作为碎片化时间的主要消遣内容，并且阅读时对核心的内容进行精简小记，不定期的打开小记进行重温。其次作为设计者，良好的审美与眼界也是很重要的，即使眼高手低也好过眼低手低，因此不断的去浏览好的作品去扩展眼界与审美也是重要的学习过程。

逐渐拓展学习链路，即使业内专家，也都是对上下游协作有较好的认知了解的，并非只是局限在自己的某个设计领域内，因此在职场规划上，我们阅读学习的内容应该有意识的围绕设计工作的上下游展开，以加强自己的短板、职场竞争力、上下游协作等专业认知，不知不觉你解决问题的能力就会综合提升，成为更可靠的设计师。

2. 实践创新

对应不同的学习内容，通过练习加强掌握，有很多东西即使我们学会了，如果长时间不进行温习或应用也会生疏，即使我自己写的东西，放过一阵子后再次温习也可能有新的体会。对于新学习的内容，可以找合适的条件在工作场景中进行输出，只有结合工作背景学以致用时，才能取得更好的理解与掌握程度，也就是所谓的实践出真知。当我们在不断的应用或尝试后，会逐步产生更深入的理解，特别是通过更加广阔的设计视角看待时，我们会有更加透彻的认知，这些设计认知会成为我们日后优化创新的垫脚石。

3. 独立思考

数字化的时代，信息更加聒噪，在各种算法加持下，充斥着各种取悦我们的内容，大脑时常进入葛优躺状态，认知面有效的提升或深度思考频率愈发减少。而工作中我们更多的也是根据经验与认知在进行惯性思考决策，沉下心跟独立思考也显得愈发的宝贵，保持独立的思考能力必然是优秀者的必备特质。在认知不足的情况下，我们很难意识到我们正在犯错，就如前面部分所讲，完善和了解更多相关知识提升认知也是思考的重要条件之一。

4. 沟通探讨

多人沟通探讨可以有更多观念上的碰撞，可以刺激我们大脑进入系统思考，而使得思考效果优于惯性思考。而更多人参与思考或评审时，也能稀释掉个人的偏好棱角。

面向设计需求讨论时，需求背景、商业价值、应用场景、用户特征、设计目标这几个点都是我比较关注的，这些内容可以确保我们有效讨论以及带动思考，但同时也不要轻易从众，最好有自己的见解，不论是对 leader 还是组员都可以更好交代，也能确保不被他人的偏好轻易带偏。

对于设计结果输出，竞稿或多人研讨也能够获取到更多视角下的见解，以消弭更多的个人设计偏好带来的不良作用。在职场工作场景下，我们的沟通探讨可以是组内的专业提升学习，可以是跨组的业务观念探讨，也可以与用户进行沟通互动，亦或是一场同事意见交流，通过外部视角互相批评建议来改善了解自己。

5. 信息比较

收集更多信息甚至使用工具是为了更好的作出决策或全面的思考。当我们获取了更多的有效信息时，越是能够作出稳健正确的判断，所以当你拥有决策权时，你便应该想办法获取更多信息或科学的使用工具辅助。

以竞品分析为例，若结合个人的竞品偏好去洞察，我们所获取的信息不仅有限，还极有可能附带个人的偏好因素，而当我们收集到更多的核心竞品、边缘竞品、甚至跨行竞品信息后，有了更多见解和反思才能使得我们打破经验或认知的局限，作出更正确的判读。至于需求设计前结合产品背景、阶段、模式、用户来分析，考虑可行性、市场趋势、用户体验、商业诉求等多方面因素，配合数据分析、用户研究等手段就不额外说了，其根因也便是获取更多信息用于比较与决策。

6. 复盘总结

复盘总结在于回顾与思考，视角更具有全局性，能够客观的看到问题所在，也能提取精彩之处，并且经过一番思考总结后，有利于吸取教训提升认知，为下次工作做投资，同时也可以内部分享共勉，加强团队凝聚力，为后续协作润滑。一般复盘总结不限于项目，也可以是自己的工作表现、阶段目标、学习情况等。

结语 回过头来，在自己过往的经历中，也存在过因个人的设计偏好对工作或协作带来各种影响，只是此前并不能很好自知，若不是同事之间的探讨交流或深入的思考比对，独身一人设计的过程中，常常会被个人的设计偏好左右，而作为决策者甚至老板，更需慎重个人偏好的影响。另外面对职场内卷，生活压力我们时常焦虑，我们拿外界获取的各种信息与自身相比较，有时候甚至怀疑自己，以至于打乱了当下的计划或安排，所以尝试减少那些没用的信息获取，让自己沉下心来，做好当下的计划也是重要的一点。

最后感谢在匆忙的摸鱼中，抽出一点时间阅读此文，祝大家鱼儿越摸越肥，钱包越来越鼓～