首页

兰亭妙微ui设计公司:从Excel到BI再到AI:一个数据大屏的进化史

清阳 用户研究

兰亭妙微ui设计公司分享:当BI大屏成为企业标配,数据可视化却陷入'看得见说不清'的困境。本文以航运企业成本分析为例,揭秘如何通过WorkBuddy企业版AI与BI系统对接,将原始数据转化为即时业务洞察。从API接口开发到Prompt模板优化,这套方案让'为什么运费上涨15%'的答案从2天缩短至2分钟。一、BI数据看板做完了,还能做什么?

花3个月上了BI系统,BI大屏每天都跑,老板手机能看实时数据了——然后呢?

发现:看板只是让数据”看得见”,并没有让数据”说人话”。

去年豆芽君参与了一个航运企业的成本分析系统建设。上线后,大屏展示着船舶运营费用、航线成本对比、港口费用构成——数据很全,老板们看得很满意。

但过了几天,老板问了一句:“为什么上个月运费涨了15%?”

运营主管愣了5秒,然后说:“我回去查一下。”

这一查,就是半天。

从4个系统里导出数据,人工清洗,找口径差异,逐条核对……等他把结论整理出来,老板已经忘了问过这件事。

这不是BI的问题。是**”数据到洞察”之间,永远差着一层**——那一层,是人的判断。

所以豆芽君花了点时间,把BI和AI接在了一起。现在再有人问”为什么涨了”,我只需要1-2分钟。

下面说说,豆芽君是怎么做的。

二、从Excel到BI,多数企业走完的路

先说说数据分析的发展历史。

Excel时代是多数企业的第一阶段。数据散在各个业务系统里,靠人工定时导出、清洗、汇总。我见过最夸张的团队,每周五下午花3小时手工整理,周会用的数据和业务系统里的真实数据已经差了2天。

BI时代解决了整理的问题。统一口径、实时同步、手机随时看、权限分部门。大概在2020年前后,很多中型以上的企业陆续上了帆软或者Power BI。老板们终于不用等到周五下午了,数据随时可以查。

但新的问题随之而来:看板越来越多,看到异常指标,不知道原因在哪?

一张大屏上几十个指标,看的人其实只扫自己关心的那几个。真正有价值的信号——比如某个航线成本突然偏离历史均值——看板不会告诉你,原因到底是油价上涨?还是船舶运营效率差?

这就是为什么,BI之后还需要一层AI。

三、BI+AI:让数据自己说人话

3.1 场景:航运船舶费用大屏的”最后一公里”

以航运成本分析为例。BI大屏展示的核心指标通常是这样:

本月船舶运营总费用:¥2,380,000 环比上月:+12%

老板看到这里,下一步就是问你”为什么涨了”。

以前的流程:业务人员拉明细Excel,数据分析师清洗口径,产品经理对比历史数据,写成分析报告,提交给老板——通常需要1到2个工作日。

现在的流程:打开BI看板,底部已经嵌着AI的解读结论:

AI洞察摘要(2026年Q1) 本月费用环比上涨12%,主因:
①油料成本上升贡献+68%的涨幅;
②3号航线港口使费异常增加¥86,000,建议核查;
③整体费用在正常波动范围内,无需过度关注。

这不是科幻,这是BI+AI API对接,跑通之后的标准输出。

3.2 方案架构:三条线接起来

整体方案分为三步,数据从BI流出,经AI解读,再回到BI展示,全流程不需要数据离开企业内网。

第一步:BI开放数据接口

多数BI软件支持通过API接口输出看板数据。你可以选择需要分析的指标,通过接口导出为结构化的JSON数据。

第二步:用WorkBuddy企业版AI解读

把JSON数据发给内部部署的WorkBuddy(数据不出企业网络)。这是关键:不用公有云AI,企业敏感数据不需要外传。

Prompt模板可以直接用:

你是一个资深航运成本分析师。基于以下数据,给出分析结论: [粘贴JSON数据]
请按以下格式输出:
核心异常:环比变化最大的指标TOP3,说明可能原因
趋势判断:过去3个月的变化方向(上升/下降/波动)
行动建议:建议优先关注哪个指标、排查什么数据
质量提示:如果发现口径不一致或数据缺失,请标注

这里有个经验:Prompt要具体,不要泛泛说”分析一下”。 你问得越清楚,AI的结论越可用。“按航线拆解费用变化”和”分析一下”,输出质量差一个量级。

