那么之前的文章都是对于B端这样一个系统，进行概括性地讲解，系统的讲解。那么从今天开始，我将对B端系统对大家进行一个详细的讲解，包括每个控件的具体使用。这就是我们从大到小，再由小到大的这样一个学习过程，那么目前我们要进行收缩范围，要精确的明白某个控件应该如何使用。今天我所讲解的是表格页的具体使用方法，以及如何分析现有表格页的问题。

       文章句句将会直击重点，拒绝长篇大论。

       那么为了方便大家的理解和查看，我这里去列举一张表格页的图片。以下的讲解都会围绕这个表格页的图片，进行详细的剖析讲解。那么，在看的过程中，我们要时刻的翻到上面这张图片，对照着这张图片来吸收消化今天的知识。

       大家可以看到这是一个关于资产清单的表格页，那么它的构造也符合我们常规的表格页。首先我们对这个表格也进行分析，我们可以看出表格页是由这几部分组成的，它们分别是数据过滤，数据操作和数据查看。

数据过滤部分指的就是我们页面上方的这样一个搜索框，包括。我们表格页内容顶部的资产编码，资产名称，它们后边都有这样一个筛选器，我们可以按照顺序或者是倒序进行筛选。这里我把数据过滤的部分用红色框标注一下。

       那么这个表格页我们可以看出，它的数据过滤其实是非常少的。更多的数据过滤有什么呢？按照资产的新旧程度，我们可以将它分为新的、旧的、淘汰的。那么这三个按钮也可以作为数据过滤放在我们表格内容页的顶端。

       当然，维度有很多个维度，我们不仅可以对资产的新旧程度进行分类，我们也可以对资产的购买时间进行分类，比如2018年、2019年、2020年至今，我们可以对这样一个时间维度进行分类。同样，操作按钮也是放在表格也的顶部，也就是我们搜索框的后边。这样用户在筛选起来会比较的方便，具体需要按照什么维度进行划分，需要我们找到，我们的业务目标是什么？我们要找到我们的这个表格页希望给用户传达出怎样的信息？那么用户最关心的点是什么？找到这些之后我们就可以对用户最关心的点以维度进行划分更多的筛选器，有助于用户更好的去浏览内容。

       此页面我们可以看出他的筛选器过于少。在这里我们并不评价，数据过滤少是好事还是坏事？但是我们要记着，我们时刻要具备分析某个功能模块。究竟应该放在哪里？它应该怎样去划分？这是我们要牢记的点。

       那么刚才也说过，一个表格页分为三部分，分别是数据过滤，数据操作和数据查看。现在我们来讲第二部分，也就是数据操作。那么什么是数据操作？数据操作，顾名思义就是对页面中的某些数据进行操作功能，可以是增，删，改，查等等，它都是属于数据操作。那么数据操作，它一定是一个可点击的一个功能按钮，在页面中，我们如果仔细找一找很容易就会发现数据操作的模块。在这里呢，我同样用蓝颜色的框给大家框起来。

       在这里，蓝色框框起来的部分，就是我们这个表格页中的数据操作部分，也就是第二个部分。

那么很多人可能会有疑问了，说为什么同样都是数据操作，有的数据操作在上面是纯色的一个按钮显示，那么有的数据操作又在表格内容页里，这些究竟有什么区别？

       没错，数据操作。它摆放的位置是多种多样的，但它遵循一个规律，什么规律呢？也就是说在我们执行数据操作的设计这样一个功能模块的时候，我们需要对其进行第1次的划分。数据操作部分我们可以分为单行操作，批量操作和全局操作三个操作点，也就是说所有的操作功能无非就是在这三个类别中的某一个类别。好，下面我来给大家详细讲一下什么是单行操作，什么是批量操作和全局操作。

       我相信大家通过字面意思也能对这三种操作方式有一定的了解，单行操作指的是针对表格内容页的一行数据进行操作，一般就是放在表格页的这一行的尾部。那么批量操作针对的是对多个数据进行操作，他一般放在表格内容的顶部，那么什么是全局操作？全局操作是对整个表格页的页面进行操作，比如说我要导入新的表格，或者说我要替换这个表格，那么根据优先级顺序来说，全局操作大于批量操作，又大于单行操作。这就是数据操作的三个不同点，那么很显然在我们上张图片中。只存在单行操作和批量操作，并没有全局操作。

       接下来我对最后一个部分，也就是数据查看这个部分进行一个讲解。数据查看也就是我们系统所反馈给用户的一些数据，它包括具体的数字，也包括一些汉字，所有的信息都可以被列为数据查看。那么由于这个表格页上的数据查看部分没有去写一些信息，将这些信息打码隐藏了，但是我们不难想象它填入信息后的样子，也就是整个表格的内容页的核心部分就是我们的数据查看，无论是数据操作还是数据过滤，只是进行一些功能上的操作，那么用户最终的视线还是要落在数据查看这个部分，同样我用橙色的框给大家标注出来。

       如果说我们的数据查看部分，其中的数据是混乱不堪的，或者说它的列数是非常的繁琐的，那么对用户的体验非常不好，也不能在第一时间抓住有效信息，所以我们在设计的过程中一定牢记7±2法则进行设计。

       那么有的人有疑问了，说如果我的列数非常多怎么办？如果你的列数非常多，那么你只显示其中的重要信息在表格页这一块，其他信息应该归纳到查看详情，或者是二级页面内，不能在一屏中展示过多的信息，即使你放了这么多信息，你要记着那也是无效的摆放，用户在进来之后根本就不想看一眼，所以在这里我们要一定要记着7±2法则，或者说我们给自己定一个列数的系统规范也是可以的。

       以上，就是今天对表格页的详细讲解，那么要学习更多知识也可以进我的公众号学习。我们要知道再简单、再复杂的表格页也无非就是三块，数据过滤、数据操作和数据查看，当然在页面中也存在我们的导航系统，它们共同组成了一个完整的表格页，表格页所遵循的宗旨是简单高效，信息直观，操作方便快捷。

文章来源：站酷  作者：弧形线


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

尤其是一些体验细节，比我平时用的腾讯收集表做得更到位些。感觉 Google 的设计师，确实是没少下功夫的。

什么是 Google Form

国内通常网盘和在线文档是分开的两款产品，例如腾讯的微云和腾讯文档，就是不同的两个产品。

Google Drive 这个东西，相当于把在线文档和网盘整合到一起了，这就和国内的产品很不一样了。

而 Google Form 就是 Google Drive 里面的问卷功能。

这次我拿腾讯收集表和 Google Form 这两款产品对比，就是因为它们定位比较相似：

都不是专业的问卷工具，而是在线文档工具中的问卷功能

相比之下，我觉得 Google Form 的体验细节做得更加到位，很多地方值得学习，尤其是这五点：

选项粘贴

一般做问卷，我们都会先弄一个文档，把内容确定了再往问卷工具里填。所以填写问卷内容时，通常不是通过输入，而是通过粘贴。往腾讯收集表里粘贴选择题内容，必须一条一条来，有多少个选项就贴多少次，选项多了会感觉自己在工厂做流水线工作。

而 Google Form 可以把所有选项都一起粘贴，识别到换行就会自动贴到下一个选项中，方便多了。

我觉得还可以优化一下的点是，希望能够让我把问题和选项都一起贴，这个目前 Google Form 还做不到。

切换问题类型

Google Form 创建一个问题之后，可以很方便地切换问题类型。

这样样式挺好的，有时可以减少一些操作步骤。

快速创建问题

就是因为 Google Form 的问题类型可以快速切换，所以创建问题就很快速了。只有一个插入按钮，点击后立即插入一个跟上次所选类型相同的问题。如果想要换个问题类型，再点下拉框切换就行，交互很流畅。

一般创建问卷就是要尽量使用连续的同类问题，所以这种方式挺好的。

而腾讯收集表因为不能切换问题类型，所以创建起来就比较麻烦了，还分了两个入口。

第一个是左侧的工具栏，刚开始用还真不知道是用来创建问题的，可能因为标题上的「添加问题」太不起眼了吧。第二个入口是，当前编辑的问题下，会出现一个「插入问题」的按钮。但是点击之后需要在菜单选择一下，这就没那么方便了诶。

问题顺序拖动

Google Form 和腾讯收集表在创建了问题之后，都能拖动顺序，但是可拖区域不同。Google Form 的可拖区域在顶部一条，而腾讯收集表的可拖区域在侧边一条。

按下拖动时，为了避免太长不方便，都会收缩变短，于是问题就来了！

腾讯收集表因为可拖区域在左侧，所以我点击左侧偏下的位置也能拖，但这次问题收缩，我点的地方就跑出问题区域了，于是拖动就出问题了。

Google Form 因为可拖区域在顶部，所以不会出现这个 bug。

但是，Google Form 往问题里插入图片后，问题长度就收缩不起来了，上下拖动可不就不方便了？

好在，这个问题并没有影响拖动。

Tab 键

对于很多 PC 老手来说，Tab 键是个很方便的工具。

有了它，填写再多表单都不需要拿鼠标了，点一下就能自动把焦点从一个输入框移动到下一个。

而 Google Form 把 Tab 键运用到位，基本上界面上的交互功能都能切换到。

腾讯收集表里也能用 Tab 键，不过覆盖范围就少了一些，不能删除、添加选项或者添加“其它”。

总结

其实要比视觉风格，腾讯文档可能更加符合国内审美。如果要比功能，Google Form……也还是比腾讯收集表强大，可以：生成图表、给问题和选项插入配图、插入视频、区分问题模块……

文章来源：优设   作者：ZoeYZ


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今天我们来聊聊，交互设计师在做这种转化页面出发点是什么？可以采取什么手段去承载流量，提高转化。

