设计每日一贴-专注优秀UI设计与软件开发-北京兰亭妙微

首页

292024-4

B端的10个设计方法

最近看了一些B端的书籍，重温了一些耳熟能详的设计方法论，在人机交互理论中，最著名和经典的理论当属人机交互大师雅各布.尼尔森博士在1995年提出的尼尔森十大可用性原则，该理论是针对PC端交互设计提出的。这个理论在我们日常的产品设计中提供了很好的指导意义，下面来聊聊他们分别运用在了日常产品的哪些地方。

反馈原则

反馈原则指出系统应在适当的时候向用户提供其当前状态的反馈。这包括操作的即时响应、进度指示、错误提示等。良好的反馈机制能够让用户了解操作的结果，增强控制感，减少不确定性和焦虑感。

系统应该在合理的时间、用正确的方式，向用户提示或反馈目前系统在做什么、发生了什么，反馈速度应与用户期待相符。

百度网盘每次在下载文件时，都会提示当前下载的进展，完成了百分之几，当前的一个传输速率是多少？以及还需要多长时间才能下载完成，很好的缓解了用户焦虑的情绪。

360安全卫士在进行软件杀毒的时候，也会展示出对应的杀毒进程，还需要多长时间才能杀毒完成，给了用户及时的反馈和满满的确定感。

隐喻原则

系统要采用用户熟悉的语句、短语、符号来表达意思，要遵循真实世界的认知、习惯，让信息的呈现更加自然，易于辨识和接受，减少用户的学习曲线。

在人机交互设计中，程序的沟通和表达、功能的呈现，都要用最自然的、用户容易理解的方式，避免采用计算机程序语言的表达方式。设计时要采用符合真实世界认知的方式，让用户通过联想、类比等方法轻松地理解程序想表达的含义；隐喻可以是视觉的，也可以是操作的，它能帮助用户通过已知的事物来理解新的概念或功能。

360安全卫士、嗨格式视频转换器、腾讯电脑管家中的图标都采用了人们易于理解的图形去表达，符合人们日常的认知习惯，很好的表达了业务场景，同时也不失美感。

回退原则

用户经常会不小心操作错误，需要有一个简单的功能，让程序迅速恢复到错误发生之前的状态。用户应能够控制自己的操作，包括撤销或重做之前的操作。回退原则提供了一种安全感，让用户知道他们可以从错误中恢复，从而更愿意尝试和探索系统的功能，减少用户误操作的焦虑。

QQ邮箱页面在设计时，下面有一个撤回的按钮，当发现自己发送邮件有问题的时候，可以点击撤回，将发出去的邮件收回来。

虎课网的个人头像，当用户不喜欢当前的头像时，在设置里面允许用户对个人信息和头像进行重新修改，也体现了回退原则，让用户可以对之前做的操作进行再次操作和修改。

微信也是，当用户发送出去的信息错误时，在3分钟内用户有撤回消息的权限，给用户提供了改错的机会，减少了用户误操作带来的挫败感。

一致原则

同样的场景、环境下，用户进行相同的操作，结果应该一致；系统和平台的风格、体验也应该保持一致。

一致性原则要求产品在不同情境下提供相同的操作反馈，保持风格和体验的一致性。这有助于用户建立直觉性的操作习惯，减少学习成本。一致性还体现在设计元素的使用上，如按钮、图标、颜色等，都应保持统一风格，避免用户产生混淆。

飞书在联系人、邮箱、日程、服务台、应用、消息等多个场景都保持了风格非常统一的空状态页面，整个产品的统一感很强，比较舒适。

防错原则

防错原则强调预防错误的发生优于错误发生后的补救。设计时，应考虑用户可能的错误操作，并设计机制来避免或减少这些错误。例如，通过禁用不可用的选项、提供清晰的指令和限制，以及在执行不可逆操作前设置确认步骤, 防错设计可提升用户效率, 降低错误几率。

EV录屏里面有个录制视频的列表，当用户点击需要删除的视频时，有一个二次确认的机会，以防止客户误删，很好的体现了防错原则。

天翼云电脑专家在设计学习模式按钮入口的时候，为了防止用户出错，把按钮设计了两种状态，一种是带插画头像的彩色按钮，一种是把插画头像置灰的按钮样式，让用户能很好的区分当前的一个状态，是防错原则的一个很好运用。

记忆原则

让系统的相关信息在需要的时候显示出来，减轻用户的记忆负担，帮助用户快速上手，提升产品的易用性。例如，自动保存用户的输入、提供历史记录、使用快捷方式等，可以减少用户需要记忆的信息量；当切换页面时，不应该让用户记住不同页面的内容，而应该在合适的地方积极地呈现或提示之前的信息。

花瓣、千图、哔哩哔哩平台在搜索栏都有搜索的历史记录功能，之前搜索的过的词，当用户再次想要搜索的时候，用户不需要再次输入，直接选择对应的历史标签就行。

灵活易用原则

灵活易用原则不仅是一个交互设计原则，也代表了一种软件产品设计理念；系统要做到简单易用，系统应为不同水平的用户提供灵活的使用方式。中级用户是大多数，设计应满足他们的需求，同时为初级用户提供易于上手的引导，为高级用户提供定制化选项，以提高效率。灵活设计可以提升用户满意度，个性化设置可以增加用户粘性，促进用户的探索。

腾讯电脑管家考虑到每个人有每个人的审美和喜好，设计了一键换肤的功能，提供了有足足12种之多的皮肤设计，用户可以在个性皮肤里面随时切换自己想要的皮肤背景。

