很多网站仍然在使用老旧的页面设计，比如国内一些企业官网，万年不变的相类似的模板，外国的则是hero页面，带CTA按钮，三栏式的布局。这些设计不能说是不好的设计，很实用，用户能够预测展示的内容，也容易找到需要的内容。但是正因为可预测，用户没有新鲜感，没有期待，所以我们找了一些不仅打破常规，也依然有良好用户体验的网页设计。
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计，用户研究、交互设计服务。
接下来是精彩的UI设计赏析
蓝蓝设计秉承设计优秀，不断超越的理念，诚信敬业、专业耐心的工作作风，一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。10余年专注努力，300+案例磨练。我们在ui创意设计，用户体验与交互设计，各种类型软件界面设计，国际化标准和流行趋势，进行过不断的学习和实践。蓝蓝设计提供的是可以信赖的ui设计服务，我们内部有一套管理要求，比如去客户现场每周一次的检视和沟通、内部提案会议、每天下班前的整理反馈成果发邮件、随时沟通的qq、电话，阶段性的汇报和进度记录整理。多劳多得的奖励机制，客户满意度评价奖励机制，鼓励大家用心、平和、耐心、勤奋、创新的做事.
（以上图片均来源于网络）
（精美流程图设计）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
ui界面设计之网站设计案例欣赏(一)
设计尺寸一直都是设计师最热衷讨论的问题，讨论到最后结论总是一个死板的尺寸，很少有人去讲也真正明白背后的逻辑。今天的设计杂谈就带大家来了解一下，设计尺寸背后的逻辑以及设计尺寸如何去定义。希望之后在大家的交流中不要再去纠结我的设计尺寸究竟应该是多少？还是那句老话，耐心看完，你一定有所收获～
我先说结论，常见 B 端设计稿尺寸建议采用 1440×820，因为去除浏览器顶部页签以及地址栏高度 80px，因此高度上为 820px 而不是大家常见的 900px
相信很多 B 端产品设计师都是从 C 端产品中转型而来。想要搞懂设计尺寸的基本逻辑，我们先搞清楚大家熟悉 C 端产品的情况。在移动端设计尺寸上的定义，我们只需要考虑 iOS 设备与安卓设备之间分辨率的区别。而在目前，大多数移动端设计稿都是采取 iPhone 12 尺寸即：375 x 812 的分辨率
（这里就不讨论什么物理分辨率以及设计分辨率等内容）
因为移动端也会存在多个分辨率的情况，我们针对其他不同的尺寸，通常采取简单页面一稿适配多端，只针对核心页面进行多分辨率的适配。上面我们算是理解了作为移动端的分辨率的基本情况。而设计稿的尺寸是从何而来？大家想想，为什么我们在移动端设计稿的尺寸会从以前的 iPhone 8（375×667）转移到 iPhone 12（375×812）呢？
我个人认为会有以下几点：
1. 主流性
由于 iPhone 12 类的手机尺寸占比逐年增高，早期的 iPhone 8 的分辨率已经不再合适现如今手机的屏幕尺寸。因此决定分辨率尺寸的第一个因素便是这个分辨率的市场占有率。由于手机全面屏时代的到来大多数手机的屏幕比例都演化成类 16:9 的尺寸，因此参照 iOS 的生态下，我们的设计稿就会有如此的转变
2. 兼容性
作为移动端最为基准的设计尺寸，它一定要具备兼容性才能成为基准的尺寸。兼容性即能够通过该尺寸进行向上、向下的拓展，方便在一些主要页面中多尺寸的设计，比如：iPhone X 的尺寸，可以进行拓展成为 iPhone 8、iPhone 12 Pro Max 以及各类安卓端产品。减少设计稿因分辨率所带来的差异性
搞清楚了移动端的逻辑，我们再去思考一下桌面 WEB 端的情况呢？
因为 B 端产品的特殊性，在互联网中的分辨率数据只能作为一个辅助的参考（比如百度浏览研究院的数据），更多对于尺寸的定义还是来自你用户使用的设备。比如我们在一个针对销售的 CRM 系统中，销售使用的场景有两种：
首先通过用户访谈了解到大多数销售都是采取移动办公的形式，因为销售需要对不同的企业进行登门拜访，拜访完成会跟进一些销售记录。因此对于电脑分辨率会相对较小。对其分辨率的数据埋点得知，分辨率以：1440×900、1366×768 两种为主。第二种场景下，用户以 1920×1080 分辨率为主，主要是市面上的办公显示器多为 24 寸即 1920×1080然后想要去寻找作为设计稿的尺寸也与移动端一样，需要满足：主流性、兼容性两种不同特性的需求。因此在我的设计稿中，会采用 1440×900 的尺寸，因为它更容易兼容且更为主流
OK，我再举一个反例，在我之前做过的一个线下诊所系统中，通过走访我们了解到，几乎所有的医生都是配备的 24 寸显示器，分辨率也都为 1920×1080。
因此在尺寸的选择上就没有必要去一味的选择 1440 这一尺寸。
首先显示器的分辨率并不能代表我们的实际设计尺寸，就像在 iPhone 的设计稿中，会有 StatusBar 的存在，会预留上半部分空间
因为目前，大多数 B 端产品都是通过浏览器的方式进行呈现，大家也都知道电脑的浏览器中（Chrome 浏览器为主），还会存在页签高度以及当前网址、书签栏（书签栏大多数是隐藏的，因此不算进内），而想要真实了解设备中一屏的高度，就还需要对上面的分辨率尺寸进行处理：
电脑分辨率 – 页签高度 – 网址栏 – 书签栏 = 设计稿真实高度，即：1440×820 尺寸进行设计
因此想要让自己的设计稿被前端进行完整还原，就必须将浏览器页面当中的很多因素考虑进去。类似于我们去设计移动端的小程序，他也会有顶部固定的区域进行展示。
文章来源：优设 作者：CE青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对于一直做 C 端产品设计的同学来说，面对复杂又陌生的 B 端业务，难免会有些头“秃”，设计师该如何应对？或者说我们如何更好地完成项目？并挖掘和发挥设计价值？B 端产品通常具有较高的业务门槛和业务深度，对于设计师也具有一定的挑战性，本文根据自己的这一年的 B 端工作经历，总结了一些设计方法以及自己的经验。希望会对处在这个领域感到迷茫的设计师有所指引和帮助。
B 端产品业务目的明确，业务逻辑和场景相对比较复杂，所以对设计师的要求更高，要更清晰理解 B 端业务，下面是我转 B 端产品设计时的一些思路：
针对之前一直做 C 端的我来说转战到 B 端业务，也面临着两个端的设计反差，B C 端的商业属性、产品定位、用户人群、视觉呈现、业务逻辑/流程都不尽相同，这将是一场知识迁移的过程。
需要转变自己之前的整个设计思路和角色定位，从之前被动接需求做图，只做执行输出设计稿，转被动为主动。也深知设计和产品的配合就是互相成就，互相补位。面对之前不太熟悉的 B 端那些较为复杂的业务场景和逻辑，尽量让自己在和产品需求对接时，提前介入，思维前置，全链路思考主动提出对产品的一些想法，难点或疑惑点都可以，也可以帮助自己梳理需求，了解从根本要解决的问题是什么，需求背后其核心是达到什么用途与目的，也想办法去收集来自用户、业务方的反馈，或主动去进行竞品调研，用户调研，这样不仅可以让我们更清晰的了解用户需求和业务场景，在这个过程中，往往也会更容易挖掘出需求的突破点，找到更好的解决方案和更有价值的驱动点，为业务赋能。不再只做被动接受的工具人，也会要求自己去做“项目推动型设计师”，尽量让自己全链路的参与其中，在每个环节寻找可挖掘和贡献的价值点。
转变了自己的定位后，由于自己负责的 B 端项目，是之前没有接触过的业务，很多业务场景无法使用设计 C 端产品时的同理心来对待，又有较高的业务门槛和业务深度的，首先我认真系统的学习业务涉及到的一些相关知识，可以帮助了解自己手里的设计工作的业务细节，和产研团队多方面沟通产品的需求，弄清每个步骤的业务逻辑，不懂可以多问多学，在产品评审需求的环节，一定要将业务逻辑理解透彻再考虑应该如何进行设计实现。要问问为什么业务流程是这样，每一个页面的跳转每一个功能的用途以及业务含义是什么等等，多出几版样式进行探讨最优方案。
设计工作的开展前，首先需要分析产品的背景是什么，要做什么，要提供用户什么服务？调研分析一下它的竞品状况是怎样的？现在是什么发展阶段（一般 b 端的产品竞品是极少的），不管是网上查找还是书籍搜寻了解一些行业内的资料，也可以找一些间接竞品吸取灵感。了解产品的目标用户群有哪些（用户画像）？不同角色的用户会有哪些权限？以及分析业务存在哪些重要的流程，背后设计的意图和产生的价值是什么，要解决用户或业务上的哪些痛点。进行了初步的业务分析以后，大致分析下使用场景，在需求分析阶段，要对产品本身和行业本身有一些基本的认知。
B 端产品的逻辑较为复杂，在交互及体验上的要求也要更为谨慎。所以设计上需要更加克制和理性，B 端产品虽然视觉上交互上的整体要求没有 C 端那么高，但是需要做到每一个功能点能够清晰明确的展示，并且让用户知道每个功能按钮或页面的使用意图。避免功能堆砌关系混乱。
在产品设计之初，需要全面考虑，把握产品设计的大方向与业务发展的一致，同步搭建页面通用的设计框架，统一的视觉设计语言，通用的组件的规范，可快速复用提效设计，即可把更多的精力投入到梳理产品逻辑及交互方式和功能的视觉表现上。也要时刻与产研团队保持沟通，从技术和设计层面综合考虑，哪种视觉呈现方式更合理，哪种方式更提效更稳定，支持的场景更全面…确保当前产品方案可行性。全面打造产品体验的一致性，实现有序、统一的操作体验，总之核心重点：界面清晰易懂，用户的操作门槛低，能够快速的使用产品，高效、专注完成任务。
项目上线后，及时复盘总结也尤为重要，这也是我接下来要重点去做的事情，可以通过回顾和思考，来归纳分析自己做的成功与不足的地方，把那些对后续有帮助的、复用性高的经验加以总结，沉淀自己的一套方法论。复盘是设计师自我提升的有效方式，也可以赋能团队为团队提效，提升自己的价值。
啰嗦说了这么多，比较细碎，不乏逻辑凌乱的片段，但也算自己对 B 端设计的一些想法吧～B 端产品承载的信息和逻辑比较复杂一些，所以需要对功能层级的划分呈现多考虑一点，需要有清晰的逻辑，多站在企业用户的角度去考虑，使任务能够精准化触达，毫不拖泥带水是设计 B 端产品最重要的工作。
文章来源：优设 作者：58UXD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
那些关注用户体验的人们经常问我一个问题：什么是B端的用户体验？它与C端的用户体验有何不同？作为一名过去5年多主要从事B端IT产品的设计师，在这里给大家讲述一些我的想法。
首先，B端产品通常有2种类型：企业内部产品（Internal Solutions）和企业对企业的服务产品（B2B）。
企业内部产品的用户体验设计有一些独特性：
很遗憾，几乎所有企业内部产品或项目都被严格的保密协议（NDA）保护着。
绝大多B端项目都是为特定用户提供的专门内部流程。这意味着除了那些每天盯着它用的用户，其他任何人都可能不会看到你的设计。即使你设法获得了将其放入自己作品集的权限，也需要抹掉所有敏感的数据才行。
不过幸运的是，大多数有足够能力来构建自己的定制IT解决方案的公司通常规模很大，而且它们的品牌可能带有足够的“影响力”，这样，项目身价得以抬高，也能让设计师进入面试的下一步流程。
设计企业内部所用产品的优点：你的未来用户将会是你的同事们。因此，在进行可用性研究时，你无需担忧任何层面的法律问题。另外，由于大多数内部项目都是为了优化和改进现有的工作流程，你的用户往往会非常愿意配合你的调研工作。因为设计不当的产品让他们的工作饱受折磨，因此尽早获得反馈对他们来说是最有利的。
但这其中的弊端是，由于你的同事们需要平衡全职工作，你很可能无法占用他们的宝贵时间。如果你能解决这个问题，他们通常会提供比您预期更多的反馈。
关于B2B的一些潜规则
对于C端产品，如果太丑或不好用，消费者可以拒绝使用。而B端产品即使学习成本比较高，但企业仍然可以“命令”所有员工学习这些用于开展业务的专用软件。
B2B产品最终将出售给业务决策者，然后再推给（最终）用户。他们更关心的是量化提升效率（efficiency）和安全性（security），同时预防错误（preventing errors）。大多数组织都在寻找一种解决方案来替代和/或优化现有流程。
这并不是说企业软件不应以用户友好为目标，但通常情况下，只要能够实现某些被企业视为至关重要的目标，其他能省则省。对底线（bottom line）的影响有时会成为最重要的因素。
全球各大企业的用户体验设计领导者仍在争夺一席之地，以证明优质设计的价值。不幸的是，许多企业的用户体验设计师只能在满足业务目标、技术要求和用户需求之间无奈徘徊。
像在大多数项目中一样，在企业领域里，如果可以证明更好的用户体验可以量化地提升生产率，比如可以节省金钱，这样你就有了一个绝佳的机会和挑战。
如果你在B2B领域工作，可能会很熟悉“鲸鱼用户（whales）”的概念。通常，他们是带给我们最多收入的客户，因此在某个特定产品的路线图中拥有极大的影响力。由于较少的鲸鱼用户简化了需求收集和确认过程，有时你的工作会非常顺畅，但不幸的是，这也可能导致你忽视掉很大一部分用户群体的意见。
我们见过诸多“被需要”的功能看起来并不适合大多数工作流程的案例（因为这是鲸鱼用户的特性）。通常，决策只是为了“去执行”，因为销售团队已经在下一个版本中承诺了这一点，而这个核心客户占产品收入的40％。这通常会使得产品对于其他用户而言就有些随机且不合逻辑了。
通常而言，在设计师进入管理层之前，他们很难影响到销售团队等强大的利益相关者的决策。潜在的利益冲突无疑是需要整个设计团队共同去面对的，大家需要平衡产品的长期愿景和立竿见影的“快速制胜”二者之间的冲突，以便为产品提供可拓展的设计和构建道路。
几乎所有财富500强的公司都是通过并购而成长为庞然大物的。
每一次的并购，都会将一个完全不同的系统和工作流程修补到现有的系统和工作流程中。很多开发于90年代的软件仍在诸多大型公司中运行。尽管从概念上看，“整合一切（consolidate everything）”似乎很容易，但是协调数据库和系统的过程着实很繁琐，且需要足够的时间。
B端用户体验的大部分工作是将用户从一套旧版（有时是手动）的工作流程中解放出来的艰巨工作。这涉及到对用户目标及多个系统的深入了解，需要我们列出规划，识别冗余和协同效应，然后将其与边缘案例相结合，以检验它产出的结果是否与当前操作模式的产出一致（如果不能优化的话）。
尽管过程并非总是如此艰难，B端软件依旧比C端复杂得多，因为即使其概念是“从0开始做新系统”，其数据还是全部来自于一堆与之配套的旧系统。在系统级别上思考流程、提出正确的问题并有效记录文档的能力是此类项目中最有用的技能。
我不是开发人员，所以我不知道我从Google里找的这张图片是否是能够准确展示典型的后端体系结构。
我所知道的是，对于每个项目来说，开发人员都会创建一个外观相似的图表，该图表展示了数据的来源和去向，它非常复杂，并且在提取，存储和推送数据时可能受到一系列限制。
大多数企业或组织需要遵循一套严格的政策法规，并且通常受到各种管理要求的约束。
常见的例子包括：法律/隐私要求（例如GDPR），国际化要求（例如日期格式，语言），无障碍（例如WCAG＆ARIA），安全性等等。
这些规则中的每一条都来自于某领域的专家、某类别的检查清单（checklist）抑或是一系列更为模糊情景下的最佳实践（这些实践基于特定的方案和用例）。C端APP监管日渐常规化，同时，由于诸多企业或组织掌握的敏感数据极具货币价值，其受到的监管和审查也在不断增加。
当然，这个问题的答案显而易见，你的确切问题是存在第三方解决方案的，但是由于某些规则或规定，你可能根本无法使用它。
由于必须满足很多这样或那样的标准，对于用户来说，最终的设计往往不太理想，虽然乍一看可能并不明显，但这也是历史上许多政府软件的设计看起来很蠢的原因之一。
与上面的观点类似，B端产品用户的独特之处在于他们对变化的抗拒心理。这意味着你需要认真思考工作流程改变后的结果，诸如使用不同的颜色，或是调整页面内某个按钮的位置等简单变化。
我们甚至还没有谈及信息架构。当你开始做信息架构时，卡片分类研究可能会告诉我们现有的导航设计是完全错误的，或是导航里的某些分类实际上应该嵌套到其他地方。不过你很快就会发现，当实际执行这些变化时，你将面临巨大压力。
知道何时依赖自己的研究和专业知识，何时推进，何时放慢步伐是很关键的，这样你才可以避免疏远过多的用户。毕竟对于这些用户来说，过去几年的工作流程已经根深蒂固，他们需要时间、资源和指导来学习或重新学习这些系统的使用。
尽管他们可能会拒绝改变，但这绝对不代表我们作为UX专业人士就无法引领他们拥抱变化，我们要做的便是了解他们的痛点并在设计时时刻考虑到用户的最大利益。
许多旧版的B端app产品都有一个共同点，那就是它们的信息密度非常高。
理想的解决方案也许是隐藏所有不必要的信息，仅显示刚需的信息，但是“隐藏掉错误内容”的风险可能非常巨大，以致于不得不将其保留在不断增加的的实体屏幕上。
这就容易导致打包的屏幕设计极大增加了用户的认知负担。而这些负担之所以被用户“接受”，就是因为他们必须且只能“学习”如何使用该软件来完成工作任务。
此外，对于许多管理或监控类的产品，用并别模式查看信息进行比较和参考是非常重要的。复杂的非线性（Complex non-linear）的工作流使得界面设计更具挑战性，因为许多选项都需要既可随时访问又不能妨碍其他操作。
有个很好的例子：为什么Bloomberg（上图）的UI看起来比Robinhood（下图）复杂1000倍？
结论便是，B端产品的界面里，需要牺牲留白空间以展示更多信息的情况并不少见，因为用户经常需要查看更多信息以便完成更复杂的任务。
随着公司或组织越来越依赖技术，B端产品的用户体验设计将成为许多公司的主要竞争优势。
如果你具有拥抱复杂性、平衡多个利益相关方观点，并在约束内进行创新的能力，你便能轻而易举的杀入B端软件设计领域。
随着机器学习等诸多振奋人心的新技术出现，各种业务会带着其庞大而杂乱的数据库排队等候。UX将站在如何产生有价值的见解的最前沿，以便弄清用户想要从这些数据中获取什么以及如何对其进行操作和访问。
虽然在很长一段时间里，dribbble（追波）上的精美视觉设计仍将占有一席之地，但更繁重的任务还会落在那些不起眼的B端设计师身上：比如设计电子表格、数据集、草图原型、投入调查以及数小时与用户和利益相关者的交谈和测试。
最终出现在用户面前的内容可能并不完全整洁和简单，但请你相信，在成为备受瞩目的明星B端产品前，其每一处基准点都经过了UX设计师的严格审查。我们的用户已经全力以赴地使用这些产品努力工作，我们的产品也通过清除一些障碍来减轻用户的负担，这已经很不错了。
翻译：April.H 审校：戴猫子 | UXRen翻译组 #366译文
作者：Yichen He
原文标题：《Designing for enterprise vs. designing for consumers》
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在BAT、TMDJ等一线互联网企业，决策平台又称决策支持平台、管理会计平台。但实质都是实现业财一体化后，提取业务、财务数据，自动生成各种管理报表、财务报表，智能预警风险、预报业务前景，通过Dashboard或驾驶舱的形式展现给管理层、决策层，本文作者暂以管理会计平台展开讨论。
管理会计，从定义来看有狭义与广义之分。狭义的“管理会计”通常是指财务会计概念，包含“成本管理”和“管理控制系统”两部分。
而广义的“管理会计”则是指运用一系列的分析手段，通过挖掘财务数据、业务报告等中潜在信息，对企业财务状况、经营成果、现金流量和产品竞争力进行分析，辅助经营者进行决策，指出业务、财务风险隐患，预测未来趋势，赋能业务，以数据驱动企业发展。本次讨论的后者，即广义的管理会计。
管理会计目标的实现，不是简单的某一个系统或产品能承载的，需要设计一系列的产品矩阵，包括基础的核算系统如ERP、成本结算系统、预算系统、报表系统，这个矩阵就是管理会计平台（以下简称管会平台）。
管会平台的主体或用户的不同使得所产出的管理报表（以下简称管报）指标也有所不同。用户一般分为外部和内部2个大维度。
1）外部用户
投资人偏向于分析企业的盈利能力和资本保值增值能力，如净利润率、资本保值增值率等指标；债权人则侧重分析资产负债水平和偿债能力，如资产负债率、利息保障倍数、权益乘数等指标。
2）内部用户
应收会计岗则侧重应收账款的质量、收入的趋势，如应收账款周转率、收入环比或同比、速动比率等指标；资产会计岗偏向于分析资产的利用率、所带来的价值，如资产周转率等指标；而企业管理层或决策层会关注企业经营活动和财务活动的一切方面。
管会平台在设计时应考虑满足这些不同用户的需求，并通过权限、角色实现千人千面的效果，不同用户展示不同指标集和报表。
管理会计不仅属财务一个分支，更是财务在企业管理中应用的升华，财务的4个功能层次形象筑起管理会计的坚实基础：
做好管理会计，核算是基础，分析是关键，管控是抓手，赋能是核心。
分析不仅仅是传统的报表分析，而是基于大数据、机器学习、AI等高科技手段，自动化、准确、智能的实现风险预警、趋势预测，引领、驱动企业发展。
举个栗子：每月关账后财务都要做财务分析，收集各种业务、财务数据，结合相关指标，以发现业务中的问题。如做杜邦分析法，分析净资产收益率。
继而计算总资产净利率，权益乘数，销售净利率、总资产周转率……通过实际与预测的横向对比、基期与历史的纵向对比，找出各种指标异动原因，实质是分析企业的赢利能力、营运能力、偿债能力。
但这些通用的指标需结合企业实际情况、历史数据，并体系化形成产品，才能分析出症结点所在，这也是管理会计平台建设的意义与努力的方向。
如何搭建管理会计平台（以下简称管会平台）呢？互联网管理会计平台，其实并不是一个单一的平台，而是由众多关联子系统构成，通过多个子系统间协同合作完成管理会计目标的系统集。
从前端用户的视角来看，获取管理报表是一个很简单的动作：查询相关主体公司管理报表或分析结果即可，但从系统角度来说，管理会计的建设过程实际涉及了众多财务子系统的协同、及复杂的系统逻辑。
一个典型的财务产品架构如下图，涉及多个子系统。典型管理会计产品分为生产端与消费端，架构图如下：
在简要介绍各子系统功能前，可以先看以下简化版的管会平台产品架构图，典型的管会平台产品架构可以划分为四层结构：支撑层、数据层、核心层、应用层：
用来支持管会平台的基础服务和基础设施，包括容器云、安全服务、存储服务、消息引擎、任务高度、短信服务、证书服务等。
汇集业务、财务数据，以大数据或数据湖的形式承载基础数据，包括ETL、BI、大数据等。
管会平台的核心模块，分为清结算、财务中台、ERP、预算、管报中心五大块；
1）清结算
主要由计价、清分、结算、对账组成，是业务活动在财务的2个反映之一，解决互联网业态中的成本费用结算，与传统企业的成本计量方法不同的是，一般是按个别计价法对不同时间段可以阶段性、阶梯性等复杂业态成本计量。
2）财务中台
主要针对业务中非审批类的收入、资产折旧、摊销，自动对账、生成分录，并传递至ERP，主要包括：入账规则、数据校验、分录生成、主数据等。
3）预算模块
预算功能，包含预算编制、执行等，结合BPM审批流，实现费用控制。
4）ERP
财务核心入账平台，包括总账、应收、应付、资产、财报等。
5）管报中心
管会平台核心输出层，包括生产端和消费端2部分，生产端分为指标集、规则引擎、模板、预处理、智能诊断等模块。消费端主要是管报产出结果的展示即驾驶舱、手工确认或修正。
管报中心是核心中的核心，后面第三章会详细展开。
通过支撑层、数据层、核心层提供的服务组合起来，对最终用户、运营管理人员提供的系统。在产品架构层面体现为前端展示层、业务域和过程域。前端展示层主要是结果展示的形式，如PC端的web页面、移动端的APP或H5、小程序等。
业务域是上游的各业务系统，而过程域是管会平台所依赖的流程工具、特征数据，如供应商、ORG、BPM等。
管报中心由生产端和消费端组成：
生产端流程图如下：
【指标集】：配置各种指标，如“速动比率”、“产品成本费用率”等。一旦配置不得删除，只可修改或禁用。上游是科目与计算规则，但校验关系不在此模块。
【模板】：指标、预警或诊断信息的集合，可导入或手工增加。在预处理和结果展示时，将会调用此模板。
【规则引擎】：由“科目规则”、“计算规则”、“指标规则”、“预警规则”四部分组成。
在每一层指标中，有实际值、预测值，二者之间的偏离度，就是预警条件；“好”、“差”就是简单的信息模板，可把具体原因也纳入进来。
主因判定实质是一个由上到下的递归过程，如此例中，A公司获利能力（即资本报酬率）相对较差(3.08%<7.41%)，这是第1层判断。
再往第2层，经过分析可知这不是因为总资产净利润差(2.55%>2.37%)，而是财务融资能力差(1.21<3.21)。如此类推，直至分析至底层科目级指标。
【预处理】分为“重分类”、“平衡试算”、“定时任务”、“结果存储”四部分，是报表产出的运算过程。其中“平衡试算”属前置数据校验，检查数据是否达到报表可用程度。“定时任务”与“结果存储”属技术性过程，“重分类”根据会计要求设置，具体由财务确定。
【智能诊断】是对具体的报表进行分析，由“诊断开始（数据准备）”、“规则判断”、“预警判断”、“结果确认”四部分。其中结果确认包含结果展示、消息分发、手工修正等。“规则判断”与“预警判断”是对【规则引擎】中的“指标规则”、“预警规则”的具象应用，实际应用中可引入AI、TensorFlow(机器学习)等技术手段提升诊断的准确度。
在生产端准确、及时生产出数据后，消费端就不愁无米下锅了。一般通过Dashboard或驾驶舱展示，这一块通常需要BI或数仓部门的协助，效果图如下：
综合以上，管会平台的每个子系统并非孤立的，通过产品架构相互关联。产品架构与技术架构相辅相成，产品架构决定需求和设计，技术架构决定技术框架和性能。包括AI在智能诊断上的应用、数据域的实现等。
好的产品架构将这些不同用途的功能进行聚类整合，因此，【才听途说】建议将管会平台拆分成多个子系统，明确业务边界，减少系统间的耦合，提供优质、的管理决策支持服务。
并根据前端业务场景的需求随时进行调整变化以适应业务的发展，如规则引擎部分基本可由前端配置即可，减少后端开发与产品上线时间。
不同互联网公司，业务体量甚至有成千上万倍的差距，如京东集团内不同BU的体量及发展速度造就其系统复杂度也差异巨大，高度复杂的管会平台甚至需要数百人的技术团队来设计、开发、维护。
不过，对于体量较小的互联网公司来说，几人的团队即可搭建一套系统并维护日常运营。
互联网企业作为金融科技业界引领者，建议在系统开发前期（从0到1），以MVP形式，小步快跑，快速迭代，尽快上线、降低开发成本，优先开发主要需求、及较重要的子系统，或并行实施几个子系统，如ERP的实施、清结算的开发、管报中心的开发可以并行。再做次优级子系统，逐步迭代。
随着订单量的提升及业务复杂度的增加，不同BU甚至不同BGBU的接入，管会平台复杂度将指数及上升，系统处理起来会越来越吃力，若无良好的规划，各子系统耦合度越来越高，杂糅在一起，系统灵活性越来越差，无法跟上业务的发展。
因此，管会平台的中长期发展（从1到100、到∞），极其考验我们的业务梳理能力，及对业务进行拆分、产品架构的能力。
特别是目前行业内还没有体系化的管会平台建设经验可参考时，更考验我们的综合能力，包括财务专业知识、业务理解力、产品规划能力。
但万事不要怕，只要抓住产品设计精髓，即设计的产品应满足逻辑完整、业务功能明确、可扩展（发展方向明确但业务边界清晰）、灵活（非耦合）等特点，一切将会迎刃而解。
随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。
为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
1. 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在 1.2:1 时，人眼较难看到元素；当对比度在 2.0:1 时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在 1.6:1 左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。
2. 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。
3. 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
4. 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。
图表排版是指各元素在图表中的尺寸及布局等，对于 B 端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对 B 端后台类产品的排版规则，力求保证用户图表的使用体验。
1. 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到读取信息的目的。
“迷你图”尺寸最小，舍弃了 Y 轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每 4 像素 1 个数据点，Y 轴坐标刻度不超过 5 个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
2. 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能解决。
第二个常见问题是刻度的说明文字过长。
如果是 X 轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜 45°~90°的办法(如文字全部为中文，可用竖排代替倾斜 90°)，缓解信息过密看不清的情况。
如果是 Y 轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。
3. 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对 B 端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。
色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。
1. 辨识度
辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，即深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。
2. 统一性
色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在 50%-70%，把饱和度限制在 75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。
3. 颜色量化与工具
量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式，它能够将人眼对颜色的感知的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL 模式在诞生距今不到 20 年间，已被一些先锋设计师用于数据可视化的呈现中。
但是 HCL 作为小众色彩模式，目前设计软件鲜有支持，造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末，帮助大家直观的查看和使用 HCL 模式颜色。
数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让 B 端不再有难懂的数据。
附：色板及 HCL 工具
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
让我们先来回顾一下表格的基本构成，最上面的为表头，横为行，纵为列，内容区每一组展示数据区域为单元格。
表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加。
这里我推荐表格的”四维自检法“，对我们设计的表格是否合理，做出一个标准的判断。
分别是：信息降噪、呼吸适中、易读、详情查看。
精简表格内容
当表格的字段非常重要时，一定要将字段全部展示出来让用户更清晰地了解数据。
如果你的用户只需要了解部分字段，那么全部展示是没有必要的，只需展示最重要的字段即可。
自定义字段展示
不同用户想看的的信息侧重不同，有时候我们无法准确判断用户看重哪些字段，还可以让用户自定义展示字段。
精简字段名称
当我们去设计表格的时候，通常会发现表格需要承载的信息量是非常大的，有时候为了表现出字段的准确含义，在定义字段名称时往往会非常的长。但是当这些字段同时出现在一个表格里时，过长的字段名称，又会显得冗余，让本就不大的页面空间更加杂乱。
所以当我们设计表格的时候，我们可以分析字段名称，对字段名称做精简，看看是不是少一个字用户就无法理解字段的含义。
添加字段说明
当字段名称过长，又必须展示，才能有效的理解字段含义时。我们可以定义一个专有名词代替，并且在字段名称后使用添加字段说明的形式，来对字段加以说明。
这样一来用户既可以清晰的理解字段含义，又可以在有限的页面空间下获取到更多的数据信息。
简化表格样式
早期表格的设计，出发点主要以拟物形式，以最接近现实表格的样式去设计。
但是随着互联网的普及度加深，极简的表格设计，使界面更加轻盈，让用户更加专注于数据内容。
去除纵向列的分割线，仅以浅色的横向分割线区分行，但是要注意分割的颜色不能过于浅而缺乏辨识度，部分人群对颜色的辨识度会偏低，显示器的硬件性能也会影响颜色的可辨识性。
减少不必要的颜色区分
表格设计中一定不要使用过多的颜色区做状态或操作的区分，过多的颜色细分会使表格变得更加混乱，影响用户体验。
对状态的区分，仅用轻量的颜色区分即可，操作栏保持主色按钮色。
如何定义单元格的高度
了解单元格的结构，以及实现单元格的基本逻辑，有助于我们更好的去把控我们的设计。
单元格内的可控尺寸包含：单元格高度、文字字号、文字/段落行高、文字上下间距。
我们基于视觉呼吸感，赋予各个元素合适的尺寸，我在这里给出一套参考方案：
如何定义列的间距
首先我们要了解列的两种类型，第一种是定宽列，第二种是自适应列。
顾名思义就是它的宽度是固定的，比如：第一列我们设置宽度为200px，第二列我们设置为300px，五六七列分别设为100px，那么我们这个列表的宽度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。
就是列会随着分辨率变化而产生宽度的变化，比如：列表有五列，我们定义列表的宽度为界面宽度的50%，假定界面宽度为1200px，那么列表宽度就为600px，而每一列的宽度则为120px。此时我们将界面的宽度缩小到600px时，那么列表的宽度就为300px，而每一列的宽度则为60px。
在实际设计案例中，我们往往会面临由于每一列的内容不同，所需要的宽度也就不同，我们希望在列不多时可以保持宽度自适应，但是如果每一列都做成自适应列的话，内容多的列无法展示全内容，内容少的列空间又会很大。
所以，固定列 + 自适应列的综合运用，可以让我们更好的实现我们想要的设计方案。
然后，我们一起来了解列的结构。每一列分为内容区和左右间距区，在固定列里面内容区和左右间距区都是保持不变的。但是在自适应列却不同，它的内容区是随界面分辨率变化而变化的，左右间距区的宽度是保持不变的（在代码里间距区被叫做Padding）。
当表格字段数量不确定时，通常我们会为自定义列的内容区写一个最小值(min-width),以确保字段很少时可以自适应宽度，字段较多时仍然能保证完整展示表格数据，不影响对内容的阅读。
当表格的列过多又必须全部展示时，固定必需固定的列(如姓名、任务名称、操作项等)，其他字段横向滚动。
列的对齐方式
基于人的惯性浏览顺序，设计每列合理的对齐方式，能够辅助用户更的完成工作。
不留空白格
从心理学的角度讲，人对未知事物会产出恐惧情绪。我们在设计表格的时候，要考虑到表格的各种展示情况，非特殊情况不要出现单元格空白。
没有数量用“0”表示，没有该项内容用“-”表示。
选择合适的分页器
表格是一种可以承载大量数据的组件，当数据行数很多时我们通常会选择分页器，使用分页器有哪些优点：
收起低频的操作项
当界面空间有限、表格列数很多时，如果表格的操作项过多，会占用很多页面空间，需要有选择的展示，将低频操作项收起，用点击更多按钮去触发选择。
如果是1.0的产品，我们可以和产品经理沟通，分析每个功能按钮的优先级。
如果是上线的产品，我们还可以通过按钮点击PV(页面成功访问次数)，来了解按钮的使用频率，做出按钮优化。
行的排序
如果产品没有特殊需求，那么默认最近创建的在最上面。可以用带有排序的表头，让用户自定义排序。
详情入口
如果表格的内容项很多，我们通常会在表格上只展示部分重要数据，而其余数据放在详情页面展示。
作为详情页面的入口，通常会有两种设计方式：
详情页的展开形式
如果详情内容不多，没有新开页面的必要，我们可以采用展开行、弹窗、抽屉的形式，但是要注意尽量减少过多的样式，给用户增加疑惑感。如果详情的内容很多，而且有编辑的需求，建议采用新开页的形式。
建议根据详情页信息量的多少，以此采用展开行、弹窗、抽屉、新开页的形式。
数据过滤是表格页很重要的组成部分，包含搜索、筛选、标签页。
这一部分的主要作用是帮助用户，梳理表格数据信息，精准定位所需的数据项。
1. 搜索
模糊搜索
模糊搜索是指在用户搜索意图不明确时，搜索引擎将用户的查询与待检索的内容进行模糊匹配，找出与查询相关的内容。模糊搜索无法理解用户的查询意图，返回的结果中可能包括了一大批用户不想要的信息，所以在使用模糊搜索时一定要结合自己的实际场景，慎重使用。
搜索
搜索是指用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。根据业务场景不同，我们会查找某一字段，或者是用标签切换不同字段来查找。
筛选器主要是针对内容较少的字段进行查找的一种方式， 通过筛选器的选择可以快速定位所需的数据，取消用户输入的过程，提升查找效率。一般筛选有两种形式，第一种是下拉筛选，第二种是平铺式筛选。
下拉筛选
下拉筛选就是将需要筛选的内容放置于选择器当中，通过点击选择器下拉，来选择需要筛选的内容。
平铺筛选
平铺筛选就是将筛选项的内容，直接展示于页面之上，通过点击选择的方式直接进行筛选。或者可以通过自定义内容的筛选。
如何合理的使用筛选项
当数据内容需要的筛选类目过多时，如何合理的摆放，才能提高用户的使用效率。
如何判定筛选项的使用频率呢？通常会有两种方式：
标签页又叫选项卡，在组件中我们通常叫Tabs，指的是分隔内容上有关联但属于不同类别的数据集合。
默认展示常用项
在使用标签页时，有一点我们要特别注意，通常在B端设计中，我们会把标签页的位置定位在最常用的一个选项。
增加数据条目
如果是订单一类的分页，我们还可以将数据条数，展示在标签右侧，用来帮助用户快速了解到待办数据量。
数据操作即对表格的数据进行操作，首先我们对数据操作进行分类。
按控制范围分:
按操作属性分：
第一步，先判断控制范围
第二步，判断摆放位置
第三步，优化信息层级
以上是操作项和筛选项较多的情况，那么不多时，我们还是要合理利用空间，灵活设计
以上就是《如何设计表格？》的全部内容了，后续还会努力更新更多B端设计分享！与君共勉
文章来源：优设 作者：三斤
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
