卡片作为界面最基础的设计单元，看似简单，却最能体现设计师的细节把控与创意能力。标准化矩形卡片是设计基础，是保证页面稳定落地的底线；而异形、破形、立体、拟物四种创意手法，是拉开设计差距、打造页面亮点的关键。
AI 设计工具普及的当下，基础规整卡片可以快速批量生成，而具备差异化创意、兼顾美观与实用的特色卡片，依旧需要设计师自主构思、把控细节。熟练掌握不同卡片类型的适用场景，灵活运用四种创意手法，平衡视觉创意与信息实用性，才能摆脱同质化模板，做出有记忆点、高质感、适配业务需求的优质卡片设计。后续日常设计中，可以多收集优秀卡片案例，拆解造型、光影、排版逻辑，持续积累设计灵感，不断优化自身界面设计能力。

在 UI、网页、小程序界面中，轮播图是使用率极高的基础组件，无论是首页 Banner、内容卡片、城市切换、歌单推荐，都会依靠轮播承载多组信息。但很多设计师只会套用通用走马灯样式，难以做出差异化交互效果。本文将按照覆盖范围，把轮播划分为模块级轮播和页面级轮播两大类别，详解每种形式的定义、交互逻辑与适用场景，帮助设计师根据业务需求合理选用轮播方案。

当下数字化产品持续迭代，大数据平台、工业上位机、医疗检测系统、AI 可视化软件等专业工具功能愈发复杂。不少企业投入大量技术研发，却因界面晦涩、操作门槛过高，让用户望而却步。作为深耕 UI/UX 全链路设计十六年的专业服务商，兰亭妙微（蓝蓝设计）始终以心智模型为底层逻辑，平缓用户学习曲线，用六大落地设计原则，解决专业软件难上手、学习成本高、操作效率低的行业痛点，让复杂系统实现轻量化使用体验。

本文聚焦搜索团队“一定橙”IP设计案例，深入剖析其从传统IP制作流程向AI驱动制作流程转型的核心动因与实践路径，结合真实案例拆解AI赋能IP设计的核心价值。

同时，立足AI技术深度渗透的行业发展趋势，抛出设计师如何维系自身不可替代性的深层思考，为行业同类IP转型及设计师职业发展提供参考。

一、转型AI生产流程核心动因

1. 业务层面

大事件运营与长线激励活动是撬动业务指标增长的关键。

IP 作为视觉符号，不仅是活动强化产品辨识度、打造专属的记忆点，更是沉淀资产、降本增效的核心利器，能为长线运营持续赋能。

2. 团队层面

传统 IP 生产工序多、高度依赖 3D 人员、长周期等痛点，已难以匹配业务的快速迭代需求。

从2025高考项目出发，搜索设计团队借助AI工具在25年以全年为目标重构 IP 生产，既是为了满足运营物料的质与量，更是为了突破场景限制、降低资源依赖，实现团队产能的跃迁。

3. 技术层面

AI 工具的普及不是设计行业的 “终局”，而是认知重构的 “开端”。

当 AI 成为设计流程的标配，如何让技术服务于核心需求而非束缚创意，如何在效率提升的同时，守护 IP 设计的原创性与情感温度，这不仅是设计师的个人命题，更是整个行业在 AI 时代的生存之道。

那么，以2025年高考的IP“一定橙”案例分析，看看我们在2025年全年做了什么？

二、AI赋能实现创新与效能的双向突破

1. 创新突破

流程创新： “多工种线性生产” 到 “任务模块化协同”

过去，IP 设计是一条 “2D 立绘→三视图→2D 转 3D→静态转动态→多端适配” 的线性流水线，每个环节都靠单一设计师扛，跨团队协作难、效率低，还容易出现风格 “断层”。

我们的流程创新主要走了两条路：

一是把设计任务模块化拆解，用 AI 实现多环节并行生产，打破时序限制的同时，保证风格全程统一；

二是靠 AI 一键转换 + 批量生成的能力，实现 “一次设计，全域适配”，不仅优化了团队的技能配置、降低了人力成本，更把跨场景适配的时间和成本压到了最低。

技术创新：“手工绘制” 到 “多模态 AI 生成”

传统 IP 创作的核心是 “手绘 + 基础软件”，设计师的手绘能力和软件水平直接决定了作品的上限，不仅效率低、创意容易被个人能力束缚，还很难批量产出。

而 AI 赋能下的技术创新，核心是用多模态生成技术替代手工创作，打造一条从 “文本描述” 到 “视觉呈现”，再到 “3D 建模、动态效果、衍生物料” 的全链路自动化生成通道。

2. 效能突破

从 “有限试错” 到 “无限可能性”

运用AI在前期创意探索周期可压缩 90% 以上，可通过文生图、风格迁移、元素融合等能力，在分钟级生成数千张不同风格、形态概念图和动画Demo，快速筛选出高潜力方案，验证创意可行性。

从 “重复劳动” 到 “精准高效”

传统 IP 制作里，2D 转 3D 是个大工程，又费时间又费人；而 AI 能一键实现 2D 转 3D、静态转动态、图文转视频，直接省掉大量成本。

到了后期做衍生内容，三视图、表情包、海报这些标准化物料，传统模式下又累又容易走形。

