前端达人 - 设计每日一贴---北京兰亭妙微/UI设计公司

首页

272024-5

雾里看花？这些是你能用上的产品思维

前端达人

你也许会困惑，明明绞尽脑汁想出方案但为什么总是不被认可，为什么每当自己来讲述设计方案时总是无从谈起。在走出新手村之后，你是否也会思考，这一切背后是否有什么规律可循。今天咱们略微换一个视角，盘一盘这背后的细节。

——

我们作为设计师这个角色，对于设计思维并不陌生。而在实际的工作中只根据设计者常有的思维显然是不太够的，将视角聚焦在更上游，你是否在心里追问为什么会有这个需求呢？为什么要做这一改动呢？

在实际的工作场景中，设计思维和产品是为是相辅相成的。多方位的思考可以更好的理解需求把控设计方向，帮助你更好的发挥自己的作用，设计出更符合用户需求和商业目标的优秀产品。

1.1 产品思维是什么

产品的目的是为用户解决问题满足用户的需求。而产品经理需要权衡用户场景和业务三者，发现问题分析问题解决问题，从而实现产品不断的迭代和优化。产品思维则是解决问题的思维方式。这里我根据之前的工作经验，我挑关键来总结了一下。

用户导向

理解产品的核心用户群体，这其中包含了解他们的需求偏好和行为习惯。为用户提供好用方便的功能，提升用户的产品满意度。

数据驱动

利用产品数据分析方法和工具，分析用户的实际实用情况，从中找到产品优化的机会点，迭代产品方案。

市场分析

了解产品处在的市场竞争环境和行业发展趋势，通过竞品的特点和优势从而发现产品的差异化和创新点，获得更好的市场竞争力。

用户增长

面对存量市场，掌握用户的增长的方法策略，通过产品设计和优化实现用户和业务的增长。

产品策略

了解产品策略的定制和执行过程，包括但不限于产品定位，目标设置，功能规划。制定产品的发展策略，对东产品的发展和优化。

产品思维并不是照本宣科的工具，而是解决问题的切入点。不同的产品经理对产品思维也有着不同的理解。如今高度竞争的环境下，只有为用户创造独特的价值才能在市场中脱颖而出。这也变相的提高了设计师的要求，能否快速准确的把握需求方向产出有效的设计方案显得尤为重要。

1.2 产品思维可以帮助设计师做什么

更全面的思考问题

很多时候受限于视角，设计师往往会执着于界面的视觉表现。耗费更多的精力试图吸引更多的用户注意力。而掌握一定的产品思维可以帮助设计师在设计环节更好的思考和参与。设计出更符合用户和业务预期的界面，发现用户真实的痛点从而有针对性的优化设计方案。

举个例子：设计师通过对复杂流程的简化，视觉降噪等方案，聚焦核心功能，改善用户的交互体验和视觉感受。

优化产品设计

通过对数据的研究，深入分析用户行为和市场环境，发现产品的改进方向。通过数据分析和竞品分析等手段，发现用户需求与市场趋势，为产品的功能设计和界面优化提供有力的支持。

举个例子：设计师根据用户反馈的结果调整页面的布局，优化产品的交互设计，提高产品的易用性和吸引力。

提升团队协作效率

具备产品思维，可以让设计师和产品经理无阻力沟通，通过与团队的有效沟通和协作，共同推动产品的开发和优化，提升团队的协作效率和产品的质量，达到事半功倍的效果。

举个例子：和产品共同研讨产品需求文档，和开发团队讨论实现方案。确保项目的快速推进。

提升职业竞争力

具备产品思维的设计师在职场更具有竞争力，可以在不同的工作场景中承担更多的责任和挑战，为团队带来更大的价值。拥有较好的产品思维可以帮助设计师保持对行业趋势和技术发展的敏感性，在职场竞争中也更具优势。

现在让我们立即切换到工作视角，怎样在原有的工作流程中应用好产品思维尤为关键。我们作为设计者，了解产品思维是为了更好的发散思考和推敲设计方案。授人以鱼不如授人以渔，面对不同领域不同项目的纷繁需求，不妨多问几个问题，在不断的提问中找到答案。

2.1 明确设计目标

设计师需要明确项目背景推导出正确的设计目标。这要求设计师时刻需要将项目的目标和成果放在首位，之后的设计决策和行动都需要和这些目标保持一致。另外注重跨团队协作，合理分类时间和设计资源，将会让你更加游刃有余。切忌钻牛角尖的闭门造车，务必确保项目按时交付。

自问自答：

项目组都有谁，自己负责的哪些板块，我的目的是什么？
项目进展到了哪里，什么时候需要交付，什么时候需要上线？
设计方案确定提交后怎样快速和开发团队对接实现落地，期间是否有什么问题？

2.2用户研究

设计师进行用户研究是为了更好的了解用户的需求和行为，确保产品能够满足用户的真实需求。用户研究的方式很多，设计师可以根据团队需要和项目时间排期进行合理的安排。

成功的用户研究可以帮助设计师验证设计假设的有效性，降低产品的开发风险，减少不必要的时间和成本损耗。

自问自答：

你的用户是谁，使用场景是什么，需要为他们解决什么问题？
你的用户是如何使用这些功能的，这期间是否还有优化的空间？

2.3 竞品分析

竞品分析是一种通过研究和对比竞争对手的产品和服务细节，从中发现优势和劣势，进而指导自身产品设计和优化的方法。对于设计师来说，可以帮助我们更快的了解市场和行业的整体情况，为产品的设计提供给更多的参考依据，另一方面可以快速发现自身产品的问题找到优化的方向。

需要注意的是，竞品分析需要带着目的进行，切勿走马观花泛泛而谈。

自问自答

竞品分析的主题是什么，目标是解决当下的什么问题？
你的竞品是谁，他是怎么做的，反馈怎样？
我们可以借鉴什么，改善什么？

2.4埋点与数据回收

虽然设计师并不会直接参与埋点的设计，但为了更好的捕捉用户的行为数据，在设计中可以根据情况和优先级将埋点纳入设计考虑。

设计师和数据分析的沟通可以避免后期添加埋点时，出现和设计的不匹配的尴尬状况。数据是验证设计合理性的重要指标，很多时候设计师需要一个具体的成果反馈来复盘和指导之后的设计工作，多多留意最终呈现页面效果和用户反馈，并不是完成上线就可以将这些抛掷脑后了。

终极问题：

如何证明这是个改版方案是合理的

3.1设计师的痛点

在实际的工作中，往往会由于不同的产品特点和团队的配置，设计师不得不身兼多职面对更为复杂的情况。在开发流程中设计师始终处在“夹缝之中”的位置，而站在公司的视角设计师这一环节既不能直接产生收益也不能为整体降低成本。在进入职业生涯不久我开始思考为什么设计师处在这样一个被动的处境呢，跑遍了前端后端数据和产品小组，“厚着脸皮”旁听了各种冗杂的会议，以及多少次和前辈的交流中，我才慢慢发现了背后的“难言之隐”

依赖需求方案

设计师通常是根据产品需求方案确定以后再参与工作的，设计师的工作很大程度上取决于产品需求的制定，因此单从设计视角来看有一定的滞后性。设计师接到产品需求后没有办法理解背后需要解决的核心问题，也很少思考和判断需求的合理性，很容易和产品的最初想法产生偏差。

反馈的延迟

设计师的工作成果也需要后期数据回收和复盘，而在实际的工作中，往往是一个需求结束后就需要急匆匆的应对下一个需求。如果不去留意，很多时候作为设计师并不清楚最终交给开发的设计稿到底取得了什么样的数据表现，到底哪一个方案才能更好的实现目标。这也使得设计师很难进行经验总结。

有限的时间和资源成本

当前市场竞争相对激烈，各方产品都需要在有限的时间中尽可能的抢占市场，而设计师需要在较短的时间中给出合理的设计方案，同时和产品以及开发团队不断进行细节的调整，这也使得设计师面对的压力和挑战更大。

较低的话语权、只多不少的需求使得本就焦虑内卷的设计师处境更加雪上加霜。但是反过来想想，既然改变不了外在的环境，是否有办法可以让设计师们由内而外的主动争取些什么呢，我能想到的答案既是化被动为主动，尽可能的参与项目的推进，同时和上下游保持沟通，从而提升设计师在团队中的存在感和参与感。而产品思维，是一块刚刚好的垫脚石。

2.2产品思维的训练

讲到如何提升产品思维，我总会想起一位前辈曾经说过一切技巧惟手熟尔。你也许会说每天都在一成不变的做着公司的内容实在提不起兴趣，不过没有关系。产品思维的提升并不需要过多一板一眼的训练。就像你走入繁华地段的商场，明明入驻着大差不差的品牌为什么客流量却有着明显的不同？是清晰明了的导视路牌？是更为合理的动线规划？是明亮舒适的灯光统一的装置风格？用户体验是多元的，因此很多时候善于发现身边各种各样的体验细节，便可以拥有较好的产品感知。关于具体的方法，我有两个方向可供大家参考。

保持好奇心

打开手机想想看哪些应用是高频使用的，同样的音乐类应用你更习惯用哪个呢，在联想一下身边的朋友同事在听音乐这件事情上更喜欢哪个应用呢。横向对比一下便可发现，虽然是同类型的产品但在体验细节上其实有很多门道可以考究。或者你是否留意过最新出现的产品和刚刚更新的功能？为什么要有这样那样的改版？用户的反馈是怎样的？

刨根问底多问一步为什么，而不是将自己禁锢在工作范围中的一亩三分地，在不经意之间，其实你已经迈出了第一步。

知识整理与沉淀

