大家做设计相信一定听过客户讲这么一句话：我觉得画面太平了，每到这个时候设计师就是崩溃的，究竟什么是平？其实所谓的\

大家做设计相信一定听过客户讲这么一句话：我觉得画面太平了，每到这个时候设计师就是崩溃的，究竟什么是平？其实所谓的"平"就是画面缺少层次空间变化，或者画面的图字层级丰富度不够，今天会通过层次简述、留白逻辑、以及大家一直最好奇的内外空间，来为大家建立起设计的空间层次逻辑思维。

往期干货：

做平面设计没有创意灵感？三大方向帮你突破！ 本篇内容是借鉴参考的下半部分，因为上半部分的内容过长了，所以不得已分成了上下两章。

阅读文章 >

做设计的过程就是处理设计关系的过程。而无论交互设计还是视觉设计，在设计过程中需要反复考虑的是这 7 种设计关系：生意介质关系、路径联动关系、系统构成关系、同类并列关系、分级从属关系、归组收纳关系、Z 轴层级关系。在这里强调关系这个词，是因为设计这件事从来都不是孤立的。

做设计的过程就是处理 设计关系 的过程。

而无论 交互设计 还是视觉设计，在设计过程中需要反复考虑的是这 7 种设计关系：生意介质关系、路径联动关系、系统构成关系、同类并列关系、分级从属关系、归组收纳关系、Z 轴层级关系。在这里强调关系这个词，是因为设计这件事从来都不是孤立的。这个道理虽然很容易明白，但是在我们大部分常规设计工作中，接到的设计任务往往是经过拆解后的局部。陷入局部，忽略这个局部与其他因素之间的关系，是设计开始变得糟糕的重要原因。

说到设计方法，我们现在已经有一些比较成熟的思维框架，比如斯坦福设计学院的 Design Thinking Process、双钻模型、体验地图、用户体验五要素框架等，但有了这些框架之后，在具体的设计问题中，还是没有一种行之有效的方法可以直接的指导、改善不同职级、不同经验的 设计师 的设计产出。

基于这样的现状，我尝试梳理了我的设计方法论，从宏观的设计关系出发，侧重眼于微观的设计层面，希望用一种简单的方式抓住这 7 个词，为设计工作提供一点建议和帮助。

往期干货：

研究腾讯设计人才白皮书后，总结了这5点职场趋势 从去年开始关注腾讯 CDC 每年一度的设计人才调研报告。

阅读文章 >

一、生意介质关系 为什么设计师容易自嗨？或者容易被别人认为设计师在自嗨，所以不得不连续不断不遗余力的进行自证，自证设计的价值？

很多时候是因为没有处理好设计的生意介质关系。

设计区别于艺术的一个根本点在于，设计是一种服务，而非自我表达。这种服务并不是说设计师作为乙方需要服务好你的需求方，而是说任何设计都始于明确的目标，并服务于一种生意以及参与到这个生意中的用户。这种服务的第一属性要求我们放下设计师的自嗨，分析生意和用户，分析当下遇到的问题，并在困难中寻找最佳设计方案。所以从这个角度来看，任何一个设计都是困难的。如果你觉得没有困难，那只能说明你想的过于简单，或者没有在从事真正意义上的设计工作。

为什么说任何一个设计都是困难的？因为设计关乎用户的的认知、预期与习惯。用户认知的形成取决于用户过去的经验，过去这个用户或者说这类用户在使用类似产品时建立起来的基本认知，带着这个基本认知以及用过过去养成的操作习惯甚至思维习惯，用户看到你的产品界面时，首先会产生一个认知，在这个认知的基础上形成一个对这个界面状态的潜在预期。好的设计能够引导、管理用户的这种认知和预期，进而促使用户产生实际的操作行为。而差的设计往往不能帮助用户直观的建立基础认知，以至于不能产生我们想要的用户预期，甚至产生了完全错误的预期。当用户操作之后发现与自己的预期不相符的时候，体验痛点就产生了。

所以说，设计是一种介质。一种连接生意和用户的介质，一种复杂与简单之间的介质，一种边界模糊的、还在不断进化的介质。要做好这种介质，需要设计师具备好的分析能力、逻辑思维与转化能力、想象与创造能力，而这三种能力合起来，可以简单概括为我们常说的洞察力。

去洞察自己的洞察力吧。这样才能处理好生意与用户之间的设计关系，让设计成为一种好的介质。

二、路径联动关系 交互设计设计的是什么？设计的是用户行为。可用户行为是虚的，那实际上设计的是什么呢？设计的是一个个状态以及状态与状态之间的联动关系。这是一种设计关系，视觉设计考虑的点线面之间的关系，不同元素之间的组织关系，交互设计考虑的是不同信息之间的组织关系，不同状态之间的交互联动关系。在这个过程中，需要有好的用户洞察，充分理解用户场景与业务诉求，管理用户预期，及时给予合理的界面反馈。

时间是线性的，我们的工作是线性的，用户在你的产品中花费的时间是线性的，所以用户在使用产品的过程中所接触到的一个个界面与交互也是线性的。在这个线条中我们需要考虑到你当前处理的这个点在整个用户路径中的关系，要如何处理才能使用户不在当前这个节点中断任务甚至退出程序。在这个线条中的每一个节点都与它的上一个节点与下一个节点存在路径联动关系。

这种路径联动关系在交互设计的工作里常常以流程图的方式输出，容易理解，但同时也容易被忽视，尤其是对专职的视觉设计师而言。所以无论哪种形式的设计工作，对于路径联动关系的处理，都需要充分考虑流程的起点与终点，以及路径的汇合与分支。交互设计的思维不应该局限在交互设计这个工作或者交互设计师这个职位上，视觉设计师的工作同样需要具备交互思维。

产品是一个复杂的系统，我们的日常工作是被拆分后的一个个节点。开始一个设计项目之后，只有充分考虑当前这个页面或者这个视觉物料在用户的时间线程里的前后联动关系。多问问自己，用户是从哪里来的，接触到你当前设计的这个界面/元素/物料之后，我们应该如何引导用户走到下一步。

这个环节如果考虑的不够全面，就有可能形成断点。

三、系统构成关系 每一个科技产品都是一个有机的系统，它的迭代与成长呈现着基本的生命体征。