但只要用 LoRA 训练专属模型，再用 ControlNet 锁定 IP 的核心比例、色彩和质感，AI 就能批量生成完全符合规范的内容，效率直接提升 10 倍以上。

三、一定橙IP设计：全流程AI化工作流亮点拆解

亮点1：LoRA模型AI化生成

通过AI生成-抽帧-后期流程形成优质 IP 样本（如 30 张核心形象图）训练专属 LoRA 模型，锁定 IP 的核心比例、五官、色彩、质感。在后续的概念生成、多媒介适配、系列化创作中，调用 LoRA 模型即可快速生成符合特征的 IP 内容，确保一致性。

亮点2：基于LoRA+ControlNet 精准控制IP多维度形象

通过 LoRA+ControlNet 控制技术，误差≤2%，导入 IP 核心形象图，选择控制类型（如骨骼、深度、姿态、表情），即可精准控制 IP 的比例、姿态、角度。

首帧+标准化提示词可以稳定控制IP形象输出灵动细腻的动画。

亮点3：AI高效迁移多种风格

通过 AI 风格迁移模型，输入 IP 核心形象图与目标风格参考图，即可一键将 IP 形象迁移至多种风格（如 3D 转简笔插画）。

在转换过程中严格保留 IP 核心特征，确保风格统一、输出稳定，满足业务素材与物料的快速迭代需求。

四、IP应用场景

一定橙 IP 形象贯穿 2025 年多项核心活动，包括高考及渠道推广物料、暑期走路赚钱、组队赚钱、开学季等场景。

通过 AI 实现全链路 IP 渗透，在保障视觉质量的前提下，整体效率提升 50% 以上。

五、设计思考：AI技术与设计共创，实现本我价值最大化

AI 技术与设计创意的深度共融，本质是技术为创意赋力、人文为技术锚向的双向奔赴，而非单向度的工具替代。

它正在重构设计产业的全链路流程：既彻底解放了设计师的基础生产力，更打破了创意表达的固有边界，最终让设计真正回归 “以人为本” 的核心本质。

长期以来，设计师近 80% 的精力，都被消耗在机械重复的执行落地、素材拼接、参数调整等低价值事务中，创意的火花往往被繁琐的执行磨平。而 AI 的规模化介入，彻底消解了这一行业痛点，让设计师的核心精力得以真正回归到用户洞察、创意构思与价值创造本身。

随着 AI 在设计领域的深度渗透，行业内也涌现出诸多悲观论调：

有人说 AI 终将彻底取代设计师，商业设计的全流程都可由 AI 独立完成；

有人担忧设计行业将迎来大规模裁员，普通设计师会彻底失去市场立足之地；

更有人断言，AI 的零门槛创作会抹平专业设计的壁垒，设计师的个人创意与审美表达将不再具备商业价值。

但在我看来，AI 能替代的，永远只是「术」层面的标准化执行与重复性劳作，永远替代不了「道」层面的用户洞察、创意思考、审美决策与人文价值创造。

对设计师而言，真正的核心命题从来不是对抗技术浪潮，而是在 AI 时代锚定自身的不可替代性 —— 以人文为内核，以创意为核心，以技术为工具，在时代的洪流中始终保有前行的底气与主动权。

转载：人人都是产品经理

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

兰亭妙微ui设计公司分享：当AI能够深度理解'团圆经济'的情感密码，节日营销正在从流量争夺升级为心智渗透的精准战役。58同城在中秋期间以'好岗离家近'为核心，通过AI生成融合城市地标与职业场景的个性化视觉，在6大城市实现千万级曝光的同时提升简历投递量40%。这场品效合一的实践揭示了一个关键趋势：AI不再是冰冷的效率工具，而是情感共鸣的放大器——它让招聘广告从信息堆砌转向情感连接，真正实现了品牌温度与业务增长的双赢。

当招聘广告超越“岗位罗列”的刻板模式，设计便成为承载这份向往的情感桥梁。

今年中秋，58同城以“好岗离家近，中秋真团圆”为核心，聚焦本土情结浓厚的二三线城市，发起一场整合营销。

本文将拆解这场战役中，AI赋能的设计创新如何不仅实现千万曝光与百万业绩增长，更让招聘营销升维为助力人们“归乡筑梦”的情感依托，让归乡就业的美好愿景通过视觉语言落地生根。

01 精准锚定：明确情感与场景的设计方向

项目首先基于人口特征、营销资源与业绩需求，精准圈定长沙、成都、西安、无锡、南昌五大目标城市。这些城市的共性在于春节/中秋返乡率超80%，乡土情结与团圆氛围尤为浓郁。

执行层面：项目聚焦6大城市的24个核心商圈，选择电梯内、户外大屏、公交站亭三大高频触达渠道。

主视觉采用“品牌区+创意区”双分区布局：左侧传递“好岗离家近”的核心主张，右侧则分别针对B端企业（展示招聘实力）与C端求职者（突出岗位优势），引导“求职者投递-商家入驻”的双向转化。

02 AI赋能：效率与创意的双重突破

AI设计的核心价值，在于让“情感共鸣”与“高效落地”并行不悖。本次项目中，AI技术贯穿创意生成、视觉优化全流程，既精准传递“团圆+留乡”的情感内核，又破解了多城市定制、短周期交付的效率难题，实现双重突破。

