一、配置密码显示 / 隐藏切换功能

二、设置规范无障碍专属标签

三、前置展示密码设置规则

1. Adobe：采用复选框清单式校验，满足一条规则对应条目自动变绿、打上勾选标记，实时可视化校验；
2. Dropbox：以静态列表完整罗列密码要求，引导用户逐条对照输入。

四、实时密码强度可视化校验

1. 色彩进度条：以红（弱）→黄（中）→绿（强）渐变配色，直观区分密码安全等级；
2. 规则清单逐项核验：逐条标注大小写字母、数字、特殊字符、位数等要求，完成即标记，清晰明了。

五、预留清晰的忘记密码找回路径

密码框核心设计原则总结

1. 显隐切换：提升密码输入准确率，精简表单流程；
2. 规范标签：适配无障碍访问，避免用户认知困惑；
3. 预显规则：前置告知要求，规避重复操作失误；
4. 实时校验：可视化强度反馈，提升输入设置效率；
5. 便捷找回：完善账号恢复路径，降低用户使用门槛。

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

一、背景概述

插图的使用已有 10,000 年的历史。最早的图画之一是西班牙发现的手部轮廓图，距今已有 66,000 多年历史。随着互联网的出现，大约在 1997 年，插图的使用逐渐增多，谷歌的每日涂鸦和红牛能量饮料就是其中的典型例子，包括国内的百度，它们都在将具有特殊意义的插图融入产品中。

在过去插图通常使用铅笔、粉笔、钢笔、蚀刻画和颜料完成，但现在经过技术的发展我们可以通过更智能的方式来呈现插图；

一个好的插图还可以更好地生动地传达信息，我们如何确定最合适的插图风格？插图怎么才能体现品牌感？怎么能引起用户群体的共鸣？对于内容，哪种类型的插图最能强调产品特性，本篇内容分享了相关的案例，并解析如何针对不同用户群体确定产品插图风格；

1、当代产品设计中插图的战略价值

品牌差异化

以互联网产品为例，现在市场上随便拿出来个产品都会有一堆竞品出现，那如何在众多产品中体现自己产品的特性呢，除了功能层的差距外，无非就是“看和用”这个方面了，我们以看为例，像Ant Design的「科技温度」风格、Discord的「夜光贴纸」风格，都展现了产品的个性化，甚至说从插图风格就能get到产品是做什么行业的；

信息传达

当情况挺复杂的时候，要是全靠大段大段的文字去讲清楚，用户可能得费不少劲才能弄明白。这时候，要是有插图来帮忙，往往就能直接把意思给展现出来，让用户能更快地抓住信息的核心意思，例如医疗类APP用插图替代专业术语；

情感化连接量化

好的插图不仅起到美化视觉信息传达的作用，也能够对业务起到数据方面的提升，例如多邻国的插图表情，他们在2023年的调研数据上显示ip系统提升用户学习时长28%，Headspace冥想插图动效减少用户焦虑指数；

二、如何设计出好的插图

2.1 受众群体

不同的群体对于认知和喜好不同，首先就要明确是给谁做，每个产品都有自己用户画像，拿到用户画像去进行拆解设计目标，例如年龄在18-25岁，这就决定了设计风格偏年轻化，女性用户群体占比70%，决定了色系不能使用过多的冷色系（产品主色如果不是按照群体来的，那当我没说），在例如是一线还是二线三线，职业分布如何，这些拆解出来后，方向不就确定了吗，无非就是通过受众群体做减法，减少无用的脑暴；

2.2 设计原则体系

搭建插图系统和设计规范流程是一致的，都需要在最基础的设计原则框架下完成，否则就脱离了基本的体验；

信息传达的精准性

• 视觉降噪原则：构图简单，突出核心表达信息，避免过渡装饰干扰用户

• 语言符号化：使用行业共识的符号做为基础形象进行设计，降低认知成本以及适配国际化，例如网络中断使用wifi、球形网络；

情感共鸣的层次化

• 场景关联：除了基础的插图，在特定场景下的插图也要预判用户在当前场景下的情绪变化，通过插图来提升用户情绪峰值，例如社区产品中，用户成功发布一个帖子，给用户反馈的插图应当是开心、活跃让用户感受到产品的情绪价值；

