在大数据盛行的今天，人们不仅仅讲究以事实说话，更愿意以数据讲话。数据作为结果的直接衡量指标，更真实、也更具有说服力，那如何直观的展示数据，帮助决策者做出正确决策或行动，发挥数据最大的价值？可视化数据大屏应运而生，让我们一起来谈谈吧

一、可视化数据大屏是什么？

说到数据大屏的时候，我们要先了解一下数据可视化，那什么叫做数据可视化呢？比较专业的解释是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的一种理论、方法和技术，它为我们研究、处理、分析数据提供了理论依据。

我们人的大脑处理视觉信息的速度比文字快几万倍，将抽象的数据转化成图表、图形能更快速帮助我们更快理解数据中的含义，趋势以及相关性。

简单来说，可视化数据大屏，将我们难以理解的抽象的数据概念以图形化的形式展现，方便我们快速理解这些数据的含义，也方便这些重要的信息在最短的时间内传给最重要的人。

数据大屏可分为信息展示类、数据分析类、监控预警类，多展示酷炫的效果，数据之间有层次区分，好的数据大屏是布局、色彩、图表、动效的综合运用。

二、可视化数据优势是什么？

数据可视化，让很多员工从繁琐复杂的数据工作中解脱过来，那它到底有什么优点呢？

优点一：解锁大数据内容的关键

近几年来，国家的相关法律政策相继出台，大数据企业的技术研发水平不断提高，促使大数据行业市场规模从 2014 年的 212.5 亿元增长至 2020 年的 548.5 亿元，数据可视化对于公司发现解锁数据潜在价值意义重大。

有研究表明，人类可以用比处理文字快60000倍的速度来处理图像，可视化能直观呈现大量数据，以前企业员工检测到数据进行汇总分析需要数小时，可视化通过特定的格式来呈现大量数据几乎不费时间。

优点二：数据可视化加快了决策过程

视觉形式的数据更易理解，数据可视化能快速显示操作、运营与结果之间的关系。企业管理不是凭空作决定，正确的方式应该是，依据所获得的数据信息来做辅助分析，数据可视化内容能让管理人员和决策者清楚看清数据趋势，快速制定及消化关键指标。

比如当上图科学决策平台的网络总数特别时多，决策者可以快速调取相关数据找出异常原因 —— 是上次活动运营推广到位，故增加了很多用户？也就是决策者可以通过异常数据快速钻取数据，用来解释正在发挥作用的运营条件或决策与所遇到的指标之间的关系。

优点三：可视化数据便于沟通及被关注

根据Aberdeen报告收集的信息，利用数据可视化的组织能够及时访问信息的可能性比其他组织高28％。数据可视化有助于我们以客户和投资者能理解的方式向他们提供信息，它比PPT更容易让人理解，也能吸引那些对企业内容运作了解甚少的人。

比如上方的区域经济地图，通过地图与定位街道区域内容、颜色结合的展示样式，很容易看出各街道产值、税收等，也更有场景感；居民可支配收入版块，通过颜色区分、大小圆形、时间线来直观展示居民收入变化内容，形象且清晰。

三、制作可视化数据大屏的常用工具有哪些？

制作数据可视化的工具有很多，最常见的就是Excel工具，非常容易上手，基本人人都会，操作简单，但它的缺点也很明显，没什么特色，静态数据展示过于死板，样式老旧。第二类是Python等编程类工具，这类优点是码数据速度快，自动获取，看起来很高端，但缺点也很明显，如：学习成本高、学习比较困难、很难比较熟练的掌握等。

第三类就是SAAS类可视化工具，这类工具容易上手，操作简单、动态数据自动获取、动态效果无敌炫酷，不需要下载安装，缺点就是部分渲染组件比较耗费电脑配置。那我们今天就来推荐几款常用的SAAS工具。

1.网易有数

网易有数大数据是一个企业级的大屏大数据可视化展示系统平台，具有深度的交互式数据探索。它有丰富的使用场景，支持数据接入、数据导入处理、数据分析生成报告等，用户无需编程，简单拖拽即可生成可视化图表。缺点是数据探索性分析能力有限。

网易有数可视化实战案例——业务安全大屏。通过大屏进行业务安全监控，清晰的展示各业务分布要点的数据情况，顶部实时更新各重要区域数据情况，销量对比、售后情况，产品产比，以及用户分布也有清晰的直观展示。

2.FineBI

FineBI作为一款商业智能（BI）软件，拥有丰富的报表编辑和数据分析功能，同时它也支持可视化大屏的编辑。决策报表采用了画布式操作界面，通过拖拉拽可以想成一个强大的、全面的可视化大屏，能实现在一个页面整合不同的数据，完美的展示各类业务指标，实现数据多维度分析。缺点是大屏组件不够丰富，开发拓展性不强，不支持云端托管等。

帆软可视化实战案例——银行大屏驾驶舱。通过大屏直观展示银行存款、贷款数据，业务办理详情等，图表形式展示内部管理、外部管理情况，分行放贷统计情况等，便于数据管理查看及决策制定参考。

3.阿里Data V

Data V是阿里云内部的可视化大屏开发平台，同时面向开发者和零基础用户，支持大屏图形化编辑和在线编程开发，可帮助非专业的工程师通过图形化的界面搭建专业水准的可视化应用。

它有海量行业模板，DataV数据可视化设计团队会定期从大量真实项目中寻找优质场景，制作为模板，涵盖媒体、零售、工业、电商、金融、防疫、气象等多个行业，为用户提供会议展览、业务监控、风险预警、地理信息分析等各种设计参考。

产品功能方面，它有丰富的可视化编辑工具，提供多种业务模块级的非图表组件，只要通过拖拉拽便可创造出专业的可视化应用，另外丰富的组件库与模板库包含多种场景模板，简单修改即可快速投入使用。智能化工具拥有主题配色，一键美化、大屏智能生成等工具，快速解决在搭建可视化应用时遇到的整体样式配置困难。专业的地理信息可视化，支持地理轨迹、飞线、热力分布、3D地球等效果，同时数据驱动三维世界生成，低代码交互配置将复杂逻辑可视化呈现，整体效果更炫酷。它还有灵活开放的部署方式，支持多种发布方式，如：链接分享、二维码发布；支持自定义组件接入；支持云上部署，也支持线上开发。

DataV数据可视化实战案例——智慧工厂生产控制大屏，综合呈现了每个生产阶段的生产状态参数，将整个车间的情况汇总到一个调度控制中心，方便管理人员了解各阶段的工作情况。

4.EasyV 数据平台

袋鼠云数据可视化EAsyV，拥有业内领先的数据可视化大屏故事策划、视觉设计、前端和数据开发技术实力，尤其擅长3D模型展示，基于GIS地理信息展示等。它里面有丰富的组件，样式制作精美，支持多种不同类型的数据导入，还有动态面板和交互功能，让大屏看起来更灵动。

EasyV数据可视化实战案例——宁波图书馆可视化平台。大屏包含人流分析监测、读者画像分析、借阅行为洞察等，从多角度全面的帮助用户及时把握场馆运营效果，为其提供馆内建设与活动运营的监控分析服务。

四、如何设计出好的可视化大屏？

深色的大屏设计能让其数据显示更明显，也方便营造科技感，另外大屏设计图表文字的颜色要统一，避免出挑的内容分散用户注意力，使用图片或者是动态的背景，也可以让大屏更有氛围感。那除了这些，好的大屏还有哪些特质呢？

首先是策划有故事。从客户的真实需求去梳理数据可视化内部的视觉传达，确保内容传达克制有条理，有重点、有故事。尽可能让用户花费更少的时间获取更多信息，完成数据空间到图形空间的映射，让数据的价值被看见。

如上方的品牌销售数据大屏，销售额与门店数，数据明显，与销售额相关内容有季度线上线下销售额，会员数、款式数量、爆款排行等，故这块内容排在左侧。右侧就是区域订单、毛利统计。中间放用户关心的地图区域分布、爆款分析等内容。

其次是可视化要有效率。通过工具软件，数据可视化变得更简单高效，变得灵活易实现，多端适配，加入组件化的拖拉拽操作，加入了多种交互和远程控制，能有效率的实现海量数据实时同步，实现高效率、高质量大屏交付。

最后是大屏要有数据价值。数据可视化最重要的还是要落实到数据上，脱离数据谈美观是不切实际的空想，数据可视化就是要充分利用并方大数据的价值，保证数据实时、全域、精准、让数据讲话。

