首页

B端设计—常见问题&解决方式

博博

一、UI设计师在B端产品界面设计时,可能会遇到的问题。
 
1.1复杂的数据可视化需求
B端应用往往涉及复杂数据,设计师需要创造清晰且有效的方式来显示这些信息。
对于B端产品设计中复杂的数据可视化需求,一个详细的解决方案需要从不同层面进行考虑和实施:
理解用户需求:
首先,进行深入的用户研究以理解不同用户的数据需求。这可能包括用户访谈、观察和问卷调查,以收集关于他们如何理解和使用数据的信息。
选择合适的图表类型:
根据数据类型和用户需求选择最合适的图表类型。例如,时间序列数据适合折线图,而比较数据则可能更适合条形图或饼图。同时,对于更复杂的数据关系,可能需要使用散点图、热图或树状图。
简化设计:
避免过度装饰的图表。使用清晰的轴标签、标题和图例,确保用户能够轻松读懂图表。选择合适的颜色方案来增强可读性,同时避免使用令人分心或误解的颜色组合。
增加交互性:
交互式元素可以大大增强数据可视化的效果。例如,当用户将鼠标悬停在图表的某个部分时,可以显示详细的数据点信息。此外,可以允许用户通过筛选、排序或拖动来自定义视图。
提供上下文和引导:
确保每个图表都有足够的上下文信息,比如引导性文本或简短的分析,帮助用户理解数据背后的故事。这不仅包括图表本身的解释,还包括如何使用图表进行有效决策的指导。
优化性能:
对于处理大量数据的可视化,确保性能优化是至关重要的。这可能涉及后端数据处理优化、前端渲染优化以及合理的数据加载策略。
用户测试和反馈:
设计完成后,进行用户测试以收集反馈。观察用户如何与数据可视化交互,并根据他们的反馈进行调整。这是一个持续的过程,旨在不断提高可视化工具的有效性和用户满意度。
B端设计—常见问题&解决方式
可以找到大量的参考选择适用自己产品风格的可视化,之后进行修改。
 
1.2深层级的功能集成
与C端产品相比,B端产品可能有更深层次和复杂的功能,难以设计简洁直观的用户界面。
对于UI设计师在进行B端产品界面设计时遇到的“深层级的功能集成”问题,一个详细的解决方案需要包括以下几个关键策略:
模块化设计:
通过将复杂功能分解为独立、可重用的模块,可以简化界面并提高可维护性。每个模块应专注于单一功能或任务,从而使整体系统更加清晰易懂。
清晰的信息架构:
建立一个逻辑清晰的信息架构是至关重要的。这包括创建一个分层的菜单结构,将相关功能组织在一起,并通过适当的命名来指导用户。
分层的导航系统:
为不同层级的功能提供清晰的导航路径。这可能包括主导航菜单、次级导航以及面包屑导航等,帮助用户理解他们在应用中的位置以及如何访问特定的功能。
搜索功能:
随着功能数量的增加,提供一个强大的搜索工具变得尤为重要。这可以帮助用户快速找到他们需要的特定功能或信息。
自定义和个性化设置:
允许用户根据自己的工作流程和偏好来自定义界面。这包括选择要显示的模块、调整布局以及设置快捷方式等。
交互式教程和帮助文档:
为新用户提供交互式教程,帮助他们快速了解如何使用应用。同时,提供详细的帮助文档和FAQ,以便用户可以自助解决问题。
用户测试和反馈:
持续进行用户测试和收集反馈,了解哪些功能集成方式有效,哪些需要改进。根据用户的反馈不断调整和优化界面设计。 通过实施这些策略,UI设计师可以有效解决深层级功能集成的问题,创造出既强大又易于使用的B端产品界面。
B端设计—常见问题&解决方式
 
