首页

【兰亭妙微图标设计】为什么视觉大小和实际大小不相同?如何做到视觉统一?

杰睿


26082bb9-3b33-4e00-b4c1-4c60727d6087.png
在 UI 设计和图标开发中,我们常常遇到一个让人困惑的问题:
明明两个图标尺寸一样,为什么看起来一个大一个小?
这就是「视觉大小」和「实际大小」不一致所引发的经典设计挑战。
 这篇文章将带你了解其中的原理,并分享一些实操方法,帮你设计出视觉协调、统一专业的图标。

---
一、为什么视觉大小 ≠ 实际大小?
在设计中,「实际大小」是指图标在画布上的像素尺寸,而「视觉大小」是指人眼感知到的图形体积或重量感。这两者之所以不一致,主要有以下几个原因:
1. 图形形状对视觉感知的影响
不同形状对人眼的“占据感”不同:
- 圆形、椭圆形:边界柔和,看起来比实际尺寸小;
- 尖角图形:具有延伸感,看起来更“张扬”;
- 封闭 vs. 开放图形:封闭图形更“紧凑”,视觉重心靠内;开放图形更“轻”,容易被忽视。
举例说明:一个 24x24 的正方形图标和一个 24x24 的圆形图标放在一起,圆形常常显得更小。
2. 视觉重心偏移
图标的视觉重心不是几何中心:
- 有些图标上方留白较多,若严格居中,整体会显得“偏下”;
- 有些图标线条向一侧偏移,也会影响视觉稳定性。
3. 颜色、线条粗细的错觉
- 颜色明亮的图标通常看起来更大;
- 线条较细的图标会显得“轻”或“空”;
- 相同尺寸下,深色图标比浅色图标更具“存在感”。

---
二、如何实现图标的视觉统一?
4. 关注“视觉等值”而非“尺寸一致”
优秀的图标设计不会追求数值上完全一致,而是让图标“看起来”一样大。这就需要设计师具备一定的视觉判断力和对比经验。
5. 使用统一的对齐原则
- 每个图标放在相同的画布尺寸(如 24×24、48×48)中;
- 保证主图形部分在视觉上居中,而非仅仅坐标居中;
- 调整视觉重心,让图标看起来平衡、不倾斜。
6. 使用光学微调
所谓「光学对齐」,就是打破机械对齐规则,让视觉更舒服:
暂时无法在飞书文档外展示此内容
7. 放在真实场景中预览
设计图标时,建议不要孤立操作,而是:
- 放入实际使用场景(如按钮、导航栏);
- 对比多个图标在一组中是否协调;
- 测试在不同设备分辨率下的适配情况。

---
三、图标设计实操建议
以下是一些日常图标设计中实用的技巧和判断标准:
暂时无法在飞书文档外展示此内容

视觉大小与实际大小的偏差,是每一位图标设计师都会经历的学习过程。
 真正优秀的设计不是追求数值一致,而是注重 用户感受的和谐统一。
图标设计的细节感,往往藏在你“感觉不舒服但又说不出哪里不对”的那一刻。
理解视觉感知,训练视觉判断力,才是做出专业、协调图标系统的关键。

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

超越旅程地图:AI UX 中的控制设计

杰睿

UX AI 设计工具包图示
罗布·查佩尔(Rob Chappell)插画

多年来,用户体验团队一直依赖用户旅程地图(一种标准的设计思维工具)来可视化和传达用户的意图、行为和流程。我们绘制了用户在各个界面步骤中的目标和情感,追踪了从发现到转化或任务完成的路径。这些地图假设用户旅程的进展基本呈线性:一系列可见的屏幕、结构化的任务以及用户做出的深思熟虑的选择。

但在人工智能驱动的系统中,这些假设开始瓦解。步骤变得不可见。目标在过程中不断演变。系统不再等待命令——它会推断、提出建议,甚至采取行动。随着人工智能承担起更多责任,我们熟悉的用户流程架构开始瓦解。我们曾经称之为“旅程”的东西开始变得更像一场对话,或者更准确地说,一场谈判。

传统的旅程地图假设流程固定——逐步完成的任务、静态屏幕和清晰的用户意图。但在由人工智能驱动的体验中,例如 ChatGPT、Google Gemini 或 GitHub Copilot:座席会主动完成任务(有时是隐形的),并且控制权会来回传递。考虑以下人工智能操作:

  • 写作助手会在您输入时完成您的句子。
  • 设计工具根据定义不明确的指令应用更改。
  • 浏览器助手可以总结网页、建议下一步行动并跨域采取行动。

在每种情况下,系统都会参与意义建构和决策。这些体验构成了一个相互影响的循环。针对这种新现实进行设计需要新的框架——用户体验模型,它超越了用户逐步完成任务的模式,而是考虑了人机之间动态的、共享的控制。

随着人工智能系统功能日益强大,我们作为体验设计师的工作也发生了变化。这不仅仅关乎流程、组件或优化。这意味着我们需要根据控制感知用户体验的原则进行设计:

  1. 意图框架:如何建议行动?帮助用户设定模糊的目标。
  2. 清晰地预览AI计划: AI正在做什么?为什么?在行动之前展示系统将做什么
  3. 可操控性:我可以改变路径吗?让用户在任务中调整AI行为。
  4. 可逆性:我可以撤销刚刚发生的事情吗?提供清晰的撤销和覆盖选项。
  5. 透明度和一致性:这个系统会尊重我的时间、我的目标和我的监督吗?分享系统推理。

