16 实现路径：B端产品与设计师需要会写代码吗？
你好，我是汤圆。今天给你分享一个B端设计师经常被问到的问题：设计师需要会写代码吗？
很多刚刚入行的B端设计师都问过我这个问题。一些小伙伴说在面试的时候经常被问到自己是否了解代码的逻辑，所以总觉得应该要去学习下怎么写代码；还有一些非常具有创新能力的设计师设计了非常贴合业务，体验非常优秀的方案，但是在推动研发实现的时候总是没法落地，被研发拒绝说，“这个难度太大，无法实现”，导致最终产品变得非常平庸。
这个问题似乎需要设计师必须会写代码才能解决，但实际上是一个误区。
设计师要会写代码吗？
专业层面上，我们要知道，设计与写代码是两件完全不同并且极具专业特性的事。要做到极其专业，都需要花费五年、十年甚至几十年的时间，所以从根本上来说，大部分人很难做到两项能力都非常精通。
客观层面上，因为B端产品的界面相对C端要多很多，数据后台也要复杂很多，研发伙伴有大量的工作要去完成，通常就没有为创意效果预留的时间了。所以经常会有小伙伴在做B端体验设计的时候问我，研发同学总说这个太难实现了，总在找借口，很不给力，是不是要自己会写代码才行。这种想法的萌生很正常，甚至很多B端团队的体验负责人也会希望自己的团队中有一个专门的研发人员，才能保证效果做得更好。
很多公司和团队都会通过不同专业的优秀人员协作来实现做出优质产品体验的目标。协作的问题我们在上节课讲到过，必须依托于清晰的需求以及研发伙伴积极的态度，只有所有人都投入更多的时间和精力才能实现创新的设计效果。
解决这个问题有两个方法。一种是设计团队自己花成本，招聘一位非常厉害的研发人员专门解决这类问题，但这种情况成本太高，通常不持久；另一种，还是回到设计师自身，自己去解决。
我在这些年做B端体验的经历中也遇到了很多次同样的问题，后来学习了一些代码的内容才发现，设计师本质上是不需要会写代码的，但是必须要理解代码实现效果的逻辑，这样才能保障你和开发伙伴的“语言”在同一条水平线上。
不会写代码也能落地优秀创意的内容？
只要你能了解效果的实现路径，就能快速、清晰地沟通需求，通过价值与目标的传递让开发伙伴投入进来，与你一起做出优秀创意的体验设计内容。我把你能做的事情分为了3个阶段，帮你一步一步推动自己的创意设计顺利落地。
80%： 了解大部分B端产品研发实现的基础逻辑
如果你希望你的设计最终能有一个优秀的落地效果，首先需要了解一些研发的基础实现和落地逻辑。
目前大部分B端产品使用的都不是安装包形式，而是采用Web（网页）形式，Web的实现基本也都是HTML5的形式。这种形式的内容逻辑相对简单很多，为设计师的学习带来了极大的便利。
HTML有非常成熟的教程。设计师想要快速理解，最好找一些视频教程，边看介绍边看对应的输出效果就理解里面的对应逻辑了。你可以忽略这些教程里面讲解代码的部分，只需要快速了解HTML实现按钮的样式、位置以及交互动效的逻辑就可以。因为作为体验设计师，你只需要理解这些效果的现实路径，不需要了解具体每个代码怎么写。这些教程在B站上很多，只需要选择一个你喜欢的老师就可以。
如果你喜欢看文字，也可以在微信读书中找到很多讲解HTML5+CSS的教学内容，同样，不要掉到去看每行代码怎么写的细节中去，了解其中的逻辑就行。
90%：了解前端优秀的视觉效果
设计师通常涉及的都是界面呈现效果，也就是研发中的“前端”效果，这一方面也需要重点了解。在HTML中，前端的样式和内容能力是非常强大的，可以说只有想不到，没有做不到。这里我给你看一些例子，你能感觉到他们的强大。
B端体验设计师通常需要关注两部分内容，一是前端组件的创新效果，二是动效与视觉的创新效果。
为什么要关注 前端组件的创新效果？因为B端产品主要是为提高业务效率设计的，而B端产品中，核心界面的核心组件是最影响客户处理效率以及整体产品体验的内容。
不过，国内大部分B端产品在组件上的创新做得非常有限，这部分你可以参考一些国外的B端产品，特别是Google系列的产品。Google的产品中很多组件是开源的，比如 这个网站，只要你觉得不错，就可以发给前端研发伙伴做参考。研发伙伴找找源代码，就可以进行优化了。这样既可以保障高效协作，又能做出更贴合业务的创新内容。
比如一个视频相关的B端产品，我们在做AI搜索与视频剪辑相关的功能时就做了创新设计。因为这个B端产品的业务特性，客户需要更高效地剪辑出最关键的一段视频，所以我们找到了一个开源的剪辑组件，我们基于它的源代码和业务自身的目标进行了创新设计，满足业务人员从智能搜索到快速剪辑视频中某一段内容的业务目标行动线。
而当时市面上大部分的视频进度条都只有一个横条，所以我们和研发伙伴一起寻找，最终找到了这个合适、基础的视频组件，投入了研发和应用。而且我们也在界面的弹窗中设计了与视频组件呼应的标签等内容，便于客户操作。
再说 动效与视觉的创新效果，这里也有一个非常有效的方法。HTML5发展了比较长的时间，形成了一些 社区网站，这些网站就像你经常去的站酷、花瓣一样，里面有很多优质的控件效果，你可以在里面寻找你觉得不错的效果，不但能获得很多灵感，并且很多是具备源代码的，这样你的开发伙伴也可以省事很多。
但这里一定要注意，千万不要直接用找到的组件。记得要基于 3C分析 中你了解的业务目标、目标客户的使用习惯去进行二次创新，这样才能真正做出帮助客户提升业务效率的组件，对你的产品来说也是有价值的创新。
目前国内大部分B端产品还处于从追求功能到追求体验的过渡中。很多时候，大家希望追求优质的体验与视觉效果，但是研发实现起来又觉得耗时太长、成本过高，这就需要你多往前走一步，去寻找一些开源的参考，再和开发伙伴协同，实现优质的效果。
这里再补充一种方法，是基于目前Web端产品的优得来的。在HTML中，有很多不错的动画可以通过SVG的格式，与研发协同实现就可以达到优质的效果。关于这部分你可以去了解SVG的介绍内容，因为这部分比较偏重研发与动手的技巧，所以我就略过了，如果你对这部分确实非常感兴趣，欢迎在留言区互动，我来继续回答。
100%： 再进一步，去写一个自己的官网
我之前和过很多设计师伙伴聊过，发现一个非常有意思的现象。如果你是做UI（视觉设计）或者UX（交互设计）的，面试之前投递的如果是图片做的作品集，面试官会觉得有点low；如果你做的是PDF格式的，大部分人会觉得挺正常的；但如果你给的是一个网址，是一个作品集的网站，那么很多人会觉得非常高级。当然，前提是网站内容也不错。比如这类 个人网站，可以为你加分不少。
发现了这个现象后，我去访谈了一些设计师伙伴。大部分人也是这样的感觉，并且都希望有一个介绍自己的官网。针对这个情况，我在带新人的时候就安排了一个业余的小任务，如果新同学有兴趣，我会购买一些不错的、给设计师看的、教写代码的教程给他们，帮助他们实现做个人官网的小需求，这样大家不仅会觉得非常有意思，还能在过程中快速了解研发的基础结构，后面和研发的同事们沟通起来就会顺利很多。这个小的改变，解决了非常大的跨部门鸿沟。
如果你想深入学习，也可以在B站搜索Design、Code、HTML三个关键词，可以找到非常多视觉优秀的研发教程，跟着做一遍，就很快能学会了。
总结时刻
如果你觉得自己是一个具备创新能力的B端体验设计师，十分关心客户最终的体验感受，那么你就必须了解研发伙伴实现效果的基础逻辑，这个逻辑通常叫做“实现路径”。
作为体验设计师，你不需要会写代码，也不需要去写代码，但一定要了解你所创新的内容是否有清晰的研发实现路径。只有这样才能保障你的创新是有效的，是能真正交付到客户手中的，不然就只能成为一个概念，没有实际的商业价值。
在设计行业中，有一句话是这么形容设计师的，叫做“设计师是带着枷锁的舞者”。这句话用来帮助你理解今天分享的内容也十分贴切。每一个B端设计师都希望有无限的创意，但我们的创意都需要基于研发可以实现的前提，才能登上面对客户的舞台。只有你理解、找到了创新的体验内容的实现路径之后，自己的创意才能得到完美的落地呈现。
解惑B端体验设计
你认为B端设计师在理解研发伙伴的“实现路径”中最难的是什么呢？可以分享一下你解决这个难点的思路或者案例吗？
欢迎你在留言区和我互动。如果觉得有所收获，也可以把课程分享给更多的朋友一起学习。我们下节课见！