1.3用户习惯差异
B端用户可能来自不同行业,具有不同的操作习惯和偏好,满足所有用户的需求挑战较大。
针对B端产品界面设计中的“用户习惯差异”问题,一个详细的解决方案应包括以下几个步骤:
深入用户研究:
通过访谈、问卷调查、用户观察和分析用户数据来理解不同用户群体的习惯和需求。这些研究帮助揭示不同行业、角色和经验水平的用户如何与产品互动。
多样化的设计解决方案:
根据研究结果,设计可以适应不同用户需求的界面。这可能涉及提供多种布局、导航样式和交互方式供用户选择。
个性化和定制功能:
允许用户根据个人偏好调整界面,包括主题、布局、快捷方式和默认设置等。
清晰的指导和帮助:
为了帮助用户理解如何使用产品,提供详细的帮助文档、FAQ和交互式教程。
持续的反馈循环:
设立机制收集用户反馈,定期进行用户测试,并根据反馈迭代优化产品。
通过这些策略,UI设计师可以更好地应对用户习惯的差异,创造出既满足用户需求又易于使用的B端产品界面。
 
1.4访问权限管理
需要设计复杂的权限设置界面,确保不同级别的用户只能访问特定信息。
针对B端产品界面设计中的“访问权限管理”问题,一个详细的解决方案应该包括以下几个关键策略:
深入理解不同角色的需求:
与产品的各种用户群体(如管理者、普通用户、审计员等)进行交流,了解他们对权限管理的需求和期望。
设计灵活的权限框架:
创建一个可以灵活适应不同用户和角色需求的权限系统。这包括定义不同级别的权限,如查看、编辑、管理等,并允许细粒度的控制。
直观的权限配置界面:
为管理员设计一个清晰、直观的界面,让他们可以轻松分配和调整权限。提供明确的指示和反馈,确保管理员理解每种权限的含义。
透明的用户权限指引:
向用户清晰显示他们的权限等级和可以访问的内容。当用户尝试进行超出权限的操作时,提供友好的错误消息和指引。
权限变更的审计和记录:
记录所有权限的更改历史,以便于追踪和审计。这对于保障系统安全和满足合规要求非常关键。
持续的测试和反馈:
定期进行权限系统的用户测试,收集反馈并根据反馈调整和优化设计。
通过实施这些策略,可以构建一个既强大又易于管理的访问权限系统,从而提升B端产品的安全性、灵活性和用户满意度。
 
1.5多设备兼容
必须确保界面在各种设备和屏幕尺寸上均表现良好,
尤其是需要在宽为1440px和1920px下有效运行。
针对B端产品界面设计中的“多设备兼容性”问题,一个详细的解决方案涉及多个层面。
首先,采用响应式设计原则
,确保界面元素和布局能够根据不同的屏幕尺寸和分辨率自动调整。
其次,对于关键功能,进行彻底的跨平台测试,包括不同操作系统、浏览器和设备类型,确保功能的一致性和稳定性。
另外,考虑到触控和非触控设备的交互差异
,设计时应确保按钮和其他控件大小适中,易于操作。
通过这些综合策略,可以有效解决多设备兼容性问题,提升用户的整体体验。
 
1.6专业术语和内容
针对B端产品界面设计中的“专业术语和内容”问题,一个详细的解决方案包括深入行业研究,确保使用对目标用户群来说准确、相关的术语。
与此同时,与行业专家合作,以验证内容的准确性和适用性,确保信息传达清晰无误。
设计时,考虑到不同用户的知识背景,提供容易理解的解释或工具提示,对复杂术语进行简化。此外,创建全面的帮助文档和在线教育资源,帮助用户深入理解专业内容。
定期更新内容,确保与行业发展保持同步,同时收集用户反馈,不断优化和调整术语和内容的使用。通过这些方法,UI设计师可以在确保专业准确性的同时,提升用户的理解和操作效率
 
1.7交互复杂性
了解用户:
深入理解B端用户的工作流程和任务需求。B端用户往往更关注效率和功能,因此设计师需要明确用户的专业性和任务目标。
简化流程:
尽管B端应用可能功能复杂,但设计师应努力简化用户流程。这包括创建直观的导航系统,减少不必要的步骤,以及提供清晰的指引。
模块化设计:
将复杂功能拆分成独立的模块或组件。每个模块专注于一个具体任务或功能,用户可以根据需要组合使用它们。
定制化和个性化:
允许用户根据自己的需求和偏好定制界面和功能。例如,提供可定制的仪表板,让用户可以选择对他们最重要的信息和工具。
清晰的视觉层级:
通过颜色、大小和布局等视觉元素创建清晰的层级,帮助用户理解信息的重要性和操作的先后顺序。
 