如果你还有多余一些的精力，不妨进行更深入的学习。不过好消息是，你想要学习的很多技术都可以在网络上轻松找到。定期翻看设计平台分享，相关短视频频道，公众号文章，可以让你探索更深入更广阔的知识。不过先别急着开始，走马观花的阅读往往并不会留下什么印记，试着整理这些碎片知识并总结收获和心得。不要急于阅读量收藏量而是争取收获更多自己的理解才尤为关键。

PS：关于这部分我之后也会有更多内容的分享，多多关注喽，谢谢各位啦。

3.3 啰啰嗦嗦写在最后

在工作的第二年，我开始感到枯燥和厌烦。很多次面对频繁紧急加塞的产品需求和一头雾水的业务指标，我时常情绪激动的和当时的组长抱怨吐苦水，但由于人员紧张，并没有什么实质的改变。后来的一段日子我试着躲避，觉得做好分内的任务就得了，每天出几版方案到时候由着他们定夺吧。就这样又过了一段时间，从前得枯燥和厌烦变本加厉，而我好像游离在各个环节之中，渐渐我的状态变得很差，每天的工作毫无成就感可言，我开始认真的思考，究竟为什么会这样。

事情的转机出现在不久之后组里来了新的伙伴，一方面分担了很多任务压力，另一方面由于是刚刚毕业的职场新人，很多工作细节都需要帮他快速上手。也在这期间我发现了自己的浮躁和心急，我试着系统的总结过往的经验和思考，在这个过程中我开始和产品以及前端的伙伴更多的交流和请教。在找不到思路的时候试着切换到其他视角看待问题，去刨根问底无数个为什么，竟发现不知不觉中一切似乎都往积极的方向改变了。

或许我的想法与你也会有所偏颇，不过没有关系，每当观点不一致的时候也意味着我又发现了一个新的视角。不同的链接使得我们不断的发现和探索，正如那句话说没有人是一座孤岛。

在这里我非常期待与更多的优秀前辈交流，也很十分荣幸为后辈提供一些思路和帮助。

真诚的感谢诸位。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

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

评论(0) 浏览(418)

222024-5

B端数据可视化设计经验分享第四弹：图表设计

前端达人

欢迎小伙伴们收看《B端数据可视化设计经验分享第四弹：图表设计》，本节内容将带领小伙伴们从零开始认识图表，了解图表在数据可视化中的作用，图表的构成，不同图形可以可视化哪些类型的数据等等。希望大家看完后能对图表有个相对完整的认知，在以后的工作中可以得心应手。

一、什么是图表？

大家对图表一定不陌生，图表（chart）就是一种通过图形化的方式呈现和分析数据的工具，就是

将表格中的数据进行二次加工，将复杂的业务数据转化为更加直观的、有趋势性、有时间线、空间性的图形数据

，协助用户根据数据变动而变更相关决策，最终以实现降本提效的目的。

不同部门或者角色在公司中会需要各种类型的数据信息，以支持其业务运营和领导层决策需求。这些数据信息的准确性和及时性对于公司的发展和竞争优势至关重要。

产品部门关注的主要是用户行为数据、收入数据、用户量数据；运营部门关注用户活跃度数据、营销效果数据和用户反馈数据；技术部门关注系统运行数据、技术指标数据；用户增长部门关注用户生命周期数据等。

二、一个优秀图表设计的标准是什么？

要看一个图表是否优秀，主要看它是否符合GLAD原则。GLAD原则是一个在数据可视化设计中常用来确保图表质量和有效性的方法论，它主要包括以下四个要素：

GLAD原则

G原则：优质数据和洞察

G原则是指Good Data and Insight。G原则在探索性数据分析过程中着重提升图表的商业价值，G原则的关键是“有价值的商业信息”，这一点就要求在准备数据的时候，应该剔除那些商业分析价值不大的部分，而主要留下的是有高价值密度的信息。除了要求有高价值的信息之外，还需要有比较好的Insight，也就是能洞察数据中的高价值信息，并以较为通俗易懂的形式在图表中表达出来。

优化前

例图点评：虽然图表本身看上去好像并没什么问题，图形选择的也对、颜色搭配也得体，读者也能理解图本身要表达的意思。但是，

没有商业价值，即我能看出茅台拿铁卖的最好，然后呢？这是哪个阶段的数据？不知道。有没有持续的表现数据？也不知道。

优化后

例图点评：修改后，从数据中提炼出更有价值的商业数据，在时间维度和空间维度都有体现，简洁明了的同时，也具有商业参考价值。

L原则：更少的视觉噪音

L原则是指Less Noise。简单说就是视觉降噪。

B端产品是高度商业化的产品，有用有效远大于好看，

这要求B端设计师对艺术的追求要适可而止，商业数据分析不是追求艺术造诣，不是做一张海报去吸引人的眼球，而是提供商业价值并能快速让人理解。过于酷炫、花哨、浮夸的修饰并不会给图表带来任何附加值，反而会增加读者的阅读负担。

例图1

例图点评：修改前，有些国家由于人口稀少，导致相关数据也非常小，难以在图表中展示，造成整个图表花里胡哨且复杂。修改后，把过小数据的选项折叠为“其他”，默认显示主要几个较大国家的数据，当点击“其他”图例的时候，再显示详细的数据信息，使数据展示更具有侧重点。

例图2

例图点评：图例2是dribbble上的图表作品，左侧是K线图，右侧是柱状图，它们的问题在于花里胡哨，却缺少必要的刻度，形式大于内容，过于追求好看的反面案例。

A原则：准确的表达

A原则是指Accurate Expression。通俗讲，就是要根据不同的数据类型和不同的商业目的，采用正确的、适合的图表类型，如表现占比就要用饼图、百分比柱形图，表现趋势就要用折线图、面积图等，且要保证图例的清晰性、刻度的准确性，避免模棱两可的图例和不准确的刻度。

错误例图

正确例图

例图点评：图例的本意是对比2023和2024年不同品牌手机的销售额占比，是基于时间维度的对比图，但错误图例却用了两个饼图，无法直观的表现特定品牌在不同年度的销售额占比的对比情况。正确的图例则直接用了柱状对比图，一目了然。

D原则：明确的标记

D原则是指Dinstinct Mark。D原则的作用是帮助读者加快理解信息的速度，它强调

突出重点

，需要把通过数据比较得到的差异部分、体现洞察信息的内容利用明显不同的颜色、形状、文字标注等手段进行区别，让读者的视线聚焦到那里去。

三、图表的构成要素

图表是由：标题、图例、纵轴、横轴、图形、图表范围及其他辅助元素（如水位线、网格线、刻度值、提示信息等）构成，每一个元素都有它存在的意义。不过在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。

图表的构成

3.1标题

标题即图表的名字，是图表必不可少的元素。标题要求简短明确通俗易懂，视觉上通常需要字体加粗。标题下面也可以跟一行副标题，用作对标题的补充说明。

信息类标题：提供理解数据所需的所有信息，回答「何事」、「何地」、「何时」这三个问题
描述类标题：突出图表中显示的主要数据模式或趋势，描绘出图表所要讲述的故事

标题常用的位置有3种，左上、顶居中、底居中。

标题常用位置

3.2图例

3.2.1图例的作用：

区分不同类别数据的标志
开启/隐藏类别显示

如果图表中只有一个数据系列，则可以不用显示图例。

常见图例展现形式

3.2.2图例的位置

图例的位置并没有严格限制与要求，常见位置是上、下、右。

图例的位置

3.2.3图例的颜色

在选择图例颜色时，不要用色相过于接近的颜色，否则会容易看混或看错。

要规范图例颜色使用，一般分为两种情况：

常用的图例颜色（颜色本身代表着行业中的某种含义），此类颜色需要是固定色值，无论哪个 chart 中，都是这个颜色；
无特殊含义的图例，可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色，图例整齐划一。

值得一提的是，为了照顾色弱、色盲群体，有些产品会增加无障碍花纹来进行辅助识别，提高辨识度。这种设计很有温度，毕竟设计以人为本。

Echarts的无障碍花纹样式

3.2.4图例的数量

一般来说图例不要过多，基本要遵循米勒定律，即7±2法则。

米勒定律

所以，5个以内是最佳图例数量。如果遇到比较复杂的图表，则可以进行尝试进行图例合并，如上面讲GLAD原则的时候的L原则案例，除了多个图表可以共用一组图例（前提是图例代表的意思一致），还可以把过于零碎的比重要的数据图例合并为一个“其他”。

如果图表中只有一个图例的话，则可以不显示。

3.2.5图例名称的长度

根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示，鼠标hover时再显示完整名称。

3.3坐标轴

3.3.1什么是坐标轴

坐标轴是定义域轴（叫什么）和值域轴（有多少）的统称。由于可视化图表绘制的数据大部分都有一定的现实意义，因此我们可以根据坐标轴对应的变量是连续数据还是离散数据，将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。

坐标轴分类

3.3.2常见坐标轴组合方式

常见二维图表坐标轴分为X轴（横轴）和Y轴（纵轴），多用于表示趋势、排名、比较的数据结构。常见搭配是1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

轴的常见组合方式

在三维图表里，会多一个Z轴。

3.3.3坐标轴容易被忽略的设计细节

轴线一般只考虑是否显示，例如柱状图、折线图等，在有背景网格线的情况下，会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。

轴刻度通常不显示，只有在肉眼无法定位到某个标签对应的数据点时，会显示刻度线，辅助用户定位，比如折线图，或抽样显示的柱状图。

网格线用于定位数据点的值域范围，跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。样式为虚实线的最多，斑马线由于感知过强，一般不用。

轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义，无需单独显示标题/单位，「如无必要，勿增实体」。