从上图可以看出在未增加新功能、新页面的情况下，设计师对页面信息、结构进行了重整，你会发现更注重用户价值的传递，整个页面更加高效，用户关注的信息点都很突出，并且有这么多优惠，让用户心理感觉更省钱了。以上这些都是为了去传递用户价值，不断的刺挠用户心防，让用户破防！今天从交互设计师的角度阐述下如何去做转化页。

凸显价值

在这个信息爆炸的时代，人都不愿意在无意义的事情上浪费一秒钟，而面对产品界面也是一样，看一眼没有看到自己从中能得到什么可能就划走了。所以在转化页这种承流量的页面，凸显用户价值非常重要。

我们首先应该明确你目标用户想要的到底是什么？是优惠？是承诺？还是被认可？如：购物类产品，用户在平台上可以获得什么价值？除了可以不用去实体店在家就可以下单（满足惰性）外，在使用 APP 过程中还能获得什么价值？购物的爽感、有优惠便宜感觉自己赚到了？所以具体设计转化页的时候就是要抓住这些最关键点，然后进行放大，不断刺挠用户心防。

1. 让用户感觉省钱

其实绝大多数用户都不是理性消费者，因为人性原因，我们的思考方式大多都是被系统 （无意识且快速，不费脑力）占据的，让消费者失去了理性的诱因有很多，比如：占便宜、错过、恐惧、好奇、亏欠、虚荣、逆反等等。其中便宜和错过是最常用于设计中的。

直接 | 通过优惠标签、对比、简单粗暴告知省了多少钱

便宜并不是真的便宜，而是让消费者感觉到占了小便宜。相比较拼团特惠标签，直接将用户可以省多少钱展示出来，对用户的冲击会更强。

间接 | 营造一种错过就亏了、就没有了的感觉

这在心理学叫：损失厌恶，它指的是人们对已经拥有的事物会习惯性地视若无睹，只有在失去或即将失去的时候才会产生加倍的珍惜感。对应到收益与损失上在人们心理敏感程度上来看，比起收益，人们对于损失更加敏感，这就是为什么在双十一期间，各大商家都打着：“全年最低价，再不买就涨价、不买你就亏了、抢光了…”的标语，但是这种只是感觉上给人们造成好像真的“亏大了”，但是就算买到其实也未必赚到。所以，我们在具体界面上也可以适当采用这个原理技巧，增加紧迫感和稀缺性元素，营造一种错过就亏了的感觉，让用户在犹豫时，能够斩钉截铁的按下 “转化按钮”！

上图 VUE、脉脉都是采用“限时”的这个手法来因遭稀缺性与紧迫感，从而增加用户购买欲望，而京东则采用“仅剩 1 件”“一年历史最低价”的方式来营造紧迫感。

2. 强化产品卖点打消用户疑虑

你可以看到现在各大电商上的物品的展示图都从原来的静态图向动态图及视频化方向演变，这这种手段就是为了更加高效，直观的展示产品本身的特质，让用户看了一目了然。在通过分析得出产品最终卖点后，在呈现形式上交互设计师也需要多多考虑。以下重点在展示产品卖点方式上进行阐述。

动态化展示

淘宝上的商品动图，非常直观的展示产品核心特性，帮助消除用户疑虑。

对比型展示

通过列表直接展示普通用户和会员用户间的差异，这样的方式直观，代入感强，能够很好体现产品本身的服务价值，更容易打消用户购买疑虑。

平铺直述

直接将用户可以获得特权展示，告知用户可获得哪些权益与服务，一般通过 icon+文案的方式直接呈现给用户。

这样的方式虽然没什么大问题，但是在权限比较多的时候，细看其实会不知所云，不知道具体是干嘛用的，所以如果要采用这样的方式建议搭配辅助说明。

亮数据（权威性）

将产品的数据直接展示出来，通过多维度数据权威展示产品亮点。

所以在凸显价值感知上我们可以怎么做：

• 建立标签体系，通过标签优惠让用户感觉省钱
• 营造稀缺与紧迫感，让用户感觉再不行动就亏了
• 强调产品核心卖点且直观展示
• 数据化阐述可信度更高，更有权威性

提供清晰交互动线

交互本身是一个动态的过程，转化页有时需要承载比较多的关键信息，而如何让这些信息清晰，有序的展示在用户面前并引发用户互动是交互设计师需要思考的。可以从页面框架、操作引导上去思考与用户的关系。

1. 页面框架

转化页面上的信息需要非常高效的传达给用户，应采用最高效的方式展示给用户。因为不同于购物类、视频类 APP 用户以“逛一逛、刷一刷”看看有啥好看的心态，漫无目的的浏览，而是会集中精力寻找价值从而说服自己去买，所以我们框架尽量线性，符合自上而下，自左往右的阅读习惯，所以放到页面上建议直接大模块化从上至下排布，这样能让页面更加规整，也符合与用户的视线。

以上是我在各大应用会员转化页的框架，可以发现，抛开内容信息，整体框架前两个会让人感觉更舒服，这样的搭配更加流畅性，比例更好，不会太分割，其实在设计模块化卡片大小时也可以考虑下黄金比例。

2. 操作引导

说到引导我们可以来看一看下方案例，仅仅增加了很小的一个细节就达到质的效果。

所以在做转化页面时，对关键按钮我们也需要采取一些方式让用户注意到，并吸引用户点击。主要可以从按钮的位置、大小颜色，动效、文案 4 个方面来思考。

位置

由于转化页需要展示较多信息给到用户充分思考，所以一般根据用户的浏览习惯，按钮一般放下右下角视觉落点处，这样能比较好的组织页面内容，突出又不抢页面主要视线。

大小和颜色

重要的转化按钮大小绝对不能太小，但也不宜过大。记得 UI 中有关于按钮大小的计算公式，可以在这个公式基础上进行灵活调整。有些宽度很宽是为了加大用户点击热区，让用户更容易点到。

颜色一般使用应用主题色，如果有多个按钮，主按钮颜色尽量有一定对比，这样才能将我们想要让用户点击的那个跳出来。

动效

动效一般在按钮上增加一些扫光、光效、按钮本身轻微动效即可，只要很微小的效果就可以，因为人眼在一堆静态内容中很容易注意到动的东西，如果做的很强烈就本末倒置了。

文案

按钮上的文案一定程度上也能够促进转化，所以在文案上表意的基础上可结合我上面讲述的第一部分进行文案的设定，加强用户感知！

写在最后

以上讲述了交互设计师在面对重要的转化页时应该要着重将价值简单高效的传达给用户，加强用户的感知，可以通过贴标签、紧迫感文案、动态化、对比化、平铺直述、亮数据内容展示，更好的将产品价值传达给到用户，在具体内容布局上建议准寻线性的框架搭配颜色、动效、引导性文案的方式引导用户操作。以上是我个人的思考与总结，有问题可以共同探讨~ 感恩

文章来源：优设   作者：小发的设计笔记


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

高情商沟通的重要性想必大家都清楚，而高情商沟通离不开重要的一点——说服。在职场中，有理有据地说服，能让对方明白你的想法，达到你想要的目的。那么我们如何才能说服对方，最大程度减少沟通成本呢？作者从运营的角度分享了10个小技巧，感兴趣的小伙伴们不妨来看看，说不定有帮助哦。

在这个消费主义的时代里，无论是工作中还是生活中，处处都存在着说服。

走在地铁里，看到大片的广告区印刷着“找工作，上boss直聘”。开车在高速，抬头是一个大标语“司机一滴酒，亲人两行泪”。公司的文化墙永远都不会空着，高悬flag“今天的最高标准就是明天的最低要求”。

发现没？全世界都在通过说服拿到自己想要的结果。商家通过说服拿到订单，高管通过说服拿到项目主导权，运营通过说服获得用户量等等。究竟什么是说服？说服又有哪些可以落地的技巧？

今天这篇就是以运营的角度来详谈说服用户的10个技巧。

一、说服的本质

谈技巧之前，我们要先来聊聊“说服”本身这件事。否则只盯着一些技巧就变得没有意义，我有点贪心，形而上和形而下的东西，都想交付给你。

说服，通俗一点说，就是通过充分的理由，让对方“听我的”。这跟沟通就有了本质区别。沟通是一种信息互通，双方是平等交流。而说服则更强调目的性，且往往是低区位的人来说服高区位的人。

如何辨别我们是处在哪个区位？关键要看决策权的归属在哪一方。谁具有最终决策权，谁就站在了高区位。

高区位向低区位做出影响，往往不需要说服，除特殊情况外，大多数会选择使用权力进行直接要求，比如领导对你布置任务，或者父母限制孩子的游戏时间。

相反，如果低区位要对高区位做出影响，说服就是最重要的工具。因为低区位无法直接做出命令或要求，就需要准备充足的理由和事实，让高区位的人做出有利于己方的决策。

这里要强调一点，无论我们通过什么手段说服，决策的最终执行者都是高区位者。这就意味着：无论你的理由多充足，都只是给高区位者提供更多参考而已。

想透了这一点就明白了说服的本质。——本质上，我们无法说服一个人，我们所谓的说服，其实就是通过有选择的信息来让高区位者重新完成一次逻辑自洽，从而做出更有利于高区位者的决策，而这个决策的附带影响才是利于低区位者的。

所以我说，说服的前提一定是双赢，否则就是欺骗。

二、说服的50%

聊完说服的本质，我们落到具体的说服流程上来。说服一个人，第一步应该从何开始？

• 准备自己的观点和素材
• 挖掘对方的态度和逻辑

如此简单的选择题，我想大家应该都会选第二点，但是事实中，我们的选择可能恰恰相反。

当我们说服老板给自己加薪时，大多数的时间都在陈述自己的不容易，自己的业绩如何如何，自己觉得应该获得更多的激励等等。

当我们说服自己的用户选择某个产品或方案时，一开口就是我们的产品用了什么新技术，我们的方案做了几天几夜blabla一大堆。

大家发现没有，我们总是习惯性地从自己角度来说服对方，甚至都听不进对方的潜台词。