设计提案方向：

1. 情感+场景化共鸣：让设计唤醒本土情结

设计紧扣“中秋团圆”与“留乡就业”的双重诉求，以主题文案将求职需求与家庭情感深度绑定，精准触动目标人群的“本土情结”。

创意构思沿两个方向展开：

「中秋+商圈实景」方向提案：

快速建立“本地招聘”的直观认知，通过融合城市地标与品牌色，结合 “中秋团圆” 节点，延续 “好岗离家近” 的核心诉求，同时针对不同城市定制化文案（如西安的“照的见你的未来”、成都的“岗位和火锅一样沸腾”），既传递就业价值，又契合城市气质，激活留乡就业的情感需求。，让城市印记成为情感纽带。

「中秋+地标+职业人物」方向提案：

采用真实场景与AI生成插画人物相结合的方式（如职场女性与城市景观、特色元素的融合），画面生动富有层次，打破传统招聘广告的单调感。

最终方案：

2. AI提效：贯穿流程的设计革命

AI技术在此次项目中深度融入从创意到落地的全流程，实现“多快好省”的突破：

创意图像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化场景，使AI元素与实景自然衔接，直观传递信息，降低用户理解成本。

高效素材处理：

即梦4.0：

字体设计：几分钟内完成字体设计方案。

处理图片：快速调整建筑角度、优化图片内容，适配户外大屏的传播需求，大幅减少后期耗时。

即梦3.0：

生成图片：月亮的质感与主文案的艺术化呈现，通过 AI 技术实现视觉吸引力，既保证节日氛围的营造，又让文案具备强记忆点。

卡通插画：效果比4.0优秀

在插画生成上表现卓越，通过精准指令，快速产出风格统一的本地职业形象（如成都外卖小哥、西安青年群体），传递“本地工作的愉悦感”，效率远超人工。

关键词参考：

“一个外卖小哥抱着熊猫玩偶，大步跑，绿色系工作服，开心地笑，黑色单线描边，扁平插画，炫彩配色”

“一个女孩面对手机视频通话，身穿衬衫，坐姿端正，张口说话，居家环境，黑色单线描边，扁平插画，橙色系配色”

“5个男女青年，抬头看前方，一人手指前方，全身，站立，背影，时尚穿搭，黑色单线描边，扁平插画，丰富配色”

具体成效：

创意阶段：半天生成4个完整方向，传统方式需2-3天。

多城市适配：快速产出兼具系列感与地方特色的视觉方案。

修改优化：响应客户反馈的速度提升70%以上。

3. 物料延展：保障多场景视觉统一

基于“一套核心视觉，多场景适配”原则，AI扩图、高清修复，协助快速延展生成线下物料、线上专场Banner、长图海报等多尺寸物料，确保线上线下品牌形象统一，强化用户认知。

03 价值落地：三大逻辑驱动品效合一

AI赋能的设计创新，本次设计通过情感、商业、品牌三大逻辑，实现“品效合一”核心目标。让设计不仅是视觉呈现，更实现了品牌价值与业务增长的双重落地。

1.情感逻辑：激活本土情结，拉动C端转化。AI设计精准触达留乡需求，让“像鸟飞往自己的山”不再只是心理期许，而是有具体岗位支撑的现实可能。数据印证成效：长沙、成都、西安等地线上专场简历投递量增长40%，“本地岗位”搜索量上升62%，有效拉动C端用户参与度。

2.商业逻辑：精准赋能B端，超额完成业绩。对B端商家而言，精准广告投放是核心需求。通过“行业+地域”的定制化广告设计，有效提升了商家投放意愿与合作转化。

3.品牌逻辑：沉淀长期认知资产。设计围绕“贴近受众、强化认知、促进转化”原则，将“提供家乡好工作”的营销逻辑，拆解为“明月+地标+文案+品牌信息”的直观的视觉符号组合，降低用户信息理解成本。通过品牌色、视觉等符号在多场景的重复曝光，持续强化“找本地好工作，就上58”的用户心智，使品牌从工具平台升级为“助力团圆”的伙伴，构筑独特的品牌竞争壁垒。

04 行业启示：走向“策略+情感”的AI设计新范式

本次实践为行业带来核心启示：AI是设计师的“超级助手”，其核心价值在于提升效率与精准度。未来的品牌设计应聚焦于 “策略为先，AI赋能，情感共鸣”的融合模式——以策略为导向，用AI提效，最终以情感打动人心。

打动人心的永远是对人性的洞察和情感的共鸣：

对招聘品牌推广而言，这打破了“信息堆砌”的传统广告模式；对更广的行业来说，则示范了“AI赋能设计，设计驱动品效”的新路径。技术终究是工具，而深度的策略思考与人文洞察，永远是设计师不可替代的核心价值。当AI与品牌策略、情感共鸣深度结合，营销才能实现真正的突破，为品牌创造可持续的长期价值。

05 写在最后

58同城此次中秋品牌营销项目，正是技术理性与创意感性完美融合的例证。用AI实现高效精准的落地，用设计传递深刻的情感价值，最终成就了品牌声量与业务增长的双赢，也为行业提供了可复制的品效合一实践范本。