注:涉及数据隐私,图片仅为效果参考

第三步:洞察结果嵌回BI看板

用BI工具的”插入HTML”组件,把WorkBuddy返回的分析结论以文字形式展示在大屏底部,与原始数据同步更新。

这一步的好处是:用户不需要切换工具,在看数据的同时就能看到AI的解读。

注:涉及数据隐私,图片仅为效果参考

3.3 Before与After:同样的数据,不同的体验

纯BI阶段BI+AI阶段老板看到费用上涨开始问原因,安排人查AI已标注主因和关联因素分析师回复细节1-2个工作日后AI当场给出初步结论月度分析报告手动写初稿,人工润色AI生成初稿,人工审核数据异常发现靠人工盯着,或者客户先发现系统自动标注

四、进阶:从”用户问AI”到”AI主动推”

上面的方法跑通2到3个月之后,你会发现有些分析模式是固定重复的——每周一早上,各航线成本对比每月费用异常预警(环比超过某个阈值)特定船型超过预算时的提醒

这些场景触发条件明确,分析逻辑固化,每次都是同一套结论。那就不需要人去找AI了,让AI主动来找人。

这就是AI定时任务,主动推送洞察。每天早上 9:00  → WorkBuddy读取BI关键指标  → 发现异常(环比变化超过阈值)  → 通过企业微信/邮件推送洞察报告

这一步做起来也简单,因为分析规则已经固化了——上一步的产出,就是这一步的规则来源。

建议的顺序:先跑通BI+AI API对接,等积累了足够的分析案例,再上AI定时任务,主动推送洞察。

不要一上来就做主动推送,那样分析规则不成熟,推出来的内容质量不可控。

五、BI+AI融合的方法论

经过这个项目的验证,我总结了一套”三段论”:

第一阶段:BI打通数据 统一数据口径、实时监控、权限管控。这是大多数企业已经完成的事情。

第二阶段:AI解读数据 用企业在用的WorkBuddy等AI智能体对BI导出的JSON做分析,输出可读的洞察结论。这是现在最值得投入的环节。

第三阶段:AI主动推送 固化分析规则,用定时任务替代人工触发,从”人找数据”变成”数据找人”。这是下一阶段的目标。

两个注意点:

1. 数据安全是底线 企业内数据不要上传公有云AI。WorkBuddy企业版是内部部署,数据不出域,这是基本前提。你可能会觉得”只是一些费用数据”,但对于贸易型企业,一条成本数据就是谈判筹码。

2. AI结论需要人确认 AI做分析辅助,但最终结论需要业务负责人确认后再使用。六、写在最后

写这篇文章的时候,我回想了一下过去十年做数据分析的历程。

Excel时代,我们学会了”怎么把数据整理干净”。 BI时代,我们学会了”怎么让数据被看见”。 AI时代,我们才开始思考”数据背后的业务问题是什么”。

工具变了,但有一件事没变:数据本身不会说话,说服人的永远是数据背后的分析和洞察。AI做的,是帮我们发现背后隐藏的信息,人再做综合判断。

转载:人人都是产品经理

 

 

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

 

image.png

兰亭妙微UI设计公司:渐变色成标配?拆解谷歌图标设计改版

清阳 设计资源

哈喽,这里是兰亭妙微UI设计公司,今天分享的是「谷歌应用图标改版」。

最近不少设计师朋友打开Gmail的时候,是不是总觉得哪里怪怪的?甚至有不少人吐槽,翻了半天都找不到自己天天用的谷歌应用了。

这是因为谷歌刚刚对Gmail、文档、云端硬盘等10多款核心Workspace应用的图标,进行了一次全面的大改版。


image.png

作为产品“脸面”的图标集体换新,自然引来了用户和行业的两极评价。有人觉得新图标颜值更高,不同应用之间终于能一眼分清了;但也有批评声认为,这次改版丢掉了谷歌品牌独有的凝聚力和辨识度,更像是为了变而变,没有清晰的战略方向。



我觉得这次改版,其实是谷歌对“品牌一致性”和“可用性”长期矛盾的一次深刻反思,同时也藏着AI时代谷歌全新的品牌战略。

一起来看看新图标到底长什么样?谷歌这次的设计又藏着哪些小心思~


01 渐变色全面登场