没有必要就不要多此一举

连续轴/时间轴进行适当抽样。连续轴/时间轴，是由一组前后包含同等差值的等差数列组成，缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠，我们可以利用抽样显示的手段来避免这种情况。常见的抽样方式是等分抽样：当多个标签在 x 轴无法完全显示，优先保留首尾标签，其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数，能被 1 和其本身以外的数整除。如果间隔数为质数，就需要「-1」转成合数。

举个例子：9个标签，间隔数是 8，能被 2 或4整除，即分成 2 等分和4等分。8个标签，间隔数是 7，无法等分，需要在间隔数基础上再「-1」，转成合数 6 后再等分，此时最后一个标签显示在倒数第二个数据点上。

分类轴是由几组离散数据组成，独立存在无紧密逻辑关联。若采用抽样规则，隐藏一些标签，用户对图表认知就会有困难，违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转 45 度，若 45 度仍显示不下，继续旋转 90 度。如果 90 度还是放不下就要考虑结合图表交互或反转图表。

分类轴标签字段有长有短，长文本标签直接旋转不仅影响美观，而且也不利于用户阅读。如果数据量比较少只有 2~4 个，长文本标签更适合水平展示，显示不下省略即可；如果数据量比较多，就限定字符数后旋转。

3.4图形数据

图形数据是图表中最为明显的地方，即图表的核心元素，如折线图中的折线，柱状图中的柱，饼状图中的圆。

图形数据的使用规则：

边界要清晰，不可虚化；
多个数据同时显示的时候，要保证每个数据都能清晰的看到，可以采用透明度来保证所有数据的显示。

关于图形的选择，第四章会着重介绍。

3.5提示信息

提示信息用来标识出图表中重要点的数据信息，相当于一个popover浮窗，鼠标指针在图形中hover的地方通常就是该点的数据信息。需要注意的是：重要信息尽量简化，只需要展示重要字段。

3.6水位线

根据不同产品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动效果。这个时候就需要有个水位线了，它起到警示的作用。

水位线的表现形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。

水位线可以是一个，也可以是多个，视情况而定。

3.7图表范围

图表范围就是时间宏变量，用来切换数据的时间区间，如今天、本周（最近7天）、本月（最近30天）、本年等。

四、常见图形分类及使用场景

图形种类多种多样，个个身怀绝技，而设计师则是作为挑选者。想要做好图表设计，就需要对不同图形有较为深入的了解，并对数据进行正确理解后，与之匹配正确的图形，用可视化的方式将数据表现出来。

大多数人可能熟悉折线图、饼状图、柱状图，但是对其他的图形可能就不太了解了。本章节将带大家了解更多的图形和对应的特性，以便更好的运用和设计。

常见的图形可以分为七大类：

趋势类、比较类、排名类、占比类、流程类、分布类、关系类。

4.1趋势类图形

趋势类图形指的是对一段时间内数据的展示，如单个或多个分类数据之间的趋势变化和比较。常见的趋势图形有折线图、柱状图、堆积柱状图、面积图、蜡烛图、瀑布图等。

4.1.1折线图

折线图（Line Chart）常用于显示数据在连续时间上的趋势变化。通过折线连接各数据点，突出数据的上升或下降趋势，适合用于时间序列数据的展示。

折线图构成

4.1.2柱状图

柱状图（Basic Column Chart）用于展示多个分类的数据变化和同类别各变量之间的比较。

柱状图构成

如例图，既能展示店铺每天销售额所对应的数据，也能反映出每天份销售额的对比情况，并能通过图形能够快速了解销售额最多和最少的日期。

柱状图还有个进阶用法，就是折柱混合图。顾名思义，就是折线+柱状图的组合。折柱混合图通常使用在多组数据进行对比的情景下，如商场物品销售数据增长或减少，商品价格走势比较等，它可以非常直观的展示数据与数据的比拟，这样就能一眼查看到不同时间段的数据值，通过折线和柱状的形式展现出来。

如例图，通过柱状图能看出每个月的销售数据，而折线图能体现出利润率。当鼠标移入对应位置就可以看到详细数据。

4.1.3堆积柱状图

堆积柱状图（Stacked Bar Chart）是柱状图的变种，可以展示两个或多个数据的变化，以及数据之间的综合比较情况。

堆积柱状图构成

如例图所示，两个店铺每月总销售额用堆积图展示，在坐标轴上的每个品类都有两个数据，可以直观的展示每个品类的数据总量。

4.1.4面积图

面积图（Area Chart）是折线图的变种。与折线图不同的是，其变量数据和坐标轴之间有颜色田中，这样可以更加突出数据的变化趋势，更加直观的体现量的变化。

面积图构成

需要注意的是，填充的颜色要有30%左右的透明度，这样在展示多组数据的时候不会互相遮盖彼此信息。

4.1.5蜡烛图

蜡烛图也叫K线图（K Chart），常用于股市或期货市场（近期炒股的同学可能看到K线图心里会一咯噔）。K线是围绕开盘价、最高价、最低价、收盘价等反映市场趋势和价格信息的。

蜡烛图构成

4.1.6瀑布图

瀑布图也叫阶梯图，顾名思义，瀑布图的形状像挂在高山上的瀑布流水。瀑布图也可以呈现随时间变化的数据，但不同于堆积柱状图的是，瀑布图能够重点突出数据变化的结果，以强调多个特定数据之间的变化关系。

4.2比较类图形

比较类图形主要用于两个或两个以上的类别数据进行比较。常见的类别比较图形有柱状图、分组柱状图、气泡图、多条折线图、子弹图等。

4.2.1柱状图

这里的柱状图与前面讲的柱状图的区别在于X轴是表现类别的，前面例图的X轴是表现时间的。

4.2.2分组柱状图

分组柱状图（Grouped Bar Chart）是柱状图的延伸，它可以在同一数轴上展示各个分类下不同分组的数据情况。如例图为三家企业在产研部、设计部、商务部的人数对比情况，由此可以清晰的看出企业丙设计部人数最少，商务部人数最多的结论。

4.2.3气泡图

气泡图（Bubble Chart）是是散点图的变体，由卡迪尔坐标系（直角坐标系）和大小不一的圆组成，通常每一个气泡都代表着一组三个维度的数据。其中两个决定了气泡在笛卡尔坐标系中的位置（即x，y轴上的值），另外一个则通过气泡的大小来表示。

气泡图构成

如例图，x轴表示季度，y轴表示销售额，气泡大小代表产品所占全年销售额百分比。

4.2.4多条折线图

多条折线图除了可以表示数据随时间的变化趋势，还可以展示多组数据的对比情况。如例图所示，图为某app经营情况的分析，在时间维度上对比下载量、注册量、成交量三组数据及变化趋势。

4.2.5子弹图

子弹图（Bullet Graph）顾名思义，就是像子弹发射轨道的图表。它的数据展示类似仪表盘，优势在于可以表达丰富的数据信息，且占用的空间相对较小。子弹图的数据值是需要提前设计好的。

子弹图构成

如例图所示，差、良、优和目标值、实际值都是作为动态数据呈现的。相较于饼图，子弹图可以更高效的传递信息。

4.3排名类图形

排名图形可以为分类数据进行排排坐，它可以直观的展示最大值和最小值。它的特点是“有序”，数值往往是从高到底依次排列，类似榜单。

4.3.1有序条形图

有序条形图主要用于展示各个分类的数据排名，它是最常用的排名图形，因为是线性结构，对于微小数据间的对比会有很好的易读性。

4.3.2有序柱状图

有序柱状图和有序条形图一样，都可以表现数据的排名情况。区别在于一个是横向对比图，一个是纵向对比图。

4.4占比类图形

占比图形是大家最常见的图形了，主要用于表现分类数据占整体的

百分比情况

。常见的图形有饼图、环形图、堆积面积图、矩形树图、旭日图等。

4.4.1饼图

饼图（Pie Chart）是展示占比数据最最直观的图形了，它是通过饼块的大小来直观的表示分类的占比。但是饼图也有一定局限性，即当占比数值比较接近或者占比分类比较多时，在视觉上就不太容易分辨各个类别的占比情况。

4.4.2环形图

环形图（Donut Chart）的作用和饼图一样，但是环形图的特点是中间区域是空的，所以视觉表现上比饼图要弱一些，中间空心区域还可以用来放标题、图标、数据等。

4.4.3堆积面积图

堆积面积图（Stacked Area Chart）就是叠加数据，不同颜色之间的数据并没有叠加关系，它的整体色块面积是数据总量，不同的分类数据可展示不同的占比情况。如例图，不仅可以展示全球能源消耗总量，切换百分比模式还能展示不同国家消耗能源的占比情况。

4.4.4矩形树图

矩形树图（Treemap）由马里兰大学教授Ben Shneiderman于上个世纪90年代提出，起初是为了找到一种有效了解磁盘空间使用情况的方法。矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。

矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。矩形树图的缺点在于，当分类占比太小的时候文本会变得很难排布。相比起分叉树图，矩形树图的树形数据结构表达的不够直观、明确。

4.4.5旭日图

旭日图（Sunburst Chart）是一种现代饼图，它超越传统的饼图和环图，能表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况。旭日图中，离远点越近表示级别越高，相邻两层中，是内层包含外层的关系。

如例图，对医院进行看病、挂号、取药的流程，用旭日图呈现。比如取药是等号、排队、拿药的父级，其中等号占取药的比重最大。

4.5流程类图形

流程类图形用来显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，这类图形可以很好的表示这些关系。常见的流程类图形有漏斗图和桑基图。

4.5.1漏斗图

漏斗图（Funnel Chart）适用于业务流程

比较规范

、

周期长

、