• 动态情感曲线：在新手引导中通过每一步的交互流程来变化插图表达的情绪，例如开始引导时突出表达信息，在一个流程结束时强化氛围鼓励用户，用户情绪进度期待→奋斗→高昂，促进用户进一步操作；

品牌基因渗透

• 视觉原子构建：提取品牌色彩、标志性符号，形成基础的插图基因库；

• 品牌故事元素贯穿全场景，例如茶颜悦色将古风和现代插图风格结合，创造了独特的品牌调性，并且每个插图场景都在传达品牌故事；

适配原则

• 多端一致性：能够三端自适应适配尺寸，在小尺寸屏幕下插图的识别性是否会出现问题；

• 扩展性：在各大节日时插图是否能够结合当前节日扩展，例如春节时插图是否可以添加灯笼烟花相关元素；

2.3 风格系统构建

风格定位

插图风格系统是品牌视觉语言的延伸，需通过基因提炼-规则制定-动态迭代的三层框架实现规模化应用；提到喜茶能想到的是描边黑白风格插图，茶颜悦色就能想到古风，而提到飞书我们就能想到极简具有规则的形状插图，这就是通过插图风格提升用户对产品认知；

风格系统四个纬度

前面每一步的分析都是为执行辅助

三、插图应用场景

3.1 核心功能

通过视觉表达降低用户认知负荷，引导用户关注或操作核心功能；

新手引导

这个比较常见，很多产品在新功能或者复杂功能的时候会建立新手引导的流程，这时候使用单一的箭头引导会比较单一，就需要添加一些插图做为情绪化引导，提升用户趣味性；

状态可视化

在一些上传、加载的场景其实也可以融入插图来缓冲用户焦虑，现在大多产品都是使用比较简单的加载方式，实际上可以将品牌插图融入进去；

3.2 品牌价值传达层

将品牌DNA转化为可感知的视觉叙事，建立情感化认知锚点

超级符号ip渗透

在登录页/加载页/404页等全链路重复品牌标志性元素，提升用户对品牌的记忆；

价值观场景化表达

用插图隐喻传递品牌主张（如环保产品用树木生长插图替代口号式文案）

节日仪式感表达

在特殊节日叠加一些装饰元素，提升仪式感，上面有提到融入节日元素；

3.3 用户体验优化层

解决体验断点，通过情感化设计提升用户容忍度与愉悦感

负向场景安抚设计

出现bug的页面通过插图传递「可控感」，用修复工具插图+明确解决步骤缓解用户焦虑；

降低学习成本

在新功能上线时或者改版功能时，用插图对比新旧流程差异，这个主要在b端场景使用会比较多

情感峰值制造

在用户完成某项任务或完成某个阶段流程时给用户反馈出高成就感的插图，例如keep的成就解锁，学习软件种每日学习打卡成功等；

四、案例分析

分析三个不同行业的插图，来看看他们的插图差异化

4.1 金融类APP的信任感构建

首先看看金融类产品如何在专业与用户情感传递之间进行平衡

符号系统化

颜色方面围绕稳重复合色（深蓝+浅金），避免高饱和色彩带来的廉价感；

场景克制表达

仅在低风险场景（如教育科普页）使用轻度拟人化角色，而核心功能涉及到数据方面的则使用抽象的数据的可视化插图；

文化兼容

在出海的一些国家涉及到文化冲突，例如在中东区域就删除了动物形象用植物和建筑符号代替；

4.2 社交产品的年轻化表达

小红书通过潮流涂鸦的风格建立z时代圈层共鸣，为用户提供固定的模板，降低用户创作成本，提升产品的品牌主张，同时能够营造出社区统一的氛围感。

视觉特点

以线稿为主，为用户提供自由创意的涂鸦玩法。

五、未来趋势

实时渲染的个性化插图

动态生成：根据实时数据改变插图元素，如不同的天气、心率的高低、运动的步数等等；

天气软件中可以根据不同的天气变化背景，当然这个目前已经广泛应用了，但未来也是不变的一个趋势；

AI效率性插图