四色原则曾是谷歌自2015年Material Design以来的强制规范,要求所有官方应用图标都需要包含品牌标志性的蓝 (#4285F4)、红 (#EA4335)、黄 (#FBBC05)、绿 (#34A853),以强化统一品牌识别。

image.png

这次改版最直观的变化,就是谷歌坚持了多年的标志性“四色原则”被彻底抛弃,每一款应用都拥有了自己专属的主色调。这也是绝大多数用户认为可用性得到显著提升的核心原因。

image.png

之前的Workspace图标全都用同一套四色调色板,导致大家根本分不清谁是谁。而现在,Gmail有了专属的红色,谷歌日历回归经典蓝色,谷歌Meet则用上了明亮的黄色,每款产品终于找回了自己的个性。


image.png

在造型上,图标外围包裹的白色“背景容器”也全部被移除了。原来的白色背景容器限制了核心符号的尺寸,让所有图标都长得千篇一律。去掉容器之后,每个图标都得到了舒展,形成了更清晰的轮廓,不再是同一个框里的小元素,而是一个个独立可识别的视觉符号。


这次改版另一个贯穿始终的设计语言,就是渐变色的全面应用。所有新图标都采用了各自独特的渐变配色,这是谷歌为AI时代量身打造的视觉战略。例如下图就是重新设计的谷歌Gmail渐变图标效果。


image.png

也许谷歌正是通过这种分层渐变的视觉效果,向外界传递一个强烈的品牌信号:谷歌已经正式进入Gemini时代!

02 解决图标辨识度问题


那么谷歌为什么要在这个时间点,进行如此大规模的图标改版?核心原因是旧设计的可用性已经走到了瓶颈期——简单来说,就是用户根本分不清哪个图标对应哪个应用服务。

 

这次改版的核心背景,正是谷歌过去为了强行统一图标设计,导致不同应用之间难以区分。过去谷歌为了追求品牌美学,不惜牺牲可读性的做法一直饱受诟病,这次的更新可以说是一次迟来的、但绝对必要的可用性升级。


image.png

谷歌也在官方公告中明确表示:希望在保持整个产品家族一致性和凝聚力的同时,确保每一款独立应用在屏幕上都能保持现代感,并且被用户清晰、快速地识别。

这也说明提升视觉辨识度是这次改版的重点。


03 品牌一致性让位于可用性

谷歌这次的图标改版,也许给整个设计行业都上了一课:任何时候,可用性都应该优先于品牌一致性。

image.png

谷歌过去几年过于执着于“一致性”,结果反而导致用户无法区分不同的应用服务。“让产品看起来像一个系列”和“让所有产品长得一模一样”是完全两回事,在设计过程中我们也要避免这个认知误区。

这次改版也让我们重新思考了图标的本质和核心价值。图标本质上是导航工具,它的任务是让用户在大脑过载、同时开着20个标签页的情况下,也能下意识地立刻找到它。

所以哪怕新版图标在视觉和谐度差了一点,但只要它能解决问题,那它就是一个优秀的设计!

 

转载:微信公众号Clip设计夹

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

 

image.png

 

兰亭妙微ui设计公司:通俗易懂讲清楚,AI生成UI的应用逻辑!

清阳 设计资源

今天的主题是关于 AI 扫盲的,因为近期相关问题实在太多了,很多同学对它的理解非常的有限,导致走向不是过于吹捧就是完全抵制的两极分化。为了防止我们成为盲目(且天真)的二极管,就有必要具体认识 AI 的应用逻辑,以及在行业中的相关使用场景。

兰亭妙微UI设计公司:分享是入门扫盲,目标是以清晰简洁的方式来概述 AI 的行业应用框架,会使用尽量简单易懂的方式解释相关概念,不会涉及太多深奥的术语和理论。

所以不用担心看不懂,一起开始下面的阅读吧。

 

image.png

二、AI 的大模型认识

谈论 AI 就绕不开大模型,它是 AI 技术应用的核心。

简单解释 AI 大模型,就是一个通过特定方法和大量数据训练出来的 “自主化程序”,这个程序可以根据用户输入的指令自己做出 “判断和思考” 后再进行回复。

传统程序虽然也可以执行用户的指令,但回复的内容和方式不会超出一开始预设的范围,非常有限。

而 AI 大模型则大大拓展了这个边界,我们不用提前预设各种条件和逻辑,它就会自己去理解问题再决定给出什么结果。

当然,这个边界只是放大了但不是无限的。任何大模型都不是全知全能的,都有自己的局限性。所以针对不同的应用领域,就开发了不同的模型类型。

最基础的模型分类包含两种,一种是大语言模型 LLM,能实现文字的对话或文案、代码、数据的整理和输出。另一种则是多模态大模型,能在处理文字的基础上还处理图片、音频、视频等特殊对象。

比如深度求索开发的 DeepSeek 模型就是大语言模型,只能处理文字但不能生成图片(截止到2026年初)。而 Google 开发的 Gemini 大模型则是多模态模型,可以生成图片和视频等内容。

image.png

 

不同模型会有不同的表现和优劣,但因为大模型的开发需要尖端的技术和庞大的规模(训练),门槛极高,所以市面上主流的大模型数量并不多,可以简单分为国内和国外两个阵营。

国外的主流大模型包括 OpenAi 开发的 ChatGPT,Google 开发的 Gemini,Anthropic 开发的 Claude,xAI 的 Grok 等。

image.png

 

国内的主流大模型则包括字节开发的豆包,阿里开发的千问 Qwen,深度求索开发的 Deepseek,月之暗面开发的 Kimi 等。

image.png

 

因为前面说过大模型的局限性,所以为了应对不同的应用场景,团队就会将它们裂变出不同的版本。比如千问既有 Max 语言大模型,还有 Omni 全模态(文字、图片、音频、视频)大模型,针对处理问题的难易度又分成了 Max、Plus、Flash、Lite 等版本。

完整的大模型体积和参数都非常庞大,需要部署到专属的算力中心,并通过云服务来实现用户的访问和使用。也就是需要联网使用,但因为国内网络服务的限制(不可抗力),我们无法通过国内电信访问国外的主流大模型。

虽然说国内大模型的水平在这几年突飞猛进,但离国外的大模型还有一定的差距,在实际工作场景中多数应用的也是国外大模型,所以访问它们就需要大家自己发挥主观能动性解决了。

顺便再解释一个基础的问题,大模型除了远程访问以外,也可以在本地进行安装。部分团队(如千问)会在网上开源自己的大模型供其它人下载和使用,当我们下载到本地后就可以用 GPU 来运行它。但因为大模型对性能的要求极高(旗舰显卡起步),所以本地运行的效果要大打折扣。

而一些企业内部或行业专属的大模型,往往都是使用这些开源大模型进行二次训练和调试后的结果。还有一些针对特定硬件(如手机、眼镜)和特殊应用场景开发的小模型,就暂时不在我们的讨论范围之内。

三、AI 相关工具的认识

前面讲过大模型可以类比成一种 “程序”,且它还是后端服务器上运行的程序。想要对这个程序实现命令的输入并返回它处理的结果,就需要应用前端的工具来实现。

image.png

 

比如我们打开豆包的官网,就可以使用这个网页对豆包大模型提出问题和要求,然后网页上就会返回它处理后的结果。这个网页就是使用大模型的工具,而这只是 AI 工具的其中一种形式,还可以是本地应用程序、手机 APP、小程序、硬件定制系统等等。

image.png

 

我们大多数人开始接触 AI 大模型,都是从这些官方的工具开始,它们最基本的功能就是根据指令返回文字或图片信息,我们会把它们当成是一种可以对话的人工智能客服。

但实际上它们可以发挥的作用远不止于此,比如帮你整理本地的文件夹清理重复的文件,帮你自动修图并完成动态相片的剪辑,帮你编写程序并自己运行和检测等等。想要实现对话以外的其它功能,就需要借助特定的工具才能实现。

所以除了最基础的对话工具外,行业还衍生出了很多激发大模型潜力的 AI 工具。它们可以借助大模型完成程序开发、视频剪辑、操作托管、热点整理、消息推送等等。

到这里我们就要清楚,AI 大模型是大模型,工具是工具,大模型是基座,而工具是大模型的具体表现和应用形式。

我们更进一步认识 AI 工具,就可以把AI工具分成官方工具和第三方工具两个种类。

官方工具就是 OpenAI、Google 等大模型企业自己开发并绑定自家大模型的产品,而第三方工具则是其它团队开发,再接入到大模型进行使用的工具。

比如本地聊天机器人 Cherry Studio,它本身只是个简单的聊天对话工具,可以自己创建对话角色/助手,但需要接入大模型以后才能进行对话。还有著名的AI编程工具 Cusror,只有接入大模型以后,它才可以实现 AI 编程和代码管理。还有前阵子火遍全球的龙虾 Openclaw,也只是个本地工具,需要接入大模型后才能识别本地的文件和执行命令。

image.png

 

官方能提供的 AI 工具与服务往往很有限,所以在真实项目流程中,我们就会混合使用多种工具来完成工作。就像以前做一套项目除了用 Figma以外,还要结合使用 Adobe PS、AI、C4D、AE 等软件。

而第三方工具和官方不同的是,官方工具默认连接自家的大模型,用户直接登录就能使用。而第三方工具要接入大模型,就需要进行额外的配置,也就是添加大模型的 —— API

API 就是接口,是前端工具连接后端服务器的通道,而这个通道默认是上锁的,还需要提供对应的密钥(API Key)才能正常访问。

部分工具会自己接入各大模型的 API,用户只能选择它提供的模型,并只需要对这个工具进行付费即可。

image.png

 

另一部分工具则需要用户自己选择模型和配置 API,需要我们访问大模型的 API 开放平台进行申请,然后再将它们生成的 API Key 填入到工具中完成连接。

image.png

 

API Key 就像是一个电话号码,当我们申请完并进行使用,就会产生一定的 “流量”,而 AI 产生的流量用专业术语形容叫词元 Token

使用 API 完成的任意 AI 服务,都会消耗 Token,且因为 AI 的计算成本极高,所以主流大模型都会针对 Token 消耗量进行收费。就像电信运营商一样,既有包月服务附带一部分流量,超出部分还要按量计费。

image.png

 

在实际的 AI 工具使用过程中,Token 的消耗是极其巨大的,往往会造成沉重的成本,而这个市场也遵循一分钱一分货的真理,越好的大模型价格就越贵。以最适合编程的大模型 Claude Opus 为例, 一个程序员高频使用消耗的 Token 账单可以从数千到数万元不等。所以我们也会从性价比的角度出发,来搭配不同的模型进行使用。

总结我们应用 AI 的本质,就是通过工具来操作大模型。而工具的作用不同,大模型本身的特性和价格也不同,就导致我们在面对一个复杂的任务时,需要选择多种 AI 工具和不同大模型来实现。

学习使用 AI,和传统的单一软件教学不同,不是只学会某个工具的功能和操作方法,而是了解不同的 AI 工具以及大模型的特性,通过组合它们来实现自己目标的方式。这不是设计或产品思维,而是工程思维的具体应用。

四、结尾

时间关系只更新了上半部分,和 UI 有关的内容我会放到下篇再输出。同时我们现在有准备录制一套入门的课程,应该周末到下周就会上线,大家有什么疑问和工作中遇到的需求都可以在评论区或社群里发给我们。

 

转载:优设酸梅干超人

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

 

image.png

兰亭妙微设计课堂:设计的原点,以用户研究挖掘真实设计洞察

涛涛 用户研究

在产品外观、界面与工业设计全流程中,用户研究是贯穿全程的核心标尺,能让设计脱离设计师主观臆断,扎根真实人群、真实场景,产出具备落地价值的解决方案。兰亭妙微结合多年政企、消费类产品设计项目经验,系统拆解标准化用户研究流程,讲解调研方法、数据梳理工具与洞察转化思路,理清从用户需求到设计落地的完整链路。

兰亭妙微设计|9 个大厂 APPUI 细节拆解,拿来就能落地的实战设计思路

涛涛 设计管理与成长

在多年 UI 项目落地中,兰亭妙微团队发现,真正拉开产品体验差距的,往往不是宏大视觉风格,而是容易被忽略的界面微交互、卡片排版、运营创意等细节。本文结合淘票票、支付宝、滴滴、小红书、闲鱼、美团、有数、微众银行九款主流产品案例,拆解可直接复用的设计巧思,覆盖运营植入、情感化交互、AI 功能落地、空白卡片优化、金融轻量化设计等多场景,给 UI 设计师提供可落地参考。

兰亭妙微设计深度解读:微软 Office 新版图标,不止是视觉焕新

涛涛 行业趋势

作为深耕界面视觉与品牌图标体系的设计团队,兰亭妙微持续关注全球大厂设计迭代思路。继 2018 年扁平化图标体系后,微软时隔多年全面更新 Word、Excel、PPT 等 Office 核心图标,柔和流线造型与鲜活渐变配色成为最大亮点。这场看似简单的颜值升级,实则藏着 AI 时代办公产品的设计底层逻辑,也为行业图标设计提供全新参考思路。

兰亭妙微设计|20 条落地级 UI 细节优化干货,做好界面质感全靠这些小技巧

涛涛 设计思维

兰亭妙微(蓝蓝设计)深耕 UI/UE 设计十六年,服务工业、医疗、能源、政企数字化等数百款软件与 APP 项目,在长期落地交付中总结出大量容易被忽略、却能大幅提升界面精致度与用户易用性的实操细节。很多界面看着简陋、层级混乱、阅读吃力,根源都藏在微小排版、色彩、组件规范里。本文整理 26 条一线设计师通用优化要点,覆盖头像模块、文字排版、按钮交互、卡片布局、表单登录、导航、滑动组件等全场景,所有技巧均可直接落地到 B 端后台、移动端 APP、数据可视化界面设计中。文中案例仅作设计演示,不用于商业用途,欢迎同行交流补充设计思路。

兰亭妙微设计分享:Ponteo牙科人力调度管理平台,多角色分层数字化系统完整设计

之晨 系统UI设计文章及欣赏

北京兰亭妙微 UI 设计公司,成立 16 年来,始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势,从中提炼可落地的设计方法论,分享给同样热爱设计的你。

截屏2026-06-30 11.12.23.png

 一、项目定位与行业现存痛点
 产品简介
Ponteo是面向口腔行业的灵活用工智能SaaS平台,搭建三层独立用户体系:诊所PC运营管理端、牙科医师移动端工作台、平台总控Admin运维后台,打通诊所发布临时诊疗工单、医师就近接单、线上排班沟通、营收自动结算、全平台数据监控全业务链路,适配独立牙科诊所、连锁口腔机构、自由执业牙医三类使用人群,实现人力、财务、运维数据一体化可视化管控。

牙科灵活用工四大核心行业痛点
1. 供需匹配低效:诊所急诊、临时缺岗只能线下电话邀约医师,闲置牙医无法精准匹配就近工单,沟通成本极高;
2. 财务对账繁琐:医师出诊收入、诊所营收、平台手续费、退款调整数据分散,人工统计易出错;
3. 排班工单管理混乱:根管治疗、正畸咨询、常规洁牙等订单无统一可视化日程,易出现时段冲突、漏单;
4. 平台运维无集中监控:服务器性能、用户资质核验、订单报错、合规风险分散,故障排查耗时漫长。

截屏2026-06-30 11.12.59.png

二、产品完整分层业务闭环
整套系统按照三类使用者搭建闭环业务流程,数据互通、界面独立互不干扰:
1. 医师移动端链路:资质视频认证→浏览附近工单(列表/地图双视图)→接单预约日程→线上和诊所沟通诊疗信息→钱包查看实时收入与业绩分析;
2. 诊所PC端链路:发布临时用工需求→系统智能推荐匹配医师→查看医师工时利用率、排班日历→统一查看收款流水、月度经营报表;
3. Admin总控后台链路:全局汇总平台订单、活跃诊所、注册医师数据→多维度财务营收拆解报表导出→服务器性能实时监控→异常工单、合规风险统一预警。

 三、三大角色核心模块设计拆解

截屏2026-06-30 11.11.18.png

模块1:诊所PC Practice Dashboard 经营总览看板
模块化网格复合布局,一屏整合诊所全部经营维度,兼顾数据可读性与操作便捷度
1. 顶部导航区分首页、医师、订单、消息、数据、财务六大业务入口,支持全局搜索、明暗模式切换;
2. 核心可视化区块:周度营收柱状图表,标注单日峰值收益,直观展示门店业务波动;
3. 关键指标卡片组:本周总营收、接诊患者总量、在岗专科医师数量,同步展示同比增减幅度;
4. 辅助业务分区:医师工时利用率环形进度条、近期收款流水、日程推荐医师板块,同时满足人力调度与财务对账需求。
设计价值:诊所管理者无需切换多个页面,单次浏览即可掌握营收、人力、订单三大核心经营板块,大幅降低管理时间成本。

截屏2026-06-30 11.12.52.png

模块2:牙科医师移动端工作台
轻量化移动端分层页面,适配医师碎片化户外查看场景,四大核心功能分区
1. 个人首页:展示医师资质、用户评分、当日可接单时段、实时预估当日收入;
2. Jobs工单市场:列表/地图双浏览模式,可按距离、薪资、紧急程度筛选根管、洁牙、正畸类工单;
3. 日历排班模块:可视化展示已承接订单时段,区分急诊加急与常规诊疗项目;
4. 钱包财务页面:环形收入进度图表,统计单均出诊收入、最佳营收日期、月度业绩趋势,直观追踪收入目标完成进度。

截屏2026-06-30 11.12.23.png

 模块3:Admin平台总控后台,分为两大核心面板
1. 全局业务数据Dashboard:汇总平台总订单、活跃诊所、注册医师、整体营收,多层环形饼图拆分营收构成(诊所分成、医师佣金、平台手续费、退款调整),支持按年/周/月筛选、一键导出经营报表;
2. 系统性能Performance监控页:实时展示服务器响应速度、CPU占用、缓存命中率、在线服务稳定时长,配套独立错误日志控制台,同步同步失败、字段缺失等系统报错预警,运维人员可快速定位故障根源。

 

四、视觉设计体系:柔和轻量化医疗商务风格
 1. 色彩系统
- 基底底色:纯白低饱和浅灰基底,长时间办公无视觉压迫,适配医疗行业温和严谨调性;
- 主视觉品牌色:渐变紫蓝,用于核心图表、操作按钮、高亮关键数据,代表盈利、活跃正向状态;
- 辅助功能色:浅绿标识完成/稳定状态、浅紫区分工单卡片层级、浅灰代表闲置次要数据,色彩语义统一无冲突。

截屏2026-06-30 11.11.30.png

 2. 组件与可视化规范
1. 轻量化圆角卡片:低柔和阴影、纤细分割线,模块分区干净清爽,摆脱传统工业后台厚重压抑的视觉感受;
2. 分层数据图表:柱状图展示时间维度趋势、环形进度条展示工时利用率、环形饼图拆分营收占比,图表样式统一简约,无多余装饰元素;
3. 医师信息卡片:真人头像搭配专科资质标签,直观区分正畸、牙周、全科牙医,快速匹配对应诊疗工单。

3. 文字层级规范
全平台统一无衬线字体,三层清晰信息层级:超大粗体核心营收数字→模块标题文字→辅助说明小字,电脑大屏、手机移动端均可快速抓取关键经营指标。

截屏2026-06-30 11.11.41.png

 五、产品商业与用户落地价值
1. 供需匹配效率提升:线上工单智能推荐机制,省去诊所与医师线下反复电话沟通,人力调度效率提升60%;
2. 财务对账轻量化:全链路营收自动统计,分层自动拆分各方分成,大幅减少人工记账、核对账单的时间;
3. 全角色数字化隔离管理:医师、诊所、平台三方拥有独立可视化操作面板,业务边界清晰,互不干扰;
4. 平台运维可视化管控:业务经营数据与服务器性能双维度监控,业务故障、服务器异常提前预警,降低运维人力成本;
5. 低学习门槛柔和界面:轻量化浅色系设计,无数字化操作基础的医护、诊所管理者均可快速上手操作。

 

图片来自Behance

 

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

 

image.png

《设计的 125 条通用法则》深度解读(五)|前十大核心法则 UI 落地解析|兰亭妙微

涛涛 交互设计及用户体验

威廉・立德威尔《设计的 125 条通用法则》是覆盖平面、UI、交互的经典理论工具书。过去很多设计师做界面全凭经验,而这套法则把零散设计思路整理成标准化理论框架,让设计输出稳定可控。本文结合移动端 UI 实战,拆解书中前十大高频核心法则,搭配主流 App 真实案例,方便设计师直接落地应用。

跳出同质化:8 类极具巧思的创新 UI 设计案例解析|兰亭妙微设计分享

涛涛 移动端UI设计文章及欣赏

当下移动端 UI 设计体系日趋成熟,各大 App 界面组件、布局框架高度趋同,很难形成独特记忆点。兰亭妙微团队结合多年商业 UI 落地项目,整理 8 个落地性极强的创新设计思路,从卡片、导航、交互、视觉细节多维度拆解差异化设计手法,为设计师提供可复用的创新参考。

日历

链接

个人资料

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

存档