在数字化时代,大屏设备无处不在,从企业数据监控中心到城市运营指挥大厅,从商场的广告展示屏到智能家居中的大型显示终端。大屏 UI 设计凭借其独特的视觉与交互特性,正引领着信息展示与用户体验的变革。
红色系:点燃激情的视觉冲击
红色系可视化数据大屏 UI 设计,鲜艳夺目,充满活力。红色在色彩心理学中象征着激情、活力与警示,在大屏上运用红色,能瞬间吸引用户的目光,激发他们内心的热情。例如在一些电商促销活动的大屏展示中,红色的价格标签、倒计时数字以及闪烁的促销按钮,能极大地刺激消费者的购买欲望。在股票交易大厅的大屏上,红色用于显示股价上涨的股票数据,让交易员一眼便能捕捉到关键信息,这种色彩运用不仅美观,更能有效传递信息,影响用户决策。
科幻酷炫风:开启未来之旅
科幻酷炫风格的大屏 UI 设计,将人们对未来科技的想象融入其中。借助光影效果、动态图形和具有科技感的图标,营造出充满未来感的界面氛围。这种风格常见于科技企业的展厅、智能设备的操作界面以及科幻主题的娱乐场所。如某科技公司展示其最新研发成果的大屏,通过 3D 建模呈现出的虚拟场景,搭配流动的光线和半透明的面板,展示各种产品数据与技术原理,让参观者仿佛置身于未来世界,深刻感受到科技的魅力与企业的创新实力。
大屏 UI 设计特点深度剖析
综合信息呈现:一屏览尽全局
大屏 UI 设计的一大关键优势在于能够提供综合概览界面。以数字智慧能源光伏储能电站电网驾驶舱数据可视化大屏为例,它整合了微网系统中的水电站、光伏系统、储能系统、风力发电系统和负荷系统等多个能源系统的数据。同时,实时展示发电量、用电量、充放电量等关键数据,以及设备状态和环境参数。通过这种全面的信息呈现,管理者可以在一个界面上获取系统的整体运行状态,快速做出决策,提高管理效率。这种综合信息呈现方式,避免了用户在多个界面之间切换查找信息的繁琐过程,大大提升了信息获取的便捷性与决策的及时性。
视觉创新运用:在大屏上做艺术
大屏广阔的空间为设计师提供了丰富的创作空间。在色彩选择上,设计师可以运用对比强烈的色彩组合来突出关键信息,如在蓝色调为主的工业生产监控大屏上,用橙色突出显示设备故障点,使操作人员能够迅速发现问题。形状的运用也十分关键,通过不同形状的图表、卡片来区分不同类型的信息,如圆形图表用于展示比例数据,柱状图用于对比数据大小,合理的形状布局能引导用户的视线,使信息传递更加直观高效。此外,纹理和动画的巧妙搭配,能为界面增添层次感和动态感。比如在地图类大屏中,通过添加带有纹理的底图和动态的交通流量动画,让用户更清晰地了解交通状况,提升视觉体验。
细腻触感反馈:操作有回应
触感反馈在大屏 UI 设计中不可或缺。通过振动、声音和触觉图标等方式,为用户提供操作反馈。当用户点击大屏上的按钮时,轻微的振动反馈能让用户确认操作已被系统接收,增强操作的真实感。声音反馈同样重要,例如在数据提交成功时播放轻快的提示音,而在出现错误时播放警示音,这种多感官的反馈方式,让用户在操作过程中更加自信和流畅,提升了交互的自然性与愉悦感,减少了用户因操作无反馈而产生的困惑与焦虑。
多样交互方式:打破传统束缚
大屏 UI 设计鼓励多样化的交互方式。除了常见的触摸操作,手势控制、语音命令、视线追踪等新型交互方式逐渐普及。在一些会议展示大屏中,演讲者可以通过简单的手势,如挥手翻页、握拳放大图片,更加自然地与大屏进行交互,摆脱传统遥控器或鼠标的束缚,增强展示效果与互动性。语音命令则为用户提供了更加便捷的操作方式,在智能车载大屏中,用户通过语音指令即可完成导航设置、音乐播放等操作,双手无需离开方向盘,提高了驾驶安全性。视线追踪技术通过捕捉用户的视线焦点,自动调整界面内容,如在医疗影像诊断大屏中,医生的视线聚焦在某一区域时,系统自动放大该区域影像并显示详细信息,提升信息获取效率。
定制化趋势:满足个性需求
随着用户需求的日益个性化,大屏 UI 设计呈现出定制化趋势。设计师为用户提供一系列工具和选项,允许他们根据自身喜好和需求定制界面与功能。在企业数据监控大屏中,不同部门的员工可以根据自己关注的数据指标,自定义图表类型、数据显示方式以及界面布局。例如销售部门更关注销售业绩数据,可将销售图表设置为醒目的柱状图,并置于界面中心位置;而技术部门则可将设备运行状态数据以动态列表形式展示在界面一侧。这种个性化定制不仅满足了用户的独特需求,还提高了用户对系统的使用效率与满意度,使大屏 UI 设计更加贴合用户实际工作与生活场景。
艺术技术融合:创造无限可能
大屏 UI 设计是艺术与技术的完美融合。设计师需要掌握先进的设计工具与技术,如三维建模软件、数据可视化库、交互编程框架等,同时具备深厚的艺术修养与创新思维。艺术灵感激发技术创新,例如通过艺术化的设计理念,促使开发者研发出更加逼真的 3D 渲染技术,用于打造具有立体感和真实感的界面元素。而技术的应用又为艺术表达提供了无限可能,借助 WebGL 等技术,设计师能够在网页端实现复杂的动画效果和交互体验,为用户带来沉浸式的视觉享受。在城市规划展示大屏中,通过三维建模技术创建逼真的城市模型,结合动画与交互技术,用户可以自由穿梭于虚拟城市中,查看不同区域的规划细节,这种艺术与技术的融合,使大屏 UI 设计更加精彩丰富,为用户带来前所未有的体验。
常用设计工具大盘点
泛普软件:功能强大的协作利器
泛普软件在大数据可视化大屏 UI 设计领域表现卓越。其功能全面,无论是复杂的数据图表设计,如多层嵌套的树形图、带有时间序列的动态折线图,还是个性化的界面布局,如不规则的卡片式布局、具有视差效果的页面设计,都能轻松实现。在操作效率方面,它能快速处理海量数据,即使面对数十万条数据的实时监控大屏需求,也能保持流畅运行,高效分析数据并展示结果。在团队协作方面,泛普软件支持数据共享与权限控制,团队成员可以在一个平台上协同工作,根据各自权限查看、编辑数据与设计内容,极大地提高了项目推进效率,保障项目顺利开展,适用于大型企业项目、政府智慧城市建设等对功能与协作要求较高的场景。
Echarts:百度旗下的可视化专家
依托百度的技术实力,Echarts 成为广受欢迎的大数据可视化大屏 UI 设计系统。它拥有丰富多样的可视化类型,涵盖柱状图、折线图、饼图、散点图、地图、雷达图等超过 40 种图表类型,满足各种数据展示场景需求。例如在电商销售数据大屏中,使用柱状图对比不同商品的销量,用折线图展示销售额随时间的变化趋势;在物流运输监控大屏中,通过地图展示货物运输轨迹。Echarts 还支持高度自定义数据图表,设计师可以灵活调整图表的颜色、样式、动画效果等,使其与项目整体风格完美契合。同时,它能够与多业务系统数据无缝对接,方便企业整合不同来源的数据,进行综合分析与展示,广泛应用于互联网企业的数据统计分析、金融机构的交易数据展示等场景。
HighCharts:成熟易用的图表库
HighCharts 以低门槛、高兼容性和庞大的用户基础闻名。其使用门槛低,对于没有深厚编程基础的设计师来说,通过简单学习就能快速上手创建基本的数据图表。它的兼容性极佳,能在多种浏览器和设备上稳定运行,无论是 PC 端的 Chrome、Firefox,还是移动端的 Safari、微信内置浏览器,都能完美适配。HighCharts 拥有广泛的用户社区,用户在使用过程中遇到问题,可以在社区中搜索解决方案,参考其他用户的案例,获取灵感。然而,它也存在一些局限性,样式相对传统,在追求新颖独特视觉效果的项目中可能稍显不足,图表扩展性有限,对于一些复杂的数据可视化需求实现起来较为困难。并且商业使用需要购买版权,这在一定程度上增加了企业成本,比较适合小型企业、个人项目或对图表样式要求不高的快速原型开发场景。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在数字化转型的时代浪潮中,B 端产品广泛应用于企业资源规划(ERP)、客户关系管理(CRM)、办公自动化(OA)等诸多领域,已然成为企业高效运作的关键支撑。而 B 端界面设计作为用户与产品交互的桥梁,其重要性不言而喻。它不仅承担着提升用户体验的重任,更是助力企业实现业务目标、提高工作效率的核心要素。
B 端产品的用户并非单一类型,而是涵盖了企业内部从高层管理者到基层员工的多个角色,不同角色在企业组织架构中所处位置不同,其使用产品的目的、需求和操作习惯也存在显著差异。例如,企业的决策层通常更关注宏观的数据统计与分析,以便做出战略决策,他们希望在界面上能够快速获取关键业务指标(KPI)的汇总信息,如销售额、利润、市场占有率等;而一线员工则侧重于完成具体的业务操作,如订单处理、客户信息录入等,他们需要界面操作流程简洁、高效,能够快速完成任务。以一款企业级项目管理软件为例,项目经理需要通过界面把控项目进度、分配资源、跟踪任务执行情况;项目成员则主要在界面上接收任务、更新任务状态、提交工作成果。这种用户群体的复杂性,要求 B 端界面设计必须具备高度的灵活性和适应性,能够满足不同角色的多样化需求。
业务逻辑的深度与广度
B 端产品紧密围绕企业复杂的业务流程构建,其背后蕴含的业务逻辑深度和广度远超 C 端产品。从企业的供应链管理,包括采购、库存、物流等环节,到生产制造过程中的计划排程、质量控制,再到销售与营销领域的客户获取、销售漏斗管理等,每一个业务模块都涉及众多的流程和规则。例如,在一家制造型企业的 ERP 系统中,生产订单的创建需要关联原材料库存、生产设备的可用性、工人排班等多个因素,任何一个环节出现问题都可能影响订单的执行。B 端界面设计需要将这些复杂的业务逻辑以直观、易懂的方式呈现给用户,帮助用户理解和操作。这就要求设计师深入了解企业业务,将业务流程转化为合理的界面布局和交互流程,确保用户在使用产品时能够准确、高效地完成工作任务,提升企业整体运营效率。
对高效性与准确性的极致追求
在企业的工作场景中,时间就是成本,B 端产品的用户期望通过界面操作快速、准确地完成工作,避免因界面设计不合理导致的操作失误和时间浪费。例如,在财务报销系统中,财务人员需要快速录入大量的报销数据,并确保数据的准确性,否则可能引发财务风险。因此,B 端界面设计在信息架构上应清晰明了,让用户能够迅速找到所需功能入口;操作流程应简洁流畅,减少不必要的操作步骤;同时,提供有效的错误提示和数据校验机制,帮助用户及时发现和纠正错误。例如,采用自动填充、下拉选择等方式减少用户手动输入,降低出错概率;对于必填项和关键数据,在用户提交时进行实时校验,并以醒目的方式提示错误信息。通过这些设计手段,最大限度地提高用户操作的效率和准确性,满足企业对高效运营的需求。
B 端界面设计的关键策略
以业务为导向的信息架构设计
信息架构是 B 端界面设计的基础,合理的信息架构能够使复杂的业务信息有序呈现,方便用户快速定位和使用功能。在设计信息架构时,首先要深入调研企业的业务流程和用户需求,将业务功能进行合理分类和组织。例如,对于一款电商企业的后台管理系统,可以将功能模块划分为商品管理、订单管理、客户管理、营销管理等核心板块,每个板块再进一步细分下级功能。在界面布局上,采用清晰的导航栏和侧边栏,明确展示各功能模块的层级关系,使用户能够一目了然地了解系统的功能结构。同时,运用搜索功能和快捷入口,方便用户快速找到常用功能和特定信息。例如,在订单管理模块中,用户可以通过订单编号、客户名称、下单时间等关键词进行搜索,快速定位到所需订单;对于高频操作的功能,如订单审核、发货等,设置快捷按钮,提高操作效率。
简洁直观的交互设计
简洁直观的交互设计是提升 B 端用户体验的关键。在交互设计过程中,应遵循用户的操作习惯,尽量减少操作步骤和流程的复杂性。例如,在数据录入界面,采用表格形式展示数据,方便用户批量录入和编辑;对于复杂的业务操作,提供分步引导和操作提示,帮助用户顺利完成任务。同时,注重交互的一致性,包括按钮样式、操作手势、反馈机制等方面。例如,在整个系统中,统一使用蓝色作为主要操作按钮的颜色,点击按钮时都采用短暂的动画效果作为反馈,让用户在使用过程中形成稳定的操作预期,降低学习成本。此外,充分利用快捷键和批量操作功能,满足高级用户对高效操作的需求。例如,在文件管理界面,用户可以通过快捷键 Ctrl+A 全选文件,Ctrl+C 复制文件,Ctrl+V 粘贴文件;对于多个文件的相同操作,如批量删除、批量重命名等,提供便捷的批量操作选项,提高工作效率。
数据可视化设计提升决策效率
在 B 端产品中,数据是企业决策的重要依据,数据可视化设计能够将海量、复杂的数据以直观、易懂的图表形式呈现给用户,帮助用户快速理解数据背后的信息,提升决策效率。根据数据的特点和分析目的,选择合适的图表类型,如柱状图用于对比数据大小,折线图用于展示数据趋势,饼图用于显示数据占比等。例如,在企业销售数据分析界面,使用柱状图对比不同地区、不同产品线的销售额,让销售经理能够直观地看出销售业绩的差异;用折线图展示销售额随时间的变化趋势,帮助管理层预测未来销售走势。同时,注重图表的简洁性和可读性,避免过多的数据标签和装饰元素干扰用户视线。在图表中添加必要的注释和说明,帮助用户理解数据含义。此外,提供数据下钻功能,让用户能够从宏观数据深入到具体的明细数据进行分析。例如,在销售数据分析界面,用户点击某个地区的柱状图,可以进一步查看该地区各销售门店的销售数据,为决策提供更详细的依据。
B 端界面设计的未来趋势
智能化交互融入工作流程
随着人工智能技术的不断发展,智能化交互将逐渐融入 B 端界面设计,为用户带来更加智能、便捷的使用体验。智能语音助手将成为 B 端产品的重要交互方式之一,用户通过语音指令即可完成复杂的操作,如查询数据、创建任务、生成报告等。例如,在企业客服系统中,客服人员可以通过语音与智能助手交互,快速查询客户信息、解答客户问题,提高服务效率。智能推荐系统也将在 B 端产品中得到广泛应用,根据用户的历史操作记录、业务数据和行为模式,为用户提供个性化的功能推荐和操作建议。例如,在项目管理软件中,系统根据项目经理的项目类型和过往经验,推荐合适的项目模板、团队成员和工具资源,帮助项目经理更好地规划和执行项目。此外,自动化流程将进一步简化用户操作,系统能够根据预设的规则自动完成一些重复性、规律性的任务,如数据备份、报表生成、任务提醒等,让用户将更多精力投入到创造性的工作中。
跨平台与多设备兼容性优化
在移动办公日益普及的今天,企业员工需要在不同的设备和平台上随时随地访问和使用 B 端产品,因此跨平台与多设备兼容性优化成为 B 端界面设计的重要趋势。未来的 B 端界面设计需要确保在 PC 端、移动端(包括手机和平板)、智能大屏等多种设备上都能呈现出良好的视觉效果和交互体验。采用响应式设计技术,使界面能够根据设备屏幕尺寸自动调整布局和元素大小,确保内容的可读性和操作的便捷性。
例如,在手机端,界面采用简洁的单栏布局,突出核心功能和信息,方便用户单手操作;在平板端,采用分栏布局,展示更多的信息和功能模块,提高操作效率。同时,优化不同平台上的交互方式,使其符合该平台的用户习惯。
例如,在移动端,充分利用触摸手势操作,如滑动、缩放、长按等,提供更加自然、流畅的交互体验;在智能大屏上,支持手势控制、语音控制等多种交互方式,满足多人协作和远程操作的需求。此外,确保 B 端产品在不同操作系统(如 Windows、MacOS、iOS、Android 等)上的兼容性,为用户提供一致的使用体验。
强化安全与隐私保护设计
随着数据安全和隐私保护问题日益受到关注,B 端界面设计在未来将更加注重强化安全与隐私保护措施。在界面设计中,明确展示数据的使用和存储方式,让用户清楚了解自己的数据流向和被如何使用。
例如,在系统设置中,提供详细的数据隐私政策说明,告知用户数据的收集范围、用途、共享对象等信息;在数据传输过程中,采用加密技术,确保数据的安全性。同时,加强用户身份认证和权限管理功能,通过多种认证方式(如密码、指纹识别、面部识别、动态验证码等)提高用户账号的安全性,防止账号被盗用。根据用户角色和工作需求,精确设置不同的操作权限,确保用户只能访问和操作其权限范围内的数据和功能。例如,在企业财务系统中,财务经理拥有查看和审批所有财务数据的权限,而普通财务人员只能查看和编辑自己负责的部分数据。此外,在界面上设置安全提醒和预警功能,及时告知用户可能存在的安全风险,如账号异地登录提醒、数据泄露风险预警等,帮助用户保护个人信息和企业数据安全。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
前面的文章我们分享了交互设计思维,这篇文章,我们来看看用户目标与交互目标。交互设计的核心,就是帮用户拆解这些目标并找到最优路径,让他们觉得“这事儿没那么难”。
编辑导语:很多产品在使用时,都会有“用户反馈”这一个设置,用户可以将自己的操作体验反馈给商家,但你真的了解“用户操作反馈”是怎样的一个机制吗?这篇文章详细讲解了“操作反馈”这一设置,一起来读一读吧。