所以，真正的说服应该从用户分层开始。这个跟运营本身是一样的逻辑。

我们说服的对象从大的维度可以分为3类：抗拒用户、无感用户和支持用户。根据用户反馈的程度不同，还可以细拆一下：

1. 反对用户
2. 怀疑用户
3. 中立用户
4. 好感用户
5. 支持用户

这5类用户分别表现出不同的特征，有不同的潜台词，识别潜台词是分类准确的重要保障。我总结了一套顺口溜，大家可以参考：

反对用户情绪大，稍不留意就爆炸。疏导情绪最优先，态度缓和再深谈。怀疑用户爱皱眉，说得太多成炮灰。换位思考忙站队，现场验证是与非。

中立用户想法少，稍不留神自己跑。坚决不能脸皮薄，半推半就可劲儿搞。

好感用户问题多，东拉西扯听你说。连捧带夸不要停，当下决策不能拖。

支持用户自来水，最恨杀熟大头鬼。真诚服务期待高，千万别被套路毁。

这套顺口溜使用的都是通俗易懂的话，非常落地，也不会产生歧义，因此建议可以抄写在便签纸上，或打印下来贴在办公桌上。不用刻意背，娱乐一样多念几遍就可以。

老话说得好，好的开始就是成功的一半。开始姿势如果都不对了，后边再多的技巧都是白费的。call back一下，识别用户态度才是“说服”真正意义上的开始。

三、说服的10个技巧

大家期待的正戏开场了，前两 part可以算是“道”和“法”两个层面，那么这第三part就是最最受欢迎的“术”。10个说服术送给大家，但我还是要啰嗦一句“多看前两part，最重要的真的不是技巧”。

1. 权威效应

如果说世界上最牛叉的说服术是什么，我一定会说“权威效应”。“人微言轻，人贵言重”不是一句玩笑话，同样一句话，马云马化腾等大佬说出来就会很快变成“至理名言”。所以，提升说服力最有效的方法是提升自己的权威。

当然权威会包含很多，比如专业权威、地位权威、财富权威、名人权威等等。这个技巧有一个变形叫做“转嫁权威”。比如很多公司请代言人，再比如请第三方权威机构测评等等。

2. 事实证明

还记得罗永浩怒砸西门子事件么？老罗带领一帮志愿者在西门子总部维权，投诉冰箱门关不严。铁锤一响，黄金万两。只不过这一次的黄金万两是西门子丧失的品牌价值。

这是一次多么生动的说服课呀！让我们真真切切地感受到了“事实胜于雄辩”。这哪里需要什么言语来说服，只要不是“装睡”的人，在事实面前都会“醒”。

举一反三，就跟我们写议论文一样，有事实论证，就有对比论证，就有比喻论证，你看一下子，我们就多了两个新技巧。

3. 无风险承诺

无风险承诺是针对反对用户、怀疑用户和中立用户的天然法宝。人性就是趋利避害的，尤其是当收益不明显的时候，避害的心理会更加强烈。这时候我们要做的根本不是说服，而是尝试让用户接触、尝试。

无风险试错是一个很大的诱惑，能够抵消很多负面的抗拒。退一万步讲，即便对方最后依然没认可，但他也没损失，在这个尝试的过程中，我们又可以设计很多小抓手，建立后续联系，放长线钓大鱼。

4. 认知颠覆

认知颠覆在这些技巧当中效果绝对属于TOP级，君不见市面上所有公开课的经典套路就是“你以前的学习方法是错的”。君不见短视频领域里迅速火爆传播的多是“反传统认知，反传统逻辑”的内容。可见其威力。

当然，这一招也有变形。有的是真的认知颠覆，但是还有好多是借此创造需求。比如这两年电动牙刷、空气炸锅等网红产品的兴起，都是从颠覆传统认知中，找到用户新需求，且不去论新认知的真假。

5. 利用认知

如果说技巧四是利用认知差来形成说服力，那么技巧五就是利用用户原有认知形成心理暗示。什么意思，举个例子你就明白了。

几乎所有人心理上对于购物的认知是“好货不便宜，便宜没好货”，即便现在各大商场打着“多、快、好、省、新”的招牌，用户心智的调整非一夕之功，学会善用其暗示的力量，也是学问。

所以当你的竞品打“又便宜，质量又好”的底牌时，你甚至不需要诋毁对方一句，只需重复问用户一句话“又便宜又好，您真的信么”，就有可能达到很好的效果。

6. 角色转换

角色转换也是说服技巧中使用频率很高的技巧之一。通过双方，甚至是第三方的角色转变，让用户看到更多视角的信息（当然，这个前提是转换后的视角是利于决策的，否则就无意义），从而综合考量，得到双赢局面。

常用的招数有三种，我再分别附上3个案例，你一看就明白了：

1. 如果我是你：你去买东西是不是经常听到售货员说“我自己家就用的这款”、“我给我侄子就选的这个”，其实就是把自己售货员的身份转变为消费者的身份来影响你。
2. 如果你是我：当我们讨价还价的时候，商家会说“大姐，别砍了，您也是做买卖的，您觉得这价能行么，换您，您也不干呀”，这一招本身就是唤起同理心。
3. 巧设第三方：你跟领导提辞职，领导好说歹说留不住，最后来了一句“小孙呀，其实咱们都是打工的，我也不是在这个公司干一辈子，这样，咱们再拼一年，高低弄出个结果来，也不枉同事一场”。一下子你们变成了同一阵营，公司变成了共同的第三方，说服力无形中就增强了。

7. 成本计算

做决策就要考虑成本，成本越低，决策越快，成本越高，决策越慢。利用这个尝试，我们在说服过程中就可以有两个操作：

1. 抬高她选择其他项的成本
2. 降低她选择我们的成本

比如，家长已经决定给孩子报名竞品的正价课了，你要做的不是直接劝他放弃，而是应该告诉他一旦选择错误的成本是什么。不是损失3千块钱的事情，更重要的是孩子的时间耽误了。所以不妨多对比，听一听我们的公开课，没有成本，最多占您一个晚上时间，再做决定。

8. 重要性排序

很多伙伴在说服别人的时候，习惯性地否定别人，企图通过技巧四“认知颠覆”来征服对方。然而一来技巧四掌握起来并不容易，不一定就能形成颠覆，二来老是以“颠覆对方”的心态沟通，容易引起反感。

所以技巧八是另一个方向的技巧，叫做重要性排序。本质上就是让用户的注意力转移到我们想让他注意的地方上来。而这个地方就是我们的优势所在。

比如用户来买冰箱，讨论了这家质量好，那家服务棒，另外还有一家空间大等等，最后你说了一句“姐，您刚刚考虑的这些因素都是正常的，但比这些更重要的是：耗电量。其实现在科技进步了，您提到的那些各个厂家大差不差，反而是耗电上相差很多，毕竟您买回去是一直插电使用的，这才是大账”。

9. 戳破伤疤

很多人在谈论说服时都会忘记了“同频共鸣”这一点，其实说服不是你想要A，我提供的是B，于是我拼命地让你放弃A选择B。而是你通过我的信息，自己想通了，原来还是B最有利。这个想通的过程最重要的一点就是同频共鸣。

而同频共鸣是从戳破伤疤，点破问题开始的。只有我们精准判断出对方的真实需求，对方的真实顾虑，才会出现“还是你懂我”的共鸣感叹，才能很好地开始说服。说破有时候不仅无毒，反而有利！

10. 权利反转

权利反转我在之前的文章中提到过，本身指的是“无形中剥夺对方原有的权利，再以显性的方式赋予对方”，以此达到一种持续沟通或快速决策的目的。

第十个技巧往往跟技巧三“无风险承诺”配合使用。我举两个例子，供参考：

1. 持续沟通：我们电话沟通过程中，原本挂掉电话是对方的权利，但是你有言在先说“如果我的方案不符合您的预期，您可以随时挂断我的电话”。这时对方反而不好意思挂断，同时也会降低对方的防备心和沟通负担。
2. 快速决策：很多产品本身就是自带1年保修期的，但是很多商家就会换一种说法，叫做“买这款产品，赠1年保修期，而另一款就没有”，配合对比技巧来促使你下单。

OK，这10个技巧我都打包交给你了，算上技巧二当中引申出来的比喻暗示和对比说服这两个，一共是12个技巧，算是超额完成交付任务。

文章来源：人人都是产品经理   作者：运营插班生

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导语：B端和C端是产品经理经常接触到的两个话题，那么什么是B端C化呢？这篇文章从B端和C端的区别入手，详细解答了什么是B端C化以及为什么要B端C化，一起来看看吧。

一、写在前面

最近很流行一个词——B端C化，解释出来就是可以用C端的模式和思维来对B端产品进行设计，讨论者大致分为两种观点：

1.C端产品市场已经趋于饱和，可拓展空间剩余不多了，B端产品市场还是一片蓝海，于是产生了一些C端设计师转型去做B端了，将一些C端的模式和思维带到了B端设计中，导致越来越多的B端逐渐C化；

2.B端产品市场互相竞争，为了在同市场中打出差异化，于是一些B端市场开始招揽C端设计师培养转型，并且尝试融入C端产品的模式和思维在同市场内竞争，是产品设计的“内卷化”现象，导致市面上的C化的B端产品越来越多；

但上述无论哪一种观点，都在阐述一种现象或者趋势：不管是交互还是视觉还是UI，目前部分C端设计师正在往B端设计师转型。这个现象的发生对整个设计行业来说无异于新增了很多新亮点——市场上越来越多的B端交互、数据可视化视觉等需求，进而导致对市场培训行业开始产生B端培训的诉求，同时也破空而出了很多优秀的B端设计师。那么B端C化到底是什么，和传统B端C端有什么区别，有这方面想法诉求的同学怎么去实现转型？

由于我本人之前是做C端UI设计师，到后来转型成为B端交互设计师，而接触的业务恰好涉及B端和C端的联动以及多角色之间的协作，所以这篇文章借助结合我个人的经验和看法，谈一谈自己对B端C化的理解。