二、不同的B端产品所面对的问题也不一样
 
不同B端产品可能面临的问题包括用户角色多样化、数据密集、严格的安全要求、高度定制的工作流程和快速变化的行业规范。在B端产品设计中,UI设计师可能面临的问题和注意事项举例:
ERP系统:
可能出现的问题包括复杂的数据集成和大量的用户角色。设计时应注重清晰的数据可视化和灵活的权限设置。
医疗保健平台:
面临严格的合规和隐私要求。设计应确保数据安全性,同时提供易于理解的导航和专业术语解释。
金融管理软件:
需要处理复杂的交易和报告。应关注于精确的数据展示和高效的任务流程设计。
CRM系统:
需管理大量客户数据和销售流程,可能面临数据整合和用户个性化需求的问题。设计时应侧重于清晰的数据组织和自定义视图。
供应链管理软件:
可能面临复杂的物流数据和多级用户访问问题。解决方案包括强大的数据过滤功能和灵活的权限设置。
项目管理工具:
需处理不同项目和任务的组织,可能面临用户协作和进度追踪的挑战。设计应侧重于简化的任务管理界面和实时更新功能。
财务报告系统:
可能遇到的问题包括复杂的财务数据展示和各种报告格式的需求。设计时应注重灵活的报告工具和定制的数据仪表板。
教育管理平台:
面临多样化的用户群体和教育内容的问题。设计应提供清晰的课程导航和易于访问的教学资源。
工业监控系统:
可能面临实时数据流和高级监控功能的需求。设计时应重视数据实时更新和高效的警报系统。
作者:张阳光Designer
来源:站酷

 

 

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

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

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

 

AIGC产品的设计原则

博博

一、AI产品形态介绍

不同的产品所具备的AI能力以及用户的使用方式都是截然不同的。从产品功能的角度,产品大致可以分为三类:辅助驾驶型、内容生产型、自主决策型。

辅助驾驶型

Copilot 辅助驾驶型如其名,更强调AI的辅助性。AI会针对某个模块辅助用户做出决策,或者基于用户的操作而操作,从而帮助用户实现自己灵感的落地,类似在成熟软件中的插件功能。微软的Microsoft 365 Copilot 结合在已有的Word、Excel工具当中,用户仍然可以自己书写文章或表格,但也能随时唤起AI工具进行编辑,对于已有的文件进行汇总、扩写等编辑操作。

内容生产型

内容生产型是需要调用LLM的API来实现某一具体内容的功能性产品。用户需要针对具体场景下达相对详细、明确的指令后,AI会生成内容结果的反馈。比如大家熟悉的midjourney,用户下达具体的内容场景描述,midhourney会返回图片生成的结果。

自主决策型

AI Agent可以进行自主决策和执行任务,它可以通过独立思考和调用工具逐步完成给定的目标,无需人类去指定每一步的操作。比如,告诉 AI Agent 帮忙下单一份外卖,它就可以直接调用 APP 选择外卖,再调用支付程序下单支付,无需用户去指定每一步的操作。

二、AIGC产品设计原则

在AI产品的设计过程当中,针对不同的产品形态、用户场景、用户心智需要明确其设计原则。当前用户对于AI工具的预期是:高性能、快速、高效和可靠。从用户体验上来说,用户与AI产品的交互方式、对于AI产品的信任程度都有别于其他软件。我们需要在各个环节上,制定好AI产品的能力范畴,管理好用户对产品的预期,为AI产品提供一个友好、可拓展的交互架构。

原则1:让用户明确知道产品的能力范围

在产品推出之前,清晰地定义产品的能力和限制。不要过度夸大产品的功能或过度承诺,而是诚实地描述产品的真实能力。给予用户在使用产品前充足的心理预期,用户可以清晰的了解产品的能力范围。更好地管控用户心理预期的同时,也可以向用户传递产品的能力点。
 
如小库科技详细描述了产品可以应用的功能场景,用户对于场景化的词语可以有更好的关联联想,对于产品的能力也有更好的边界认知。
 
