图标一直都是一个难啃的硬骨头。记得在前年，我们系统地分享了关于B端产品图标设计的内容，其中也涉及到了B端产品图标资源。时隔两年，我们发现市面上的图标已有所更新，因此我们也尝试更新相关的资源内容，以供大家学习使用。说句题外话，这些资源都是我在各大图标平台手动筛选而来，因此耗费了非常多的精力。也希望大家能够手动

技术还在不断更替。如果你最近比较忙，也不用过于焦虑，因为在更替的过程中，它会逐渐稳定，到时候再学习也不迟。并且最近体验下来，感觉它的门槛不高，只需要简单学习

别人的完整方案，很多时候要去分析的是它的方案真实适不适合我们的产品。毕竟产品当中就会存在很多特殊的场景，场景不同你的思考的点就会存在差异。再举个例子：比如我们在课程上讲到了三个风格非常类似的

系统的面试点评的优化，因为在系统当中经常会有面试评价的问题，就是使用系统的面试官经常出现忘记填写面试评价、面试评价错乱的情况，我们应该如何优化？”这个问题我们就留在下篇与大家进行分享~

「考勤、OKR、招聘、绩效、打卡」等多个产品线需要独立的管理后台，因此需要提供一个统一的设计方案，来将这些产品线的风格统一。设计特点-

消息与我的，消息为了弥补桌面端消息通知能力薄弱，因此通过手机能够快速提示用户。我的则主要为了多店铺考虑，提供切换店铺的入口。浏览过后你会发现，移动端的架构调整我们通常都会将其归纳为，聚合+消息+我的

顶部的地址栏、右侧的个人设置、下方的内容区域。如果让你重新设计师一个浏览器，让你对它进行设计改版？我相信很多同学都会十分迷茫。（类似的问题，在同学面试字节时也被问到过）今天我们就来说说一款全新的

内容的布局以及最小的尺寸，但是只有通过这种方式才能够让设计师将屏幕变化过后，页面如何切换标注清楚（有木有明白我的良苦用心~）。最后，为咱们文章读者留下一个小小的作业，大家可以标注一下

端设计的主基调，我们在第七期的课程当中，进一步这个思路，将交互落到实处，让同学们能够更深入的理解它。我们先来看看第七期课程的课程内容，第七期课程内容会有大幅更新以及课程新增：课程特点1.专注

系统中，花名册可能包括员工的姓名、联系方式、工作岗位、工作时间、休假情况等信息。管理人员可以通过花名册来查看和管理员工的信息，帮助他们更好地管理员工。产品流程丨了解产品的主要业务核心因为

链接地址：http://live.bilibili.com/8313994我们的第六期的交互设计训练营已经开始报名了，感兴趣的同学可以扫描了解课程详情

在B端产品面试的过程中，我们多多少少都会接触到测试题。因为假设面试官对你比较满意，他会给你留一份测试题去做测验；假设他对你不满意，也会给你一份测试题来进行考察的设计能力（把你当备胎先准备着），也就是说，除非你表现实在太不尽如人意，否则你总是逃不开测试题的而对于测试题来说，很多设计师往往都会给大家说：别做、快逃

作业点评？A：因为老师认为，一次完整的课程知识，一定需要我们在课程结束后有实际实操的机会。因此我们课程会以周为单位，每周布置一次作业。并且作业点评形式采取：一对一点评

已经是我们的老朋友了，作为全球CRM产品的“头牌”，它在这个领域的地位是无法撼动的。它主要是以管理型CRM产品为主，当然作为企业软件，它的产品线远远超出你的想象，目前主要包括：Sales

的差别，也希望这个汇总，能够方便大家进行一些系统的学习最后提示一下：公众号的文章是最全最完整的，其他平台多多少少都会有所阉割，主要是太懒，不想转发😂B端设计指南B端设计指南

方面的设计能力的同学Q：课程最终会产出作品集吗？A：虽然我们更在乎课程是如何落地实际工作的，但是正是有了这样的落地经验，可以将课程上所完成的作业，进行整理。就可以实现