二、B端C端的区别

在谈B端C化之前，需要先了解B端和C端的区别是什么。B端C端的区别网上有很多文章和概述了，大致归纳下来主要以四个维度去区分：受众主体、上线周期、业务类型和产品侧重点这四个维度，其余的维度也会有区分，但是影响较小，主要还是围绕以上四个维度进行B端和C端区分。

1. 受众主体

受众主体也就是相对应产品的用户群体。C端的受众主体是大众用户，特征为多样化，用户与用户之间跨度也大，但是场景和路径较为单一的，比如C端产品就以年龄层、城市、性别等来划分用户，每个阶段的用户都有不同的诉求、认知和习惯等等；在做任何决策方面都属于偏感性（Heart）的个人决策（Personal）；用户稳定性则比较差，要是对产品不满意，可以立马换另一款产品，转换门槛低，有多个竞争对手产品可供选择；

而B端产品的受众主体则是为组织群体，特征为多场景和多维度，用户群体较为清晰明确，可以按照岗位、角色、权限等划分用户群，但是之间的关系更加复杂，比如设计一个银行内部管理系统，用户群就很明确清晰——银行各级职员角色，根据职级关系设计不同的功能以及权限；在做任何决策方面都属于偏理性（Head）的团队性决策（Team）；用户稳定性较强，要是对产品不满意，也只能被迫适应和忍受，转换成本较高，几乎没有其他产品可供选择

2. 上线周期

上线周期就是指产品从需求阶段到设计阶段到开发阶段直至最后产品上线所需要的周期。

C端产品上线周期模式有个很明确的特点：快速迭代、敏捷，很多C端产品功能更新迭代的速度很快，上线周期非常短，往往半个月甚至一周就完成开发上线，加上用户群的多样性和跨度大，所以在上线的时候往往会需要AB实验去验证方案可行性；

B端产品上线周期则是和C端一个对立面——长，少则双月/季度多则半年/一年等，因为B端产品流程上都属于重型流程，角色之间关系复杂，交互系统较为繁琐，需求的改动和迭代并没有那么频繁，也不需要像C端产品那样快速上线抢占市场，所以B端上线周期会很慢，也导致在工作强度上相比C端较为轻松一些，但是缺点就是结果没有C端来的那么快和明显。

3. 业务类型

C端产品的核心竞争力就是产品本身，关键总结就是让用户爽就完事了，所以C端产品的需求类型往往围绕用户群的痛点产生；因为C端用户跨度大，不同的用户群体有不同的痛点，所以导致C端的需求类型不是很明确清晰，需要不断从用户身上去探索挖掘需求，在不断的试错中逐渐得出正确的结论；

B端产品的核心竞争力除了产品本身，还依赖复杂的关系、渠道、技术和资源，你的关系够硬、渠道够广、技术够领先、资源够丰富，哪怕你的产品很一般，一样能领先其他同行业的竞争对手，关键总结下来就是让用户赢就够了；B端产品的需求类型虽然也是围绕着用户群的痛点产生，但需求的目标是更加明确清晰的，加上需求变更的频率、范围往往都有契约/合同所约束，所以相较于C端产品来说，B端产品是需求更加明确且容易达成目标。

4. 产品侧重点

产品侧重点无异于区分C端和B端最明显的门槛了，C端产品的侧重点主要在于体验，而B端产品的侧重点主要在于效益。

前面提到过C端产品核心让用户爽就完事了，加上基于用户更换产品的成本很低：你这款产品我用不爽就换掉了，所以C端产品的侧重点永远以用户体验为主，前面说的需求业务类型也几乎是围绕用户体验产生的；大家对比市场上同类型的C端产品，界面、交互、功能都不会差很多，是因为经过长时间的更新迭代，已经沉淀下来目前最好的用户体验类型了，随着产品量级越大，改变用户体验类型就越谨慎；

C端产品就是为了寻找并解决用户痛点、痒点和爽点，加上品牌性、用户隐私等因素考量，产品侧重点聚焦于用户体验。

B端产品侧重点则是围绕效益了，因为作为一个团队使用的产品，不管是从易用性、功能性还是安全性，为这个团队解决问题为首要基础，那么使用者的体验、产品的美观度等等相较于优先级就没有那么高了，所以导致了有一段时间大家对B端的理解依旧是老旧、丑、难用的认知上；

B端产品就是为了使用产品的团队解决效率、成本、营收的问题，加上产品的稳定性、安全性等因素的考量，产品侧重点自然更聚焦在效益上。

二、什么是B端C化

前面了解了B端和C端产品的区别，接下来聊一聊什么是B端C化；简单来说从字面意思理解就是B端的设计层面逐渐靠近C端，网上也有很多B端可视化、趋势潮流的设计和文章，但是B端C化不仅仅是从视觉设计上的改良，下面我逐渐从大到小聊一下我对B端C化的理解。

1. 功能架构

在做过很多B端产品之后发现，往往很多产品经理是对整个产品架构、功能形态一切都清晰地了如指掌，但是有时候在搭建产品架构的时候，功能形态单一粗糙，步骤复杂且笨拙；站在业务产品的视角来看，架构逻辑上都是没有问题的，但是站在用户视角来看，整体框架是混乱破碎的，步骤繁琐且复杂，导致用户对产品的认知变差，但是又不得不去用这个产品，只能被迫去学习使用。

比如一个产品案例，就是一个产品的底层逻辑是前端输入素材id，后端返还一个素材后就可以使用了，站在产品业务视角来看，这样设计没有什么问题，符合产品的底层逻辑；但是站在用户视角就特别难受了，用户想用一个素材，还要去寻找id然后输入搜索，像C端那样全部铺出来给用户选不好嘛？

2. 行为习惯

行为习惯自然是指用户群在该行业下的行为习惯，电商行业、社交行业等等不同行业的习惯、专业术语等都不相同，这个在C端产品中都很能得到体验，比如电商行业的大红大紫，社交行业的左右滑动等等，这类有着很明显的行业属性和大众认知，一样是B端设计中应该注意的点。

最经典的案例就是红色绿色的定义区分，在数据产品认知中，绿色代表数据涨了，红色代表数据跌了，比如GMV数据，DAU数据等，红色为重点关注的数据；而在金融行业中，基金股票红色代表涨了，绿色则代表跌了，所以设计的原则一定得是基于不同行业的用户行为习惯。

3. 信息层级

B端产品的信息量一般是很庞大的，尤其是数据、表单、审批等B端产品，涉及到不同角色不同权限的开放等，所以用户能否能一眼看清关键信息，能否帮助用户快速达成目标，是交互层面针对信息层级的设计处理一个重要的环节。

之前很常见B端产品中信息处理的方法就是堆积处理，直接将信息、数据等平铺展示，比如很久之前的某牛商家端后台等老旧系统；现在很多新的B端产品都是以模块化处理方法将信息层级区分，使得模块之间间隔更明显，信息处理的效率更高，宛若C端中的卡片式设计。

4. 设计语言

设计语言自然是B端设计中标题、字号、颜色等规范标准，早些年把B端产品组件化后且开源的自然是阿里老大哥了，当时最早的AntDesign、以及后来的ElementDesign组件库，到现在都被很多中小企业甚至大厂某些产品一直使用中，但随着B端产品的普及和发展，越来越多的企业开始将自己产品沉淀出完善成套的设计语言，并搭建出自己的组件库投入使用了。

5. 用户体验

如何去衡量用户体验是否是好的，最客观来讲当然是通过数据去衡量，而数据往往在C端产品中很常见，不管是体验数据还是表现数据，都是C端产品中最为关注的；然而在B端产品中，更多收集的一般都是业务表现数据，几乎没有衡量用户使用平台的相关数据，大多衡量体验的方法都是依靠问卷反馈的形式；但在B端C化的过程中，用户体验的数据也逐渐被加入到B端产品当中来，成为体验标准的考核之一：比如某个任务完成的时长，报错出现的频次、某某工具的使用率等

6. 视觉设计

最后就是B端C化表现层的设计，包括目前主流的设计趋势如大数据可视化、3D建模、材质质感、Dark模式等都逐渐融入到B端产品中，使得B端产品不再追求简单的“功能优先”和“能用就行”，而是像C端那样追求更美观的视觉，更极致的体验

三、为什么要B端C化

总结下来“B端C化”就是B端产品无论是从功能架构还是视觉体验，越来越趋于人性考虑设计，越来越关注使用者的感受和反馈，因为说白了不管B端产品代替成本高不高，用户是一群专业人士还是普通职员，使用者归根到底还是“人”在使用产品，那么必然会带来体验相关的问题；

所以B端C化会逐渐形成一种趋势，在企业平台资源支持的情况下，会将B端产品的功能放大，追赶市场竞争，逐利行业内卷，在体验和视觉感官上也会更加的人性化，结果自然是产品设计者们更加的卷了（手动狗头）。

无论是现在的B端C化还是将来其他多元的设计趋势，随着市场的竞争和行业内卷，已经反推着设计师们不单单局限于照顾自己的“三分田地”了，无论是之前视觉设计师开始学习3D建模，还是UI设计师尝试接触代码设计，设计师最大的品质就是应该紧跟时代的趋势变化，及时调整补充自己的能力，提升自我的竞争力，才是在当今环境下立足的根本。

文章来源：人人都是产品经理   作者：雨灰


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在《腾讯文档-构建科学有效的色彩系统》这篇文章中，我们阐述了腾讯文档如何升级了新的品牌色，为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知，以及如何构建一个科学有效的调色板。

在设计系统的实际运行中，我们也需要着眼于如何应用调色板，建设协同工作流，并给各个角色提供有关色彩的扩展指导，以达到在腾讯文档中构建一致且有品牌感的数字界面并有效提升效率的目的。