可通过ai流程来制作统一的插图风格进行应用，并且风格的局限性相较于之前也更灵活了，在前几年只能通过mj喂图抽卡来生成统一的插图，并且时间成本非常高；

在前两年只能通过训练大模型的方式训练具有产品特点的模型，并且训练周期非常长，配置要求高，随着现在的技术更新，线上出现了很多训练模型的方式，不在依赖本地配置，通过线上训练的lora模型，内存比较小也方便调用，时间上相对之前大大提高；

一、全文核心速览

1. 开关（Switch）：单个独立功能开 / 关二元切换，操作立即生效，只适配单独设置项。
2. 复选框（Checkbox）：一组关联选项支持多选、可全不选，拥有全选、半选交互状态。
3. 单选按钮（Radio）：一组选项互斥唯一选择，有且只能选一个，选新自动取消旧选项。
4. 选型原则：先看使用场景、再定语义逻辑，不凭颜值随意替换组件。

二、开关（Switch）：单功能即时开 / 关

1. 核心组成结构

• 轨道（背景）：手柄滑动路径，用色彩区分开启 / 关闭状态，直观展示激活与否；
• 手柄：可点击、拖动的交互主体，可搭配对勾、圆圈等极简辅助图标；
• 辅助图标（可选）：强化状态识别，仅用二元对立、表意清晰的图标。

2. 设计与交互规范

1. 辅助图标禁用模糊无正反属性的样式（如月亮、编辑图标），避免用户无法识别状态；
2. 交互逻辑：点击切换立即生效，无需额外确认，可通过手柄微动效增加操作反馈；
3. 文案搭配：必须外置功能标签，文字不内嵌在开关内，精简表述、降低用户识别成本。

3. 适用场景

三、复选框（Checkbox）：关联选项自由多选

1. 核心组成结构

2. 设计与交互规范

1. 长列表可增设全选父复选框，遵循行业标准交互：
   • 父框全选 → 所有子项自动勾选；
   • 父框取消 → 所有子项自动取消；
   • 子项部分勾选 → 父框显示半选状态，点击半选父框可一键全选。
    
2. 一组关联多选项，优先用复选框，不堆砌独立开关：既体现选项关联性，又节省页面空间、排版更整洁。

3. 适用场景

四、单选按钮（Radio Button）：组内互斥唯一单选

1. 核心组成结构

2. 设计与交互规范

1. 坚守互斥单选逻辑，禁止修改为多选模式，不做布局重叠，避免颠覆用户固有认知；
2. 选项过多、页面空间有限时，可用下拉菜单替代；但选项较少时优先单选按钮，无需展开、一眼看全，交互成本更低；
3. 排版优先垂直排列，不建议水平排布：图标与标签对应更清晰、可读性更强，适配响应式布局更稳定，避免页面拥挤混乱。

3. 适用场景

五、三者快速选型对照表

六、高频误区答疑（设计师必避坑）

误区 1：二元切换，能用单选按钮代替开关吗？

误区 2：把单选按钮改成多选，替代复选框？

误区 3：多选场景，能用一堆开关代替复选框吗？

1. 语义差异：开关代表独立无关联功能，复选框代表同组关联选项，用开关表意模糊；
2. 视觉与效率：开关占用空间更大，列表排版杂乱，复选框更精简整洁、交互效率更高；
3. 场景适配：服务条款、权限勾选等场景，复选框的文案搭配更贴合用户选择意图。

七、总结

一、Veri 健康监测 App

• 亮点：极简交互设计，用户可通过摄像头同步传感器数据，一键开启追踪；提醒模块用渐变光晕效果突出设置，视觉与功能高度统一。
• 参考价值：医疗健康类 App 如何平衡专业数据与用户体验，这套设计给出了优秀示范，适合健康监测、数据追踪类产品参考。

二、加密货币交易平台界面

1. 登录与交易后台：深紫底色搭配霓虹蓝光效，登录页功能分区清晰，交易界面 K 线图、订单数据排版规整，色彩对比鲜明。
2. 资产仪表盘：采用霓虹粉绿配色，卡片式布局呈现质押收益、资产分布、交易数据，数据可视化直观易懂，适配高频交易场景。