前几天使用自己产品的时候,点击作业列表想要查看作业详情,点击之后没有反应,然后又连续点击了好几下,过了几秒钟,界面开始连续跳转。后来才知道,因为用户量比较大,产品稍微会有一些卡顿,导致用户点击后,产品没有实时的反馈给用户,使得用户也变得不知所措。
那为什么会出现这种情况呢?主要原因就是没有用户操作反馈。一个好的产品需要根据用户不同的行为操作,实时给出反馈,告知用户当前状态或建议,消除用户因为不确定性带来的不安感和焦躁感。
可以将用户整个操作流程简化为:用户输入—平台反馈—结果反馈。可以看出反馈其实分为两种:过程反馈(平台反馈)和结果反馈。

可以看到无论Google公司推出的Material Design,还是苹果公司的iOS设计规范,都对用户过程反馈做了细致的设计规范。
国内也有很多体验很好的APP对于用户反馈方面也做的不错,例如QQ、飞书。

当然也有很多的产品并没有做很细致的反馈设计,操作反馈作为交互设计中一个很细小的部分不会影响用户正常使用产品,但是会提升用户使用产品的体验。好的用户体验在B端对于用户来说不仅降低了学习成本,也提升了工作效率。那么如何来设计操作反馈呢?
当用户触发界面时,也就是人机交互时,界面给出的变化,这是过程反馈。
当触发结果页面不能及时告知用户时,例如点击操作区域需要跳转新页面,或者需要展示弹窗等这一类都需要经过一段时间才可以让用户看到结果的场景,需要考虑给触发反馈。
那什么时候不需要给触发反馈呢?例如点击收藏,收藏的icon会变成填充样式,用户可以实时的感受到触发结果,即不需要再给用户触发反馈。
过程反馈的方式主要分为三种。
(1)视觉反馈
用户操作界面之后,界面通过视觉的变化对用户进行反馈,比如:颜色、形状、动画等。
对于iOS系统,以及一些体验较好的应用程序分析得出主要使用场景包含:列表、宫格、操作Icon、按钮(控件)。
场景是根据样式的不同进行分类的。
a. 列表
样式:当用户点击时给列表一个灰度的背景色,让用户知道自己已经点击了触发区域。也告知用户在当前背景色块上,点击任何地方都是可以触发的。