科大讯飞也通过具体的场景化进行产品功能的传递
 
在Liblib的模型广场中,会将用户生产的结果、模型以社区成果的形式进行展示,用户可以查看详细的生成参数进行尝试,对于新手用户也可以起到很好的内容引导。

原则2:让用户可预期结果

人工智能决策的透明度对用户至关重要,使用可视化工具、交互或解释性语言让用户能够理解AI是如何做出决策。如小库AI,在“描述词”的提示文案中告知用户输入词的限定以及预期的生成结果,并可以通过词库告知用户可以输入哪些类型的词。
 
如酷家乐AI,用户在首次使用AI工具,没有灵感或想法的时候,引导并提示用户可上传的素材类型,让用户可以有更好的目标预期。

原则3:建立与用户共建产品的机制

积极邀请用户参与产品的设计和改进过程,通过用户调研、用户测试和用户反馈机制,了解用户的期望和需求,并将其纳入到产品的迭代和改进中。如在Discord社区当中,用户可以在官网的反馈入口找到期望反馈的内容板块,可以进行问题帖子的反馈,所有的用户群体可以对帖子的内容进行投票支持和评论。也就是相当于以社区共建的形式,让所有的用户都可以对产品进行共建维护。如果是产品功能本身的问题,开发人员可以及时响应;如果是用户自身对产品的认知问题,社区的小伙伴也可以进行很好的解答。

原则4:减轻用户对数据隐私安全的顾虑

在AI盛行的当下,数据隐私安全可以说是非常敏感的话题了,AI泄漏数据隐私的事件也在不断曝光。妙鸭相机的爆红事件给我们的警示是在产品设计的过程中,除了思考如何利用新技术产出新的创意,对用户数据隐私安全的保护同样重要,它是产品获得用户信任,得以被持续使用的原因之一。
数据隐私安全涵盖的范围是非常广泛的。从产品设计的角度来看对于数据隐私安全的保护可以从以下几点考虑:

1、政策和规范的跟进和了解

遵守数据隐私和安全相关的法律法规和标准对于产品和应用是最基础的。在国内,7月网信办等7部委联合公布了《生成式人工智能服务管理暂行办法》,生成式人工智能服务管理办法的正式落地为我国AI发展打下了基础。

2、积极告知,将决策权还给用户

积极告知用户产品如何保护数据隐私安全也是规避风险的一种方法。比如用户协议中对于用户隐私的处理,比起直接提供给用户大段的文案让他们去逐字查看,在操作流程中说明产品对于用户隐私的使用,并让用户进行手动确认会明显提高用户对于产品的信任程度。苹果在数据隐私安全方面始终站在了用户这一边,无论是安装应用时询问权限还是每次出现的“是否允许粘贴”,其对于隐私保护的方法与措施都值得我们学习。

3、本地存储也是一种选择

Rewind工具可以自动存储用户在自己电脑和手机上看到的所有内容,通过引入“私人助理”的角色,方便用户基于AI进行内容的搜索和浏览整合。工具对于用户隐私的处理也非常值得参考,其主要通过本地存储、内容随时可删除等方法,让隐私优先的原则贯穿在产品的定位和功能设计之中,也是这款工具能够获得好评的原因之一。

三、结语

总的来说,AI技术的推广目前仍面临相当大的挑战,对于大众而言也有一定的使用门槛。作为设计师,比起强调产品能力的升级,我们更应该注重对用户的关怀,一款好的AI产品必定是智能化且人性化的。AI技术下的人机交互应用已经成为UX设计的趋势,我们需要注意平衡技术和用户体验之间的关系,以确保我们的设计在满足用户需求的基础之上,能够助力产品在商业市场上的成功。

 

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

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

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

UI设计师未来的出路在哪?

资深UI设计者

首先,随着移动互联网的普及和技术的不断发展,UI设计师的职业发展路径将更加广泛和多样化

UI设计通过哪些方面赋能产品?

资深UI设计者