简约设计原则

简约设计原则要求去除不必要的信息和功能，突出重点，避免信息过载。设计应追求简洁，同时保持功能的完整性和可用性，确保用户可以快速识别和使用最重要的功能。

联通应用商店的应用下载中，没有把对应程序的安装按钮直接显示出来，只有当鼠标点击到对应的图标上时，安装按钮才显示出来，简化了页面的信息流，通过动态的交互方式让页面看起来更加的简洁，是简约设计原则的很好应用。

飞书在一个信息层级，任务这么复杂的一个页面，每段任务通过任务的紧急情况做了颜色区分，并且还配合了对应的图标，整个页面设计清清爽爽，把一个很复杂的信息流，通过归类，让页面更加的简约。

容错原则

当错误不可避免时，系统应提供清晰的错误信息和解决方案。这意味着错误信息应易于理解，避免专业术语或错误代码，同时提供明确的解决步骤或建议，帮助用户从错误中恢复。

对于很多运行时错误或异常，计算机程序都会返回某个错误代码，但是用户看到这些错误代码时并不明白发生了什么，所以一定要将错误代码转换成用户能看懂的信息，并告诉用户解决的建议。

联想电脑管家客服页不见了，他给出了很明确的错误提示，并且还附上了一个可视化的插画设计，缓解了用户焦虑的情绪。

联想电脑商铺应用也是的，消息不能查看了，它告诉用户什么原因导致不能查看，给用户提出了很明确的指引和方向。

帮助原则

即使系统设计直观，提供易于检索的帮助信息也是必要的。帮助文档应清晰、简洁，并提供解决问题的明确步骤，避免过于复杂或冗长。

现在的软件产品，尤其是C端产品，普遍做了良好的交互设计，可以帮助用户快速学习使用，而不用阅读、理解复杂的说明文档。

然而，B端产品的复杂性比C端产品高很多。因为B端产品蕴含很多业务流程的规则，系统中的一个按钮可能代表了一个复杂的业务处理逻辑。如果不了解整个业务场景和处理规则，则很难理解按钮的操作含义的。

因此，对于B端产品，用户进行自助服务、自助操作的难度高很多，B端产品的帮助文档依然有存在的必要。产品设计人员要尽量在前端交互设计上做好引导提示，对于复杂的规则和逻辑，可以考虑通过帮助文档来指导。

菜鸟裹裹的邮寄页面，输入地址栏上方提供了输入信息的功能，并且通过一键识别按钮，就可以将粘贴进来的信息一键智能的填充到下方的信息栏中，给用户提供了很多的帮助和便捷。

酷我音乐在设置里面，设置了提供帮助的入口，当用户需要帮助的时候，可以在里面提供反馈，然后平台就会给你提供帮助。

总结：

通过阅读结合自己日常的产品体验，会对这些设计原则产生一个深刻的印象和理解，光看这些文字描述，可能不能明显立体的体会到它的价值，但是当带着这些思考去生活中找证据的时候，发现这些设计方法论真的是个大宝藏，带着这种方法论思考的设计师能设计出很多合情合理的设计，方便了用户使用的同时也大大提高了页面的美感。

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

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

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

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

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

评论(0) 浏览(390)

292024-4

探索优秀的企业级后台管理界面设计

前端达人

企业级后台管理界面是企业管理者和运营团队日常工作中必不可少的工具之一。一个优秀的 B 端后台管理界面不仅可以提升工作效率，还能够增强数据可视化、用户体验和系统安全性。在这篇文章中，我们将一起探索一些优秀的企业级后台管理界面设计，其中蓝蓝设计也是不可或缺的一部分。

1. 简洁清晰的布局

优秀的企业级后台管理界面设计通常采用简洁清晰的布局，将不同的功能模块划分为明确的区域，使用户能够快速找到所需的功能和信息。布局中应避免过多的干扰元素，保持界面整洁简约，提高用户的操作效率和体验感。

2. 数据可视化和图表展示

企业级后台管理界面通常需要处理大量的数据和信息，优秀的设计应该通过数据可视化和图表展示，将复杂的数据呈现为直观的图形和图表，帮助用户快速理解和分析数据，做出科学的决策。

3. 多级权限管理和安全保障

企业级后台管理界面涉及到不同用户角色和权限管理，优秀的设计应该提供多级权限管理功能，确保不同用户只能访问和操作他们所需的功能和数据，同时保障系统的安全性和稳定性。

4. 个性化定制和扩展性

企业级后台管理界面设计应该考虑到不同企业的需求和特点，提供个性化定制和扩展性功能，使企业能够根据自己的业务需求对界面进行定制和扩展，满足不同用户的需求。

5. 响应式设计和移动端优化

随着移动互联网的发展，企业管理者和运营团队越来越倾向于使用移动设备来管理企业业务。因此，优秀的企业级后台管理界面设计应该具有响应式设计和移动端优化功能，确保在不同设备上都能够提供良好的用户体验和操作效率。

综上所述，优秀的企业级后台管理界面设计应该以简洁清晰的布局、数据可视化和图表展示、多级权限管理和安全保障、个性化定制和扩展性、响应式设计和移动端优化等为核心特点，为企业管理者和运营团队提供高效便捷的管理工具，助力企业管理的数字化转型和智能化发展。

评论(0) 浏览(432)

282024-4

深度解析：如何让设计作品摆脱平庸？