b. 宫格
样式:当用户点击时给宫格一个灰度的遮罩,或者是一个灰度的背景色。

c. 操作Icon
样式:当用户点击时,Icon降低透明度。

d. 控件
只根据控件样式来进行举例说明,例如actionsheet,在样式上可以根据列表样式做统一规范。
Button样式:当用户点击时,按钮变色,如果是次级描边按钮,也可以增加填充的色块。

e. 步进器
样式:给点击区域一个背景色。
f. 键盘
样式:在点击时,会给一个填充的背景色、或者进行反色处理。

(2)触觉反馈
(3) 听觉反馈
用户操作界面后,界面通过声音对用户进行反馈。
iOS设置手机铃声时,选择不同的铃声时,会自动播放铃声。
过程反馈设计规范可根据产品界面的不同元素制定反馈样式。这本身是一件比较细致的工作,可能花费较大的工作量,所以在实际工作中也可根据产品功能的优先级,安排迭代顺序。

当系统对用户的操作,或因用户的行为导致的变化结果,给出的反馈就是结果反馈。
由于结果反馈的文章讲解特别多,这里就不再过多赘述,简单的总结一些常用的结果反馈方式。
结果反馈方式可分为4种样式:
弹窗分为模态弹窗和非模态弹窗。
模态弹窗会打断用户当前操作流程,也是一种强提示,用户必须和弹窗进行交互,才能进行之后的操作。
非模态弹窗一般出现2-3秒之后,自动消失,不会对用户造成干扰,属于轻量级提示。
例如当新建表单时,点击提交按钮,toast提示提交成功,这就是使用了非模态弹窗对用户的操作进行了轻量级反馈。
若删除文件时,一般会弹出一个对话框,让用户再次确认删除后的一些影响,是否删除?这就是使用了模态弹窗对用户的操作进行的强反馈。