转载：人人都是产品经理

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

在B端产品设计的世界里，色彩不仅仅是视觉元素，它还承载着信息传递、用户体验和品牌识别的重要角色。兰亭妙微UI设计公司深入探讨了色彩空间理论在B端设计中的应用，从基础的色彩空间概念到如何在实际工作中运用这些理论，为设计师提供了一套科学的颜色搭配和管理方法。

对于 B 端产品而言，我们经常会和颜色进行斗争。

比如在工作当中，开发没有正确还原颜色、不知道如何进行色彩配置、以及对于 B 端产品而言，究竟应该如何协调科学的进行颜色的搭配～

最近会讲颜色的部分，整体会分为四篇文章：B 端设计如何理解色彩空间、B 端产品怎样合理搭配颜色、B 端项目的视觉风格、B 端项目颜色的实战技巧。

本篇文章是第一篇，我们先来聊聊产品配色的基础 色彩空间与颜色管理。

不知道各位同学是否遇到这种情况，当你在调整颜色时，就是在漫无目的的在拾色器上来回游走，在被问到为什么要选择这个颜色时，也茫然无措，这时候的你作何感想？

所以颜色还原需要熟练的掌握色彩空间，并配合屏幕进行颜色管理，才能够让设计顺利落地。但颜色其实过于抽象，因此我们将整体内容进行简化，多和大家聊聊在理论背后究竟应该如何与工作内容进行结合。

首先我们先说说色彩空间。

一、什么是色彩空间？

色彩空间又叫色彩模型，它是为了让系统能够准确地描述颜色、使用颜色，进而定义出来的一种颜色组织方式。

比如有一排随机颜色，要按特定规则排列，你会怎么做？我相信，我们首先想到的便是按照不同的色相进行归类。

如果颜色变为10000个，又该怎么排列呢？因此，为了让企业更好地使用颜色、设计师更便利地选择一致的颜色，行业中便提出了色彩空间的概念。

色彩空间其实很简单。因为我们需要使用颜色，且不同人群对颜色的需求不同，所以颜色的排列方式会存在差异。

比如，行业中较为出名的潘通色彩体系，其实是基于印刷行业制定的一种特殊色彩空间；CMYK是为印刷从业者提供的、便于他们更好地进行物料印刷的色彩空间；Lab是一种更强调色彩亮度的色彩空间。

因此，行业会根据颜色的不同规律和自身使用需求，总结整理出不同的色彩空间。

我们目前在工作当中，主要都是聚焦于屏幕当中，因此影响颜色呈现的也就变为：

• 设计软件当中的色彩空间：以 RGB、HSB、HCT 为主，主要是计算机识别颜色颜色，调整颜色的重要方式，在电脑软件当中起到重要作用。
• 屏幕显示当中的色彩空间：以 Adobe RGB、Display P3、sRGB 为主，主要是能准确展示屏幕当中的各种颜色。

在我们细致讲解色彩空间的部分时，我们先来了解三个重要的概念。

1. 亮度：是光作用于人眼所引起的明亮程度的感觉，它与被观察物体的发光强度有关，主要表现光的强与弱。
2. 色相：是当人眼看一种或多种波长的光时所产生的色彩感觉，它反映颜色的种类，是决定颜色的基本特征。
3. 饱和度：是指颜色的纯度，即该掺入白光的程度，表示颜色深浅的程度。例如：蓝色 + 白色 = 天蓝色，也就是饱和度下降

二、色彩空间的类型

1. RGB  色彩空间

RGB是显示器当中的颜色基础。

比如在现实世界当中，我们将手机屏幕进行放大，你会发现屏幕都是由红绿蓝三个灯管所组成的。

而 RGB 的色彩模式就是模拟现实世界当中的屏幕显示原理，将灯光照射的逻辑在设计软件当中进行复现，因此在 RGB 的调色盘中，就会分别包含三个输入框，这便是 红绿蓝。

其中，数字 0 代表不发光、255 则是最亮的灯光。

那为什么最亮是 255，不是 250？或者是 280 呢？

原因在于RGB 所有的颜色，最后都需要通过计算机进行运算显示，对于它说并不认识 红色、蓝色，在它的脑袋里（不对，CPU 里面）就只有 0 与 1，因此在计算机存储的时候，一个字节也就是 8 个比特、也就是 2 的八次方、也就是 256，这样 一个色彩信息等于一个字节，数据存储就会更加高效。

所以我们所聊的颜色更多指的是代码层面的颜色设定。

接着我们打开 Figma，看到另一种格式 Hex，那我们称之为是 RGB 模式的精简版。

因为它嫌弃每个输入框都会出现 255（255,255,255 白色）实在太长，不利于我们在日常工作当中进行记录。

因此将每个颜色，三位数值缩减为两位数值（十进制变为十六进制），就是增加英文字符的数据，就能较短的表达颜色，使得颜色表达更为高效。

因为 Hex 只是 RGB 的精简版本，所以 Hex 里面，每两个字符所对应的就是 红、绿、蓝。

比如我们刚才提到的这个蓝色，在 RGB 空间当中为(0,86,255) ，Hex 则是#0056FF，也是一一对应关系。

RGB 听上去似乎很美好，但问题在于两点：