参考价值：金融科技类产品的深色模式设计、数据呈现方式与交互逻辑，都有很高的借鉴意义。

三、ADSPACE 营销 agency 官网

• 参考价值：企业官网如何通过色彩与排版传递品牌调性，这套设计为服务类品牌官网提供了清晰的参考方向。

 

视觉设计：科技与驾驶氛围的融合

信息架构：驾驶场景优先的高效布局

交互体验：安全优先的轻量化操作

设计总结

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

一、什么是幽灵按钮

二、幽灵按钮的核心优势

1. 界面轻量化，降低视觉负担

   

   工具栏、导航栏密集排布图标 / 文字时，幽灵按钮无冗余底色与边框，保持界面简洁清爽，避免视觉杂乱。
2. 扩大操作热区，提升交互准确率

   

    
   解决纯文字 / 图标点击区域过小、易误触的问题，设计阶段明确热区范围，前端可直接落地，适配触摸屏操作习惯。
3. 清晰视觉反馈，强化操作感知

   

    
   悬停 / 按下时边框显现，直观展示实际可点击范围，比单纯变色更醒目，让用户操作更有安全感。

三、幽灵按钮的落地痛点

1. 设计成本与感知不对等

   

   视觉效果极简，但需精细化调整边框、间距，付出双倍设计成本，易被误解为 “工作量不足”。
2. 存量产品改造成本高
    
   替换现有图标 / 文字链接为幽灵按钮，需重构层级、间距结构，易影响页面其他区域，不适合大幅改动框架。
3. 设计精度要求极高
    
   需单独配置按钮边框，精准把控内边距、组件间距，打破传统对称、对齐的设计逻辑，调试难度大。

四、幽灵按钮的核心设计难点

1. 视觉对称≠实际边距对称

   

    
   文字 + 图标组合的按钮，若默认边距完全对称，图标侧会显空旷；需微调边距，让视觉平衡优先于数值对称。
2. 视觉对齐≠实际位置对齐

   

    
   文字与图标看似对齐，悬停显示边框后会出现偏移；需刻意调整位置，保证默认态整洁、交互态规整。

五、应用现状与大厂案例

兰亭妙微UI设计公司，本次分享主要的工具也都是 AI 相关，有工业和产品 3D 设计 AI 平台 3flow，语音转社交媒体图片的 AI APP，面向 AI 创作者和开发者的在线社区 B150，专业的 AI 图像生成与编辑平台 APImage，Win95 风格 AI 创作者交流社区，以及荣获黑客松大奖的 AI 编程配置的超强 Skill。

一、工业和产品 3D 设计 AI 平台 3flow

链接：https://3flow-ai.com/

3Flow AI 是一个面向产品设计的 AI 工具，可以在浏览器里直接使用。它的核心能力是把「想法」快速变成设计图，甚至直接生成 3D 模型，帮助设计师从灵感到初步原型的过程大幅提速。相比传统设计软件，它更偏向创意阶段，让你几秒钟就能看到一个产品雏形。

在功能方面，3Flow AI 是非常突出的，生成速度非常快（几秒内出图）、支持从 2D 图像一键转成 3D 模型、可以对局部设计做修改（比如换材质、颜色），以及自动生成多种设计变体用于对比。整体上，它把「画图 + 建模 + 修改」的流程整合在一个工具里，减少反复切换软件的成本。

3Flow AI 彻底降低了 3D 和工业设计的门槛，你不需要会复杂的 CAD 或 3D 建模，也能快速把想法变成可视化甚至可打印的模型。对于做产品、内容创作或创业的用户来说，它可以显著缩短从创意到验证的时间，让「想一个东西并做出来」变得更容易、更便宜。

二、语音转社交媒体图片的 AI APP

链接：https://thereframe.app/en

Reframe 能将你的语音笔记转换成专业的 Instagram / LinkedIn / Facebook / X 上展示的轮播图，当然这可以发到微博/小红书/小绿书/朋友圈。你只需说出你的想法——AI 会自动构建框架、设计每个幻灯片，并保留你真实的语气。无需任何设计技能。