一般用做表单的校验,让用户知道自己所填写项的状态,例如输入内容是否合理,该如何填写等提示。

页面反馈,相较于弹窗会更重一些。一般也用于比较重要的操作流程的结果页面,例如淘宝买完东西的结果页面、饿了么下单完成后的结果页面。

动画的合理使用不仅可以告知当前状态,还会将用户带入当前场景,吸引用户注意力。例如,微博的点赞,会出现一个点赞的动画,让点赞变得更加有趣。
微信图书,点击进入书本详情时会出现一个打开书本的动画,让用户带入实际看书场景,增强沉浸感。

音效的反馈也比较常见,例如ios下载时,会有叮咚一声,声音的反馈不仅提升了用户体验,对于加强品牌认知也很有帮助。
以上是我对于操作反馈的一些整理和复盘,其中也借鉴了一些大神的佳作,不到之处,希望和大家一起探讨交流。
在实际项目的运用中,也会根据实际的研发情况,逐步的去调整,不断地完善产品细节。
本文由 @小太阳不爱吃辣椒 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
编辑导语:自适应设计指能使界面自适应显示在不同大小终端设备上的设计方式及技术。而内容自适应则需要对用户行为进行预判进而改变设计内容,本文作者将对自适应设计在内容上的应用进行分享,值得阅读学习。