前端达人

作品平庸、不够出彩、抓不住用户眼球等等，这些是很多设计师工作中常遇到的困惑，60分的及格设计做起来得心应手，可一旦要求提高到80分甚至更高就力不从心。

在现在这个如此内卷的设计行业，越来越多的设计师在追求技法、追求设计形式上的高难度，仿佛用到的技法牛不牛逼成为了作品质量高不高的第一标准。

但殊不知过分的追求技法、堆效果，会导致用户阅读作品信息的难度增大，致使设计作品的商业价值降低，最终出力不讨好。

所以想要提升作品出彩度、改变平庸表现有时不必大费周章，往往当你做好一些细节工作时上述问题便水到渠成的解决了，所以本期就给大家分享几个解决此类问题的实用技巧。

一、放大关键文字信息

文字，作为商业设计中最直观的信息载体，它在整个设计环节都至关重要，但这也是很多设计师容易忽略的环节，因为他们更愿意把精力放在画面布局、元素搭配、创意实现等容易出效果的环节上。

文字除了具备传达信息的作用外，在设计工作中它还能起到很好的装饰作用，所以在设计行业中有个分支叫字体设计师。

当你能做到文字保证可阅读性且又能兼顾设计感的时候，你会发现你的作品整体质量会提升很多，但这项能力可不是一朝一夕就能掌握的，对于很多设计师来说有一定局限性。

所以相比文字设计来说，放大关键文字信息这招适用性就强的多了。

不难发现即便是常规字体，当文字被刻意放大后其装饰作用就会变得更明显，给人能带来强烈的冲击力让人印象深刻。

按照上述理论，简单做个案例：

最终呈现：

这个案例就很好的利用了字体放大后的装饰特性，其关键在第二步，当主文案在画面位置确定的那一刻，整体效果其实已经出来了，紧接着将其他文案排好、增加画面细节让整体更丰富就行了。

所以有目的性的放大文字信息，能在一定程度上帮助我们提升作品整体的层次感和设计感，从而让作品在视觉呈现上更出彩。

二、数字外文信息别放过

前面说了放大后文字具备很好的装饰作用，这在数字和外文信息上体现的更明显，甚至有时即便不刻意放大装饰作用也很强。

因为中文和数字、外文结构上就有差异化，当多类文字信息同时出现在设计作品上时，在视觉上便很容易营造层次感，所以此时我们可以利用这一特点在数字和外文信息上下功夫。

首先说下设计师在工作中容易忽略的字体选择细节，中文、外文、数字习惯性的用中文字体，就这么一个小细节就足以让我们作品质量打折扣。如下图当数字和中文都使用统一字体思源黑体时，整体给人的感觉很平、甚至有些枯燥、乏味。

只是将中文和数字字体做出区分，层次感和设计感马上不一样了。

还可以将关键数字信息进一步处理，进一步提升视觉层次。

按照老板的逻辑，把利益点放大、加粗、标红也不是不行。

同样的文案信息，只是将中文和数字字体区别出来就能有如此提升，看似很基础的操作，但却总会有一些设计师容易忽略。

在不影响文字正常信息传递的前提下，放大后的数字和外文装饰作用要比中文更强烈，

所以我们一样可以通过放大数字或外文的手段来提升我们作品的出彩度。

再看看下面这组案例：

相比较而言后三个都是在第一个基础排版上做了放大处理，其实采用的手法相同，只不过有的针对数字90，有的针对关键信息90天免费换新而已。

现在你能理解为什么很多高质量的作品都喜欢着重处理数字和外文信息了吧，因为如此简单的细节操作往往能四两拨千斤，高效实用又出效果，类似的案例还有：

还有一种做法：在不影响正常文字信息阅读的前提下，可以尝试将部分外文或数字与常规文字形成叠压关系，比如：

如上图所示，通过数字或外文字体的叠压，使得看似简单的两行文字在视觉上有设计感和层次感，类似的案例还有：

另外这里提到的着重处理也可以是加粗、变色、添加材质、水印化等等，目的都是通过相对简单的文字处理让我们的设计作品整体更具设计感，更有记忆点。

三、遮挡

这里所说的遮挡并不是指简单的元素间的叠压，而是营造空间层次感的一种设计手法。另外不要提到空间、层次就想到建模三维、复杂合成等等，反而一些简单高效的处理方式在设计工作中更实用，也更容易出效果。

1）文字与其他元素间相互穿插。

如上图所示，这里的文字已经不单单是信息元素的存在了，更是画面中非常重要的设计元素，也正是因为将文字与其他元素刻意遮挡的处理，才使得画面整体的层次感和设计感更加强烈。

还有就是不要局限于文字穿插，一些图案、线条同样也可以按照上述思路做穿插遮挡。

所以在商业设计工作中，没必要过于迷恋复杂的技法，学会归纳总结逐渐形成自己的方法论，会让你的工作事半功倍。

2）虚实结合

接下来说说遮挡的另一种方式：利用模糊化处理后的元素，在画面营造出一种前虚后实的视觉效果，类似摄影中的景深效，比如：

如上图所示，虚化的植物、叶子等元素在画面中就起到了很好的拉开空间距离、提升视觉层次感的作用，在不影响主题表现的前提下提升了整体的设计感。当然文字也可以按照上述理论来做：

将虚化后的文字当做画面中的前景，在视觉上一样可以营造出很强的视觉层次感，让人眼前一亮。包括一些光影效果同样也很出彩：