简单来说，Reframe 是一款专为创作者设计的 AI 社交媒体排版应用，它的核心理念是将用户的「语音」直接转化为具有专业设计感的轮播图和文字贴文，帮助创作者在没有专业团队和设计师的情况下快速制作内容。

Reframe 核心优势是「语音转图文」与「对话式编辑」。你只需录制几十秒的语音表达想法，内置 AI 就会自动编写出高吸引力的文案，并生成带排版的轮播图草稿。你可以通过与 AI 聊天来微调文字内容，还能自由套用精美的预设模板、修改字体和颜色，最后支持一键导出为图片或 PDF。

Reframe 极大降低了内容创作的门槛与时间成本，无论是在通勤路上还是灵光一现时，只需动动嘴就能把零碎的灵感瞬间变成高质量的社交传播素材。它完美解救了不擅长写文案和做排版的新手，让每个人都能轻松像专业博主一样高效产出爆款图文，提升个人影响力。

三、面向 AI 创作者和开发者的在线社区

链接：https://b150.ai/

B150 是一款专为 AI 开发者、创作者和创业者打造的「专业社交网络」与社区平台。它致力于成为那些利用 AI 技术进行编程、设计、影视制作、游戏开发等领域的「实干家」们的聚集地，帮助他们将大胆的想法转化为真实落地的项目。

B150 提供了以项目为驱动的在线社交体验，AI 创作者不仅可以在信息流中展示自己的作品、获取早期种子用户和真实的反馈，还能在这里寻找志同道合的合作者。此外，它集成了 AI 工具及资源探索、AI 人才与工作机会招聘看板，以及专属的工具折扣市场，全方位覆盖从产品构思到发布落地的各种需求。

对于普通的 AI 爱好者和创作者而言，B150 提供了一个高浓度的专业学习和互助圈层。它打破了传统社交媒体的杂音，让你能专注于看别人是如何利用最新的 AI 工具来解决实际问题的。不仅能帮你少走弯路，还能让你在发布自己的「副业」或项目时，快速找到第一批支持者，真正将「想法」变成「事业」。

四、专业的 AI 图像生成与编辑平台 APImage

链接：https://apimage.org/

APImage 是一款专业的 AI 图像生成与编辑平台，专为电商团队、企业和创作者打造。它能够将简单的文字提示迅速转化为高质量、可直接用于商业生产的视觉素材，如产品展示图、生活方式插图或品牌创意海报，只需几秒钟即可完成。

APImage 的核心优势在于强大的「视觉一致性控制」及全面的编辑工具，不仅具备文本生图、一键抠图和局部重绘功能，最亮眼的是允许用户建立专属资产库。这意味着您可以在不同场景中反复生成拥有完全相同人物面孔、产品细节或特定背景的图片。此外，它还支持 API 接入和各类自动化工作流整合。

对普通用户、电商小卖家和自媒体人而言，APImage 彻底打破了专业摄影和设计的门槛。无需租借影棚或聘请专业模特，仅靠打字就能稳定地产出成套的、风格统一的高端商业大片，并且它就是为这样的场景而创造的。APImage 解决了传统 AI 绘图「每次结果都随机、难以连贯」的痛点，让个人也能轻松拥有专业级的视觉生产力。

五、Win95 风格 AI 创作者交流社区

链接：https://www.ideaboard95.com/

IdeaBoard95 是一款主打复古风格的公开创意灵感看板网站。它的界面被精心设计成了经典的 Windows 95 操作系统风格，为独立开发者、创作者和普通用户提供了一个展示产品想法、寻找灵感以及进行社区交流的公共空间。

IdeaBoard95 将复古视觉与极简交互结合，用户可以使用 Google 账号快捷登录，在看板上发布有关 App、网站或 AI 的产品点子，也可以为别人的好主意点赞投票。尽管外表怀旧，但它底层具备优秀的现代用户体验，在电脑和手机端都能清晰浏览，并支持通过标签快速筛选感兴趣的内容。

IdeaBoard95 提供了一个轻量化、充满趣味的「想法展示区」，它避免了零散的灵感在复杂的笔记工具中吃灰，并用这种没有压力的怀旧方式降低了分享的门槛。这让每个人都能轻松地把脑海中的奇思妙想贴在「公屏」上，纯粹地碰撞思维火花并验证点子的可行性。