这关乎塑造人与自主运作系统之间的关系。这种关系只有在清晰易懂、可操控且以人为本的基础上才能有效运作。

管理控制平衡

自主性滑块的图示
Andrej Karpathy 的“自主滑块”概念——Rob Chappell 的插图

在 Y Combinator 的 AI 创业学校的演讲软件正在(再次)改变中,特斯拉前 AI 主管、应用 AI 领域最具影响力的人物之一 Andrej Karpathy 将软件设计的这种转变描述为从确定性、代码驱动系统向新范式的过渡:界面是自然语言,程序就是提示本身。

正如 Karpathy 所说,“你的提示现在是编写 LLM 的程序。”但与命令或表单输入不同,提示会启动一个概率性的解释过程,其中模型推断意图和上下文,而不是执行固定的操作。

Andrej Karpathy 主题演讲截图
Andrej Karpathy 在旧金山 AI 创业学校发表主题演讲 — youtu.be/LCEmiRjPEtQ

Karpathy 提出了“自主性滑块”的概念——一种交互范围,从完全用户控制到完全 AI 自主。它并非简单的开关,而是一个动态、流畅的尺度,会在整个会话过程中不断变化。有时由用户主导,有时由 AI 模型提出建议或采取行动。通常情况下,它们会反复切换角色。这是一种时时刻刻的控制权权衡。

Karpathy 阐述了人类与人工智能之间互动的两种基本模式:

1. 人机交互(指令模式)

  • 人类给出详细、明确的命令
  • AI 模型根据这些指令执行
  • 思考:快速工程、表单填写、手动配置
  • 用户体验重点:输入清晰度和脚手架、结构化指导

2. 模型即驾驶员(自动驾驶模式)

  • 人类给出了一个高层次的目标
  • 该模型计划、决定、迭代和选择
  • 思考:“写一份简介草稿”、“为我开发一个应用程序”、“我还缺少什么?”
  • 用户体验重点:可解释性、监督和覆盖控制、信任信号

这两种模式存在于动态张力之中,而非二元对立。用户和AI代理流畅地来回切换控制权。Karpathy的框架向我们展示了真正的用户体验挑战并非对话与界面的对立,而是为共同代理而设计。

你肯定不想只用文本与操作系统(LLM)对话。文本阅读、解读和理解起来非常困难……图形用户界面 (GUI) 可以帮助人类审核这些易出错的系统的工作,并提高运行速度。—— Andrej Karpathy,软件正在(再次)改变

看完 Karpathy 的演讲后,我一直在思考“自主滑块”——用户选择将多少控制权交给 AI 的想法。但这并不总是指完全自主,比如 AI 编写代码和提交拉取请求。有时,它涉及一些更微妙的事情:你给系统多大的空间来解读你的意图。

我从Adobe Firefly测试版就开始用了,主要用来构思视觉概念和探索风格方向。Firefly 的滑块控件并非虚构的,而是内置在界面中的。

Adobe Firefly 视觉强度滑块运行截图
Adobe Firefly 实际操作示例——用户调整模型的创意控制,调整视觉强度水平

Firefly 为我提供了调节控制的工具,而不仅仅是提交输入。提示字段并非整个界面,它只是更大控制界面的一部分。它周围有一些滑块——例如“视觉强度”“风格强度”——它们充当实时刻度盘,用于控制我赋予模型的自主权。当我降低强度时,我在发出信号:紧跟提示,保持文字表达。当我提高强度时,我在邀请读者进行解读,让模型自由发挥创意。

实际上,我选择赋予AI多少自主权。这关乎塑造作者身份的平衡。系统成为了合作者,而滑块则成为一种看得见摸得着的管理合作关系的方式。

用户体验也在再次发生变化

交互的未来不仅仅是引导用户顺利地从A点到达B点,更是设计人与模型之间的关系。这种转变需要一种全新的用户体验思维,将人机交互状态视为核心设计维度,而非边缘情况。这种变化已引起广泛关注。业内的用户体验领导者正在提出以人为本的全新方法,利用智能系统进行设计,并围绕智能系统进行设计。

在 UX Matters 的文章超越炒作:以人为本的 AI 走向现实中,设计加速器 Punchcut 的联合创始人 Ken Olewiler 对当前的 AI 格局提出了尖锐的批评,警告称不应在缺乏实际用户价值的情况下仓促采用生成式 AI。尽管许多组织正在进行试验,但他指出,很少有组织能够从概念验证阶段迈向可衡量的投资回报率——他将这一差距归因于炒作驱动的决策和缺乏以人为本的框架。

避免试图在客户生命周期的每个阶段都全面集成人工智能自动化。要更有选择性,在人工智能能够带来最大价值的地方进行集成。提供能够实现协作式用户控制的人工智能功能,为用户保留有意义的自主权。——Punchcut 联合创始人 Ken Olewiler

Olewiler 呼吁重新思考自主性。尽管人工智能领域的主流叙事倾向于推崇完全自动化,但他团队的用户研究发现,用户更喜欢共享控制。他建议创建自主性地图,以可视化的方式展现人机交互在整个体验中的转换点——类似于服务蓝图等系统设计工具,但更侧重于控制。这些地图可以帮助团队在设计时实现协同自主,而不是交接或黑箱自动化。