你会发现当画面中空间上的遮挡关系形成后，作品就变得相对更容易出效果，设计感也会更好表现，所以按照这个逻辑还可以继续拓展。

现实生活中大家对玻璃都不陌生，一些油砂、磨砂类的玻璃所能映衬出的背景基本也都是虚化的，这与我今天所说的模糊化遮挡是不是很像？

3）玻璃效果

下面看个小案例：

虽然两者只有简单的变化，但显然右边案例给人的感觉更协调、丰富、有意思，而左边虽然做法没有问题，但视觉表现上相对右边案例就显得略微相对有些平淡。

类似的案例还有：

如上图所示，是不是一下就能感受到玻璃在画面中的独特作用了。这样的处理方式在很多优秀作品中也经常能看到，所以在适当的时候利用玻璃效果营造画面层次感和设计感也是很好的选择之一。

下面再来做个案例：

最终呈现：

这个案例我相信做到第二步对于很多人来说都不难，但如果只是到第二步的话作品明显缺少层次变化，给人的感觉略显单调。

所以既然缺少变化、层次感不够，那我接下来要做的就是做针对性的改变，我首先想到的就是利用玻璃元素的特性增强画面层次感和形式感。然后我又想到了使用光影效果：

虽然跟前面玻璃效果的案例在视觉表现上有所不同，但两者核心方法却是一样的——遮挡，通过虚实结合的方式提升作品整体层次感。

四、最后总结

往往能决定作品质量的就是对细节的优化和调整，这个过程并不是说有多么复杂，关键点在于要会审查作品，找出问题、然后对应的解决问题。

文章给大家分享了在一些在工作中可供参考、高效实用的设计思路，当然这些还远远不够，比如还可以从：配色、留白、装饰元素、肌理素材等方面入手，大家要学会发散思维、灵活运用。所以我们要尽力成为那个能出色完成工作的人，而不是及格就万事大吉，在工作中对自己要求高一些，成长就会快很多。

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

评论(0) 浏览(409)

282024-4

医疗手术机器人软件界面设计赏析

前端达人

在现代医疗领域，随着科技的不断进步，医疗手术机器人正成为越来越重要的工具。这些机器人不仅提高了手术的精准度和效率，还为医生提供了更好的操作体验和患者治疗效果。而医疗手术机器人软件界面的设计，直接影响着医生对手术过程的掌控和操作的顺利进行。下面我们将一起探索一些优秀的医疗手术机器人软件界面设计，以赏析其设计之美和功能之强大。

1. 界面简洁直观

优秀的医疗手术机器人软件界面设计通常以简洁直观为特点，让医生能够快速找到所需的功能和信息，提高操作效率。界面布局清晰，功能模块分区明确，图标和按钮设计简洁明了，文字描述准确清晰，使医生能够快速理解和掌握软件的使用方法。

2. 操作友好人性化

考虑到医生在手术操作时的专注和紧张程度，优秀的医疗手术机器人软件界面设计应该操作友好人性化。例如，采用直观的手势操作或者简单易懂的快捷键，减少医生的操作负担；同时，界面应该具有良好的响应速度，确保医生的操作能够及时生效，提高手术的安全性和精准度。

3. 数据可视化展示

医疗手术机器人软件通常会收集大量的手术数据和患者信息，优秀的界面设计可以将这些数据以直观的图表、曲线等形式进行可视化展示，帮助医生更好地分析和理解数据，做出科学的诊断和决策。同时，界面设计还应该考虑到不同医生的习惯和需求，提供个性化的数据展示和分析功能。

4. 多模态交互支持

医疗手术机器人软件通常需要支持多种交互模式，包括触摸屏、手势识别、语音控制等。优秀的界面设计应该充分考虑到不同医生的操作习惯和使用环境，提供多模态交互支持，使医生能够选择最适合自己的操作方式，提高操作的便利性和舒适度。

5. 安全保障和隐私保护

作为医疗设备的一部分，医疗手术机器人软件界面设计必须严格遵守相关的安全和隐私保护标准。界面设计应该考虑到数据的安全传输和存储，防止数据泄露和篡改；同时，界面应该提供严格的权限管理功能，确保只有经过授权的医生才能够访问和操作相关数据和功能。

综上所述，优秀的医疗手术机器人软件界面设计应该以简洁直观、操作友好、数据可视化、多模态交互和安全保障为核心原则，为医生提供更好的操作体验和患者治疗效果，推动医疗技术的不断进步和发展。

评论(0) 浏览(577)

262024-4

新中式与AI的融合碰撞—百度二十四节气卡设计升级

ui设计分享达人

随着AI生图时代的来临，设计团队致力于通过AI训练自有设计风格的模型资产，以此来为业务提效。鉴于节气卡的高覆盖率、高复用率和高收益，我们选择了这一场景进行新中式风格的升级和模型训练尝试。

评论(0) 浏览(460)

262024-4

深度解析：如何让设计作品摆脱平庸？

ui设计分享达人

但殊不知过分的追求技法、堆效果，会导致用户阅读作品信息的难度增大，致使设计作品的商业价值降低，最终出力不讨好。

评论(0) 浏览(392)

262024-4

八角行为分析 — 打动用户的产品密码

ui设计分享达人

在当今竞争激烈的市场环境中，打造真正吸引用户的产品和服务已成为品牌脱颖而出的关键。我们需要不断地探索和挖掘用户的需求和期望，以便更好地设计出引人入胜的产品和服务。在这个过程中，用户动机是用户做出某种行为和决策的核心原因，了解用户动机心理成为产品设计中至关重要的一环。