在建设腾讯文档色彩系统的工作中，我们首先构建了一个包含品牌色、灰色、辅助色的调色板，但仅有这个调色板不足以支撑我们流畅、无障碍的协同工作。日常工作中，“这里我用哪个蓝色？”“这里我用哪个灰色？”“开发同学能否快速的变更某些元素的颜色？”等等问题层出不穷，建设系统的协同工作流迫在眉睫。

Chapter 1

——————————

如何建设？

HIG强调不要在APP中使用“硬代码”，即十六进制色值进行编码，但前期我们构建的调色板仅有色值，这种硬代码应用到app中导致项目效率低下，维护也会成本激增。

于是在腾讯文档中，我们开始采用颜色变量（color token）和主题（theme）来管理颜色，颜色变量（color token）基于任务（role）、主题（theme），为UI中的任务指定十六进制代码的色值（hex value），以弭平设计师之间、开发与设计师之间的沟壑，将颜色变量（color token）嵌入设计组件中与开发代码形成联动，便于开发利用程序中的变量来做全局修改，横向提升团队的协作效率。

所谓颜色变量，通俗的意思就是可以将一个颜色按任务用途去抽象，抽象成一个有命名的颜色样式，这个颜色样式就是颜色变量。

在设计或者代码中，可以通过修改这个颜色变量的值来进行全局颜色的更新。例如，我们现在需要给button一个颜色，不要将其写为 #1E6FFF这样的色值，而是将button的颜色指定为命名是Fill-01的颜色变量， 如果有重大版本更新，仅需将颜色变量Fill-01的色值更新，即可实现全局颜色的高效更新。如果在不同的主题下（例如浅色/深色模式）button有不同的颜色表现，颜色变量Fill-01可以在不同主题下，映射不同的十六进制色值。这就是我们建设协同工作流的的基础逻辑。

Chapter 2

——————————

为调色板的基础色值命名

调色板的各个色值（hex value）是最底层的基础样式，我们将色板上的颜色进行规则化命名，以方便后期将其引用到颜色变量中。

腾讯文档包含核心蓝色、蓝灰色、中性灰色及其他辅助色，按照颜色属性，将其命名为：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色阶后缀。

*腾讯文档调色板命名图表

Chapter 3

——————————

定义颜色使用规则

1、 从调色板中选择合适的颜色并测试

从调色板中根据UI中的任务挑选合适的颜色并进行可用性测试，做具体任务中颜色选择的最优解。

例如，我们需要选择一个蓝色作为链接色，作为文本，对比度必须达到4.5:1以上才符合WCAG2.0的可用性标准。经过测试我们选择了primayblue-02作为链接色。

腾讯文档的界面中，灰色系列占主导地位，起着至关重要的作用，为产品界面创造结构、表达边界、建立信息层次。在调色板中，我们选择了两种灰色：中性灰色和蓝灰色，来支撑系统的设计。蓝色系列是腾讯文档产品和体验的主要动作颜色。

同时我们也使用了其他颜色以满足一些冲突性任务（警示等）的颜色使用，这些颜色需要谨慎、有目的地使用。

2 、根据任务定义颜色的使用规则

经常会有设计师问，“这里我能用这个灰色吗？”出现这种问题，根本上还是颜色使用规则定义的不够清晰，含混的口口相传的规则会导致更多的混乱。于是，需要我们根据任务和使用场景把颜色的使用规则清晰的定义。

首先定义在界面中占主导地位的灰色、蓝色的使用规则。

蓝灰色_Grayblue：

在腾讯文档中，蓝灰色与品牌蓝共同建立品牌印象，由此，蓝灰色主要应用于与风格相关的场景。包括：图标色、填充底色及大面积的背景色等。

中性灰色_Gray：

中性灰色主要应用于一些全局系统行为。如：文本、分割线及交互反馈hover、press等场景。

品牌蓝色_Primayblue：

品牌蓝色主要应用于系统中的各种行为，如蓝色图标、button、文本链接等。

其次定义在界面中用于警示、状态提醒的其他颜色的使用规则。

红色_Red：

红色主要应用于系统中需要警示的场景，如红色警示图形、错误文本、红色tag等。

其他颜色：

在腾讯文档中，会针对不同的任务应用不同的颜色，如左滑操作、成功提示、高亮显示等。

品类图标基准色：

在腾讯文档中，不同的品类有不同的基准色。

Chapter 4

——————————

颜色变量的语义化命名

定义了颜色在系统设计中的使用规则后，我们需要根据颜色变量的使用用途对其进行语义化命名。一套好的语义化命名规则需要易于维护且具备可拓展性，如果只是将调色板的色值命名为 blue-01、blue-02... ，语义化的收益并不明显。哪天设计团队需要调整品牌风格，或是苹果又掀起什么新潮流，把所有命名为 blue_x 的变量改为 gradient_serenity， 对于开发来说也是巨大的灾难。

根据 HIG 的建议，语义化命名不应该描述外观或者色值，而是指明这个颜色的任务用途——标签 Labels，分割线 Sepatators 或者填充 Fill。

在思考如何赋予颜色语义化的命名时，设计师也需要用更概括和结构化的视角来看待界面设计，同时也需与开发同学达成一致，使用同样的命名，满足以更好地维护一套收敛和统一的设计语言。

在腾讯文档中，颜色的任务用途定义为为以下几种：背景色 Background、文本色Text、图标色Icon、分割线 Border、透明填充 Transparent fill 、实色填充 Opaque fill 、默认交互反馈 Feedback、语义 Intent。统一使用ultrastrong、strong、medium、weak、ultraweak作为后缀来表达颜色强度。在需要更明确的用途说明的任务中，直接描述其用途，例如：hover，pressed、disabled等。

Chapter 5

——————————

建设团队协同工作流

以上种种，最终目的在于建设团队的协同工作流，将颜色变量（color token）嵌入设计组件中与开发代码形成联动，便于设计利用变量及组件、开发利用程序中的变量来做全局修改，横向提升团队的协作效率。

1、 设计内协同：在Figma中生成颜色变量

在设计系统中，颜色变量属于底层的设计原子，需要将其生成为颜色变量并嵌入到设计组件中，便于设计内部使用。我们将已根据任务用途命名的色值，生成figma中的颜色样式（color style），后续无论是进行组件的设计，还是项目的设计，都可以直接赋予设计元素明确的颜色样式。

2、 设计组件与开发代码联动：利用颜色变量表进行信息同步

我们生成了一个面向内部、外部的颜色变量表，进行颜色变量的说明和信息的同步，沉淀落到实处的资料文档。（此处推荐使用腾讯文档，多人协作实时沟通～）

最终形成了设计组件库与开发组件库的联动，构建了一个协同工作流，横向提升工作效率。

结束语

上篇的调色板设计后，一直在酝酿这篇调色板的实际应用。在设计一个较为复杂、庞大的产品时，提效是永恒的课题。痛过、踩过坑的设计师应该深有感触，沟通的无力、推动的困难都推动着我们发动自己的能量去想办法提效。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

案例1.用户操作时的困惑

相信大家在做设计的时候都遇到过这种情况，一个产品内有多个入口指向同一个界面，这是产品的投机取巧还是另有深意，很多人都对这样的设计有不同的看法。

这样的设计就好像是狡兔三窟，在产品中流量可以从不同的入口进来，到多个不同的出口，也可以从不同的入口进入同一个地方。

有人会觉得如果一个界面中有多个入口指向同一个界面会出现问题：

1.违反了效率、用户预期的原则，会认为页面空间有限，在同一个界面中有多个入口指向一个界面效率变低，而且用户知道后往往就会只从一个入口进入。

2.多个选择会让用户拉高转化的成本，用户在选择的时候会花更多的时间思考有什么区别。

我们来看一个例子，下面德邦app之前的一个版本，目前已经优化了。从截图中我们发现页面上方的查询和寄件都和底部标签单独出来的界面功能重复了，并且我的快件也直接可以展示在首页的下方，我的快件目前可以从首页顶部、首页下方和个人中心3个入口进入查看。

通过这个案例我们发现确实这些板块和功能重复度太高，并且没有区分出场景，这样的设计证实了以上的两个说法，降低用户使用效率和提高选择成本。而且从业务角度看也并没有目标的差别。

但是我们分析问题也要多角度去观察，多个入口进入同一个界面只有缺点没有优点吗？

显然不是，我们再来看几个案例

下方是一个商品评价的卡片，经过我小手的实际测试，发现无论点击这个卡片任何有内容的区域，都会跳转到全部评价的界面，那这样的设计逻辑是否会造成和上面的案例一样的问题呢？答案是，不会。

这里的设计逻辑并不是和沙面那里的场景那么单一，而是用户在面临不同需求场景的时候可以有选择。

不知道大家有没有发现一个问题，在上面德邦案例的时候，你会对两个入口有疑问，但是在评价卡片的时候并没有，这个卡片包含了4种不同的场景：

1.我想看看有哪些好评、哪些差评 

2.几个不同标签的用户都是怎么说 

3.下面用户的实拍到底是不是真实的 

4.还有没有更多类似真实用户的使用评价。

所以即便最终到了一个界面，对于用户来说也是从独立的出发点开始的，而再回过头看上面案例，你会发现，我就是要寄东西，这里有两个入口，怎么选。

而且，考拉这里其实还做了从不同内容点进去的一个区分。

再来看个案例，贝壳的地图找房，在首页中有两个入口，导航栏一个，分类中一个，这里出现重复会造成一开始说的问题吗？首先我们看到贝壳的业务很多，以至于在这个分类中居然还需要通过滚动指示器来展示剩余内容，大家也可以思考一下，在这个界面中，会不会出现两个地图找房不同的场景出发点呢？我个人觉得其实是可以商榷的，首先地图找房在房产app中是很核心高频的一个功能，他的属性是“工具”。

所以我觉得他之所以在卡片中再放一个地图找房是3个原因