BCG 的 Matt Scharpnick 的文章“生成式人工智能的用户体验设计:平衡用户控制和自动化”呼应了 Olewiler 强调的平衡用户代理和人工智能自动化,强调了用户体验需要在灵感和精确之间找到平衡。

用模型引导用户得出精确结果可能会令人沮丧。我们仍处于 GenAI 的早期阶段,还有很大的创新空间——尤其是在设计允许用户精准输入偏好的界面方面。—— BCG 副总监 Matt Scharpnick

Scharpnick 认为,生成式用户体验的未来在于设计出一种界面,让用户能够精准地“操控”他们想要的价值和控制,同时又不扼杀生成式模型的创造潜力。这与 Olewiler 对自主地图和共享能动性的呼吁相呼应,凸显了用户体验的更广泛转变:我们必须设计出既能激发惊喜,又能支持专业级精准度的系统。

绘制控制流:我们可以从 OESD 中学到什么

操作员事件序列图 (OESD)是一种形式化模型,用于直观地展现控制权在人类操作员和自动化系统之间随时间推移的切换。OESD 是在航空航天、自动驾驶汽车和工业机器人等安全关键领域开发的,它可以帮助工程师定义每个操作的负责人、触发控制权交接的因素以及系统在出现问题时如何响应。

这些图表通常包含两条或多条“泳道”——一条供人使用,一条供机器使用——并绘制出一系列动作、决策和交接点。它们不仅旨在捕捉行为,还旨在在复杂、高风险的环境中强制执行明确的责任制和可恢复性。

OESD示例:

在自动驾驶汽车的远程操作中,研究人员使用 OESD 来模拟远程人类何时应该介入——从被动监控到主动驾驶——这取决于车辆的信心和环境。

操作符事件序列图示例
Stanton NA 等人,(2021)。使用操作员事件序列图建模自动化与人类驾驶员的交接。未来交通1 (2),351–369。https ://doi.org/10.3390/futuretransp1020020(开放获取)

在农业机器人领域,OESD 帮助研究人员编排共享控制任务,例如让人类标记要收获的水果,而机器人负责物理切割。

操作符事件序列图示例
Salzer Y 等人,(2023)。集成功能分配和操作事件序列图以支持人机协作:机器人数据细化系统案例研究。《认知工程与决策杂志》18 (1),52–68。https ://doi.org/10.1177/15553434231199727(开放获取)

这些模型为我们提供了一种语言,将控制描述为人与系统之间的时间序列。它们已被证明在需要明确权限和故障保护的领域非常有效。作为用户体验设计师,我们可以在面对新挑战时改进控制序列图:设计不仅要考虑控制权的交接,还要考虑人与人工智能系统之间流畅的协同作用。作为用户体验设计师,我们可以在面临新挑战时改进控制序列图:不仅要设计控制交接,还要设计人与人工智能系统之间的流畅协作。

从旅程地图到控制地图

人工智能系统正在改变数字交互的结构。传统软件需要等待用户输入,而现代人工智能工具则能够推断、建议并采取行动。这彻底改变了用户体验或产品的控制方式,并挑战了当代用户体验方法中的许多假设。

在用户体验旅程图中,核心问题是:

“用户想要做什么?”

对于控制映射人工智能系统,核心问题变成:

“此刻谁在掌控局势?局势将如何转变?”

设计师需要更好的方法来追踪控制权是如何发起、共享和交还的——不仅关注用户看到什么或做了什么,还要关注人类和人工智能系统之间如何实时协商代理。

我们可以将类似 OESD 的思维方式应用于更广泛的 AI 用户体验。用户-AI 控制映射可能更多地关乎一种思维模式,而非静态图表——设计一个既能行动又能倾听的系统。关键考虑因素:

  • 谁在控制——用户、AI 或两者
  • 控制权何时以及为何发生转移——作为时刻或循环
  • 界面如何支持这些转换——遵循控制感知用户体验原则所需的可供性

为了评估这些动力是否有效,我们需要新的指标——能够捕捉合作质量而不仅仅是完成度的指标。

用户人工智能控制和质量指标概念图
用户-AI 控制和质量指标概念 — 插图:Rob Chappell

转弯效率和意图准确度等质量指标不仅仅是诊断依据,更是在人工智能设计中实现信任、协调和控制的一种方式。其目标是确保清晰性、适应性和以人为本的成果,即使控制权随时都在转移。

环境人工智能系统提高了风险

环境智能 (AmI) 指的是配备嵌入式传感器的环境,这些传感器能够主动且不引人注目地为用户提供支持——适应环境、识别行为模式,并在无需明确指令的情况下预测需求。这一愿景涵盖了从调节灯光的智能房间到能够理解语音提示的语音助手,以及如今嵌入在我们数字产品中的环境人工智能服务。

  • 无需提示即可阅读上下文
  • 提出行动而不是等待
  • 自主行动,然后退却

环境人工智能为数字体验设计开辟了新领域。