UI设计在赋能产品方面具有重要作用。通过提升用户体验、增强品牌识别度、优化信息架构、促进交互操作、提高可定制性、降低学习成本以及传递情感价值等方面,UI设计可以帮助产品更好地满足用户需求,提升产品的竞争力。

 

如何对老板或客户讲述自己的UI设计方案?

资深UI设计者

对用户讲解自己的UI设计方案时,需要将专业术语转化为用户易于理解的语言,并着重强调设计方案如何提升用户体验。

如何确认UI设计的设计风格?

资深UI设计者

确认UI设计的设计风格需要综合考虑主色调选择、产品特性分析、图标和字体选择、排版设计、品牌识别、用户需求和习惯、设计的一致性、简洁与清晰以及创新性等方面。通过这些方面的考虑和应用,可以设计出符合品牌形象、用户期望和产品特点的优秀UI界面。

自然语言界面:开启人机交互的全新篇章

博博

作者:山中

人机交互界面经过几十年的发展,人与机器间的交互变得越来越容易,随着ChatGPT等大语言模型的出现,一种我们既熟悉又陌生的交互方式再次进入大众视野,它就是自然语言界面(NLI)。

那么什么是自然语言界面,它又会为人机交互带来哪些新的变化,它会成为下一代主流的用户界面吗?本文将从计算机UI的发展简史出发,对比自然语言界面与传统图形界面的差异,带你了解自然语言界面的应用场景和发展方向。

一、计算机UI发展简史

首先让我们回顾一下过去几十年计算机UI的发展阶段。

1、穿孔纸带(Punched tape)

1940-1960年代,早期的计算机通过穿孔纸向计算机输入指令,带孔为1,无孔为0,经过光电输入机将数据输入计算机。由于需要输入二进制的机器语言,计算机在这个阶段只被少数专家应用于专业领域。

 

2、命令行界面(CLI)

20世纪60年代中期,命令行界面( CLI )作为穿孔纸带的友好替代方案出现在计算机上。命令行界面是一种通过输入被称为命令行的文本行与计算机程序交互的方法,虽然它与人类语言有较大差异,但还是大幅降低了计算机的使用门槛,个人计算机(PC)随之出现。

 

3、图形用户界面(GUI)

命令行界面通常需要用户记忆操作的命令,这对于普通用户仍然是很困难的。GUI的出现正是为了解决这个问题:既然人类很难记住各种命令,那就让机器提供可能的选项,人类只需要通过图形元素进行选择。最早的图像界面出现在1970年代,随后苹果和微软让GUI普及,短短二三十年,使用GUI交互的计算机和各类消费电子产品已经成为我们工作生活中不可缺少的一部分。

 

 

二、自然语言界面(NLI)的爆发

什么是自然语言界面?

W3C是这样定义的:自然语言界面是用户与系统通过自然语言进行通信的用户界面。用户通过语音或某种其他方法提供输入,并且系统以通过语音、文本或某种其他方法传递的话语的形式生成响应。

自然语言界面是什么时候出现的?

最早的自然语言界面可以追溯到 20 世纪 60 年代。ELIZA是一个早期的自然语言处理计算机程序,由麻省理工学院的Joseph Weizenbaum教授于1964 年至 1967 年开发,旨在探索人类和机器之间的沟通方法。ELIZA 通过模式匹配和替换来模拟对话,也就是说它通过检测用户输入的内容中是否包含某些关键词来做出响应,虽然它能做出的反应有限,更不能真正理解人类的语言,但这是人类第一次尝试通过自然语言进行人机交互,也是后续自然语言处理(NLP)技术研究的一个里程碑

 

语音用户界面(VUI)

自然语言处理(NLP)技术经过几十年的发展,终于在2010年代迎来第一波应用爆发。2011年 Siri 作为 iOS 功能由 Apple 发布,随后各家手机语音助手、智能音箱等VUI产品纷纷出现。但随之出现了一个新的网络名词-“人工智障”。虽然 Siri 相比 ELIZA 能做的事情更多了,但它们在体验上仍没有本质区别,Siri等产品依然需要用户遵循特定的表述方式才能做出正确响应,可能换一个表述方式它们就听不懂了,所以这个阶段的自然语言界面更多是作为一种辅助交互方式

 

大语言模型(LLM)