每一次玩法设计的过程中，我们都会为产品赋予诸多亮点。但只有和用户需求交叉的部分才能真正驱动他们去体验并传播，我们可以用八角行为分析（Octalysis）来理解打动用户的产品密码。

评论(0) 浏览(496)

262024-4

八角行为分析 — 打动用户的产品密码

ui设计分享达人

评论(0) 浏览(390)

262024-4

优秀的设计就是带给用户惊喜！

博博

一、降落伞带来的营销广告

在这个广告满天飞的年代，用户已经逐步开启广告免疫模式，如何提高用户对广告的关注度至关重要。

近期在体验饿了么时，等待送餐界面中空降一个降落伞，从左上角飘到右侧悬浮，弹出红包悬浮广告。降落伞飘浮的动态过程吸引了用户的关注度，进而提高了营销广告的点击率，虽然广告大家都比较反感，但是一个伴随着惊喜的广告也会让你放下戒备心理。

二、动效反馈商家备餐过程

提升等待过程对于用户体验来说尤为重要，降低用户等待过程中的焦虑感，才能让用户愿意为此停留。

通过饿了么点餐之后，商家需要一定的时间完成餐饮的制作，必然需要用户等待一些时间。在这个备餐过程中，当前界面以一个翻炒动效表达，情感化的动效不仅提示用户当前状态，也提升了设计表达的感官体验。

三、这个广告惊不惊喜意不意外

意料之外的广告是带给你惊喜还是反感呢？平台为了提高变现能力，各种层出不穷的广告玩法也让你猝不及防。

之前在体验腾讯视频 App 时，从闪屏广告过度到 Banner 图的过程中，经历了多个广告新花样。首先从闪屏切换到自动轮播的弹窗模式，再演变到放大版的多个广告切片（占 Banner 位呈现），最后再恢复到 Banner 的正常布局中。这个过程无疑是把广告的存在感拉满了，让你对广告的记忆形成硬性要求。

无论这个广告设计方案是否让用户反感，但是这个呈现的互动方式还是比较新颖的，相信广告的点击率必然有所提升。

四、Banner 广告的视觉沉浸感

Banner 图在产品中是非常普及的，各类形式的演变也层出不穷，产品设计师都在探索更多可能性。

在腾讯视频 App 动漫栏目中，发现一例很有想法的 Banner 表现。Banner 上面新增了一个悬浮的火焰燃烧的动效，提升了整体的氛围感，动效与 Banner 画面完美贴合，视觉沉浸感十足。

五、待机状态下的实时动态

随时让用户感受到你的存在，才能让人感到安心，服务过程中状态实时可见至关重要。

通过饿了么点餐之后，就算处于待机状态时，只要点亮屏幕即可看到当前出餐状态。可视化的图形结合时间提醒，让状态一目了然，使得点餐到用餐之间的过程更有用户可控性。

六、小图标里的细节反思

产品中有很多辅助功能/信息等表达的图标，既要能准确表达主题，也要让用户易于理解。

在汽车之家 App 发现了一个值得反思的图标案例，在扫一扫的图标中结合了汽车外形轮廓，不仅不会影响扫描的功能表达，也进一步表达了该功能的差异。和别的产品扫描功能不同，这个是对准汽车进行扫描，体现出了业务的差异化。一枚小小的图标体现出了设计师的能力，用最简单的方式表现自身产品的差异，以此提升用户的操作体验。

七、轮播式的悬浮设计

悬浮设计非常普及，因为占比小和滑动页面会隐藏，对用户的干扰比较小。

最近在芒果 TV 首页发现了悬浮窗口的轮播式表达，芒果卡和活动中心会自动轮播显示（也能手动切换）。让我们对悬浮窗口的设计又多了一种设计理解，可以呈现更多不同内容的表达，提升了窗口的利用率。

八、氛围热烈的底部标签栏

底部标签栏的设计在图标创意层面发挥较多，各类风格的图标让该栏目更加丰富多彩，除此之外也有在背景层渲染氛围的案例。

近期恰逢芒果 TV 十周年之际，在底部标签栏背景层也加强了氛围感。丰富多彩的元素和配色，结合主题化的图标设计，使得整体氛围感拉满。

九、收缩式交互设计

通过交互方式应对用户操作过程，特别是在滑动界面时，交互方式的优化可以降低干扰，提高当前界面的利用率。

在 Blurrr App 创作界面，默认以 3D 动态图标展示“开始创作”按钮，当滑动界面时按钮会收缩展示。通过收缩式的交互设计，让界面可以展示更多内容，也不会影响用户点击按钮进行创作。即通过 3D 动效加强了功能的曝光度，又通过收缩式交互提高了内容的展示空间，可谓是一举多得的设计解决方案。

十、形象化的进度设计

进度设计是反馈状态变化的关键，通过可视化的表达让用户一目了然，提高用户对服务过程的把控。

当用户通过携程旅行 App 订票后，在行程订单界面可以看到列车行驶状态的进度提示。通过可视化的列车形象的表达了行驶状态，让用户清晰的看到行驶方向和抵达站点示意。不仅信息传递高效，形象的表达也使得感官体验更佳。

作者：黑马青年
来源：站酷

评论(0) 浏览(399)

262024-4

【万字干货】B端进阶｜表格数据过滤分析

前端达人

一、为什么需要数据过滤