在2025 年 Google I/O 开发者大会上,环境 AI 的转型以 Project Astra 的形式展现。该项目的多模态助手被嵌入到配备摄像头和音频输入的智能手机中。Google 的 AI 助手将实时感知环境、识别物体并解读口语。它代表着我们迈向情境感知、具身化 AI 的未来:这些系统无需等待提示,而是主动观察、解读并提供帮助,并嵌入到我们现有的空间和工具中。

值得注意的是,谷歌宣布Gemini 将直接集成到 Chrome 浏览器中,这意味着谷歌正在将 AI 从一项独立的功能转变为一个无处不在的层。从这个意义上讲,浏览器曾经只是网站的被动容器,如今却成为了一个主动的协作者:读取上下文、建议操作并跨领域解释任务。AI 助手无需等待用户打开——它就在那里,感知用户的实时上下文并随时准备参与。

谷歌的立场越来越明确:拥有跨域 AI 层。这不是一个小众的边缘案例,而是一个主流的竞争态势,因为 Chrome 不仅仅是一个浏览器。它是全球用户的默认界面,控制着超过 60% 的浏览器市场。它的优势——“护城河”——不仅在于模型性能,还在于跨标签、应用和会话的上下文连续性。浏览器向对话式发展的这种演变,为在自己的平台内构建 AI 助手的产品和用户体验团队提出了一系列紧迫的问题。如果 Gemini 已经存在于 Chrome 中,那么特定领域的助手还会扮演什么角色?用户会更喜欢针对单个品牌或任务量身定制的网站嵌入式 AI 代理吗?或者,主流的网络模式是否会Gemini 而构建——确保兼容性、清晰度和信任度,而 AI 已经在浏览器级别与用户并肩作战?

Gemini 在 Chrome 中的截图
Google I/O 2025 大会上宣布 Chrome 浏览器 Gemini 将通过人工智能助手重塑浏览器 — 截图来自https://www.google.com/chrome/ai-innovations/

这不仅仅是一种新的交互模式,更是一种新的存在模式,人工智能系统将占据用户数字环境的整个界面。这种演变不仅重塑了交互模式,也重塑了我们对数字产品的期望。它重新提出了一些远远超出技术用户体验范畴的根本性问题。正是在这里,像乔纳森·艾维这样一位苹果最具标志性产品背后的极具影响力的设计师,也加入了讨论。

Stripe Sessions 2025上,Jony Ive 罕见地就设计工艺以及我们作为创造者的责任进行了一次对话。他强调,伟大的产品并非仅仅基于新颖性或巧妙性——它们源于深切的关怀、清晰的意图和克制。Ive 强调,我们有责任创造出一种不需要更多关注,而是回馈部分关注的技术。他呼吁产品能够认识到用户“能够感知关怀”——这种理念与将 AI 设计为一种新型协作者而非生产力工具的理念相呼应。

设计师 Jony Ive 爵士与 Stripe 首席执行官 Patrick Collison 在 Stripe Sessions 上进行炉边谈话:https://youtu.be/wLb9g_8r-mE

未来的工作:精心设计人工智能系统

在人工智能驱动的体验世界中,用户和模型共同创造成果。正如乔纳森·艾维提醒我们的那样,我们需要从根本上建立信任和关怀,而不仅仅是停留在表面。这些体验的成功将不再取决于系统的速度或智能程度,而更多地取决于它如何有效地共享控制权。随着人工智能工具的演进,控制设计将成为信任设计。

信任并非通过隐藏复杂性来赢得,而是通过使复杂性易于驾驭而建立。行动的系统也必须解释。提出建议的系统必须接受批评。记忆的系统必须披露记忆的内容及其原因。

动态控制设计意味着将界面视为一种关系,而不是一种工具。人际关系需要清晰的思路、积极的响应以及说“不”的能力。我们构建的系统将越来越多地为我们采取行动。问题在于,我们设计这些系统时,是否做到了在行动的同时认真倾听。

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

人工智能不会消灭用户体验——我们才会

杰睿

图片使用 ChatGPT 生成,并经过 Photoshop 编辑。图片来源:ChatGPT、Kym Primrose。

不久之前,我还坚信我的工作不会被人工智能所左右。虽然我现在仍然大体上相信这一点,但人们争相采用人工智能解决方案的速度之快令人担忧,这让我开始怀疑。我不能责怪他们;人工智能解决方案快速、一致,而且从表面上看,通常都很有吸引力。我很乐意将人工智能融入我的工作流程中(我已经这样做了),但我并不认同人工智能应该处于创作过程的中心这一观点。它无法创造;它只能复制——麻省理工学院领导的一系列实验强调了生成性人工智能依赖于模式而不是新颖的思维。虽然这种复制效果越来越好,但它仍然依赖于已经完成的工作。正是这一部分被忽视了;世界只看到了快速、可接受的解决方案,而这正是让我担心的部分。

几十年来,我们在用户体验领域一直宣扬同理心、共同创造以及理解用户个体的重要性。然而,在实践中,这些原则仍然与紧迫的时间表和狭隘的“可用”定义相冲突。正如 Adyanth Natarajan 所说,无障碍设计方面的失败反映出用户体验行业仍然主要面向一小部分人群。同样,Andrew Tipp 认为,虽然包容性设计至关重要,但预算和时间压力往往会削弱它

