做B端或者门户网站设计的宝子们看过来！今天分享一个兰亭妙微原创作品——非常典型的行业门户改版案例。
这种传统垂直行业的网站，容易出现的问题就是“界面老化”和“信息杂乱”。这次改版的核心目标非常明确：在保持权威性的同时，提升视觉美感和交互体验。来看看设计师是怎么化腐朽为神奇的吧！
一、 项目背景：打破沉闷
原网站作为中储棉花信息中心的直属网站，虽然内容权威，但视觉呈现已经跟不上时代，关键信息呈递杂乱，用户阅读体验较差。 改版重点：
重塑形象：契合用户需求与市场期待。
交互升级：实现视觉美感与流畅性的融合。
信息降噪：让专业权威的讯息更易读。
二、方案探索：风格博弈
兰亭妙微设计团队给出了三种截然不同的主页方案，这个思考过程很值得参考：
方案1（蓝色系）：主打国际化，创新的报告布局动效，内容条理更清晰。
方案2（绿色系）：优化资讯层级，布局稳重，强调信息的易读性。
定稿方案：结合了视觉美感与功能性的平衡点。
三、 核心优化亮点（划重点！）
这次改版不仅仅是换个皮，在交互细节上做了很多巧思：
1、资讯层级重构
痛点：旧版内容分类不清晰。
解法：将文字标题分为“置顶/推荐/往期”三个等级。首屏位置就能展示不同重要性的推荐内容，主次分明，用户一眼就能抓取重点。
2、检测报告动效化
痛点：旧版是枯燥的列表，很难快速定位特定报告。
解法：进行了模块分类整理，增加了鼠标移入的动效展示。详情页显示信息与简要描述，通过“往期”可回溯，极大增加了趣味性和互动性。
3、地图可视化交互
亮点：在地图上直观反映供求公司。
功能：支持通过筛选快速获取某地区棉花信息，清晰查看产业总数据与各地占比，把枯燥的数据变成了直观的地理信息。
四、设计感悟
对于这种B端门户类项目，设计的难点往往不在于“炫酷”，而在于如何在海量信息中建立秩序。通过层级划分、动效引导和数据可视化，让专业内容变得“平易近人”，这才是高级感的来源。
大家在做类似项目时，也可以多参考一下这种资讯层级的处理方式哦！
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
短信验证码看似简单的6位数字，实则暗藏复杂业务链路与风控挑战。从游戏行业的账号体系保护，到黑灰产攻防的成本平衡，短信防控需要在体验、安全与通道稳定性间寻找微妙的平衡点。本文将深度拆解短信风控的三层防御体系，揭秘那些隐藏在发送按钮背后的业务逻辑与产品设计哲学。
最近 vibe coding 很火，一句话可能就能生成一个登录框。输入手机号、点击获取验证码、填验证码、完成注册，看起来非常顺滑。但真正做过账号体系的人都知道，登录框只是冰山露出来的一角。它下面藏着短信通道、验证码校验、账号注册、设备识别、渠道投诉、供应商评级、黑名单联动等一整套业务链路。
游戏行业尤其明显。游戏是典型的大 ToC 业务，用户规模大、账号价值高、充值场景多、权益体系复杂，只要一个手机号能注册账号，背后就可能对应礼包、首充、拉新返利、渠道结算、虚拟资产交易等利益。利益足够大，黑灰产自然会围上来。
短信验证码本身又是一个很特殊的入口。正常用户收不到验证码，会影响注册转化；异常请求大量消耗短信，会带来直接费用；更严重的是，如果某个短信签名短时间内投诉过多，运营商和通道商可能会对签名降频、拦截，甚至封禁。到这个时候，受影响的就不是几个异常手机号，而是整条正常业务链路。
我之前做过一段时间短信产品经理，对短信下发机制有一些了解。最近在账号风控治理中又重新接触短信相关防控，发现短信这件事看似基础，但真正要做好并不简单。它不是单纯“加一个验证码”或者“限制一分钟一次”就能解决的问题，而是要在成本、体验、识别能力和处置策略之间不断平衡。
这篇文章不讲短信供应商商务选型，也不讲具体攻击脚本。这里我只从产品和风控落地视角，聊一聊比较通用的短信防控实践。
很多团队做短信防控，第一反应是卡“发送验证码”这个动作。这个方向没错，但不够。一条验证码短信从用户点击按钮开始，至少会经过五个关键环节：用户请求、基础频控、风险决策、短信网关、验证码提交。短信发送成功也不是终点，后面还要看验证码是否被提交、是否注册成功、是否触发投诉。
如果只看发送动作，就会漏掉很多重要信号。比如某批请求发送频率并不高，但验证码提交几乎都是秒过；某批手机号分散在不同 IP 上，但设备指纹高度相似；某批请求没有造成注册成功，却造成大量短信投诉。这些都不是单点频控能发现的。
所以短信风控的目标不是“让短信少发”，而是让该发的短信稳定发出去，让不该发的请求在合适的位置被拦下或被二次验证。
这句话听起来像废话，但它决定了产品设计方向：不能只追求拦截率，也不能只追求用户体验。规则太紧，正常用户注册会受影响；规则太松，短信通道和账号体系都会暴露在风险里。
我会把短信防控拆成三层：成本门槛层、行为识别层、分级处置层。
第一层是成本门槛层，用低成本规则挡住最明显的异常请求。第二层是行为识别层，通过设备、请求、提交行为、黑名单等多维数据识别复杂机器流量。第三层是分级处置层，对疑似风险请求不简单误杀，而是通过上行短信、扫脸、人机挑战等方式进一步确认。
短信风控最基础的能力一定是频控。不要嫌它简单，很多线上事故就是因为最基础的频控没做好。
频控通常围绕手机号、IP、设备、账号、业务场景展开。比如同一手机号 1 分钟内最多发送 1 次，1 小时最多发送 5 次，24 小时最多发送 10 次；同一 IP、同一设备或同一浏览器指纹也要有对应阈值。
这里有一个容易被忽略的问题：自然时间和滚动时间。
自然时间是按照固定时间边界计数，比如“今天 0 点到 24 点最多 10 次”。滚动时间是从当前请求向前回看，比如“过去 24 小时最多 10 次”。对于短信风控来说，最佳实践通常是滚动计数。
为什么？因为自然时间存在边界漏洞。假设系统按自然日计数，攻击者可以在 23:58 打满当天额度，0:01 之后额度清零，又继续请求一轮。规则看起来没问题，实际防控被时间边界绕开了。
滚动时间实现成本更高，尤其在数据量大时会涉及缓存、滑动窗口、聚合统计，但它更符合风控场景。产品经理在写需求时，不要只写“24 小时最多 X 次”，最好明确口径：是自然日还是过去 24 小时；是按手机号计数，还是手机号 + IP + 设备组合计数；命中阈值后是直接拦截，还是延长冷却时间。
除了频控，图形验证码也是成本门槛层的重要工具。很多人觉得图形验证码很基础，但从攻防视角看，它贯穿整个短信盗刷防控过程。
常见的图形验证码包括滑动拼图、文字点选、图标点选、语序选词、空间推理、障碍躲避等。验证码的价值不只是“让用户做一道题”，而是提升机器请求成本，并给系统提供行为数据，比如轨迹是否自然、完成时间是否异常、同一设备是否高频通过。
当然，验证码不是越难越好。注册登录是高转化场景，如果一上来就给所有用户弹复杂验证码，正常用户会被一起惩罚。更合理的方式是分层触发：低风险用户无感通过，中风险用户触发轻量验证码，高风险用户触发更强验证。
号段识别也属于基础能力。比如 170、171、165 等虚拟运营商号段在某些业务里风险更高，可以根据业务情况做更严格的策略。但不建议把虚拟号段简单等同于黑名单，直接全量拦截会带来误伤。更稳妥的做法是提高验证等级、降低发送频次、叠加设备和 IP 风险判断。
成本门槛层解决的是“别让明显异常请求轻松进来”。它不追求特别聪明，但必须稳定、清晰、可解释。
第一层规则可以挡住一部分粗糙流量，但挡不住更成熟的黑灰产。成熟黑产不会只用一个 IP、一个手机号、一个设备猛冲，它会拆散请求，分布式地试探系统阈值。这时候就需要进入行为识别层。
行为识别层的核心是多维数据。产品上至少要能拿到手机号、IP、设备指纹、账号、渠道、业务场景、验证码生成时间、验证码提交时间、提交结果、失败次数、请求来源、前端环境等信息。没有这些埋点，风控就只能靠猜。
设备指纹是这里的关键能力。它不是单纯拿一个设备 ID，而是综合浏览器、系统、分辨率、时区、字体、Canvas、网络环境、客户端版本等信息，生成相对稳定的设备标识，用来识别“换手机号、换 IP，但设备特征高度相似”的请求。
前端请求加密和参数校验也很重要。它不能从根本上防住所有攻击，但可以提高脚本化请求门槛。比如短信发送接口不应该裸奔，前后端需要对关键参数、时间戳、随机串、业务场景进行校验，避免接口被直接复用。注意，这类能力的定位是提高成本，不是绝对安全，真正的风控仍然要靠服务端决策。
验证码提交行为同样值得关注。正常用户收到短信后，通常会有一个阅读和输入过程。如果大量验证码都在极短时间内提交成功，就要怀疑是否存在接口自动化、短信接收平台、批量控制设备等风险。这里不用把规则写死成“多少秒一定异常”，而是结合业务基线做分层判断。
黑名单库是行为识别层的另一个基础设施。它不应该只是一个静态表，而应该是动态更新的风险资产库，至少包含以下几类：
黑名单最怕两个问题：一是更新慢，等运营手动导入时风险已经过去；二是没有过期机制，半年以前的风险数据一直影响正常用户。比较好的方式是给名单设置来源、等级、命中原因、过期时间和复核机制。
行为识别层的重点不是把规则写得多复杂，而是把原本分散的数据串起来。手机号、IP、设备单独看都正常，组合起来可能就不正常。风控能力的差距，很多时候就在这个“组合判断”里。
短信风控最难的地方，不是拦截黑产，而是不误伤正常用户。尤其在游戏业务里，用户注册和登录往往发生在高情绪场景：新游开服、活动领取、好友邀请、充值回流。这个时候如果正常用户收不到验证码，或者被连续拦截，很容易直接流失。
所以对疑似风险请求，不一定要直接拦截。更好的方式是分级处置。
低风险请求直接放行；中风险请求增加轻量验证，比如图形验证码或冷却时间；高风险但不确定的请求增加强验证，比如上行短信、人脸识别、实名校验；已确认风险请求再直接拦截。
上行短信是一个特别值得重视的能力。所谓上行短信，就是用户主动发送指定内容到指定号码，系统收到后完成验证。它本身不复杂，但在实践中并不是所有短信供应商都能稳定支持上行能力，而且接入、解析、回调、状态同步都需要额外建设。
为什么它有效？因为它把验证动作从“企业给用户发短信”变成“用户主动发短信给企业”。对正常用户来说，虽然多了一步，但能完成；对批量盗刷来说，成本会明显上升。尤其在疑似风险但不敢直接拦截的场景，上行短信是一个不错的中间态。
扫脸、人脸识别、实名校验也属于强验证手段，但要谨慎使用。它们的验证强度高，用户打扰也高，不适合放在短信发送前的常规链路里。更合理的触发场景是：高价值账号、疑似批量设备、异常领取权益、异常充值返利、账号找回等风险更高的业务节点。
把这些动作放在一起看，可以整理成一张风险分级处置矩阵。它的价值不是给所有业务一个固定答案，而是帮助产品、风控、研发和客服对齐“什么情况该怎么处理”。
这里有个产品细节：强验证的提示文案要解释清楚。不要只弹一句“请求异常”，可以写成“当前环境存在安全风险，为保护账号安全，请完成验证后继续”。这类文案不是为了好看，而是为了减少用户的不确定感和客服压力。
分级处置层的本质是把风险决策从“是/否”变成“放行/观察/验证/拦截”。这会让系统更复杂，但也更符合真实业务。
如果要把短信风控真正跑起来，前台策略只是其中一部分，后台能力更重要。
第一套是规则配置后台。产品和风控同学需要能按业务场景配置规则，比如注册、登录、换绑、找回密码、领取礼包分别使用不同阈值。不要把所有场景套一套规则，注册场景可以更严格，登录场景要更重视老用户体验，找回密码则要更重视账号安全。
规则配置后台最小要支持“业务场景、统计维度、时间窗口、处置动作”四类配置。配置粒度太粗，规则会互相误伤；配置粒度太细，又会难以维护。比较稳妥的方式，是先搭一个能覆盖 80% 场景的基础模型。
第二套是监控看板。短信风控必须看数据，至少包括发送请求量、发送成功率、验证码提交率、注册转化率、拦截量、强验证通过率、短信成本、供应商失败率、投诉量、签名状态等。只看拦截量没有意义，拦截量升高可能代表风控有效，也可能代表正常用户被误伤。
监控看板的核心不是把指标堆满，而是同时回答三件事：黑产有没有变多、正常用户有没有受伤、短信通道有没有变差。
第三套是应急开关。短信通道一旦异常，影响会非常快。比如某个供应商失败率升高，要能快速切换通道；某个规则误伤，要能快速降级；某个签名投诉异常，要能暂停对应场景或切换备用签名。没有应急开关，风控系统本身也会变成风险源。
我个人建议，每一条核心规则都至少配三样东西：命中原因、处置结果、回滚方式。命中原因用于排查，处置结果用于复盘，回滚方式用于止损。
还有一个容易被忽略的点：短信风控需要和客服对齐。用户收不到验证码时，第一反应通常是找客服。如果客服后台看不到用户为什么被拦截，只能回复“请稍后再试”，体验会非常差。
第一个坑，是把短信成本当成唯一目标。短信确实有成本，但短信风控不是省钱项目。它的核心价值是保护账号体系、保护通道稳定性、保护正常用户体验。如果只盯着短信费用，很容易把规则收得过紧，最后省了短信费，丢了注册转化。
第二个坑，是只做发送频控，不做提交校验。短信发出去以后，验证码是否提交、提交是否成功、多久提交、失败几次，都是重要信号。只管发送不管提交，就像只看门口排队，不看进店以后发生了什么。
第三个坑，是规则没有分场景。注册、登录、换绑、找回密码、支付确认的风险完全不同，规则必须和业务语义绑定。
第四个坑，是黑名单只进不出。风控名单不是垃圾桶，不能什么都往里扔。没有过期、没有降级、没有复核，时间久了必然误伤。
第五个坑，是把图形验证码当万能药。验证码能提高攻击成本，但也会提高用户成本。它应该是动态策略的一部分，而不是所有用户都必须跨过的一堵墙。
短信本身是个很简单的服务：生成验证码、调用供应商、用户收到、输入校验。简单到很多人会觉得这不就是一个接口吗？
但在真实业务里，短信又一点都不简单。它连接着账号注册、用户体验、营销成本、通道稳定、投诉治理和黑灰产攻防。尤其在游戏这种高用户量、高利益密度的行业里，短信入口做不好，后面会牵出一串问题。
我理解的短信防控，不是单纯把黑产挡在门外，而是建立一套可持续的平衡机制：前面用成本门槛层挡住明显异常，中间用行为识别层判断复杂风险，后面用分级处置层减少误伤。再配合规则后台、监控看板、应急开关和客服可解释能力，整个体系才算真正能跑起来。
回到开头说的 vibe coding。AI 可以很快帮你做出一个登录框，但登录框之下的业务，不会因为页面生成得快就自动消失。短信风控就是这类“看起来不起眼，但出了事很疼”的底层能力。
产品经理真正要补的，往往不是某个按钮怎么画，而是按钮按下去之后，系统如何判断、如何保护、如何兜底。
短信验证码只有 6 位，但它背后的产品设计，远不止 6 位。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
X 上看到一个 Codex 的使用案例，将 Codex 内置一个图片标注工具，这样修改标注工具里的图，Codex 就能读取数据进行重新生成，案例分享给大家
通过内嵌浏览器 + Codex Image 2 + 无限画布（Excalidraw / tldraw），构建一个多模态画布系统，让 Codex 直接读取画布的 Base64 标注图，实现“看图理解 + 生成”。
这样 Excalidraw / tldraw 就不只是白板，而是变成前端的 Multi-modal Canvas，用来拼一个低配但可控的生图工作流。
其他在线白板工具：
此想法的原帖： https://x.com/zhongerxin/status/2068027614300893383
原作者 Cowart：Codex + 无限画布工具插件开源： https://github.com/zhongerxin/cowart#
换白板工具原帖： https://x.com/cellinlab/status/2068193900570046502
操作步骤原帖： https://x.com/liyue_ai/status/2068545434818400526
标签页分组功能允许您在 Figma 桌面应用程序中对标签页进行分组、着色、展开和折叠。保持井然有序，再也不用担心找不到要查找的文件。
网址：https://www.figma.com/release-notes/
FigmaEX 客户端已经更新到 126.6.8 版本，可自行下载安装。
展示收藏了非常多 iOS 的经典应用图标，并支持搜索，非常喜欢被精心设计的图标包围的充实感，后续会开放 macOS 应用图标库。
网站收集了一波应用商店的优化图片和用户引导流程的设计案例。
App Store 截图库包含，350 万+ 截图 、40 万+ 应用，永久免费
网址：https://screenshotsclub.xyz/
每个应用程序都需要矩阵加载器，55+个免费且开源的加载器，基于 React、TypeScript、Tailwind CSS 和 shadcn 构建。安装一个，复制代码，然后将其变成属于你自己的作品。
网址：https://dotmatrix.zzzzshawn.cloud/
精选 X 中设计、交互的最佳设计，每日更新，并且还有应用截图和应用图标等信息，AI 时代提升"看"的能力
umanmade 是一个由真人创作的数字作品精选目录，收录优秀的设计灵感和交互案例
免费的、随时可用的 Figma UI 块库。 复制任意组件，将其粘贴到你的文件中，即可立即开始构建。 非常适合着陆页、布局和 UI 部分。
网址：https://blocks.lander.studio/
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：当AI能够深度理解'团圆经济'的情感密码，节日营销正在从流量争夺升级为心智渗透的精准战役。58同城在中秋期间以'好岗离家近'为核心，通过AI生成融合城市地标与职业场景的个性化视觉，在6大城市实现千万级曝光的同时提升简历投递量40%。这场品效合一的实践揭示了一个关键趋势：AI不再是冰冷的效率工具，而是情感共鸣的放大器——它让招聘广告从信息堆砌转向情感连接，真正实现了品牌温度与业务增长的双赢。
当招聘广告超越“岗位罗列”的刻板模式，设计便成为承载这份向往的情感桥梁。
今年中秋，58同城以“好岗离家近，中秋真团圆”为核心，聚焦本土情结浓厚的二三线城市，发起一场整合营销。
本文将拆解这场战役中，AI赋能的设计创新如何不仅实现千万曝光与百万业绩增长，更让招聘营销升维为助力人们“归乡筑梦”的情感依托，让归乡就业的美好愿景通过视觉语言落地生根。
项目首先基于人口特征、营销资源与业绩需求，精准圈定长沙、成都、西安、无锡、南昌五大目标城市。这些城市的共性在于春节/中秋返乡率超80%，乡土情结与团圆氛围尤为浓郁。
执行层面：项目聚焦6大城市的24个核心商圈，选择电梯内、户外大屏、公交站亭三大高频触达渠道。
主视觉采用“品牌区+创意区”双分区布局：左侧传递“好岗离家近”的核心主张，右侧则分别针对B端企业（展示招聘实力）与C端求职者（突出岗位优势），引导“求职者投递-商家入驻”的双向转化。
AI设计的核心价值，在于让“情感共鸣”与“高效落地”并行不悖。本次项目中，AI技术贯穿创意生成、视觉优化全流程，既精准传递“团圆+留乡”的情感内核，又破解了多城市定制、短周期交付的效率难题，实现双重突破。
设计提案方向：
设计紧扣“中秋团圆”与“留乡就业”的双重诉求，以主题文案将求职需求与家庭情感深度绑定，精准触动目标人群的“本土情结”。
创意构思沿两个方向展开：
「中秋+商圈实景」方向提案：
快速建立“本地招聘”的直观认知，通过融合城市地标与品牌色，结合 “中秋团圆” 节点，延续 “好岗离家近” 的核心诉求，同时针对不同城市定制化文案（如西安的“照的见你的未来”、成都的“岗位和火锅一样沸腾”），既传递就业价值，又契合城市气质，激活留乡就业的情感需求。，让城市印记成为情感纽带。
「中秋+地标+职业人物」方向提案：
采用真实场景与AI生成插画人物相结合的方式（如职场女性与城市景观、特色元素的融合），画面生动富有层次，打破传统招聘广告的单调感。
最终方案：
AI技术在此次项目中深度融入从创意到落地的全流程，实现“多快好省”的突破：
创意图像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化场景，使AI元素与实景自然衔接，直观传递信息，降低用户理解成本。
高效素材处理：
即梦4.0：
字体设计：几分钟内完成字体设计方案。
处理图片：快速调整建筑角度、优化图片内容，适配户外大屏的传播需求，大幅减少后期耗时。
即梦3.0：
生成图片：月亮的质感与主文案的艺术化呈现，通过 AI 技术实现视觉吸引力，既保证节日氛围的营造，又让文案具备强记忆点。
卡通插画：效果比4.0优秀
在插画生成上表现卓越，通过精准指令，快速产出风格统一的本地职业形象（如成都外卖小哥、西安青年群体），传递“本地工作的愉悦感”，效率远超人工。
关键词参考：
“一个外卖小哥抱着熊猫玩偶，大步跑，绿色系工作服，开心地笑，黑色单线描边，扁平插画，炫彩配色”
“一个女孩面对手机视频通话，身穿衬衫，坐姿端正，张口说话，居家环境，黑色单线描边，扁平插画，橙色系配色”
“5个男女青年，抬头看前方，一人手指前方，全身，站立，背影，时尚穿搭，黑色单线描边，扁平插画，丰富配色”
具体成效：
创意阶段：半天生成4个完整方向，传统方式需2-3天。
多城市适配：快速产出兼具系列感与地方特色的视觉方案。
修改优化：响应客户反馈的速度提升70%以上。
基于“一套核心视觉，多场景适配”原则，AI扩图、高清修复，协助快速延展生成线下物料、线上专场Banner、长图海报等多尺寸物料，确保线上线下品牌形象统一，强化用户认知。
AI赋能的设计创新，本次设计通过情感、商业、品牌三大逻辑，实现“品效合一”核心目标。让设计不仅是视觉呈现，更实现了品牌价值与业务增长的双重落地。
1.情感逻辑：激活本土情结，拉动C端转化。AI设计精准触达留乡需求，让“像鸟飞往自己的山”不再只是心理期许，而是有具体岗位支撑的现实可能。数据印证成效：长沙、成都、西安等地线上专场简历投递量增长40%，“本地岗位”搜索量上升62%，有效拉动C端用户参与度。
2.商业逻辑：精准赋能B端，超额完成业绩。对B端商家而言，精准广告投放是核心需求。通过“行业+地域”的定制化广告设计，有效提升了商家投放意愿与合作转化。
3.品牌逻辑：沉淀长期认知资产。设计围绕“贴近受众、强化认知、促进转化”原则，将“提供家乡好工作”的营销逻辑，拆解为“明月+地标+文案+品牌信息”的直观的视觉符号组合，降低用户信息理解成本。通过品牌色、视觉等符号在多场景的重复曝光，持续强化“找本地好工作，就上58”的用户心智，使品牌从工具平台升级为“助力团圆”的伙伴，构筑独特的品牌竞争壁垒。
本次实践为行业带来核心启示：AI是设计师的“超级助手”，其核心价值在于提升效率与精准度。未来的品牌设计应聚焦于 “策略为先，AI赋能，情感共鸣”的融合模式——以策略为导向，用AI提效，最终以情感打动人心。
打动人心的永远是对人性的洞察和情感的共鸣：
对招聘品牌推广而言，这打破了“信息堆砌”的传统广告模式；对更广的行业来说，则示范了“AI赋能设计，设计驱动品效”的新路径。技术终究是工具，而深度的策略思考与人文洞察，永远是设计师不可替代的核心价值。当AI与品牌策略、情感共鸣深度结合，营销才能实现真正的突破，为品牌创造可持续的长期价值。
58同城此次中秋品牌营销项目，正是技术理性与创意感性完美融合的例证。用AI实现高效精准的落地，用设计传递深刻的情感价值，最终成就了品牌声量与业务增长的双赢，也为行业提供了可复制的品效合一实践范本。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
近期兰亭妙微团队完成了一个智能制造领域的B端设计项目，今天就来和大家分享一下设计思路和优化过程。
B端产品的设计核心，往往在于如何在复杂的业务逻辑中，理清头绪，让关键信息高效、直观地呈现给用户。这次的优化正是围绕“高效”二字展开。
在确定整体风格时，我们主要遵循了三个原则：
1、品牌感：采用与客户品牌一致的色调和设计语言，确保产品系列的统一性，强化品牌认知。
2、简洁性：页面设计的核心是“化繁为简”。我们将重要的数据和预警信息突出展示，减少不必要的视觉干扰，提升信息的可访问性和可用性。
3、高效性 ：通过精简的界面布局、扁平的层级结构和直观的信息展示方式，力求让用户在短时间内找到所需信息，从而提高工作效率。
核心设计思考与优化
1、导航重塑：聚焦核心内容
【弱化导航】我们弱化了导航栏的背景，打造沉浸式的浏览体验，让用户能将更多注意力聚焦在页面核心内容上。
【横向折叠】侧边导航采用了可横向折叠的设计，在需要时可以收起，为数据展示区释放出更多横向空间，承载更多内容。
2、布局重构：信息分区更清晰
我们将整个驾驶舱页面重新规划为三个核心区域，让信息架构一目了然：
【左侧导航区】相比顶部导航，左侧导航能展示更多条目，且符合用户从上到下的自然浏览习惯。我们增加了收起功能，方便用户在专注处理信息时大化内容区域。同时，菜单背景叠加工厂的作业场景图， subtly 突出了软件的行业主题。
【中间信息展示区】这是页面的“C位”。顶部是主题卡片和可自定义的快捷入口；中部和下部则是核心数据图表展示区，图表颜色严格遵循品牌规范，在传递信息的同时也强化了品牌感。
【右侧个人信息区】将个人信息、待办事项和报警信息整合为卡片形式。
【待办任务】这是新增的模块，根据不同角色的业务人员展示不同的待办内容，非常实用。
【报警信息】将原有的列表形式进行了优化，重点突出报警等级和标题，让异常情况更加清晰明了，便于快速响应。
3、数据可视化：提升管理效率
借助图形化手段，将复杂、抽象的数据条理清晰地传达出去。我们根据每个模块的业务性质，为其选择了合适的图表类型，让数据“自己说话”，有效提升了线上管理的效率。
这次设计优化，不仅是一次视觉上的升级，更是对业务流程和用户体验的深度思考。
希望这个案例能给同样在做B端设计的你带来一些灵感！
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在B端产品设计的世界里，色彩不仅仅是视觉元素，它还承载着信息传递、用户体验和品牌识别的重要角色。兰亭妙微UI设计公司深入探讨了色彩空间理论在B端设计中的应用，从基础的色彩空间概念到如何在实际工作中运用这些理论，为设计师提供了一套科学的颜色搭配和管理方法。
对于 B 端产品而言，我们经常会和颜色进行斗争。
比如在工作当中，开发没有正确还原颜色、不知道如何进行色彩配置、以及对于 B 端产品而言，究竟应该如何协调科学的进行颜色的搭配～
最近会讲颜色的部分，整体会分为四篇文章：B 端设计如何理解色彩空间、B 端产品怎样合理搭配颜色、B 端项目的视觉风格、B 端项目颜色的实战技巧。
本篇文章是第一篇，我们先来聊聊产品配色的基础 色彩空间与颜色管理。
不知道各位同学是否遇到这种情况，当你在调整颜色时，就是在漫无目的的在拾色器上来回游走，在被问到为什么要选择这个颜色时，也茫然无措，这时候的你作何感想？
所以颜色还原需要熟练的掌握色彩空间，并配合屏幕进行颜色管理，才能够让设计顺利落地。但颜色其实过于抽象，因此我们将整体内容进行简化，多和大家聊聊在理论背后究竟应该如何与工作内容进行结合。
首先我们先说说色彩空间。
色彩空间又叫色彩模型，它是为了让系统能够准确地描述颜色、使用颜色，进而定义出来的一种颜色组织方式。
比如有一排随机颜色，要按特定规则排列，你会怎么做？我相信，我们首先想到的便是按照不同的色相进行归类。
如果颜色变为10000个，又该怎么排列呢？因此，为了让企业更好地使用颜色、设计师更便利地选择一致的颜色，行业中便提出了色彩空间的概念。
色彩空间其实很简单。因为我们需要使用颜色，且不同人群对颜色的需求不同，所以颜色的排列方式会存在差异。
比如，行业中较为出名的潘通色彩体系，其实是基于印刷行业制定的一种特殊色彩空间；CMYK是为印刷从业者提供的、便于他们更好地进行物料印刷的色彩空间；Lab是一种更强调色彩亮度的色彩空间。
因此，行业会根据颜色的不同规律和自身使用需求，总结整理出不同的色彩空间。
我们目前在工作当中，主要都是聚焦于屏幕当中，因此影响颜色呈现的也就变为：
在我们细致讲解色彩空间的部分时，我们先来了解三个重要的概念。
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
HSB （也叫 HSV）就是通过颜色的 色相、饱和度、亮度 来进行表示。
在色相当中，由于颜色的呈现是色环的方式，因此在数值上是以 0-360 度来进行表示的，在设计软件里面，我们也只能输入所对应的数值。
同时饱和度与亮度都是以百分比的形式进行呈现，饱和度越低，相对应就会给颜色增加白色，使其更灰；亮度越低，就会增加对应的黑色，让其更深。
由于 HSB 的色彩空间的分类模式非常有利于我们进行颜色的调整，因此我们在日常调色时其实会经常用到。
比如日常工作当中，假设我们需要设计一组图标，根据 HSB 颜色的基本原理，我们其实只需要调整不同的色相，就能够得到不同的图标颜色。
但… 颜色上依旧会存在问题。
你会发现当我们调整了色相过后，整体的颜色并没有形成统一。原因在于我们人眼对于 黄绿色的感知 会和红色、蓝色有所不同，我们通常在看黄绿色时会更为刺眼，因此在设计层面上需要单独调整。
所以在 HSB 当中的颜色逻辑上，也并没有解决颜色一致性的问题。于是在 2021 年 Google 提出一种全新的色彩模式，HCT。
HCT 首先会将颜色当中的 感知度、亮度 进行结合，对之前的 HSB 重新调整。
在颜色层面上主要分为：Hue：色相、Chroma：色度、Tone：色调
色相与色度和之前基本类似，但色调上优化了黄绿色凸显问题，让人眼的感知度也加入到了色彩空间当中，使其颜色更为准确。
同时色彩空间的呈现，优化了颜色渐变的流畅性，我们会发现整体的渐变感觉会更为自然。
那为什么 Google 想要做 HCT？
其实因为 Material Design 当中会强调设计的一致性和灵活性，在功能设计上，需要增加一个根据屏幕当中的图标生成与其风格一致的壁纸。
但在之前无论什么样的色彩空间都不能准确的还原颜色。现在就提供了一个可靠的色彩基础，能够让我们在不同的设备、平台和应用场景下，都能够生成具有一致性的色彩方案，同时也能更好地适应各种主题和风格的变化，如亮色模式和暗色模式的切换。
比如，还是以上面这个案例，我们使用 HSB 与 HCT 对颜色进行的色相的调整，那得到的结果明显会发现 HCT 会更加准确。
那 HCT 就真那么完美无瑕？
其实也不然，因为 HCT 色彩空间出现时间较晚，所以在使用上也会有很多问题。
这么深奥的色彩空间，到底要如何使用？
因为 HSB 是设计师最容易理解的色彩空间，因此我们在调色时需要根据数值来进行颜色的调教。
比如说你的颜色很脏，不够干净。其实就是在强调 HSB 当中使用了更多的黑色，我们便可以调整到这个色彩空间当中，去增加 B 的值（也就是第三个输入框）
比如说你的字体很灰，不够明确。
其实就是在说 你的亮度太高，需要减少亮度，也就是 H 的值（也就是第一个输入框）
因为每一个屏幕所显示的颜色其实都不太相同，因此色彩调整时要多看数据，观察数据之间的对比变化。
比如以 B 端产品的中性色为例，现在系统当中所使用的正文颜色为 #333333，看到过后就明确知道颜色深度不够、颜色也不透气。
我们就会按照，先确定颜色色相，为灰色偏蓝色，因此在色相当中需要拖动色环找到合适的色相；
紧接着确定饱和度，因为要偏蓝色，但不宜过多，因此整体的数值只会在 1-5 之前浮动；
最后确定深度，之前颜色过于浅，需要加深，所以直接减少，变为 22 左右的数值。
其次在判断颜色时，也会更具章法。
在多辅助色的情况下，我们可以使用 HCT 对颜色进行判断。
对于日常工作来说，我们可以使用 Figma 当中的 color Space 插件 进行日常的色彩管理。在今后遇到类似同类型图标时，我们可以使用 HCT 的方式快速生成发散色板，帮助我们进行色彩搭配。
最后在 B 端系统当中，会存在较多颜色搭配的场景。
像是图表设计、自定义系统主题，原来只能通过系统预设固定颜色的方式进行解决，而现在 Google 也将这套计算公式开源，也就是说程序员可以直接引用 HCT 的色彩空间，将颜色配置的权限给到用户，通过颜色的调整，呈现用户想要的颜色内容。
对于屏幕显示的色彩空间而言，有部分内容我们也是要重点关注。比如在 B 端设计当中，色彩还原老是出问题，那我们就可以通过屏幕的色彩空间进行判断。
sRGB（standard Red Green Blue）是由惠普公司和微软公司共同开发的一种标准色彩空间，目的是提供一种通用的色彩标准，使得在不同的设备（如显示器、打印机等）之间能够实现相对一致的色彩显示。
对于 sRGB 来说，它是我们作为设计师最为重要的屏幕显示色彩空间，因为它通用性强，所以大多数普通的电脑显示器、网页浏览器等都默认采用 sRGB 色彩空间，这样在浏览网页、查看普通的数码照片时，可以获得比较稳定的色彩效果。
所以我们在做设计时，通常都会将屏幕与软件，都调整的 sRGB 的空间当中，这样就能够最大限度保证色彩的一致。
Display P3 是基于 DCI – P3 色彩空间衍生而来的，主要用于消费级显示器设备。它在 DCI – P3 的基础上进行了一些调整，以适应显示器的特性。
整体而言 P3 色彩空间显示出来的颜色会更加 生动、艳丽，但是这会和你的设备密切相关。目前行业中只在苹果设备以及部分高端显示器才会使用，所以我们在设计时需要考虑自己产品的受众，这一设备是否普遍使用。
最后，我们总结一下：
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com