我们一般说的自适应设计,多半指的是界面自适应,即为不同的终端设计不同的界面布局与操作流程。而内容自适应,是一种根据用户标签与操作行为预判用户目标所需页面内容的方式,他的优点是既能预测交互意图,实现信息量的智能输出,同时也能满足不同交互需求,改变界面样式,达到降低人机交互负荷的目的。
以下,是道乐UED团队 基于查阅的资料以及行业的积累,带来的一篇关于内容自适应的分享。
目录:
目前自适应界面在内容上的呈现大致包括两种类型:
顾名思义,就是根据用户当下的操作,实时判断用户所需,从而调整不同的信息展示与布局,他的优势在于能尽量减少页面上与用户目标不相关信息的展示,从而提升用户操作的效率与准确度
通过用户标签与过往数据的分析,调整页面内容的展示数量与优先级,仅展示用户感兴趣或可能感兴趣的内容,从而提高用户在使用产品中的转化率。
总的来说,内容自适应更趋向于对用户行为轨迹的纵向思考,将“用户寻找信息”的被动服务模式转化为“信息寻找用户”主动服务模式。满足差异化的用户需求,提升企业系统的用户体验和人性化服务水平。
(1)搜索
① Google搜索
自适应设计在搜索上的应用意味着针对每个用户的每一次搜索,都会产生一个定制的界面,该界面将自身塑造成所显示的信息。请看以下示例:如何根据不同的用例更改搜索结果页面。
最近,Google搜索的设计重点是在用户点击搜索结果之前传递信息。为此,Google采用了一种称为自适应设计的方法。

