首页

UI设计 | 您的团队准备好进行人工智能增强设计了吗?

清阳

快速通道:人工智能已实现的成果

了解人工智能设计格局

将显示缩放图像
表 1:对比反映了 AI 设计工具平台整合的趋势。由于 Figma 的原生 AI 功能现在与第三方解决方案直接竞争,评估标准已不再局限于简单的功能比较,而是涵盖了架构兼容性和企业级就绪性。图片由Jim Gulsen提供

人工智能辅助设计工具:从早期测试到发现商业价值

当前的限制:仍然存在摩擦

重新思考人工智能在设计生命周期中的作用

从小处着手,低风险

补充:提示如何发挥作用(以及为什么它是一项技能)

清单:如何评估用于设计的人工智能工具

未来 6-24 个月我们可能会看到什么

多种集成方法正在涌现

这对规划意味着什么

总体情况

最后的想法:不要等待完美——现在就开始

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

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

清阳

 

项目背景

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

项目概述

产品定位

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

目标用户

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

设计风格

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

设计亮点

首页其他方案欣赏

 

「原创」ui设计 | 数据可视化意义

清阳

 

无论你是产品经理、设计师、数据分析师,还是企业管理者,现在都绕不开一个话题:数据可视化
它不仅是图表,更是认知效率、决策效率和沟通效率的三重提升器。
但问题是——
数据可视化的真正价值不是“图画得好看”,而是“让数据真正能被理解和使用”。
这篇文章,我想和你聊聊它的本质意义、使用场景和设计要点。

 一、数据可视化的核心意义:三大关键词

  1. 理解:从“信息”到“洞察”
大量原始数据往往是无序抽象的。比如一个 CSV 表格里的几百行用户行为数据,你很难从中直接看出模式或异常。
而通过可视化,比如热力图、分布图、关系图,你可以:
  • 快速看出用户在哪个页面停留时间最长
  • 找到销售额波动与节假日之间的关联
  • 识别出系统哪个模块的报错频率最高
 可视化把“信息”转成了“洞察”。

  1. 沟通:跨角色的信息桥梁
你有没有遇到这种情况:
  • 技术写了一堆接口日志,老板看不懂
  • 产品写了一堆用户行为描述,开发理解偏差
  • 数据分析做了几页表格,运营说“太复杂了”
这些问题的底层,是信息的语言不统一
图表,是各角色之间最通用的语言。一个好的仪表盘,让技术知道重点,业务知道异常,老板知道方向。
可视化是跨角色协作的**“公共语境”**。

  1. 决策:支持及时、量化的判断依据
没有数据支持的决策,基本靠感觉。而没有可视化支持的数据,大多沉睡在数据库里。
比如,你在做这些决策时:
  • 哪个页面需要重点优化?
  • 用户从哪一步骤流失最多?
  • 运营活动ROI值到底多少?
如果没有可视化,你就只能翻一堆表格和SQL。 有了可视化,一眼看懂趋势、结构和异常
 可视化提升了决策速度 + 准确性,对商业来说是直接价值。

 二、常见可视化类型与使用场景

可视化类型 常用图形 场景举例
趋势图 折线图、面积图 日活变化、收入走势
比较图 柱状图、条形图 不同渠道对比、用户量对比
结构图 饼图、树图、旭日图 用户构成、品类占比
分布图 散点图、箱型图 用户活跃度、价格分布
流程图 桑基图、漏斗图 用户转化路径、行为流
地图图 热力图、地理图层 城市分布、物流路径
 一个优秀的数据仪表盘,不是图表堆砌,而是围绕目标问题+场景任务进行设计组合。

 三、容易被忽略的设计误区

  1. 以“图形好看”为目标,而非问题导向
错误例子:“我们加个3D柱状图看起来高端一点。” 正确方式:先问清楚业务要判断什么问题,再选图形。
  1. 一页显示太多,信息密度超载
“十个图表一屏”,结果没人看得懂。可视化应该分层次、分焦点、按角色定制。
  1. 忽略数值细节(单位、时间维度)
图表不标注单位,不注明时间区间,很容易误导。

四、数据可视化的思维转变

旧思维 新思维
图表是“美化”工具 图表是“决策”工具
先画图再找指标 先定义问题再设计图
数据放可视化页面就好 数据要讲故事、有节奏、有引导
一页尽量放满图表 每张图要有目的,能引导结论

 五、推荐几个数据可视化入门资源

  • 《Information Dashboard Design》 — 可视化设计经典书籍
  •  《The Visual Display of Quantitative Information》 by Edward Tufte
  •  工具:Tableau、Power BI、DataV、Apache ECharts、D3.js、AntV G2

 写在最后:数据不是图,是故事的线索