一直以来确实有很多同学都会非常的好奇，课程学出来究竟能够做出什么样的作品集，那今天就简单分享一套，学员作品给大家参考一下，希望能够对你有所启发简单说一下，我们大多数同学的作品集都是以“丑”为基础，因为我们不会去过多的讨论：视觉风格、图标设计、栅格模式

B端产品、B端产品、B端产品在我们平时的沟通交流过程当中，经常会提到这个词，但是对于B端产品的具体划分，其实也会不尽相同。比如对视觉、交互的要求都会比较高的

图标设计）而上了大学，我的第一个目标就是不“画画”，因此在学校的宣传部当中，学习了很多海报设计、展板设计，并留任部长我记得刚开始接触到UI设计时画的第一个作品，便是我最心仪的一款手机，HTC

内测版本，这种方式比较适合对系统还不太有把握，刚上线的情况，等情况理想过我，便可不再低调，安静的查看数据的结果公告提示随着数据的不断变好，版本迭代总的来点仪式感，

今天我们不聊B端，来说说写文章最高频用到的打字，聊聊目前的几类打字方式、我是如何提高打字效率，以及我目前常用的几个练习打字的网站资源，话不多说，直接开始为什么我要练习打字其实在我日常和同学们沟通聊天过程中，经常会出现各种各样的糗事。比如这里打错字，那里填错信息，有的时候打出一些令人尴尬的话来能够让自己社死；在写文章的时候也不像自己错字连篇；甚至当写文章有非常多思路的时候，也会发现你的打字速度跟不上你的思路这种情况出现的频率越来越高的时候，我开始想要不要认真的练习一下打字？来提升自己的打字效率，一方面是能够保证自己在未来写文章的过程当中快速的输出，另一个方面。也算是培养自己的一个技能，因此我开始搜集这方面的资料，这里给大家分享一下我目前的解决方案语音输入现在我的很多文章，都是通过搜狗输入法当中的录音转文字功能完成的初稿。首先这个功能非常的方便，你可以在搜索输入法的设置当中，去设置呼出这个功能的快捷键，这样能够保证你想用的时候能够快速唤起（比起手机

移动端，好好分析一下。没有标准答案，大家畅所欲言）聊两句关于移动端与桌面端的差异，其实在我们B端产品的设计当中是非常频繁的，而不同的设备之间会存在很多业务逻辑，比如

图表的自适应（这是重点），考虑到应用到实际页面中，布局大小会有变化，所以我做了自适应，方便拖拽快速布局；另外，拿柱形图举例，数据多少业务中会有不同，删除一根柱子或者增加一个，也可以自适应；3.

最近有同学问了老师这样一个问题，就是关于BS架构与CS架构，对设计会有什么影响在我工作的五六年时间里，其实很少会用到这方面的内容，并且我们之前团队也做过客户端与网页端，很少去分析这两者之间的差异，我觉得特别有意思，今天我们就来聊聊关于BS架构与CS架构之间有什么差异？定义肯定会有同学不知道这两个名词具体的含义，简单说说首先BS架构，（定义不够准确）即浏览器和服务器架构模式，是随着Internet技术的兴起，对C/S架构的一种变化或者改进的架构。这种架构下，用户工作界面通过浏览器即可实现，极少部分事物逻辑在前端（Brower）实现。B/S架构是WEB兴起的一种网络架构模式，WEB浏览器是客户端最主要的应用软件通俗一点来说，其实就是我们理解的客户端，比如常见的

对于B端设计师来说，我们想要去做作品集，永远离不开保密协议，但是在保密协议当中，我们要去关注什么数据？具体应该如何执行？难道只能制作虚拟项目？今天我们就来说说B端产品的“保密协议”首先

方面的设计能力的同学Q：课程最终会产出作品集吗？A：虽然我们更在乎课程是如何落地实际工作的，但是正是有了这样的落地经验，可以将课程上所完成的作业，进行整理。就可以实现

完整的图片内容我就打包放在图库平台上，大家可以进入查看花瓣：www.huaban.com/user/youthce语雀：www.yuque.com/youthce/pic/如果想要内容创作平台的

的文章当中提到过，但在使用顶部导航的过程当中，还是会面临很多问题顶部导航最大的局限性便是展示数量太低，毕竟在空间布局当中，横向空间与纵向空间的差异其实是非常大的，顶部导航的高度设定不能过高，同时