每一个生命体的律动都可以表现出自然的美感。生命的发展与进化并不是被人为设计出来的，而现在我们人类希望自己设计和研发的产品能够不断进化，并且经久不衰的活下去。想想这有多难，首先我们要创造一个生命，其次我们还要希望他在短时间内根据达尔文的进化论在自然选择中不断进化，不断的在恶劣的竞争环境中存活、发展。

每一个小的设计都从属于一个整体，是这个整体的一部分，并且带有这个整体的特征。我们常说的 DNA 也就是这个意思。

每一个设计元素，都应该从属于一个设计语言，不管这个设计语言是显性的还是隐性的。

假如说我们不在乎这个系统构成关系，或者说根本没有这个 DNA 的存在。在设计上对于其他竞品的我们认为好的、对数据有帮助的东西直接拿过来会有什么问题吗？如果我们觉得自己的手臂不够强壮，是不是直接可以移植健身教练的手臂到自己身上呢？那结果必定是丑陋的、畸形的。

这也就是为什么我们在做设计规范与设计语言，为什么我们吹毛求疵的追求系统一致性。

同样的，平面构成是设计基础课程，我们可以学到一些基础的构成一个画面的方式技巧。所以在设计草稿阶段需要从构图考虑，而不是从单个元素的刻画来进行。如果我们在做设计的时候忽略元素与元素之间的构成关系，最后整体的效果可能是不协调的、不自然的、美感缺失的。

四、同类并列关系 警察有两种，胖警察和瘦警察；讲笑话的表演有两种，相声和脱口秀；电影简单的说也有两种，故事片和纪录片。

并列与类比是人们在对事物建立认知时的一个简单可用的方法，分类便于我们迅速理解世界，理解一个系统中不同功能、内容/信息之间的关系。同时，电影的类型化为电影产业带来了更多的观众，产品设计形态的类型化为互联网产品带来了更多的用户，信息的类型化帮助用户获取到了更多的信息。

用户的时间碎片化了，大块的内容被切分成了小的信息单元，这样的背景下 Feed/信息流技术（算法匹配）发展起来。同时我们不能不看到这个懒惰的循环：碎片化催生了信息流，信息流让用户的时间更加碎片化。在这样的环境下，各种类型的信息被强行拆分塞进了用户的信息流。这些信息并列在一起，无论是新闻资讯、生活贴士、旅行攻略、还是一条机灵段子，无论是深度长文、番剧解说视频，还是一张吸引眼球的图片，通通都并列在一起，一起争夺用户短暂的注意力。

归类的过程是强化共性搁置个性的过程。我们常常面对的困难也是该如何将功能或信息分类。这些信息本来是千差万别的，这种并列关系的处理在设计上的困难也是显而易见的。我们的困难是每当我们进入一个部分的设计时，总会觉得当前处理的这个问题是特殊的，并不那么容易对不必要的个性做出舍弃。

五、分级从属关系 如果一个团队有 100 个人一起做一件事情，那么怎么进行组织才能有效的完成这件事呢？

如果一个系统有 100 个页面，那么这些页面如何能够更有序的组织在一起，才能完成业务目标并满足用户需求呢？

如果一个页面有 20 个不同的字段与元素，那么界面中用户要阅读的内容、对下一步操作的引导等应该如何进行有效的组织？

分级从属关系的建立可以帮助我们建立易于理解的设计框架。从信息架构的组织、导航的设计到单个页面、单个卡片的设计框架都需要清晰的传递分级从属关系。

扁平化管理在互联网公司一度听上去非常洋气，但现在我们仍然无法确定扁平化管理一定优于层级化管理。扁平化的优点和缺点都很明显：他可以降低管理成本，但对公司结构架构能力和组织能力要求较高；他可以分权管理让更多的人参与决策，但这样的决策过程容易混乱；他可以更好的激励人才培养，但同时隐晦的层级关系也无法避免。

扁平化设计更加凸显内容本身，避免信息传达上的不必要干扰，强调界面的效率。但值得强调的是，扁平化设计并非直接放弃了信息的层级关系，而是在用更简练的形式来表现层级关系。当扁平化成为一种设计趋势被无脑滥用的时候，扁平化本身的缺点就被无限放大了。

在信息架构层面，明确的层级关系要比所谓的流行趋势重要的多。还以微信为例，他为什么要把朋友圈归到二级页面？为什么要在 IM 页单独设置一个聊天详情页而不把操作选项前置？为什么对于单条朋友圈的点赞与评论没有直接外露而收到一个单看上去表意并不明确的两个点的图标里？这看上去一点也不扁平，但似乎并没有影响到微信的易用性。

六、归组收纳关系 作为交互设计入门书籍的《简约至上》中谈到了删除、组织、隐藏、转移四个设计策略，介绍了非常实用的设计方法。几年前在装修房子的时候接触了一点室内设计的知识，小户型空间的收纳问题、动静分区问题、冰箱洗衣机放在什么位置会让生活更舒适的问题，这些问题的解决方法都与交互设计的设计方法相通。

人们对简单的追求在不同的设计领域都非常相似。还有一个有趣的现象：世界是复杂的，人是复杂的，生意是复杂的，而大家在产品设计上的审美取向却是简单的。

简单的体验简单的说就是在易懂的基础上易用，轻松，没有不必要的干扰和负荷，而这种简单体验的塑造建立在更有效的归组与收纳的设计关系处理上。卡片式布局、抽屉式菜单、发现页都是对信息和功能的归组收纳。在什么场景什么时机下适合隐藏、删除哪些内容，把哪些内容归位一组是更合适的，这些都需要设计师结合当前场景、结合其他几个设计关系的处理来综合考量。

七、Z 轴层级关系 设计的过程是处理信息关系的过程。

人们有两只眼睛来感受广阔立体的空间，人们对信息的接收也从来都不是平面的。信息本身是立体的，而平面设计与互联网产品设计的媒介是平面的，设计师需要做的是把立体的信息通过平面的媒介完整的传递给用户。

压感式触摸屏的技术发展带来了的新的交互手势；我们通过叠加与覆盖等设计方式在平面上制造层次的视觉误差来划分信息层级；我们利用信息与信息之间的大小对比、色彩关系来帮助用户更好的理解信息层级，降低视觉上的噪音与干扰。这都是在处理 Z 轴上的信息层级关系。