五、最后

设计可视化数据大屏时我们设计师要抓住问题的重点，即这样设计出来的内容能不能真的让数据产生价值，能否经得起业务部门推敲？是否为企业经营提供了帮助？思考完这些再去做的大屏更有价值，大屏做的酷炫是其次，能够让人一目了然的看见关键信息，联想到业务实际，才是我们设计师最需要关注的方向。

文章来源：站酷   作者：知果日记YRrui

一、费茨定律

费茨定律(Fitts'sLw)是一个描述人类运行学的经验公式，用于计算人们移动手指或鼠标等设备到某个目标的时间，以考虑目标大小和距离为主。 

费茨定律的公式是T=a+blog2(D/S+1)，其中T是时间，a和b是实验测得的常数，D是目标的距离，S是目标的大小。说明了在给定目标情况下，目标距离越远，需要的时间越长；在给定距离的情况下，目标越小，需要的时间越长。

费茨定律广泛地用于人机交互界面设计中，例如在B端常用的设计按钮上，可根据该定律来选择适当的目标大小和间距，以使用户更好地达到业务目标。 

比如在B端产品弹窗界面设计中，确定和取消按钮都会放在右下角，使得用户更容易点击。确定按钮更高频故放在最右边，视觉表现更明显，使其更容易一眼点击。此外，两个按钮之间的距离也很重要，因为它会影响到用户的点击时间，为了让用户更容易进行选择，按 钮间保持12px距离，避免用户误触。

二、米勒定律

1956年美国心理学家乔治·米勒对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错。因此心理学家把这个神奇的记忆容量规律称为“7±2法则”。 在人机交互设计界面中，如果要引入新的元素或操作，应该尽可能地减少其数量和复杂性，以便用户更容易理解和记忆。

比如在B端卡片设计中的操作按钮一般会控制在7-2法则即5个操作按钮，若有其它操作会隐藏在更多按钮里面，把频次较高的按钮放在一级展示中，频次较少的按钮放在二级浮窗展示中。通过分解复杂的任务和信息，减少冗余内容使得用户更容易理解且更快完成业务过程。

三、格式塔原理

格式塔原理是心理学的一个概念，也广泛应用于设计领域中。该原理认为人类大脑在处理感知信息时，会自动将信息组织成具有整体性、完整性和结构性的形态，即所谓的“格式塔”。

在设计中，格式塔原理有几个常见应用： 

1.相似性原则：相似的事物更容易被视为一组，与不同的事物分离。因此，设计师可以使用相似的颜色、形状、大小等元素来将相关的信息组织在一起，提高信息的可读性和易用性。

2.接近性原则：接近的事物更容易被视为一组，与远离的事物分离。因此，设计师可以使用空间布局来将相关的信息组织在一起，提高信息的可读性和易用性。 

3.对称性原则：人类大脑喜欢对称和平衡的形态。因此，设计师可以使用对称的布局来吸引用户的注意力，提高视觉吸引力和美感。 

4.闭合性原则：人类大脑倾向于将不完整的形状视为完整的形状。因此，设计师可以使用封闭的形状来强调信息，使用户更容易理解和记忆。

相似性原则的应用比如在B端的卡片设计中，所有的卡片样式相似在人脑理解中默认会视为相同的一组数据。

接近性原则比如在B端的表单设计中，常常会将一组数据通过接近性原则组织在一起，提高信息易读性。

对称性原则常用在大屏与报表设计中，通过对称性布局提高视觉美感，吸引用户注意力。

闭合性原则常用于连续性表格或图形等设计中，通过不连续性来让用户大脑形成封闭路径强调后续可读信息。

比如在下面的表格中通过形状的不连续性反而让用户大脑更快感知到还有信息可以滚动查看。

四、雅各布定律

雅各布定律(Jacob'sLaw)是一条常被引用的交互设计法则，它由美国心理学家Donald Norman提出。该定律指出，人们在使用任何新系统时，都会将他们以前所经验过的类似系统的知识应用于新系统。

雅各布定律的核心思想是，在设计新系统时，应该考虑到用户的现有经验和期望，并尽量避免创造完全不同的界面模式。这样可以使用户更容易理解和掌握新系统，并减少学习成本。

比如在B端设计中常用到的图表编辑快键可以延用用户在其他系统常用到的快捷键，如win或mac系统都常用到的快捷指令可复用到B端产品的快捷操作中。

五、防错原则

防错原则(Principle of Fail--Safe or Fault-Tolerance)是一种设计思想，其目的是减少或避免因错误或故障而导致的不良后果。它通常被用于设计高度可靠的系统或设备，以确保在错误事故发生时，系统或设备仍然能够继续正常运行，或者能够平稳地停止运行，以避免进一步的损害或危险。

在界面设计中如设计可撤销操作，通过系统中允许用户执行可撤销操作，以避免因误操作而导致的不良后果。

或在界面设计中常用到的反馈和提醒弹窗等操作，以帮助用户及时发现错误或故障，并采取适当的措施。

六、泰思勒定律

泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明确提出，也称 「复杂性质量守恒」。

该基本定律觉得：该定律认为每一个过程都有其固定的复杂性，存在一个临界点，超过这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。

可以通过简约至上的隐藏、转移、删除等原则进行用户体验的提升。

七、奥卡姆剃刀原理

早在14世纪，哲学家、圣方济各会修士奥卡姆的威廉提出来了奥卡姆剃刀原理，这个原理说的是“切勿浪费较多东西去做较少的东西同样可以做好的事情”，后来以一种更为广泛的形式被人们知晓“如无必要，勿增实体”。 

奥卡姆剃刀常用于两种假说的取舍上：如果对于同一现象有两种不同的假说，我们应该采取比较简单的那一种。对于几个功能相同的设计，在设计都可用的情况下，则选择视觉干扰较少的设计。

在设计上则能够指导我们对产品做减法，去减少不必要的元素，在进行设计的时候，先分析用户的的主流程是什么，流程内的引导尽量弱化，没有必要则不增加。

比如在B端产品设计中的登录页面以登录流程为核心，不需要增加其它没必要的流程。

除了以上七大定律外，也有尼尔森的10大设计原则，与以上定律基本一致。总而言之，交互设计规律的宗旨都是帮助设计师创造易用、高效、愉悦的用户体验。在B端产品设计中，将交互定律贯穿于产品设计中可以提升产品易用性，降低学习成本，使产品更规范，对企业用户的工作效率与商业价值都有积极的影响

文章来源：优设网    作者：丽创轻文

一、引言

中国互联网公司的迅速发展正在推动着整个软件行业的审美革命，在C端产品市场逐渐饱和的情况下，互联网大厂正在将资本逐步转移到B端市场的广阔蓝海中。”B端C端化“的设计理念也应运而生，认为可以用C端的模式和思维来进行B端产品的设计。 

二、背景

除了刚刚有说到的资本慢慢向B端市场的蓝海转移，还有一点就是中国互联网环境的迅速发展，智能手机的大范围普及，工作人群的年轻化，使得人们已经熟练的掌握了各种软件的使用，并且在快速迭代的产品中慢慢变得挑剔、谨慎。 

并且不断优化迭代的互联网软件产品也在无形中为用户完成了底层认知的搭建，一些功能、操作、交互逻辑已经深入人心，用户也已经被教育成了"高玩"。 

所以如今一些新型B端产品的设计理所应当的在用户体验五要素中最贴近用户的结构层、框架层 和表现层中与一些C端产品在一定程度保持了一致，这种设计理念其实也很好的解决了传统软件的复杂、门槛高、难用等痛点，很大程度降低了用户的认知成本和学习成本，把高效、简单、易用的工具带到大家的日常工作中。 

三、对B端C化的理解

对这个概念的理解我认为是："B端产品在使用体验和视觉感受这两个方面和C端产品接近"。这是我们设计师需要特别关注的，传统的思维中，大多数设计师会认为B端是给公司内部人员或者商家使用的，只是一个管理系统，并不需要太过于精细，至于体验也是停留在“能用就行”的程度。但是在我看来不管是C端还是B端，其实它的使用对象都是“人”，应该要遵循人们对于事物的认知和一系列复杂的人体工程学操作习惯。两者都需要关注用户在使用时的体验感受，顺畅的使用流程、清晰的信息展示和高效的行为效率，以及有效的引导都能够快速的帮助用户完成目标任务。无论是C端设计还是B端设计，满足这些条件无疑可以给用户带来更好的体验。 

但是也不能以偏概全的认为C端的设计思维可以完全复用过来。B端产品的场景其实比C端产品还是要复杂的多，应该说是各有各的侧重点，思维和设计模式上不能完全照搬，下面我就先说说它们各自的不同处，再举例带你看看B端产品在哪些方面可以向C端产品借鉴学习。 

四、B端C端的不同

1.使用者不同

B端使用者多是同一个组织集体，以群体为单位进行协同。比如：老板、部门主管、员工或商户。而C端使用者相对比较单一，目标用户群体即是主要使用人群，使用目标、偏好、个性比较明确。 

2.业务不同：

B端业务大多数会存在多重维度、场景，使用场景跟业务紧密相关，同一个系统不同角色使用时的业务处理和所关注的数据信息，侧重点会有很大的不同，需要全局考虑。不同角色使用产品的流程差异大，需要不同业务上更专业的解决方案。而C端业务一般维度比较单一，业务逻辑相对固定，任务路径和展示内容比较单一。 

 3.价值主张不同：

B端注重效率、成本、管控、数据分析等。追求产品的稳定性、业务的增长性，保证产品性能和技术上的安全性。而C端注重用户的体验、使用简单、有乐趣。 

4.产品思维不同：

B端产品多数基于服务思维，工具化思维，更加理性；更多的是帮助B端用户提高效率，完成业务目标。而C端多数为产品化思维，游戏化思维，更感性，更多的是娱乐和情感的满足。 

5.产品形态不同：

B端产品注重业务的梳理，多数会用到图表、表格、模型，多数产品形态偏向更垂直行业或更专业的面板形态。而C端更注重用户的感受，会用到很多夸张的动效，炫彩的颜色。 

五、B端C化在产品中具体的表现

1.结构层 

结构层确定各个将要呈现给用户的选项的模式和顺序。结构层是用来设计用户如何到达某个页面，并且要考虑他们完成事情之后能够去哪里。 

具体在B端产品的表单交付场景下可以体现出，以前的B端表单往往过于冗长，借鉴C端一些注册场景的设计，把表单拆分成3步内的行为步骤，减少用户的疲惫感提升体验。 

2.框架层

产品的框架层包括：按钮、控件、照片、文本区域的位置。框架层是用于优化页面设计布局的。 

具体在B端产品的列表页可以体现出，列表页中整体的按钮、文本区域的位置、搜索和筛选的布局设计其实与C端产品中的商品详情页是类似的，遵循用户的阅读顺序和视觉焦点来进行设计。 

3.表现层

视觉、听觉、（触觉）的体验设计。多体现在一些情感化的设计也被运用在了B端产品中。 

六、B端C化未来的设计方向

反观现在C端产品的一些设计风格和流行趋势，有哪些可以运用在B端产品的设计中呢？ 

1.3D化

B端因为对数据的展示有较强的需求，用户在使用过程中提高效率的判断纬度也包括信息数据的获取效率，而3D的视觉在数据可视化层面有着天然的优势，可以帮助用户更快速的理解数据维度所表达的核心价值。近年来网速等硬件设施的升级也为3D化视觉带来可落地的基础，设计师也尝试在产品设计中融入更多的3D化元素。 

2.情感化

人们对传统B端产品的印象往往是觉得它们比较枯燥、呆板的，如今一些新型的B端产品的设计理念也试图在抛开用户对于产品的这种既定印象，所以很多产品在往一些娱乐化、IP化的方向尝试，并且都达到了一些比较好的效果，未来在这方面的思考和尝试只会越来越多。 

3.个性化

B端产品的同质化严重，所以B端产品也需要从一些产品定位去定制更加富有个性的品牌基因，可以让用户产生对产品的感情，达到从同类产品中能够脱颖而出的目标。 

七、总结：

不管是B端还是C端，目的都是为了解决业务场景中遇到的问题，使用对象都是人，都应该站在“人性”的角度考虑问题，有人说B端产品一般都不注重设计，C端产品的设计更能满足设计师对美的追求，我只能说它们的侧重点不同，C端更注重视觉感受，要做到在视觉表现的感性层面吸引用户，而B端其实更为复杂，需要做到底层的强大数据处理能力，产品的专业性包括交互、视觉的吸引力，这样才能从众多产品中得到用户的认可并脱颖而出。设计师还需要不断打磨细节和优化体验来吸引和留住用户。 

所以说“B端C端化”也只是在某些方面通用，但核心侧重点不同，不能以偏概全、一概而论，但可以借鉴与参考，B端产品也可以做的很精彩。 

文章来源：优设网    作者：酷家乐UED

前言：为什么要看懂B端基础逻辑

相信很多设计师同学都接触过B端产品，对于很多设计师而言，遇上B端产品是一件令人又爱又恨的事情，爱是因为目前市场上大多数的公司主要经营的都是B端系统，B端系统相对于C端来说UI界面显得并没有那么的重要，所以设计师的责任也相对没有那么重，而恨是因为目前大多数B端系统页面都是由前端UI框架搭建的，前端同学很多时候直接套用组件即可，所以UI设计师对于整个系统来讲也显得可有可无，导致设计师话语权也特别的低，甚至有些做B端系统的公司压根不用UI设计师也能完成项目开发。

但是作为交互设计师(小公司一般是产品经理)在B端却特别吃香，并且拥有主要的话语权，因为我们主导这整个系统的基础逻辑与业务逻辑设计，所以无论是前端还是后端同学都需要根据我们的设计进行开发，最终完成整个系统。

因此，今天这篇文章并不是告诉大家有哪些前端UI框架或后台组件等..（相信这些大家也看得太多了，工作中都是套框架，能用得上的没几个），而是从交互上如何去看懂B端后台的基础逻辑以及以后自己晋升成产品经理或者交互设计师时，怎样去设计一个完整闭环的系统。

一、B端产品有哪些基础逻辑

B端产品和C端不同，C端产品大多数都是针对个人用户，设计的关系结构相对来说比较简单，每一个用户拥有的权限都是一样的，例如微信、淘宝等，我能看到的页面你都能看得到，很少不存在权限差异问题。

而B端产品的用户一般都是企业，企业用户一般会管理着多个角色，也就是角色多元化（例如一些校园系统角色就分为：普通教师、级长、主任等角色），不同的角色对系统的需求和职能也不一样，我们需要根据角色的需求去划分不同的权限，让他们互不干扰但又满足他们的需求问题，因此B端产品的基础逻辑比C端产品相对复杂。

看完上面文字的同学可能蒙了，又角色又权限的，能不能说点人话？

行！其实很简单，B端系统无非三个逻辑（也是三个页面）：用户管理、角色管理以及菜单管理。（有些系统因为业务需求可能有部门管理，那么算上部门管理就四个）

二、什么是用户、角色跟菜单

（1）什么是菜单

为什么我把菜单放到最前面跟大家讲？是因为菜单管理比前面两个相对简单，而什么是菜单也特别好解释，大家可以直接认为系统左侧的页面列表就是菜单，系统中拥有多少个页面那么就有多少个菜单，你的菜单越多就以为着你的权限就越多。

菜单管理的作用就是用于管理员对整个系统页面的管理（管理最主要就是增删改查），而有一些公司为了减少开发工作量会直接不要菜单管理，有多少个页面都由代码直接写死，管理员不能通过页面进行人工配置，这样会导致以后扩展会非常麻烦，当然了，有一些系统的菜单几乎不改的话，代码写死也没问题。

（2）什么是权限

在讲解用户之前我需要提前跟大家讲一下什么是权限，准确来讲应该是权限分为哪些？

在目前的后台系统中，权限一共分为三种权限，分别是菜单权限（也就是上面介绍的）、数据权限以及操作权限。

菜单权限决定了用户有没有这个页面，例如学校系统中，主任有看到所有教师的教学数据的界面，而教师却没有这个功能，那么在给主任新增账号的时候就应该把对应菜单赋予进去。看上去很复杂，其实具体操作就是新增的时候把对应的菜单勾选上就可以了。

数据权限则决定用户能不能看到对应的数据。还是学校系统的例子，初中部主任只能看到初中部所有教师的教学数据，而高中部主任也只能看到高中部教师的教学数据，不同用户能看到的数据也是不同的，所以在新增的时候需要给用户配置（一般配置就是勾选）好对应的数据权限。

但是这里有一个问题，配置数据权限时我们如果一个一个人去勾选配置的话会特别的麻烦，假如初中部主任只能看到初中部的老师，那么我在给他配置账号的时候需要一个一个的初中老师勾选上，张三、李四、王五..等等，如果人多的话可能需要勾选成百上千次，用户体验就会变得特别差，因此现在的系统在配置数据权限时都是以部门为单位进行配置，也就是说，直接选择部门就代表着拥有整个部门的数据权限。

最后操作权限即决定了用户有没有对数据进行操作（一般是增删改查）的功能。还是上面的例子，初中部主任拥有查看教师的页面以及数据，那么他能不能对教师们的数据进行增删改查或者导入导出呢？这就取决于操作权限的配置了。目前很多的后台系统在配置菜单权限的时候同时需要把操作权限进行配置（因为只能先有页面才能进行操作），操作权限一般就是增加、删除、修改以及查询，当然如果页面还有导入导出或者其他功能，这些也需要在操作权限中进行配置。

（3）系统中的用户

用户其实也很容易理解，B端系统的用户其实就是需要登录进系统的账号，所以有一些系统的用户管理也叫账号管理。

因此用户管理的作用就是对登录进系统的账号进行增删改查等，当我们需要对别人提供一个账号时，我们就新增一个用户的账号密码给他们，直到他们用完了再把他们的账号进行删除。

那么问题来了，上面我们说到，不同的用户可能有不同的需求问题，那么就意味着我们每一个用户给要他们分配不同的菜单去做他们的事情。

例如在学校系统中：普通教师只负责自己班级学生的成绩录入，所以普通教师只有班级成绩录入的菜单，但是学校主任却不一样，他不仅仅能看到各班学生成绩，还能根据各班成绩进行对比分析，年级学生排名等等..

因此在刚开始的传统权限系统中，我们会直接把相应的菜单权限、数据权限、操作权限赋予给用户，每新增一个用户我们就选择好所有的权限都勾选上赋予给用户，最后提供给用户进行操作。

然而这种操作方式有一个弊端，就是如果每新增一个用户，系统管理员就需要重复进行勾选相同的权限，那么就会耗费大量的精力（一个用户要配置的权限特别多，如果用这个方式操作的话新增一个用户可能就需要花费很长时间）。因此，为了解决这个问题，我们在用户与权限之间建立了角色管理。

（4）角色的作用

系统中角色的定义其实跟生活中是一样的，我们把固定的权限集合到一起从而形成了角色。例如，生活中UI角色就负责页面的视觉设计，而交互设计师则负责了产品的逻辑或者用户体验设计，这些角色拥有的权限一般很少变化，也几乎不会进行删除或者修改，就好像UI设计师或者交互设计师这些角色不会一时半刻就被完全消灭一样。

有了角色，我们可以先把对应的权限集合赋予给角色，然后新增用户时，再选择用户对应的角色即可。

这样做的好处是什么呢？好处就是当我们新增用户的时候，如果是相同角色的用户，我们不再需要重复去大量勾选相应的权限了，只需选择好该用户是那个角色就可以间接对用户赋予权限，并且后续要对用户进行权限的修改也十分便捷。因此，在现在的后台系统中，大多数都是采用权限赋予角色，然后新增用户时再选择用户对应的角色的方式。

三、整体流程

如果看完上面的知识点还有点懵的话也没关系，这部分给大家展示在后台系统中菜单管理、角色管理与用户管理的实际应用是怎样的。

第一步先查看菜单管理有哪些内容，一般情况下，一个成熟系统的菜单页面几乎是已经固定不变的，那么也就是说菜单管理列表中所拥有的菜单都不需要怎么操作，列表中有多少数据就代表着系统总体有多少菜单。

第二步进行角色管理，如果是成熟系统的话，角色管理的角色也早已经分配好了，我们并不需要过多的进行操作，但如果是刚研发完成的系统，那么我们就需要根据现实的用户需求进行角色的设置，具体添加角色的主要参数包括角色名称、菜单权限、数据权限以及操作权限（其实也就是上文介绍的三种权限），其他的参数都是根据自身业务进行添加。

最后一步就是用户管理，配置好角色后，我们就可以根据需求进行用户的新增操作，例如现在我们需要新增一个账号进行登录系统，那么在用户管理页面中点击新增按钮，随后填写用户名称与密码，最后选择用户角色，点击确定按钮即可完成（因此，新增用户的三个必要参数是用户名、密码以及角色，有部门的需要填写所属部门，其他参数根据系统业务进行添加）。添加完成后你们可以试一试使用自己所填写的用户名密码登录后台系统，随后体验一下作为其他角色是否能完成自身需要的业务。

四、最后总结（特别重要）

用户管理、角色管理以及菜单管理是B端系统最基础的逻辑，也是同学们将来需要转岗B端交互设计师或者产品设计师所必须掌握的知识，上面所介绍的仅仅是RBAC模型中最简单的一种，现实设计中可能出现各种情况，因此关于这次的B端产品设计我想给大家几点Tips：

    1、在现实开发中，后台系统并不一定像我上面所说的那么完善，有些系统并不需要菜单管理，老板要求直接代码写死就好了，又或者有些系统就只有一个角色，那么角色管理也不需要了，这些情况都是有可能发生的，所有我们做设计的时候除了运用自己的知识以外，更多的是工作经验，知识是死的，人是活的，永远别忘了设计的本质是解决用户需求问题。

    2、很多时候后台的逻辑管理会比我上面说的要复杂的多，例如一个用户可以拥有多个角色吗？不同角色能不能有相同的权限？如果有角色被删除了，那么该角色关联的所有用户应该怎么处理？可能你认为这些并不是自己目前需要考虑的问题，但是除非你以后并不想晋升到更高的位置，不然这些问题以后肯定会遇到的。

    3、上面介绍的管理操作都是基于超级管理员账号（admin）进行操作的，如果你拿一个普通账号的话一般是没有对应的菜单权限，我担心有同学看完文章后马上登录自己的后台系统进行操作，接着登录进去找了半天都没有找到对应的菜单在哪里。

好了，最后希望文章能让大家有所收获，如果大家有不明白或者其他想法的话，欢迎大家一起探讨，共勉。

文章来源：优设网    作者：北沐而川

作者：馊面包
来源：站酷

进入喜茶小程序的时候给我的感受是简洁、时尚、极致的设计风格，截了两张小程序内的两个界面。 确实做的还挺不错的，为什么给人感受不一样？接下来我们分析分析

1.版式

1.首先从下面的页面我们能发现，界面的排版只有卡片左边距留了20的安全距离，而卡片右边安全距离为0，这样特别的版式设计给人不对称的感觉，这样的设计能让用户记住，同时又有一点时尚范的感觉，很符合喜茶目标用户年轻人的审美。
2.同时产品的banner是3:2的比例，较为靠近黄金比例的尺寸。 

1.点单页面，喜茶新增了新品推广位，一些新上的产品都会在推广位呈现，尺寸比例4:3，给人的感受像是线下海报一样，同时第三个广告位露出部分，让用户知道后面还可以左滑查看。同时推广页的右下角有个箭头指引，告知用户可点击。 

2.看完这几个页面会发现，喜茶的基本上都是纯直角的设计语言，推广页是直角、标签是直角、按钮微圆角，直角的设计语言给人的感受是时尚、极致、极简的设计感受，个人非常喜欢。 

3.但是点单页面的有点乱，标签的颜色过多，不够统一，图标的也非常的多，这样给人的感受就会比较凌乱，尽可能少的去表现，这样更加能提高用户的效率。

1.在点单页面用户上滑，推广位渐渐的往上消失，这样产品的展示会更多，利于用户挑选和寻找。 

2.用户在选口味界面，发现每一个标签的内的文字左右的安全距离一致，依次排列，具有节奏感，页面给人感受简洁、易操作，同时用户可以选自己的口味，可进行保存，下次点直接就可以选择自己的口味。

在喜茶的百货界面能清晰发现每一个模块的都是不一样的，很多产品的商场页面都是一致的，而喜茶在产品的展示会以不一样的形式出现，每一个模块都有尺寸和排版的差异，这样给用户有种落错感，更加有设计。

2.会员页

1.喜茶的会员页给我眼前一亮的感觉，会员的背景用色都是明度高、纯度低的渐变给人的感受清新、淡雅的感觉。 

2.会员页用户在切换的同时图标的颜色会跟着会员的颜色变化，特权的内容也会有不一样的变化，让用户有明显的等级感知。 

3.切换到“黑卡”的时候，会发现会员页的“喜”字加上了质感。 

4.会员卡上“喜”字提取了“喜茶”中的“喜”，跟其他产品的会员做了区分的同时又加深了品牌印象。

3.图标 

喜茶有两种不同风格的图标，一种是比较极简，线性，差异性没有那么强，而另一种则是插画风格的图标，给人感受比较有趣，更有差异，极简则符合喜茶整体小程序的调性，而插画又丰富了页面的单调性。

4.动画 

1.喜茶顶部的banner做非常不错，例如跟FENDI合作的会在首屏加入视频，用户一进入小程序就能看到能很好的吸引用户的注意。 

2.用户在左右切换banner时，文字会先出现然后底部的图片渐渐出现，给用户感受自然、流畅的感受，好的动画效果能给产品加分，给用户留下好的感受。

5.字体

1.喜茶的数字字体是NeutraText-DemiAlt，每次进去喜茶看到他们的数字字体非常有独特性，给人的感受时尚、极致、有设计。 

2.部分界面和海报喜茶会用上方正悠宋，有点中国风、古风的韵味在里面，而且也非常有独特的设计美感，喜茶会应用在国风的海报以及会员页的“喜”字上，突出风格化。

3.好的字体能很好的提高产品的品牌感和设计美感，更能传达该品牌想传达的东西。

6.更多界面欣赏

作者：黄小伟
来源：站酷

一、获取原型图

从产品经理处获取项目原型图，当获取到原型图后不要盲目的去进行设计，要先分析了解整个项目的功能、特性、用户群体、项目的定位等等，特别是对功能的疑惑处一定要找产品经理沟通，只有做到对项目了熟于胸才能做出优秀的设计。

二、竞品分析

当我们对项目的功能、特性、用户群体、项目的定位都有所了解后，还是不能马上进入设计环节。我们需要先对市面上同类型的产品进行分析和对比，包括设计风格、配色、排版、功能样式等等，了解其优劣势，做到取长补短，思考如何让我们的产品更加的完善，这时候我们的脑海里面基本上对自己要设计的东西已经有了一个大概的雏形。

三、设计UI界面

1、界面设计规范

这篇文章内所有的数值均以2倍图为例，使用1倍图的同学请自行除以2。

现在UI设计通常使用的是全面屏的设计规范，全面屏的设计稿更加美观，且做作品集的时候搭配全面屏样机视觉效果也更加突出。通常只设计一套苹果全面屏的设计稿，不需要另外设计安卓端设计稿，安卓端由安卓工程师自行适配。

界面尺寸：

界面：750px1624px

状态栏：750x88px

导航栏：750x88px

菜单栏：750x98px

指示器：750x68px

左右边距：32px或24px

*其中状态栏和指示器不需要进行额外的设计，是系统默认控件，除颜色外不可改变。

常用图标尺寸：

顶部功能：48x48px

底部菜单栏（有文字）：48x48px

底部菜单栏（无文字）：64x64px

文字：

尺寸：36px、32px、28px、24px

颜色：正常（#333333）、辅助（#999999）、未输入提示（#CCCCCC）

*利用文字尺寸对比和颜色对比可以得到不错的效果。也可以给文字颜色添加少量的蓝色，让颜色不那么呆板。

2、组件控件系统

组建控件系统可以让我们的设计稿更加的规范，也便于修改，可以极大的提高我们的工作效率。

所有的图标都需要做成控件，方便我们切图。然后就是会重复使用的状态栏、导航栏、菜单栏、指示器、列表、弹框、按钮等控件。

除了我们常用的控件以外，颜色、投影等特殊效果、文字大小都可以保存样式，把项目的配色、特殊效果、文字尺寸都保存下来，不同的设计工具有不同的保存方式，大家可以根据自己使用的设计工具进行设置。

3、设计风格

我们需要让项目保持一个统一的设计风格，让项目更加的整体、统一、协调。不同的风格有不同的优势，选对与项目属性相符的设计风格可以让项目更加的出彩。

传统UI风格：

这种风格没找到合适的名称，我个人一般叫它传统风格。这种设计风格使用分割线分割小的模块，用背景色块分割大的模块，特别适合列表信息。虽然给人感觉没有特别强烈的设计感，但简单实用、朴实无华，层级划分清晰明了。

卡片式风格：

卡片式风格是借用现实世界中卡片的特征和概念，将一个模块或同类型元素放到一个卡片容器类，可以增加内容的独立性，让模块划分关系变得非常的清晰，是现在非常常用的一种设计方式。

常用做法是采用浅灰的背景+白色卡片的方式，卡片都带有一定的圆角，类似于将扑克牌一张张的放在桌子上，桌面是灰色背景，每一张扑克牌就是一个卡片。也不排除暗夜模式的卡片式设计，背景会更暗一些，卡片略亮。

大标题去线段化：

在传统UI风格的基础上去除背景色块和分割线，单以间距来区分模块和元素，对亲密性的应用有较高的要求。有时候单以间距来区分模块和元素时，可能会导致模块层级不分明，所以会使用将标题加大的形式，让模块与模块之间的区分更加明显。因为去除了分割线，留白就更多，会显得界面更加的干净、清爽。

新拟态设计风格：

新拟态是19年底在追波开始出现的一种设计风格，特点是使用统一的光源做出立体的浮雕效果，元素有厚度但没有纹理和材质的轻拟物风。

常规做法是假设一个统一的左上方光源，给元素分别添加一个左上角和右下角的投影，左上角（被光源照射的一侧）投影使用亮色，右下角投影使用暗色，让元素可以浮起来。而在按下或选中状态时则使用两个内阴影，左上角暗色右下角亮色让元素凹下去。需要注意的是界面模块和背景色一般是同一个颜色，所以颜色不能使用纯白或纯黑，否则有一侧的投影就会看不见，通常是使用蓝灰色或深灰色背景。

新拟态风格视觉效果新颖、柔和，对比度低，看得久了会产生一定的视觉疲劳，研发成本也较高，所以现在更多的还是处于概念稿，实际项目中应用较少。可以作为一种练习或部分功能的使用。

四、交付

1、切图

设计稿完成之后我们需要将图标等元素切图导出交付给开发，IOS和安卓需要根据要求导出不同倍数的png格式切图文件。

切图套数

IOS：现在通常是输出2套，以@2x、@3X为后缀，也就是2倍图、3倍图；

Android：现在通常是输出3套，xhdpi（超清，对应IOS的2倍图）、xxhdpi（超超清，对应IOS的3倍图）、xxxhdpi（超超超清），安卓切图不需要将倍数加到切图命名内，而是每种尺寸单独建立一个文件夹。

输出格式

png：最常用的切图文件格式，背景无底透明，所以在导出切图文件时需要先去掉背景色（figma将画板填充色隐藏，sketch画板不要勾选“包含于导出项”）；

svg：矢量切图，需要背景无底透明，部分网页端项目可能需要svg格式的切图文件；

bmp：部分硬件机器的项目需要使用的图片格式，需要注意的是bmp无法实现背景透明，如果背景是透明的会自动带上白色，需要切图文件把背景带上一起切，而且figma和sketch等UI设计软件无法直接导出bmp格式，需要先导出为png或jpg格式，再使用ps或其他工具转换一次。

切图命名

只能使用英文、下滑线、数字进行命名，不要使用中文和特殊字符。命名方式一般是类别_位置_功能_状态（有些切图没有多种状态则不需要添加状态命名）。

以苹果端举例：如底部菜单栏的首页图标命名则是ico_bottom_home_nor@2x（图标_底部_首页_未选中状态）和ico_bottom_home_sel@2x（图标_底部_首页_选中状态）。

顶部的搜索图标没有多个状态，命名是ico_nav_search@2x（图标_顶部_搜索）。

类别一般只有3种：图标（icon）、图片（image）、按钮（button），我们通常会简写为ico、img、btn。

状态一般只有4种：正常（normal）、按下（press）选中（selected）、禁用（disabled），我们通常会简写为nor、pre、sel、dis。pc端会多一种状态：悬停（hover）。

sketch和figma等UI设计软件可以同时导出多个尺寸的切图文件和前缀/后缀，所以我们只需要设置图标本身的命名如ico_bottom_home_sel，而不需要每个切图都去手动的添加IOS后缀的@2x和@3X，以及安卓的前缀xhdpi等，在导出设置中设置好每个尺寸的文件夹名称和后缀，再统一导出即可。

切图输出

软件内部导出：现在的UI设计软件Sketch、Figma、Mstergo等都可以直接导出切图文件，只需要设置好相应的倍数和前缀、后缀，就可以快速的导出切图文件；

上传第三方：最常用的就是将设计文件上传至蓝湖，研发人员可以在蓝湖上下载自己需要的切图文件，但在上传蓝湖之前需要把设计稿中需要切图的元素设置为切片。

2、标注

和切图文件一起交付给开发的还有设计稿的标注文件，让研发人员可以清楚地知道界面内元素的颜色、尺寸、对齐方式、距离、透明度，文字的字体、字号、行高等。

输出到蓝湖

很多设计文件都可以安装蓝湖插件，再通过插件将设计稿导出到蓝湖，研发人员就可以便捷的查看界面的标注。

软件内部标注

Figma、Mastergo等在线设计软件都可以切换为开发者模式，只需要将研发人员邀请到自己的设计文件所在团队内，研发人就可以查看到界面的标注；

插件导出

有部分公司有一定的保密措施，会禁止设计师使用第三方平台或是联网操作，这种情况设计也无法使用Figma、Mastergo等在线设计软件，只能使用Sketch等客户端，输出标注就需要使用相应的插件，Sketch可以使用Sketch Measure导出HTML格式的标注文件。

五、上线

在项目上线的阶段UI设计需要辅助研发提供上线应用商店需要的项目预览图、启动LOGO，也需要设计补充出APP的启动页、闪屏页等。

1、项目预览页

上线应用商店需要的预览图，通常是使用项目中比较有特色的几个UI界面加以设计。

2、启动LOGO

上线应用商店必须提供的LOGO，手机中启动APP的入口，但不同的应用商店有不同的尺寸，华为、苹果、小米、三星、应用宝等所需要的启动LOGO都有所不同，所以输出多个尺寸。以苹果App Store为例，需要以下尺寸：

3、启动页、引导页

启动页和引导页一般是和UI界面一起设计，不过需要项目上线后才会有其价值，所以可以先设计完项目的界面，在研发开发的过程中再去设计启动页和引导页，只要在项目上线前提供给研发就可以。

六、持续跟进和优化

当一个项目上线后，只能代表我们的现阶段的工作已经全部完成。每个项目上线后都会收集用户反馈，根据用户反馈的信息优化功能和界面设计，通过持续不断的优化、迭代让我们的产品越来越好，这个过程中也需要我们UI设计不断的去进行调整和优化。

作者：Mu姜子
链接：https://www.zcool.com.cn/article/ZMTQxMDY1Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作为设计师，要对自己的设计有一个检验标准，明白什么设计才是好的设计。这一篇简单，有点枯燥，但是非常重要。

              什么是好的设计？好设计，就是不改稿的设计，甲方买单的设计，这句话多大多数设计师来说是没错的。因为设计师也要吃饭的、要生活。只要客户买单了，我们就能达到经济上的收益。

       但是仅仅客户买单就足够了吗？我觉得对于一个想要提升自己的设计师来说并不足够。这个客户买单了说明你在一定程度上，在当前满足了这个需求层次或者审美的客户群体。

       当客户发现设计并没有在实际宣传中达到目的，买完单的客户也没办法回头再找设计师退款，但是，可想而知这个客户就流失了。而且如果只满足于应对这一需求层次的客户，当面对要求更高的客户的时候，我们也会变得无能为力。只能看着客户流失，或者勉强接下项目，却在不断的改稿中疲于奔命。

 

       想了解什么是好的设计，首先需要要了解什么是设计，设计的目的是什么。

       设计是有目的的策划，平面设计是这些策划将要采取的形式之一，在平面设计中你需要用视觉元素来传播你的设想和计划，用文字和图形把信息传达给受众，让人们通过这些视觉元素了解你想表达的信息，这才是我们设计的定义。平面设计的目的不仅是视觉表层的美观度，更重要的、最根本的是信息的传达。

       所以好的设计就是，能准确直观的传播设计目的，被受众更有效、更愿意接收信息的设计。简单来讲，信息（包括内容信息和情感信息）传达的是设计的基础，是设计中一切行为的第一准则，是对的设计。在此基础上具备良好的美感传达就是好的设计。

      我们可能在设计学习过程中学到了很多的设计法则，形式美法则、创意思维、排版原则、色彩原则、字体运用原则。但是很多时候用到的时候就想不起来，用了也没达到效果？

       我理解更多的是因为没有从根本上理解这些法则存在的意义、运用的目的。设计师应该做最吝啬的人，过程中每一个视觉元素的运用都要有其目的性。这个目的性就应该是信息传达和美感传达。以此为标准反复检验自己的设计作品，相信我们能做出好的设计。

（一）客户对设计的期待信息准确有效传递，受众对信息要求直观、易读。

       这是一个高效时代，时间就是金钱。同时是一个信息大爆炸的时代，每天我们会面对各种不同媒介的信息，不断冲击这我们的视觉。我们不能要求受众有时间和耐心完整仔细的观看阅读整个设计。这就要求我们的设计，即便一眼，就能判断设计究竟在表现什么信息，而不被其他不重要信息干扰。当客户对表达信息有一个直观的概念后，希望继续阅读下去的话，我们就要在易读方面进行深化。

       明确最重要的信息

       对于设计需求的分析得出最重要的信息，最想传达的信息

       突出最重要的信息

       将它摆放在突出的位置，整体的烘托，对比的凸显，合适的构图

       次要信息

       相对最重要的信息较弱

       信息的筛选

       设计中包含的信息必须有明确的效用，而不被不必要的信息干扰导致失去阅读兴趣

       设置重要等级

       针对内容设置重要性等级，然后根据相应等级进行设计。

       信息分组

       这是受众感知多条信息的前题，将相关的信息放置或整合为一体，这样就可以实现分组。大多数情况下三至四个信息组已经足够了。

       阅读性文字排版 （阅读性文字指的是需要受众阅读的，而非装饰性、不需要识别性的）

       在文字排版当中易读是必须追求的。

       对齐：为了达到易读效果，首先要从对齐开始。

       检索：易于检索目标内容，精心处理检索方式。（依据版式设计原则中的对比，重复原则实现）

       记忆：要点便于记忆，突出主要内容。（依据版式设计原则中的对比，重复原则实现）

       文字：文字大小、字间距、行距、字体、文字的排布五个方面。过小的字体、过大的字体，过度装饰的字体，不符合视觉流程，不合理的版式布局。都是会影响阅读的易读性。

 

（二）客户对设计的期待能引人注意、获得好的反馈，受众希望从设计中收到某种刺激、有所收获。

       人们每天没数量惊人的信息淹没，面对潮水涌来的信息。我们的头脑中会形成一个过滤器，只会对能引发我们兴趣的信息，能够得到某种刺激的信息，才能顺利通过并留下清晰的印象。因此，想要设计从众多信息中脱颖而出并抓住受众的实现。就必须引人注目、传递刺激，让受众在你的设计上逗留。

       美的视觉效果比较容易给人带来刺激

       这时候我们学习的各种原则知识，构成知识（点线面，平衡、对比、调和、节奏、变异.....）、版式知识（位置、比例、分割、留白、网格.....）等都可以充分发挥作用了。 

       满足期待

       人们希望冲设计只能够得到收获，包括有用的文字信息和情感上的。反过来如果已经知道了，没有兴趣，无我无关的信息，是无法吸引受众的。选用一种能够传达设计内容及主题思想的吸睛元素就很有必要。可以是文字（礼物、服务、免费、抽奖、限时、折扣等）或者图形元素、图片。

       吸睛元素与设计需求要匹配 

       选取吸睛元素必须与设计主题信息密切相关。例如，在定位是高品质的项目设计中，放置一个花哨刺眼的打折；在画面中一个无关的美女。这确实很可能在短时间内赢得受众的注意，但是当文字或图片与设计需要传达的信息完全无关的情况下。也会很快的失去他们的关注。

       情感刺激

       一个好的吸睛元素往往能激发受众的情感——受众会觉得惊喜，感觉自己的情感获得了认可，也可能会对设计产生共鸣。一旦感情上拉近了受众与设计的距离，就有可能增加受众良好的反馈行动达到商业目的（购买产品、产生消费等）。

       消极情感    

       人们被设计激发的情感并非总是积极正面的。更重要的是有针对性的激发观众的情感。应该根据不同的设计目的，激发观众内心相应的情感。例如一个减肥中心的宣传设计，画面营造一种胖人失落的画面（没有偏见我自己也是个胖子~），从而激发受众不安的消极情绪。这也可能引起受众的关注，并愿意深入了解。

       受众反应的不确定性    

       视觉会给人带来一连串的生理上的、心理上的、情感上的、行动上的反应，设计是视觉经验的科学。他包括两个方面，一个是不以人为而改变的即生理感受的人的基本反应，另一个是随即的或不确定因素构成。如个人喜好，性格等等、等等，导致我们无法完全确定受众在面对设计时候的情感等反应。

       相对稳定的方面： 主要是生理上的视知觉，人们的一些视觉习惯、视觉流程、视觉逻辑，如从上到下，从左到右，喜欢连贯的、重复，喜欢有对比的，还有在颜色方面人们最喜欢的其实是有对比的互补色等等。这都是跟人们的生理上的习惯有关，都是人生理机能的本能反应。作为设计师应该对这些知识能充分了解、灵活运用，设计是对人本的关注，首先应对文化与人的感知方式这些相对稳定的方面进行研究，并且需要我们在实践中去总结。
       不稳定的方面： 不稳定的方面主要是指情感、素质、品位、阅历上的不同，在设计过程中你需要具备一定的判断和把握能力，你需要客观和克制，才能完成卓越的设计。
       设计思维的科学： 设计是必须具有科学的思维方法，能在相同中找到差别，能在不同当中找到共同之处，能掌握运用各种思维方法，如纵向关联思维和横向关联思维以及发散式的思维，善于运用科学的思维方式找到奇特的新的视觉形象，才能不断发现新的可能。 

 

  设计学习过程中的总结和整理，有些内容来自网络，如有冒犯请联系我删改！仅为自身学习提升的记录，如果对内容有更好的理解，欢迎交流探讨。

作者：艺修行者
链接：https://www.zcool.com.cn/article/ZMTAyNDQyMA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

本文讲述百度激励视频广告，从0到1的容器框架设计，以及如何通过设计举措进一步提升转化效果的设计思考。

近年来，行业内不断探索广告的新玩法，激励视频广告成为一种愈加流行的广告形式，当前已经是媒体主流变现模式之一，以满足广告主营销效果、媒体变现效率最大化。对用户而言，观看激励视频广告能够获得相应奖励；对于客户，激励视频广告通过奖励机制，得到更长时间的曝光来提升转化率；对于平台，有更高的变现效率能带来更高的收益。

百度激励视频广告承载着百度APP任务系统、权益场景、活动场景等的重要变现任务，本文将从激励视频广告的框架、提升转化效果两个方面，来阐述容器结构设计与提升转化效果的设计思考。

框架：建立场景核心转化流程

激励视频广告是独立的视频场景，场景内的元素布局、容器结构不依赖于所在的宿主场景，在整个交互链路中能够采用更有创新的设计形式。

1、布局跨场景横向一致

基于激励视频广告的元素来明确内容分区，考虑元素作用与通用性可分为顶部框架区、附加挂载区、内容信息区、转化决策区，在结构设计上，将核心奖励计时组件置于顶部框架区并保持稳定展现，保证百度APP内的视频广告在布局上横向一致性，同时也有利于场景之间创意交叉验证与复用。

2、容器、元素组件选型

从激励视频的链路流程出发，结合主动交互行为的各类组件状态：奖励计时与完成、视频播放与完播、浏览落地页、退出挽留四种核心状态。

1）奖励计时与完成：考虑奖励计时器会存在于多种不同场景情况，需要具备横向统一的计时形式来稳定用户预期，以及通过视觉反馈给予用户明确的状态变化感知，来降低不同场景下的理解成本，通过ABtest的方式，最终选用场景元素图标与文本计时形式，图标能够根据奖励的不同支持灵活配置，满足多元化场景的适配诉求，同时选用视觉感知较弱的样式与动画形式，尽可能避免与点击、转化无关的元素动画稀释用户对内容的注意力，从而影响广告效果。

2）视频播放与完播：播放状态下，为尽量降低对视频内容的遮挡，在转化组件的呈现上，采用“延迟展现吸引观看，渐进式增强吸引点击”的手段，视频完播状态下呈现视频尾帧，尾帧增加再看一个视频功能，为想要获得金币的用户缩短操作步长，提升激励视频广告的分发。

3）浏览落地页：浏览落地页过程中也需明示奖励计时，为了保证视频场景和落地页场景的计时延续与组件统一性，采用避让计时组件的面板化落地页容器。

4）退出挽留：当用户在不同奖励状态下会在退出的主动行为，挽留弹窗承载挽留与再看功能的重要作用，弹窗作为前后链路场景的共性组件，在弹窗设计上顶部承载所在场景主视觉IP，以满足多元化场景的下活动主视觉的延续，使激励视频广告更契合所在活动场景。

3、转化链路降步长

在原有的基础路径上，奖励计时与倒计时结束的两个环节仅有计时器形态的变化，元素变化是容易起到聚焦视觉的作用的，以倒计时结束为节点，将用户从"视频场景"带入到"决策场景"，通过容器结构形态的变化来解放停留在计时器上的视觉焦点，面板结构能承载更多的增益内容，延展信息载量，视频完播是判断用户对内容感兴趣的重要契机，在视频完播状态自动调起落地页，通过缩短转化步长提升转化效率。

激励视频广告容器每一步迭代都伴随大量的前置思考、归因分析、严谨实验，经历多轮迭代最终完成流程框架搭建，后面我们仍要思考如何通过设计方法，在现有的框架上进一步提升转化效果。

提转：内容化与奖励玩法助决策

在广告创意视角下，通过内容信息命中用户诉求、满足心理期望能够提升转化效果；在用户目标视角下，我们希望充分发挥激励机制，给予用户更多丰富的奖励交互与玩法，持续获取收益与满足感。

1、增益信息前置，助力转化决策

轮播推荐词：推荐词轮播的形式来营造场景内互动氛围，在一些节日期间通过契合节日的情感化文案，让内容更贴合节日营销氛围，同时将落地页中的优质广告卖点、数据生成的热度等多元的营销信息前置，助力用户决策。

行动号召词：不同广告内容之间的转化文案存在差异化的表达，通过符合广告内容的决策性文案披露，将固定文案升级为营销目标及类型特征文案，辅助转化决策，在容器内每一个元素都应该作为广告创意的一部分。

2、分段奖励计时，引导视频完播

点击率、转化率随视频播放时长的数据变化，发现呈现正相关的趋势，我们希望用户能够选择看完视频，核心思路是将用户从低变现效率场景，引导至高变现效率的场景，由此我们通过两段计时奖励的设计形式，激励用户可以拿到更多奖励并将视频看完，考虑多种不同场景以及理解成本的问题，最终选用两段奖励计时组件的方式。

3、彩蛋营造惊喜，提升转化

为了更好的匹配各大电商平台调起类广告的预算，大促期间的突然出现的礼物彩蛋为用户营造节日惊喜感，在点击行为后，红包元素的弹窗与彩带动画形式来承载金币奖励与氛围，奖励感知的触达能够提升用户的获得感，同时在奖励弹窗上进一步承载调起任务，从而更好的满足客户营销诉求。

4、强化转化组件，增强奖励触达

延续以上惊喜感奖励满足促转化的思路，针对下载类广告，我们在转化组件上进行与奖励内容的结合，在任务计时完成但并没有形成转化的时机下，通过变色与光效视觉吸引来传递奖励信息，通过强化奖励感知和转化组件来助力转化决策。

写在最后

激励视频广告至今经历了多个不同的阶段，如何在商业效果与用户感知之间选取一个平衡点，一直都是激励视频广告的长久的设计课题，目前也只是一个开始，还有很多的设计提转机会点等待我们去深挖，相信在不久的将来能够探索更加多元的激励玩法，发现更多契合用户诉求的场景，为更好的价值生产不断迭代功能与体验，我们希望能够给予用户、客户、平台更多的价值增益，做用户喜欢、客户满意、平台有利的商业设计。

作者：百度MEUX
来源：站酷

一、认识帕累托法则

1.帕累托法则的背景

19世纪末，意大利经济学家和工程师维尔弗雷多·帕累托（Vilfredo Pareto）发现，自家花园中80%的豌豆产自于20%的豌豆荚，在随后研究土地所有权和财富不平等的问题中，再次发现意大利 80%的土地属于 20%的人。
20世纪初，由管理学家约瑟夫·朱兰（Joseph Juran）将其命名为帕累托法则，即80%的结果是20%的原因造成的，并且号召关注「重要的少数」而不是在「琐碎的多数」当中投注精力。后续在经济学中得出结论（80%的财富掌握在20%的人手里）更加证实了帕累托法则的观点。

2.正确理解80与20

帕累托法则有很多不同的叫法，如帕列托法则、关键少数法则、二八法则、巴莱特定律、最省力的法则、不平衡原则等，后续笔者将其称为「80/20法则」。
其实，80/20法则是一个较为抽象的概念，可以理解为：大部分的效果由少数几项关键的因素来决定。在实际的场景中，“大部分”不是精确的80%，“几项关键因素”也不是固定的20%，数据会有所浮动，可能是70%+30%或者90%+10%，但不管这些数字如何波动，其背后蕴含的规律（集中的投入将产出大于预期的结果）是不变的，并且生活中存在的许多不平衡现象，都与这个规律相当接近。

3.可适用范围

80/20法则并不受人为直接控制，更多时候是自然而然的形成，其适用领域非常广泛。早期大多数用于社会、经济、管理以及工程等领域，而在80年代末就已经有设计师将其设计领域，在各行各业中，已经有大量的案例证明了 80/20原则：

• 人类80%的科学发明，来自于20%的人口
• 社会上20%的人占有80%的财富
• 城市80%的交通，集中在20%的道路上
• 20%的客户为公司贡献了80%的收入
• 公司80%的收益来源于20%的产品
• 20%的网站获取了 80%的网络流量
• 20%的常见软件错误导致了80%的系统崩溃
• ......

4.设计领域中的运用

70年代中期出现图形化界面，而到80年代末，80/20法则就已经被设计师引用在设计规范当中，后续经过不断的发展及优化，现已深入设计中的方方面面，PM用来处理KPI、UX用来划分权重、UI用来决策版面布局等。
界面设计中该如何应用80/20法则，这就需要设计师时刻注意如何让用户更快找到目标、如何更顺畅的完成任务以及如何拥有更愉悦的心理感受。例如80%的用户只会用到20%的功能，那么设计师就应该将80%的时间、精力集中在这20%的功能上，不断迎合用户需求以及使用体验。

二、产品如何应对80与20

1.关键性的20%

80/20法则能够帮助我们提供决策思路、梳理设计方向，通过前面的了解，我们应该清楚了产品80%的用户只会用到20%的功能，而80%的收益也恰恰来自于20%的付费用户，甚至低于20%。
虽然一直呼吁尽量满足所有用户，但产品团队的重心始终要围绕着20%来进行，从产品到设计、再到开发测试，都能以此为方向制定问题的解决方案。

2.非关键性的80%

任何一款产品都不能忽略主次，每隔一段时间就要重新评估功能价值，以备后续的更新迭代，针对非关键性的80%切勿耗费过多的精力，以免喧宾夺主，不仅得到不好的反馈、还会带来不必要的损失，吃力不讨好。
对于已经过期的核心（曾经20%）功能，需要及时降低权重以及精力的消耗，不然即便是掌声一片、也可能无法变现。

3.仅关注 20%有风险

用20%的部分创造80%的价值，并不意味着只关注20%的关键性指标、其它的就可以被忽略，这样做表面上看是挺诱人，但会让其他很多指标停滞，呈现出产品过度优化的情况，造成短时间内隐藏的负面影响。
团队应该要有众览全局的眼光，考虑到各指标间的相互影响，可视情况而定将时间和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是将大部分用在关键性指标上即可。

三、在UI设计中的运用

在UI设计中，我们会将主要精力花费在20%的页面设计上，例如APP底部标签栏的几大主页或其它重要的一/二级页面，会花费更多的心思去构思不一样的布局、表现手法，将设计功底凸显出来。而剩下80%的页面就相对机械化，会使用一些常规样式以及复用的方式像搭积木一样快速完成，成本之低、效率之高毋庸置疑。
同一个页面的设计方式也是如此，设计师将大量心思放在首屏及位置靠上的功能上，待超过一屏后下滑时，设计也会逐渐轻量、组件化，这有助于节省产品、设计、开发更多的时间。

1.排版布局（F型）

用户浏览屏幕时，眼球移动的顺序通常都是从左到右、从上到下（基于网页浏览眼动测试），这种移动轨迹很像字母「F」，这也让F型布局成为网页设计中效率最高的方式之一，所以设计师通常会将重要的信息放在左上角或左侧，不重要的信息放在右侧。
如下面这张眼动测试图，F型布局也正好诠释了80/20法则合理性与可行性，在页面中20%的关键区域，吸引了用户80%的注意力。

2.功能入口设计

很多产品因为业务功能的庞大，一股脑的将信息全部展示出来，看起来十分臃肿，用户不能快速找到自己想要的信内容，就会失去信心。
优酷APP首页将热门频道和点击频率较高的频道显示在顶部导航中，如精选、电视剧、电影、最新院线等，而其他更多的分类则隐藏在频道选项卡中，将少量（≈20%）重要的内容放在明显的位置，目的就是为了让大部分用户更快触达，提高了产品的易用性。

3.选项列表设计

在一些选项列表中，由于选项数量的庞大，会给用户增加使用难度。
例如，使用美团购买火车票在选择地址时，面对超长的地址列表，逐个查看或通过字母筛选，都要花费一定的时间和操作成本，即便可以通过码字搜索来完成，但因为自行输入有很多的不可控性，能让用户选择的就不要让其输入。对于地址列表，除开自动定位和搜索历史，运用80/20法则就能很好的解决这一问题，系统将约20%高频选择的热门城市作为单独的模块放在全部列表之前，提高了大部分用户的搜索效率。

4.极简风格设计

极简风格的界面设计跟80/20法则在精神上保持着高度的一致，剔除多余、无用的元素，而保留的每一个元素都是有目的、有针对性的，也是绝对必要的存在。在极简主义设计中，视觉上简单干净，大部分都是通过通过留白来衬托关键性元素的存在，让用户更加聚焦于主要功能/信息。

四、与其他法则的纠葛

1.与奥卡姆剃刀的结合

奥卡姆剃刀指出「如无必要，勿增实体」，需知页面中每多一个元素都会增加视觉“噪声”，意味着用户需要花费额外的时间和理解成本，对用户体验的影响是很大的。那么问题来了，当产品需要增加一项需求量小但确实存在的功能，该怎么处理？
这时我们可以将奥卡姆剃刀原则作为最终的评判标准，是否需要增加上述所说的功能，就要看看能否很好的控制团队开发成本和用户体验成本。其实在80/20法则中，很多小众但确实存在的功能需求基本很难抵消所造成的用户体验损失，所以即便实现了这个需求，也很难分配出20%的精力去维护与迭代，甚至“俺耳盗铃”般的将其遗忘，但这个视觉“噪声”一直存在，如果事先能分析出这种结果，这个需求根本不需要增加。

2.与长尾模型的对抗

在2004年长尾模型才被提出来的时候，很多人认为这是在颠覆80/20法则，它们的曲线长得很像，但结论完全相反，那条长长的“尾巴”（非关键的80%）所占据的长度几乎与头部的（关键的20%）高度相当，这说明收益虽低，但这么多数量的累积，依然值得重点关注。所以有很多企业在采集差异化战略时运用了长尾理论，例如小米搭建的全品类商城用的是长尾理论。
乍一听好像很有道理，难道80/20法则被推翻了吗？事实并非如此，长尾理论的成立必须要满足两个条件，第一是尾巴真的足够长（小众需求确实非常多），第二长尾巴能被用户发现（庞大的用户量），这两个条件缺一不可。例如京东、淘宝、微信、支付宝等，其前提都是建立在大规模、且海量的用户资源之上，不管多么隐蔽、多小的动能，总能拥有一些不错的曝光度，所以才能发挥长尾模型的作用。
说道这里，大家应该就明白了，那些中小型的产品对长尾模型大多是望尘莫及，所以在你的产品规模、用户量没有达到一定的级别之前，就不要妄捧长尾模型，用好80/20法则就好。

五、结语

80/20法则在实际工作中是一个相对普遍的定律，它能让我们灵活思考设计问题，更好的为用户服务，虽然80/20法则也存在一定的争议，但还是适用于觉绝大多数的场景，在关键时候使用，能帮助我们准确的找到问题点，在有限的时间和精力下快速作出优化决策并、关注核心功能，最终达成目标。

作者：大漠飞鹰CYSJ
来源：站酷