1.颜色的调整不够直观：作为设计师，我们很难模拟灯光的照射思维对颜色进行调整，具体应该增加多少颜色，其实是不够清楚的。我们更熟悉的其实是：亮度、色相、饱和度，因此在调色时会十分困难。

比如我目前是红色，那我要调整到紫色，应该输入多少值呢？其实我们很难进行一个准确的判断。

2.颜色信息与亮度信息的数据混合：导致我们很难对于有一个准确的判断，比如在 RGB 相同的数值当中，明显会感受到 黄绿色 与其他颜色的亮度存在较大差异，这样在调色时，颜色一致性偏差较大。

为了解决这些问题，就提出一种新的色彩模型：HSB

2. HSB 色彩空间

HSB （也叫 HSV）就是通过颜色的  色相、饱和度、亮度 来进行表示。

在色相当中，由于颜色的呈现是色环的方式，因此在数值上是以 0-360 度来进行表示的，在设计软件里面，我们也只能输入所对应的数值。

同时饱和度与亮度都是以百分比的形式进行呈现，饱和度越低，相对应就会给颜色增加白色，使其更灰；亮度越低，就会增加对应的黑色，让其更深。

由于 HSB 的色彩空间的分类模式非常有利于我们进行颜色的调整，因此我们在日常调色时其实会经常用到。

比如日常工作当中，假设我们需要设计一组图标，根据 HSB 颜色的基本原理，我们其实只需要调整不同的色相，就能够得到不同的图标颜色。

但… 颜色上依旧会存在问题。

你会发现当我们调整了色相过后，整体的颜色并没有形成统一。原因在于我们人眼对于 黄绿色的感知 会和红色、蓝色有所不同，我们通常在看黄绿色时会更为刺眼，因此在设计层面上需要单独调整。

所以在 HSB 当中的颜色逻辑上，也并没有解决颜色一致性的问题。于是在 2021 年 Google 提出一种全新的色彩模式，HCT。

3. HCT 色彩空间

HCT 首先会将颜色当中的 感知度、亮度 进行结合，对之前的 HSB 重新调整。

在颜色层面上主要分为：Hue：色相、Chroma：色度、Tone：色调

色相与色度和之前基本类似，但色调上优化了黄绿色凸显问题，让人眼的感知度也加入到了色彩空间当中，使其颜色更为准确。

同时色彩空间的呈现，优化了颜色渐变的流畅性，我们会发现整体的渐变感觉会更为自然。

那为什么 Google 想要做 HCT？

其实因为 Material Design 当中会强调设计的一致性和灵活性，在功能设计上，需要增加一个根据屏幕当中的图标生成与其风格一致的壁纸。

但在之前无论什么样的色彩空间都不能准确的还原颜色。现在就提供了一个可靠的色彩基础，能够让我们在不同的设备、平台和应用场景下，都能够生成具有一致性的色彩方案，同时也能更好地适应各种主题和风格的变化，如亮色模式和暗色模式的切换。

比如，还是以上面这个案例，我们使用 HSB 与 HCT 对颜色进行的色相的调整，那得到的结果明显会发现 HCT 会更加准确。

那 HCT 就真那么完美无瑕？

其实也不然，因为 HCT 色彩空间出现时间较晚，所以在使用上也会有很多问题。

• 设备兼容性差：很多设计软件目前对 HCT 基础没有适配，所以即使使用，很多老旧设备也并不能支持。
• 计算复杂度高：HCT 的色彩空间涉及到更为复杂的计算算法，因此它对于系统的资源要求更高。
• 认知成本较大：对于新的事物，往往在行业中的普及会相对较慢，因此还需要长时间的普及才行。

三、色彩空间如何应用？

这么深奥的色彩空间，到底要如何使用？

1. 以 HSB 的为主

因为 HSB 是设计师最容易理解的色彩空间，因此我们在调色时需要根据数值来进行颜色的调教。

比如说你的颜色很脏，不够干净。其实就是在强调 HSB 当中使用了更多的黑色，我们便可以调整到这个色彩空间当中，去增加 B 的值（也就是第三个输入框）

比如说你的字体很灰，不够明确。

其实就是在说 你的亮度太高，需要减少亮度，也就是 H 的值（也就是第一个输入框）

2. 色彩更具数据化

因为每一个屏幕所显示的颜色其实都不太相同，因此色彩调整时要多看数据，观察数据之间的对比变化。

比如以 B 端产品的中性色为例，现在系统当中所使用的正文颜色为 #333333，看到过后就明确知道颜色深度不够、颜色也不透气。

我们就会按照，先确定颜色色相，为灰色偏蓝色，因此在色相当中需要拖动色环找到合适的色相；

紧接着确定饱和度，因为要偏蓝色，但不宜过多，因此整体的数值只会在 1-5 之前浮动；

最后确定深度，之前颜色过于浅，需要加深，所以直接减少，变为 22 左右的数值。

3. HCT 辅助颜色判断

其次在判断颜色时，也会更具章法。

在多辅助色的情况下，我们可以使用 HCT 对颜色进行判断。

对于日常工作来说，我们可以使用 Figma 当中的 color Space 插件 进行日常的色彩管理。在今后遇到类似同类型图标时，我们可以使用 HCT 的方式快速生成发散色板，帮助我们进行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系统当中，会存在较多颜色搭配的场景。