最近打开Figma，点击我的插件，发现我已经安装了这么多插件...我究竟要用哪一个插件？我不知道，每一个插件的是用来做什么的？我不清楚。因为身边的同学不停的给我推荐插件，而我便不停的安装，导致这么很多插件，我都没怎么用。今天为了解决这个问题，花了一下午的时间整理，分享一下我最常用的7款Figma

模型，各种夸张的样式形式，使用这些样机会给人一种虚拟项目的感觉。这里为大家总结了我认为更为合理的几种样机：电脑因为大多数B端产品采取的是以桌面端的产品为主，因此在设计时，我们应该多去考虑以

三者的平衡，今天来分享一下我自己的看法。工作学习的现状工作后的学习方法，你会发现它与我们在学生时代所理解的不太一样。记得在读书那会儿，父母、老师

工作协同、办公自动化，让企业高效运转的产品。大多数情况下，企业内部的办公管理没有太多个性化诉求，因此会购买成熟的办公协同产品：比如飞书、企微、钉钉、泛微目前较为常见的协同办公产品包含：在线文档、OA

前言在B端产品当中，我们经常看到五花八门的设计页面，很多人会质疑自己，这是B端产品的页面么？感觉品牌调性不太符合，B端产品往往传达给用户的都是严肃、刻板，但是在同一个产品当中，同样会存在这样的差异。在浏览各大设计系统时，我们经常听到B端页面的具体归类，通常都会分为：表单页、列表页、详情页、结果页、工作台

两次对外的公开课，具体时间这里先保密，会在随后公众号上之后进行通知～课程特点1.专注于B端领域的课程内容课程内容依托老师在B端深耕的数年经验，通过深入讲解系统的设计原理，让你彻底明白

个月用户逐渐熟悉，再去查看用户的真实体验感受。花瓣也是一样，随着使用次数的不断增多，也发现好像还行，没什么太大的影响。举个例子，在

对导航中心进行呼出，并且后续可以支持更多导航菜单的切换，这也是一个不错的思路，值得大家借鉴。全局功能在你的系统当中，一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如CRM系统里面的

端体验交互设计这趟浑水，出现了很多设计师在观望，想要入局？但又不知道，如何学习？可能刚开始阅读我的系列文章，但依旧会发现门槛依然非常的高，没办法理解。这里推荐五个学习的方法，能够让你快速理解

前言：在2020年，疫情最为严峻的时候，B端这一领域得到了前所未有的关注，而那时，身为B端用户体验设计师的我，也曾总结过，当时B端设计的诸多趋势，比如：多端需求：即

进行融合，会是一个更加合理的选择从工作台页面的整体设计而言，确实通过减少人物头像颜色对页面的视觉干扰；突出重要的数据模块；弱化右侧的快捷操作模块，将整个设计的视觉层级的信息获取效率得到提升轻量

从中获得一些答案我回忆自己在几年前，第一次加入到B端企业后，同样会有很多困惑与迷茫。现如今回过头，想结合自己的经验，来分享一下我的看法一、改变固有的思维方式每个人，在处理自己熟悉的事物时，往往都会有

让你了解交互设计对于B端设计的重要性，以下是第三期课程的具体安排：课程特点1.专注于B端领域的课程内容课程内容依托老师在B端深耕的数年经验，通过深入讲解系统的设计原理，让你彻底明白

前言：一直以来，业务都是B端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求、具体内容迭代也是因为业务需求业务究竟是什么？很多时候既让初入B端行业的设计师感到一丝丝迷茫，因为不同的B端系统也就意味着，它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理，OA的办公自动化，特定的行业往往都会蕴含着不同的业务类型而作为设计师，如果只了解设计模式、设计组件，不去分析设计最后的业务诉求，其实是没有任何意义。因此想要通过B端设计指南，和大家一起聊聊B端业务，以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的