尽管人们竭尽全力强调包容性设计如果得到妥善实施将带来多么大的益处,但这些领域在开发过程中仍然严重缺乏重视。这个行业讲究时间和金钱;当廉价而粗糙的解决方案唾手可得时,它根本无法承担真正的用户体验设计的沉迷。人工智能提供了这样的解决方案。但是,我们越是将设计任务交给那些从聚合数据和历史模式中学习的系统,我们就越有可能将一切标准化。如果我们现在还没有找到关键的答案,那么将创意流程交给人工智能系统并不能神奇地解锁它。包容性设计成为基准标准的梦想变得更加遥不可及。诚然,我们获得了效率,但代价是什么呢?

虽然本文的重点在于AI如何将创造力从设计流程中剔除,但我们必须承认,这种观点本身并不新鲜。Alterio 、SeoHurst等人都探讨过UX /UI设计中创造力的扼杀问题,尽管他们并未提及AI的介入。

我们今天所说的“设计”有多少是真正原创的?

摆在桌面上的是:我们大多数人的工作都受到相当严格的限制。由于无障碍指南、设计系统、素材库和社区 Figma 文件的存在,许多创意意图被剥夺了。我们所做的只是将点连接起来——而这基本上就是所有人工智能解决方案都在做的事情。它们从相同的资源中提取数据,并基于相同的设计系统和无障碍规则将点连接起来。那么,这真的是一件坏事吗?

将显示缩放图像
Figma 社区 UI 工具包截图。图片来源:Figma

对我来说,答案取决于两点。首先,使用这些工具的人是否真的受过培训,了解它们的工作原理?他们是否知道如何设计提示来减轻偏见而不是加剧偏见?即使他们不知道,雇佣这些工具的人真的在乎吗?其次,我们节省下来的时间是否真的被重新投入到探索性思考中?投入到研究、实验和面向未来的想法中?

如果是,那很好;但如果不是,我们就有可能为了追求进步的幻觉而牺牲自己的创造力。任何真正的设计师都不应该愿意接受这种交易。如果我们要把所有这些耗时、繁琐、零散的工作都交给机器,我们的大脑还有什么更好的用途呢?

人工智能作为复制者,而非发起者

说实话:人工智能并不具备创造力。真的不。它只是一种非常逼真的模仿者。它接受过已经构建、发布和批准的事物的训练。这意味着它建立在已经成功的想法之上,而这些想法并不总是最好的,只是最容易被接受或最引人注目的。

它所回收的不仅仅是设计模式和配色方案,还有偏见、规范和文化假设。如果数据集存在偏差,输出结果也会如此。我们在Buolamwini 和 Gebru 于 2018 年发表的《性别阴影》等研究中就看到了这一点,其中商业 AI 工具对深色皮肤女性的性别判断错误,错误率高达 34.7%。此类研究表明,使用从互联网和企业来源收集的数据集的商业 AI 系统往往会复制并放大现有的社会偏见。

我们用同样有缺陷的框架建立了这些系统,而我们花了几十年的时间试图拆除它们,即使我们积极尝试纠正这些错误陈述,但可能为时已晚。

Molly Wright Steenson 换了一种说法:

数据的关键在于它存在于过去。数据集的问题在于它强化了现有的偏见,而不是找到新的方法来做事和解决问题

这凸显了生成式人工智能的一个核心挑战:我们用过去的假设构建未来的工具。

人们想方设法地推销人工智能解决方案,让我们觉得它们能让我们的生活更轻松,但实际上,他们只是在沙漠里兜售沙子。我们兜售的所谓创新,不过是规模化的反馈循环(是的,我是个痴迷于反馈循环的女人)。我们教它,现在我们让它用同样的材料来教我们和自己。

现在,复制有其存在的意义。我并不是说每个登录表单或入职流程都需要革新。一些优秀的设计成果是无形的。我之前提到过,我们将这些点连接起来。然而,我们是有意识地、谨慎地(或者至少我们应该这样做)将这些点连接起来。如果人工智能成为流程中这些部分的默认设计者,我们就不得不问:这给我们带来了什么?我们到底贡献了什么?如果我们把基础工作完全外包出去,我们该如何发展这门工艺?

讽刺的是,设计本应是最能抵御这种侵蚀的领域之一。多年来,我们一直在努力争取一席之地,证明好的设计能够塑造结果、改变行为,并真正改善生活质量。如今,我们终于赢得了一席之地,却被要求将工作交给那些从未被邀请参与讨论的工具。坦白说,这些工具只关心模式,不关心环境。

更糟糕的是,那些不愿或不觉得有必要深入探究的人一致认为,人工智能的输出就是客观真理。人工智能就是神谕。它不是魔法,而是一个基于泛文化训练的系统。如果我们不小心,我们就会让自己陷入自动化,最终走向创造性的湮没。

在黑暗中跳舞

话虽如此,或许我们多年来一直被困在创意的湮没之中。我至今仍记得90年代中期到21世纪初科技界的疯狂。创新无处不在,没人知道自己在做什么,他们只想尝试一些很酷的东西。有人喜欢直板手机吗?任天堂的控制器设计?那真是疯狂,也真是棒极了。

将显示缩放图像
这是 20 世纪 90 年代末到 21 世纪初的一些实验性手机设计的拼贴画,其中包括形状像口红管、摄像机和化妆盒的手机。
有趣的00年代早期手机。图片来源:u/CosmicPelican via Reddit r/nostalgia