在B端（Business to Business，即企业对企业）应用中，表格数据过滤功能是一项非常重要的功能。它能够帮助企业用户更方便地管理和查询表格数据，提高工作效率和数据准确性。因此一个体验感良好的数据筛选功能有助于用户的任务处理效率。帮助系统更加友好、易用，从而增加用户的满意度和使用频率。

在确定过滤类型之前，首先，需要确定哪些字段需要进行筛选。这需要根据业务需求和用户习惯来确定。例如，在销售系统中，可能需要对产品名称、销售日期、销售数量等字段进行过滤；在人力资源系统中，可能需要对员工姓名、部门、职位等字段进行过滤。

二、数据过滤的类型

根据确定的过滤条件，需要设计合适的过滤方式。常见的过滤方式包括：1）搜索；2）页签导航；3）条件筛选。不同类型的过滤方式对应不同的用户目标及数据特点

三、搜索

搜索是一种通过输入关键词或短语在大量数据中寻找相关信息的过程。在互联网时代，搜索已成为获取信息的主要途径之一。通过搜索引擎，用户可以快速地找到自己需要的内容。

3.1 搜索类型

3.1.1 单条件模糊搜索

介绍：用户在搜索框中输入一个关键词，然后搜索引擎返回与该关键词相关的结果。

优点

：简单易用，用户只需要输入一个关键词即可快速找到相关信息；
缺点

：搜索方式可能不够精确，因为用户可能没有提供足够的上下文信息，导致搜索引擎返回的结果与用户的期望不符

3.1.2 多条件模糊搜索

介绍：指用户在搜索框中输入或选择多个关键词，然后搜索引擎返回与这些关键词都相关的结果。可选择是后台配置查询条件还是用户配置。

优点

：更加精确，因为用户提供了更多的上下文信息，可以帮助搜索引擎更好地理解用户的意图；
缺点

：需要用户输入更多的关键词，增加了用户的输入成本。

3.1.3 搜索条件切换

介绍：指用户在搜索框中输入一个关键词后，可以手动切换到另一个关键词进行搜索。

优点

：灵活性和自由度更高，用户可以根据自己的需要随时切换关键词进行搜索；
缺点

：需要用户手动操作，增加了用户的操作成本。

3.2 触发方式

3.2.1 实时触发

介绍：实时触发是指当用户在搜索框中输入关键字时，搜索功能会立即进行匹配并返回相关结果。这种触发方式可以为用户提供实时的搜索体验，方便用户快速找到所需信息。通常需要后端服务器的支持。

优点

：当用户在搜索框中输入文字时，搜索功能会立即提供搜索结果。这种方式可以提供快速反馈，让用户更快地找到所需信息。此外，实时触发搜索还可以帮助用户逐步缩小搜索范围，提高搜索效率。
缺点

：可能会对服务器造成较大的负担，因为每次用户输入都会触发一次搜索请求。其次，实时触发搜索可能会干扰用户的输入过程，因为用户需要不断地观察搜索结果并根据结果进行调整。

3.2.2 手动触发

介绍：指用户需要手动触发搜索功能，通常是通过点击搜索按钮或按下回车键来执行搜索操作。这种触发方式可以避免用户在输入过程中频繁触发搜索，提高用户体验

优点

：用户需要点击一个搜索按钮或使用特定的快捷键才能触发搜索功能。这种方式可以减少对服务器的负担，并且不会干扰用户的输入过程。
缺点

：可能会让用户感到不便，因为他们需要手动触发搜索功能。此外，如果用户忘记触发搜索功能，他们可能会浪费时间在输入过程中。

3.3 理解用户的搜索意图

提高用户的搜索效率和满意度。通过提供相关的关键词建议和展示之前的搜索历史，搜索引擎可以帮助用户更快地找到所需信息，并减少用户的搜索时间和成本。此外，这些功能还可以增加用户的忠诚度和满意度，因为它们能够提供更加个性化和智能化的搜索体验。

3.3.1 关键字联想

介绍：用户在输入一个关键词时，搜索引擎能够自动推荐与该关键词相关的其他关键词，以帮助用户更快地找到所需信息。

3.3.2 搜索历史

介绍：记录了用户之前搜索过的关键词和搜索结果，以便用户在以后的搜索中更快地找到之前查找过的信息。

四、导航

使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容；主要样式有基础、卡片、胶囊等。

4.1 页签导航（tabs）

通过点击不同的标签页来切换不同页面或视图的功能。在许多应用程序中，页签导航可以帮助用户快速地找到自己需要的功能或页面。例如，在浏览器中，页签导航可以帮助用户同时打开多个网页，并在不同的标签页之间进行切换。

优点：

直观易用：页签导航简单明了，用户可以快速理解并使用

节省空间：页签导航可以在有限的屏幕空间内展示多个页面或部分内容，提高了页面的利用率。

便于浏览：用户可以通过页签快速切换到不同的页面或内容，提高了浏览效率。

缺点：

导航深度限制：页签导航通常只适用于一级或两级导航，对于多级导航可能会显得过于复杂。

内容展示限制：由于页签的空间有限，可能无法展示所有需要的内容，需要用户点击后才能查看全部内容。

4.2 卡片导航

优点：

内容丰富：卡片导航可以展示更多的内容和信息，用户可以通过卡片了解更多详情

直观性强：卡片导航以视觉化的方式展示内容，更加直观和易于理解

交互性强：用户可以通过滑动或点击卡片进行操作，增强了交互性和体验感

