首页

兰亭妙微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、数据可视化界面设计中。文中案例仅作设计演示,不用于商业用途,欢迎同行交流补充设计思路。

超全面!写给UI设计师的滑块组件设计指南

之晨 设计资源

 

 

滑块 (Slider/滑动选择器) 这种随处可见的输入控件,其实藏着很多设计细节。滑块靠拖动游标就能实现调节数值,实时给出视觉反馈,不管是调音量、改亮度,还是设置参数范围,都少不了它的身影。

image.png

一、滑块构成

一个标准的滑块组件,核心包括四部分元素:

  1. 数值提示
  2. 已调节区域
  3. 调节游标
  4. 数值区间
  5. 未调节区域。

这几部分各司其职,组合在一起才能让用户用得顺手。

二、滑块类型

在Material Design的设计规范中,定义了四种常用的水平滑块,每一种都有自己的适用场景:连续滑块、离散滑块、居中滑块、范围选择滑块。

image.png1. 连续滑块

image.png

这种滑块最常见,游标能在轨道上自由滑动,停在任意位置都能对应一个精准数值,没有任何限制。比如我们平时调手机音量,用的就是典型的连续滑块。

2. 离散滑块

image.png

它和连续滑块最大的区别,就是拖动时游标会自动“卡点”到预设的区间刻度上。简单说就是不能选任意值,只能在固定的数值区间里切换,适合那些需要标准化参数的场景。

3. 居中滑块

image.png

这种滑块的初始值默认在轨道正中间,往左拖是减小数值甚至调到负数,往右拖则是增大数值。像一些需要双向调节的场景,比如色彩的冷暖调整、音频的音调调节,用它就很合适。

4. 范围选择滑块

image.png

有两个游标,分别用来设定数值范围的最小值和最大值。比如设置价格区间、筛选日期范围时,用这种滑块就能一次性搞定,不用反复输入。

三、滑块设计不踩坑

看似简单的滑块,想要做得好用,这几点一定要考虑到:

1. 效果实时反馈

image.png

滑块的调节是即时生效的,用户拖动的时候,得能一眼看到数值变化带来的直观效果。比如调亮度时,屏幕明暗要跟着游标移动同步变化,不然用户根本不知道自己调对了没。

2. 轨道逻辑清晰

image.png

轨道是用来显示数值范围的,需要分成“已调节轨道”和“未调节轨道”两部分。这里要注意语言阅读习惯:咱们常用的从左到右阅读模式下,数值得从左到右递增;如果是面向阿拉伯语这类从右到左阅读的用户,数值顺序就得反过来。

3. 限制刻度数量

image.png

滑块上的刻度是用来标记数值的,游标还会自动吸附到最近的刻度值上。但设计时千万别添加过多的刻度值,不然轨道上密密麻麻的,不仅看着乱,用户调节时也很难精准定位到想要的数值。

4. 控制数值显示

image.png

在设计范围选择滑块时,一次最好只显示一个关键数值——要么是当前选中的区间,要么是用户正在拖动的那个游标对应的数值,显示太多反而会让用户混淆。

5. 使用文本框

image.png

除了直接显示数值标签,还可以在滑块外面加个独立的文本输入框,并且让输入框的数值和滑块联动,用户既可以拖动调节,也能手动输入精准的数值。

image.png

另外,用图标或文字的形式代替刻度值,也是个提升界面颜值和易用性的好办法。

四、滑块设计

案例参考最后给大家分享几个有意思的滑块设计,平时做组件的时候可以参考:

1. 经典亮度滑块

image.png

典型的连续滑块,轨道比较细、游标是经典的圆形,左右两侧还配了亮度图标,不用看数值也能秒懂当前亮度档位。

2. 尺子形式滑块

image.png

这种滑块不是传统的样式,而是做成了尺子的形状。尺子上的刻度代替了传统的数值指示器,0.1的增量清晰可见,数值直观又有趣。

3. 情绪表达滑块

image.png

虽然也是滑块的形态,但它靠颜色来表达用户情绪。每个滑块单元都是离散设计,带有刻度区间,用户滑动选择时,能通过色彩快速对应自己的情绪状态。

4. 游标固定滑块

image.png

游标固定在轨道正中间,拖动时是轨道左右移动,选中的数值显示在右侧,用户一眼就能确认当前数值,这种交互方式很新颖。

5. 速度调节滑块

image.png

用五个刻度来划分速度区间,每个刻度上方都标注了具体数值。虽然刻度间的实际数值间隔不一样,但清晰的标注让用户能精准把控速度档位。最后滑块组件虽然看着简单,但要做到真正好用,需要将形式的新颖、交互的创新、元素的搭配等细节都考虑到,于细节处见精微。

 

转载自优设网

 

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

 

image.png

兰亭妙微设计分享: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

存档