Google搜索适应用户需求的第一种方法是重新安排导航以适应结果。
Google有362,880种独特的方式来排列导航,以适应搜索查询。然而,自适应设计的最大例子是搜索结果本身的布局。结果页面是完全模块化的:根据搜索结果,不同的元素出现在不同的配置中。

例如,音乐家Lizzo的搜索结果集中在媒体上:一组模块以本机格式显示视频,图片和歌曲。还显示最近的新闻,推文和即将举行的活动,以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的个人资料链接。直到页面底部,我们才能看到看起来像传统搜索结果的元素。

另一方面,以色列特拉维夫市的搜索结果为旅行者提供优先信息。图片、地图、当地天气以及与旅行有关的问题(“特拉维夫对游客安全吗?”、“特拉维夫以什么闻名?”)优先于传统搜索结果。模块促进了特拉维夫的活动以及对附近其他城市的推荐。搜索结果页上可能会出现数千个不同的模块,从简单的布局驱动模块到完全独立的应用程序。

例如,“aapl”的搜索结果页上,股票代码模块显示了当前价格和交互式历史价格图。
通过自适应设计,所有有关内容、格式和顺序的决策都是由算法决定的。设计人员的作用不再是创建明确的外部布局。
如今,尖端产品的设计者,以及未来日常产品的设计者,正在就生成这些布局的规则做出决策。
② 淘宝搜索
淘宝搜索结果页,当用户往下滑动查看更多时,系统判断你根据当前搜索页没有找到想要的内容,则根据不同物品展示物品的更细分的筛选,如啤酒会c展示“德国进口啤、国产精酿、比利时精酿”,方便用户找到目标物品。