缺点：

占用空间大：卡片导航需要占用更多的屏幕空间，可能会影响页面的整体布局和美观度；

操作复杂度较高：对于一些用户来说，卡片导航的操作可能会比较复杂，需要一定的学习成本

五、条件筛选

筛选是一种对搜索结果进行过滤和排序的过程，以便用户能够更快地找到自己需要的信息。筛选可以根据不同的标准进行，例如相关性、时间、重要性等。在许多应用程序中，筛选功能可以帮助用户缩小搜索范围，提高搜索效率。

5.1 页面布局

5.1.1 上下布局

特点：筛选条件和表格数据分别位于页面上方和下方，用户可以逐行查看数据，同时看到筛选条件。

使用建议：适用于筛选条件较少，且数据量较大的情况。用户可以快速浏览数据，同时方便对筛选条件进行修改。

5.1.2 左右布局

特点：筛选条件和表格数据分别位于页面左侧和右侧，用户可以同时看到筛选条件和数据。

使用建议：适用于筛选条件较多，且数据量较小的情况。用户可以在筛选条件和数据之间进行快速切换，提高操作效率。

5.1.3 浮层（弹窗/抽屉）

特点：仅展示筛选图标按钮，以浮层形式呈现。可以在当前页面的上方或侧边以浮动的形式展示，不会占用太多页面空间。

使用建议：当页面的空间利用率要求比较高，非高频操作场景时可使用浮层的模式，节省页面空间。

5.2 筛选类型

B端表格的筛选类型主要有平铺式、收折式和下拉式三种：

5.2.1 平铺式

介绍：平铺式是将所有筛选项罗列出来平铺在页面上，可以兼容多种数据格式，如数字、文本、标签、枚举值、布尔值等，包含但不限于日期选择期、标签切换、单选框、复选框等多种控件。

优点

直观明了：平铺式筛选将所有选项平铺展示，方便用户快速找到所需选项；

易于操作：平铺式筛选通常采用简单的点击或拖拽操作，方便用户进行筛选。

缺点

占用空间较大：平铺式筛选需要展示所有选项，因此可能会占用较多的页面空间；

不适合大量选项：如果选项数量过多，平铺式筛选可能会显得拥挤，影响用户体验。

使用建议

适用于选项数量适中的情况：平铺式筛选适合选项数量适中，且用户需要直观看到所有选项的情况；

可以结合其他筛选方式：如果选项数量过多，可以考虑结合其他筛选方式，如收折式筛选或表单式筛选。

5.2.2 收折式

介绍：收折式筛选通常以收折的状态展示筛选条件，只有在用户触发搜索后才会完全展开。一般筛选条件少于6个，可以通过1行或者2行展示筛选项的结果。

优点

节省空间：收折式筛选可以将不常用的选项折叠起来，节省页面空间；

易于查找：收折式筛选通常会提供搜索或筛选条件，方便用户快速找到所需选项。

缺点

操作相对复杂：收折式筛选需要用户展开或折叠选项，操作相对复杂一些；
不适合所有场景：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，收折式筛选可能不太适合。

使用建议

适用于选项数量较多的情况：收折式筛选适合选项数量较多，且用户需要节省页面空间的情况；

可以结合其他筛选方式：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，可以考虑结合其他筛选方式，如平铺式筛选或表单式筛选。

5.2.3 表单式

介绍：表单式是在系统中页面中的筛选区设置下拉筛选条件，用户通过下拉选择筛选条件中的值对数据进行筛选操作。当然筛选区中可能除了下拉选择之外还有输入筛选，下拉筛选和数据筛选共同组成筛选区。

优点

直观明了：表格形式的筛选方式可以让用户直观地看到各个字段和对应的数据，方便用户进行对比和筛选；

操作简单：用户可以通过简单的点击、输入等方式进行筛选，操作简便，提高了筛选效率；

灵活性高：表格形式的筛选方式可以支持多种筛选条件和筛选方式，用户可以根据自己的需求进行筛选，灵活性较高。

缺点

界面拥挤：如果表格中的字段较多，会导致界面拥挤，影响用户的使用体验；

数据量大时筛选性能不佳：对于大量数据，表格形式的筛选方式可能需要较长时间才能得出结果，影响筛选效率；

不易展示复杂数据关系：表格形式的筛选方式更适合展示简单的数据关系，对于复杂的数据关系可能难以直观地展示。

使用建议

根据实际需求选择筛选方式：在选择筛选方式时，需要根据实际需求和数据量的大小来选择适合的筛选方式。对于简单的筛选需求，可以使用表格形式的筛选方式；对于复杂的筛选需求，可能需要考虑使用其他筛选方式，如条件语句等；

优化表格布局：为了提高用户的使用体验，可以对表格的布局进行优化，如对字段进行排序、隐藏不必要的字段等；

限制筛选条件数量：为了提高筛选效率，可以限制用户可以设置的筛选条件数量，避免过多的筛选条件导致筛选性能下降。

5.2.4 浮层弹出式

介绍：页面中仅展示筛选按钮，点击后以气泡或抽屉的方式去承载筛选内容。

优点

用户友好：浮层式的筛选条件提供了一种直观的方式来展示筛选选项，用户可以轻松地查看和选择，无需在页面之间切换或变动页面布局；

节省空间：通过将筛选条件放在浮层中，主页面可以保持简洁，不受到过多的干扰元素影响，同时也可以避免筛选条件过多导致的页面拥挤；