信息与信息之间的关系是立体的，功能与功能之间的关系也是如此。所以无论扁平化的设计趋势如何，我们该处理的 Z 轴层级关系还是要处理。

以上谈到的 7 种设计关系并不是相互独立的，相互之间存在交集，需要我们在设计过程中综合考虑灵活处理才可以形成结实、完整、成熟的设计方案。

一篇文章篇幅有限，接下来我会分别对 7 种设计关系展开，并结合实例做进一步的分析与说明。

欢迎关注作者微信公众号：「柴林的设计笔记」

金三银四招聘季悄悄开始了。虽然去年到今年经历了一波裁员潮，但是依然有一波在 C 端做UI和产品的同学，逆流而上跳槽到 B 端领域做设计和产品了。虽然他们各自的业务和行业差异极大，但是不知道你有没有发现，他们都有个共同点，那就是收入都还相当不错。

金三银四招聘季悄悄开始了。

虽然去年到今年经历了一波裁员潮，但是依然有一波在 C 端做UI和产品的同学，逆流而上跳槽到 B 端领域做设计和产品了。虽然他们各自的业务和行业差异极大，但是不知道你有没有发现，他们都有个共同点，那就是收入都还相当不错。

的确，对于 UI/UX 设计师而言，回老家考公是一种上岸方式，而 C 端转战 B 端也是一种上岸的方式。

只是，相比于更容易理解、更贴近普遍认知的 C 端设计，加入更多行业背景、业务需求和专业流程的 B 端有着更高的门槛。为此，我们专门准备了这套 B 端设计入门私房课，给正在筹备上岸的你：

课程原价169元， 限时新课价直减40元，仅需129元！

移动端扫码学习，网页端右戳学习? https://wei.xet.tech/s/2pMvzq

入坑B端设计的绝佳时机！ 也许很多同学几年前就听说过「用友」和「金蝶」这些针对企业的商用软件开发企业，但是随着如今各行各业信息化建设，不止是传统的金融、仓储、物流等领域需要更加深入定制化的设计，而且教育、地产、医疗、销售乃至其他更加细分的行业，大都需要有自己的信息化管理系统。大概是在 8 年前，为了区别于针对个人用户（Customer）的 UI/UX 设计，有人提出了 B 端设计，也就是针对企业和商用（Business）的系统化 UI/UX 设计，彼时 B 端设计开始被提出，8年时间蔓延至今已呈大势之象。

如今大量的企业有着自己独特的渠道、和同行截然不同的流程，在管理模式上也大相径庭 ，这也使得很多企业迫切需要贴合自身业务特征的定制化的 B 端设计。即便针对自身体系定制一套数字化系统成本高昂，但是效率提升后带来的利润增长更为可观，这使得 B 端设计成为了设计领域新的增长点，「钱」景无限！

但是相应的，B 端设计所牵涉的「业务属性」，也对设计师提出了新的要求。设计师天然就是内容和信息的消费者，从事 C 端设计时，可以相对容易地代入身份，针对性地进行设计，而 B 端设计所涉及的行业不同，所牵涉到的专业性的用户身份也千差万别，业务流程可能完全找不到合适的参考，这一方面要求设计师需要通过专业的手段和方法来调研和梳理，摸清业务，另一方面也需要设计师有更加系统化的思维和方法，来为整个业务创建流程，搭建平台，统筹管理，而这也是 B 端设计不同于 C 端的重难点。

这个时候，你就需要针对性地系统化学习了。

事半功倍的学习路径很有必要！ 如果你是设计小白或者已经是 C 端的 UI/UX 设计师，那么这套课程可以带你以正确的姿势开始学习 B 端设计，如同你刚刚转到 B 端设计，这套课程同样可以带你重新收束 B 端设计的思维和知识点。

课程会分为 3 个阶段：

第一阶段带你着重了解 B 端设计的特征，概念和流程，明确方向 第二阶段教你 B 端设计前期分析的方法和要点，深入业务 第三阶段结合实际案例，循序渐进地教授 B 端设计执行的技巧

下面是详细的大纲：

课程原价169元， 限时新课价直减40元，仅需129元！

移动端扫码学习，网页端右戳学习? https://wei.xet.tech/s/2pMvzq

用项目喂出来的课程讲师 小煜老师是实实在在在大厂里，用一个个大型 B 端项目喂出来的资深设计师，从电商到金融，从 IM 到直播，踩过不同行业的坑，处理过多种截然不同的业态，面对千差万别的用户需求，在B端行业差异里逐步摸索出成系统的设计策略，又在共通的方法中，总结出应对不同需求的独特技巧，这套录播课程，就是她过往 B 端项目的总结。

10 年前 C 端的 UI 设计当初是机会无限的蓝海，如今的人满为患，内卷严重。但是业务形态千差万别的 B 端需求旺盛，行业垂直且细分，需要懂得用户体验、具备系统思维、敢于探索需求、能够梳理业务的 B 端设计师，而任何一个细分行业的发展，起码都是按照十年来进行计算的。

下一个十年，你可以从 B 端开始。

课程原价169元， 限时新课价直减40元，仅需129元！

移动端扫码学习，网页端右戳学习? https://wei.xet.tech/s/2pMvzq

本系列的视觉设计教程。会用大家看的懂的语言方式，深入浅出解析视觉设计基础知识。往期酸性设计干货：送18G优质素材！

本系列的视觉设计教程。会用大家看的懂的语言方式，深入浅出解析视觉设计基础知识。

往期 酸性设计 干货：

送18G优质素材！酸性设计全方位深度教程！ “酸性设计”是今年设计圈内离不开的一个词，但是对于大部分设计师而言它熟悉而又陌生。

阅读文章 >

大家做设计相信一定听过客户讲这么一句话：我觉得画面太平了，每到这个时候设计师就是崩溃的，究竟什么是平？其实所谓的\

大家做设计相信一定听过客户讲这么一句话：我觉得画面太平了，每到这个时候设计师就是崩溃的，究竟什么是平？其实所谓的"平"就是画面缺少层次空间变化，或者画面的图字层级丰富度不够，今天会通过层次简述、留白逻辑、以及大家一直最好奇的内外空间，来为大家建立起设计的空间层次逻辑思维。