六、荣获黑客松大奖的 AI 编程配置 Skill

链接：https://github.com/affaan-m/everything-claude-code

Everything Claude Code 是由 Anthropic 黑客松获胜者开源的一款极具人气的 AI 编程配置库。它并非独立软件，而是专为 Claude Code、Cursor 等 AI 智能体打造的「性能增强与工具扩展包」。

这个 Skill 提供了一套开箱即用的精密架构，内置了大量专家级的 Agents、按需加载的 Skills 以及自动化规则。它全面支持多语言环境，并具备记忆持久化、持续学习和安全审查等高级功能。这些配置能有效优化大模型的 Token 消耗，让 AI 像资深工程师一样精准拆解并自主执行复杂任务。

哪怕你是纯粹的新手小白，你也可以轻松使用它，因为它彻底免去了耗时费力的「AI 调教」过程。只需简单引入这套经过实战检验的配置，就能让原本基础的 AI 助手瞬间掌握数百种专业开发技能。它极大地降低了高效开发的门槛，让没有深厚技术积累的人，也能以几倍的速度搭建出高质量的应用程序。

转载：优设

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

兰亭妙微UI设计公司与大家一起学习，人类的美术创作经历了从纸面的二维走向三维、从“模仿自然”到遵从主观意识自由表达的历程，人机界面设计也经历了拟物、扁平以及更多的设计风格的迭代演化。是什么推动着艺术家和设计师们不断探索规则、学习规则，进而挑战规则？在拆解手脚架的过程中，我们将愈加贴近创作的本质。

一、全文速览图

二、设计资讯

1. 在 Figma 社区推出 Figma Weave 工作流模板

Figma 社区最新推出的资源类型——Figma Weave 工作流——现已上线。Figma Weave 让您能够在可视化画布上构建可重复、可扩展的生成式 AI 工作流。现在，您可以直接在 Figma 社区中探索和复制 Figma Weave 团队构建的工作流。无论您是想生成新图像、将图像转换为视频，还是将品牌指南扩展为插图集，Figma Weave 都能轻松实现。

网址： https://app.weavy.ai/

网址： https://www.figma.com/release-notes/

三、产品推荐

1. 在线矢量路径工具

在线的轻量级矢量编辑器，作者希望像 Figma 向量网络那种流畅的操作体验，同时又想拥有 Blender 修改器的“魔法”。最终的成果是一个基于 GPU 加速、使用 Go + WASM 构建的图标与字形设计工作室，并且完全运行在浏览器中。

它有一些很酷的功能，比如形状构建器、动态镜像、干净的 SVG 导入导出、等距绘图投影等等，还有很多其他特性。整体设计比较简洁克制，但用起来很顺手。

网址： https://iso.alasdairmonk.com/

网址： https://x.com/almonk/status/2042127913173057659

2. Liaison - AI 编程定位、网页样式编辑与批注

在任意网页上实现类似 Figma 的设计体验，调整元素样式、添加评论，并导出结构化 Prompt 给 AI 开发与协作。

Liaison 是一款面向设计师、产品经理、前端工程师和高频 AI 用户的浏览器插件。它让你可以直接在真实网页上完成样式调整、界面批注和实现反馈，不再依赖截图标注、文档补充和反复描述。你可以像在设计工具里一样选中页面元素，修改尺寸、间距、字体、颜色、圆角、描边、投影等属性，同时把评论和修改统一整理成结构化结果，方便交给开发或 AI 继续实现。

浏览器插件： https://chromewebstore.google.com/detail/liaison-ai-%E7%BC%96%E7%A8%8B%E5%AE%9A%E4%BD%8D%E3%80%81%E7%BD%91%E9%A1%B5%E6%A0%B7%E5%BC%8F%E7%BC%96%E8%BE%91%E4%B8%8E%E6%89%B9%E6%B3%A8/keeeahbnkkbengbjmmblmpgbccjeoebf

使用介绍： https://gwrdluzl9j9.feishu.cn/wiki/JWRjwF12ZiSQSrkjHbMcMwfbnPu