我认为其中大约80%都失败了。但这却是最好的失败。最终,这些疯狂的想法让位于标准,就像往常一样;要么是苹果,要么是安卓;要么是PlayStation,要么是Xbox;要么是Mac,要么是Windows。

在所有这些融合中,用户体验 (UX) 找到了立足点。随着技术的成熟,我们的期望也随之成熟。怪异不再美妙,反而令人困惑。不可预测的界面不再勇敢,而是支离破碎。用户体验 (UX) 作为一种将秩序带入混乱的方式出现,其目标突然不再是脱颖而出,而是消除摩擦,使体验看起来自然。

这绝对是必要的。良好的用户体验 (UX) 使所有这些新技术不仅可以供爱好者和早期采用者使用。用户体验标准带来了一致性、最佳实践和基于成熟经验的模板。但在追求一致性和可用性的过程中,我们失去了一些东西。我们不再问“如果呢?”,而是开始问“基准是什么?”

设计师和开发人员,请告诉我,您不使用 Apple 的人机界面指南或 Material Design 作为参考点?我会质疑任何这样做的人的诚实。

将显示缩放图像
两张突出的设计系统图:Google Material Design 和 Apple 人机界面指南。图片展示了每个系统的一些界面组件。
谷歌Material Design(上)和苹果人机界面指南(下)。图片来源:Figr

你上一次彻底改变常见 UI 元素的交互预期是什么时候?流行的东西就一定有效,何必再去重新发明轮子呢?就像我们通过设计和接触学会了如何打开门和操作炉灶一样(就像唐纳德·诺曼那样),我们也学会了如何操作下拉菜单。这就是可供性(affordance)的演变。

所以,当我们说人工智能会削弱用户体验(UX)和用户界面(UI)的创造力时,真的如此吗?它所做的并非我们多年来从未做过的事情。它引用的是相同的库和标准,使用我们共同认可的有效方法。我们所说的我们失去的东西,其实是我们很久以前就放弃的东西。

平衡之举

让我们明确一点。人工智能不是敌人,自满才是。

过去一周左右,我使用了一些AI工具,体验不错,我相信它是一款非常棒的辅助工具。但我们必须挑战它。说它胡说八道就对了。问问我的ChatGPT,我告诉它它错了多少次……

将显示缩放图像
ChatGPT 对话截图。图片来源:ChatGPT、Kym Primrose。

如果我们希望人工智能能够增强我们的工作,而不是取代其核心功能,我们就必须有意识地去行动,必须意识到自己在做什么。施奈德曼的普罗米修斯原则明确指出了这一点:如果我们以这样的方式构建高度自动化,它就能支持创造力和监督。

对我来说,成功取决于三件事:教育、融合平衡

我们需要教育自己和同事,让他们了解人工智能的真正含义、运作方式,以及它在日常工作流程中的界限。这不应该是一个孤立的过程。

这不仅仅是开发人员或用户体验设计师的问题。我们需要跨职能的人工智能素养,涵盖市场营销、用户体验、开发和质量保证;我们应该共同学习。我们都应该积极意识到局限性,设定清晰的提示,仔细审查输出,并在潜在偏见影响用户之前发现它。如果我们要负责任地构建产品,我们需要共同的语言和共同的责任。

一旦我们了解了人工智能能够以及应该为我们做什么,下一步就是整合。这不仅关乎技术层面,也关乎文化和伦理层面。仅仅选择一个工具并将其融入工作流程是不够的。我们需要编写文档:哪些工具是允许使用的,如何有效地使用它们,它们属于流程的哪些阶段,以及何时应该回归到一些手动思考。这份文档不应该是自上而下的,而应该由所有参与工作的人员共同协作构建。我们需要建立清晰的界限,并让所有人拥有共同的责任,让我们有信心在认为合适的时候,敢于表达自己的想法,并主动对抗人工智能。

这才是关键;我们不能对人工智能漠不关心。每一次使用都应该有意识,每一个解决方案都应该受到质疑。人工智能可以提供辅助,但最终决定权仍然在我们手中。

这就引出了我们的目标。如果我们的目标是通过将某些任务交给人工智能模型来提高生产力和效率,那么我们必须思考如何将这些节省下来的资金重新投资到其他地方。

实现这一目标的方法之一是重新投资研发、发散思维和突破界限的创意,这不仅能为用户体验/用户界面注入活力,还能打破停滞不前的设计模式。有了人工智能处理繁琐的工作,我们就有了探索实验性概念的空间,而这些概念通常受限于预算和时间。创新正是在这个空间中得以生存。如果没有它,我们可能会陷入无休止的循环,只输出安全、毫无灵魂的成果。我们必须展现出不断发展、适应、扩展,并保持我们创意生态系统的新鲜感,这不仅是为了用户,也是为了为我们的人工智能模型提供我们真正希望它们反映的解决方案和思维。

最后的想法

即使没有自动化,我们多年来也一直陷在千篇一律的便利循环中。人工智能并非用户体验/用户界面(UX/UI)感觉陈旧的原因,而是其结果。它只是凸显了原有缺陷。所以,与其担心人工智能会抹平用户体验/用户界面(UX/UI)的创造力,或许我们应该问问自己,为什么它一开始就如此平淡?