好的数据可视化,不是炫技的图表拼图,也不是堆叠的信息墙,而是一个个有逻辑、有问题、有方向的洞察过程
它帮你看见问题,理解用户,发现机会。
所以真正重要的不是“怎么画图”,而是“你想看清什么”。

如果你也想从0入门数据可视化,或者在做仪表盘设计、业务数据图表决策时遇到困惑,欢迎在评论区交流想法。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
 

谷歌全新 Material Design 的“Expressive”设计

清阳

谷歌刚刚在上周的Android Show上发布了 Material Design 的一项最大更新,这让我这个 UX 设计师感到非常兴奋(同时也有点担心),因为它正在发生着变化和发展。

谷歌 Material Design“Expressive”设计预览

谷歌 (OOGLE) 最近对其现有的设计语言和系统进行了大规模升级,用于为全球数十亿用户构建应用和产品。此次更新包含许多有趣的新效果和风格,但最重要的是,它凸显了公司在用户体验方面的思维转变。

让我为您总结一切,并展示这将如何为空间带来新的设计趋势。

有趣的元素、按钮和控件

Material Design Expressive 中的趣味元素

如果你觉得之前的 Material Design 已经不遗余力地让元素看起来更有趣了,那么这次的更新绝对更上一层楼。从形状相互转换的创意加载器,到随处可见的滑动条,这次更新将为设计师提供丰富的选择和自由度,让他们尽情发挥创意。

不一致是关键?——这是我在 Android Show 上注意到的!作为设计师,我们通过网站和应用程序宣扬一致的设计,然而 Material Expressive 却打破了大量规则。

  • 标签现在会改变形状以突出显示并显示高亮状态。
  • 浮动菜单现在具有可变的宽度来容纳其内容,而不是一个一致的宽度。
  • 扩展的形状库可以为部分或按钮增添乐趣。
  • 在屏幕上的同一空间内使用可变的边框半径(半径的复数)来提供更高水平的视觉区分。
  • 标题中使用多种排版方式来增强视觉层次并注重“大胆”的设计。
  • 诸如此类的例子还有很多。

除了微小的元素之外,我们还可以在应用程序中的整个卡片和列表中看到这一点:

卡片和列表如何应对不一致

标题真正体现了风格并打破了界限

标题如何在不同的应用中扮演不同的“角色”

我们见过网站标题的奇特风格,设计师们也利用标题来契合主题,使其成为重要的图形元素。谷歌似乎也试图在其设计系统中做同样的事情。

一个很好的例子是他们如何巧妙地使用可变的字体高度和大小来创建这个简洁的闹钟应用程序。

资料来源:9to5Google

一些有趣的标题和文字非常有意义,尤其是在标题扮演特定角色的应用中。然而,一些大而粗的标题和元素的使用却很糟糕。以下是谷歌正在做的一个很好的例子显示为“不该做什么”:

我们还没有看到谷歌在动画标题和效果方面做出太多的贡献,所以我们只能拭目以待。

注重节省时间

从上面的对比中,您可以注意到 Gmail 移动应用的一些重大变化。电子邮件部分现在变成了素材卡片,并且操作菜单移到了键盘上方。除了位置的变化之外,加粗的发送按钮和扩展的菜单还允许用户快速操作并将元素添加到电子邮件中。研究表明,这可以将用户的浏览体验提升 4 倍。

不同元素使用不同的色调不仅让应用程序感觉更有趣,而且还为重要元素创建了良好的视觉层次和对比度。

在经过测试的 10 款应用中,M3 Expressive 设计使老年用户能够像年轻用户一样快速地发现屏幕上的关键交互元素。

根据谷歌研究团队的调查,无论年轻用户还是年长用户,都能更快地发现关键交互和行动号召 (CTA),并减少采取行动的时间。简而言之,用户和界面之间的摩擦将会减少。

动画和交互得到升级

谷歌将他们的新动画系统和指南称为“运动物理系统”,该系统致力于使微交互和过渡更加流畅、更具表现力。谷歌还致力于使动画更容易被用户理解。

一些主要区别如下:

  • 基于弹簧的动画本质上意味着动画结束时会有弹跳,以使其感觉更自然。
  • 您可以使用新的运动方案来定制您的设计。
  • 空间效果,其中元素将在屏幕上从一个位置移动到另一个位置。
  • 他们还采用了新的命名方案,以“expressive”作为动画名称的前缀。
  • 标准缓和动画已成为过去!