像是图表设计、自定义系统主题，原来只能通过系统预设固定颜色的方式进行解决，而现在 Google 也将这套计算公式开源，也就是说程序员可以直接引用 HCT 的色彩空间，将颜色配置的权限给到用户，通过颜色的调整，呈现用户想要的颜色内容。

四、屏幕显示的色彩空间

对于屏幕显示的色彩空间而言，有部分内容我们也是要重点关注。比如在 B 端设计当中，色彩还原老是出问题，那我们就可以通过屏幕的色彩空间进行判断。

1. sRGB 色彩空间

sRGB（standard Red Green Blue）是由惠普公司和微软公司共同开发的一种标准色彩空间，目的是提供一种通用的色彩标准，使得在不同的设备（如显示器、打印机等）之间能够实现相对一致的色彩显示。

对于 sRGB 来说，它是我们作为设计师最为重要的屏幕显示色彩空间，因为它通用性强，所以大多数普通的电脑显示器、网页浏览器等都默认采用 sRGB 色彩空间，这样在浏览网页、查看普通的数码照片时，可以获得比较稳定的色彩效果。

所以我们在做设计时，通常都会将屏幕与软件，都调整的 sRGB 的空间当中，这样就能够最大限度保证色彩的一致。

2. Display P3 色彩空间

Display P3 是基于 DCI – P3 色彩空间衍生而来的，主要用于消费级显示器设备。它在 DCI – P3 的基础上进行了一些调整，以适应显示器的特性。

整体而言 P3 色彩空间显示出来的颜色会更加 生动、艳丽，但是这会和你的设备密切相关。目前行业中只在苹果设备以及部分高端显示器才会使用，所以我们在设计时需要考虑自己产品的受众，这一设备是否普遍使用。

最后，我们总结一下：

1. 色彩空间就是我们使用颜色的一种方式
2. 在调色时，我们会优先使用 HSB 的色彩空间
3. HCT 是 Google 推出，主要目的是 色彩视觉的统一，在我们生成辅助色的时候有用
4. 屏幕当中我们的所有显示配置尽量调整为 sRGB，这样更符合大多数用户的显示情况

转载：人人都是产品经理

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

近期和团队一起完成了一个超酷的项目——飞秒激光时域热反射测量系统（TDTR）的软件UI设计。

不得不说，做科研设备设计真的太“上头”了！

这不仅仅是一个软件界面，更是连接科学家与纳米世界的窗口。

分享一下我们的设计思考，希望能给做B端、科研仪器设计的姐妹们一点灵感～

1. 项目背景：让复杂的测量变简单 客户是一家专注于热学测试设备领域的科技企业。 

设备用途： 测量纳米薄膜热导率、界面热阻等。

 核心挑战： 如何把微纳尺度的复杂数据，转化成直观、易操作的视觉语言？ 我们输出了深色和浅色两套方案，客户一眼相中了浅色方案！理由是：干净、通透，长时间盯着屏幕做实验眼睛不累。

2. 设计亮点：严谨中的“小心机” 

配色逻辑：红灰CP太绝了！

灰色背景： 作为基底，最大程度保证了数据图表的清晰度，不抢戏。

 红色点睛： 作为品牌主色和警示色，关键操作按钮和重要数据用红色突出，既符合工业严谨性，又增加了视觉活力。

图标设计：低饱和度的“科研风” 没有用花里胡哨的渐变，而是采用几何图形+数据可视化元素。

线条扁平化，小尺寸下也能看清，降低科研人员的认知成本。

布局：多面板分栏 左侧控制参数，中间展示实时数据，右侧显示拟合分析。

这种布局让科研人员可以“一眼看全”，不用频繁切换页面，大大提升了实验效率。

3. 从设计到落地：高还原度的秘密 让人骄傲的是，我们不仅做了UI设计，还负责了QT前端开发！ 

通过多轮的效果走查，我们实现了设计稿的高还原度落地。看着设计图变成真正能跑代码、能测数据的软件，这种成就感真的爆棚！

4. 设计师碎碎念

做科研仪器设计，“克制”是最大的美德。 我们不需要炫技，只需要让数据更清晰，让操作更流畅。每一个像素的打磨，都是为了致敬科学的严谨。

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

一、全文速览图

我想这是很多新手设计师都有过的感受，明明懂了很多设计知识，但到真正设计的时候还是会出现迷茫或者没思路的情况。

1. 看了很多内容/审美在线，但拿到需求没想法
2. 设计技法VS设计原理
3. 平面能力差
4. 学习路径推荐

二、原因分析

造成这种情况的主要原因是，虽然我们每天看了大量的设计文章或者技法，但没有第一时间应用到设计实践中。

换句话说就是，我们每天看的设计内容可能跟我们实际做的工作需求不够搭边，这样就很容易造成拿到一个新需求后没有想法，感觉之前看了很多设计图或者文章都没派上用场，不得不重新找竞品找参考才能展开设计。

就像学了一节新课程，如果没有第一时间做配套的练习题，等过了一周再做练习题发现根本不会做，因为之前学的课程早都忘得差不多了。