第一个是导航栏的找房肯定不能动，他是一个全局的入口，即使页面滚动也可以随时点击到，即便要撤一个，也肯定要撤下方卡片分类中的。

第二个是卡片分类中的图标入口是都具备工具属性的，那首页上面部分就分为了：搜索、业务分类、工具这三块。所以用户看到这些工具属性也会联想到通过地图去找房。而且这些多色彩的图标对于新进入的用户是比较吸引注意力的，所以很有可能用户看不到右上角的地图找房（可以参考古腾堡图表的原则）。

第三点是可能右上角的地图不太能清晰表达这个图标的具体功能，所以将“地图找房”四个字显示全。

但这些都有一些主观因素在里面，如果真的去掉卡片中的，我觉得可能影响也并不是很大。有小伙伴可能想说是为了分流，但是分流的目前主要是让流量流到他应该去的地方产生实际价值，除了以上的3个原因，好像确实有点重复了。

再来看一个例子，小鹿茶app。

首页的现在下单和底部菜单标签都是到同一个界面，那为什么要重复呢？这里其实考虑更多的他并不想让用户进来就直接去购买，为什么不直接购买呢？应该是想要建立自己的品牌人设、满足更多的消费场景和增值业务，比如给别人点奶茶、周边的杯子跟合作商品推销、最新的奶茶的推荐。

如果只有菜单，产品也会显得更工具化，很难突出自己的品牌，对业务增长没有太大的帮助。有同学要说，那这个界面只是产品的“一厢情愿”，我就只要点奶茶就可以了，多个入口只会给我带来困扰。所以他这里的设计逻辑是在用户打开app的时候首先定位的是菜单，而不是首页。

所以，到底多个入入口进入同一目标我们还是要看不同的场景和目标的。如果既没有业务目标做支撑，又没有用户场景的变化，那么这个重复的入口就是鸡肋的。

最后留一个小思考题：网易云音乐的“歌单”在首页上也重复了，大家知道这里为什么他要做成重复入口吗？ 

案例2.用户使用中的不满

一个优秀的产品或者说一个合格的产品，能给用户带来愉悦的体验。何为体验，用大白话来说就是用的舒服、自然、高效率。

再有一个底线就是不要让用户产生由产品带来的负面情绪，例如产品出错了却不告知用户解决方法、用户出错了没有办法及时帮助纠正、高危操作没有二次确认等等，根据负面情绪的严重程度几乎就可以直接让部分用户流失。

很不幸的是我就遇到了这样的体验，当时正在给同学们布置一些作业练习，体验一些产品的优缺点并给出解决方法。我也下载了这款文玩类的App，体验了极速捡漏这个功能模块。

捡漏：在文玩圈的一句行话，意思就是用很便宜的价格买到很值钱的古玩，而卖家却不知情，是一种可遇不可求的行为，所以寓意就是比较难得、走好运了。

进入直播间，商家在卖力吆喝，页面底部有加一手的按钮，就是类似于拍卖，价高者得。于是我就抱着试一试的心态点了加一手按钮，因为我预期是产品会再次向我确认是否要加价，结果是居然加价成功了，发生了什么？最后竞拍结束也没有人继续加价了。

实际场景中用户可能误操作不小心点了按钮，这样的场景和情况是非常多的，即便不是误操作，给一个二次确认的对话框也可以避免这样的尴尬状况，因为用户就喜欢在产品中点来点去，然而你在这里就像埋了一颗地雷。

如果到这里就结束了，那其实我也感觉没必要去吐槽，问题在于当我拍下还没付款，直播间的商家就开始喊我的名字：xx大哥恭喜你拍到了我们的产品，可以去付款了。连续播报了几十遍，我尴尬的直接退出了后台，这种感觉就像是一群观众看着一个被骗的小白一样，当我过10分钟后打开系统提示商品流拍了，并且累积了违约积分。

？？？

到这里，可能会有人说，你自己拍了的又不付款，当然要惩罚你了。

于是我还是认真的去研究了一下，发现极速捡漏和竞拍并不是同样的规则。该产品和竞品其实都有竞拍板块，在竞拍板块都会有需要用户确认的操作，并在操作下方给出拍卖规则，显示出价即表示同意拍卖规则。

但是该产品极速捡漏的板块并没有这样的说明，既然没有提前展示这样的说明和约定，用户就不知道有这样的规则，我拿了竞品一对比，其实在直播带货的场景下，这个出价流程还是不同的，双方其实都没有给规则说明，但竞品还是给了一个出价选择后再出价的步骤。

最后我甚至被商家拉黑了，不过还给我一个投诉商家的入口

我当时的想法：

1.如果因为误操作让用户付出这么大代价的话成本就太高了。让用户点击是否就等于用户同意？

2.请先告知我约定与协议的内容，单方面在我不知情的情况下对产品进行操作后，通知扣我违约积分，这样就有点“霸道”了。

3.平台对商家和消费者的权益是如何平衡的，文玩行业和互联网结合的难点在哪里。

3.线下文玩圈的一些不成文行规，导致新人入圈后产生的冲突。

于是我就想对此说说我的看法

1.交易是产品平台其中的一个功能属性

交易是产品平台其中的一个功能属性，需要优先满足产品对用户价值，其次再谈交易的合理性。在这个流程中，面对用户很有可能遇到的误操作行为以及需要让用户去下单支付成本，我们必须提前告知用户。在尼尔森可用性原则中我们也发现了，如果用户不小心操作失误，那么我们尽可能减少这些因为用户犯错带来的成本，同时在用户犯错之前就要明显告知用户，将风险控制、前置。

所以，你在注册的时候、登录的时候，产品一定会让你同意一份用户协议，告知你我们要保存你的数据和一些跟你相关的信息，如果你不同意，那就无法继续体验产品。

这是一种契约。

同理，如果你想让用户在这个产品中去参与拍卖，在进入这个板块之前或者用户点击按钮之后，也需要让用户明确这个操作带来的风险是什么，取得用户的同意。而不是直接让用户加价成功，导致用户不明所以的被扣违约积分、被商家拉黑，这就和你去泰国，在街头你朋友拍了一张你和一个抱着蜥蜴的人的照片，结果别人来问你收钱是一个道理。

对于正常线下拍卖的流程，举办方也会对参与拍卖的人员进行相关规则、流程的告知，并且将风险、问题都提前让客户进行协议确认。

所以，在产品中的交易，必须先满足用户与产品信息之间的对称关系，保持信息的透明和契约公正，规则、约束、条件是用户使用你产品的前提和体验反馈的衡量标准之一。

2.对于商家和产品的价值

商家希望有更多的流量来曝光商品，捡漏商品的低价可以快速吸引一大批用户，比如8块钱的一个木头核桃的雕刻挂件等，产品通过营造抢购、限时的氛围，吸引用户下单，并且降低用户参与的门槛。

那么，直接加价成功是一个好的降低门槛的策略吗？我觉得并不是，降低门槛并不意味着就是直接拍到，而是需要提高用户对产品的信任度，这个极速捡漏的模块的目标用户几乎都是小白用户，因为资深的玩家看不上、更不会买，有一定经验的玩家也看的出好坏，明白它的价值。所以面对这些没有了解过文玩产品的小白玩家来说，内心是谨慎的。

可能有人会想，这几块钱、十几块钱的东西还需要考虑吗？当然在这个场景中，从众心理是很明显的，大家都觉得很便宜，但就是没人拍。这都几块钱捡漏了怎么都没人要，大部分人都觉得这么便宜东西肯定不咋样，运费是不是贵的离谱、有没有托在背后跟你抬价呢？大家都不拍我也观望。越多人围观，越难促成交易。

还有一种可能就是我卖不卖的出去东西，并不重要，重要的是有人来看了，这些边角料都是用来回馈直播间粉丝的，就是一个窗口，真正有利润的东西在橱窗里。所以这里的捡漏只是一个引流的噱头。

人总是对太轻易得到的东西不珍惜，更何况是几块钱的小玩意儿。所以针对直接拍下这个交互，个人认为是不妥的，无论是上面任何一种情况，都没有办法让降低门槛，甚至通过这种“小聪明”反而会让用户更加不信任产品和用户。

不信任产品是大。尤其是作为一家平台来说，虚假交易、以次充好、滥竽充数等等行为是致命的。

3.文玩的价值

我其实有玩过一段时间文玩，受我老丈人的影响，有一段时间喜欢玩手串、玉什么的。经常也会在某音去刷一些鉴宝类的视频，很有意思。

文玩它的价值在于品相、稀有度、盘玩程度、大众接受度、历史背景还有工艺等等。所以它并不是一个在每个人心中同等效用的商品，同样一块玉，他的种水一般，但是花纹很独特，买卖双方其实心理的价值预期会相差非常多，它就不像买电子产品一样价格那么透明容易计算。

有的人玩这些就是觉得命里该有它，它能给我带来财、运，帮我辟邪，看的是眼缘。而不是路边上一块无用的石头，可以随意拾取丢弃。那么换句话说，如果在用户下单的时候，我们利用一些情感化的文案，让用户喜欢上这款文玩，是不是也可以大概率的促进交易呢？

4.文玩圈的行规

我相信很多玩文玩的小伙伴都知道，在文玩圈有一些不成文的行规。也或许就是因为这些行规出现到了线上产品中。

1.还价意味着出价，出价意味着买下

在文玩圈，你不想买就不要还价。如果卖家同意了你的还价，那你就必须买。这代表着你个人的信誉和道德品质。

所以文玩圈和互联网的用户之前有许多的鸿沟需要一步一步建设桥梁，不能单纯的以线下圈子内的行规来要求刚接触这个圈子的互联网用户，这需要大家一起努力和营造起一个良好的文玩圈的文化和规则，而不是直接生搬硬套，提高这个门槛。

2.不要打听别人的成本

文玩没有实际的成本，可能别人花10块钱淘到的价值1万块的东西，也可能别人花了巨资看走了眼。所以你知道了成本对谁都没好处，别人也不会告诉你。