往期干货：

做平面设计没有创意灵感？三大方向帮你突破！ 本篇内容是借鉴参考的下半部分，因为上半部分的内容过长了，所以不得已分成了上下两章。

阅读文章 >

大家好，这里是和你们聊设计的花生~又到了大家喜闻乐见的设计师效率神器推荐时间，本期推荐的 5 个神器分别是：打工人福音！一键让 AI 帮你写工作报告的神器「周报生成器」双语对照翻译！看英语网站必备的浏览器插件 「沉浸式翻译」UI 配色神器！

大家好，这里是和你们聊设计的花生~

又到了大家喜闻乐见的设计师效率 神器推荐 时间，本期推荐的 5 个神器分别是：

打工人福音！一键让 AI 帮你写工作报告的神器「周报生成器」 双语对照翻译！看英语网站必备的浏览器插件 「沉浸式翻译」 UI 配色神器！根据文本生成调色板的在线工具 「Palette Tone-row」 轻便好用！直接用鼠标调整显示器参数的神器 「ClickmonitorDDC」 设计师必看！收录了 200+ AI 设计工具资源的网站 「AI Design Resource」 往期回顾：

这5款工具，让设计师工作效率提升 200%！（十三） 大家好，这里是和你们聊设计的花生~ 今天为大家带来设计师 效率工具 第 13 期，本期推荐的 5 个神器分别是： 用嘴改图！

阅读文章 >

一、周报生成器 网址： https://aicodehelper.com/tools/index.html

记得之前 ChatGP 爆火的时候，有一位网友做了一个专门的工作周报生成器，结果因为访问人数过多网站崩溃了，无限延期关闭，当时就觉得太可惜了。不过现在又有了一款新的「周报生成器」，也是简单地描述一下你的工作内容，AI 就能帮你生成一份内容详实、形式完整的工作报告，需要写日报周报的小伙伴们不要错过了。

此外网站还有很多其他功能，比如生成会议纪要、润色英语文章、做产品经理指导、帮你写正则表达式等等，点击左上角的选项框，在弹出的下拉框里可以切换为不同的功能。

二、沉浸式翻译 官网： https://immersive-translate.owenyoung.com/

「沉浸式翻译」是一款可以同时显示原文与译文的网页翻译工具，开启后会自动识别网页布局和文字段落，进行跟随翻译。它提供谷歌、Deepl，彩云小译，百度翻译、腾讯翻译君等多种服务，支持各类主流网站，包括 Twitter，Reddit，Discord, Gmail, Telegram, Youtube, Hacker News 等。翻译后的双语对照的页面清晰有序，无论是看英语长文还是推特信息流都非常方便，绝对是英语小白的救星。

「沉浸式翻译」在 Chrome、Edge、Firefox，Safari 等浏览器上都有插件，也可以下载桌面端、移动端和 iOS 端的应用，具体下载安装方式可以看官方网站里的介绍。

三、Palette Tone-row 网址直达： https://palette.tone-row.com/

「Palette Tone-row」是一款在线调色板生成工具，由外国设计师 Rob Gordon 开发并免费分享给所有人使用。它的特别之处在于支持“Palette-by-P​​rompt ”，也就是文本生成调色板。点击右上角的“create from prompt”，输入对网站性质和颜色的描述，等待片刻后就有一组完整的配色。调色板支持浅色模式和深色模式，能生成中性色板，用户也可以对颜色进行再调整。

四、ClickmonitorDDC 软件介绍： https://web.archive.org/web/20201016064411/https://clickmonitorddc.bplaced.net/ （需要魔法）

下载链接： GitHub - nubix/ClickmonitorDDC: Rehost of ClickmonitorDDC （需要魔法，附件有安装包）

ClickmonitorDDC 是一款轻便好用的显示器调节软件，适用于 Windows 系统。软件虽有只有 615KB，但支持的功能却非常多，包括通过鼠标滚轮来调整显示器背光亮度、色彩对比度、色温、饱和度等，安装后直接在电脑上用鼠标或快捷键就能对显示器进行设置，不用动手去按机器上的按钮，对需要经常调整显示器的设计师来说非常实用。

五、AI Design Resource 网址直达： https://aidesignresource.com/

「AI Design Resource」是一个专门面向产品设计师的 AI 设计资源网站，目前收录了 200 多款与设计有关的 AI 工具和资源，包括 3D、UI、虚拟角色、配色、图像生成、图片处理、PPT、提示词等各方面。内容都是精心挑选的，资源质量很高，并且会持续更新，想了解最新 AI 趋势动向的设计师可以多上这个网站看一看。

好啦以上就是第 14 期设计师效率工具推荐，喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐设计干货知识 ~ 有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复。

推荐阅读：

AIGC领域新增6大神器！每个都能提高400%的设计效率！ 大家好，这里是和你们聊设计的花生~ 最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动，它的边缘检测功能可以提取图像边缘轮廓，深度图引导功能可以复制空间信息，最神奇的是它的人体姿势骨架提取功能，上传一张图片 AI 后会识别其中人物的姿势，然后结合提示词生成一张姿

阅读文章 >

腾讯平面设计实战！如何用AIGC提高200%的做图效率？ 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步，设计师也有越来越丰富的手段来应对多种类型的产品需求；比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常，在不断的提高大家的工作效率；包括最近火热的 AI 绘图，也时常出现在设计师的讨论话题当中。

阅读文章 >

金三银四招聘季悄悄开始了。虽然去年到今年经历了一波裁员潮，但是依然有一波在 C 端做UI和产品的同学，逆流而上跳槽到 B 端领域做设计和产品了。虽然他们各自的业务和行业差异极大，但是不知道你有没有发现，他们都有个共同点，那就是收入都还相当不错。

金三银四招聘季悄悄开始了。

虽然去年到今年经历了一波裁员潮，但是依然有一波在 C 端做UI和产品的同学，逆流而上跳槽到 B 端领域做设计和产品了。虽然他们各自的业务和行业差异极大，但是不知道你有没有发现，他们都有个共同点，那就是收入都还相当不错。