北京兰亭妙微UI设计公司：下面展开讲讲如何避免这种情况，建立自己的设计成长体系。

三、设计技法VS设计原理

对于设计技法vs设计原理的问题，我觉得对于设计师来说同等重要，但具体要结合你现在的工作情况找到一个侧重点。

举个例子，比如当前的工作偏UI视觉多一点，需要常做一些运营活动图，那么日常就可以多侧重练练技法，多做视觉练习；如果当前的工作偏向纯UI，那么就可以多重视设计理论，多思考产品规划、交互流程、用户使用体验等等这些产品交互相关的知识，用理论支撑起我们的设计方案。

这样既能保证我们能很好地胜任当前的工作，还能让我们在持续的工作中不断有进步有提高。

四、如何看待平面能力

对于平面能力差的问题，我觉得平面设计能力是基础。可能很多同学在大学时有过这种体验，无论你的专业是视传、数媒、产设，甚至摄影，都需要经历平面设计这一关。排版、手绘、字体、后期合成等等这些平面能力需要我们不断练习实践。

现在AI绘画工具的出图效果都不错，大家可以好好利用起来辅助出图，补齐UI设计师在平面设计上的短板。

总的来说，平面能力要多练习多积累，日常工作中还是建议灵活运用“AI+设计”的形式，也能打造出好的效果图，没必要为了某个视觉效果死磕PS而浪费太多工作时间。

五、可复制的学习路径

针对看了很多设计但做需求还是没想法，以及到底怎么学UI、建立自己的设计体系这些情况，我结合自己的经历总结一下，希望能对你有帮助：

首先还是多积累，多看好的设计，审美需要一直提高。比如每天早上我都会拿出半小时的固定时间去Pinterest或者花瓣里去看各种各样的设计图。

需要注意的是，这里的看也分为两个方向：一个是日常看图，一个是专项看图。

1. 日常看图，就是我在网站里随便浏览，看到好的图就随手采集下来。这是一种没有目的性的，无论是APP设计、运营海报还是3D图标，看着好的设计图就存下来。
2. 专项看图，就需要根据接下来要设计的需求，提前有目的地去看一些图，找各种竞品，去体验这些竞品有哪些好的地方，哪些可以用到我们的设计上。这时需要结合需求，有针对性地去看图。

其次，每天看的图很多，就需要把图都整理一下，这个时候就需要建立一个系统性的设计素材库。

拿花瓣举个例子，在花瓣里可以创建各种各样的分组。

比如APP是一个大的分组，在这个APP的分组里面可以建各种各样的画板，像APP-首页、APP-导航栏、APP-标签设计等等；再比如网页设计是一个大的分组，我可以在网页设计底下创建网站首页设计、网站登录页设计这些画板。

这样整理的好处一个是让我们每天看的图更加清晰有条理；另一个是有了分组/画板后，接到新的设计需求后就可以直接定位到某个分组里，看看我们之前创建的画板里有没有类似的一些参考图，省去了从0~1再重新找参考图的这种过程。

而且看到自己采集的参考图突然派上了用场的过程，对于设计师来说特别棒！这说明我们每天看的内容有价值，不只是在收藏夹里吃灰。

比如要设计一个UI标签，我们可能需要反复去创建的素材画板里看各种各样的标签设计，这样不止一次地反复看收集的素材，看的多了之后我们就对这些素材图特别熟悉，这样就不怕后面的设计再没思路。

现在每天网络上都有特别多的零碎信息，所以这种清晰的整理是一个特别有效的成长方法。经过这种「先整理再回看再设计」反复练习的过程，会有一个更清晰的设计体系和工作流，设计能力肯定会有一个质的提升。

转载自优设网

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

今天兰亭妙微UI设计公司，跟大家分享登录页的 12 种设计切入点，相信总有一款会入甲方爸爸的心。

作为设计师，我们常常面临一个窘境：要面对各式各样客户审美的挑剔，有时候被虐得都怀疑人生。

但找参考时，思维又容易被局限在常见的几种形式里，我通过分析大量优秀的登录页，总结了 12 个高级的设计切入点，希望能为你打开新思路。

一、以纯色背景+品牌符号为出发点的登录页设计

设计解析：

1. 形式：两者都采用纯色作为底色，底色配几个跟系统主题相关的元素。
2. 色彩：上图的配色冷静、柔和，突出专业与宁静；下图则大胆使用高对比度色彩，充满能量与动感。
3. 构图：两者均采用经典的左右分割构图，这是登录页最稳健高效的布局之一。

二、以用户画像为出发点的登录页设计

设计解析：

1. 形式：两个都采用了扁平插画的表现形式，并且将产品的目标用户投射到页面上，产生强烈的身份认同感。
2. 色彩：上图采用高饱和度渐变背景，色彩大胆、鲜明，传递出年轻、潮流的品牌性格；下图色调冷静，应用场景比较普适。
3. 构图：两者均采用稳健的左右分割构图，它更像是一个价值宣言页面，极大地降低了新用户的认知门槛，提升了注册的意愿。

三、以场景沉浸为出发点的登录页设计

设计解析：

