首页 文章 精选 留言 我的

精选列表

搜索[UX]，共660篇文章
优秀的个人博客,低调大师

传统色 × 现代和弦：专为 UI/UX 打造的国风配色 Skill

![中国传统色配色技能 Banner](https://developer.qcloudimg.com/http-save/yehe-3206217/25f2c386074705b0e69ec605b27e15b0.png) 做界面或视觉设计时，**要么配色充满辣眼的“塑料感”，要么看似好看却在实际 UI 中却丑的要哭**。 东方传统色本不该只是博物馆里的陈迹，它同样能优雅地融入现代数字界面。 今天为大家带来一款专为 AI Agent（支持 Antigravity、Claude Code、OpenCode 等）打造的色彩专家技能 —— [https://github.com/undsky/doudou-color-skill](https://github.com/undsky/doudou-color-skill) 让大模型瞬间化身为拥有深厚东方美学底蕴与现代工业落地经验的**色彩总监**！ --- ## 极简安装 在你的项目根目录下，终端一行命令快速挂载技能： ```bash npx skills add undsky/doudou-color-skill --yes ``` 安装完成后，直接在对话框中呼叫 AI 开始探索中国传统色的万千意象吧！ --- ## 零门槛实战：大白话对话，即刻出方案 使用本技能完全不需要死记硬背复杂的色彩学公式。在任何支持 Skill 的开发环境中，只要用日常大白话向 AI 描述你的场景与心境，它就能自动完成色彩诊断、数学计算与工程交付。 ### 场景 1：唯美炫丽视觉 · 大胆撞色吸睛 > **用户对话**： > _“我想做一组唯美炫丽的视觉海报，希望用强烈的撞色形式凸显色彩冲击力，帮我搭一套高级惊艳的国风撞色组合！”_ 技能自动调取色彩空间对冲算法，推导出**【青莲映日 · 孔雀销金】**色谱：以沉稳的墨紫为底衬（60%），贵气的青莲魏紫为主体（30%），搭配冷锋对撞的孔雀蓝与铜绿，最后施以藤黄矿物金（10%）画龙点睛。 ![青莲映日 · 孔雀销金](https://developer.qcloudimg.com/http-save/yehe-3206217/2fab81f6f78dfc1ced7ac6e9512e7f30.png) 👉 [点击在线查看交互 DEMO 1](https://htmlpreview.github.io/?https://github.com/undsky/doudou-color-skill/blob/master/demo/demo1.html) --- ### 场景 2：手里有个现代色，想找专属国风搭子 > **用户对话**： > _“我喜欢这个蓝色 #1976D2，再帮我搭几个好看的颜色做一套 Web 界面。”_ 无需手动换算，技能后台毫秒级运行 Delta-E 色距分析，将现代蓝精准映射为中国传统色**“天蓝”**，并自动推导出**【天水澄光色谱】**。同时给出按钮、卡片、侧边栏的具体应用，并严格通过文字与背景的无障碍阅读对比度校验： ![天水澄光色谱](https://developer.qcloudimg.com/http-save/yehe-3206217/627368ef70fb61dd78149d1960194c21.png) 👉 [点击在线查看交互 DEMO 2](https://htmlpreview.github.io/?https://github.com/undsky/doudou-color-skill/blob/master/demo/demo2.html) --- ### 场景 3：清新自然 · 明快轻盈治愈 > **用户对话**： > _“我想做一款清新明快、轻盈治愈的文创包装，想要那种通透又有呼吸感的效果，帮我搭配一组明朗干净的中国传统色！”_ 依托东方五行“水生木”的流动逻辑，技能生成了**【雨过天青 · 月白风清】**色谱：采用月白与嫩菊绿作留白底衬，霁青构筑骨架，葱绿与荷叶绿生发春意，秋葵黄暖调点睛，兼具宋瓷的雅致与现代包装的通透呼吸感。 ![雨过天青 · 月白风清](https://developer.qcloudimg.com/http-save/yehe-3206217/6cce99560c69842229825be7ff31505e.png) 👉 [点击在线查看交互 DEMO 3](https://htmlpreview.github.io/?https://github.com/undsky/doudou-color-skill/blob/master/demo/demo3.html) --- ## 为什么它比普通 AI 配色更专业？ 市面上普通的 AI 配色往往依赖模型的“幻觉抽卡”，给出的十六进制色号常常前后打架、毫无章法。而 `doudou-color` 的底层是一套严谨的**色彩科学计算与美学工程引擎**： | 核心维度 | 普通 AI 随意配色 | doudou-color 专家技能 | | :--------------- | :-------------------------------------- | :---------------------------------------------------------------------------------------------------- | | **色彩数据源** | 随机生成 HEX 色号，虚构不存在的“古风名” | 内置 **526 种权威传统色** 数据库，含雅称、拼音、HEX、RGB 及 CMYK 四色印刷标定 | | **匹配科学度** | 依靠文字联想，容易产生感知偏差 | 采用 **RGB → XYZ → CIE LAB** 空间转换及 **Delta-E (CIE76)** 最小色距算法，精准锚定正色 | | **美学和弦体系** | 仅靠感觉东拼西凑 | 深度融合 **东方五行相生相克**（青木、赤火、黄土、白金、黑水）与现代和弦（互补、邻近、三元、分裂互补） | | **工程落地性** | 只给色块图，无法直接用于开发 | 严格遵循 **60-30-10 黄金法则**，通过 **WCAG 2.1 AA/AAA 级无障碍检测**，一键输出 CSS Tokens | --- ## 工业级交付：开箱即用的设计令牌 每一个输出的配色方案，都包含标准化的**色彩矩阵表**与直接可粘贴进前端项目的 **CSS Design Tokens**： ```css :root { /* 60% 底衬基调：鱼肚白 */ --color-bg: #f7f4ed; --color-surface: #ffffff; /* 30% 品牌主体：霁青 */ --color-primary: #63bbd0; --color-secondary: #6e8b74; /* 10% 灵魂点睛：铁棕 */ --color-accent: #d85916; /* 排版正文字重：钢青（对比度达标） */ --color-text-main: #142334; --color-border: #e4dfd7; } ``` 告别反复吸色取色与调参返工，从设计灵感萌发到代码落地，一步到位。 --- ## 让东方美学在数字时代真正“活”过来 千百年前，文人墨客在汝窑开片中寻找“雨过天青”，在千里江山间铺展石青石绿，在紫禁回廊下凝望朱红琉璃。每一抹中国传统色背后，都沉淀着古人对天地四时、草木生息的细腻体悟与中式浪漫。 而在如今快节奏的数字开发与界面设计中，我们往往容易被千篇一律的现成配色库或冰冷的色值参数所局限。 **`doudou-color` 想做的，绝不仅是将古色编号简单数字化，而是搭建一座连接「东方意境之美」与「现代工业工程落地」的桥梁。** 它让传统色不再是停留在博物馆展柜里的静态标本，也不再只是浮于表面的“古风装饰”，而是真正化作可计算、可推导、经得起无障碍对比度考验、能直接注入前端项目的现代设计语言。 当你下一次在编辑器里面对空白画布、思考如何赋予产品独特的视觉气韵时，不妨唤醒这位国风色彩总监 —— **从一抹月白、一缕霁青开始，把中国色彩的诗意与沉静，写进属于你的现代作品里。**
2026-09-28
优秀的个人博客,低调大师

《UX最佳实践：提高用户体验影响力的艺术 》一第2章

第2章 用户体验制度化，成就企业Andreas Hauser，SAP公司 过去十年里，客户期望和软件开发流程都发生了改变。许多公司已经意识到有必要为客户提供更好的服务，特别是为最终用户，因为购买企业管理软件的决策者已经不再是首席信息官（chief information officer，CIO），而是该软件的直接使用部门。能否成功卖出产品，用户体验在其中的作用变得越发重要。但与此同时，许多公司的软件开发流程仍是一成不变。公司的技术部门依然脱离最终用户，凭自己的意愿对所开发产品的特性与功能进行取舍。几年前，SAP决定要开发一套开创性的商业解决方案，并希望能因此大幅度提高方案在中小型企业市场的渗透率。为了开发出这么一套推陈出新的解决方案，SAP从技术、流程和组织方面彻底地改变了此前开发应用程序的常规路数（见图2-1）。SAP从一开始就把用
2017-07-31
优秀的个人博客,低调大师

《UX最佳实践：提高用户体验影响力的艺术 》一2.4 项目阶段

2.4 项目阶段 项目要经历三个阶段，如图2-4所示。在第一个阶段，我们有意将开发流程与UCD流程分开进行。解决方案管理团队负责通过外部驱动研究方法定义目标解决方案，与此同时，开发团队并行开发技术平台。从一开始，ByDesign用户体验团队就同时协助解决方案管理团队和负责开发技术平台的UI架构团队。用户体验设计师与解决方案经理紧密合作，一起定义应用程序的目标设计。同时，我们也必须确保在UI架构中能完美地实现出UI模式，撰写详尽的UI规范文档，并在开发阶段协助框架开发人员。在第二阶段，我们得让已实现的解决方案更接近目标设计。等到了第三阶段，我们就开始转入精益开发（LEAN）与敏捷开发（agile development）模式。刚开始时，我们并没有明确地区分每个阶段。但随着经验的积累，情况逐渐清晰起来。每个阶段我们都学到许多技术、流程和
2017-07-31
优秀的个人博客,低调大师

《UX最佳实践：提高用户体验影响力的艺术 》一2.2 什么是SAP Business ByDesign

2.2 什么是SAP Business ByDesign SAP Business ByDesign是SAP新推出的按需配置的企业管理解决方案，主要面向中小型企业。这一解决方案因其存在很多创新之处，可以使其区别于市场上的其他产品。SAP Business ByDesign是全球最完备、最灵活、按需配置的企业管理解决方案。与其他按需配置的企业管理软件不同，SAP Business ByDesign（见图2-2）让企业端到端的每个流程都更透明且易于掌控，这其中包含了客户关系管理（CRM）、供应商关系管理（SRM）、供应链管理（SCM）、财务管理（FIN）和人力资源（HR）。此方案让企业能立即对自己的情况进行360度掌握，并且它简单易用，能快速配合商业需求的变动。 SAP Business ByDesign设计时考虑了以下几个关键原则： 坚
2017-07-31
优秀的个人博客,低调大师

【UX干货】空状态设计被长期低估：三种类型+四个要素，减少沉默流失

如果打开一款新注册的产品，你看到一片空白，没有任何提示，只有"暂无数据"四个字，接下来会怎么做呢？ 毫无疑问，大多数人不会去找客服，不会提交反馈，也不会等下次版本更新。他们会直接关掉页面，然后再也不回来。 这就是空状态设计被长期低估的根本原因：它的反面不是用户抱怨，而是用户沉默地离开。这类流失不会出现在客诉数据里，团队很难意识到问题的存在，所以它持续存在于大量产品里，悄悄吃掉新用户留存。 ![](https://developer.qcloudimg.com/http-save/audit-1341340/1daf16ec2b307f942a2914d6bfd8aa11.png) ## 一、空状态是什么？有多重要？ 空状态不是一个单一场景，至少有三种类型，每种类型的用户心理状态完全不同，对应的设计逻辑也不同。用同一套方案处理所有空状态，是最常见的设计失误之一。 **1、首次使用型：引导界面** 用户从来没有在这个页面里产生过数据。这是三种类型里最重要的一种，也是留存的真正胜负手。 这个时刻用户的心理是：好奇但不确定，"这个页面是干什么的，我该从哪里开始"。这不是一个需要道歉的时刻，产品是新的，没有数据很正常，而是一个主动引导的机会：告诉用户这个空间是做什么的，告诉他们当数据填进来之后会是什么样子，告诉他们第一步该怎么做。 **2、用户清空型：确认界面** 用户自己完成了所有任务、清空了收件箱、归档了全部记录。这个时候界面是空的，但这是用户主动造成的空，是一种成就，不是问题。 这种状态下最忌讳的设计是一张皱眉的插图加上"这里什么都没有"。用户刚刚做完了所有事，如果界面给他的反馈是"很遗憾，这里暂无内容"，情绪基调完全错了。正确的处理是确认这个成就，然后提示接下来可以做什么。 **3、加载失败型：恢复界面** 数据本来应该在这里，但因为网络问题、服务器错误或权限不足，没有加载出来。这种状态下用户的第一反应是担心：我的数据是不是丢了？产品是不是出问题了？ 空状态设计的首要任务是安抚，而不是引导：明确告诉用户数据是安全的、发生了什么、怎么重试。一张空白图表没有任何说明，比任何错误提示都更让用户焦虑。 要知道，空状态处理得好，用户知道接下来该做什么，就向"第一次成功使用"迈进了；处理得差，用户不知道从哪里开始，没有人会告诉他们，他们就关掉了。 还有个很重要的点是：用户在空状态页面上遇到困难时，不会主动求助，因为他们不觉得这是"遇到了问题"，只是觉得"这个产品好像也没什么用"。这种认知不会产生反馈，但会产生流失。 ## 二、一个合格的空状态该包含什么 知道了空状态的类型，下一步是搞清楚每个空状态应该包含什么。以下四个要素，缺一不可。 **1、视觉信号** 一个插图、一个图标，或者一个有意设计的视觉元素，首先要传递的信息是：这个界面是故意设计成这样的，不是 bug，不是加载失败。 视觉元素的情绪基调要和空状态类型匹配：首次使用型应该是友好和引导性的；用户清空型可以有庆祝感；加载失败型应该冷静、安抚。视觉不是装饰，它在用户看到文案之前先完成了情绪定调。 有一点需要注意：插图不能抢戏。一张占据大半屏幕的精美插图配上一行小字的行动按钮，结果是用户记住了插图，忘记了该做什么。视觉是辅助，行动才是主角。 **2、说清楚这个空间是做什么的** 标题不是"暂无数据"或者"这里什么都没有"，而是"这个空间是用来做什么的"。 对比一下： - 差："暂无报告" - 好："你的数据报告会在这里生成" 差的版本在描述缺少，好的版本在描述可能。读完好的版本，用户对这个功能有了基本认知，知道它的存在价值，也会对"填满之后"产生期待。 **3、一个清晰的行动** 有些空状态会给用户提供四个并排的按钮："创建新项目"、"导入数据"、"查看教程"、"联系支持"。四个选项平等摆在那里，结果是用户花时间做决定，然后放弃决定。 主行动按钮只能有一个，直接指向"填充这个页面"的第一步。如果真的有次要行动，比如查看教程，用更低视觉权重的链接形式放在旁边，不要和主按钮竞争注意力。 **4、退路** 对于首次使用型空状态，"从零开始创建"是门槛最高的第一步。很多用户面对空白的编辑器不知道从哪里开始，最终放弃。给用户一条退路：模板、示例数据，或者"看看别人是怎么做的"的参考路径。这不是降低产品定位，而是降低启动成本，让用户先通过模板体验到产品有数据时的样子，再决定要不要自己来。 这四个要素能不能真正落地，有一个执行层面的常见漏洞：空状态在很多团队的设计流程里，只存在于文字描述里，从来没有真正出现在原型里。 实际上，在很多原型设计工具中，比如Figma或摹客3，用户完全可以把空状态作为独立的交互状态完整画出来，和正常状态、加载状态并列呈现，评审时团队直接能看到每种状态下的文案、视觉和行动按钮是什么样子。 ![](https://developer.qcloudimg.com/http-save/audit-1341340/f04ce99ecc844f818c44cf70e28e5b7c.png) ## 三、B端后台常见的三种空状态 以下三个场景是 B 端后台产品里最高频出现的空状态，也是做错率最高的地方。 **1、数据报表页（首次使用型）** 错误版本：界面中央一个灰色图表框架，里面写着"暂无数据"，没有任何说明。 用户的困惑：数据从哪里来？我需要先做什么？这个功能是干什么的？ 正确版本： 标题："你的运营数据会在这里生成" 说明："连接数据源后，报表将自动同步。通常在首次连接后 24 小时内生成第一份数据。" 主按钮："连接数据源" 次要链接："查看示例报表" 改动逻辑：从描述缺少，变成说清楚这里是做什么的，下一步在哪里。 ![](https://developer.qcloudimg.com/http-save/audit-1341340/8c4edeb37a75987a175511c4d9382797.png) **2、消息通知中心（用户清空型）** 错误版本：一个空收件箱图标，文字"暂无消息"，没有其他内容。 用户的感受：刚把所有消息都处理完，界面给我的反馈是什么都没有。 正确版本： 图标换成庆祝类视觉，标题是："全部处理完了" 说明："今天的消息已经全部读完。新消息到达时会在这里提醒你。" 次要链接："查看已归档消息" 改动逻辑：从描述缺少，变成确认成就，给出下一步。 ![](https://developer.qcloudimg.com/http-save/audit-1341340/cfd1915c9b2361d3a1ca9be45effbdbb.png) **3、搜索无结果（筛选条件过严）** 错误版本：搜索框下方显示"未找到相关结果"，没有其他内容。 用户的困惑：是搜索词打错了？还是这个功能里根本没有这类数据？我该怎么办？ 正确版本： 复述当前状态："未找到 '2025年Q4' 加 '华东区' 的相关数据" 改动逻辑：让用户知道问题出在哪里，给出具体可操作的方向，而不是让他们自己猜。 ![](https://developer.qcloudimg.com/http-save/audit-1341340/fc90b94bf4cc181a511dc4c3bbc6e2c5.png) ## 四、设计师自查：你的空状态做对了吗 用新账号登录一遍你自己的产品，带着这 5 个问题过一遍： **1、这个页面的空状态，你用新账号真正看到过吗？** 很多空状态的问题，是因为设计师和产品经理从来没有用新账号体验过，只见过填满数据的状态。 **2、空状态有没有出现在原型评审里？** 如果只在文档里写了"空状态文案待补充"，那大概率它永远都是"暂无数据"。 **3、三种类型的情绪基调是否匹配？** 首次使用型是引导，用户清空型是庆祝，加载失败型是安抚。用同一套文案处理三种情况，至少两种是错的。 **4、主行动只有一个吗？**四个平等按钮等于没有按钮。 **5、加载失败的空状态，有没有告诉用户数据是安全的？** 这是用户在这个时刻最担心的问题，但大多数错误空状态完全没有回答。 空状态是产品里少有的"设计了不会被人感谢，没设计好用户会悄悄离开"的细节。它不会出现在用户反馈里，但会出现在第一周留存数据里。 下次做设计评审，把"新用户看到的空状态长什么样"加进 checklist。不需要做很复杂的改动，把四个要素补齐：视觉、说清楚这是什么、一个行动、一条退路。从这个点上减少沉默流失，往往比优化一个已经运转正常的功能更值得。
2026-09-11

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-10-18 大小: 211.28KB 下载: 56次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-08-21 大小: 1MB 下载: 10次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2026-08-21 大小: 5MB 下载: 2次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2026-08-21 大小: 9.84MB 下载: 40次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册