兰亭妙微ui设计公司分享：人口老龄化进程持续加快，越来越多中老年群体开始深度使用手机、线上服务，但现有数字化产品普遍存在操作门槛过高的问题：字号偏小、功能入口繁杂、操作链路冗长、操作反馈模糊…… 大量长辈因复杂交互流程产生挫败感，被迫割裂于数字生活之外。
简化操作链路，是适老化 UX 设计最核心的破局思路。本文结合滴滴、淘宝、微信、工行、QQ 等主流产品老年版落地案例，拆解 5 套可直接复用的适老化交互设计方法，清晰梳理老年用户核心痛点与对应优化方向。
最终实现三大体验提升：操作效率提升、使用负担减轻、整体体验增强。
长辈记忆、操作反应速度有限，每多一次点击，都会大幅提升使用门槛。适老化设计核心原则：核心功能操作步骤控制在 2 步以内。
标准版流程：输入目的地→选择车型→点击叫车，多层操作； 老年版优化：首页放置超大「呼叫出租车」主按钮，预设出发地址，一键发起叫车。 设计逻辑：剥离次要筛选功能，聚焦长辈高频打车需求，砍掉多余交互步骤。
标准版：底部「动态」标签→二次分类列表，两次点击才能查看好友动态； 老年版：点击底部动态 tab，直接展示好友动态信息流，一步直达。 总结：砍掉中转页面，缩短操作路径，从根源降低老年用户操作成本。
中老年视觉分辨力下降、信息筛选能力弱，复杂多模块界面极易造成视觉混乱。适老界面设计标准：大图标 + 大字号 + 高对比度，只保留高频刚需功能。
标准版：承载会员、钱包、出行、福利、营销活动数十个模块，信息密度极高； 老年版：页面大幅留白，功能以大块卡片分区展示，仅保留订单、亲情账号、电话叫车、客服等长辈刚需功能，弱化全部营销内容。
标准版：堆叠会员、优惠券、推荐商品、频道入口等海量营销模块； 老年版：仅保留订单、收藏、客服、会员权益四大核心板块，放大图标与文字，移除所有推荐信息流，减少视觉干扰。 总结：做信息减法，简化页面布局，让长辈一眼找到所需功能。
多数长辈存在打字困难、视力衰退问题，语音交互是降低输入门槛的核心解决方案，在搜索、转账、查询等高频场景必须重点落地。
标准版：仅顶部文字搜索框，依赖手动打字； 老年版：页面底部放置醒目橙色「按住说话搜一搜」语音按钮，无需打字，口述商品名称即可完成检索。
标准版：转账、查资产、缴费均需手动点击多层菜单； 老年版：底部导航固定超大语音操作按钮，长辈口述指令即可完成账户查询、转账、生活缴费等全流程操作。 总结：用语音替代手动输入与多层菜单点击，适配中老年操作短板。
将长辈刚需功能、求助渠道放置页面最醒目位置，免去多层查找，实现一键直达。
标准版完整流程：解锁手机→打开微信→查找联系人→点击视频通话，共计 4 步； 老年版优化：支持锁屏桌面添加视频通话小组件，一键拨通指定家人，无需解锁、无需打开 APP。
标准版：我的页面→更多功能→我的客服，多层隐藏； 老年版：首页底部固定「帮助」按钮，点击直接接通人工客服电话，遇到订单问题可快速求助。
适老化设计容易忽略操作反馈：按钮点击高亮、操作成功文字提示、语音播报结果，让长辈清晰感知「操作是否生效」，避免反复重复点击。
三大趋势最终目标：打造更便捷、更高效、更有温度的数字化适老体验。
对于数字化产品而言，适老化交互简化绝非锦上添花的加分项，而是产品必须落地的基础刚需。 减少点击层级、轻量化直观界面、全域语音交互、高频功能快捷入口、清晰操作反馈，这五套落地方法，能够从底层大幅降低老年用户使用挫败感，让长辈不用反复摸索、不用害怕点错、不用四处查找功能。
这些看似微小的界面交互细节，本质是用设计消解数字鸿沟，让银发群体平等、有尊严地享受互联网服务，这也是适老化设计真正的价值内核。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：很多设计师用 AI 批量产出 3D 图标时，总会遇到同一个痛点：图标造型完整、立体效果到位，却完全没有专属品牌气质，和市面上通用素材毫无区分度。 好看≠有品牌，拉开作品差距的关键，藏在统一视觉语言、精细化材质细节两大维度里。本文结合金融项目 CoinAlgent 实战案例，拆解 6 个可落地的设计控制点，帮你摆脱 AI 流水线质感，做出高识别、高精度的成套 3D 图标。
整套图标想要形成系列感，先要搭建统一的视觉底层规范，同时保留适度变化避免呆板，核心分为 4 个维度：
不少设计师仅提取主色做图标配色，忽略 LOGO 辅助点缀色，直接割裂图标与品牌的关联。 以 CoinAlgent 品牌为例：品牌 LOGO 由主蓝色 + 小面积明黄点缀构成，初期图标仅使用蓝、银白配色，缺失品牌标志性黄色，整套图标辨识度大幅下降。
优化方案：遵循 LOGO 色彩比例，将黄色作为小面积高光、点缀元素穿插在整套图标中，让品牌色贯穿所有视觉单元。大面积主色建立统一基调，小面积辅助色强化品牌记忆点，用户一眼就能关联到你的品牌。
脱离行业场景的图标，天然缺少专属感。设计前先提炼行业核心关键词，把对应具象元素作为图标主体 / 辅助装饰，实现 “看图识行业”。
回到金融货币赛道 CoinAlgent，我们提取货币、行情数据、资产、安全四大核心关键词，转化为金币、纸币、走势图、盾牌、密钥等视觉载体，所有图标围绕金融元素展开，赛道属性一目了然。
挑选 1-2 个品牌专属符号（如项目金币、数据柱状图），在整套图标中循环复用，持续强化系列感知；同时把控复用逻辑：
固定45° 斜侧面作为整套图标的基础视角，保证统一秩序感；若所有图标朝向、俯仰角度完全一致，会显得僵硬死板。 优化思路：在统一斜侧框架下，微调图标左右朝向、轻微改变仰视 / 俯视高度，在不破坏系列感的前提下，丰富画面动态。
3D 图标的高级感，由材质搭配和倒角细节两大微观维度决定，也是区分普通 AI 素材与商用级品牌图标的关键。
统一材质体系是提升精度最快的方法，本文实战固定搭配：光滑软塑料 + 雾面哑光金属 + 通透亮面玻璃。 三种材质分配到图标不同部件，可灵活调整各材质面积占比，统一材质逻辑能让整套图标质感高度协调，光影层次更丰富。
AI 原生生成的 3D 模型常棱角锐利、交界生硬，缺少精致感。 在所有体块转折处添加统一规格倒角，倒角会自然形成柔和高光、阴影过渡带，在微观层面增加层次，让图标温润耐看，彻底摆脱 AI 建模的生硬塑料感。
AI 只是高效生成工具，想要图标拥有独一无二的品牌辨识度，核心不靠渲染特效，而是靠成套、标准化的设计规则： 品牌感来源于统一色彩、行业题材、复用图形、规范视角四大视觉体系； 高精度来源于固定材质搭配、统一倒角细节两大微观管控。 把 6 个控制点落地到图标设计流程，就能轻松避开 AI 素材同质化问题，产出适配产品、记忆点极强的品牌 3D 图标。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。在数据可视化中，最常用的坐标西分为笛卡尔坐标系和极坐标系，本文介绍的坐标轴设计主要也是围绕直角坐标系展开，enjoy~
在说坐标轴之前先来介绍下什么是坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。
维基百科对坐标系的定义是：对于一个n维系统，能够使每一个点和一组n个标量构成一一对应的系统，它可以用一个有序多元组表示一个点的位置。
数据可视化中，最常用的坐标系有两种：笛卡尔坐标系和极坐标系，均为二维坐标系。
下文介绍的坐标轴设计主要也是围绕直角坐标系展开，用到极坐标系的图表有饼图、圆环图、雷达图等。
坐标轴是坐标系的构成部分，是定义域轴和值域轴的统称。系的范围更大，而轴包含在系的概念里。由于可视化图表绘制的数据大部分都有一定的现实意义，因此我们可以根据坐标轴对应的变量是连续数据还是离散数据，将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。
介绍坐标轴设计前，我们先将坐标轴拆分成“原子”要素，具体分为轴线、轴刻度、轴标签、轴标题/单位、网格线。
根据坐标轴的构成，分类讨论下每个构成要素容易被忽视的设计细节。
轴线一般只考虑是否显示，例如柱状图、折线图等，在有背景网格线的情况下，会隐藏y轴线，条形图则是隐藏x轴线，以达到信息降噪，突出视觉重点的目的。
轴刻度通常不显示，只有在肉眼无法定位到某个标签对应的数据点时，会显示刻度线，辅助用户定位，比如折线图，或抽样显示的柱状图。
网格线用于定位数据点的值域范围，跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。样式为虚实线的最多，斑马线由于感知过强，一般不用。
轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义，无需单独显示标题/单位，“如无必要，勿增实体”。
轴标签的设计就比较复杂，涉及到的细节点很多，而且对于定义域轴和值域轴上的标签和单位设计要考虑的细节点还有差异。下文将定义域轴和值域轴看成x轴和y轴，便于说明。
x轴标签的设计重点在显示规则上，不同的坐标轴类型有不同的处理方式。
1.1 连续轴/时间轴的标签显示
连续轴/时间轴，是由一组前后包含同等差值的等差数列组成，缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠，我们可以利用抽样显示的手段来避免这种情况。这里不推荐使用旋转，一方面从美观度上，旋转可能会破坏界面整体协调，另一方面，连续/时间轴非必须显示所有轴标签，抽样标签已经能满足用户对当前数组定义域的理解。
介绍一种常见的抽样方式：等分抽样。
当多个标签在x轴无法完全显示，优先保留首尾标签，其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数，能被1和其本身以外的数整除。如果间隔数为质数，就需要“-1”转成合数。
举个例子：11个标签，间隔数是10，能被2和5整除，即分成2等分和5等分。12个标签，间隔数是11，无法等分，需要在间隔数基础上再“-1”，转成合数10后再等分，此时最后一个标签显示在倒数第二个数据点上。
有人会问了，能被那么多数等分，到底该选哪个呢？这就要根据标签长度来定，选择能放下最多标签的等分值。由于连续轴/时间轴，一般是数值、日期、时间等，字符长度有限，即使抽样后也能保证显示出一定数量的标签。
等分抽样不太适用于表达某个时间周期内的走势折线图，因为最后一个标签不一定对应最后一个数据点。对于这类折线图，能清除表明起始时间和末尾时间相比显示更多时间标签重要性来的更高。设计上可以只显示首尾标签，或首尾+中间值。
分类轴是由几组离散数据组成，相互之间独立存在，无紧密逻辑关联。若采用抽样规则，隐藏一些标签，用户对图表认知就会有困难，违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转45度，若45度仍显示不下，继续旋转90度。如果90度还是放不下就要考虑结合图表交互或反转图表。
标签旋转方向也有讲究，因为人的视觉习惯是从左到右，从上到下，标签顺时针旋转45度更符合用户的浏览动线。
分类轴标签字段有长有短，长文本标签直接旋转不仅影响美观，而且也不利于用户阅读。如果数据量比较少只有2~4个，长文本标签更适合水平展示，显示不下省略即可；如果数据量比较多，就限定字符数后旋转。
y轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的，就写成固定宽度，节省图表计算量，提高渲染速度。
2.1 y轴标签数量
标签数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据7±2设计原则，y轴标签数量最多不超过这个范围。
2.2 y轴标签取值范围
y轴标签的取值范围决定了图形在整个绘图区域的显示高度。
折线图y轴标签取值一般保证图形约占绘图区域的2/3，以更有效的传达数据波动幅度，避免掩盖和夸大变化趋势。2/3即斐波那契数列第二位起，相邻两数之比，也是黄金分割最简单的计算方法。
柱状图的y轴标签取值应从0基线开始，以恰当反应数值。如果展示被截断的柱状图，可能会误导观众做出错误的判断。
2.3 y轴标签数据格式
y轴标签的数据格式在ant.vision写的比较详细，重复内容不在此说明，重点讲下一些特殊的设计细节。标签保留的小数位数保持统一，不要因为某些轴标签是整数值，就略去小数点。
正负向的y轴标签，由于负值带“-”符号，整个y轴看起来会有视觉偏差，特别是双轴图的右y轴更明显。这里建议正负向y轴给正值标签带上“+”，以达到视觉平衡的效果。
写了那么多关于坐标轴的设计，你是不是恍然大悟，原来小小的坐标轴还有如此之多的细节。往常我们做图表设计，可能只是用网上自动生成的图表简单调整下，或者按照通用样式来设计。然而，通用样式虽然能表达数据意义，但也缺少了对图表细节的把控，失了精致优雅的感觉。
作为数据可视化设计的一小部分，就是这些设计细节，决定了图表最终的传达效果。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
1. 给素材进行预处理（加一个素材没有的颜色作为背景），这里进行预处理是为后期在AE中进行抠像处理做准备
2.把首尾帧的参考图给 AI，生成适配的动态提示词。因为要做 “从无到有” 的动效，推荐用首尾帧生成，在提示词里写清楚首尾帧的画面和运动过程即可
这是AI给到我的提示词
1. 选择「首尾帧生成」模式，首帧上传纯蓝色图片，尾帧上传花朵碰到一起，花瓣爆开的图片。
首帧：
尾帧：
2. 查看生成的视频
现在生成的视频，在碰撞后有很多杂线飞出，整体太乱了，我们修改提示词，让他不要有杂线飞出。
我们直接描述问题发给AI，让AI给我们修改提示词。
这是AI给到我的提示词：
3. 把新的提示词给到AI，让AI重新生成视频。
4. 现在生成的动画是没有杂线飞出了，但是节奏不对，两朵花碰到一起后，延迟了一会花瓣才爆发出来，我希望他是两朵花碰到一起后花瓣就直接爆发出来，那我们就继续描述问题，让AI给我们修改提示词。
https://image.uisdc.com/wp-content/uploads/2026/07/cf7774965441bbe94e0bbe8dd1bf35ba.webp
1. 素材导入AE，通过颜色范围，快速获取透明底视频（这里可以使用颜色范围一键吸取背景色是因为我们在最开始进行了预处理，添加了一个素材没有的颜色做背景）
2. 把透明背景的素材放到界面里面看一下效果：
https://image.uisdc.com/wp-content/uploads/2026/07/d4294b34e241951ec3215266d234cb91.webp
3. 现在看起来边缘有点生硬，我们给他加一个边缘虚化的效果，让边缘柔和一点。这里我们添加一个蒙版，调整蒙版的蒙版羽化就可以啦，这是调整好的效果：
https://image.uisdc.com/wp-content/uploads/2026/07/fb6a63beef359221e470b3592bf16158.webp
最后，来看下这个动效在其他页面的效果：
https://image.uisdc.com/wp-content/uploads/2026/07/d6078bbcf165cd0b62ce884c03ac1488.webp
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：商品卡片是电商类 C 端产品的核心基础组件，适用范围不局限于实物商品，课程、旅游服务、游戏道具、会员套餐等全部可交易虚拟 / 实体品类，都依靠它承载核心信息，帮助用户快速抓取商品关键属性、完成浏览决策。
电商 App 内通用两套卡片展示视图，二者布局逻辑、信息承载上限存在明显差异，也是我们设计时需要重点区分的核心形式：网格视图、列表视图。
下文将拆解两种视图的排版规则、视觉规范、信息取舍逻辑，帮你标准化落地商品卡片组件。
网格布局分为等距规整网格、瀑布流网格两类，二者都需要统一商品主图尺寸，避免画面杂乱无序。
网格视图受屏幕宽度限制，展示空间紧凑，不适合堆砌大量文字信息，复杂规格、长标签类内容建议省略。
列表采用「左图右文」横向排版，图片宽度统一，右侧文本区域高度灵活，分 3 种适配方案：
根据边框、背景、图片裁切规则，分为全包式、半包式、开放式，覆盖市面 99% 电商产品：
完整底色容器包裹商品图与全部文字，卡片四周统一圆角，整体感强，但视觉厚重，多用于品牌专题、活动会场。
商品图顶边、左右撑满卡片边界，仅底部文字区域在底色容器内；圆角规范重点：图片下方两个内角不做圆角，仅卡片外框设置圆角，避免视觉断层。
无独立卡片底色，图片 + 文字自成一组信息单元；文字区域左右向内缩进，和图片形成层次区分，可单侧缩进、也可双侧缩进，清爽简约，适合极简风、出海电商。
不同品类、不同平台可按需删减模块，但商品主图、商品标题、售价是三大必选基础元素。
卡片展示页面不同，用户核心诉求完全不同，信息模块需要针对性增减：
品牌调性克制高级，卡片极度轻量化，仅保留主图、售价、短标题、收藏按钮，无多余营销标签，适合出海国货 App 参考。
服务类商品和实物商品字段体系完全区分，核心展示评分、地理位置、配套权益、起售价，是虚拟服务类组件的典型参考。
市面上成熟电商的商品卡片都基于以上规则做变体设计，可根据产品定位、运营需求调整圆角、留白、标签样式、色彩权重，搭建专属组件库。
商品卡片是电商 C 端复用率最高的 UI 组件，设计核心逻辑永远围绕用户场景 + 信息优先级展开：先确定展示视图，再选择卡片视觉形态，最后根据页面场景增减信息模块。掌握这套标准化设计思路，就能快速完成全平台统一、可复用的商品卡片组件规范。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：当下国内 C 端产品竞争白热化，为抢夺用户注意力，界面视觉愈发繁复花哨，极简设计仅少量头部工具类产品在用。这套审美倾向也直接影响设计师求职评审 —— 作品集更偏爱能驾驭复杂视觉的方案，简约风格反而不占优势。
配色是 UI 设计的核心难点，也是初级设计师最容易卡壳的环节。本文抛开晦涩理论，用落地化、标准化的完整逻辑，拆解一套可直接复用的 UI 配色全流程，从色彩底层原理到完整落地案例一次性讲透。
想要做好配色，第一步要分清三种主流色彩模式的用途，UI 设计优先掌握HSB。
实操建议：打开 Figma/PS/ Sketch，优先把取色面板切换为 HSB 模式，调色遵循「先定色相→再微调饱和度、明度」的顺序，拒绝随机拖拽取色。
传统设计只划分主色、辅助色、中性色，无法适配当下复杂运营、多内容场景，现统一分为品牌色、功能色、中性色、装饰色、内容色五大类，覆盖界面全部用色场景。
品牌色是区分产品的视觉锚点，分为品牌主色与品牌辅助色。
功能色承载明确信息语义，用户已形成固有色彩认知，设计时优先顺应大众习惯：
实用技巧：若品牌主色刚好匹配功能语义，可直接复用品牌色，无需新增色值。例：京东优惠价、支付宝确认按钮均直接使用品牌主色，减少色值冗余。
中性色即黑白灰，是整套界面的基底，页面背景、正文、次要文字、分割线、图标全部依赖中性色，整体页面中性色占比远高于品牌色。
品牌色、功能色、中性色属于项目固定规范色，装饰色是脱离规范的补充色彩，多用于运营活动页、装饰图标、营销瓷片区。
内容色指商品图、用户头像、广告 banner、资讯封面等素材自带色彩，分为两类场景差异化处理：
补充：美妆、服饰、茶饮等自有内容素材的品牌，会统一规范拍摄、修图色彩标准，从源头保证页面配色统一。
不少设计师照搬平面配色逻辑做 UI，最终效果违和，二者底层逻辑完全不同，核心差异分为三点：
平面海报、包装定稿后画面永久固定，设计师能完整把控所有色彩搭配； UI 页面内容、模块会持续迭代更新，动态内容极易破坏原有配色平衡，设计时必须预留容错空间。
平面 CMYK 依靠颜料反光显色，高饱和荧光色大面积使用也不会刺眼； UI 屏幕 RGB 自发光，高饱和、强对比色大面积使用会造成视觉疲劳，部分艳丽色彩直接需要舍弃，因此行业老话 “没有丑颜色，只有烂搭配” 不适用于 UI 设计。
传统品牌 VI 通过门店、包装、物料长期渗透，色彩调性温和舒缓； 互联网产品依靠手机小屏幕和海量竞品争夺注意力，品牌色需要视觉冲击力更强，快速让用户形成记忆。
不建议边画界面边填色，配色独立作为完整设计阶段，按「中性色→品牌色→功能色→内容色→装饰色」分层填充，每一步可单独校验调整。
完成页面原型后，先定义全套中性色分级，用灰度区分标题、正文、辅助文字、分割线、卡片背景，搭建完整信息层级。 优势：提前理清页面轻重关系，后续叠加彩色不会出现层次混乱。
中性色基底稳定后，再铺品牌色，品牌色是整套配色的约束标准，后续所有色彩都要和它和谐适配。
梳理页面内所有特殊语义模块（价格、收藏、成功提示、警告、会员标签等），主色无法承载语义时，新增独立功能色，数量尽量精简。
根据图片占比选择适配素材，大图协调品牌色调，列表小图弱化色彩冲击，规避杂乱色块。
最后补充图标、运营模块装饰色，此时中性色、品牌、功能色已全部定型，装饰色可选范围被大幅缩小，更容易搭配和谐。
熟练掌握五步基础配色流程后，想要方案具备深度，需要在配色前先确定整体设计风格，情绪版是前期核心工具。
很多初级设计师认为情绪版、品牌分析只是作品集包装，实则是专业团队统一视觉语言的核心环节；积累足够实操经验后，才能理解风格分析对配色的指导价值。
,
深色模式中性色逻辑相反，底色使用高灰度，文字用浅灰；品牌色需要同步降低饱和度，避免屏幕高亮度刺眼，明暗对比度严格遵循无障碍阅读规范，新手不建议优先尝试。
UI 配色逻辑相比平面设计更加标准化、模块化，五大色彩各司其职，选色区间存在清晰规律，依靠固定流程就能稳定输出合格方案。
配色没有玄学，本质是给不同界面元素匹配对应规范色值，结合大量案例临摹与落地实操，就能快速形成成熟的色彩审美与搭配能力。
转载：站酷
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：很多设计师用 AI 生成插画、图标、场景图后，总觉得画面自带廉价 “AI 味”，明明构图、造型没问题，却一眼就能看出是 AI 产物。我实操 AIGC 绘图三年，总结出画面显假的三大根源：画面发平、整体泛黄、暗部油腻，配套可直接落地的调色优化方案分享给大家。
AI 生成的画面明暗层次缺失，尤其是大面积白色物体，没有深浅明暗区分，整体轻飘飘，缺乏体积感，典型案例就是纯白晴天娃娃形象，看上去像二维贴纸。
画面缺少深色暗部做对比，明暗反差不足，光影逻辑不完整。
在生成提示词内增加「强化光影层次、加重暗部、增加明暗对比、塑造立体体积」描述；后期修图时加深物体阴影、闭塞区域重色。 调整前后对比效果直观：原本单薄扁平的纸片形象，补足暗部重色后，形体饱满扎实，真实立体感立刻显现。
AI 生成画面普遍自带黄调，无论是绿植、白色图标、浅色物体，都会蒙上一层灰蒙蒙的黄，复古失真感严重，AI 痕迹格外突出。
模型默认色温偏暖，画面缺少冷色平衡，白色、浅色系物体极易偏黄。
通过色彩平衡工具，给画面统一加入蓝色冷调对冲黄感：
这是 AI 绘图最致命的通病，也是绝大多数画面一眼显假的关键。
写实画面光影逻辑遵循「亮部鲜艳突出，暗部低饱和弱化」，但 AI 会无差别拉高暗部、投影饱和度，深色区域色彩浓烈扎眼，视觉重心错乱，整体油腻违和。
陶瓷水杯原图，杯身暗面、底部投影饱和度严重超标，本该弱化的阴影反而抢了视觉焦点，塑料廉价感拉满。
单独降低暗部、投影区域饱和度，往暗部叠加中性灰，压暗同时弱化色彩浓度。 处理后暗部沉稳柔和，光影主次分明，突兀的 AI 油腻感大幅减弱，画面真实度显著提升。
掌握这三组调色逻辑，不管是 UI 图标、插画还是场景效果图，都能快速弱化 AI 生成痕迹，做出接近手工手绘的高级质感。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在展厅、数字展馆、企业文博空间全案服务中，兰亭妙微始终坚守一套核心逻辑：空间视觉是展厅的外在形体，而前期策划才是贯穿全案的灵魂内核。优质展厅绝非堆砌材质与光影的装饰空间，策划先行，决定展馆讲什么、为谁讲、如何引导参观、最终留给受众怎样的深刻记忆，这也是兰亭妙微多年服务政企展厅、数字博物馆、科技展示项目始终不变的底层准则。
兰亭妙微ui设计公司分享：作为产品体验的“第一道门”，顶部导航栏（Navigation Bar）的设计直接影响用户对产品的使用效率和品牌感知，基于我们产品的使用场景，Navigation Bar 呈现出多样的组合方式来表达不同的页面层级及内容，由于没有统一的设计规范，因此出现了细节混乱不一致等问题。同时，为了适应产品的不断迭代更新，提高设计和开发的效率，保证产品体验的一致性，需要设计组件库有更具自由度、灵活拓展性的表现以及规范指引。
那么如何拆解复杂场景，收敛结构，搭建出灵活、易用、好维护、可拓展的 Navigation Bar 设计组件呢？请跟随本文的脚步一起看一看具体的实践思路吧。
通过App和小程序的场景收集，我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式，由于各部分元素没有统一规范，出现了各种不同的问题，急需对组件库重新进行收敛和升级：
在主流的大厂组件库中，我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域，在命名上也看不到难以理解的业务属性命名，这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑，跳出复杂的业务场景，从结构入手，形成容器思维，提升组件的包容性。
TDesign
Ant Design Mobile
定义
顶部导航栏（Navigation Bar）位于屏幕的顶部，状态栏的正下方，主要用于帮助用户明确页面位置、层级等，导航栏包含了一些控件，用来在应用里不同的视图中导航，同时还承载了针对当前页面全局性的操作。
作用
我们的业务场景丰富，还需要同时兼顾 App 和小程序，以及正常模式和Ghost模式，在这个基础上，我们的NavgationBar 样式能枚举出 25+ 种，这么多场景，总不能全部做成组件母版吧，那么应该如何简化呢？
找共性 — 打地基
首先，从基础结构上看， Navigation Bar 都包含了3个部分，可以归纳为Left（左侧容器）、Center（中间容器）、Right（右侧容器），容器之间互相适应。
找特性 — 搭建基础变体
基于业务诉求，各部分容器生成了各式各样的类型和组合方式，但是在组件设计中，需要避免把所有的情况枚举成选项，否则会丧失组件使用时的灵活性，并且难以应对后期的拓展需求，这就需要我们在众多情况中先找出特性，并抽象化的表示。
通过总结各部分容器的作用及场景，可得出其各自包含的基础组件类型变体（Variants）如下：
Left（左侧容器）：
Center（中间容器）：
Right（右侧容器）：
增加底层灵活性
再拓展开来，每个基础类型组件还有不同的结构性需求，这需要组件具备底层的灵活性，以适应多种状态切换。可以抽象地理解为，为一个小组（基础组件类型）设置一定的成员名额（Swap 槽位），基于不同的需求可选择成员（原子）单独上岗，或者合作共同上岗，随着小组的发展，需要的时候也持续支持加入新成员。
Navigation Bar 组件结构层级
NavBar 基础变量
为 NavBar 的基础变量（Variant）设置了App / 小程序的平台切换，以及适应深浅色模式背景的色彩切换，同时可自由控制 Left、Center、Right 容器的开关。
Left 容器
Left 容器的作用包括展示品牌LOGO、页面主题以及提供离开当前页面的出口，即返回上级（适用于非一级页面），通过 Instance Swap，我们可以在组件的属性面板中快速替换原子组件的样式，这种方式能省去组件搭建和修改过程中的重复操作，支持直接的无限拓展。
Center 容器
在Center 容器中，基于业务场景的需求，提供搜索（Search）、分类（Tabs）、文字标题（Text）三种基础类型组件。其中 Text 类型能够结合不同的原子形成多种组合，通过赋予每个原子组件属性（Property），可以在 Text 子组件中灵活控制其开关组合，例如这里我们涉及到了 Text 排版的切换、前置图片（Lead_Img）、后置标签（Trailing_Tag）、后置箭头（Trailing_Arrow）、背景（Bg）等。
Right 容器
Right 容器一般包括全局的操作控件，其中最常见的就是按钮（Button），向下拆分还包括了Text Button、Icon Button 等，在实际应用场景中，由于 IconButton 的基础原子组件本身自带边距，因此在页面中所需预留的间距（Padding） 与 Button 不同，同时我们还会遇到 Button 与 Icon Button 组合使用的情况，因此在 Right 容器的 Button 子组件中，我们预留了四个 Swap 槽位，并赋予了 TextButton 单独的 Padding，这样在使用组件时，能够降低解绑率，通过开关即可随意组合，同时也无需手动再调整间距（Padding），易于设计组内统一设计规范。
在 NavigationBar 设计组件的升级过程中，我也深刻意识到了怎样才能叫“好的设计组件”，我们不能将眼光局限于现有的业务场景当中，需要在我们收集出所有场景之后深入的分析，建立容器思维，寻找底层结构的共性和逻辑，搭建坚固的基底之后，再一层一层往下拆分、嵌套，保证组件的灵活性、可拓展性。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微ui设计公司分享：在学习 UI 初期，除了学会软件要还要了解我们设计界面时都在设计什么，而 UI 控件就是首当其冲的设计对象。
UI 控件是一个统称，在下级还包含不同的控件类型，而这些控件类型是今天实现界面展示和交互的必要元素。虽然控件的外观在不同项目中样式各异，但控件本身的类型却是非常固定的。
学习控件最佳方式，就是先从 iOS 官方组件库中提供的控件开始学起，然后再拓展到一些特殊的样式和类型中。
所以下面，我们会以 iOS26 规范的组件库为标准，来对 UI 的控件类型做一个详尽的说明，帮助大家快速理解行业对控件的最新定义。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com