Q：现在的B端组件样式和布局方式基本已经固化，做出的页面没有过多的区别，如果对B端页面进行大的改版，我们应该要怎么着手进行？想要进行大的改版，是想要多大？简单修改？优化？推翻？颠覆？如果是后两者，你的思想可能就会有点危险，因为我在你的描述过程当中并没有看到你说究竟为何改版，只是说本身交互、布局的固化而我们设计很多页面都是想如何培养用户这样固化的思维；而你却在疯狂嫌弃，让我感受到了些许的凡尔赛言归正传，在改版之前需要想清楚究竟是有什么原因？之前业务上的一些交互理念不满足产品风格老旧，需要调整目标用户发生变化导致的使用习惯发生改变前端技术的演变，刚好有契机对之前进行优化而这些情况都可以支撑你进行页面进行改版处理，但是在思路上可能会有所不同给你举三个例子，也代表着不同设计系统的改版思路：Fiori在SAP的

栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别其实在说栅格的使用，我们就在讨论网页当中的布局方式，以及他们之间的不同点网页的布局方式：布局方式，本质上就是去处理窗口宽度与网页内容的关系用户会使用浏览器打开不同尺寸的窗口宽度，而网页内容究竟应该如何去适应这些窗口尺寸？通常会分为：固定布局、流式布局、自适应布局、响应式布局1.固定布局（Static

在一个B端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。它究竟是如何使用？栅格在实际工作当中的使用方法是什么？今天我们就聊聊B端系统当中的栅格。老规矩，我们在讲栅格之间，先科普一个知识点，为何会有栅格？早在平面设计开始之初，就有对“栅格”的使用记录。（不过那时不叫栅格，而叫网格）因为印刷机器以及切割工具的限制，导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失，因此出现了当时非常火爆的《平面设计中的网格系统》一书。虽然这是一本非常老的书，但是设计本身就是相通，将其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义而在设计（网页端、桌面端）产品时，对于空间上的理解，一直以来都是令人头疼的问题我们将屏幕当中的设计空间分为

弹窗Footer的取消与Header的关闭有什么不同？文章开始便对你进行了灵魂的拷问，这是某天在咱们群内所讨论的话题，他们之间究竟存在哪些差异？又有哪些利弊？首先在功能层面上，取消与关闭都是我们退出模态层，回到原页面当中的入口，只是在页面当中会存在一些小逻辑：点击Header的关闭：是用户不需要进行思考或者看了Header的标题过后，就很明确就是要关闭这个弹窗。比如突然弹出一个广告，不小心点到某一个按钮，这些都是用户一开始就没打算进行任何操作，因此可以快速选择顶部的关闭点击Footer的取消：是用户先进行过弹窗内容的阅读，发现内容可能过于复杂、可能和我的预期不符，所以想要放弃这个弹窗，这时候点击取消是他视觉浏览当中最直接的方式有部分读者会说能不能去掉

的支持，暗黑模式的探索（老实说，我觉得暗黑模式的场景不会特别多），也能够看到抖音设计团队在这个系统的付出当然，在整个设计系统查看下来，发现

昨天收到一个读者的求助，他说在面试时被问到一个难以回答的问题：“当你接到一个工作台需求，发现页面会有32个信息卡片进行展示，你会如何进行处理？”给大家一分钟时间思考，让你来回答一下会有哪些思路与方法（随意配了一个图片，理解意思即可）这个看似简单问题，但十分考验你的：交互思维，页面过载过后能否处理好信息间的关系；业务逻辑，对于工作台这样的B端固定页面，想要看到你的设计思路与方法，这里我为大家提供了六种思路，大家可以理解并进行思考信息解构这其实是很多同学经常忽略的细节，因为在形成信息卡片的容器当中，它们的内容究竟包含有哪些？整个信息的是否有更为合理的卡片拆分形式，这都是非常值得注意的问题而我们可以将卡片当中的信息元素进行拆分，总结出最小的信息原子，对这些原子进行再设计。这样的方式可以验证当前的信息卡片是否合理，并且可以通过卡片，了解到产品的具体内容。（当然在实际项目当中，由于信息之间的排列方式发生变化，会直接导致

Element，也正是因为它主要用于有赞自己平台，因此不需要太大的影响力技术类型虽然技术方面不是设计师擅长的，但设计系统的对比肯定少不了技术框架，虽然两者的技术类型都是