所有这些如何协同工作的一个很好的例子就是这个非常自然且富有表现力的动画:

新的 Android 通知动画

在上面的例子中,仔细观察关闭一条通知时,所有其他通知都会做出相应的反应。这感觉就像一本书被从书架上拉下来,旁边的书也会微微滑出。这比之前的 Android 更新更加自然,也更符合物理定律

您可以使用这些新动画及其动画指南和设置列表 - https://m3.material.io/styles/motion/overview/how-it-works

随处可见的形状和变形

谷歌确实非常依赖变形形状来展现设计元素的状态变化。无论是卡片的展开,还是计时器的移动,这些变形形状随处可见。

  • 药丸会增加边框半径,以从其他选项中脱颖而出。
  • 许多 SVG 图形会通过变化和变形来显示事物的增加或减少。这些图形可以是计时器、加载器和进度条。
  • 卡片变成圆形以显示选定状态并与其他卡片区分开来。
  • 当卡片在滑块或旋转木马中进入焦点时,它们会扩大。
  • 圆形装载机从无聊的旧圆形变为变形形状。

他们还推出了一个新的形状库供设计师使用和探索——https: //m3.material.io/styles/shape/overview-principles

这些形状不仅仅是工艺品。谷歌鼓励设计师将其用于个人资料图片以增加个性,将其添加到用户交互和元素中,以及使用 2.5D 形状来增加深度。

不过,谷歌也警告设计师要谨慎使用形状,以避免混乱和混淆。

我为什么担心?

  1. 过度游戏化:由于 Google 专注于有趣和明亮的元素,一些设计师可能会过度使用并破坏一些常见的 UX 原则,从而妨碍用户的体验。
  2. 主观设计:说到底,设计本身就是主观的。我在推特上看到过很多关于 Android 16 和 Material Expressive 的帖子,有些人觉得某些颜色和实现方式不太吸引人。
  3. 旧硬件的问题:流畅的动画效果很棒,但耗电耗电。由于不同设备之间缺乏一致性,Material Expressive 可能无法在所有设备上正常工作,并且可能不适用于此类网站。我可能完全错了,所以请在评论中指正。
  4. 开发人员会更加讨厌我们:我们经常会遇到动画或交互设计工作量大,开发团队或产品经理可能会缩短或忽略这些工作的情况。值得庆幸的是,大多数开发人员也都掌握了 Material Design 的精髓,所以说服他们并非难事。

你对 Material Expressive 有什么看法?请在评论区留言,我们可以好好讨论一下!另外,记得点个赞支持我哦 :)

 

 

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

设计师如何高效对接前端

涛涛

本文围绕 UI 设计如何实现与前端的无缝对接,确保设计图 100% 还原且减少修改展开,通过实战案例分享了关键方法与注意事项,强调沟通、技术理解及灵活协作的重要性。

UI设计潮流就是个轮回

涛涛

本文围绕 “潮流是个轮回” 的理念,探讨 UI 设计趋势的演变,指出了解历史流行趋势对创新和提升设计能力的重要性,并重点介绍了五种具有代表性的 UI 设计趋势及其特点、发展背景与应用场景。

UI 设计中的胶囊和弹窗设计

涛涛

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

UI设计中的动效12法则

涛涛

本文基于迪士尼动画师奥利・约翰斯顿与弗兰克・托马斯提出的 “动画十二基本法则”,探索其在 UI 动效设计中的指导作用,强调 UI 动效应结合场景、动态效果与节奏传递信息,通过十二法则提升动效的自然性、吸引力与功能性。

如何让UI新人快速提升能力

涛涛

UI 设计新人要实现快速自我提升,需遵循 “多看 + 多思考 + 多做 / 练 + 99% 的汗水” 的路径,同时保持对设计的热爱与积极心态,通过系统积累审美、分析能力、实践经验及技能储备,逐步成长为优秀设计师。

设计师如何利用AI?

涛涛

在 AI 高速发展的背景下,设计行业出现 “设计已死” 等焦虑情绪,但AI 主要取代重复机械的设计劳动,真正的设计师价值在于洞察用户、沟通需求、解决问题。阿里国际副总裁青云指出,设计师能力模型将重构,技法重要性下降,审美、洞察、工具整合能力成为关键,即 “木桶原理 2.0” 中 AI 拉高技法 “木板” 后,其他能力成瓶颈;同时,阿里通过 U-sight 等工具助力全球电商设计,而设计师需警惕让 AI 完全替代思考,应主动拥抱 AI 成为 “超级个体”,从 “六边形战士” 成长为 “百万雄师”。

日历

链接

个人资料

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

存档