的确，对于 UI/UX 设计师而言，回老家考公是一种上岸方式，而 C 端转战 B 端也是一种上岸的方式。

只是，相比于更容易理解、更贴近普遍认知的 C 端设计，加入更多行业背景、业务需求和专业流程的 B 端有着更高的门槛。为此，我们专门准备了这套 B 端设计入门私房课，给正在筹备上岸的你：

课程原价169元， 限时新课价直减40元，仅需129元！

移动端扫码学习，网页端右戳学习? https://wei.xet.tech/s/2pMvzq

入坑B端设计的绝佳时机！ 也许很多同学几年前就听说过「用友」和「金蝶」这些针对企业的商用软件开发企业，但是随着如今各行各业信息化建设，不止是传统的金融、仓储、物流等领域需要更加深入定制化的设计，而且教育、地产、医疗、销售乃至其他更加细分的行业，大都需要有自己的信息化管理系统。大概是在 8 年前，为了区别于针对个人用户（Customer）的 UI/UX 设计，有人提出了 B 端设计，也就是针对企业和商用（Business）的系统化 UI/UX 设计，彼时 B 端设计开始被提出，8年时间蔓延至今已呈大势之象。

如今大量的企业有着自己独特的渠道、和同行截然不同的流程，在管理模式上也大相径庭 ，这也使得很多企业迫切需要贴合自身业务特征的定制化的 B 端设计。即便针对自身体系定制一套数字化系统成本高昂，但是效率提升后带来的利润增长更为可观，这使得 B 端设计成为了设计领域新的增长点，「钱」景无限！

但是相应的，B 端设计所牵涉的「业务属性」，也对设计师提出了新的要求。设计师天然就是内容和信息的消费者，从事 C 端设计时，可以相对容易地代入身份，针对性地进行设计，而 B 端设计所涉及的行业不同，所牵涉到的专业性的用户身份也千差万别，业务流程可能完全找不到合适的参考，这一方面要求设计师需要通过专业的手段和方法来调研和梳理，摸清业务，另一方面也需要设计师有更加系统化的思维和方法，来为整个业务创建流程，搭建平台，统筹管理，而这也是 B 端设计不同于 C 端的重难点。

这个时候，你就需要针对性地系统化学习了。

事半功倍的学习路径很有必要！ 如果你是设计小白或者已经是 C 端的 UI/UX 设计师，那么这套课程可以带你以正确的姿势开始学习 B 端设计，如同你刚刚转到 B 端设计，这套课程同样可以带你重新收束 B 端设计的思维和知识点。

课程会分为 3 个阶段：

第一阶段带你着重了解 B 端设计的特征，概念和流程，明确方向 第二阶段教你 B 端设计前期分析的方法和要点，深入业务 第三阶段结合实际案例，循序渐进地教授 B 端设计执行的技巧

下面是详细的大纲：

课程原价169元， 限时新课价直减40元，仅需129元！

移动端扫码学习，网页端右戳学习? https://wei.xet.tech/s/2pMvzq

用项目喂出来的课程讲师 小煜老师是实实在在在大厂里，用一个个大型 B 端项目喂出来的资深设计师，从电商到金融，从 IM 到直播，踩过不同行业的坑，处理过多种截然不同的业态，面对千差万别的用户需求，在B端行业差异里逐步摸索出成系统的设计策略，又在共通的方法中，总结出应对不同需求的独特技巧，这套录播课程，就是她过往 B 端项目的总结。

10 年前 C 端的 UI 设计当初是机会无限的蓝海，如今的人满为患，内卷严重。但是业务形态千差万别的 B 端需求旺盛，行业垂直且细分，需要懂得用户体验、具备系统思维、敢于探索需求、能够梳理业务的 B 端设计师，而任何一个细分行业的发展，起码都是按照十年来进行计算的。

下一个十年，你可以从 B 端开始。

课程原价169元， 限时新课价直减40元，仅需129元！

移动端扫码学习，网页端右戳学习? https://wei.xet.tech/s/2pMvzq

做设计的过程就是处理设计关系的过程。而无论交互设计还是视觉设计，在设计过程中需要反复考虑的是这 7 种设计关系：生意介质关系、路径联动关系、系统构成关系、同类并列关系、分级从属关系、归组收纳关系、Z 轴层级关系。在这里强调关系这个词，是因为设计这件事从来都不是孤立的。

做设计的过程就是处理 设计关系 的过程。

而无论 交互设计 还是视觉设计，在设计过程中需要反复考虑的是这 7 种设计关系：生意介质关系、路径联动关系、系统构成关系、同类并列关系、分级从属关系、归组收纳关系、Z 轴层级关系。在这里强调关系这个词，是因为设计这件事从来都不是孤立的。这个道理虽然很容易明白，但是在我们大部分常规设计工作中，接到的设计任务往往是经过拆解后的局部。陷入局部，忽略这个局部与其他因素之间的关系，是设计开始变得糟糕的重要原因。

说到设计方法，我们现在已经有一些比较成熟的思维框架，比如斯坦福设计学院的 Design Thinking Process、双钻模型、体验地图、用户体验五要素框架等，但有了这些框架之后，在具体的设计问题中，还是没有一种行之有效的方法可以直接的指导、改善不同职级、不同经验的 设计师 的设计产出。

基于这样的现状，我尝试梳理了我的设计方法论，从宏观的设计关系出发，侧重眼于微观的设计层面，希望用一种简单的方式抓住这 7 个词，为设计工作提供一点建议和帮助。

往期干货：

研究腾讯设计人才白皮书后，总结了这5点职场趋势 从去年开始关注腾讯 CDC 每年一度的设计人才调研报告。

阅读文章 >

一、生意介质关系 为什么设计师容易自嗨？或者容易被别人认为设计师在自嗨，所以不得不连续不断不遗余力的进行自证，自证设计的价值？

很多时候是因为没有处理好设计的生意介质关系。

设计区别于艺术的一个根本点在于，设计是一种服务，而非自我表达。这种服务并不是说设计师作为乙方需要服务好你的需求方，而是说任何设计都始于明确的目标，并服务于一种生意以及参与到这个生意中的用户。这种服务的第一属性要求我们放下设计师的自嗨，分析生意和用户，分析当下遇到的问题，并在困难中寻找最佳设计方案。所以从这个角度来看，任何一个设计都是困难的。如果你觉得没有困难，那只能说明你想的过于简单，或者没有在从事真正意义上的设计工作。