3. 免费开源的录屏工具

最贵的缩放录屏软件 Screen Studio，核心功能被 Recordly 复刻，完全免费开源！ 同时支持 Mac/Windows/Linux。 测试了下，比 Screen Studio 还轻便顺滑

网址： https://recordly.dev/

网址： https://github.com/webadderall/Recordly

4. 开源图标库

MingCute 是一套简约精致的开源图标库。无论您是设计师还是开发者，它都非常适合用于 Web 和移动端项目，同时提供了 Figma 插件能够更便捷的在设计过程中使用，以及动画图标库、UI 组件库、天气图标等不同场景的素材

网站： https://www.mingcute.com/

Figma 插件： https://www.figma.com/community/plugin/1306884809438005528/mingcute-icon

5. 图文混排的长文转小红书图片生成器

作者使用 vibe Coding 了一个支持 Markdown、图文混排的长文转小红书图片生成器，

1. 支持图文自由拖拽混排
2. 支持自动切分多图及一些主题风格化
3. 支持 Markdown 长文

网址： https://reflow.fehey.com/

6. 标尺小工具

一个微型工具，用于在 localhost 上测量间距并对齐您的 UI

网址： https://x.com/Ibelick/status/2042508446671499405

体验地址： https://mesurer.ibelick.com/

四、设计素材

1. 西文免费开源字体合集

面向 UI/UX 设计师与开发者，Freefaces Gallery 是一个精选的免费开源字体合集，这意味着您可以在个人和商业项目中使用它们，而无需担心许可问题。

网址： https://www.freefaces.gallery/

网址： https://fontshare.com/

2. 100+个开源免费的 SVG 加载动画

你可以使用这些基于 SVG 的加载图标来直观地指示内容。 这些动画来自多种来源，均采用 MIT 许可证。因此，它们可以无限制地用于商业用途，且无需署名。

网址： https://magecdn.com/tools/svg-loaders

3. UI/UX 设计师 Vibe Coding 指南

作者根据自身经验整理了一份「面向 UI/UX 设计师 的 Vibe Coding 完整工作流指南」从用 AI 辅助开发到 可交付、可上线。

网址： https://vibecodingfang.netlify.app/#

五、随便看看

1. 设计欣赏

作者在 Figma 中 1 小时绘制的小组件，好玩的是发帖后有人回复了在线的地址，将组件实现为了可以使用的音乐播放器，在 AI 时代还是需要审美创造力的，可以通过链接体验

网址： https://x.com/AdityaSur11/status/2038881480898756695

网址： https://audio.snvshal.workers.dev/

2. 沉浸式阅读探索

作者为自己的博客增加了多种阅读状态，让视觉外观不止是浅色、深色，增加了树影、月色、下雨、下雪等多种自然状态，网站右上角可以切换体验

网址： https://theme-switch.pages.dev/

转载：优设

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

一、色彩基础核心概念

1. 色彩原理

• 物理原理：光照射物体后反射，对人眼产生刺激，形成色彩视觉。
• 生理原理：人眼与大脑对光的波长、色彩三属性做出的视觉反应。

2. 色彩三要素

1. 色相：颜色的本质类别，如红、黄、蓝，由光的波长决定。
2. 明度：色彩的明暗程度，可理解为颜色中加白 / 加黑的量，反射光越多明度越高。
3. 饱和度：色彩的鲜艳纯净度，纯色饱和度最高，混入灰 / 黑 / 白会降低饱和度。

   

3. 常用色彩模型

• RGB（光色模型）：加色混合，红、绿、蓝三原色叠加出白色，用于屏幕显示（手机、电脑、电视）。

  

• HSB/HSV：以色相、饱和度、明度定义颜色，设计师直观调色首选。
• HSL：与 HSB 类似，区别在于饱和度与明度的计算逻辑，更适配界面动态配色。

  

• CMYK（印刷模型）：减色混合，青、品、黄、黑四色叠加，用于纸质印刷。

  

• HEX（十六进制）：Web 设计专用色值，格式为#RRGGBB，精准定义 RGB 色彩。

二、定义色彩：必须掌握的关键要点