环节多

的

单

流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。漏斗图

从上到下

，有逻辑上的顺序关系，表现了随着业务流程的推进业务目标完成的情况。

漏斗图总是开始于一个100%的数量，结束于一个较小的数量。在开始和结束之间由N个流程环节组成。每个环节用一个梯形来表示，梯形的上底宽度表示当前环节的输入情况，梯形的下底宽度表示当前环节的输出情况，上底与下底之间的差值形象的表现了在当前环节业务量的减小量，当前梯形边的斜率表现了当前环节的减小率。通过给不同的环节标以不同的颜色，可以帮助用户更好的区分各个环节之间的差异。漏斗图的所有环节的流量都应该使用同一个度量。

漏斗图构成

4.5.2桑基图

桑基图 (Sankey Diagram)，是一种特定类型的流图，用于描述一组值到另一组值的流向。因为首次使用它的人是一名叫Sankey的爱尔兰土木工程师，所以就叫桑基图。

桑基图通常应用于能源、材料成分、金融等数据的可视化分析。

桑基图的构成

如例图所示，可以清晰的看到，从搜索框直接搜索进入酒店详情页的流量是最大的。充分说明了搜索是刚需。

4.6分布类图形

分布图形主要用于展示每个数值在数据集中出现的频次和数量，常见类型有散点图、气泡图、热力图、直方图、箱型图、等高线图等

4.6.1散点图

散点图Scatter Chart，也叫 X-Y 图，它将所有的数据以点的形式展现在笛卡尔坐标系上，以显示变量之间的相互影响程度，点的位置由变量的数值决定。

例图展示的是AB两国男性的身高和体重数据，通过散点图中的数据点分布情况可看出，B国男性的身高远大于A国。

4.6.2气泡图

前面4.2.3里讲过单维度数据的气泡图，这里是多维度的气泡图案例。如例图所示，图中展示了5个维度的数据，气泡的代表地区类别，气泡的大小代表人口总数，气泡颜色代表国家类别，X轴代表人均国内生产总值，Y轴代表人均寿命。

需要注意的是，气泡图的数据大小容量有限，气泡太多会使图表难以阅读。但是可以通过增加一些交互行为弥补：隐藏一些信息，当鼠标点击或者悬浮时显示，或者添加一个选项用于重组或者过滤分组类别。另外，气泡的大小是映射到面积而不是半径或者直径绘制的。因为如果是基于半径或者直径的话，圆的大小不仅会呈指数级变化，而且还会导致视觉误差。

4.6.3热力图

热力图就是使用冷色到暖色的不同颜色表示数据从大到小的权重，或用同色系颜色的深浅来表示数据的多少。热力图可以在坐标轴上呈现数据的大小分布，也可以在地图或图片上使用。

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

评论(0) 浏览(608)

222024-5

这些包装技巧，简单又出效果，不看一会就删了！

前端达人

最近ui课学员开始做结课作业，在给大家批作业的时候，发现很多同学对于包装审美还是差一些，课上给大家实操了很多案例，今天给大家分享几个，比如一组的这块需求分析，包装的就不太行：

有点太随意了，包括文字的排版，还有标题前面的两个圆圈：

如果我来包装的话，一定要加点修饰，不能只是文字，比如加点图标或者加点卡片，我可以先把卡片加上，这样会更加有聚焦的感觉：

这时候我们可以想办法加点颜色区分，比如用产品的主色：

然后可以再给圆圈里面加点图标，或者修饰元素，因为一组同学已经有了一些质感图标的绘制，直接加上就可以了：

然后再加上标题：

我们来对比下第一版和优化后的效果：

这里面其实差的仅仅只是一点点包装审美和用心的态度，技法层面没什么门槛，只有两个质感图标，还都是一组同学自己画的！

再举一个1组同学的例子，他们在展示图表的时候，效果是这样的：

如果面试官用手机看你的作品，能看清楚啥呀，所以如果你觉得自己的作品做的还不错，一定要学会放大展示局部，比如我们这样优化一下：

是不是比刚才更加简洁大气？

所以大家一定要记住，有优秀的东西，一定要拿出来放大展示，我们看看3组同学的展示方式，就优秀很多：

再看5组的一个案例，这张图：

啥问题？是不是太空了，主次也不清晰，左上角的logo快比页面还重了，所以我们一定要先解决画面主次的问题，先把界面变大变饱满：

这时候可以再优化一下左侧文案的排版，稍微有点空旷：

如果觉得层次还是不够，可以把底色融入一个黑圈：

这样的话，把上面黑色的图标页，衔接在一起，就会好很多了：

这是不是比最开始那页的包装强太多了：

所以大家在作品包装展示的时候，一定要注意这些细节，而且是非常细致的细节，有时候真的就是差一点点，感觉就不一样了！

希望今天分享的这几个包装小案例，大家可以有所启发，后面我会经常改ui课同学的作业，尤其是这种细节上的改动，让大家更好的做出精致作品！

加油，兄弟们！

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

评论(0) 浏览(623)

212024-5

B端设计九大精髓

前端达人

五一期间，我阅读了一本设计界的宝典——《B端产品设计精髓》，它系统地向我展示了B端产品设计的世界，我被其丰富的内容和深入浅出的讲解深深吸引，每一个章节都像是一扇窗，让我窥见了B端设计的精彩和复杂，现在我迫不及待地想要把这份感想、收获以及启发分享给大家；我相信这些宝贵的知识能够帮助每一位对B端产品设计感兴趣的朋友，就像它帮助了我一样。

分享目录

一、B端产品的定义

二、B端产品出现的背景

三、B端产品设计的目标

四、B端产品面对不同场景时的两个注意事项

五、设计一个优秀B端产品的四大要素

六、B端产品中的六个一致性设计规范

七、B端表单设计的两个原则及12个思考点

八、常见的五个B端类型产品

九、B端产品中的四个帮助系统

一、B端产品的定义

B端产品本质上就是营造、设计一个高效的、安全的、便捷的“用户使用过程”，帮助用户完成在特定场景下的一系列任务目标。它解决了信息如何在系统内、系统间，以及人与系统间，进行有效、高效的生产、组织、呈现和流动的问题。

B端产品，它不只是冰冷的软件或系统，而是一把开启高效、安全、便捷体验的钥匙。它精心设计了每一个用户旅程，确保在各种特定场景下，用户都能轻松地达成他们的目标，仿佛有一个无形的助手在默默支持。在这个信息如海的时代，B端产品更是扮演着指挥官的角色，它智慧地组织和管理信息，确保数据在系统内部、不同系统之间，以及人与系统之间的流动，既高效又有序，极大地提升了我们的工作效率和决策质量。

二、B端产品出现的背景

1、企业电算化

想象一下，在古老的账房里，算盘的声音此起彼伏。但随着1946年电子计算机的诞生，这一切都被改写。这台由美国军方定制的‘电子数字积分计算机’，不仅计算着复杂的弹道，更预示着一个新时代的到来——电子计算机时代。中国虽然起步较晚，但在20世纪80年代，我们开始拥抱这一变革，并在90年代迅速普及。这不仅仅是技术的飞跃，更是企业管理方式的一次革命。

会计电算化，就是将繁琐的手工记账工作交给了聪明的计算机。它不仅提高了会计工作的准确性和效率，还让会计人员能够从数字的海洋中解放出来，专注于更有价值的财务分析和决策。这是一次从手工到智能的巨大跨越，也是我们迈向现代化管理的重要一步。

2、企业信息化

企业信息化，就像是为企业的运营装上了智能的大脑和灵活的神经。它拆除了企业内部信息孤岛的无形墙，建立起一个畅通无阻的信息高速公路，让数据在各个部门、组织、业务之间自由流动。这种无缝的信息对接，让企业各部门的协作更加紧密，就像乐队中的乐器，虽然各自独立，却能合奏出和谐的乐章。企业信息化的最终目标，就是通过优化资源配置、提升业务管理、实现数据的互联互通，来提高企业的整体合作效率，让企业在激烈的市场竞争中，能够更加灵活、高效地应对各种挑战。

比方说我们日常的的OA办公系统，一个出差报销的申请正常都会有五六个流程，每个流程都对应一个负责人，如果要是内部没有这种OA的办公系统，申请人要挨个挨个去找相关的人签字审批，会占用大量的上班时间，也给员工带来了很多的不方便，有了OA系统，申请人只需要把相关的资料一次性提交到系统，然后等待相关的审批通过即可。

3、企业数字化

在移动互联网、大数据等新兴技术的推动下，企业正站在数字化转型的风口浪尖。这不仅是一次技术的升级，更是一场深刻的管理革命。面对技术的浪潮，企业没有选择，只能乘风破浪，进行数字化转型。

未来的企业将分为两种：一种是从出生就带有数字化基因的数字原生企业，它们在水中自由穿梭；另一种是通过数字化转型重生的企业，它们浴火重生，焕发出新的活力。而现代的B端产品，不仅要服务于产品的直接用户，还要像一位社交能手，连接更广泛的社会网络，满足外部用户和非使用者的信息传输需求，打破信息孤岛，实现信息的自由流通。这不仅是B端产品的挑战，更是它们在数字化时代中的重要使命。

三、B端产品设计的目标

在B端产品设计的世界里，追求的是简洁而不简单。产品应该像一位贴心的助手，用清晰的任务目标和直观的界面设计，引导用户一步步完成工作。它简化了操作流程，让工作变得像流水一样自然顺畅。面对复杂任务，它又能提供清晰的指引，确保用户在每一个关键步骤都能得到及时的反馈。