为什么说任何一个设计都是困难的？因为设计关乎用户的的认知、预期与习惯。用户认知的形成取决于用户过去的经验，过去这个用户或者说这类用户在使用类似产品时建立起来的基本认知，带着这个基本认知以及用过过去养成的操作习惯甚至思维习惯，用户看到你的产品界面时，首先会产生一个认知，在这个认知的基础上形成一个对这个界面状态的潜在预期。好的设计能够引导、管理用户的这种认知和预期，进而促使用户产生实际的操作行为。而差的设计往往不能帮助用户直观的建立基础认知，以至于不能产生我们想要的用户预期，甚至产生了完全错误的预期。当用户操作之后发现与自己的预期不相符的时候，体验痛点就产生了。

所以说，设计是一种介质。一种连接生意和用户的介质，一种复杂与简单之间的介质，一种边界模糊的、还在不断进化的介质。要做好这种介质，需要设计师具备好的分析能力、逻辑思维与转化能力、想象与创造能力，而这三种能力合起来，可以简单概括为我们常说的洞察力。

去洞察自己的洞察力吧。这样才能处理好生意与用户之间的设计关系，让设计成为一种好的介质。

二、路径联动关系 交互设计设计的是什么？设计的是用户行为。可用户行为是虚的，那实际上设计的是什么呢？设计的是一个个状态以及状态与状态之间的联动关系。这是一种设计关系，视觉设计考虑的点线面之间的关系，不同元素之间的组织关系，交互设计考虑的是不同信息之间的组织关系，不同状态之间的交互联动关系。在这个过程中，需要有好的用户洞察，充分理解用户场景与业务诉求，管理用户预期，及时给予合理的界面反馈。

时间是线性的，我们的工作是线性的，用户在你的产品中花费的时间是线性的，所以用户在使用产品的过程中所接触到的一个个界面与交互也是线性的。在这个线条中我们需要考虑到你当前处理的这个点在整个用户路径中的关系，要如何处理才能使用户不在当前这个节点中断任务甚至退出程序。在这个线条中的每一个节点都与它的上一个节点与下一个节点存在路径联动关系。

这种路径联动关系在交互设计的工作里常常以流程图的方式输出，容易理解，但同时也容易被忽视，尤其是对专职的视觉设计师而言。所以无论哪种形式的设计工作，对于路径联动关系的处理，都需要充分考虑流程的起点与终点，以及路径的汇合与分支。交互设计的思维不应该局限在交互设计这个工作或者交互设计师这个职位上，视觉设计师的工作同样需要具备交互思维。

产品是一个复杂的系统，我们的日常工作是被拆分后的一个个节点。开始一个设计项目之后，只有充分考虑当前这个页面或者这个视觉物料在用户的时间线程里的前后联动关系。多问问自己，用户是从哪里来的，接触到你当前设计的这个界面/元素/物料之后，我们应该如何引导用户走到下一步。

这个环节如果考虑的不够全面，就有可能形成断点。

三、系统构成关系 每一个科技产品都是一个有机的系统，它的迭代与成长呈现着基本的生命体征。

每一个生命体的律动都可以表现出自然的美感。生命的发展与进化并不是被人为设计出来的，而现在我们人类希望自己设计和研发的产品能够不断进化，并且经久不衰的活下去。想想这有多难，首先我们要创造一个生命，其次我们还要希望他在短时间内根据达尔文的进化论在自然选择中不断进化，不断的在恶劣的竞争环境中存活、发展。

每一个小的设计都从属于一个整体，是这个整体的一部分，并且带有这个整体的特征。我们常说的 DNA 也就是这个意思。

每一个设计元素，都应该从属于一个设计语言，不管这个设计语言是显性的还是隐性的。

假如说我们不在乎这个系统构成关系，或者说根本没有这个 DNA 的存在。在设计上对于其他竞品的我们认为好的、对数据有帮助的东西直接拿过来会有什么问题吗？如果我们觉得自己的手臂不够强壮，是不是直接可以移植健身教练的手臂到自己身上呢？那结果必定是丑陋的、畸形的。

这也就是为什么我们在做设计规范与设计语言，为什么我们吹毛求疵的追求系统一致性。

同样的，平面构成是设计基础课程，我们可以学到一些基础的构成一个画面的方式技巧。所以在设计草稿阶段需要从构图考虑，而不是从单个元素的刻画来进行。如果我们在做设计的时候忽略元素与元素之间的构成关系，最后整体的效果可能是不协调的、不自然的、美感缺失的。

四、同类并列关系 警察有两种，胖警察和瘦警察；讲笑话的表演有两种，相声和脱口秀；电影简单的说也有两种，故事片和纪录片。

并列与类比是人们在对事物建立认知时的一个简单可用的方法，分类便于我们迅速理解世界，理解一个系统中不同功能、内容/信息之间的关系。同时，电影的类型化为电影产业带来了更多的观众，产品设计形态的类型化为互联网产品带来了更多的用户，信息的类型化帮助用户获取到了更多的信息。

用户的时间碎片化了，大块的内容被切分成了小的信息单元，这样的背景下 Feed/信息流技术（算法匹配）发展起来。同时我们不能不看到这个懒惰的循环：碎片化催生了信息流，信息流让用户的时间更加碎片化。在这样的环境下，各种类型的信息被强行拆分塞进了用户的信息流。这些信息并列在一起，无论是新闻资讯、生活贴士、旅行攻略、还是一条机灵段子，无论是深度长文、番剧解说视频，还是一张吸引眼球的图片，通通都并列在一起，一起争夺用户短暂的注意力。

归类的过程是强化共性搁置个性的过程。我们常常面对的困难也是该如何将功能或信息分类。这些信息本来是千差万别的，这种并列关系的处理在设计上的困难也是显而易见的。我们的困难是每当我们进入一个部分的设计时，总会觉得当前处理的这个问题是特殊的，并不那么容易对不必要的个性做出舍弃。

五、分级从属关系 如果一个团队有 100 个人一起做一件事情，那么怎么进行组织才能有效的完成这件事呢？