ChatGPT 于2022年底开放测试,不到一年时间大语言模型(LLM)与AIGC应用已经遍地开花。大语言模型实现了NLP技术的阶段性跨越,AI对自然语言的理解能力大幅提升,不仅能模仿人类对话,还具备文案写作和问题分析等能力,并且这些能力还在飞速进步中,相信自然语言界面即将迎来第二次应用爆发。

 

三、自然语言界面的优势

那么,自然语言界面相比传统图形界面又有什么优势呢?

1、低门槛

刻在我们DNA里的交互方式

语言是我们与他人交互的主要“界面”,智人的言语出现于 50,000 至 200 万年前,所以说这是刻在我们DNA里的交互方式。我们从小就学习阅读、写作和说话,因此通过自然语言界面与计算机交互几乎不需要学习

 

2、高效率

GUI的思路是机器提供可能的选项,让人类进行选择。但复杂产品可能有几百上千个选项,即便设计师努力按照最合理的逻辑整理、收纳这些选项,用户仍需要花大量时间精力寻找、理解、记忆这些选项。

酷家乐用户问题

酷家乐用户联系客服的问题中较多是工具使用问题:怎么添加门把手、怎么把门翻转、怎么显示柜体尺寸。在几十上百个功能中找到那一个功能都如此困难,对于需要用到多个“选项”组合操作才能实现的效果,那确实难以要求普通用户做到。

 

但如果酷家乐支持自然语言交互,我只需要告诉它我们的诉求:“添加门把手”、“把门翻转”、”显示柜体尺寸“,软件便会直接实现这些的效果。

通过自然语言输入,用户便可以忘记各家软件各种复杂的交互逻辑,设计师也无需煞费苦心设计复杂的用户引导和帮助系统,随之客服人力成本也将大幅降低。

Tome

目前已经有一些产品在这么做了,Tome是一款制作提案PPT的产品,它可以通过自然语言输入实现大部分操作,并且支持AI直接生成内容。

 

3、不设限

早期计算机的输入输出完全靠机器语言,门槛很高。后来,普通用户借助图形界面和开发好的程序,也能轻松使用计算机,但同时我们也被其限制了。

美间站点

以”美间“为例,美间站点有大量的海报模板,可以按用途、风格维度进行筛选,但用户也只能按这两个维度筛选。如果我想找出10月份用户点击最高的10个节气海报模板,那对不起,办不到,不是因为我们没有这个数据,而是我们没有提供个“选项”,通过SQL或者其他语言查询数据库就可以获取到。

 

但如果美间的数据库接入了大语言模型,那么直接问它,就能得到任何数据库能提供的内容,因为现在LLM已经会自己写代码做数据分析工作了。通过自然语言界面,我们可以最大程度发挥计算机和数据库的价值。

 

四、自然语言会不会取代图形界面?

自然语言界面这么强大,那它会不会取代图形界面呢?答案是不会,受限于AI能力发展现状和自然语言自身的局限性,自然语言界面有其适用范围

1、AI能力仍有限

理想情况是AI能完全理解我们的诉求、且能力能够覆盖,但现在还做不到。用户随便输入一个需求,产品很可能做不到,这就需要我们通过GUI进行提示和引导。

 

2、额外的处理时间

相比通过GUI直接对程序发出指令,用户输入自然语言LLM普遍需要几秒钟的处理时间,带来更高的试错成本,某些场景下我们使用GUI操作更加快捷。

 

3、自然语言表达不够精准

人与人的交流也常常存在歧义,更别说跟机器交流了,所以自然语言界面不适合做非常精细的操作。 

美间提案PPT

以美间提案PPT为例,如果我通过自然语言输入:“把标题改成红色”,那AI可能会反问:”哪个标题?哪种红色?“。试想一下,如果要通过自然语言描述这些信息,是不是还不如通过鼠标选择来的简单。

 

4、自然语言输入也存在成本

自然语言输入,用户需要把需求组织成语言,然后打字或讲出。也就是说用户需要动脑子,这显然与我们追求的”Dot let me think“原则相违背

美间海报

