首页

跨设备交互设计挑战——从桌面到移动端的体验差异

杰睿 系统UI设计文章及欣赏

在当今多设备环境下,用户在桌面电脑、平板和手机之间频繁切换,如何保证跨设备的一致性与高效体验,成为交互设计师必须面对的挑战。本文将从桌面到移动端的体验差异出发,分析设计难点,并提出可行策略,帮助设计师在多端产品中提供流畅的用户体验。

一、桌面端与移动端的核心差异

桌面端与移动端在硬件和使用场景上存在明显差异,这直接影响交互设计策略。

差异点 桌面端 移动端
屏幕尺寸 大屏,多窗口操作 小屏,单窗口操作
输入方式 键盘 + 鼠标 触摸手势,虚拟键盘
使用场景 相对静态,坐在办公桌前 高移动性,随时随地
信息密度 高,可同时显示大量信息 低,需要分步呈现
用户注意力 较集中 容易分散,中断频繁

这些差异意味着同一个功能在不同端呈现时,需要设计师考虑操作便捷性、信息层级和交互反馈。


二、跨设备交互设计面临的挑战

  1. 信息架构适配
    桌面端可以同时展示复杂的菜单、工具栏和数据表,而移动端屏幕有限,需要对信息进行优先级排序,避免过度压缩导致用户迷失。

  2. 操作方式差异
    桌面端依赖精确的鼠标点击和快捷键,而移动端主要是手指触控和手势操作。设计中必须考虑目标区域大小、滑动交互和误触率。

  3. 功能分布与流程优化
    某些功能在桌面端可以一次性完成,但在移动端可能需要分步操作。例如,批量处理、复杂表单填写等,需要拆分流程或提供辅助工具。

  4. 视觉一致性与品牌体验
    保持跨设备的视觉统一性,同时针对不同屏幕进行适当调整,是设计师的常见难题。图标、字体、色彩需要兼顾品牌识别和可读性。

  5. 性能与响应性
    移动端网络环境可能不稳定,页面加载、动画响应需要优化,否则会破坏整体体验。


三、解决策略与设计建议

  1. 优先级重排与模块化设计
    在移动端只保留核心操作和信息,将辅助功能隐藏在二级菜单或弹窗中。同时,模块化设计可以方便不同端的组件复用。

  2. 触控友好设计
    增加触控目标尺寸(推荐 44px × 44px 以上)、简化手势操作,提供清晰的视觉反馈和动画引导。

  3. 响应式布局与自适应组件
    利用响应式网格和自适应组件,确保内容在不同屏幕下都能清晰呈现。对于复杂功能,可采用折叠面板或分步流程。

  4. 跨端设计规范
    制定统一的设计规范,包括色彩、排版、图标风格和交互模式,确保用户在不同设备之间切换时感受一致。

  5. 性能优化与异步加载
    对移动端进行性能优化,使用懒加载、占位符、渐进式加载等技术手段,保证流畅体验。

跨设备交互设计的核心目标,是在不同硬件和使用场景下保证用户体验的一致性与高效性。桌面端与移动端存在的差异,需要设计师在信息架构、操作方式、流程优化、视觉规范和性能优化上做出针对性调整。通过模块化、响应式布局和统一设计规范,可以在保证品牌体验的同时,让用户在任何设备上都感到自然流畅。

跨设备设计不是简单的“搬运”,而是“优化再创造”。理解用户场景、洞察交互痛点,是设计师跨端设计成功的关键。

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

界面设计案例分享 | ComplyContro品牌&UI

杰睿 系统UI设计文章及欣赏

imgi_214_9f0c73226297935.683f29f07b819.png

imgi_775_146bae226297935.683f1fcc7bea5.png

imgi_784_ef7ed4226297935.683f29f07b253.png

imgi_789_2e8849226297935.683f1fcc7a7d5.png

imgi_794_02439d226297935.683f1fcc7a01b.png

imgi_801_e002ed226297935.683f29f0799dc.png

imgi_808_89d252226297935.683f28f9eb07f.png

imgi_817_b4ccb4226297935.683f289fc694a.png

imgi_821_90ae54226297935.6840132c29038.png

 