如果一个系统有 100 个页面，那么这些页面如何能够更有序的组织在一起，才能完成业务目标并满足用户需求呢？

如果一个页面有 20 个不同的字段与元素，那么界面中用户要阅读的内容、对下一步操作的引导等应该如何进行有效的组织？

分级从属关系的建立可以帮助我们建立易于理解的设计框架。从信息架构的组织、导航的设计到单个页面、单个卡片的设计框架都需要清晰的传递分级从属关系。

扁平化管理在互联网公司一度听上去非常洋气，但现在我们仍然无法确定扁平化管理一定优于层级化管理。扁平化的优点和缺点都很明显：他可以降低管理成本，但对公司结构架构能力和组织能力要求较高；他可以分权管理让更多的人参与决策，但这样的决策过程容易混乱；他可以更好的激励人才培养，但同时隐晦的层级关系也无法避免。

扁平化设计更加凸显内容本身，避免信息传达上的不必要干扰，强调界面的效率。但值得强调的是，扁平化设计并非直接放弃了信息的层级关系，而是在用更简练的形式来表现层级关系。当扁平化成为一种设计趋势被无脑滥用的时候，扁平化本身的缺点就被无限放大了。

在信息架构层面，明确的层级关系要比所谓的流行趋势重要的多。还以微信为例，他为什么要把朋友圈归到二级页面？为什么要在 IM 页单独设置一个聊天详情页而不把操作选项前置？为什么对于单条朋友圈的点赞与评论没有直接外露而收到一个单看上去表意并不明确的两个点的图标里？这看上去一点也不扁平，但似乎并没有影响到微信的易用性。

六、归组收纳关系 作为交互设计入门书籍的《简约至上》中谈到了删除、组织、隐藏、转移四个设计策略，介绍了非常实用的设计方法。几年前在装修房子的时候接触了一点室内设计的知识，小户型空间的收纳问题、动静分区问题、冰箱洗衣机放在什么位置会让生活更舒适的问题，这些问题的解决方法都与交互设计的设计方法相通。

人们对简单的追求在不同的设计领域都非常相似。还有一个有趣的现象：世界是复杂的，人是复杂的，生意是复杂的，而大家在产品设计上的审美取向却是简单的。

简单的体验简单的说就是在易懂的基础上易用，轻松，没有不必要的干扰和负荷，而这种简单体验的塑造建立在更有效的归组与收纳的设计关系处理上。卡片式布局、抽屉式菜单、发现页都是对信息和功能的归组收纳。在什么场景什么时机下适合隐藏、删除哪些内容，把哪些内容归位一组是更合适的，这些都需要设计师结合当前场景、结合其他几个设计关系的处理来综合考量。

七、Z 轴层级关系 设计的过程是处理信息关系的过程。

人们有两只眼睛来感受广阔立体的空间，人们对信息的接收也从来都不是平面的。信息本身是立体的，而平面设计与互联网产品设计的媒介是平面的，设计师需要做的是把立体的信息通过平面的媒介完整的传递给用户。

压感式触摸屏的技术发展带来了的新的交互手势；我们通过叠加与覆盖等设计方式在平面上制造层次的视觉误差来划分信息层级；我们利用信息与信息之间的大小对比、色彩关系来帮助用户更好的理解信息层级，降低视觉上的噪音与干扰。这都是在处理 Z 轴上的信息层级关系。

信息与信息之间的关系是立体的，功能与功能之间的关系也是如此。所以无论扁平化的设计趋势如何，我们该处理的 Z 轴层级关系还是要处理。

以上谈到的 7 种设计关系并不是相互独立的，相互之间存在交集，需要我们在设计过程中综合考虑灵活处理才可以形成结实、完整、成熟的设计方案。

一篇文章篇幅有限，接下来我会分别对 7 种设计关系展开，并结合实例做进一步的分析与说明。

欢迎关注作者微信公众号：「柴林的设计笔记」

相信很多人都有这样的经历。 当你银行卡的钱被莫名其妙扣走的时候，你才发现有些App正在“自动续费”。而在续费前，这些App并未通知你服务到期，将自动续费。 当你想要取消自动续费的时候，却又发现取消自动续费的选项隐藏的很深，取消步骤十分繁琐。 而这样的App，比

想必大家或多或少都遇到过莫名其妙被扣了钱，自动续费的情况，面对“自动续费”的乱象，你的做法是什么？近期，官方要求：自动续费提前5天提醒用户，提供便捷退订途径，这一措施为消费者带来了什么？

相信很多人都有这样的经历。

当你银行卡的钱被莫名其妙扣走的时候，你才发现有些App正在“自动续费”。而在续费前，这些App并未通知你服务到期，将自动续费。

当你想要取消自动续费的时候，却又发现取消自动续费的选项隐藏的很深，取消步骤十分繁琐。

而这样的App，比比皆是。包括视频平台、修图软件、音乐软件、网盘、外卖平台等等。

一、视频、社交、音乐……‍‍‍‍‍自动续费无处不在 其实有很多人选择自动续费，是因为可以“省钱”。

知乎盐选会员价格是25元/月，而选择连续包月，价格是19元/月。

购买盐选会员可以享受的权益包括：电商特权、功能特权、内容特权。

爱奇艺的黄金VIP价格为25元/月，连续包月的价格为首月15元，次月恢复25元。‍‍

开通爱奇艺黄金VIP可以享受的权益包括：内容特权、观影特权、身份特权、生活特权。

微博的VIP价格为15元/月，连续包月的价格为10元/月。‍

微博VIP还可以免费试用3天，到期按10元/月续费。‍‍‍

微博的VIP可以享受的权益包括内容权益、稀缺装扮、动态头像、微博红名、专属标识等。‍‍‍‍‍

哔哩哔哩大会员套餐的价格为25元/月，连续包月的价格为15元/月。‍‍‍‍

哔哩哔哩大会员可以享受的权益包括：内容特权、装扮特权、身份特权、视听特权。

QQ音乐的豪华绿钻VIP价格为15月/月，连续包月的价格为首月0.88元，次月恢复15元/月。‍‍‍‍‍

开通豪华绿钻可以享受的权益包括：会员曲库、无损音质、VIP音效、个性主题、下载特权等。