3.别人在交易的时候保持沉默

文玩在每个人心中的价值不同，所以货币价值也不同，当别人在询价还价的时候，不管怎样我们都不要去表明自己的看法和想法。

当然还有其他的规则就不一一叙述了，针对这3条，其实在互联网的产品中是会有冲突存在的。例如你买了某个文玩，你一拍下，别人就说这个根本不值这个价钱。还有你出价了但是又不想买了，这些原本在文玩圈子中不允许的规则，在互联网上去要求用户着实有点困难，因为互联网上的交易并不一定所见即所得，可能展示的是这样，收到货又是另一个东西。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

致数据可视化设计师-设备篇详解

各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

整个合辑一共有10篇文章，分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章，具体的详细的展开来讲一讲可视化大屏设计的知识点。（我命名为可视化设计十要素）

同时也会包含一些工作中的同学们问我的一些问题以及我搜集的一些问题，将会以问答的形式去给大家讲一讲，如有不对的地方，还请大家指出，我们一起探讨进步！

文章较长，请广大读者仔细阅读，基本涵盖：设备信息，分辨率尺寸，大屏适配，投屏事项，掌握本文可应对日常可视化设计设备方面的知识。

LED屏幕

政府大屏主要以点间距去区分屏幕的精细度，点间距越小，造价约昂贵；面积越大越整体，造价越高。离屏幕越近颗粒感越强，设计效果也就越不清晰，LED显示屏表面不平整是导致LED显示屏图像失真的主要原因。LED显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍：按照不同点间距进行分类，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（间距越小，图像越清晰，价格也越高，一般政府led屏基本都在P1.25-P6之间)。

最佳视距=像素间距/（0.3~0.8），这是一个近似范围。如LED显示屏P16mm，最佳视距为20~54米。

液晶拼接屏

拼接屏相比于点间距比较小的LED屏，价格方面会更便宜一点，拼接屏设计时最主要就是拼缝的处理，注意拼缝，设计时非必要情况下，都要跳过拼缝，尤其是“圆”这个造型。

拼接屏：46寸，55寸  物理分辨率：1920*N 1080*N（n代表屏幕数量），1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙；企业常用（1.7mm 和3.5mm）

大屏拼接缝隙：设计时应尽量不要跨屏去设计，会使画面交叉，不重叠，尤其是圆形。

大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成N块后分配给N个视频显示单元，完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要，输出信号数量等于显示单元数量。

视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备，一般来说输入信号数量要大于输出信号数量。（我们想在9块显示器上同时监控100个摄像头传来的信号，就用矩阵来实现即可）

视频矩阵是指通过阵列切换的方法将m路视频信号任意输出至n路监控设备上的电子装置，一般情况下矩阵的输入大于输出即m>n。有一些视频矩阵也带有音频切换功能，能将视频和音频信号进行同步切换，这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备：监控摄像机、高速球、画面处理器等很多个设备，显示终端一般监视器，电视墙，拼接屏等（通常视频矩阵输入很多，一般几十路到几千路视频，输出比较少一般2-128个显示器；例如64进8出，128进16出，512进32出，1024进48出等）。

总结：矩阵只能负责信号的切换，不能处理，不能做效果。大屏拼接处理器功能十分强大，具备矩阵功能的同时，还可以实现任意开窗、漫游、叠加、场景保存与轮换。

液晶拼接屏的优势 - 拼接处理器预设场景

4*2大屏展示端，我们通过控制端，借由拼接处理器可以对大屏进行随意开窗，漫游，叠加，画中画等效果。在控制端拖动布局，大屏会随之改变布局，非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结，或者想展示：开窗，漫游，叠加，画中画等效果，毫无疑问你们应该选择拼接处理器，这比传统投屏方式更合适，更没有比例不对的困扰。

预设场景一

把控制端的分屏进行编号，接下来移动控制端对应的编号区块，就可以对大屏进行重新布局，图中展示的正是我们的预设正常场景。场景为居中布局，左右两侧为图表展示。

预设场景二：任意窗口布局

对控制端进行随机布局，将主视觉模块移动到左侧四块屏幕，图表都集中在右侧，由此我们就由预设场景的居中布局变成了左右布局，左侧为主视觉。

预设场景三：任意窗口漫游

可以随意的关闭大屏某个模块的漫游，通过控制端进行屏幕的显示以及不显示。

预设场景四：任意窗口平移

画面的任何一个模块都是可以进行平移操作的，我们将模块一和模块五可以平移拖拽到任何一个位置。

预设场景五：任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处，还可以控制模块置顶和置底，非常灵活。

WEB端大屏

基于web网页端的展示方式，通过在web开发，有需要时会投屏到大屏上去展示。设备比例一定不能差距过大，比如16:9的投屏到32:9的大屏就不是合适，解决方案可以是外接一块1920的显示器即可。

此处要注意web端演示时，记得全屏显示，浏览器边框滑动条等可以不考虑，前端会做相应的浏览器细节考虑，设计按正常分辨率走即可。

触摸屏

触摸屏（Touch Panel）又称为“触控屏”、“触控面板”、“触控台“，是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时，屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏，原理等同于ipad控制，只是载体不同。

设计规范以及按键反馈等交互体验与ipad类似。

滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等，通过特殊设计的机械滑轨控制装置，结合高清液晶拼接幕墙，实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息，包括图片、文字、视频等，是一种全新的互动展示形式，可与触摸同时使用。

虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者LED大屏显示屏动态/静态三维显示：智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型，这是一种高科技的模型操作员通过程序，可以随意调整沙盘的尺寸、规划区域、区域布置，快速展示多种全新的创意。

具有三维显示效果，并可以从不同角度观察创意模型，筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果，实体沙盘为底，虚拟沙盘做效果叠加。

分辨率：物理实际分辨率

Q：原本设计尺寸是1920*1080，使用场景是PC端，同时在大屏中展示，尺寸为3840*1080，该如何适配？

A：首先我们需要了解适配最主要的痛点就是：灵活，复用性高，可延展。

围绕这几个点我们可以通过模块化开发去做，将每个模块单独开发。我们设计师做这种需求之前，就需要提前去构思，在设计各模块时，尽量使用可扩展和可自适应的图形，这样面对适配的时候我们可以通过移动，缩放这些模块，来完成适配。尽量避免二次设计以及开发，提升时间成本。

图形放大适配

图形位移适配

Q：如果是16:9适配非32:9是否也是这么去适配的？如果是特殊的形状或比例该怎么适配？

A：我们适配一定要记住灵活，减少工作量这些原则，如果不遵循这些原则，那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏，如何用开发一套的时间去适配两个甚至是多个终端，这是我们需要注意的。当然考虑到一些实际情况，会有一定程度上的修改，但是一定是要从节省工作量去出发的。

场景一：拼接屏分辨率计算，已知某项目设备分辨率为宽高4*2拼接屏，设计稿我们该如何去定义分辨率？分辨率又是多大？

从命题我们可以看到4*2的拼接屏，我们可以通过一块屏幕为1920*1080去计算，那么通过计算分辨率应该是1920*4 &1080*2，也就是7680*2160，这样就计算出我们的分辨率了。

场景二：LED屏分辨率计算，已知某项目LED屏幕物理尺寸为宽15米，高4米，设备分辨率未知（可以支持4K或者2K输出），那么如何去制定分辨率？

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目，那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一：屏幕支持4K输出，既然支持4K输出，保证画面输出的清晰我们可以将设备的高度设定为2160

此场景下公式为：15/4=X/2160     X=8100    那么可以大概得出宽度大概为8100像素（只是我们通过计算大概得出来的）

可能二：屏幕支持2K输出

此场景下公式为：15/4=X/1080     X=4050  

重点来了，不要以为这样就结束了，我一直强调的可视化设计师为什么一定要在现场，为的就是方便各种测试。刚才我们只是通过计算得出的大概数值，此时我们可以在纸上画一个正方形，并投到设备上，如图。

• 结果一：如果正方形比例不变，设计尺寸无限接近于大屏实际比例；

• 结果二：如果正方形比例被拉伸，设计尺寸小于大屏实际尺寸；

• 结果三：如果正方形比例被压缩，设计尺寸大于大屏实际尺寸。

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了，通过这样的方式去测试设备大概的分辨率的大小比例，在我们产出效果图之后，也可以投射设计图的方式看看屏幕是否是完美适配，这种方法可以在未开发之前，尽可能确定屏幕对设计图的影响，从而避免对开发造成大规模修改。

注意：这样做也只是在不知道设备分辨率的情况下，去大概计算设备分辨率，仅供参考！

电脑直接投屏

使用场景：会议室，展厅等

等比例投屏，投屏电脑投到2*2大屏（4K）

投屏电脑支持输出4K分辨率，投屏电脑分辨率以3840*2160作为设计，投到4K拼接屏上，大屏会完美展示，并且画面非常清晰。

投屏电脑支持输出2K分辨率，投屏电脑分辨率以1920*1080作为设计，投到4K拼接屏上，只会以1920*1080进行输出，因为输出像素只能支持2K，也只是1920*1080的放大。

此处需要了解两个概念：输出像素和显示像素，输出像素指的的是投屏电脑的最大支持分辨率，显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计（就是以大屏尺寸为主），但是也要看输出设备的像素大小。

硬件投屏本地运行

使用场景：科技展厅，以及一些带主机的设备。

此种情况，一般我们的大屏会自带主机，大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示，那么我们直接就可以通过显示器的尺寸去做设计，这样就是大屏的设计尺寸。

一般这种靠硬件的投射，都是在拼接处理器的处理下，将多个屏幕拼合成一个大的显示器，再通过拼控系统（硬件投屏）进行输出。

一般我们可以将我们大屏的（UE4或者U3D开发）应用程序打包，打包成一个后缀为.exe的应用程序，在大屏电脑上直接点击，程序就可以在大屏上完美的跑起来，也不需要去进行电脑投射大屏。