③ OTA平台PC端(去哪儿、携程等)
携程/去哪儿pc端中,Tab前置条件是国内/国际,在选择国内机票时,默认单程。在选择“国际/港澳台机票”时,则默认机票往返。

这样的功能设置是基于对用户需求的深入研究得出的,主要有以下几个原因:
基于以上充分的原因,这个自适应功能设计就得以开发并成功提高用户的使用效率。
(2)根据用户静态标签优化结果
静态标签:用户主动提供的数据, 指用户不变的基础信息,多为用户固定数据,如姓名、性别、年龄、身高、体重、职业、地区、设备信息、来源渠道等。
定位地区:大众点评——切换城市

大众点评的这个功能经常被拿出来说,当你到另一个城市,通过获取定位申请,判断你是来这座城市旅游的场景,从而页面展示中入口就改成了跟旅游相关,这其实也有点内容自适应的意思,通过用户不同的操作展示不同的内容。
历史自适应主要集中在特定领域的个性化界面定制和推荐等方面。针对不同用户呈现不同界面,根据用户的类型、任务特点、喜好等提供不同的界面样式。
(1)根据用户动态/预测标签算法推荐定制内容
预测标签:平台介入的数据,指根据用户在平台内的行为数据对用户未来行为或喜好进行预测;是设计千人千面和运营策略的关键;比如某电商平台,根据用户A“月均消费5单,且有数额过万的运动商品”的购物数据,平台会给用户A打“高频、品质敏感性、运动”的标签,后期会更多推荐高品质运动商品及相关运动品牌活动的精准推送。
用户标签是构成用户画像的核心因素,是将用户在平台内所产生的行为数据,分析提炼后生成具有差异性特征的形容词。即用户通过平台,在什么时间什么场景下做了什么行为,平台将用户所有行为数据提炼出来形成支撑业务实现的可视化信息。
① 用户生产内容(UGC)
互联网上的许多站点开始广泛使用用户生成内容的方式提供服务,许多图片、视频、博客、播客、论坛、评论、社交、Wiki、问答、新闻、研究类的网站都使用了这种方式。

② 电商平台
这种平台一般会随着用户的使用,网站会积累及不断修正及展示最贴近用户喜好的产品,从而进行推荐。功能上适应了用户的喜好,会大大增加用户的粘性。