饿了么的超级吃货卡价格为12元/月，连续包月的价格为10元/月。

开通超级吃货卡可以享受的权益包括：无门槛红包、下单返豆、专享加量包。‍‍‍‍

百度网盘的SVIP价格为30元/月，连续包月的价格为23元/月。‍‍‍‍‍

从价格来看，对于有这些特权需求的人来说，选择连续包月确实相对便宜一些。‍‍‍‍‍‍‍‍‍

因为在很多平台上，没有VIP就“寸步难行”。

但有很多人的“连续包月”，不是自己自主选择，而是被商家“套路”了。‍‍‍

二、自动续费提示不明显，到期前一日就扣费，取消方式藏得深‍‍‍‍ 这些App有时候会推出一些活动，比如免费体验几天，或者首月的价格很低，以此来吸引用户。不过，这些活动往往都默选了到期自动续费。

而且有些“到期自动续费”的提示，不是那么显眼。关于自动续费的说明、如何取消，也都藏的比较深。

比如，某视频平台的自动续费服务声明，需要点开下图中的小感叹号才能看到。‍‍‍

其自动续费声明中表示， 在到期前24小时自动续费 ，扣费前消息通知需关注其公众号。‍‍‍‍‍‍‍‍

而自动续费的取消方式，藏在冗长的《会员服务协议》里。‍

在某音乐软件里，自动续费服务提示藏在下图灰色小字后面的小问号里。

其自动续费服务提示中， 同样表示将在会员有效期到期前1日自动扣费。

取消自动取费的具体方式，藏在《自动续费服务规则》里。

自动续费提示不明显是一方面，有很多不太细心的人注意不到。很多人只看到了“可随时取消”四个字，殊不知，app会在有效期到期前一天自动续费。

比如你以优惠价格体验第一个月会员，3月3号晚上22点到期，你想把便宜占到底，想着3月3号晚上21点再取消会员。但是对不起，app在2号晚上22点就为你自动续费了。这就导致很多人根本不知道自己已经被“自动续费”了。

另一方面，也有一些人在选择订阅的时候注意到了自动续费的提示，但他们体验一番后，就打算取消自动续费，无奈找了半天找不着取消选项。

三、“自动续费”被投诉超10万次 在黑猫投诉平台，关于自动续费的投诉高达11万余起。

其中，有小一部分是因为家里的老人或小孩操作不当或认知不清，导致订阅自动续费。这一类的消费者，大多已在投诉平台申请退款。

而大多数对“自动续费”的投诉，与相关平台的扣费方式相关。

有消费者表示，某软件提示有0.1元三天会员体验，但是开通的同时还要求开通免密支付。后来发现该软件没多大用就没再使用，但后来软件自动扣费99.9元。‍‍‍‍

有消费者称，某App自动续费了两次，续费了两个月。

有消费者称，去年9月开通某App会员，在不知情的情况下莫名其妙参加了该软件的“月月省”活动，今年2月4号关闭自动续费，莫名其妙被扣了72.6元。

有消费者表示，自己在今年一月份购买了一个1元7天的会员，但7天后自动扣除了大约60元。‍‍‍‍‍

还有消费者称，自己在某音乐软件上开通了一次会员，后来系统自动续费了，没有短信通知。

除了上述这些投诉被“自动续费”的，还有一些消费者投诉取消自动续费选项过于隐蔽，按照提示也没有找到退订业务。

也有一些消费者表示，想通过客服解决问题，但联系无果或客服答非所问。

四、如何查看开通了哪些自动续费？‍‍‍‍‍ iOS系统的用户，可以从“设置”-“Apple ID”-“订阅”选项里查看自己所开通的自动续费软件。‍‍‍‍‍‍‍

而安卓系统，目前还无法从一个统一的入口查看所有订阅服务。

不过，有些App在用户签约自动续费时，会让用户授权第三方支付平台免密支付。

这就使得用户可以从第三方支付平台里，查看自己授权了哪些软件可以自动扣款。

比如，在支付宝的“设置”-“支付设置”里，有一项“免密支付/自动扣款”，在里面可以看到所有可用从支付宝自动扣款的软件和小程序。

在微信钱包的“支付设置”里，有一个“自动续费”选项，里面可以看到所有从能微信自动扣费的软件和小程序。

五、官方要求：自动续费提前5天提醒用户，提供便捷退订途径 日前，工信部印发《关于进一步提升移动互联网应用服务能力的通知》。

其中要求，采取自动续订、自动续费方式提供服务的，应当征得用户同意，不得默认勾选、强制捆绑开通；在自动续订、自动续费前5日以短信、消息推送等显著方式提醒用户，服务期间提供便捷的随时退订方式和自动续订、自动续费取消途径。

事实上，有很多App早已在关于“自动续费”的介绍中，表示会在自动续费前5日提醒用户。

比如，某乎在《连续订阅服务协议》中称，将在自动续费日期前五日，通过显著方式（如站内私信、短信通知等）提请用户注意自动续费事项。

某酷在《VIP会员服务协议》中称，将在发起自动续费前五日以发送短信或站内信等方式发送连续包服务续费提醒。‍

不过，这些提醒是否到位呢？‍‍‍‍‍

有消费者称，去年8月6日，自己开通了一个月的某乎盐选会员，后面6个月在其不知情的情况下自动续费，并且没有短信提示。

有消费者称，自己的某酷会员自动续费了一个月，没有信息提醒。

有网友反馈称，某乎的五天连续订阅提醒堪称“吉利服”。

用户要想了解到会员续费情况，还需要逐一点开“消息-官方账号消息-某乎盐选会员”才能看到，并且没有弹窗提醒。

一直以来，五花八门的会员、超级会员、黄金会员、白金会员、VIP、SVIP……已经让用户苦不堪言。在此基础上，用户还要面对一个跟用户“捉迷藏”的自动续费。‍

此次官方出手，不仅仅是要解决一个“自动续费”的乱象。

工信部围绕提升用户服务感知、提升行业管理能力，共提出26条措施。

这势必会让整个移动互联网生态的服务水平都有所提升。

作者：三言Pro

来源公众号：三言Pro（ID：sycaijing），提供新科技、新消费、新未来的前沿资讯。

本文由人人都是产品经理合作媒体 @三言财经 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