以美间海报场景为例,美间支持”AI生成“和”模板再创作“两种海报创作方式。这两种方式分别有各自的使用场景。如果用户需要一张元旦祝福海报,对于目标明确的用户,他可以通过详细描述画面需求,生成个性化的海报方案。例如:”生成一张元旦节日海报,主题为:群核科技祝您元旦快乐,画面要喜庆,插画风格,包含烟花、灯笼、热闹的人群等元素“

 

但对于更多用户来说,描述一个海报画面是困难的,大部分用户只需要一个通用的模板改改字就足够了,这样不但更轻松,而且得到的海报质量也更高。

 

五、NLI与GUI融合互补

所以,自然语言界面不会取代图形界面,它们更多会融合互补,在各自的擅长领域发光发热。

 

未来常见的用户工作流将会是:NLI发散-GUI收敛,先使用NLI得到一个大概结果,再通过GUI完成确认或调整。

美间AI海报

美间AI海报就是这样的设计思路:基于自然语言输入生成若干结果,选择一个满意的方案再二次编辑。

 

六、NLI还有哪些应用场景?

自然语言界面还有哪些应用场景?微软表示:万物皆可“Copilot”

Copilot是微软发布的依托于大语音模型的AI助手(AI Agent)。11月15日的微软Ignite大会上,CEO纳德拉向我们展示了Copilot最新的形态:一个入口连接无限可能

Copilot可以连接各种应用和数据源,用户只需要把需求告诉Copilot,Copilot就能自动完成全部应用和数据操作,甚至是跨应用和跨数据源的。

Copilot Studio

Copilot Studio是微软面向B端用户推出的AI助手,支持用户自定义专属的Copilot,以满足行业、部门、角色等内外部场景的定制化需求。让Copilot链接企业财务系统,你可以随时问它各类财务预算的开支和剩余情况;Copilot还能双向打通CRM、ERP等SAAS产品,自动化执行复杂的业务流程,比如办理新员工入职、费用报销等。

 

数据分析

Excel拥有强大的数据分析能力,但我们大部分人只用过Excel来制作表格,因为高阶的函数、宏等功能对于普通用户来说学习成本太高。现在,Copilot与Excel结合,便可以实现通过自然语言写代码执行复杂的数据分析工作。

 

AIGC

AIGC是当前最热门的AI应用领域之一,除了常见的文案生成、图片生成,传统的内容创作软件结合AIGC能力也可以发挥出巨大的潜力。Copilot加持下的PPT,只需一句话,Copilot将自动帮你完成PPT的文案、配图、排版等工作。

 

七、展望

未来自然语言界面将重塑现有产品的交互方式, 但自然语言也只是一种交互方式,未来随着AI能力和硬件技术的发展,人类与机器间的交互成本还将进一步降低。

微软在Ignite大会上演示了未来 AI+MR 设备的应用场景,借助MR设备AI可以看到、听到、解释、理解我们的意图和我们周围的世界,我们只需要极少的输入就能得到需要的结果。以现在AI技术的发展速度,相信这些看似科幻电影中的场景用不了多久便会成为现实。

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

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

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

 

ui表单验证问题

前端达人

首先展示正确的格式(以验证是否为空为例):

html代码块:

 
  1.  
    <el-form :model="nodeName(数组名)" ref="nodeName(数组名)">
  2.  
    <el-form-item prop="name(数组内的属性)" label="内容:" :rules="[{ required: true, message: '不能为空'}]">
  3.  
    <el-input type="name(数组内的属性)" v-model="nodeName.name(数组内的属性)"></el-input>
  4.  
    </el-form-item>
  5.  
    </el-form>
 

js代码块:

 
  1.  
    data(){
  2.  
    return{
  3.  
    // 表单
  4.  
    nodeName:{
  5.  
    name:''
  6.  
    }
  7.  
    }
  8.  
    },
 

前端展示(输入内容后显示为空消失):

 

 

下面开始总结常见的问题以及功能失效的原因.


1. input左侧出现星号,内容为空却不提醒

 

原因:已经写好了验证功能,但是没有绑定到input框 .

解决方法:是<el-form-item>标签加入prop="数组内要验证的属性"或者<el-input>标签中加入type="数组内要验证的属性".