作为设计师,我们应该探索如何利用人工智能来支持我们的工作。它不是设计师,而是工具,就像之前的 Figma 和 XD 一样。Ben Shneiderman 在《以人为本的人工智能》一书中一针见血地指出,人工智能的目标并非取代我们,而是“增强、放大、赋能和提升”人类的潜能。如果我们选择挑战模板,设计和创造力仍然掌握在我们手中。我们的价值不应在于速度,而应在于更高效、以人为本、以体验为导向的思维方式——而这些是人工智能无法掌握的,因为无论它多么接近人类,它都永远无法成为真正的人类。

因此,如果我们不想成为自身流程的过客,就必须确保在培训、道德和研发方面的投入与在工具和集成方面的投入一样多。人工智能可以支持伟大的设计,但推动其发展的仍然是我们的好奇心、挑战和本能。所有这些最初都让这个行业令人兴奋。

 

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

Excel和PPT已经落后了,可视化大屏强在哪?再次预览瘾

杰睿

今天看到这么一个问题:

我想说,这真是一个好问题!可能会有如下答案:

●Excel的数据透视表操作麻烦,用BI拖拽一下就能有结果
●整合多源数据,很多型其他数据可以一起分析了
●视觉化快速、美观,尤其是联动的功能

作为一个从事资料行业多年的人,我觉得最后一个是比较有意义的:视觉化。

可能很多人都不懂什么叫联动,看这个:

将显示缩放图像

很好理解,就是让数据动起来,Excel和PPT必备这样,需要长久,而且效果要差显着。

说到BI,可能很多人不了解,那报表总该接触过吧,两者的视觉化都是类似的,这也是比较重的。

想要快速、简单,不用方案码,就能实现可视化吗?

首先不说会用工具,我觉得模板才是最重要的,工具学起来可能会很长久,但是模板直接,可以用,而且重要的是:财务营销、销售营销等。

FineReport做化有一套方法,而且里面的生活化模板很不错:

将显示缩放图像
将显示缩放图像
将显示缩放图像
将显示缩放图像

什么?没看到瘾?直接看大屏!

将显示缩放图像
将显示缩放图像

觉得难,你也能做出来。点击FineReport免费试用,还有更多演示供你选择,总有一款适合你,别点击大屏演示等你来体验。

 

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

超酷的高校学术迎新数据大屏,你也能做!

杰睿

先来看几张高校迎新大屏:

西北工业大学

将显示缩放图像

浙江农林大学

将显示缩放图像

资料有限,大概做到了这样一个迎新大屏:

将显示缩放图像

接下来是制作步骤

教程只是视觉讲化demo的制作过程唷,硬体部分不涉及啦

1、确定主题及展示指标

在设计可视化驾驶舱或大屏的时候,我们第一步要先确定我们大屏/驾驶舱的主题,然后列出我们想要在这张大屏上想要展示的数据指标和分析维度

主题:学校迎新大屏,通过对学校招生资料以及教职人员资料分析,向新生展示学校招生情况及学校师资力量、办学能力

主要分析维度如下:

各省份新生招生人数分析
历年各省招生情况分析
迎新资师队伍各
师资力量分析
办学规模分析
历年本科升学率趋势分析
学校初步支出结构分析
在校学生学历结构分析

2、根据资料关系选择合适的图表

关于图表的选择,看我前面两天写的图表应用指南:不知道用什么图表展示数据?看下面这份图表选择指南就够了,根据数据之间的关系选择合适的图表,可以参照这张经典的图表:

将显示缩放图像
将显示缩放图像

3、驾驶舱排版设计

根据确定好的分析指标进行排版,排版要注意主次分明,让读者瞬间看到重点资讯,提高资讯传递的效率,把核心练习指标放在中间位置、占更大面积,一般都会将动态效果丰富的地图放在主要位置,抓住读者眼球,次要指标萤幕放在几十个屏幕上。还有一些辅助分析的内容,可以通过图表联动、钻取体现。

可以参考如下几种布局方式:

将显示缩放图像

我的布局:

将显示缩放图像

4、城市化模板制作

模板的制作,我用的是FineReport,做视觉化大屏非常专业,基本上不用写什么程序码就可以开发视觉化大屏,多一个低程序码的报表开发平台吧。刚感兴趣的话可以下载一个和我一起试试看

软体激活码迭代这里,话不多说,上教程:

打开finereport,创建一张决策报表:

将显示缩放图像

新建数据集,然后用sql查询语句从数据库中提取数据,可以新增省份数据库数据,也可以直接上传档案数据集,定义地区引数,关联历年各省招生数据和各分招生数据(实现数据联动),其他的取数据报表我不用一一发货来,大家可以自己根据需求写

将显示缩放图像

决策报表采用的是易用式布局,可以拖拽便捷布局,根据之前设计的布局排版将所有图表元件按照布局设计顺序拖放到对应位置:

将显示缩放图像

这里面我用到了两个图表外挂,滚动字幕和数字时钟外挂,大家可以在一些外挂商城免费下载,点选服务器>外挂管理就可以找到这些外挂啦,当然你还可以找到其他你心仪的外挂。

将显示缩放图像

字幕滚动效果和数据时钟效果:(我录的不是很清楚抱歉><)