我们知道，在企业中，有这样一群员工，他们充满探索精神，渴望解决更深层次的问题。对于这些奋斗者，产品设计不仅要满足他们的需求，还要激发他们的潜能，让他们在产品中找到成长和创新的空间。

此外，现代的B端产品不再是孤立的岛屿，而是相互连接的大陆。功能之间的关联性，信息的穿透力，让产品成为了促进企业内部协作和信息共享的桥梁。这样的设计，不仅能够满足奋斗者的需求，还能够提高整个组织的运作效率，让企业在激烈的市场竞争中保持领先。

四、B端产品面对不同场景时的两个注意事项

1、面对专业性高的职业，产品需要严格符合职业习惯

例如，我参与设计过的一个项目“能调平台”，它的目标是打造一个专业人士的得力助手，追求的是为专业人士提供一个他们能够立即识别和使用的工具。这些工具可能对外行人来说像天书一样难以理解，但对于专业人士而言，它们就是清晰明了的指令，能够迅速指导他们完成任务。

2、对专业性不高的职业，产品需要给予更多的关怀，产品需要浅显易懂，不那么“专业”反倒更加重要

例如，我们电脑里面自带的画图软件，它就非常的平易近人，每一个功能模块的摆放，每一个图标的设计是任何小白都能理解的方式，降低了普通用户学习的成本，加速了用户快速上手使用的时间。

五、设计一个优秀B端产品的四个要素

设计一个产品，本质上是设计用户在一些特定场景、特定目标下的使用过程，是设计一系列分散的或者聚合的服务；用户不是为了“用产品”而用产品，更不是为了漫无目的的消磨时间，而是通过产品来获得必要的服务，高效的解决和处理其在业务上、管理上、商业上的问题，帮助他们降低成本，增加效益，最终帮助他们获得商业上的成功。因此想要做好这个服务，我们需要具备以下几个优秀的品质。

1、敬畏用户，理解用户

用户永远是最好的老师，任何一个产品设计师都应该努力抓住各种接近真实用户的机会，真正理解用户，挖掘和分析业务场景。

1.1、了解用户工作内容

了解用户平时工作的内容、机制、处理方式、完成方式、评估方式以及相关岗位。评估方式尤为重要，因为在某些方面用户对产品体验可能有特殊的要求。

1.2、了解用户工作场景

了解用户何时工作、在哪里工作以及怎么工作；尤其要搞清楚用户怎么工作，并且要了解用户工作的困难、压力、强度、周期等重要指标。例如，收银员大部分是收银工作，每隔一段时间，就处于高压、高强度的工作状态。

“一个场景=若干人物角色+若干用户情境+用户体验地图+……”,把可能出现的角色与情境进行搭配，形成若干个“真实”场景的组合，是设计之旅的开始；理解需求和对接设计不再只考虑功能点，更多的面向用户而非面向系统进行设计，从一个个场景出发，思考和完善产品的设计，使这些场景对应的需求得到满足。

2.积极沟通

在工作中多多沟通，把产品经理当成自己最好的伙伴，优秀的B端产品经理往往都是一个领域或者行业的专家，有着很深的业务背景和大量的实践经验，对相应业务的发展有着很深刻的理解和洞察，对产品的客户、用户都有着很深入的了解，是B端产品设计师最好的老师。

3、具备同理心

描述一个场景，本质上是以某种代入感的形式，使应用场景的人产生强烈的参与感，从而理解真实用户使用产品完成一个任务目标的真实感觉，产生相应的同理心，这是产品设计中设计师较高境界的追求，是一种深层次的用户研究方法，也是实现卓越用户体验的关键。

4、积极进行竞品分析

在创新的道路上，盲目冲刺可能会让我们迷失方向，甚至跌入陷阱。因此，尽早开展竞品分析，就像是在出发前仔细研究地图，它能够帮助我们规避风险，找到通往成功的捷径。通过深入了解竞争对手的产品，我们不仅能够学习他们的长处，还能够洞察他们的短板，从而为我们的产品定位和设计提供宝贵的参考。正如古语所说：“知己知彼，百战不殆”。在激烈的市场竞争中，只有深入了解自己和对手，才能在每一次对决中占据优势。竞品分析，就是我们在这场没有硝烟的战争中的侦察兵，它能够帮助我们洞察市场动态，把握用户需求，从而制定出更加精准有效的产品策略。

六、B端产品中的六个一致性规范

一个好的设计规范有助于提高产品的一致性、减少错误出现的可能性、提高开发和实施效率、减少用户学习成本、方便后期追溯检验等。同时，也能统一向用户、客户传递一致的印象，形成一定的品牌价值。

1、一致性的价值

一致性有很多众所周知的好处，如降低认知成本、减少用户学习时间、提高工作效率、提升研发效率等。

2、产品一致性应该包含以下几点：

(1)

布局一致性：

保持某一种类似的结构，因为新的结构变化会让用户思考，而排列规则的顺序能减轻用户思考与记忆的负担。

(2)

色彩一致性：

产品所使用的主要色调应该是统一的，用来传递一致的品牌印象和风格，而功能性色彩也能形成固定的规则，方便记忆与识别。

(3)

操作一致性：

降低用户的学习成本，提高开发效率。

(4)

反馈一致性：

系统对同一种功能和同类信息传递的呈现方式一致，使得用户与系统的沟通更加顺畅。

(5)

文字一致性：

产品中呈现的文字大小、颜色、布局、语言风格等都应该是一致的。

(6)

声音一致性：

产品中各种操作过程的声音，正向的如确定等提示声，负向的如警告等提示声。

联想电脑管家在优化加速、垃圾清理、安全中心、硬件驱动四个模块中都保持了相同的画风，布局、文字和反馈方式也都一样，很好的体现了产品的一致性。

七、B端表单设计的两个原则及12个思考点

B端业务以场景的多样性和复杂性著称，但也是有规律可循的，经过长时间的实战，我发现大量的业务都是以“表单+流程”的方式进行处理的。这些表单和流程的设计都有着极强的公共属性，这些公共属性进行梳理之后，可以形成一些公共的设计模块，不仅节约了设计和开发的成本，还让系统在操作、布局等上的一致性大大的增强，便于用户理解和操作，当然，随着智能化程度的提升，这些经典的设计模式也在不断的发生着变化，甚至可能消失。

1、表单设计的原则

1.1 表单信息力求简约

表单不能设计的过于繁复，要本着以用户实际工作为中心的原则，妥善分组、分区，经过分组、分区后的功能信息会使操作变得更有逻辑性，并根据角色、权限、状态以及使用场景来决定具体的显示方式，默认将不重要的信息隐藏起来，尽量给用户展示一个简单清晰的信息结构。

搜狗输入法在输入法显示器的文字旁边有个问号的小图标，鼠标触碰到这个图标就可以看到对输入法显示器一个完整的解释，看完之后这段注释语又隐藏了起来，让界面看起来更加的简洁。

1.2 要兼顾多角色多场景

在企业日常生活中，几乎每个员工都会跟表单打交道，为了给不同目的的用户在查看和处理表单时有更好的体验，我们需要使用“场景驱动的设计”方法，根据不同角色、不同场景，设计不同的方案。

例如，我日常工作中遇到的一个项目，它在同一个页面需要对IP、端口、地址映射进行颗粒非常精准的搜索以及新增的需求，基于这样的需求，我对每个功能点都做了分门别类的设计搜索及新增功能，这样就圆满的满足了业务的需求；在B端的表格设计中，它更多的是要满足多场景多角色下的功能需求，而不是为了视觉的彰显，在这个模块的设计，功能的实现、页面信息的清晰是第一位的。

2、表单设计的12个思考点

(1) 需要展示的字段还可以更少吗？界面可以更简单吗？

(2) 用户光靠自己，是否能顺利填写单据？

(3) 怎样才能让用户填写更少的信息？

(4) 是否能帮助用户避免大量机械化的录入？

(5) 当无法避免大量录入时，怎样帮用户提高录入效率？

(6) 用户是否频繁在多种录入方式间切换？

(7) 怎样帮助用户尽量少犯错，并在出错的时候尽快纠正错误？

(8) 哪些角色在使用同一张表单？

(9) 在什么场景下使用表单？

(10) 他们主要完成哪些任务？

(11) 他们关心哪些信息?使用哪些功能？

(12) 他们在使用中有哪些特殊需求？

八、常见的五个B端类型产品

1、ERP系统

1.1 ERP系统的定义和功能

ERP是英文Enterprise ResourcePlanning的缩写，即企业资源计划。在当今复杂多变的商业环境中，企业需要一个能够全面掌控资源的智能系统，它就是ERP系统。它不仅涵盖了财务管理、供应链管理、销售与市场、客户服务等核心功能，还包括了制造管理、库存管理、人力资源等关键领域，为企业打造了一个无缝整合的管理平台。

ERP系统的应用范围广泛，它不仅服务于生产制造业，也广泛应用于金融投资、质量管理、运输管理、项目管理等领域。它通过整合企业的所有资源，帮助企业在各个环节实现优化管理，提升运营效率，降低成本，增强企业的市场竞争力。

ERP系统，就像是企业的指挥官，它用智慧和策略，协调着企业的每一个部门，确保企业的资源得到最有效的利用。在ERP系统的辅助下，企业能够更加灵活地应对市场变化，把握每一个商机，实现持续的发展和创新。

这是我体验过的一个项目管理的系统平台，在这里面可以清晰的看到一个项目的搭建到完工的整个流程以及它的进展，对于管理者来说，这是一个很好的项目管控平台。

2、CRM系统

2.1 CRM系统的定义和功能

CRM是英文Customer RelationshipManaqement的简写，即客户关系管理，通过满足客户个性化的需要、提高客户忠诚度，实现缩短销售周期降低销售成本、增加收入、拓展市场全面提升企业赢利能力和竞争能力为目的。