2.input框里已经有内容,但还是显示不能为空

 

(一)原因:input有数据,但是表单没有验证到.

解决方法:给<el-form>绑定整个数组.v-model="newName".

(二)原因:表单验证绑定的不是数组,只是一个单纯的ojbect或者number或者char类型

 如此种情况,无论输入什么都会提示为空.

解决方法:将绑定验证内容变成数组【也可以把表单验证写在data里面】

 

 

[表单验证只能绑定数组,如果单纯绑定一个数值,会出现验证不到的现象发生]!!!!!!!!!

3.提交表单按钮无法验证以及符合验证的表单内容,也就是提交失败.

此情况一般报错为两个:

 

 Element-ui官方样式表单提交函数功能是这样展示的:

 
  1.  
    newNameBtn(newName) {
  2.  
    this.$refs[newName].validate((valid) => {
  3.  
    if (valid) {
  4.  
    alert('submit!');
  5.  
    } else {
  6.  
    console.log('error submit!!');
  7.  
    return false;
  8.  
    }
  9.  
    });
  10.  
    },
 

 我们可以看到方法是this.$refs[数组名].validate(() =>{})或者this.$refs.数组名.validate(() =>{})这样一个函数.

如果你用的html5或者是其他不显示参数的集成工具,代码是这样的:

 

 并不知道这个this.$refs有没有真正的请求到,如果你用的显示参数的集成工具(如phpstorm),如果你的代码正确,会这样显示:

 

 我们看到会多显示一个callback,这就说明this.$refs生效了.

所以不管你使用说明软件写的代码,如果出现表单验证提交错误.也就是现实开头那两个错误.你就先输入console.log(this.$ref.newName)[此处的newName是你自己绑定的数组]

看看输出是一个对象还是undefine.显示这个对象说明this.$refs.newName请求成功.

 

如果显示undefine,可以这样改正:

(一)你的代码格式书写错误,请比照上文有红箭头的图正确案例改正格式.

(二)你的<el-form>未绑定ref,请给<el-form>标签绑定ref="newName"[此处的newName是你自己绑定的数组]

 

出现表单验证错误先比对案例 ,然后再按照自己的具体代码绑定自己的数据.

[注:Element-ui的表单验证一定是绑定的数组类型]

 

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

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

 

 

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

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

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

 

js判断屏幕分辨率的代码

前端达人

一般我们可以通过下面的代码判断分辨率

复制代码 代码如下:
<script language="JavaScript">
<!-- Begin
function redirectPage() {
var wjb51=screen.width;
var hjb51=screen.height;
alert("经系统检测,你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by 脚本之家17jquery.com");
}
// End -->
</script>

js判断浏览器分辨率

复制代码 代码如下:
<script>
function ScreenWidth(){
if (screen.width == 1440){
alert("1440*900");
}else if (screen.width == 800){
alert("800*600");
}else if (screen.width == 1152){
alert("1152*864");
}else {
alert("do not know!");
}
}
</script>
<input type="button" name="" value="fenbianli " οnclick=" ScreenWidth()"/>
内容来自17jquery

说明:这段js代码可改造一下,改为screen.width>=1024 screen.width=800两种情况

所以我选择使用下面的代码:

复制代码 代码如下:
if(screen.width>=1440){
alert('宽屏幕可以加载广告了');
//一些广告代码
}

用JS判断不同分辨率调用不同的CSS样式文件

最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下,
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.οnlοad=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //获取屏幕的的宽度
{
sc.setAttribute("href","css/c2.css"); //设置css引入样式表的路径
d.innerHTML = "你的电脑屏幕宽度大于1024,我的宽度是 1200px, 背景色现在是红色。";
}
else{

sc.setAttribute("href","css/c1.css"); 17jquery.com
d.innerHTML = "你的电脑屏幕宽度小于或是等于1024,我的宽度是 960px, 背景色现在是蓝色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>

c1.css里面的内容

复制代码 代码如下:
*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}


c2.css里面的内容

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

 

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

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

 

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

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

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

 

小小的细节大大的体验

博博

小小的细节大大的体验

日历

链接

个人资料

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

存档