控制端操控大屏

如果通过控制端去控制大屏，那么投射设备就可以通过多种方式去展示了，可以是手机，平板，触摸屏，手势控制，体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了（比如750*1334，2048*1536），设计尺寸就是我们大屏本身的分辨率就可以了。

多主机多信号投屏

此种情况主要使用场景：屏幕宽度非常高，并且内容可以分很多模块展示，模块彼此之间不受影响独立展示，这种情况下我们就可以通过此种方式去投屏。

通过多个主机分别去投射大屏的同等大小区域，比如图中的场景模块被我分成了四等份，我们就可以通过四台主机去分别投射四个模块，形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考，四台主机那么整体宽度就是1920*4=7680，高度就是1080（如果设备支持4k输出，那么提升相应的设备尺寸*2就可以了）。

不同比例投屏及解决方案

Q：如果遇到一个设备是16:9，投屏到一个20:3比例的大屏幕， 那我设计尺寸以16:9，还是20:3？

A：我们要记住，如果面对的是正常比例投屏到非等比的大屏，我们需要遵守的规范一定是：一切以大屏展示为主。所以我们设计尺寸一定是按照20:3来设计的，大屏展示正常才是我们的唯一标准，投屏电脑可能会出现的问题，我们只能妥协（投屏电脑可能只能展示很小的一部分，但也是没有办法的）

那么我们遇到这种是否就没有办法了呢？在这阿勇给大家提供了三种解决办法，在实际工作中，我也遇到过这种问题，所以在这给大家分享一下。

方案一：外接显示器（外接多个显示器，一般主机可以另外外接四个显示器，这样就可以解决投屏电脑显示不全的问题了）

方案二：采用拼控系统，而不是用纯粹的设备投屏（拼控系统完美解决了尺寸不一致的难点）

方案三：设计两稿，16:9，20:3我们都去做设计（做两套系统，相当于做的适配）

Q：请教大家一个问题，电脑的分辨率是3840*2160，单个大屏的分辨率是1920*1080，拼9*6的大屏，设计尺寸该设置多少啊？这样设计尺寸会不会太大了，如何优化这个设计稿尺寸？

A：前面的文章我们已经介绍过拼接屏的尺寸的问题，这个问题的解答：1920*9/1080*6 ，这个就是设计分辨率，通过计算得出，最终设计稿尺寸为17280*6480。可以看出设计分辨率确实太大了，设计的时候如何去优化设计尺寸呢？

通过命题我们可以看出电脑分辨率是支持4K的，就是说输出分辨率和显示分辨率我们都是可以上4K的，而4K的分辨率一般会做3840*2160，再结合设计稿尺寸17280*6480，可以将整个效果图尺寸缩小三倍，也就5760*2160。设计可以按照这个分辨率去出图，最终交付给开发的就是切三倍图，并提示开发是缩小三倍做的。

总结：不管在面对什么尺寸的设计，都要记住，万变不离其中，一切以大屏完美展示为准则，所有的一切都是要在大屏上观看，为了完美展示，投屏电脑，设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结，不知道大家对于数据可视化大屏设计是否有了新的认识，数据可视化对于设备的尺寸，设备的信息，以及投屏注意事项，都要有更多的了解才可以。下图就是总结本篇文章的知识点。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

念起

作为一名UI设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。我结合在近期的一些项目中对于HSB色彩模式的应用，与大家分享一些结合HSB（HSV）色彩模式帮助我们进行配色的理论和技巧。也欢迎大家一起讨论，共同进步。

色彩模式有哪些？

我们生活中借助观看而感觉到的“色彩”，可分为光加上颜色之后所透出的“透出色”，以及光照射到物体上反射出的“反射色”。

透过色是以“加色混合”的方式，由红、绿、蓝，共三色混合，表现出各种的颜色，我们的计算机屏幕就使用这种方式表现颜色。这种色彩表现方式，称为RGB色彩。

▲图1 《设计入门教室-色彩设计的原理》

物体色彩的反射色，是用画具或染料、油墨等“色材”来表现颜色，印刷品基本是由青、洋红、黄、黑四种油墨相互组合而成，所有的颜色皆以“减色混合”的方式表现，这种方式称为CMYK色彩。

RGB和CMYK两大色彩模式是最重要和最基础的。RGB更是与我们的工作密不可分。可是，在实际工作中我们往往很少直接通过RGB模式进行调色。

简单聊聊HSB色彩模式

1.HSB是什么？

「这是什么颜色？鲜不鲜艳？很亮还是很暗？」当我们看到一个颜色时，往往心中都会闪现这三个问题。

事实上，人类对于色彩的第一个感知往往是从色相（Hue）开始，即红色橙黄色绿色青色蓝色紫中的一个，然后是它的深浅度。

HSB模式对应的媒介是人眼，在选择色彩这件事上，HSB使用了更贴近人类感官直觉的方式来描述色彩，它把颜色分为色相、饱和度、明度三个因素（将我们人脑的“深浅”概念扩展为饱和度和明度）。

H—色相/色调：颜色的相貌，颜色的调性，在标准色轮上，色相是按位置度量的，取值在0—360度之间（黑色与白色无色相）。

▲图2 网络图片-圆形色相环

S—表示饱和度/纯度：颜色的纯度，取值在0—100之间，饱和度高色彩较艳丽。饱和度低色彩就接近灰色。

B—表示明度/亮度：颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。

工作中，我们常用的设计软件ps、 Sketch都是通过拾色器帮助我们选择需要的颜色。

▲图3 软件拾色器截图

HSB模式，可以完美固定HSB中的某一个参数，只对其他两个参数做改变或者只改动其中的一个参数，这一点，完全符合人的色彩直觉，也只有HSB能做到，而RGB、CMYK都是牵一发动全身的节奏。

通过HSB模式，我们可以在已有颜色的基础上，进行饱和度、明度的微调。以及选定主体色之后，根据需要，通过数值的加减改变色相，选取合适的颜色（互补色为180°、对比色为120°到150°、类似色为90°、邻近色为60°、同位色为15°。）

2.在设计中如何运用HSB色彩模式

通过上述对HSB的原理、特点简单介绍后，相信大家对其都有了基本的了解。以下我结合在工作中的几个案例来说明HSB在设计中是如何实际应用。

举个例子：如果我们在设计一个页面时，除主色之外我们需要一个近似色，就可以运用HSB色彩模式。

通过图片我们可以看出右侧的颜色整体视觉效果感觉更加和谐、舒适。在界面设计中我们常会遇到以颜色对同一种类型的不同状态进行区分，比如背景，按钮等。

结合上述的例子，以及饱和度与明度的变化规律：

（在不改变色相的情况下）

HSB色彩模式在项目中的实际应用

1.爆款、预约详情页色卡库

在去年的vivo游戏中心爆款、预约详情页的改版优化中，都运用了HSB色彩模式。使不同游戏可以根据头部氛围图配置出3个相同色相值的近似色并运用到页面中。保证色彩搭配有规律可行，并且展示效果在基准线之上。

系统统一从头部氛围图吸取、确定颜色后，通过调整饱和度和明度值（色值不变），即可得到一套色卡。

▲图4 vivo游戏中心预约详情页设计规范

2.联运深色模式中的应用

在双系统的深色模式适配要点中有提到“高饱和的颜色在深色的背景下容易产生视觉抖动，从而导致人眼疲劳”，在深色模式下我们应当选择更浅的颜色以达到更好的可读性。

我通过结合Material Design以及Developer深色模式适配规范中的色彩示例来简单说明，怎样借助HSB，来达到深色模式色彩科学合理的适配。

▲图5 Material Design深色模式适配规范

▲图6 Developer深色模式适配规范

通过对两种规范的学习以及对比，可以看出Material Design的规范相对而言更加直观和系统（手把手教你），Developer的适配则比较微妙（只可意会），没有明确的说明方法或者规律。但Developer示例中的适配则更加注重视觉表达以及色彩的一致性，带给人的视觉感受更加的舒适和谐。       

重点分析Developer深色适配中的配色示例中，通过将Developer给出的深色模式适配示例的色值转换为HSB之后，发现其HSB的数值变化是有一定规律的，规律基本符合：

BUT：

在根据Developer的深色模式颜色适配的示例总结其规律的过程中，对于数值的变化，产生了一些疑惑：

直到了解到：「每个颜色都有其专属的“感知明度”，也就是亮度」

将色相环“去色”后，可以明显看出：

每一种颜色（色相），都有着独特的“感知明度”，在S、B相同的情况下，黄，青，洋红的颜色会让人感觉比较亮，结合这点再结合Developer深色模式的适配示例以及得到的基础规律后。可以得出：

将上述我们所得的“HSB配色一般规律”运用在vivo游戏中心联运深色模式主色的推导，以及vivo游戏中心爆款详情页自动吸色系统优化中，使得页面的阅读体验更加良好，整体配色和谐舒适。

▲图7 vivo游戏中心、联运游戏爆款详情页

写在最后的话

HSB在设计工作中的应用当然不止上面讲的这些，比如我们经常碰到的页面中为了区分不同层级的文字，会给予文字不同灰度的颜色（最常见的#000000、#333333、#666666、#999999）也是应用了HSB模式，当我们所要区分的层级多于四种时，就不需要在色板里纠结了，只要按照上述的规律，以不同明度的变化就可以了。

在我寻找资料的过程中，也看到很多通过色相，饱和度，明度的一致或者对比等方式得到协调优秀配色的方法。这些都可以通过方法和HSB模式的结合，快速方便准确帮我们找到合适的颜色。

▲图8 网络图片-色相环配色图

在日常设计中，可以通过个人对色彩的感知与把握选取一个颜色，再通过HSB快速的选择相应的色板，运用在页面配色中。到这里关于HSB色彩模式在设计中的应用就全部介绍完成了，如果你阅读完也有所收获，不要忘了点赞哟~

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务