1. 形式：两个都通过高质量摄影图来营造独特氛围；上图传递大自然、自由等意象；下图则传递温馨、舒适、有温度的服务感。
2. 色彩：两者的色彩都源于背景图片本身，登录框的配色和背景融合的无比自然、舒适。
3. 构图：两者均采用全屏背景+中心卡片的经典构图，它通过真实的场景，绕过生硬的文字说明，直接与用户进行情感对话。

四、以人物放大展示的登录页设计

设计解析：

1. 形式：都使用了人物放大展示的表现手法，上图通过多位儿童看书传递阅读氛围；下图则通过虚拟角色传递潮流与个性。
2. 色彩：上图使用高饱和度的童话色彩，营造温馨、快乐的感受；下图采用灰色调搭配霓虹黄绿渐变，营造酷炫、动感的氛围。
3. 构图：两者均采用左右分割构图，但侧重点不同，上图插画重在营造氛围和讲述故事；下图则重在角色与表单平衡，突出个性。

五、以简约几何造型的登录页设计

设计解析：

1. 形式： 均是几何造型为主的表现手法，上图采用冷紫渐变，传递出专业、稳定；下图采用暖黄渐变，散发出活力、乐观。
2. 色彩： 色彩是这里唯一的变量，但效果截然不同，它完美验证了色彩在塑造品牌感知和影响用户情绪上的决定性作用。
3. 构图： 两者都采用了清晰有力的左右分割构图，左侧是强有力的品牌口号，右侧是功能清晰的白底登录框。

六、高对比的登录页设计

设计解析：

1. 形式：都使用了风景摄影图，且都内嵌在一个异形容器里，打破了传统的方形容器造型，比较新颖。
2. 色彩： 色彩运用非常克制且有目的性，左侧功能区使用无彩色，这种强对比确保了功能区域的操作清晰。
3. 构图：采用了最经典且不易出错的左右分割构图，左侧是纯功能性的白色表单区域，右侧是激发用户情感的场景化背景图。

七、以全屏插画风格的登录页设计

设计解析：

1. 形式：都采用全屏插画为核心视觉，上图使用色彩鲜明的城市插画，营造活力都市氛围，下图采用紫色调山林夜景，传递出神秘气质。
2. 色彩：色彩在这里是品牌情绪本身，这种设计强项在于通过视觉瞬间建立情感连接，让登录体验超越功能层面，成为一种品牌体验。
3. 构图：采用中心构图法，这种设计的视觉记忆点和品牌辨识度非常高，非常适合需要快速建立独特品牌形象的创新型产品。

八、打破边界方式的登录页设计

设计解析：

1. 形式：上下两个案例都巧用了打破造型边界的方式，每个页面元素都特意打破传统的容器边界，给人布局灵动的感觉。
2. 色彩：色彩都使用了低饱和度的色彩，给人高级、稳重、大气的感觉。
3. 构图：采用了经典的左右构图，打破边界的图形方向直指登录表单，极大地引导了用户完成注册和登录。

九、玻璃质感的登录页设计

设计解析：

1. 形式：这是最常见的 B 端登录页表现方式，设计师都喜欢用这种玻璃质感去表达产品内涵。
2. 色彩：色彩使用比较干净、轻盈，给人一种轻松、舒适的治愈感。
3. 构图：采用了经典的左右构图，打破边界的图形方向直指登录表单，极大引导了用户完成注册和登录。

十、小范围 2.5D 插画的登录页设计

设计解析：

1. 形式：这是前几年非常流行的 2.5D 插画风格，通过一些 2.5D 元素的简单组合，精准的传递平台属性。
2. 色彩：两者都采用了蓝色主色调，但表达了不同的情感;上图的浅蓝色更具科技感；下图的深蓝色则更显沉稳、庄重。
3. 构图：两者均采用最经典、易用的左右分割构图，确保功能表单区域的清晰可读。

十一、强质感的蓝色科技登录页设计

设计解析：

1. 形式：两个案例都运用具象的形式将抽象的业务进行了很好的展示，科技感满满。
2. 色彩：主色调采用体现科技感的深蓝/黑色，关键元素则使用亮蓝色和橙色作为点缀，打破了深色的沉闷，创造了视觉焦点。
3. 构图：两者都采用中心聚焦式构图，将最具科技感的可视化元素置于画面中央，登录框作为功能面板悬浮其上。

十二、以安全信任、金融科技为出发点的登录页设计

设计解析：

1. 形式：两个案例都通过核心视觉符号高效传达了产品属性，质感比较强烈。
2. 色彩：深蓝色电路板背景营造出科技氛围，金色则提升了页面的品质感，发光效果和悬浮质感增强了元素的现代感和数字感。
3. 构图：左右构图营造出严谨、平衡、可信赖的感受，登录面板位于黄金视觉区域，确保了功能优先级。

总结

通过以上 12 个案例的系统性拆解，我们发现 B 端登录页的设计可以有如此丰富的切入点。

它绝不仅仅是摆放表单的简单任务，而是一个融合了品牌战略、用户体验、视觉营销和技术表达的综合性设计挑战。

希望这 12 个切入点的详细分析，能成为您应对登录页设计挑战的灵感源泉和实用工具箱。

一个高级的设计，其最高境界是让用户感觉不到“设计”的存在，却能高效、愉悦地完成目标，并对品牌留下积极而深刻的印象。

转载：优设

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