客户，是企业最宝贵的资产。而CRM系统，就是企业守护和增值这份资产的智能管家。它通过细致入微的客户关系管理，帮助企业倾听客户的声音，记住客户的喜好，从而建立起稳固而长久的客户关系。

CRM系统的功能强大而全面，它不仅能够维护老客户，寻找新客户，避免客户资源的流失，还能提高客户的忠诚度和满意度，降低营销成本，提高销售效率。它帮助企业管理客户的每一个细节，从企业信息到联系方式，从网站互动到每一次服务的反馈，都记录得清清楚楚，为企业提供了一个全面、精准的客户视图。

在这个竞争激烈的市场中，CRM系统是企业赢得客户、保持竞争力的利器。它让企业的服务更加贴心，让客户的微笑更加灿烂，帮助企业在商海中乘风破浪，勇往直前。

下面就是曾经自己设计过的一个客户关系的B端后端界面，这个是给海外客户设计的，它很好解决了公司对客户信息模糊不清的痛点，通过这个产品，可以把用户的信息可视化，并且还能很好的观察用户的使用诉求以及使用频率，给公司理解用户分析用户提供了很好数据支撑。

3、OA系统

3.1 OA系统的定义和功能

OA是Office Automation的缩写，即办公自动化，是将现代化办公和计算机网络功能结合起来的一种新型的办公方式。

在快节奏的商业世界中，OA系统如同一位高效的办公室管家，用现代化的信息技术将日常办公管理化繁为简。它不仅管理着工作流程、发文审批，还负责传递公司新闻、公告，同时确保日程安排得井井有条，让团队沟通变得即时而顺畅。

OA系统的功能远不止于此，它还涵盖了人员考勤、知识管理、企业论坛等多元化模块，为企业提供了一个全面、一体化的办公平台。随着企业对协同工作和信息共享的需求日益增长，OA系统已经成为企业管理升级的重要推手，尤其是对于大型企业而言，它更是确保组织内部高效协同、信息流通的核心系统。

这个是我给某科技厅设计的一个OA系统界面，现在政府也越来越追求办公的自动化，通过设计可视化的平台希望给需要申请相关科技服务的人才以便捷。

4、 HR系统

4.1 HR系统的定义和功能

HR是Human Resource的英文缩写即人力资源。HR系统是为企业持续地提升人力资源管理水平和能力而出现的信息化支撑平台。

在这个竞争激烈的商业时代，人才是企业最宝贵的资产。而HR系统，就是企业守护和增值这份资产的得力助手。它集成了从组织管理到人事信息，从招聘选拔到培训发展，从考勤监督到绩效评估，再到福利薪酬等一系列功能模块，为企业提供了一个全面、高效的人力资源管理平台。

通过HR系统，人事管理专员可以轻松维护员工资料、部门架构和人员分组，及时更新员工异动信息，从而帮助企业降低人力成本，提高工作效率。这不仅仅是一个系统，更是一个企业人力资源管理的强大引擎，帮助企业在人才竞争中占据优势，推动企业持续成长和发展。

这是我体验过的一个HR系统界面，他把日常的考勤、离职流程、内部调动、培训申请等流程办理都集合在了这里，大大提高了企业的效率，也大大方便了员工流程的申请，不需要一个流程自己亲自跑很多趟。

5、BI系统

5.1 BI系统的定义和功能

Bl是英文BusinessIntelligence缩写，Bl就是商业智能系统，将企业数据转化为有用的信息，辅助业务经营决策。

BI系统就像是企业的智慧大脑，它能够将海量的企业数据转化为清晰的信息，帮助企业洞察业务的每一个角落。无论是读取数据、深入分析，还是将结果以直观的方式展示出来，BI系统都能轻松应对，让决策者能够基于事实，做出更加精准的业务决策

云电脑运维服务系统是我设计过的一个后台系统，专门用来记录云电脑专家的一个运营情况，能时刻获取每个地市云电脑的一个安装量、用户数量等信息。

九、B端产品中的四个帮助系统

1、提示（tips）

TIPS一般指带有说明文字的“气泡”，通常出现在需要被解释说明的字段、列表的表头文字、按钮等位置。TIPS中的文字说明不宜过长。为了不影响用户操作，TIPS一般在鼠标悬停到相关区域后显示，鼠标移开即消失。

阿里云盘在打印功能页面对需要做出解释的按钮和图标旁边，有设计鼠标悬停功能，当鼠标触碰到对应的功能点时，页面会弹出对应的文字解释和说明，并且文字没有太长，当鼠标离开，文字又会消失，很好的帮助了用户理解页面的信息。

2、操作指引

操作指引是指在特定场景下，系统对用户接下来的操作进行的指引。常见的有：新手指引、新上线功能指引、对某功能点的操作引导等。

EV录屏对于新手用户，他提前设置了操作指引模块，帮助新手用户快速上手，解决了很多朋友不知道如何录制声音、如何在线直播、如何录制视频、如何上传视频等痛点。

3、客服

早期的B端产品，客服是获取客源的一个渠道，很少提供在线客服；AI技术的出现，AI客服也萌生了，它将用户常见的问题一一进行回答，大大减少了人工客服的成本。

飞书的客服就是机器人，一个问题过去基本是秒回，及时响应了客户，省去了高昂的人工成本，快速的响应也提升了用户体验。

4、帮助中心

帮助中心主要面向两类用户角色和场景：一是使用产品的用户，在遇到某特定业务问题时，可以通过帮助文档提供的内容自行解决；二是需要全面理解产品的用户（比如售前人员或培训人员），为他们提供一个可以全面学习产品的渠道。

百度网盘在产品的右上角有个帮助入口，它提供了一个很全面的帮助文档，让对百度网盘陌生的用户通过阅读此文档就能对产品有一个很好的认知。

总结：

在设计的广阔天地里，每一次阅读都像是点亮了一盏明灯，照亮了我前行的道路。它不仅让我对设计的原理有了更深刻的理解，还激发了我对那些细微之处的好奇心。正如一位经验丰富的厨师会通过尝试不同的食谱和亲自烹饪来磨练技艺，设计师也需要将阅读和实战经验相结合，以此来深化自己的设计内功。通过广泛阅读，我学会了从不同的角度审视问题，对设计中的每一个小细节都有了更加多维和全面的认识。这样的过程，就像是在显微镜下观察世界，让我发现了那些常被忽视的角落里隐藏的宝藏。

本文观点都为个人理解和总结，不足之处也欢迎大家留言区多多点评指正，大家共同进步！

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

评论(0) 浏览(518)

212024-5

B端基础 | 52000余字总结 B 端基础设计知识

前端达人

缘起

最近看汪曾祺的《叹息桥》中的一句话，我必须分享给你。缘起我在人群中看见你，缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。

慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈

上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。

1、

内容总结

因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。

1.1、登陆页面

最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。

登陆页面：布局分为三种；居左、居右、居中

页面元素：导航、登录框、背景（装饰元素）、互联网信息。

导航

高度：68px或48px、文字大小：14（大部分）16（也可以）

登录框

大小：大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。

登录方式：扫码、手机号、账号、第三方

标题切换字号：我喜欢用26px（也要其他的16、/18、/20）

输入框高度：48px

按钮文字和高度：16px、和输入框高度一直就行。

背景

可以是配的插画（这种最简单）、一般都是科技风

底部

要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。

1.2、筛选

筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。

筛选的意义：定位数据、缩短查询路径、数据内容分类

筛选类型：基础筛选组件（就是我们常见的页面顶部的筛选）、高级筛选（就是那些需要你定义想一想的筛选部分）

筛选布局：顶部和左侧

筛选样式：平铺；折叠；Tab筛选；单侧选择；表头；综合

1.3、栅格

这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。

怎么用：直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。

注意点：不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px

1.4、颜色

这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。

主色确定：常见的方法、1、用自己品牌logo的颜色；2、用行业色

配色确定：我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。

大厂色彩：这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。

1.5、字体

字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定

中国文字：这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。

字体规范：我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。

字号：最新的字体12px、正文、14px、通过+2， +4，+8，+12，+16 的步数增长规律

行高：通过逻辑得到这样一个公式：「行高 = 字号 + n 」，8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致，总体文字间隙稳定呼吸，行高空间较一致得出计算公式：「line-height = font size+8」

字重（就是字粗）：建议使用两种常规和加粗（在前端里一般就是400和500）

