兰亭妙微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。
兰亭妙微UI设计公司：今天分享的是「图标设计准则」。图标是界面设计里的 “刚需元素”，一个小图标能快速传递很多信息。好的图标需要兼顾简洁、现代、友好。但图标的尺寸很小，设计时既要严格遵守设计规则，又得清晰表达信息，这样才能保证整套图标的风格统一、辨识度高。
今天就来聊聊大厂在用的图标设计原则和设计规范，配合案例进行设计分析~
给大家举个例子，就说下面的小船图标，想让图标清晰好认，就得做减法，那么用正面的简约船身造型最合适。
如果图标设计的过于细致，例如图标中添加了船帆、桅杆或者旗帜等细节，太写实的图标不仅会降低识别速度，还会破坏整套图标的视觉统一性。
设计总结：
✅ 简化图标造型，提升清晰度和辨识度
❌ 拒绝过度写实，避开复杂繁琐的设计
使用几何图形和统一的基础形状来设计图标，能打造出清晰醒目的视觉感受。哪怕结构简单，也能保持清晰的形态，缩小到小尺寸时也照样容易分辨。
反过来讲，尽量少用那些纤细、松散的不规则形状，它们会破坏线条的连贯性，让整套图标看起来乱糟糟的，没个统一的调性。
设计总结：
✅ 靠几何图形和统一的造型，打造醒目视觉效果
❌ 少用纤细、不规则的形状
这里给大家看一组风格统一的图标示例。对品牌识别和系统适配来说，保持图标集的视觉一致性太重要了。
要是把不同风格的图标混在一起用，用户根本没法把它们当成“一家人”。所以同一套图标里，不管是形状、线条粗细，还是比例、边角处理，都得按同一个标准来。
设计总结：
✅ 单套图标集里视觉风格要保持统一
❌ 千万别混搭不同风格的图标
在谷歌的Material Design 3 设计规范中，标准 (基线) 图标尺寸是24dp×24dp，设计时建议按100%的比例来做，这样能保证像素级的精准度。
除了这个标准尺寸，还有20dp、40dp、48dp这几种常用尺寸可以选：
20dp：适合用在桌面端、紧凑布局，或者那些小尺寸的视觉元素
40dp/48dp：针对显示器、大屏幕，还有标题栏这类特殊场景
设计图标时，内容需要放在有效区域内里。有效区域是指页面滚动或适配不同设备时图标不会被遮挡的“安全可视区域”。
如果想让图标的视觉冲击力更强，可以让内容延伸到有效区域和裁剪区域之间的留白处，但不能超出裁剪区域，不然图标很容易被裁剪显示不全。
具体要怎么布局呢？看下面这两点就够了：
① 有效区域：图标内容要放在20dp×20dp的范围内，四周各留2dp的边距
② 边距：给有效区域留出2dp边距，既能让图标和周围元素拉开视觉距离，又能让整体看起来更平衡
接下来通过一个图标案例来简单总结一下：
上图从左到右分别代表了在有效区域、在有效区域和裁剪区域、在裁剪区域之外创建的图标案例。
设计总结：
✅ 图标内容保持在20dp×20dp的有效区域里，记得留2dp边距⚠️ 想加视觉冲击力？内容可以延伸到边距区域
❌ 任何情况下，图标都不能超出裁剪区域
① 网格和关辅助线
一套图标中可能有的是圆形，有的是方形，那怎么才能保证形状不同的图标保持视觉大小的一致性呢？
这种情况大家在设计图标时应该都碰到过，解决方法可能大多是通过眼睛对比查看，把看着小的图标调大一些或者把看着大的图标调小一点。这种方法效率不高，而且设计出来的图标大小不容易保持一致性。
这里提供一个更科学和高效的辅助图标设计方法——使用网格和辅助线，照着这些辅助线来设计图标，能轻松保持比例一致。
例如常用的24dp×24dp图标网格，由正方形、圆形、竖矩形、横矩形这四种基础辅助线构成。它们就像图标的“骨架”，能帮所有图标保持统一的比例和对齐效果，哪怕放大10倍看，结构也照样清晰。
给大家拆解一下这四种辅助线：
方形辅助线：边长18dp，是图标的基础平衡基准。比如图表类图标就可以照着这个方形来画，保证比例稳定。
圆形辅助线：直径20dp，用来设计圆润平衡的图标。像地球图标用这个圆形打底，就能和其他图标和谐搭配。
垂直矩形辅助线：高20dp、宽16dp，适合强调纵向比例的图标。比如文档图标围着这个竖矩形设计，比例会特别清晰。
水平矩形辅助线：高16dp、宽20dp，适合横向比例的图标。像邮件图标用这个横矩形当基础，形状会很均衡。
一个完整的图标，由圆角、起始/结束点、内部形状、外部轮廓等组成。
这里重点说下大家容易踩坑的“圆角”的设计：例如下图的银行卡图标，采用外角2dp圆角、内角尖角的设计，这样既柔和又利落。
如果把圆角做得太大，如下图左侧文档图标，图标的辨识度就会下降；如果一个图标中混用不同半径的圆角，如下图右侧的图标，整个图标看着就会很杂乱。
设计总结：
✅ 按规则设置圆角，统一圆角半径
❌ 避免圆角半径过大/半径混用的情况
推荐的图标描边粗细是2dp或常规 (400)，也可以根据需求灵活调整，例如在MD3设计规范中就提供了100 (细)到700 (粗)的多种选择。
这里有两个小技巧：
设计直角线性图标时，描边的末端尽量做成直角，例如下图左侧的箭头图标，45度切割的直角就很清晰；在下图右侧的添加图标中，内部的加号也采用了2dp的描边粗细，与外轮廓保持一致。
另外要注意一套图标需要保持相同的描边粗细。如果描边x粗细不一致，不仅会模糊图标形状，还会破坏视觉一致性。
设计总结：
✅ 描边粗细保持统一，直角图标末端也用直角
如果图标需要一些精细的细节，可以通过一些灵活的调整来提升辨识度，但不能扭曲基础的几何形状或破坏整体比例。
比如回形针图标，为了在24dp的空间里放下多个曲线，可以把 2dp的标准描边粗细微调成1.5dp；再比如拉面图标，下面的碗作为托底采用2dp的粗描边，上面的筷子拉面等元素细节更多，则采用1.5dp的细描边，让细节更清晰。
还有一个小原则：设计复杂图标时，尽量保持正面视角，别做倾斜、旋转的等距或者3D效果——多余的深度感会增加识别难度。
设计总结
✅ 正面视角设计，细节微调不跑偏
❌ 少用倾斜、旋转的等距/3D呈现方式
图标是一种高效的视觉语言，能打破语言壁垒，快速传递信息。但它的优势，必须建立在清晰的结构和统一的规则之上。
设计时基于标准的辅助网格走，保持比例均衡、视觉重量一致，设计出的图标才不会喧宾夺主，反而能提升整个产品的用户体验。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。TravelEase 作为面向中小企业的 B 端差旅管理平台，完整落地品牌 VI 系统、PC 管理后台、自适应官网、移动端 H5、社媒营销物料全链路视觉设计，打通从品牌曝光、线索获客、后台操作到付费转化全商业闭环。本文从行业差异化定位、用户分层运营、全链路产品架构、品牌视觉标准化、商业落地价值五大维度完整拆解，为有数字化差旅升级需求的企业提供可落地的设计参考。
一、商旅赛道市场痛点与双角色用户分层设计策略
1. 行业现存四大体验短板
出行渠道碎片化：飞机、高铁、包车、轮渡需在多个平台分别预订，行政人员需跨平台汇总行程、票据，人力损耗大；
企业预算无前置管控：员工自主订票易超出公司差旅标准，财务只能事后核对，缺少事前政策拦截功能；
线上线下品牌视觉割裂：官网、后台、宣传海报、App 图标视觉语言不统一，企业客户难以建立稳定品牌信任；
多端适配失衡：后台偏重电脑操作，移动端仅简化订票功能，缺少同步行程、查看报表的轻量化入口。
2. 两类核心用户差异化界面权重设计
决策使用者：企业行政 / 财务负责人（PC 端核心人群）
核心诉求：批量预订、差旅预算配置、月度统一对账、员工出行监管、多维度差旅报表。PC 后台采用固定侧边全功能导航，首页优先展示政策设置、历史订单、账单汇总模块，大尺寸表单、多卡片并行布局适配批量办公操作。
高频使用者：企业商务出差员工（移动端核心人群）
核心诉求：快速查航班、一键下单、查看行李额度、随时改期取消。移动端删减复杂管控功能，首屏直接露出交通搜索表单，弱化报表、政策配置等低频功能，优先保障订票流程轻量化。
二、五阶商业服务闭环：从品牌触达到付费留存完整链路
整套设计围绕企业 SaaS 商业转化路径搭建，每一环视觉规范统一，降低客户认知成本，提升转化效率：
品牌识别触达层：原创票据融合飞机图形 Logo，衍生线性图标、3D 立体 App 图标、线下门头标识，晴空蓝主色建立高效、安全的出行品牌印象；
公域引流层：标准化社媒信息流海报模板，分实景实拍、扁平插画、行程卡片三类版式，用于社交平台投放获客；
官网获客转化层：PC / 手机自适应落地页，直白传递 “一站式搞定全部商务出行” 核心价值，搭配轻量化商旅插画降低 B 端产品理解门槛；
核心操作层：PC 综合管理后台 + 移动端轻量订票页面，全品类交通预订、行李管理、差旅政策配置功能云端实时同步；
付费留存层：阶梯式会员套餐页面，清晰区分免费基础版、高级付费版、企业专业版权益，引导企业长期付费订阅。
三、四大核心设计模块拆解（商业功能 + 跨端适配双视角）
模块 1：统一化品牌视觉资产库（全项目底层规范）
Logo 提取机票票据为核心识别符号，极简线性线条适配全场景复用；主色调晴空浅蓝，搭配分品类辅助色区分飞机、巴士、高铁等出行工具，建立色彩记忆点；配套统一扁平柔和商旅插画，飞机、城市、出差人物形象贯穿官网、海报、后台空状态，全物料视觉语言高度统一，降低多物料产出成本。
模块 2：PC 端企业差旅综合管控后台（B 端核心操作载体）
采用侧边常驻导航 + 模块化白色卡片布局，四大功能分区清晰划分：
多交通预订区：顶部 Tab 一键切换飞机 / 火车 / 轮渡 / 巴士 / 出租车，机票表单支持往返、单程、多城行程快速切换；
行程配套信息区：右侧可视化行李尺寸重量卡片、乘客证件、舱位价格标签，订票配套信息直观展示；
差旅政策悬浮配置面板：可自定义航班、酒店预算上限、星级标准，员工订票时自动拦截超标选项；
常用航司推荐区：底部横向滚动展示历史航班，减少重复填写起降机场的操作步骤。
模块 3：移动端自适应官网与轻量订票页面（线索转化载体）
手机端完整复用 PC 官网文案、插画、按钮视觉规范，针对竖屏单手操作重构信息层级：
首屏超大标题直击企业差旅效率痛点，蓝色高饱和度行动按钮 “立即体验” 锁定视觉重心；
产品核心优势简化为短句清单，搭配简约商旅插画，降低移动端阅读负担；
会员套餐竖向堆叠排布，适配手机上下滑动浏览，弱化后台管理功能，聚焦 “免费试用” 转化动作。
模块 4：标准化社媒运营物料组件库（长效获客配套资产）
预设三套可复用竖版信息流版式，固定 Logo 放置位、文字层级、航班信息卡片组件，运营人员仅替换图片素材即可快速产出宣传海报，保障对外投放视觉统一，无需每次重新设计版面，大幅缩减营销物料制作周期。
四、商旅赛道专属视觉设计体系：色彩、卡片、信息层级、多端适配色彩语义体系（商务出行友好导向）
晴空浅蓝作为品牌主色，传递顺畅、安心的出行感知；纯白作为页面基底，大面积留白缓解 B 端后台密集表单的压抑感；辅助色区分交通工具：飞机深蓝、巴士暖橙、高铁浅红；功能状态色统一：绿色代表可预订、灰色无班次、蓝色为核心操作按钮，全项目色彩语义统一。
轻量化卡片组件规范
全站统一低圆角、浅淡阴影白色卡片，取消厚重分割线，机票、行李、会员套餐、社媒素材全部复用同一卡片规格，轻量化视觉缓解长时间后台办公的视觉疲劳。
信息层级优先级规则
遵循出行数据优先逻辑：起降机场、时间、票价、舱位为一级放大核心文字；日期、乘客、行李规格为二级辅助信息；差旅政策、详细条款折叠收纳，平衡信息完整度与页面整洁度。
差异化跨端场景适配逻辑
PC 端侧重多信息并行、批量管控操作；移动端精简表单，隐藏政策配置、员工管理等低频后台功能；线下品牌标识强化立体质感，线上图标简化为单色线性，适配电子屏幕显示。
五、项目落地商业价值总结
差异化 B 端赛道壁垒：市面旅游产品多服务 C 端个人出行，本产品深度嵌入企业预算管控、统一对账等行政刚需，精准切中中小企业差旅管理痛点，有效提升付费转化；
全链路标准化视觉降低运营成本：从 Logo、官网、后台到社媒物料统一规范，减少设计、前端、运营三方重复工作量，支持产品快速迭代、营销素材批量产出；
多终端全域场景覆盖：电脑深度管控、手机通勤订票，覆盖企业员工全天碎片化出行操作场景，拉长产品使用时长，提升用户留存；
可复用标准化设计体系：整套品牌 + 产品设计规范可迁移至同类企业服务类 SaaS 项目，具备极高复用价值，也是我们设计团队可落地交付的同类服务方案。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。今天，我们来深度拆解一套 AI 智能财富管理系统的ui设计，从信息架构、配色策略、移动端适配到数据叙事的视觉表达，逐一解析其背后的设计决策。
一、项目产品定位与行业现存痛点
Finpath 是一套覆盖桌面电脑、平板、手机移动端三端协同的 AI 驱动个人综合财富管理平台，面向高净值个人、职场理财人群、自由职业者三类核心用户，一站式整合多银行卡资产、收支流水、投资持仓、预算管控、智能财务咨询。
传统理财工具普遍存在五大核心短板：
资产割裂分散：多张银行卡、储蓄账户、股票投资数据无法统一汇总，用户需要切换多个软件查看总资产，无法直观掌握完整财务状况；
数据分析浅层化：仅简单罗列收支记录，缺少多维度支出拆解、现金流走势、月度预算预警，用户难以定位不必要消费；
缺少智能决策辅助：收支复盘、投资收益分析、预算规划需要用户手动计算，无 AI 自动出具财务优化建议；
多端体验割裂：电脑、手机界面交互逻辑不一致，外出、居家办公查看财务数据操作学习成本高；
视觉体验压抑失衡：多数金融后台深色界面色彩杂乱，数据卡片堆砌密集，长时间复盘账目极易视觉疲劳，缺乏统一规范组件体系。
本产品以「三端数据实时同步 + AI 全链路财务智能分析 + 轻量化深色专业视觉」为核心设计思路，打通资产总览、收支分析、银行卡管理、AI 财务助手、转账支付完整财务闭环，兼顾普通个人日常记账与专业投资资产管控双重需求。
二、完整财务服务业务闭环
总资产大盘首页 → 多维度收支分析报表 → 银行卡账户统一管理 → 转账 / 收款支付操作 → AI 智能财务咨询助手 → 预算规划与消费目标管控 → 实时交易流水追溯
整套流程覆盖用户从资产查看、日常消费、投资管理、智能咨询全生命周期财务需求，电脑、平板、手机数据云端实时互通。
三、五大核心功能模块分层体验拆解
1. 全局资产总览大盘（用户核心首页）
桌面 / 平板端顶部全局导航栏统一收纳仪表盘、支付、数据分析、银行卡、AI 助手、服务六大一级功能；页面首屏直接展示用户总资产，可视化环形联动图表拆分信用卡、储蓄卡、理财投资三类资产金额；配套快捷收款、转账双操作按钮。
下方分区承载两大核心数据模块：周度现金流柱状图、近期交易流水清单；右侧常驻 AI 助手悬浮面板，无需跳转页面即可快速唤起智能财务问答。移动端精简适配布局，保留全部核心指标，底部轻量化导航栏适配单手操作，三端信息层级完全统一。
2. 多维财务数据分析模块（消费管控核心）
独立 Analytics 分析页面搭建完整财务可视化矩阵：环形饼图拆解消费类目占比、折线图展示每日收支波动、进度条直观呈现月度预算完成度、柱状图表体现财务健康储蓄指标；系统自动对比上月收支数据，标注消费增减幅度，AI 弹窗主动推送超支预警与省钱优化方案。
所有图表采用统一荧光绿渐变配色，数据分层清晰，帮助用户快速定位超额消费类目，完成理性预算管控。
3. 多银行卡统一管理模块（资产归集核心）
Cards 页面集中收纳全部绑定银行卡，3D 分层卡片直观展示单卡余额与卡面视觉；页面同步整合待还款账单、返现福利、消费分类统计、理财储蓄目标、近期交易明细，单页面完成全部银行卡资产统筹。
支持新增银行卡、一键转账、查看分期账单，解决多账户分散、需要切换软件查卡的行业痛点，资产归集效率大幅提升。
4. AI 智能财务专属助手（产品差异化壁垒）
独立 AI 对话页面搭载多模型智能问答，预设四大高频财务快捷入口：总资产概览、近期流水、风险支出提醒、余额走势预测；支持文字输入、语音提问两种交互方式，可自动生成月度预算方案、分析投资收益、识别异常扣费、预判月度现金流。
AI 生成的财务建议可直接同步至首页分析面板，打通智能咨询与数据复盘链路，是区别于普通记账软件的核心竞争优势。
5. 跨端响应式适配体系（全场景使用保障）
整套系统采用一套标准化组件实现电脑、平板、手机三端自适应：桌面端多卡片宽幅平铺布局，适合居家深度复盘财务报表；平板端平衡数据展示与便携操作；移动端精简模块、底部导航单手操作，适配通勤外出快速查账。
全套按钮、图表、卡片、弹窗视觉规范统一，跨设备切换无割裂感，降低用户多端使用学习成本。
四、视觉设计与标准化组件体系特色
色彩系统：极致纯黑深色基底，搭配高辨识度荧光柠绿作为数据高亮、核心操作、AI 功能专属识别色，白色作为标题数字，浅灰作为辅助文字，高对比度保障金融数据清晰可读，同时塑造专业、高级、安全的金融产品氛围；
轻量化玻璃拟态组件：全部数据卡片采用柔和磨砂玻璃质感，弱化厚重分割线，大面积留白，避免传统金融后台拥挤压抑；统一圆角尺寸、阴影层级，全套图表、控件、弹窗复用同一套规范；
信息优先级规范：总资产、收益、预算等核心财务数字放大加粗前置，辅助说明、次要明细弱化收纳，海量收支数据一目了然，长时间复盘账目不易视觉疲劳。
五、产品商业与用户价值总结
差异化 AI 财务工具构建竞争壁垒：市面普通理财软件仅支持记账，本产品 AI 自动分析收支、出具财务优化方案，精准抓住用户 “看不懂账目、不会规划预算” 的核心痛点；
多卡资产统一归集提升用户粘性：一站式整合全部银行卡、投资账户，用户无需切换多款金融软件，大幅提升App 日活与留存；
三端同步全场景覆盖：居家电脑深度复盘、平板便携查看、手机通勤快速查流水，覆盖用户全部财务管理场景，拓宽产品使用时段；
轻量化高级深色视觉形成品牌记忆点，区别于市面花哨浅色理财软件，精准吸引注重隐私、追求专业质感的高净值理财人群；
完整财务闭环提升用户生命周期价值：资产查看 - 支付转账 - 预算管控 - 智能咨询一体化，用户高频打开，可后续拓展基金、股票、保险增值业务，产品拓展性极强。
图片来自Behance
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
用于概括单节点核心业务内容，建议控制在 10 字以内；若标题文字过长，横向布局极易挤压界面、破坏整体排版，需更换步骤条样式适配。
适配步骤数量：最优区间 4-8 步；3 步以内流程使用纵向布局会造成页面空间浪费。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
腾讯 CoDesign 诞生于2019年，最早以「设计云-工作台」的定位开始服务腾讯内部。在2020年从设计门户拆分为独立产品与品牌 CoDesign，并于同年开始对外服务。
在产品对外服务的过程中，产品一直在进行高速的产品能力与体验优化迭代，产品所服务的用户类型也在不断丰富。
今年，CoDesign 为满足更多类型用户的协作与体验诉求，在产品资产管理结构与权限、数字资产管理能力上进行了大幅度的升级；以及设计云产品生态的逐渐成熟与对生态品牌运营的规划，都对 CoDesign 的品牌与体验有着迫切的升级诉求。
今年上半年，CoDesign 的品牌与体验升级的设计工作几乎在同一时间启动，产品体验升级工作也面临着多个挑战。
在与项目组、品牌团队多次沟通后，我们决定通过以下策略解决产品体验升级所面临的挑战：
一、产品体验升级工作构成涉及到产品、交互、视觉、研发各个层面。首先，我们需要明确具体的体验优化项，并将其定位到具体层面，制定出体验优化的前置工作与规划。
二、结合新的产品升级方案，梳理经典页面结构。结合竞品分析，构建出具有差异化的体验基调。
三、最后，为了进一步加强产品体验与竞品的差异性，完善「推广视觉」到「产品视觉」的品牌体验闭环。我们将产品内触点进行进一步拆解，并在品牌声量象限中定位，结合设计核心（Design DNA）进行延展应用。
我们对当前版本进行全方位视觉及体验走查，并且整理用户反馈的缺陷问题，发现了 70 多个交互、视觉以及开发还原上的问题。总结归纳为框架扩展性不足，体验不统一，效率低，品牌感知弱。
首先在交互上，我们的交互同学对产品原则，全局定义，通用流程，页面框架，标准组件，文案规范进行进一步的定义和梳理，保证交互的规范性和一致性。
其次在视觉上，我们基于 1.0 的问题，在 2.0 上明确了形，色，构，质，大小，间距，组件等规范用法，并对其进行文档化。以便在后续工作中形成更加严谨的设计规范，来保证多人合作中大家从开始的思维一致到最后产出的一致。
再次在研发上，我们将基础组件和业务组件分开维护，基础组件代码我们从 Ten 切回 TDesign，极大地提升了组件的通用性和定制化，并参考 TDesign 的 Token 规则，定制 CoDesign 的基础组件样式。同时在业务组件上，我们将具有通用性组件进行抽离，（例如卡片组件）单独构建成为标准组件。保证研发异地合作组件样式的统一性，提高效率。
「 项目开始之初，不用急于陷入方案细节设计中，可以针对已知问题，拉通团队其他成员，对整体方案中各职能团队的前置工作进行初步规划，有助于后续工作中团队成员工作流的无缝衔接。」
2.1 结合产品方案，定义经典页面结构
梳理整站经典页面类型，结合产品新的界面框架方案，以一级功能模块举例：
定义一级功能模块，二级功能模块，各功能详情页，子模块表单页的页面结构。
2.2 国内外竞品分析，构建差异化页面结构
我们针对国内外优秀竞品进行研究分析，提取其中的共性特征，发现竞品常用的页面结构分别为：
从以上页面结构分析上，大致总结下构建差异化页面结构需要考虑的方向是：功能和内容的分割方式，内容区的展示方式。
那在整个体验升级，CoDesign 的所有工作都围绕着一个核心理念——「内容设计」。所谓内容设计，是我们希望用户在使用工作台时，不受其他因素的干扰，专注于内容本身。
所以在 CoDeisgn 的页面结构上，我们和市面上主流竞品做了差异化处理，新版本我们打破了传统内容分割的方式，在 Z 轴的空间上分出功能区域和内容区域，打通左侧导航和顶部操作栏的功能区域，将内容聚拢重点突出。去掉大量界面中的线与框，减少页面非必要元素露出，使其目光可以聚焦在内容本身，让整个页面层级清晰的同时带来简约的视觉感受。
「 不管是平面，左右还是上下结构，都没有绝对的好与坏，取决于我们希望用户的视觉落点和视觉动线在哪，例如在一个平面结构中，人们的视觉落点往往是最重的颜色或者最大的文字等，相对应你的视觉动线就在依次去找第二，第三「重」的内容，那当这个平面中增加了空间维度，依然是先看到最「重」的内容，只不过因为有了前后的关系，在视觉感官上你会区分前后内容的重量对比。
结合 CoDesign 首页页面结构设计最终效果图，你会发现首先视觉落点在前景白色内容区的内容卡片上，紧接着视觉动线来到后景用户高频操作的新建操作，最后是左侧导航栏的区域。」
我们将产品内触点进行进一步拆解，并在品牌声量象限中定位，结合品牌声量象限的设计要求以及设计核心（Design DNA）进行延展应用。
3.1 品牌色
基于品牌标志延展出基础的品牌色规则，并且为了兼顾多触点的应用，我们在品牌主色基础上降低了色彩的饱和度，延展出一系列辅助色，提供了较为丰富的色彩运用，同时为页面带来了更为轻盈，灵动的视觉感受。最后再根据品牌声量象限，指导不同品牌出点的颜色使用。
3.2 辅助图形
为了塑造统一的品牌语言，我们从品牌标志中提取基础辅助形，设计了一系列延展图形，打造多样化极具品牌调性和视觉表达。
3.3 品牌特征延展
通过品牌特征的运用，赋予图标、登录页、演示文件、空页面等应用场景更明确的品牌识别性，进一步强化统一品牌认知。
CoDesign 图标
CoDesign 登录页
CoDesign 演示文件封面
CoDesign 空状态
CoDesign 分享页&加载
CoDesign 核心界面效果展示
「 品牌视觉和产品视觉是相辅相成的，如何让用户有清晰的品牌感知，往往来源于一些细小的场景品牌运用，这也是视觉一致性的重要体现。」
4.1「一个」样式
我们在每一个组件的设计与规划中，都尽可能的照顾在多场景的兼容性。例如卡片组件的设计，1.0 的卡片设计，我们有着各种不同的样式，比例，间距等；新版设计中我们将内容卡片进行了结构化处理，采用了一样的视觉语言，框架，裁切方式，甚至开发逻辑，来增强视觉的统一性 ，减少维护成本的同时，兼容更多的场景。
4.2「一种」框架
设计开始规划时，我们就用一套颜色 Token 搭建起设计和开发之间界面样式的映射关系，为未来暗黑模式适配打下基础。
新版的页面结构设计，也为不同屏幕设备提供更好的兼容性。
4.3「一套」视觉语言
随着整个设计云生态的品牌形象的更新和统一，然而各个子产品内的视觉风格还是各异，那未来 CoDesign 会作为设计平台的连接器，我们也有意识的让新版的视觉风格延续到各大平台，来保持一致的视觉语言。那目前我们已经陆续让这套视觉风格延续到了设计云企业管理后台，OpenDesign，设计走查像素眼。
在视觉团队多人协作中，我们统一了协作环境，全文件的 Figma 化，并且将产品设计、运营设计组件化，方便团队成员使用更加灵活高效。
在视觉、研发多人协作中，设计与研发统一使用 TDesign 基础组件，保证基础组件一致性；业务组件在业务拓展过程中由业务开发独立建设并维护，在最后通过视觉样式 Token 化，建立设计和开发之间界面样式的映射关系。
以上内容是基于 CoDesign 体验升级应用过程中的一些关键策略及执行思路。
总体来说，我们在这个版本的设计上，除了不断解决产品的诉求和用户反馈的体验问题之外，还在努力提升设计（交互、视觉）及研发一致性，构建可辅助团队标准化的设计、研发的 Token 及组件库；打好底层基础框架，未来 CoDesign 会增加更多的功能，辐射更广业务。我希望这些基础面的建设，能带来整个平台一致性的用户体验。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com