然后分别给图表元素类型设置其他、数据、样式、效果,以中间的地图设置为例:

将显示缩放图像

其他图表元件的数据和效果设定我这里就不赘述了

到这一步,基本上驾驶舱的雏形就做完了,我们可以对背景图、最后的细节进行美化,背景可以选择颜色或者是图片,做的匆忙我不想找背景图,直接用的颜色,点选机身>样式进行设置

将显示缩放图像

为了更好的视觉效果我们还可以给图表新增主题,增加大屏科技感,比如我们的大屏主题:

点选标题背景块>属性>样式,上传图片设置:

将显示缩放图像

最后储存模板,点选预览,效果如下(嘻嘻还是用的上面那张图):

看着?是不是还挺酷炫的!其实这样的大屏制作起来并不难,赶紧学习起来引爆你的SNS吧XDDD

 

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

【原创案例分享】插画设计:水处理设备2.5D、2D器械插画设计

杰睿

项目背景:

该项目常州科德水处理成套设备股份有限公司委托设计,致力于水处理领域相关设备的视觉呈现,通过精心设计的3D与2.5D插画,生动展现各类水处理设备的结构细节与工作原理。我们旨在以直观、易懂的方式,提升公众对水处理技术的认知与兴趣。
为企业客户提供高质量的软件UI图标设计,助力其在环保领域的品牌形象塑造与市场推广。通过专业的插画设计,我们期望能够提升软件ui美观度和美誉度,引导更多人对水资源保护与可持续利用的关注与思考。

项目概述:

产品定位

产品定位为一款集科普、宣传与营销于一体的水处理设备插画设计。通过3D与2.5D视觉呈现,旨在直观展示设备细节与工作原理,提升公众认知,同时为企业客户提供高质量的视觉宣传素材,助力其品牌形象塑造与市场拓展。

目标用户

目标用户包括广大公众、水处理领域专业人士及企业客户。公众用户希望通过插画了解水处理技术;专业人士则关注设备的结构与原理;企业客户则寻求高质量的宣传素材以提升品牌形象。

设计风格

设计风格以科技感与直观性为核心,结合3D与2.5D技术,注重细节呈现与色彩搭配,营造出既专业又不失趣味性的视觉体验。通过精准的线条与光影处理,使插画作品既具有教育意义,又具备艺术美感。
 
 

2.5D插画风格

2.5D插画风格是一种介于2D和3D之间的插画艺术表现形式,是一种用二维手法表现三维效果的插画风格。它结合了二维的平面简洁和三维的立体空间感,给人既简单又富有深度的视觉体验。
 

气浮装置插画设计

2.5D的插画绘制方法让画面看起来更加的简洁、精美且充满活力。同时,足够丰富的细节装饰会带来耐人寻味的效果,能够迅速吸引观者的眼球。
 
 

刮泥机插画设计

通过二维手法表现出三维效果,让整个装置更具立体感。运用巧妙的透视和光影,在平面上营造出类似真实场景的深度感,能让观众直观地感受到处理装置的各个部分功能的空间位置,清晰的指导工作。
 
 

行车插画设计

2.5D插画不需要像3D绘画那样考虑复杂的模型构建和精细的纹理映射,降低了创作难度,同时降低了设计成本,设计效率也更加高效。
 

2D插画风格

2D插画风格,即二维插画,是一种在平面上展现的艺术形式,具有表现力强、风格多样、易于创作、适应性强、传达信息直观以及情感表达丰富等优点。
 

气浮装置插画设计

通过线条、色彩、形状和构图等元素,对该设备进行2D插画的重新创作,在图形、颜色表意上对各个功能区的分布、作用进行清晰传达。
 
 

刮泥机插画设计

2D插画的绘制过程比较简单,不需要复杂的建模和渲染技术。根据客户给的参考或者沟通讲解,确认符合行业以及设备特点的色彩及元素构成手法,产出精美、准确的设备插画。
 
 
 

行车俯视图插画设计

2D插画能够直观地传达信息,使观众更容易理解和接受。工业产品的设备介绍中应用广泛。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

从优秀到卓越的 UI 动画技巧 改善 UI 微交互的实用建议。

杰睿

使标签中的内容滑动。

将显示缩放图像
左侧的内容淡入淡出。右侧的内容随标签滑动。

连接卡片的共享元素。

将显示缩放图像
左侧的内容会打开一个新的屏幕并向上滑动。右侧的卡片会展开并填满整个屏幕。

在您的内容中使用级联效果。

将显示缩放图像
左边的卡片通过滑动和淡入出现。右边的卡片具有相同的动画,但每张卡片都有短暂的延迟。

使内容将其他元素推开。

将显示缩放图像
左侧的动画在其他内容之上进行动画处理。右侧的动画随着内容的扩展而将其推出。

使菜单在上下文中显示。

将显示缩放图像
左侧菜单从下方飞入。右侧菜单从创建它的操作展开。

使用按钮来显示不同的状态。

将显示缩放图像
左侧的按钮显示指示状态的文本。右侧的按钮使用容器来显示不同的事件。

引起对重要事物的关注。

将显示缩放图像
左侧的示例使用颜色和位置来突出元素。右侧的示例使用微妙的动画来吸引用户的注意力。

结论

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

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
 

日历

链接

个人资料

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

存档