1. 项目背景 & 设计目标

  • 项目名称与内容:这是为 ComplyControl——一个专注金融领域的前沿 AI 合规模块(具备实时监控、智能检测与欺诈发现功能)的品牌形象与网站界面设计项目 Behance+1

  • 完成时间与平台:发布于 2025 年 6 月 4 日,整合品牌设计、网站 UI/UX 及用户界面,使用 Figma 与 Webflow 等工具进行创作与实现 Behance

2. 品牌视觉识别(Brand Identity)

  • 标志设计:图中展示了简洁现代的标志(logo),结构紧凑且具识别度,呈现强烈的科技感与专业感 。

  • 配色策略:项目运用了对比鲜明的暖色(如橙红)与冷色(蓝色),辅以深色底调,强化视觉冲击力,同时展现了兼具活力与稳重的品牌气质 。

  • 字体风格:在字体展示中可见清晰可读的无衬线体,搭配简洁的数字表现,进一步传达专业且现代的品牌语言 。

3. 界面设计(UI/UX & Website)

  • 移动界面布局:图中呈现了移动设备上的 UI 布局,包括导航菜单与交互按钮,采用扁平化设计,按钮与图标配色清晰,对焦用户操作体验 。

  • 数据可视化:图表或百分比数据显示以清晰简练的方式呈现关键指标(如 95%、40% 等),辅助用户快速理解核心内容 。

  • 整体风格语言:整体风格简洁、科技感强烈,布局逻辑清晰,强调功能与信息可视化,有助于金融产品的信息传递与可信感建立。

4. 工具与创作流程

  • 设计工具:项目中使用了 Figma 进行界面与原型设计,利用 Webflow 实现响应式网页开发与交互效果。同时还运用 After Effects、Photoshop 以丰富视觉表现与动画效果 。

  • 多方协同:项目由 Embacy Design 领衔,联合多位设计师及机构参与,展现了团队协作的深度与创意整合能力 。


总体评价与亮点

优点 描述
清晰品牌定位 通过色彩、字体与视觉元素的统一,传达了“科技 + 合规”的品牌主旨。
现代化视觉表现 配色对比强烈、界面干净、排版有序,符合金融科技产品的使用场景。
信息表达精准 数据视觉化突出、界面交互明确,提升用户理解与体验效率。
专业工具运用 Figma、Webflow、AE 等工具的融合使用提升了设计的实施效率与表现力。

 

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

系统设计 | 法国某大型零售银行基于人工智能的个人财务管理系统设计

杰睿 系统UI设计文章及欣赏

我的职业生涯

我从21世纪初开始从事数字用户体验设计,最初在工业领域获得奖学金,后来转向视觉艺术。这条非传统的道路源于这样一种信念:我希望对人类环境产生切实的影响,这需要我结合艺术和工业这两个通常被视为对立领域的技能和文化参考。自然而然地,从我最初的职业经历开始,数字领域对我来说就是一个充满希望的新领域,能够满足我的好奇心和对实验的渴望。

将显示缩放图像

此后,数字领域技术和使用方式的重大变革迫使我不断汲取新知识,以改进我的专业实践和定位,并理解新兴技术的潜力。例如,2002年互联网泡沫破灭后,在线商务蓬勃发展;2006年,社交网络兴起并扩张,媒体进入用户生成内容时代;以及2009年,移动数字设备使数字访问无处不在,改变了我们与世界和他人的关系。

二十五年的从业经验让我深刻理解设计实践如何因应科技的革新和设计师日益复杂的决策而发生转变。因此,我的实践从经验主义的创意方法,演变为以用户体验设计方法论为指导的战术性方法,进而发展为将生态系统维度融入设计的战略性方法。

多年来,通过设计进行研究一直是我职业方法的核心,这体现在我担任过法国国家铁路公司 (SNCF)、PSA/Stellantis 创新中心、AXA 等组织的职务,目前我在 BPCE 集团的数字部门担任数字设计总监。

这也体现在我不断涉足学术和研究领域。在交互式多媒体硕士课程中,我与一个学生团队设计了一个交互式设备,用于教授中学生图像分析;在法国国立高等装饰艺术学院的研究实验室里,我用了两年时间探索移动技术如何改变通信工具的使用方式,之后又为一个欧洲多模式移动出行项目做出了贡献;最后,我通过在设计学院的讲座介绍人工智能。