颜色：我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则，制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合，文字显示色彩对比满足至少1:4.5( AA级别）。且验证了其中的实用性，共分为亮暗两种模式，4 个色阶。

1.6、ICON（图标）

你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。

设计原则：准确、简单、节奏、愉悦。

设计实战：采用栅格

我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用

ICON分类：交互性图标、装饰性图标、说明性图标

1.7、按钮

按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。

常规按钮：次要按钮、主要按钮、文字按钮、图标按钮

按钮状态：可用、禁用、加载、悬浮

尺寸：把按钮分成：迷你、小、中、大，四种尺寸。高度分别为：24px/28px/32px/36px。推荐及默认为尺寸「中」。

样式：各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。

布局：这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。

1.8、弹窗

后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。

弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。

我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。

1.9、表单

什么是表单：我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。

我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。

表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。

表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。

1.10、表格

B端设计中，对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。

表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中，内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。

表格的类型：基础表格、树形、子表格、交叉表格、图表表格、卡片表格

表格的样式：网格型、水平线型、斑马纹、自由形式

进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。

1.11、大厂规范

如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。

在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。

2、计划

这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。

第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。

第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。

3、写在最后

分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING（国王）

新的开始见.......

注解：标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。

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

评论(0) 浏览(464)

202024-5

设计原则之一致性

前端达人

一、什么是一致性呢？

二、为什么一致性很重要呢？

三、生活中一致性的案例

四、 UI设计一致性的体现

五、交互设计一致性的体现

六、总结

一、什么是一致性呢？

一致性的字面意思和使用的场景不同代表的含义也会有区别，这里主要使用在UI/UX设计中。

UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互，以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站，消除困惑和沮丧，并使他们更容易学习和记住如何使用产品。

设计并非孤立的实践。它与其他领域交织在一起，其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。

这一定律的起源可以追溯到 20 世纪早期，当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”，它表明如果不尝试保留信息，信息会随着时间的推移而丢失。然而，他还发现，反复接触信息会极大地影响我们记忆信息的能力。从本质上讲，重复可以强化回忆。

艾宾浩斯的重复实验主要关注学习和记忆的过程，但其影响远不止于此。这让人们认识到，重复的元素更容易被记住，从而引导观众的注意力和焦点。很明显，重复可以用来引导行为和理解。

通过重复颜色、形状和图案等特定元素，设计师可以创造一种统一感和节奏感。这种重复还使设计师能够强调基本元素或信息。

重复不仅仅是一种设计原则，更是生活的一个基本方面。在自然界中，重复以各种方式体现，从雪花的对称性到海浪拍打海岸的韵律图案，从贝壳的螺旋到一年四季的循环。这种自然的重复带来了节奏、结构和可预测性，创造了一种舒适和熟悉的感觉。

人类是自然的一部分，天生就能够识别和响应这些模式。我们的大脑是出色的模式识别机器，我们倾向于认为重复的模式令人感到舒适和熟悉。这种认知特征解释了为什么设计中的重复模式（无论是在数字界面、实体产品、建筑还是营销中）会引起我们的共鸣。

二、为什么一致性很重要？

在 iOS 的设计指南中，一致性被视为让设计融入 iOS 生态的关键，它帮助用户在不同应用间建立起一种熟悉感。遵循规范的一致性可以「help your design feel at home in iOS」，保持一致性是为用户带来产品愉悦感的重要方式。

在经典交互设计原则中，「一致性」一直是重要的设计准则。在几乎可以称为「设计师必读」的雅各布·尼尔森的十条可用性原则中，一致性（Consistency and standards）位列第四，原则建议设计者在界面和交互上遵循既定的规则，无论是在应用内部还是跨平台之间。

在具体的执行中，内部一致性通常指应用内应当使用统一的视觉风格和交互语言，相同的功能和操作应该在体验上保持一致。而外部一致性则更强调用户应该遵循平台和系统的设计规范，保持用户在同一平台不同应用间体验的相似性。

一致性在UI/UX（用户界面/用户体验）中非常重要，因为它对于提供良好的用户体验和用户界面的可用性至关重要。下面详细说明一致性的几个重要原因：

1、用户学习曲线：

一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时，他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑，提高了他们的效率和满意度。

2、提升可用性：

一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时，他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务，减少错误和迷失，提供更好的导航和流畅的体验。

3、品牌认可度：

一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格，品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性，从而增加品牌的信任和忠诚度。

4、用户满意度：

一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时，他们会感到更加舒适和自信。一致性传递了专业和质量的信号，让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度，并促使他们持续使用和推荐你的产品或服务。

三、生活中一致性的案例

生活中的案例保持一致性的有很多，

a、例如红绿灯，在学习驾照或老师教学时会统一讲解红灯停，绿灯行。

b、向左向右箭头符号的使用，在日常生活中都会保持一致。

c、我们乘坐地铁时，地铁的线路图也会保持一致性，每个站的点大小，文字，到站和未到站以及行驶过的站点都有清晰统一的设计和交互操作。

四、 UI设计一致性的体现

1、颜色

颜色是一种物理现象和感官体验,是光波在人眼视网膜上的反射或吸收所形成的视觉效果。

设计中的颜色选择代表了一个项目的品牌，例如常见的饿了么蓝，美团的黄，京东的红等等，颜色的一致性有助于营造良好的视觉体验,强化品牌形象,提升可用性和无障碍性,最终改善用户的整体交互感受。这对于产品的成功至关重要。在设计时颜色（品牌色）会延续到按钮，图标，字体、标签，背景，banner等模块使用。

2、字体

字体是一种特定的文字样式,它描述了文字的形状、大小、粗细、间距等视觉特征。

字体是设计中非常重要的元素之一，不同类型的字体，字体的粗细，有衬线字体和有衬线字体，字体的字重等，这些不一致会造成页面混乱，字体的选择和使用会对用户的视觉体验、信息感知、品牌联系和情感体验产生重要影响。

开发实现上如果字体使用较多，会影响加载速度，没有统一的字体制定规则后期更新迭代也会比较繁琐，造成资源浪费。

3、图标

图标是一种简化的、具有视觉表现力的符号图形,在用户界面设计、信息传达等领域广泛应用。

在众多APP中，常使用APP的你肯定可以感受到，图标除了准确的表达某个含义，还需要在设计时保持一致性，图标的大小，设计的风格例如线型图标、填充图标、简约图标、立体图标、卡通图标等，如果这些图标风格进行混合使用就会造成混乱，影响用户体验，看起来很不专业也会影响用户使用时对于安全性的担忧。

4、按钮样式

按钮是一种常见的交互界面元素,用于触发某种操作或功能。

设计中的按钮有很多样式，因为项目类型的不同按钮样式也不同，按钮的样式有圆形按钮，矩形按钮，圆角矩形按钮，菱形按钮等，同一个项目中建议使用统一的按钮样式，除了可以体现专业性，还可以让用户增加信任度，按钮样式使用很多，用户除了使用体验不友好，还会觉得是不是跳出了这个产品去到了另一个地方。

5、排版

排版是指在印刷或数字媒体中,对文本、图像等内容进行有规则的布局和格式化的过程。

设计中排版的一致性，使用户能够快速适应和理解界面的结构，降低学习成本，用户对于熟悉的排版模式产生更强烈的归属感和安全感，使内容更易读，用户可以依照熟悉的视觉动线快速找到所需信息，提高信息获取效率。

五、交互设计一致性的体现

1、操作一致

根据文字意思就是用户才操作时候的流程保持一致，操作保持一致，例如大家常见的下单购买商品流程，

用户在购买商品时：点击商品——商品详情——付款购买，其他商品也应该是这样流程，

如果每个商品流程不同就会很乱，例如：

点击A商品————商品详情——付款购买；

点击B商品——付款购买——查看商品详情；

点击C商品——同类商品列表——商品详情——付款购买，

这样就会很乱，用户不知道点击下一个商品会是什么样子。

例如：

1、APP中的视频浏览是上下滑动，进入新的模块后视频浏览变成了左右滑动。

2、需要确认某些操作时，确认按钮一会在右侧，一会确认又在左侧。

用户在操作时会除了体验很乱，也很难培养用户习惯。

2、文案符号一致

文案和标点符号的一致比较好理解，例如常见的输入框，“请您输入帐号”，“请输入你的密码”，同一页面场景下文案和称呼不统一，会造成用户操作迟疑，是不是这个不重要才用了“你”，重要的才用“您”，为了避免用户进行不必要的思考文案保持一致，符号亦是如此。

3、反馈一致

当我们看到下一步按钮时，有些地方交互是进入了新的页面，有的是分步式使用。建议使用一种保持统一，避免用户产生误导。

操作反馈后的弹窗，相同功能反馈的弹窗样式不一致：一会是图文弹窗，一会纯文字提示，用户也会很乱，包括交互时出现的样式也需要保持一致，剧中或从下向上弹出。

六、总结

一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悦的用户体验。通过保持设计元素、布局和交互方式的一致性，可以降低用户的认知负荷，提高用户的学习效率，增强品牌形象，提升用户满意度，并最终实现更好的业务成果，详细分为以下七点：

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

评论(0) 浏览(576)

202024-5

常见的B端弹窗样式设计总结

前端达人

B 端产品的业务场景通常比 C 端更为复杂，因此在进行产品设计时对信息的处理方式也需要根据不同的业务场景进行设计。今天主要聊一下 B 端产品设计中弹窗设计。

弹窗的定义

弹窗是展现在用户操作界面之上的容器，在 X 轴和 Y 轴的平行空间之上扩展了页面的高度。是系统与用户之间建立联系非常重要的组成部分。它通常在用户进行特定操作或访问特定页面功能时弹出，目的是向用户展示某些信息、提供选择或执行某些操作。

弹窗使用场景

需要呈现的内容篇幅相对较少。
常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
通常是由系统触发（用户被动接受）。
弹窗整体高度和宽度不做绝对的标准或规定，可以根据内容篇幅的多少和视觉的平衡度来确定，整体规范保持一致即可。

总体概括为简单和复杂两个场景。

一、场景简单

场景简单包括：全局提示、气泡确认框、警告提示、通知提醒框，通常是操作确认和系统内部自动触发性提示时使用。

1. 全局提示

以 toast 提示居多，通常在页面中间偏上的位置。

2. 气泡提示

用于解释难理解的功能名词或者由于版面限制文字展示不完，利用气泡来展示。

3. 警告提示

用于重点内容的警告提醒，降低用户犯错概率，提升用户的使用体验。

4. 提示性通知弹窗：

位置相对固定，通常出现在需要介绍说明的功能旁边或者居页面中间展示。

例如，当系统发生重要更新维护或者重点功能引导时，可以显示一个提示性通知弹窗，告知用户当前状态。

类型主要包括以下三种：

举例：

有赞后台页面

二、场景复杂

1. 场景复杂｜全屏弹窗

新开页签（浏览器

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

评论(0) 浏览(553)

172024-5

比GIF更好用的Lottie动画是什么？

前端达人

不知道大家有没有这样的困扰，每次制作GIF图的时候，难免会出现边缘锯齿，就算加上白边之后，在夜晚模式的时候锯齿就更明显了。除此之外，GIF图对于渐变填充的呈现也很糟糕，会出现渐变断层的情况，看起来很不自然。

最让人难以接受的情况是：

稍微把动画做流畅一些，GIF的文件大小就变得巨大无比。

在2017年的时候，一款比GIF动画更好用的动画图片格式诞生了！！！

那就是我们今天将要介绍的Lottie动画。

什么是Lottie动画？

Lottie动画是一种基于 JSON 的动画文件格式，允许在任何平台上发送动画，就像发送图片一样轻松。Lottie是可在任何设备上运行的小文件，并且可以放大或缩小而不会出现锯齿的一种动画格式。

相较于其他动图格式，Lottie有哪些优点？

①文件大小

和GIF、Apng 或 MP4 等其他格式相比，Lottie 动画要小得多，同时保持相同的动画表现，甚至更流畅。

②无线扩展

Lottie动画是基于矢量设计制作的，这意味着可以随意放大或缩小它们，而不必担心分辨率的大小导致的锯齿问题。放大无数倍也是清晰如初。

③支持多平台

对于所有开发人员来说，Lottie动画的交接非常简单。现在我们可以在 iOS、Android、Web 和 React Native 上使用 Lottie 动画，也不需要修改。使用和调用都非常方便。

④可交互

在 Lottie 动画中，动画元素可以设计为可交互组件，用户可以操纵它们进行交互，实现滚动、单击和悬停等交互效果。这是GIF、Apng和MP4等动画文件都没办法做到的。

怎么设计制作Lottie动画呢？

目前，Lottie官网提供了很多动效设计软件的插件供大家使用和下载。目前下面这些设计软件可以在官网下载到Lottie动画的导出插件。

其中，Lottie Creator是Lottie官方的网页版动画制作工具，登录官网就可以使用。

Lottie官网地址

https://lottiefiles.com

说了这么多Lottie的优点，其实Lottie也是有短板的。比如说，AE里面的fx效果，Lottie就全部不支持，另外复合路径动画等等动效效果也不支持。

为了方便大家快速上手Lottie动画，作者把Lottie支持的效果整理归类成了几张图片，方便大家制作的时候快速查阅。

作者：江浩大叔工作室
链接：https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(644)

172024-5

B端后台管理界面设计欣赏

前端达人

在现代企业中，B端后台管理界面设计是提升工作效率和用户体验的关键因素。本文将通过UI设计公司提供的优秀案例，探讨如何优化后台管理界面的设计，提升用户的使用体验。

1. 界面简洁，功能齐全

一个优秀的B端后台管理界面，首先应具备简洁明了的设计风格。UI设计公司在设计过程中，通常会通过简洁的布局和清晰的导航，帮助用户快速找到所需功能。例如，蓝蓝设计公司就采用了极简设计原则，在保持美观的同时，确保用户能够高效操作。

2. 交互设计人性化

人性化的交互设计是提升用户体验的关键。UI设计公司会根据用户的使用习惯和需求，设计直观的操作流程和反馈机制。例如，通过在重要操作后提供即时反馈，减少用户操作的疑惑和错误。

3. 数据可视化

对于后台管理界面来说，数据可视化是不可或缺的一部分。通过图表、仪表盘等可视化工具，用户可以直观地了解业务数据，从而做出更好的决策。UI设计公司通常会使用最新的数据可视化技术，帮助用户快速理解复杂的数据。

4. 响应式设计

随着移动设备的普及，响应式设计变得尤为重要。优秀的B端后台管理界面应能够在不同设备和屏幕尺寸下保持良好的使用体验。UI设计公司会在设计时考虑多种终端的兼容性，确保界面在手机、平板和电脑上都能流畅运行。

5. 安全性与稳定性

后台管理界面涉及大量敏感数据，安全性和稳定性是设计过程中不可忽视的因素。UI设计公司在设计时会采用多层次的安全措施，保障数据的安全，同时通过优化代码和服务器配置，确保系统的稳定性和高效性。

通过以上几个方面的优化，UI设计公司能够打造出高效、美观、易用的B端后台管理界面，助力企业提升管理水平和工作效率。希望这些优秀案例能为你的设计工作提供一些启发和参考。

评论(0) 浏览(781)

162024-5

PC端的页面设计，如何优雅呈现在移动端

前端达人

电商boss系统采购订单页面在移动端呈现，我做了哪些思考？

在B端UI/UX设计领域，我们常常会遇到类似的需求：随着业务的发展，需要将复杂系统中的核心功能摘出来，并在小程序或移动应用上呈现，以便客户能够便捷地使用和操作，从而提升工作效率。然而，实际操作中我们会发现，尽管对这些功能很熟悉，但是落地过程中却会遇到一系列问题。

本文中，将分享我在将复杂电商BOSS系统的订单页面呈现在移动端的设计过程，希望对大家有所帮助。通过本文，您将了解到以下内容：

1、如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯；

2、如何将复杂的订单页面优化为简洁、易用的移动端界面；

3、针对移动端的限制和挑战，如何进行设计决策和权衡；

4、使用哪些有效的UX技巧来提升用户体验和工作效率。

一、深入分析业务背景和使用场景

1、业务背景关系梳理

选款的零售商客户通过衫海精选款下单后，订单信息和订单状态会传到BOSS后台，相关负责人可随时查看并处理。

2、为什么需要在移动端呈现？

为了确保平台高效履约，需要市场部同事随时掌握订单状态，特别是

发货即将超时、揽收即将超时、发货已超时和揽收已超时

的订单，以便及时通知上下游。但是由于工作性质，他们无法随时坐在电脑面前，所以需要在小程序上呈现订单信息，可以让市场部同事随时查看并处理订单，避免出现订单超时，客户投诉的情况。

二、功能拆解

1、将电脑端订单内容拆分重组，信息归类

2、订单功能拆分后，主要分为以下四个部分

1）订单状态

订单状态包括：全部、待付款、备货中、待收货、已完成、已关闭。全部状态下

新订单、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时

的订单类型需要重点露出，方便快速查询。

设计差异：

1、订单状态：电脑端大屏横向可以全部平铺展示；移动端则是横向滑动。

2、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时的订单快捷入口，电脑端大屏可以全部平铺展示；移动端则需要换行，这里不做横向滑动是因为会影响用户的操作效率

2）订单查询条件

订单查询条件包括：订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方、SKU编码、商品ID、是否缺货、所属云仓等等。

设计思考：

分析用户日常的使用习惯，对高频操作的筛选项进行提炼在移动端展示，提升使用效率。低频操作则不在移动端展示。

经过与业务方沟通，订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方的使用频次相对较多，

订单编号、时间排序

使用频次最高。

a、订单编号/排序时间

设计差异：

1、订单编号查询：电脑端和移动端都是直接输入，但是电脑端支持批量查询，单次查询内容会更多。

2、下单时间排序：电脑端采用input框的样式，下拉筛选；移动端是通过点击切换排序方式，操作会更便捷。

b、商品/供应商查询

设计思考：

1、商品查询：电脑端、移动端都是直接输入；

2、供应商查询：电脑端采用input框的样式，下拉筛选；移动端则是进入新的页面进行选择；两者都支持关键字搜索；

移动端不直接展开的原因是：供应商数量多，在当前页面展示篇幅较长，还涉及到分页，会影响用户的操作体验。

c、时间查询

设计差异：

电脑端点击出现时间选择器，支持快捷查询；移动端点击选择跳转到新页面，时间全部铺开展示；两者都支持滑动鼠标(手指)连续选择时间段。

d、订单状态查询

设计差异：

电脑端采用input框，下拉选中；移动端则是全部展示出来，采用勾选的方式进行选择。

3）批量操作

小程序不做批量操作功能。

4）订单内容

订单内容包括订单编号、下单时间、零售商、商品信息、数量、发货方式、买家信息、订单状态、实收款、订单详情、查看物流。这些内容可以归纳为3类：

a、订单信息 b、商品信息 c、操作。

a、订单信息

订单信息包括：订单编号、下单时间、零售商、、发货方式、买家信息、订单状态、实收款

设计差异：

电脑端面积大，内容需要散开排列；移动端面积小，内容需要集中排列。

b、商品信息

商品信息包括：商品名称、图片、价格、货号、规格、SKU编码、供应商、下单数量、拿货数量、仓内现货、缺货原因

设计差异：

同样的内容，移动端更加聚焦，但是商品数量展示也偏少。

c、操作

操作包括：订单详情、查看物流

设计差异：

交互方式相同，都是跳转到新页面。

三、总结

由于屏幕大小和分辨率的不同，电脑端和移动端页面在功能的布局和信息展示上也会有所不同。

电脑端使用鼠标操作，包含滑动、左击、右击、双击等，相对来说单一，交互效果较少。而对于手机端来说，由于屏幕大小的限制，操作方式需要更加的丰富，通过这些丰富的操作来实现页面和功能之间的交互。所以电脑端和移动端相同功能的操作方式也会不同，组件也有所差异。在做设计时，尽量使用成熟的组件，给用户良好的使用体验。

遇到复杂的设计需求，不要慌张，

核心都是看透事物的本质，拆解为基础的组件，再从根本上解决问题。

谢谢！

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

评论(0) 浏览(518)

« 1 2 3 4 5 6 7 ... 77 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

首页

分类

日历

链接

个人资料

存档