灵活性高：浮层式的筛选条件可以方便地调整和修改，以适应不同的筛选需求和业务变化。

缺点

可能会引起混淆：如果用户不熟悉这种交互方式，可能会对浮层式筛选条件感到困惑，需要额外的引导和说明；

可能会影响用户体验：浮层式的筛选条件需要用户手动关闭或选择选项，如果操作不够便捷或流畅，可能会影响用户体验；

可能会影响页面性能：如果筛选条件过多或数据量较大，浮层式的筛选条件可能会导致页面加载速度变慢，影响用户体验。

使用建议

提供清晰的引导：在应用中使用浮层式的筛选条件时，需要提供清晰的引导和说明，帮助用户更好地理解和使用；

优化关闭和选择操作：为了提高用户体验，需要优化筛选条件的关闭和选择操作，使其更加便捷和流畅；

考虑数据量和性能：在应用中使用浮层式的筛选条件时，需要考虑数据量和页面性能等因素，采取相应的优化措施。

5.2.5 表头筛选

介绍：位于表格表头区域，每一列表头可做单列筛选，也可多列同时筛选。

优点

直观明了：表头筛选将筛选条件直接展示在表格的表头位置，方便用户直观看到所有可用的筛选条件；

提高效率：表头筛选可以减少用户的操作步骤和时间成本，提高筛选效率。

缺点

适用范围有限：表头筛选通常适用于简单的单字段筛选或单列筛选，对于多字段或多列的复杂筛选需求可能不太适用；

可能影响表格美观度：在表格中添加多个表头可能会影响表格的美观度，需要权衡设计和用户体验之间的平衡。

使用建议

适用于简单筛选需求的情况：表头筛选适合简单的单字段或单列的筛选需求，如根据姓名、性别等进行筛选；

可以结合其他筛选方式：如果用户需要复杂的筛选需求，可以考虑结合其他筛选方式，如平铺式、收折式或表单式等。

5.2.6 已选条件

介绍：将已经录入的条件展示在查询条件的下方，可快速删除

优点

用户体验：显示已选条件可以帮助用户更好地理解筛选结果，提高用户体验。用户可以直观地看到哪些条件已被选中，从而更好地理解数据的筛选结果；

可视化效果：在筛选区显示已选条件，可以增强表格的可读性和可视化效果。筛选条件的显示可以提供一种直观的方式，帮助用户更好地理解数据和筛选结果；

筛选灵活性：如果筛选区显示已选条件，用户可以根据需要轻松地修改或删除已选条件，提高筛选的灵活性；

筛选逻辑清晰度：通过显示已选条件，用户可以更好地理解筛选的逻辑。这有助于用户更好地理解数据之间的关系和关联，提高数据分析的准确性；
筛选操作效率：对于大量数据的筛选，显示已选条件可以帮助用户更快地定位和调整筛选条件，提高筛选操作效率。

六、优化过滤性能

表格过滤是用户在处理大量数据时常用的功能之一。如果过滤性能不佳，用户需要等待很长时间才能看到结果，这将严重影响用户体验。优化表格过滤性能可以减少用户等待时间，提高用户体验。

6.1 索引优化

通过创建索引来提高查询过滤的效率。通过创建模版的方式更快地定位到特定的数据行，通过创建合适的索引，可以显著减少查询过滤所需的时间，提高查询性能。

6.1.1 查询条件模版

将常用的查询方案保存为模版，通过快速切换模版的方式批量替换查询条件，达到快速查询的效果，方便用户快速筛选出所需的数据。

6.1.1 查询值模版

将常用的查询方案连同值一起设置为模版，在下次切换查询方案时，自动根据预置的值进行自动查询，查询结果保存至浏览器，方便下次调用。

6.2 缓存机制

介绍：（浏览器前端）将已经过滤过的数据缓存起来，避免重复查询。

6.3 分页加载

介绍：采用分页加载的方式，减少一次性加载的数据量，提高加载速度。

七、总结

在本文中，我们探讨了B端表格数据过滤功能的类型和实现。通过了解用户需求和使用场景，我们提出了表格数据过滤方案。以上方案需要结合实际场景合理配置和选择。同时，我们还介绍了表格数据过滤的实际案例，以及一些性能优化技巧。通过实际应用案例的展示，证明了以上方案的有效性和实用性。

在未来的工作中，我们可以进一步探索表格数据过滤功能的扩展和优化。例如，可以增加对异步数据的支持，提高表格数据的实时性；还可以引入机器学习算法，实现智能过滤和推荐功能。此外，我们还可以考虑与其他系统的集成和交互，以实现更广泛的应用。

总之，B端表格数据过滤功能是提高数据处理效率和准确性的重要工具。通过不断优化和完善该功能，我们可以更好地满足用户需求，提升用户体验，为B端业务的发展提供有力支持。

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

评论(0) 浏览(398)

« 1 ... 71 72 73 74 75 76 77 ... 881 »

日历

链接

个人资料

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

首页

B端的10个设计方法

探索优秀的企业级后台管理界面设计

深度解析：如何让设计作品摆脱平庸？

医疗手术机器人软件界面设计赏析

新中式与AI的融合碰撞—百度二十四节气卡设计升级

深度解析：如何让设计作品摆脱平庸？

八角行为分析 — 打动用户的产品密码

八角行为分析 — 打动用户的产品密码

优秀的设计就是带给用户惊喜！

【万字干货】B端进阶｜表格数据过滤分析

分类

日历

链接

个人资料

存档