人工智能技术的加速发展及其被大众迅速接受,是近代科技史上最重大的变革之一。它标志着数字媒体发展的转折点,并预示着一场深刻的变革,将重新定义众多行业,并改变众多专业实践。人工智能改变了人与科技的互动模式,引发了伦理、经济和社会问题。这种转变要求设计师快速适应,并引发了他们对在机器能力增强的情况下应承担的责任和角色的思考。

因此,我决定在2024年启动一个博士项目,专注于设计基于人工智能的交互设备。该项目在获得公司同意并于2025年3月在CY Cergy Paris University的ETIS实验室确认我的论文注册后正式启动。

研究背景

风险

“人工智能”(AI)一词至今仍是一个备受争议的话题。然而,为了本文的目的,有必要对其进行定义。我们将采用公众、行业和官方机构最普遍接受的定义,即将人工智能描述为一种旨在执行通常由人类完成的智力任务的技术(英国政府,2021年)。

这个新词最初是由科学家在一个旨在研究机器模拟人类推理能力可能性的学术项目中构思和使用的(McCarthy 等人,1955)。这些能力涵盖了当前生成式人工智能系统的主要特征:语言操作、基于神经网络的架构,以及基于海量数据的自我提升或学习能力(机器学习、深度学习)。

与“机器智能”等其他术语相比,这个矛盾修辞法更受青睐,它通过强烈的智能内涵将机器和人类的世界结合在一起,有助于激发人们对这一新计算机技术领域的强大想象力(Gentes,2017)。

人工智能技术设备的普及化自然引发了人们对其使用方式及其社会影响的质疑。这些问题早在首批公共生成式人工智能服务发布之前就已存在(联合国教科文组织,2020),其重要性在2022年11月下旬发布的ChatGPT等服务中得到充分体现。OpenAI的对话界面以及随后推出的许多其他界面在短短两个月内就拥有了1亿用户,并被广泛采用,尤其是在年轻用户群体中。到2024年,尽管三分之一的法国人表示使用过人工智能,但69%的18-24岁人群和37%的12-17岁人群在其职业或教育生活中使用过人工智能(Arcep、Arcom、CGE、ANC,2025)。

人工智能的风险在文献中经常被讨论。其中包括加剧社会不平等、强化现有偏见以及对隐私和个人自由的不利影响。此外,人工智能的设计流程和实施缺乏透明度,个人难以理解和掌控这项新技术如何影响他们的生活。然而,一种融合技术专家、设计师、社会学家和法律专家的多学科方法,或许有助于开发更符合伦理、更具包容性且更尊重人权的人工智能(Crawford & Bury,2022)。

然而,人工智能的负面影响可以通过以用户为中心的设计方法和适当的中介机制来抵消,从而促进其应用。例如,它的益处可以体现在提升法国政府数字服务的包容性上。对于相当一部分甚至连日常行政任务都难以完成的公民来说,这些服务往往非常复杂(Villani 等人,2018)。

私营部门的许多其他服务也面临同样的困境,尤其是银行。银行的组织结构复杂、法律和安全限制以及某些技术基础设施的陈旧,可能导致部分客户被排除在外,尤其是那些缺乏数字素养或数字技能有限的客户(法国国家统计局,2023)。然而,这并没有减缓法国传统银行越来越多服务的非物质化进程。为了应对不断变化的客户使用习惯以及新冠疫情的影响,向数字渠道的转移甚至有所加速(法国公共关系委员会,2022)。

然而,如果过去十年中面临写作和数学困难的个人比例一直在下降(INSEE,2024)——作为数字渠道的替代品——法国银行仍然强烈建议金融机构实施旨在促进银行包容性的举措。

然而,这些举措可能会受到法国传统零售银行商业模式的阻碍。这些银行依赖密集的实体分支机构网络,并且倾向于青睐富裕客户,与这些客户建立密切关系能带来最大的利润。相反,利润较低的弱势群体则要支付高昂的费用,满足严格的资格标准,并且几乎无法获得针对其特定需求的定制服务,这进一步加剧了他们的边缘化。这一悖论是法国银行业的核心问题,尽管法国银行业拥有包容性的监管框架,但边缘家庭仍然持续被排除在金融之外(Pinos,2019)。

研究领域

这项研究是在数字部门进行的,该部门是 BPCE 集团数字和支付中心的一部分,我在那里担任设计总监,负责用户体验设计。