③ APP Store 应用页面大变动:不同用户可看到不同功能与内容
自定义产品页功能让开发者可以面向不同用户展示 App 的不同功能,产品页优化功能则让开发者们能够测试不同的截屏、预览视频,甚至 App 图标。
苹果指出,得益于 App Store Connect 详实且注重隐私的分析,开发者可以了解自己用户的偏好,从而决定产品页的展示内容。

④ SoulAPP创始人:Sou了APP功能符合不同场景的用户需求

SoulAPP多种匹配机制,功能符合不同场景的客户需求。Soul利用AI大数据,依照性格、兴趣等因素,划分用户。通过这种精准的方式分类用户,以便用户之间能够更高效地建立连接。第一次注册SoulAPP,用户需要通过系统的一些答题测试,以便于生成符合自己的性格报告。接着就是通过上述数据采集,划分专属圈子,这里就是大家经常说的“星球“,这些都是基于SoulAPP的AI功能。
自适应界面同样有一些“小缺点”,违背了一些众所周知的可用性原则:
内容自适应的核心在于,基于用户过往的操作以及行为路径的分析,提前预判用户下一步需要的内容,从而让用户能更便捷的使用产品。但是在金融产品的设计中比较特殊,往往用户在使用产品的一个核心需求是安全感,产品安全、资产安全、操作安全等都是用户着重关注的点,所以如果一味的进行内容自适应设计,会让用户产生“信息泄露”的担忧,从而失去对该产品的信任。
基于以上内容自适应的分析以及金融产品设计的特殊性,我们来看看有哪些可以运用到金融产品的设计中来。
(1)金融应用的[截图]功能
截图功能可以根据用户场景与用户目标两个维度进行分析。截图操作的发生几乎会发生在用户使用金融应用的各个场景,比如浏览金融产品、查看产品详情、查看持仓资产、收益等等,而不同的场景用户的目标也有所不同,我们可以根据用户不同的操作目标,为用户提供自适应的内容来方便用户的操作。

截图常见的用户目标大致分为两类:报错与分享。我们可以为这两个用户目标做一些内容上设计。
报错一般会关联产品的在线客服功能,那么我们在用户截图操作发生后,提供在线客服的入口,同时分析报错自身的用户行为,如可能是针对页面的哪个点或者哪个区域报错,那我们可以针对这一点再提供编辑截图的功能等等。
如此根据用户目标拆解用户行为,设计对应的功能来满足用户操作,从而减少用户的操作路径。
分享可根据用户场景设计不同的内容,如:
(2)金融应用的[内容管理]功能
买衣服的时候,绝大多数人在意的是是否合身,对于数字产品,同样是如此。在一个金融应用的内容管理功能当中,会推送大量的内容给用户,绝大多数的用户几乎没有时间来掌控所有的信息,导致部分对用户有用的信息被忽略,这样意味着内容的可定制化是极其重要的。
内容的可定制化体现在不同用户的分层上,基于分层,我们可以为相同类型用户推送内容。如持有私募基金的用户,我们可能会更多为其推送关于此类产品的信息以及高端用户的优惠、活动、资产报告等信息。
(3) 金融应用的[搜索]功能
金融产品的搜索,除了具备一般应用该有的内容,如最近搜索、热门搜索、搜索排行榜等,也需要基于产品特性来思考还有哪些可以展示的内容。
根据用户行为与数据分析,一般搜索的关键词为基金名称或者基金代码,而搜索的目的是查看该产品的信息以及收益情况,那么基于此类目的,我们可以当用户输入基金名称后,展示该基金最近的净值走势等内容,这样用户就可以提前了解部分基金信息,可以提前做一个判断,需不需要进入搜索结果页进一步的了解。

除了提前展示该基金部分产品信息以外,我们也可以展示相类似基金,防止用户因提前获知产品部分信息而带来的流失率,当用户不满意该只基金的近期表现,我们可以为其提供表现良好的基金供其选择,从而提高产品的转化率。
通过对自适应设计在内容上的应用探究,我们对内容自适应的设计手法及应用场景有了初步的理解,也会继续的探究并运用到实际的工作中来,希望这些思考能为大家带来一些帮助。
作者:道乐UED全体成员
原文链接:https://www.ui.cn/detail/610302.html
本文由 @道乐科技设计中心 授权发布于人人都是产品经理。未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com