1. 色彩观：文化与场景的深层影响

• 文化习俗：中国红象征喜庆繁荣；伊斯兰文化中绿色代表生命。
• 历史符号：中国黄色代表皇权；古埃及白色用于祭祀。
• 自然关联：绿色绑定环保、自然；蓝色传递冷静、信任。
• 社会符号：彩虹色成为平权运动标识，是社会文化赋予色彩新意义。

2. 色彩偏好：人群差异规律

（1）年龄偏好

• 0-2 岁：偏爱高饱和亮色（红、黄、蓝）。
• 3-12 岁：喜欢明亮多彩色（橙、绿、紫），受动漫、游戏影响大。
• 青少年：追求潮流个性化，偏好流行色。
• 成年人：正式场景偏爱中性色（蓝、白、灰），私人场景更个性化。
• 老年人：接受柔和暖色（深蓝、棕、米色）。

（2）性别偏好

• 男性：倾向稳重明亮的冷色调（蓝、绿）。
• 女性：传统偏好红、粉，当代审美多元，蓝、紫也广受喜爱。

（3）地域偏好

• 中国：喜红、黄，寓意吉祥。
• 日本：偏爱淡雅柔和色（樱花粉、浅蓝）。
• 地中海：明亮高饱和色，适配阳光气候。
• 北欧：冷色调（浅蓝、灰、绿），贴合自然环境。
• 拉美：热烈明快色（红、黄、橙），契合热情文化。

3. 色彩心理语义

• 评价性：自然 / 粗俗、优雅 / 丑陋、喜欢 / 讨嫌。
• 活力性：温暖 / 寒冷、动态 / 静态、明亮 / 昏暗。
• 潜力性：男性化 / 女性化、坚硬 / 柔软、沉重 / 轻盈。

4. 色彩情感：用颜色传递情绪

• 冷色：冷静、理性、疏离。
• 暖色：热情、温暖、亲近。
• 高饱和：活力、张扬、醒目。
• 低饱和：高级、沉稳、柔和。

三、色彩驱动转化：实战成功案例

1. Heinz 番茄酱：包装从红色改为绿色（联动《怪物史莱克》），销量暴涨60%，靠色彩绑定情感共鸣。

   

2. HubSpot：红色按钮转化率比绿色高21%，高对比度色彩强化视觉吸引力。

   

3. 电商平台：橙红色 “立即购买” 按钮，比白绿按钮转化率提升5%，暖色激发行动欲。

四、品牌色彩升级：为什么改？怎么改？

1. 色彩升级的核心原因

• 业务战略更新，品牌理念迭代。
• 产品定位、目标用户群体变化。
• 用户审美偏好升级，体验需要优化。

2. 色彩升级落地方法

（1）前期分析

• 追踪趋势：参考潘通年度色、设计平台（Behance/Dribbble）流行色。
• 竞品调研：分析直接 / 间接竞品的色彩体系，找差异化。
• 自身诊断：梳理现有色彩问题，保留核心品牌色基因。

（2）理性色彩体系搭建

（3）应用落地规则

• 区分场景：基础色（品牌色 / 辅助色 / 状态色 / 灰阶）+ 风格化色（大促 / 日常）。
• 比例控制：遵循6:3:1黄金配色法则，控制用色数量，避免杂乱。
• 视觉合规：保证明度差异，遵循 WCAG 无障碍标准，兼顾色盲用户。

（4）科学验证手段

五、UI 设计中色彩的核心价值

1. 建立品牌认知：统一品牌色，强化识别；用色彩传递品牌调性（科技选蓝、健康选绿）。
2. 梳理视觉层级：用色彩区分功能区，对比色突出重点信息。
3. 提升可用性：保证文本与背景对比度，色彩统一不混淆。
4. 引导用户行为：高饱和色做行动按钮，固定色做状态反馈（绿成功、红警告）。
5. 兼顾无障碍：不只用颜色传递信息，搭配图标、文字，适配色盲用户。
6. 营造情感氛围：按产品属性选色（健身用橙绿、金融用蓝灰），适配季节与节日。
7. 尊重文化差异：全球化产品做本地化色彩适配，避免文化误解。

转载：优设

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