BPCE集团是法国第二大零售银行。其主要机构包括储蓄银行(Caisses d'Épargne)和大众银行(Banques Populaires)网络。截至2023年12月,该集团拥有3500万客户,其广泛的银行服务几乎涵盖了“自然人”个人银行客户的所有需求。

BPCE集团的数字部门负责设计和统筹开发面向集团旗下大部分机构(储蓄银行、大众银行等)个人和专业客户的银行应用程序。过去十年,该部门在数字化转型的背景下,在远程银行设备上开展的工作凸显了银行服务使用相关问题的复杂性。

在这些设备中,BPCE 集团多年来一直提供个人财务管理 (PFM) 服务,旨在简化客户的费用控制、预算制定和跟踪。

作为设计工作的一部分,我们对这些服务的用户进行了调查,结果表明个人理财领域的需求和使用方式存在很大差异。这种差异一方面与每位客户独特的财务状况有关,另一方面也与他们的个人特征有关,例如他们的金融教育水平、个人经历、偏好或在获取银行服务时可能遇到的困难。

有些客户采用非常结构化的预算管理方法,力求预测银行账户的资金流入和流出。另一些客户则积极主动,参与资产投资和优化。有些客户并不寻求财务状况的整合视角,而是频繁调整日常管理。许多客户必须定期做出艰难的权衡,优先考虑自身的基本需求;而另一些客户则相反,很少参与其中,试图将财务管理部分甚至全部委托给他人。

此外,除了这些个人限制或偏好之外,这些设备的用户还存在其他性质的需求。事实上,在法国,10% 的 18 至 64 岁成年人在阅读、写作和理解简单文本等基本读写能力方面存在困难。此外,12% 的成年人在计算方面面临挑战,这影响了他们解读数字数据的能力(法国国家统计局,2024 年)。

读写和算术能力对于理解和解读目前大多数公共财政管理系统 (PFM) 中存在的图表至关重要。因此,很大一部分法国民众可能无法使用目前设计的公共财政管理系统 (PFM) 工具。

事实上,银行提供的私人理财账户(PFM)的使用率仍然低得惊人。虽然三分之一的法国人知道这些账户的存在,但只有10%的人表示经常使用。这些设备的弃用率非常高,通常在首次使用后不到5天就发生了(Score Advisor,2020)。

假设和跨学科性

我们的假设是,人工智能代表着一个机会,让我们能够在研究项目框架内(Findeli,2004)从新视角来设计这些设备。该框架依赖于创建实物和演示器,旨在通过实证比较新型交互设备与现有解决方案的性能,来评估其满足银行用户个人财务管理需求的能力。

这一假设位于设计科学的交叉点,因为我们对与人工智能、信息和通信科学相结合的服务设计实践感兴趣,因为我们的目标是了解这些新界面产生和支持的社会、符号和技术中介的形式和含义,促进银行与其客户之间的互动。

将显示缩放图像

书目研究报告

银行技术的历史

我们阅读材料的主要方面在于金融机构物质文化的历史,以及技术如何改变——并持续改变——用户与其日常使用服务之间的关系。本论题的视角在于货币和金融物质文化的动态变迁。事实上,目前存在着一种日常交易手段系统性非物质化的趋势。然而,值得注意的是,从历史上看,这是一个相对较新的现象,是由技术进步、经济逻辑和政治选择共同促成的,例如欧洲央行创建数字欧元的项目,以及内政部长热拉尔德·达尔马南(Gérald Darmanin)于2025年5月22日在参议院委员会面前呼吁消除现金的使用以打击金融犯罪。

自会计发明以来,货币、资本和商业交易一直依赖于有形的物质基础。牲畜是古代物质财富的象征,其词源与拉丁语“pecus”相关,后者演变为形容词“pecuniary”。在古埃及或印度,贵金属被制成珠宝,并被视为货币。工业时代初期的银行建筑灵感源自古代作为价值储存地的寺庙。账簿、印章、汇票,以及后来的纸币(Hoggson,2007)。因此,向非物质流动的转变标志着与这种延续数千年的物质支撑传统的彻底决裂。

然而,银行一直是计算机技术开发和应用的先锋行业之一,尤其是在优化内部流程方面。自20世纪90年代以来,人们就开始尝试使用自然语言处理技术,并在与复杂软件系统交互的过程中发现了改进(Harris,1992)。然而,由于当时系统计算能力有限,自然语言在用户界面中鲜有应用,直到人工神经元和深度学习的概念再次出现,这在一定程度上得益于2012年ImageNet竞赛中图像识别技术的进步(Yann Le Cun,2019)。

基于语言模型的最新进展,尤其是Transformer算法架构(Vaswani等人,2017)的推动,银行业目前正在面向客户端的设备上开展新的实验。这些算法使得评估几年前大多数消费者服务设计师无法企及的交互系统成为可能,例如,能够生成个性化的财务管理建议(Schlosky等人,2024)。这些算法的实用性已得到验证。然而,基于本次实验中采用的几代模型,所提供的建议仍然相当通用,响应也仍然不完整。最重要的是,这些系统仍然难以根据用户的具体情况,在所提出的解决方案之间建立相应的层级结构。

设计研究与物质性

设计将被视作一种设计实践,它允许从材料中涌现出新的形式,并理解该领域以及用户所面临的问题(Gentès,2022)。在此,材料性是一个重要的方面,无论它是作为操作基础的原材料,最终转化为设计行为所产生的物品,还是以其最终形态成为一种文化实体。无论其性质如何,这都是正确的,因为任何人类创造的传播媒介,都会通过其创造者和接收者的介入,获得一种文化存在的形式(Jeanneret,2008)。

在本文中,我们旨在将人工智能视为一种媒介,一种旨在产生新的和理想体验的原材料(Simon,1988),而不是事后添加的简单技术模块。

作为自身转型的参与者,人工智能材料展现出我们需要进一步理解的技术符号学特性。因此,我们的研究将聚焦于其特定的能动性(Gentès,2022)。我们将探索依赖于代理(即具备一定行动能力的部分自主设备)的人工智能系统所产生的体验特征。

这种设计方法标志着用户与数字媒体之间关系的转变,直到最近,数字媒体才被视为人类转型程序和项目的执行者(Jeanneret,2011)。

借助人工智能,数字媒体可以积极充当个人与银行等机构之间的中介。它通过界面实现这一目标,这些界面不仅能够将用户的请求翻译成行政和技术语言,还能生成个性化响应并引导用户获得合适的服务(Villani 等人,2018)。因此,人工智能将不再仅仅传输或提供信息,而是会根据用户的个人资料和上下文,对信息进行转换,并优化其可理解性和相关性。这种从媒体到中介的转变预示着新的委托形式,人工智能将在翻译、支持和个性化方面发挥积极作用。

金融包容性领域的决策设计

对个人理财的研究需要打破刻板印象,尤其是那些围绕经济脆弱家庭的刻板印象。实施真正促进普惠金融的战略和系统,需要了解他们的日常生活,观察复杂的生活环境和轨迹,从而避免刻板印象。贫困往往伴随着信息获取渠道的匮乏和不准确的信念,这使得决策更具挑战性,因为容错空间很小(Banerjee & Duflo,2014)。

信息不完整、认知局限以及反复使用可能引入系统性错误的判断启发式方法,也会导致决策出现偏差。在此,“自由主义家长制”可以为产品和服务的设计者提供理由,引导个人做出有利于自身的选择,而无需诉诸强制手段或剥夺自由(Thaler & Sunstein,2003)。

然而,合法性问题以及影响个人用户选择的风险在今天变得更加重要,因为像 ChatGPT 这样的大型语言模型 (LLM) 拥有超越人类的论证能力。当它们能够获取关于人类对话者的社会人口统计数据(即使有限),例如年龄、性别或教育水平时,情况尤其如此 (Salvi 等人,2025)。

HMI 和 AI:挑战

自 ChatGPT 和众多利用 LLM 技术的服务公开发布以来,许多基于自然语言的交互设备已成为学术界和/或工业界研究的课题。保险公司 Alan 就是一个很好的例子,它评估了一款专门用于健康相关咨询的对话代理。在预约就诊日益困难的背景下,这款人工智能代理部分取代了人类顾问来解答投保人的问题。对比测试表明,用户更喜欢与机器互动,因为与专家相比,机器的响应被认为更清晰,而且几乎是即时的。这种前所未有的响应速度改变了交流的动态。对话变得更加流畅,鼓励患者提出更多问题并获得更多信息(Lizée 等人,2024)。这种体验挑战了“患者偏好人际互动”的假设,因为在某些情况下,与人工智能的互动可以促进传统方式可能无法实现的参与度。

人工智能也给其设计者带来了挑战。人工智能的本质与人类对它的本能感知之间存在着不对称性。从最初的基于语言的计算机界面实验开始,我们就观察到人类用户倾向于假设算法生成的响应中存在思考和意图,即使这些算法是基于相对简单的符号逻辑基础进行操作,而无需理解上下文或内容。这种效应至今仍被称为“伊丽莎效应”,以麻省理工学院约瑟夫·魏森鲍姆于20世纪60年代末开发的计算机程序命名,该程序可以根据预编程脚本模拟自然语言对话。

这种认知也可能出现在设计师与其材料的互动中,尤其是在涉及人工智能代理时。虽然计算机在符号计算和语言生成方面能够达到甚至超越人类的能力,但它们在某些看似微不足道的任务上仍然不够熟练。这对于基于人工智能的交互系统的用户和设计师来说尤其违反直觉(Moravec,2009)。

这种不对称会模糊设计师对人工智能能力和局限性的认知。他们很难把握人工智能系统的潜力,因为他们通常缺乏这方面的专业训练,而且直到最近才开始缺乏与人工智能交互原型的工具。这导致他们与开发人工智能的工程师之间存在差距(Dove 等人,2017)。

因此,作者呼吁更好地将设计师融入项目,以便他们能够参与指导项目并定义用户需求,然后与专业数据科学家合作开发、训练或增强他们所依赖的人工智能模型。这些对产品验证的贡献可以使设计师成为算法客观性能与其主观效用值之间一致性的保证者。了解机器学习逻辑和工具是设计师确保设计能够凭借适应人工智能时代的方法论继续成为创新驱动力的先决条件 (Colombo & Costa, 2021)。

目标

在本论文中,我们旨在探讨四个研究问题,这些问题将引导我们研究用户(特别是最脆弱的用户)与银行之间的关系、这些组织部署的策略及其实施的影响、人工智能在设计项目中的贡献,以及变革性技术的出现导致的设计实践的转变。

将显示缩放图像

这些问题显然位于服务设计(Buchanan,2015)、系统设计(Buchanan,2019)以及计算技术融入创新和创造过程所引起的转变(Gero,2000)研究的融合点。

⒈ 第一个问题

财务脆弱人群或缺乏数字素养的人士如何使用现有的零售银行服务?目前限制他们自主性的障碍有哪些?如何通过建模他们的需求来促进金融包容性的系统设计?

⒉第二个问题

零售银行为客户提供哪些机制来促进日常资金管理?这些机制的目标客户是谁?有些银行是否希望促进普惠金融?这些机制的设计是否有指导原则,例如可解释的人工智能?这些机制在多大程度上满足了用户的需求,或者未能完全或部分满足用户的需求?

⒊ 第三个问题

人工智能系统如何增强银行客户(尤其是最弱势群体)的信任、理解和明智的财务决策?哪些设计原则和可解释性形式可以帮助解决基于人工智能代理(这些代理能够影响用户的关键决策)设计服务时固有的主要矛盾?又该如何衡量其影响?

⒋第四题

哪些工具、方法、原则、模型和用户界面组件可以在整个设计周期中支持基于人工智能的银行服务的设计,以确保以人为本的体验符合道德和监管要求,以及它们如何改变此类组织内的数字服务设计实践?

 

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

UI 弹窗设计总结篇

涛涛 系统UI设计文章及欣赏

弹窗在 APP 中无处不在,这段时间刚好在整理弹窗组件相关内容,所以想和大家分享一下弹窗的设计思路。

UI 设计死抠的细节

涛涛 系统UI设计文章及欣赏

作为一名专业的 UI 设计师,难免会有一点强迫症,时常因无法平均的像素而苦恼,恨不得所有的元素都达到完美统一。

桌面端界面设计 | 设计仪表盘时应避免的 6 个 UX 设计错误

杰睿 系统UI设计文章及欣赏

来源网址 — https://dribbble.com/shots/24659454-Customer-Journey-CRM-Dashboard

仪表板在企业应用程序中扮演着至关重要的角色,它为用户提供重要数据的结构化视图。然而,设计不佳的仪表板可能会导致混乱、效率低下和用户失望。精心设计的仪表板不应仅仅显示数据,而应提供有意义的信息,帮助用户快速做出决策。

为了确保有效的仪表板体验,请避免这六个常见的 UX 设计错误。

1.导航结构不佳

导航是任何仪表板的支柱。许多设计师犯了一个错误,将所有导航选项塞进一个菜单中,导致用户难以找到必要的功能。

最佳实践:

  • 使用顶部的全局导航来执行配置文件、设置和注销等关键操作。
  • 仪表板特定的导航放在左侧以组织视图、数据类型和工具。
  • 利用面包屑为用户提供深入浏览内容的清晰路径。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24191273-Sales-Analytics-Dashboard

2. 忽视用户的心智模型

用户在与仪表板交互时,期望其结构合乎逻辑且熟悉。如果菜单类别和标签不符合他们的预期,仪表板就会变得缺乏直观性。

最佳实践:

  • 进行用户研究以了解用户期望如何查找信息。
  • 使用卡片分类等技术根据用户行为来组织菜单项。
  • 确保命名约定和菜单结构符合用户的期望。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24481340-Syncrowave-CRM-Dashboard

3. 使用错误的数据可视化

选择错误的图表类型会使数据更难解读。有些可视化更适合比较,而有些则更适合趋势图或单个数据点。

最佳实践:

  • 在选择可视化之前,了解数据背后的信息。
  • 使用条形图为了进行比较,折线图了解趋势,以及饼图比例。
  • 保持可视化简单,避免不必要的复杂性,避免让用户感到困惑。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24061999--Exploration-Finance-Data-Charts

4.依赖静态内容

仪表盘应该提供实时、可操作的洞察。如果内容每天都一样,用户就没有理由重新访问仪表盘。

最佳实践:

  • 关注根据实时数据定期更新的动态内容。
  • 突出显示需要用户注意的关键更新,例如警报或性能变化。
  • 使用交互式小部件,让用户深入了解特定数据。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/24571531-DisputeFox-Credit-Score-Dashboard

5.过多的空白和填充

许多设计师将网页设计原则应用于仪表盘,导致过多的空白,迫使用户进行不必要的滚动。对于仪表盘而言,效率才是关键。

最佳实践:

  • 保持设计紧凑,同时保持可读性。
  • 确保只需最少的滚动即可访问重要数据。
  • 使排序、搜索和过滤等全局交互易于访问。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/22543517-Crypto-Web-Dashboard

6. 没有针对不同的用户角色进行设计

企业仪表板服务于具有不同需求的多种用户类型。千篇一律的通用仪表板通常会导致效率低下。

最佳实践:

  • 识别不同的用户角色及其特定需求。
  • 提供基于角色的视图,以根据工作职能定制信息。
  • 进行用户测试以验证每个角色是否可以轻松访问相关数据。

例子:

将显示缩放图像
来源网址 — https://dribbble.com/shots/25007872-SportX-UI-Kit-Charts-Sources

现实世界中精心设计的仪表盘示例

以下是一些遵循良好用户体验原则的实时仪表板示例:

  1. Google Analytics——提供清晰的数据可视化和可自定义的视图。
  2. Salesforce 仪表板——为销售和营销团队提供基于角色的数据。
  3. Tableau 仪表板— 支持使用动态内容进行交互式数据探索。

精心设计的仪表板不仅仅是数据的展示,它更是一个帮助用户高效做出明智决策的工具。通过避免这些常见的用户体验错误,您可以创建一个既用户友好又功能齐全的仪表板。优先考虑导航,满足用户期望,选择合适的可视化效果,并专注于基于角色的动态内容,以确保无缝的体验。

桌面端界面设计 |审美积累|AI 电商 SaaS 后台界面

杰睿 系统UI设计文章及欣赏

 

推荐人群:
正在做电商后台/智能推荐界面设计的交互设计师
研究 AI 场景下 UI 信息组织逻辑的产品设计师
想提升 B 端项目视觉控制力的视觉设计师
 
在信息密集的 B 端 SaaS 产品中,如何用清晰、节制而具有未来感的设计,提升用户的效率和信任感?Stockify 的界面是一个值得研究的参考。一款聚焦 AI 推荐和智能库存管理的电商 SaaS 工具。这类产品的设计挑战在于 —— 如何让用户信任 AI 决策,并在复杂的信息中快速做出行动。它不是做“好看”的界面,而是通过界面传达控制感与专业感

imgi_262_f71c09228398707.685257a603072.jpg

imgi_790_d6c39d228398707.685257a603800.jpg

imgi_792_a468d2228398707.685257a5f3341.jpg

imgi_809_2bc8c1228398707.685257a606132.jpg

imgi_812_19cbcf228398707.685257a604ce5.jpg

 

imgi_824_f953b1228398707.685257a60171f.jpg


UI 风格关键词

冷静克制的配色:以白+浅灰为底,辅以低饱和绿色作高亮,既保留科技感,也不过度强调“智能”噱头。
数据可视化有“叙事性”:不是堆图表,而是用卡片、图表、按钮组合讲一个“运营逻辑”的故事。
干净的留白与栅格:高度模块化布局,让信息有序展开,适合处理高频交互与海量数据。
可解释的 AI 推荐:每个 AI 操作都有 hover 提示或“查看依据”,提升透明度与用户信任。

值得借鉴的细节

仪表盘设计 首屏不是炫技的数据,而是四个“关键运营指标卡片”,强调日常可操作性。颜色仅用于警示和趋势,不做装饰。
卡片式推荐模块 推荐商品按“推荐逻辑”分组,卡片下方标注 AI 原因(如:热销趋势、库存过剩),兼顾用户理解和操作动机。
侧边栏导航 折叠/展开状态下都能维持清晰的视觉锚点,图标+文字结构统一,适合中长时间使用场景。
动效克制合理 hover、切换、加载等动画几乎不抢戏,节奏稳定、响应明确,能很好融入专业环境中。

设计思路总结

Stockify 的这套 UI 并不追求酷炫视觉,它更强调的是:如何通过克制美学+可解释系统,把复杂的电商决策过程变得“有章可循”。这对 AI 相关后台设计是个非常关键的提示。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

北京ui设计服务【原创】人工智能大模型管理平台UI设计案例分享

杰睿 系统UI设计文章及欣赏

 

项目背景

在当下数字化浪潮中,各类大模型如语言、图像生成模型不断涌现,企业与机构对其应用需求激增。然而,模型开发流程繁琐、部署成本高昂,不同模型间数据交互与共享困难重重。同时,模型性能优化、安全管理等问题亟待解决。在此背景下,大模型管理平台应运而生,它旨在整合资源,简化模型开发与部署流程,提升模型性能与安全性,为各行业高效利用大模型提供有力支持,助力人工智能技术深度融入业务。
该系统的原首页中信息量比较少,在设计时除了对页面美观的优化,从内容、布局、用户使用场景、使用习惯、交互方式等方 面也进行考虑,增加了一些统计的图表, 「历史访问信息」采用卡片式列表,突出模块和内容。同时增加「个人上传记录」信息和「历史访问信息」可以进行 切换查看。

项目概述

产品定位

大模型管理平台定位为人工智能领域的核心枢纽。它是模型全生命周期的智慧管家,从研发时整合数据与算法资源,到部署时适配多元硬件环境,再到运营中实时监测性能,全方位守护。同时,它也是跨行业的赋能引擎,为金融、医疗、制造等行业提供定制化模型服务,加速业务智能化转型。

目标用户

大模型管理平台的目标用户广泛且多元。科技企业研发团队、金融机构从业者、医疗行业的研究人员和临床医生、教育领域的课程开发者与教育科技企业。此外,政府部门进行城市规划、交通管理等决策时,也能从平台获取支持。这些用户都期望通过大模型管理平台,挖掘数据价值,实现业务的智能化升级 。

设计风格

系统首页重构信息组织架构,丰富信息 和数据,同时页面采用精美的图标和小 插图提高页面的精细美观度。 设计风格采用简约的设计语言,清晰、 简洁和直观的表达方式,模块化布局, 强调的是界面强调可复用性和通用性, 配色采用经典蓝色,蓝色具有很好的兼 容性,可以与多种颜色搭配使用,形成 和谐的视觉效果。
 
 

设计亮点

首页其他方案欣赏

 

如何做好 UI 设计

涛涛

本文围绕 “如何做好 UI 设计” 展开,分享了一系列相关要点

日历

链接

个人资料

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

存档