首页

兰亭妙微ui设计公司分享:3 个核心调色逻辑,彻底消除画面 “AI 塑料感”

清阳 设计资源

兰亭妙微ui设计公司分享:很多设计师用 AI 生成插画、图标、场景图后,总觉得画面自带廉价 “AI 味”,明明构图、造型没问题,却一眼就能看出是 AI 产物。我实操 AIGC 绘图三年,总结出画面显假的三大根源:画面发平、整体泛黄、暗部油腻,配套可直接落地的调色优化方案分享给大家。

一、画面扁平单薄,像纸片无立体感

问题表现

AI 生成的画面明暗层次缺失,尤其是大面积白色物体,没有深浅明暗区分,整体轻飘飘,缺乏体积感,典型案例就是纯白晴天娃娃形象,看上去像二维贴纸。

核心成因

image.png

画面缺少深色暗部做对比,明暗反差不足,光影逻辑不完整。

优化方法

image.png

在生成提示词内增加「强化光影层次、加重暗部、增加明暗对比、塑造立体体积」描述;后期修图时加深物体阴影、闭塞区域重色。 调整前后对比效果直观:原本单薄扁平的纸片形象,补足暗部重色后,形体饱满扎实,真实立体感立刻显现。

二、整体色调发黄,画面浑浊廉价

问题表现

image.png

AI 生成画面普遍自带黄调,无论是绿植、白色图标、浅色物体,都会蒙上一层灰蒙蒙的黄,复古失真感严重,AI 痕迹格外突出。

核心成因

image.png

模型默认色温偏暖,画面缺少冷色平衡,白色、浅色系物体极易偏黄。

优化方法

通过色彩平衡工具,给画面统一加入蓝色冷调对冲黄感:

image.png

  1. 绿植类画面:黄绿调加入蓝调,转为通透干净的蓝绿色;
  2. 白色图标 / 浅色系元素:高光、中间调少量加蓝,中和泛黄浑浊感。 微调后画面通透干净,色彩质感高级,复古泛黄的廉价感完全消失。

三、暗部饱和度过高,画面油腻刺眼(80% AI 感的核心来源)

这是 AI 绘图最致命的通病,也是绝大多数画面一眼显假的关键。

image.png

问题逻辑

写实画面光影逻辑遵循「亮部鲜艳突出,暗部低饱和弱化」,但 AI 会无差别拉高暗部、投影饱和度,深色区域色彩浓烈扎眼,视觉重心错乱,整体油腻违和。

典型案例

陶瓷水杯原图,杯身暗面、底部投影饱和度严重超标,本该弱化的阴影反而抢了视觉焦点,塑料廉价感拉满。

优化方法

image.png

单独降低暗部、投影区域饱和度,往暗部叠加中性灰,压暗同时弱化色彩浓度。 处理后暗部沉稳柔和,光影主次分明,突兀的 AI 油腻感大幅减弱,画面真实度显著提升。

总结:消除 AI 味三大核心口诀

  1. 平 —— 缺层次:加重暗部、拉大明暗对比,塑造立体体积;
  2. 黄 —— 色温偏暖:全图加蓝色冷调,中和泛黄浑浊;
  3. 油 —— 暗部高饱和:暗部叠加灰色、降低饱和度,弱化阴影色彩。

掌握这三组调色逻辑,不管是 UI 图标、插画还是场景效果图,都能快速弱化 AI 生成痕迹,做出接近手工手绘的高级质感。

 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司分享:金融配色有雷区,五大设计失误深度拆解与落地解法

清阳 行业趋势

引言:金融配色,从来不止 “好看” 这么简单

兰亭妙微ui设计公司分享:不同于电商、文娱类产品,金融界面承载用户资金交易、风险判断、资产决策,色彩是传递安全感、专业度、可信度的隐性语言。一处配色疏漏,不止拉低视觉质感,更会造成用户误操作、信任崩塌、跨区域市场舆情危机,甚至触碰无障碍合规红线。

本文梳理金融 UI 设计中最高发的五大配色雷区,拆解失误背后的底层逻辑,配套可直接落地的标准化解决方案,帮助设计师在视觉创新、品牌表达、交易安全三者间找到平衡,打造兼顾专业、易用、合规的金融色彩体系。

一、雷区一:设计师主观审美凌驾用户认知

image.png

金融色彩设计的核心是用户思维,而非个人艺术创作。若一味追求设计师偏好,无视不同人群的色彩认知习惯,极易造成信息读取障碍,削弱产品专业公信力。

(一)问题拆解

  1. 个人审美主导界面,功能性让步风格 不少设计师为追求 “高级质感” 滥用低饱和莫兰迪色系、大面积纯黑暗黑模式,直接抹平页面信息层级;也有人盲目堆砌荧光绿、高饱和紫等强冲击色,让银行、理财界面显得廉价、娱乐化,消解金融行业稳重底色。
  2. 用户分层匹配错位,视觉适配严重失衡 面向中老年理财客群的产品,大量使用低透明度渐变、浅淡抽象色块,账户余额、收益数字模糊难辨;主打年轻群体的基金、证券 APP,跟风酸性霓虹、故障艺术特效,花哨视觉冲淡专业属性,用户不敢放心投入资金。

(二)标准化落地解法

1. 搭建分人群用户色彩认知基线

先通过用户画像分层锁定色彩偏好与敏感阈值:

  • 中老年用户:优先暖调、高对比配色,规避暗底色、冷灰弱文字;
  • 高净值客户:偏好低饱和中性色系,排斥高饱和花哨视觉;
  • Z 世代年轻投资者:接纳渐变、轻量化动态效果,但核心交易区仍需保留传统金融安全色。

同步开展色彩语义认知测试,重点验证涨跌、风险、确认等关键功能色的大众联想,避免出现 “绿色代表亏损” 这类认知错位。

2. 按业态划定金融配色红线

针对不同金融品类设立禁用色彩规范,从源头规避风险:

  • 银行 / 保险:禁用荧光色、高饱和霓虹渐变、全屏黑色;
  • 证券 / 基金:主色避开红、绿两大涨跌标识色,防止行情视觉混淆;
  • 支付工具:支付、确认、退款等核心操作按钮,严格遵循大众通用色彩心智。

3. 用 A/B 测试量化配色效果

配色方案上线前必须完成对照测试,两类核心观测指标:

  • 功能指标:按钮点击率、表单完成率、交易误操作频次;
  • 情感指标:NPS 净推荐值、用户访谈中 “安全”“靠谱” 等正向关键词提及率。

二、雷区二:功能色与品牌色边界模糊,引发交易误判

 

金融色彩具备强指令属性:颜色直接告诉用户 “确认、警告、亏损、盈利”。若品牌色随意侵占功能色场景,色彩语义彻底混乱,轻则操作犹豫,重则造成资金误操作,同时无视色盲群体还会触犯无障碍法规。

(一)问题拆解

  1. 品牌色入侵功能场景,语义完全混淆 功能色是具备通用指令含义的专用色彩:红色 = 风险 / 警示 / 撤销,绿色 = 确认 / 成功,蓝色 = 进度 / 说明;品牌色仅用于 Logo、装饰、次要模块,不可替代功能色。 典型误区:品牌主色为红色,同时用红色标注风险弹窗、确认买入按钮,用户无法区分 “警示” 和 “操作入口”,关键交易时极易判断失误。image.png
  2. 单一色彩传递信息,无视色觉障碍人群 仅依靠红、绿区分涨跌行情,无文字、符号辅助,红绿色盲用户完全无法分辨盈亏;该设计缺陷不仅伤害用户体验,在多地还违反无障碍访问相关规范。

    image.png

(二)标准化落地解法

1. 色彩分层隔离:功能色优先级高于品牌色

建立强制规则:交易、风险、确认等核心功能区,优先使用通用标准功能色,即便和品牌主色冲突也不可替换。品牌色仅允许用于页面装饰、头部 Logo、次要营销模块,绝不干扰决策类操作。

image.png

2. 多维信息叠加,不单独依靠颜色表意

所有依靠色彩区分的信息,配套多重视觉辅助:

image.png

  • 涨跌数据:上涨配↑、+ 号,下跌配↓、- 号;
  • 风险等级:除红色警示外,加粗提示文案、增加边框标识;
  • 按钮状态:可点击 / 置灰状态,同步区分形状、描边粗细,不只用颜色区分。

3. 内置无障碍高对比度模式

产品设置中心增加一键切换高对比模式,采用黑白灰强对比 + 粗边框设计;设计阶段借助色盲模拟工具校验界面,保证色觉障碍用户完整获取全部金融数据。

三、雷区三:忽视地域文化色彩禁忌,全球化布局踩舆情雷

image.png

跨境金融出海时,语言翻译易被重视,但色彩背后的文化、宗教、政治象征极易被忽略。同一种颜色在不同国家、地区褒贬含义完全相反,微小配色失误会引发大规模市场负面舆论。

(一)问题拆解

  1. 色彩象征跨地域完全对立 最典型案例:红绿色涨跌语义冲突。国内市场红色代表上涨、喜庆;欧美证券市场红色代表下跌、亏损。若直接复用国内配色出海,海外用户会完全读反行情数据。 中东市场随意搭配绿色 + 星月元素,易被误认为专属伊斯兰金融产品,无关业务使用会被视作冒犯宗教。
  2. 触碰历史、政治敏感色彩组合 东欧市场避免红白黑组合,易关联纳粹历史符号;曾被殖民的南亚区域,慎用殖民国家国旗配色,极易触发民众抵触情绪。
  3. 区域通用警示色不统一 国际通用橙色代表警告,但日本金融产品习惯用黄色做风险标识,直接照搬国际配色会造成本地用户看不懂风险提示。

    image.png

(二)标准化落地解法

1. 分区域建立本地化色彩库

image.png

提前调研目标市场文化、宗教、民俗,整理各地区友好色系、禁忌色、功能专用色,为不同国家版本输出独立配色规范,拒绝一套配色全球通用。

2. 本地化三重审核流程

image.png

1)文化顾问初审:筛查配色、图形是否存在宗教、政治敏感元素; 2)本地用户焦点小组测试:收集大众对色彩的第一联想; 3)色彩语义校准:修正涨跌、风险、警示等功能色,贴合当地使用习惯。

3. 搭建色彩危机应急机制

面向高敏感海外市场,预留全局一键换色功能;若配色引发文化争议,可快速替换主色调;涉及易产生歧义的色彩场景,增加说明文案,标注 “配色无宗教、政治指向”。

全球化金融配色的核心不是统一视觉,而是 “一地一策” 的文化尊重,避开色彩认知盲区,才能真正建立海外用户信任。

四、雷区四:一味追求视觉高级,牺牲基础信息可读性

 

金融界面第一要务是清晰可读,账户余额、持仓金额、手续费、风险提示都是用户核心关切。很多设计师为极简氛围感,刻意压低对比度,导致强光、暗光、老年用户都无法正常读取数据,再精致的视觉设计也失去使用价值。

(一)问题拆解

  1. 低对比度设计,文字、按钮识别困难 浅灰文字搭配纯白背景、同色系灰色按钮 + 灰色边框,看似简约高级,实际弱光、户外强光下几乎看不清;中老年视力退化人群查看资产数字时障碍极强,直接降低产品使用意愿。image.png
  2. 深色模式粗暴反色,未做专业校准 多数深色模式仅简单反转浅色页面黑白,没有重新校准色相、对比度,纯白文字在深色底上刺眼疲劳,行情图表、数字辨识度大幅下降,违背深色模式护眼的初衷。

     

    image.png

  3. 未考虑多场景光线适配 设计仅在室内柔光屏幕调试,忽略户外日光反光场景,深色界面在阳光下数据完全看不清。image.png

(二)标准化落地解法

image.png

1. 严格遵循 WCAG 2.1 AA 无障碍对比度标准

落地硬性数值规范:

  • 正文文本与背景对比度≥4.5:1;大号标题文字≥3:1;
  • 按钮、图表等功能性色块对比度≥3:1; 设计全流程使用 WebAIM Contrast Checker、Figma 对比度校验插件,所有页面批量检测,不达标配色直接驳回。

2. 多场景视觉适配方案

  • 强光户外:提供高对比度浅色主题一键切换;
  • 深色模式:重新调和文字灰度,避免纯白刺眼文字,平衡清晰度与视觉舒适度;
  • 进阶功能:增加自适应亮度调节,根据环境光线自动调整页面色彩明度。

3. 多群体可用性测试

上线前分层模拟真实使用场景校验: 1)50 岁以上中老年用户,模拟 300-500lux 户外强光环境测试; 2)色盲模拟工具全页面扫描,确认图表、盈亏数字无识别障碍; 3)灰度模式预览,仅依靠明暗层级也能分清页面功能模块。

五、雷区五:盲目跟风流行趋势,品牌色彩辨识度彻底流失

image.png

金融赛道产品同质化严重,色彩是用户区分品牌的第一道视觉记忆点。一味照搬头部产品配色、追逐短期潮流,会让品牌失去专属视觉标签,在用户心中留下 “仿品、不够专业” 的负面印象。

(一)问题拆解

  1. 照搬头部竞品配色,陷入同质化内卷 大量理财、信贷 APP 直接复制头部平台标志性色彩(支付宝蓝、微信绿),用户难以区分品牌,甚至误以为是山寨产品;盲目套用欧美冷灰极简风,又和国内用户传统金融审美脱节。
  2. 潮流设计与金融属性严重冲突 跟风酸性霓虹、玻璃拟态、赛博渐变等潮流风格,视觉花哨但信息层级混乱;金融产品核心需求是稳重可信,过度潮流化会消解专业感。
  3. 品牌色彩频繁迭代,视觉记忆断裂 短期内多次更换主色(蓝→紫→橙渐变),用户无法形成稳定品牌色彩记忆;传统保险、银行产品强行套用加密平台潮流配色,业务调性与视觉完全割裂,信任感大幅下滑。

(二)标准化落地解法

image.png

1. 挖掘品牌原生色彩 DNA

回溯品牌历史 LOGO、线下网点视觉、传统 VI 系统,保留用户已形成认知的基础色系,在原有色彩框架内微调创新,维持视觉记忆连续性;色彩调性贴合业务定位:养老理财柔和暖调、青年理财活力低饱和渐变、对公金融沉稳深中性色。

2. 潮流趋势三重筛选机制

所有流行设计落地前,依次过滤三层标准: 1)功能性过滤:优先保留能提升可读性、操作效率的趋势,舍弃干扰数据展示的花哨特效; 2)本土化适配:国际潮流结合本土传统色彩改良,不直接照搬; 3)渐进迭代原则:每年品牌主色调整幅度控制在 10% 以内,避免用户认知断层。

3. 差异化色彩战略打造竞争壁垒

跳出行业通用蓝、灰体系,适度融入地域文化特色色彩建立专属视觉符号;针对不同客群推出细分色彩方案,用色彩传递产品定位,形成竞品无法复制的视觉记忆点。

结语:搭建金融配色不可突破的安全底线

综合五大配色雷区可以发现,金融色彩设计始终需要平衡三大核心维度:功能安全、品牌识别、用户认知,三者缺一不可,其中功能安全是不可动摇的底层底线。

1. 金融配色三大核心挑战

  • 功能安全为根基:配色失误会直接造成交易误判、资金损失,是所有设计的前置约束;
  • 品牌差异为竞争力:独特稳定的色彩体系,是同质化市场中抢占用户心智的核心武器;
  • 用户认知为标尺:所有色彩设计必须贴合大众使用习惯、适配全年龄段、跨地域人群。

2. 配色安全三大核心原则

  1. 功能表意优先,杜绝色彩误导 风险、确认、盈亏等关键功能严格使用通用语义色,配套文字、符号多重辅助;全页面对比度达标,兼顾色觉障碍、老年、强光场景用户。
  2. 品牌色彩稳中迭代,拒绝频繁大变 保留品牌原生色彩记忆点,年度微调幅度可控;潮流风格仅做轻量化点缀,不破坏金融稳重专业的核心调性。
  3. 尊重人群与地域差异,前置测试验证 国内分层适配不同年龄用户,海外市场分区域定制色彩库;所有配色方案上线前完成用户测试、文化审核、无障碍校验。

3. 行业未来配色发展趋势

随着 AIGC 设计工具成熟,智能配色系统将成为金融设计标配:依托海量用户数据自动生成兼顾合规、可读、品牌调性的色彩方案,大幅降低试错成本。 同时,个性化自适应配色、区域文化定制色彩、多光线智能适配深色模式,会成为金融产品的基础标配。

金融色彩设计,是理性规范与人文体验的结合。守住可读性、交易安全、文化合规的底线,再适度做品牌视觉创新,才能长久留住用户信任,打造有记忆点、零风险的金融视觉体系。

 

 

转载:站酷

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

 

image.png

 

兰亭妙微ui设计公司分享:是什么让 Airbnb 的设计成为行业黄金标准

清阳 设计思维

前言

兰亭妙微ui设计公司分享:当下,优质用户体验设计已经成为互联网产品构建差异化竞争力的核心抓手。在海量出行住宿类产品中,Airbnb 对用户体验的打磨堪称教科书级别,极少有品牌能像它一样,把线上预订流程转化为一段充满情绪、建立信任的完整旅程。

究竟是什么让 Airbnb 的设计成为业内公认的黄金标准?在深度体验、拆解这款 App 后不难发现,它的成功并非偶然 —— 整套产品体系牢牢锚定品牌使命用户设计两大核心,从情绪、行为、交互全维度贴合用户真实需求。

下文结合产品实际表现,拆解 Airbnb 设计体系的五大核心巧思:

一、引导随心探索,而非强制用户决策

image.png

市面上绝大多数旅游 App 打开首页,第一句弹窗或搜索框都会直白提问:“你想去哪里?”,一上来就逼迫用户明确出行计划。 Airbnb 则反其道而行,首页放弃硬性提问,直接铺陈一批氛围感十足、极具吸引力的目的地与房源实拍。不催促用户立刻下定计划,而是用场景画面勾起好奇心,邀请用户自由探索旅行的无限可能性。

这套设计巧妙运用登门槛效应,大幅降低用户上手门槛:不靠冰冷的筛选逻辑绑架操作,而是唤醒人本能的好奇与想象。 设计底层逻辑完全贴合品牌内核:平台的目标不是催促用户完成下单交易,而是帮用户萌发出行灵感、找到心中向往的目的地。Airbnb 首页的核心定位,是灵感发现页,而非预订工具页。

二、售卖旅行情绪体验,而非单纯出租房间

image.png

传统住宿预订平台的筛选逻辑极度功能化,只会围绕 “大床房、距市中心距离、房型面积” 等硬件参数划分房源。 Airbnb 彻底重构选择逻辑,把选择权交还用户的情绪需求:首页设置「迷你小屋、山野美景、临海房源」等场景化分类标签,提供情感导向选择,而非冰冷的功能筛选。

用户打开 App 不再是 “找一个过夜的房间”,而是挑选一段专属的旅行体验。这种以个性化情绪体验为核心的产品思路,完美呼应 Airbnb 自身定位 —— 它是承载旅行情绪的生活平台,不只是解决住宿刚需的工具。

这一切设计的根源,来自 Airbnb 的核心品牌使命:Belong Anywhere(四海皆有家)。这份超越交易的品牌愿景,为平台所有产品设计提供统一底层逻辑,所有细节最终都落脚于 “归属感” 的打造。

三、弱化冰冷房源,强化人与人的温度联结

image.png

Airbnb 最打动人心的设计决策之一,是主动放大房源背后真实的房东形象,区别于酒店标准化、无具象人格的客房。

任意房源详情页都会清晰展示房东头像、个人简介、经营年限、超房东认证,搭配过往住客真实评价。当用户预订房源时,感知到的不再是一笔线上交易,而是去到一个陌生人的家做客。

通过突出人与人之间真实的社交联结,Airbnb 落地了 “四海皆有家” 的品牌承诺,让旅行脱离单纯的住宿消费,变成一段有温度、有记忆点的私人情感经历。

四、共情旅行者真实心态,包容无目的浏览行为

image.png

并非所有打开 App 的用户,都已经敲定出行日期与目的地。Airbnb 精准捕捉到用户 “随便逛逛、种草旅行” 的轻需求,并针对性落地适配设计:

  1. 无需填写出行日期,就能随意浏览全球各地全部房源,不设置操作门槛;
  2. 顶部搭载「自由浏览」功能,支持无压力随心翻阅,不强制固化出行计划。

这套充满共情力的设计,充分接纳用户 “无心种草、随意浏览” 的行为,而非只服务有明确下单需求的用户。这种读懂用户潜在心理的情感化设计,不断拉近用户与平台之间的距离。

五、克制精致的细节交互,每一步都松弛舒适

image.png

 

如今大量 App 堆砌浮夸动效、冗余操作,反而加重用户负担;Airbnb 的交互设计始终遵循三大原则:简洁自然、易懂直观、高效达成目标。

细节处藏着满满的巧思:

  • “稀缺房源(Rare Finds)” 标签、报价提示搭配轻量化微动效,温和突出关键信息;
  • 一键收藏心愿单、日历选择日期过渡顺滑流畅;
  • 页面转场柔和舒缓,没有突兀跳转。

所有交互细节最终服务统一情绪:让用户全程感到自在、放松,拥有完全掌控行程的安全感,持续强化 “到家一般自在” 的品牌感受。

总结:好设计,传递可感知的情绪与归属感

Airbnb 能成为全球设计黄金标准,不在于界面极致复杂、视觉奢华,也不是单纯极简,核心优势是高度人性化、情感化,且全程与品牌使命自洽统一

它向所有产品设计者证明:一款产品想要跳出工具属性、建立长久竞争力,只需抓住四件事: 包容用户的探索欲、搭建人与人的情感联结、打磨克制舒适的交互、通过细节建立信任,最终传递 “归属感”。

在同质化严重的 App 赛道里,Airbnb 给出了最珍贵的启示:设计从来不止是产品的外观样貌,更是用户使用全程真切感受到的情绪与体验。

 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:UI设计师必看!5个章节教你系统掌握顶部导航栏设计

清阳 设计资源

兰亭妙微ui设计公司分享:作为产品体验的“第一道门”,顶部导航栏(Navigation Bar)的设计直接影响用户对产品的使用效率和品牌感知,基于我们产品的使用场景,Navigation Bar 呈现出多样的组合方式来表达不同的页面层级及内容,由于没有统一的设计规范,因此出现了细节混乱不一致等问题。同时,为了适应产品的不断迭代更新,提高设计和开发的效率,保证产品体验的一致性,需要设计组件库有更具自由度、灵活拓展性的表现以及规范指引。

那么如何拆解复杂场景,收敛结构,搭建出灵活、易用、好维护、可拓展的 Navigation Bar 设计组件呢?请跟随本文的脚步一起看一看具体的实践思路吧。

一、怎么个事‍‍‍‍‍‍‍

通过App和小程序的场景收集,我们发现目前线上的 Navigation Bar 可总结出10+种不同的样式,由于各部分元素没有统一规范,出现了各种不同的问题,急需对组件库重新进行收敛和升级:

  1. Image尺寸和圆角未统一
  2. icon颜色、大小、样式不一致
  3. 元素间距、对齐方式不一致
  4. 标题文字字号不一致
  5. 标题文字字数限制未规定,出现两行展示的情况
  6. 部分图标被截断,显示不完整
  7. App和小程序同一场景样式未对齐

image.png

 

二、别人是怎么做的?

在主流的大厂组件库中,我们发现 NavgationBar 都单独提取出了左侧区域及右侧区域,在命名上也看不到难以理解的业务属性命名,这也让我们意识到了要转变搭建 NavgationBar 组件的逻辑,跳出复杂的业务场景,从结构入手,形成容器思维,提升组件的包容性。

image.png

 

TDesign

image.png

 

Ant Design Mobile

三、NavBar是什么?‍‍‍‍‍‍‍

定义

顶部导航栏(Navigation Bar)位于屏幕的顶部,状态栏的正下方,主要用于帮助用户明确页面位置、层级等,导航栏包含了一些控件,用来在应用里不同的视图中导航,同时还承载了针对当前页面全局性的操作。

作用

  1. 导航:提供离开当前页面的出口,即返回上级(适用于非一级页面)
  2. 定位:告知用户当前所在位置
  3. 提供全局操作:一般是以图标、文字、按钮或组合的形式存在
  4. 增加品牌曝光:例如品牌Logo、容器品牌色、图标品牌色等
  5. 搜索:方便用户快速查找内容
  6. 分类整理:以分类tab为代表,本质是将多个相关的同级页面聚合在一起
  7. 用户账户相关:如登录、注册、个人中心等,通常结合用户头像或特定图标表示
  8. 动作指引:基于当前页面动作指引下一步去向

image.png

 

四、场景复杂,如何简化?

我们的业务场景丰富,还需要同时兼顾 App 和小程序,以及正常模式和Ghost模式,在这个基础上,我们的NavgationBar 样式能枚举出 25+ 种,这么多场景,总不能全部做成组件母版吧,那么应该如何简化呢?

image.png

 

找共性 — 打地基

首先,从基础结构上看, Navigation Bar 都包含了3个部分,可以归纳为Left(左侧容器)、Center(中间容器)、Right(右侧容器),容器之间互相适应。

image.png

 

找特性 — 搭建基础变体

基于业务诉求,各部分容器生成了各式各样的类型和组合方式,但是在组件设计中,需要避免把所有的情况枚举成选项,否则会丧失组件使用时的灵活性,并且难以应对后期的拓展需求,这就需要我们在众多情况中先找出特性,并抽象化的表示。

通过总结各部分容器的作用及场景,可得出其各自包含的基础组件类型变体(Variants)如下:

Left(左侧容器):

  1. Logo
  2. IconButton

Center(中间容器):

  1. SearchBar
  2. Tabs
  3. Text

Right(右侧容器):

  1. Button
  2. IconButton

增加底层灵活性

再拓展开来,每个基础类型组件还有不同的结构性需求,这需要组件具备底层的灵活性,以适应多种状态切换。可以抽象地理解为,为一个小组(基础组件类型)设置一定的成员名额(Swap 槽位),基于不同的需求可选择成员(原子)单独上岗,或者合作共同上岗,随着小组的发展,需要的时候也持续支持加入新成员。

image.png

 

Navigation Bar 组件结构层级

五、食用指南

NavBar 基础变量

为 NavBar 的基础变量(Variant)设置了App / 小程序的平台切换,以及适应深浅色模式背景的色彩切换,同时可自由控制 Left、Center、Right 容器的开关。

image.png

 

Left 容器

Left 容器的作用包括展示品牌LOGO、页面主题以及提供离开当前页面的出口,即返回上级(适用于非一级页面),通过 Instance Swap,我们可以在组件的属性面板中快速替换原子组件的样式,这种方式能省去组件搭建和修改过程中的重复操作,支持直接的无限拓展。

image.png

 

Center 容器

在Center 容器中,基于业务场景的需求,提供搜索(Search)、分类(Tabs)、文字标题(Text)三种基础类型组件。其中 Text 类型能够结合不同的原子形成多种组合,通过赋予每个原子组件属性(Property),可以在 Text 子组件中灵活控制其开关组合,例如这里我们涉及到了 Text 排版的切换、前置图片(Lead_Img)、后置标签(Trailing_Tag)、后置箭头(Trailing_Arrow)、背景(Bg)等。

image.png

 

Right 容器

Right 容器一般包括全局的操作控件,其中最常见的就是按钮(Button),向下拆分还包括了Text Button、Icon Button 等,在实际应用场景中,由于 IconButton 的基础原子组件本身自带边距,因此在页面中所需预留的间距(Padding) 与 Button 不同,同时我们还会遇到 Button 与 Icon Button 组合使用的情况,因此在 Right 容器的 Button 子组件中,我们预留了四个 Swap 槽位,并赋予了 TextButton 单独的 Padding,这样在使用组件时,能够降低解绑率,通过开关即可随意组合,同时也无需手动再调整间距(Padding),易于设计组内统一设计规范。

image.png

 

结语

在 NavigationBar 设计组件的升级过程中,我也深刻意识到了怎样才能叫“好的设计组件”,我们不能将眼光局限于现有的业务场景当中,需要在我们收集出所有场景之后深入的分析,建立容器思维,寻找底层结构的共性和逻辑,搭建坚固的基底之后,再一层一层往下拆分、嵌套,保证组件的灵活性、可拓展性。

 

 

转载:优设

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

 

image.png

 

兰亭妙微ui设计公司分享:Figma 的更新,我们该如何读懂底层逻辑?

清阳

兰亭妙微ui设计公司分享:如今 Figma 又迎来大规模更新,不少设计师第一反应是:又要重新适应、学习成本又变高了?今天抛开表层功能,拆解这次更新背后的产品逻辑,换个长线视角看懂工具迭代。

一、本次更新核心:打造「一核心、多产品线」设计生态

本轮更新覆盖 Draw、Sites、Make、Buzz 等多款配套工具,不再只局限 UI 绘图,而是持续拓宽产品边界,搭建完整闭环式设计商业版图,下面分模块拆解核心更新点:

1. Draw Mode:补齐矢量绘图短板

image.png

Draw Mode 是嵌入 Figma Design 的全新矢量绘图模式,直击软件长久以来的痛点:原生矢量图形处理能力薄弱,绘制图标时导出极易出现像素、路径错乱等问题。
本次更新完整重构矢量底层能力:新增钢笔套索选区、图形布尔运算快捷操作,原生支持路径文字,彻底告别依赖插件实现文字绕排的时代;同时配套多款手绘笔刷,可直接手绘、手写创作。

image.png

 
目前暂不清楚该功能对 iPad 端的适配优化程度,若能实现平板端流畅联动,手绘、插画设计场景会迎来大幅提升。
 
此前有第三方客户端工具可弥补同类短板,但 Draw Mode 作为官方原生功能,稳定性与适配性更有优势;整体来看,该功能优化对常规 UI 工作流影响有限,插画、图标设计师感知会更强。

2. Sites:一站式设计建站,打通设计到落地闭环

image.png

这是我本次最期待的更新模块。此前试过 Framer 等建站工具,从视觉设计到页面部署的操作链路繁琐,学习成本居高不下。
现在 Figma 内置建站能力,设计师可直接在画布内完成页面设计与网页配置,实现「设计即建站」的完整闭环。美中不足的是现阶段暂不支持 CMS 内容管理系统,海量图文内容场景下,后续批量维护、更新效率会受限。

image.png

做个预判:半年内国内会涌现大量基于 Figma Sites 搭建的线上作品集,设计师会开始探索多版式、多交互形态的在线个人展示页。

3. Buzz:轻量化品牌资源库,面向营销人群降本增效

image.png

Buzz 本质是轻量化品牌素材资源中台,打通设计「创作」到「复用落地」的链路,主打面向品牌、市场运营人员使用。

image.png

 
无需掌握专业绘图能力,就能一键调用品牌标准化模板、素材,快速产出宣传物料,相当于把品牌物料生产能力从设计师延伸至全业务团队。

4. 其余配套工具

image.png

Grid、Make 等辅助工具同步迭代,但偏向细分小众场景,对绝大多数设计师日常工作影响不大,感兴趣可自行上手体验。

二、跳出当下,用长线视角看懂迭代意图

image.png

回看 2024 年争议满满的 UI3 改版,如今再看就能读懂官方的长远布局:统一全局交互布局,是为后续多工具拓展预留底层架构空间。
做 B 端产品时我们常说,导航、底层框架的核心优先级是业务拓展性,体验细节次之,Figma 的改版逻辑完全同理:先统一底层交互规范,再逐步微调不合理操作,整体交互底层逻辑不会大幅推翻,才有空间孵化 Sites、Buzz、Slide 等全新产品线。
很多人只吐槽改版带来的短期不适,却忽略产品迭代是为未来 3-5 年的生态铺路。

三、工具类产品通用迭代逻辑:以核心为根基,向外拓展用户圈层

image.png

在我看来,Figma 本质是一款面向设计人群的 B 端工具产品,这类工具的核心发展逻辑始终是:一个核心主干功能,搭配多类辅助场景工具协同
Figma 的主干是 UI 界面设计,在此基础上先后延伸 FigJam 协作白板、Slide 演示文稿、Buzz 品牌物料、Sites 建站等产品线,一步步拓宽用户群体。
 
不少人调侃,这套全方位扩张,像是 2023 年 Adobe 收购失败后的差异化突围。补充客观背景:当年收购终止源于海外反垄断监管限制,Adobe 并非主动放弃,还为此赔付了 10 亿美元违约金。

image.png

矢量绘图、品牌物料、网页建站,恰好都是 Adobe 生态的核心赛道。而 Figma 依托网页端轻量化优势,正在吸引 PPT 制作、平面、品牌营销等从业者脱离笨重的本地 Adobe 套件,转向云端一站式设计工具。现阶段我个人的全流程设计工作,已经全部在 Figma 内完成。
除此之外,工具产品迭代必须兼顾分层用户:使用者分为新手、进阶设计师、资深专家三类。

image.png

 
产品设计需要平衡两难选择:是新增高阶功能、拔高专业上限,还是简化操作、降低新手入门门槛?这套分层用户的平衡思路,也是所有 B 端工具设计师需要持续思考的核心命题。
 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:5步学会UI控件分类!照着iOS26组件库快速入门(上)

清阳

兰亭妙微ui设计公司分享:在学习 UI 初期,除了学会软件要还要了解我们设计界面时都在设计什么,而 UI 控件就是首当其冲的设计对象。
UI 控件是一个统称,在下级还包含不同的控件类型,而这些控件类型是今天实现界面展示和交互的必要元素。虽然控件的外观在不同项目中样式各异,但控件本身的类型却是非常固定的。
学习控件最佳方式,就是先从 iOS 官方组件库中提供的控件开始学起,然后再拓展到一些特殊的样式和类型中。
所以下面,我们会以 iOS26 规范的组件库为标准,来对 UI 的控件类型做一个详尽的说明,帮助大家快速理解行业对控件的最新定义。

image.png

image.png

image.png

image.png

image.png

image.png

 

image.png

 

 

转载:优设

 

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

 

image.png

 

兰亭妙微ui设计公司分享:京东金融 & 招商银行黄金交易功能深度对比

清阳

一、体验背景

兰亭妙微ui设计公司分享:近期国际金价持续走高,出于产品体验研究目的,我分别在京东金融、招商银行、支付宝完成黄金产品建仓测试。
 
其中支付宝黄金本质为场内黄金基金,交易规则与积存金、银行账户金存在底层差异,不具备横向对比基础,因此本次测评仅聚焦京东金融积存金招商银行黄金两大产品。
二者底层交易逻辑相近,但在页面布局、交互链路、风险信息披露、操作引导上存在显著分化。差异背后,是互联网理财平台与传统银行 APP 截然不同的业务定位、目标用户心智与合规管控思路,也直接影响用户下单效率、交易决策心理。
本文以黄金投资三大核心高频动作 —— 买入、卖出、条件单为拆解主线,从「视觉信息层级、操作流转效率、用户引导策略」两大维度,完整对比两款产品全流程体验。

体验测试环境image.png

设备系统:iOS
 
京东金融版本:7.0.10
 
招商银行 APP 版本:13.1.0

对比链路与评判维度

完整流程:首页黄金入口→买入操作→卖出操作→条件单委托
 
分析维度:视觉情绪与信息层级、操作效率、风险与转化引导策略
两款 APP 首页金刚区均配置「黄金」一级入口,下面从首页一屏开始逐层拆解差异。

二、黄金首页首屏对比

1. 京东金融・积存金首页

image.png

页面将实时价格走势曲线作为视觉核心,遵循国内金融市场红涨绿跌通用视觉规范,用高饱和色彩强化行情数据优先级;信息垂直排布、密度适中,大幅降低用户信息筛选认知成本。
 
「买入 / 卖出」核心操作按钮固定于页面底部,形成查看行情→快速决策→一键交易的极简线性路径,最大程度缩短 “行情浏览到下单执行” 的操作距离,适配高频短线交易用户。

2. 招商银行・黄金首页

image.png

整体采用产品陈列式信息架构,顶部营销 Banner 抢占首屏视觉焦点,下方以网格布局陈列多类黄金产品,侧重展示产品线丰富度与银行品牌稳重调性;通过分组模块梳理产品关系,但所有交易动作均需跳转二级页面完成。
 
完整链路为挑选产品→查看行情→审慎决策→执行交易,整套设计以 “风险缓冲、理性投资教育” 为底层逻辑,更匹配风险偏好保守、低频操作的存量理财用户。
补充细节:页面内「持仓信息」仅为可点击卡片热区,无明确按钮标识;「黄金活期 - 购买」为独立操作入口,两条入口跳转落地页结构、交互逻辑完全割裂,极易造成用户操作认知混乱。

三、买入流程体验对比image.png

京东金融

买入采用弹窗浮层交互,行情页面不中断,信息高度聚焦、操作反馈即时。
 
用户无需跳转页面,在行情首页即可完成「输入投资金额→确认下单」全链路;输入金额前前置交易规则说明,提前建立用户收益与成本预期;输入数值后即时展示快捷金额标签、预计买入克重、持仓均价等关键数据,核心信息一屏完整呈现。
 
整套交互以高效快速决策为核心,适配高频小额、短线交易用户,信息透明化设计也能有效提升用户下单信心,交易流畅度更强。

招商银行

image.png

买入链路层级更深,需多层页面跳转才能完成操作;且行情页存在两条差异化入口,落地页体验割裂:
  1. 从「黄金活期 - 购买」按钮进入:页面侧重新用户教育,主推定投、一次性购买,面向从未持仓的新手投资者;
  2. 从「持仓信息」卡片热区进入:页面聚焦存量用户资产管理,核心按钮为卖出、定活互转、加仓购买。
两套页面在模块结构、操作按钮组合、引导话术上差异明显,虽初衷是区分新老用户、做分层运营,但统一操作预期被打破,大幅降低操作连贯性,用户极易产生困惑。整套多层漏斗式设计,依靠增加操作阻力强制用户审慎思考,贴合银行强合规、重风控的产品基因。

四、卖出流程体验对比

image.png

京东金融

卖出复用与买入统一的弹窗交互逻辑,全程不脱离行情页面,保证用户对实时金价的连续感知;内置快捷卖出档位,清晰展示卖出后实际到账金额,信息层级简洁直观,弱化交易操作的心理压力,提前给用户收益预期。

招商银行

延续买入 “分层披露、渐进展示” 的设计思路,完整链路:黄金首页→产品详情页→卖出操作页,分步释放交易信息,通过拉长操作链路引导用户三思后操作,完全匹配银行对稳健投资、风险管控的底层需求。

五、条件单(委托挂单)功能对比

image.png

京东金融

整体页面统一品牌视觉,保留红绿行情波动标识,持续营造金融交易氛围;采用页签分区管理限价买入、限价卖出等不同挂单状态,单页内完成全部委托状态查看,避免频繁跳转造成认知断裂。
 
全部核心操作集中在同一页面,搭配标准化价格标签、辅助测算字段,交易效率拉满;功能辅助信息完整透明,直观展示委托预计差价、卖出手续费,同时支持自定义挂单有效期、多支付渠道选择,给用户充足的决策辅助工具,适配有灵活交易策略需求的投资者。

招商银行

同样保留行情色彩规范,但交互链路冗长:查看历史委托需依次跳转「黄金首页→持仓页面→历史交易」,跳转节点多、数据分散,大幅降低信息查阅效率。
 
同时存在文案术语不统一问题:持仓页按钮标注「历史交易」,点击后页面标题改为「交易记录」,用词冲突会扰乱用户固有心智模型;金融场景下用户本身敏感度更高,模糊、不统一的术语会直接加剧操作焦虑。
功能层面设计偏保守,缺失直观的差价测算、手续费前置提示,自定义挂单有效期需额外唤起弹窗操作,缺少轻量化决策辅助工具,对需要精细化交易策略的用户支撑不足。

六、总结:两款产品底层设计定位与优劣势

image.png

产品底层定位差异

  1. 京东金融:高频交易效率优先
     
    搭建极简闭环交易链路,行情、买卖、条件单全部支持单页 / 弹窗快速操作,以最短路径、实时数据反馈为核心优势,服务追求便捷、短线高频操作的互联网理财用户。
     
    短板:极致简化的操作链路弱化了风险提示权重,容易诱导用户冲动交易,风险约束力度偏弱。
  2. 招商银行:风险管控与投资者教育优先
     
    采用多层漏斗式分流设计,功能入口分散、操作链路拉长,依靠适度操作阻力倒逼用户理性决策,是传统银行强合规、稳风控基因的直观体现,适配长期、低频、保守型理财人群。
     
    短板:分层入口造成页面逻辑割裂,跳转频繁、术语不统一,打断操作连贯性;交易辅助工具偏少,无法满足精细化投资需求。

额外体验吐槽

京东金融存在一处细节体验缺陷:开启金价报价浮窗后,切出 APP 回到桌面再重新进入,会强制暂停后台音乐播放,对多任务使用场景十分不友好。
 
再次提示:本文仅为 UI/UX 产品设计层面分析,不构成任何理财、交易操作建议,投资有风险,入市需谨慎。

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:巧思破同质化|8 组极具创意的 UI 设计实战案例

清阳

兰亭妙微ui设计公司分享:随着行业设计师专业能力整体提升,线上产品视觉完成了基础品质升级,但界面同质化问题愈发突出。想要让自家产品在海量应用中形成记忆点,设计师需要从视觉风格、产品特征、交互细节多维度挖掘差异化表达。本文精选 8 个成熟 APP 落地案例,拆解可复用的创新设计思路,为 UI/UX 设计提供实操灵感。

全文导读

  1. 业务符号融合:特征化卡片设计
  2. 空间布局巧思:重构个人中心视觉
  3. Z 轴层次升级:异形卡片 + 图标叠层设计
  4. 情感氛围营销:APP 图标应景化改造
  5. 人性化交互:兼顾需求与隐私的通知引导
  6. 叙事化动效:用动态画面建立用户信任
  7. 材质光影塑造:高质感会员等级卡片
  8. 动态导航创新:可形变底部标签栏

一、业务特征化卡片设计

image.png

卡片是当下 UI 体系中最高频的信息承载形式,优势在于规整信息模块、清晰划分视觉层级,同时拥有造型、色彩、空间光影丰富的改造空间。
闲鱼租房频道给出了很好的落地参考:将房屋户型、租住相关业务符号图形化,直接融入卡片造型体系。一方面强化赛道专属识别属性,具象的房屋图形更易抓取用户视线;另一方面专属视觉符号能加深用户对平台业务的记忆,摆脱通用卡片的平淡感。

二、重构布局逻辑:巧思满满的个人中心

image.png

个人中心是所有 APP 的标配模块,也是最容易出现设计撞款的区域,绝大多数方案局限在纯色背景、标准圆角头像的固定模板里。而嘀嗒出行跳出固有框架,在空间结构上做出差异化:
 
采用超椭圆头像,搭配卡片左上角内凹造型,填补页面空白区域,让整体版面饱满均衡。既自然突出用户头像核心视觉,又规避大面积留白带来的空洞感,结构改造简洁且辨识度极强。

三、异形卡片叠层:打造立体 Z 轴视觉

image.png

卡片设计的核心价值是构建界面空间层次,而进阶设计的关键,就是深挖纵向 Z 轴的视觉表现力。
 
闲鱼副业栏目采用「局部内凹异形卡片」方案:裁切卡片一角预留图标专属位,底层衬底卡片拉开前后景深。一凹一衬双重结构强化立体层次,不规则外形区别于常规圆角矩形,能快速抓住用户视线,是低成本做出差异化的高效手段。

四、应景式 APP 图标:用视觉唤醒情绪共鸣

image.png

节日、季节主题图标早已成为主流运营手段,核心逻辑是借场景化视觉烘托氛围,联动用户感官与情感,拉近产品和用户距离。
以夏季的饿了么图标为例:整体替换冰晶质感造型,搭配上升气泡细节,视觉直接传递清凉体感。无需文字说明,就能唤醒用户夏日消暑的需求联想,温和提升用户好感,实现轻量化营销表达。

五、兼顾用户体验的系统通知引导

image.png

如今多数用户会批量关闭 APP 推送,过度消息打扰是核心痛点。如何引导用户开启通知,同时规避推送扰民,是设计需要平衡的矛盾点。
嘀嗒出行消息设置页提供了人性化解法:主按钮清晰引导开启系统通知,同时增设「一键免打扰」功能。从用户视角给出选择权,允许自主管控消息频次,消解用户对推送的抵触心理,在运营目标与用户体验之间找到平衡。

六、叙事动效:可视化流程建立用户信任

image.png

商品品质、服务保障、平台公信力是用户信任的核心来源,单纯文字说明说服力有限,而动态视觉可以把抽象保障具象化。
闲鱼数码频道用连贯动效完整演绎商品标准化链路:质检、封装、物流全流程动画叙事。相比静态文字,动态画面拥有更强场景代入感,把复杂服务流程简化为直观视觉,降低用户理解成本,同时大幅提升平台专业、可靠的感知。

七、光影质感塑造:区分层级的会员卡片

image.png

卡片创新不止局限外形结构,材质、光影、肌理的精细化处理,同样能拉开设计差距,细微质感往往能带来超出预期的精致度。
小象优品 PLUS 会员卡片做了完整质感体系设计:异形卡片适配多会员等级切换,不同等级采用差异化材质肌理做视觉区分;卡片边缘增加细腻渐变光影,强化卡片与页面背景的纵深感,高级质感直观凸显会员权益的价值感。

八、可形变动态底部导航栏

image.png

底部标签栏是用户高频操作区域,迭代空间充足,造型、图标、动态交互都能成为创新突破口。
爱奇艺底部导航针对「桃豆」功能做差异化凸起造型,强化曝光;点击「免费」频道时,凸起模块自动收缩为常规样式,搭配顺滑过渡动效。动态形变既解决凸起结构遮挡视频进度条的问题,又通过动态变化持续吸引用户注意力,兼顾功能实用性与视觉趣味性。

总结

打造产品差异化,不必一味追求颠覆性视觉风格,页面细节、模块结构、交互动态、材质光影的微小创新,同样能塑造专属产品识别度。以上 8 个落地案例均来自线上成熟产品,可直接拆解复用,希望能为各位设计师带来创作新思路。
 

转载:站酷

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

 

image.png

兰亭妙微ui设计公司分享:不一样的标签页设计

清阳

兰亭妙微ui设计公司分享:标签页是 UI 设计里高频通用的基础组件,不管是面向普通用户的 C 端产品,还是企业后台类 B 端系统,几乎都会用到。
 
市面上绝大多数标签页设计同质化严重,本篇整理多款差异化标签页方案,帮大家跳出固化设计思路,优化页面视觉层次与用户操作体验。

一、创意标签页基础样式分类

1. 图标 + 文字组合式

image.png

图标与文字采用上下分层排布,选中标签搭配圆角填充底色做区分。

image.png

 
图文搭配的形式能丰富页面视觉层次,弱化单调文字标签的乏味感,兼顾识别性与精致设计感,适配首页、分类导航等场景。

2. 主标题 + 副标题双层信息

image.png

image.png

标签分为上下两行:上层为主导航标题,下层放置精简副标题。
 
副标题可补充品类、数量、说明等关键辅助信息,用户无需点击就能快速读懂标签含义;选中 / 未选中状态依靠文字色差做区分,简洁清爽,适合内容信息量大的后台、资讯类页面。

3. 异形选中态标签

image.png

image.png

打破常规矩形底框,把选中标签的背景设计为不规则异形造型,常搭配卡片式布局使用。
 
造型独特、辨识度极高,能形成强烈视觉差异化,适合潮流 APP、活动专题、创意运营页面,强化页面专属设计美感。

二、多标签场景:标签数量超 5 个的适配方案

实际项目中经常出现标签数量过多、一行放不下的问题,网页与移动端分别有成熟落地解法:
  1. PC 网页端

    image.png

     
    在标签栏左右两端增加翻页箭头按钮,点击即可横向滚动,查看隐藏标签,交互直观、适配后台管理、网页商城等宽屏场景。
  2. 移动端 APP
     

     

    方案一:横向滑动标签栏,依靠左右滑动手势浏览全部标签,是电商、资讯类 APP 最常用的轻量化方案;
     image.png
    方案二:搭配下拉收纳菜单,超出可视区域的标签收拢在下拉面板内,适合标签总量极多、分类繁杂的产品。
     

    image.png

    image.png

     

    可根据自身产品业务量级、用户操作习惯灵活选用。

结语

以上就是本次标签页差异化设计的全部分享,希望能给各位 UI 设计师提供新的设计思路,落地更出彩的界面导航组件。感谢阅读与支持!
 
 

转载:站酷

 

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

 

image.png

兰亭妙微ui设计公司分享:Figma 组件系统化搭建完整思路

清阳

一、前言:组件化是设计系统的核心基石

兰亭妙微ui设计公司分享:搭建标准化设计系统时,组件化是保障视觉统一、提升团队产出效率的核心方案。早年多数 UI 设计师依赖 Sketch 完成组件库搭建,但随着企业团队规模扩张、多端业务同步迭代、跨地域协作需求激增,Sketch 在跨文件同步、多端适配、动态主题管理、多层级样式联动等场景的短板逐渐凸显。
而 Figma 凭借原生云端协作、灵活的组件嵌套与变体体系、完备的变量 Token 能力,成为现代设计系统搭建的最优载体,核心优势体现在两点:
  1. 组件支持多层级嵌套与多维变体,可快速承载复杂交互、多状态切换场景;
  2. 内置变量与样式模式,一键实现全局主题切换,适配黑白模式、品牌换色等需求。
借助 Figma 搭建标准化组件,不仅能提升素材复用率,更能从根源降低后期迭代、样式维护的成本。本文将从 Figma 核心变量能力、色彩体系规范、四层组件分层架构、实战案例对比四个维度,完整拆解一套可落地、易维护的 Figma 组件库搭建方法论。

 

二、Figma 核心底层能力:变量系统(参数化组件)

2.1 变量系统核心逻辑

image.png

变量系统本质是设计属性参数化:将颜色、字号、间距、圆角、文案等视觉属性抽离为独立可复用数据源,所有 UI 元素统一引用数据源,实现一处修改、全局同步更新。
 
Figma 支持四类基础变量:颜色、数值、字符串、布尔值。我们可以通过分层设计 Token 构建变量依赖关系,把基础色、功能色、组件色逐层关联,大幅简化组件搭建与迭代流程。

2.2 Sketch vs Figma 色彩变量核心差异

image.png

image.png

  1. Sketch
     
    仅支持图层样式 / 基础色值封装,本质是静态色值快照,不存在层级依赖关系;无法实现「变量引用变量」,若需要联动改色,只能逐个组件手动替换,多状态、多类型组件维护成本极高。
     
    举个例子:若 Toast 内图标色需要统一调整,Sketch 需要逐个修改所有 Toast 实例的图标图层,涉及上百种组件状态时工作量会指数级增长。
  2. Figma
     
    变量是独立数据载体,支持多层级嵌套引用,任意图层(填充、描边、文字、阴影)均可绑定变量;只需修改源头变量,所有引用该数据的组件、页面会自动同步更新,批量改色、换主题仅需一步操作。

三、组件库底层规范:基于可感知访问性的色彩体系

色彩是组件库的基础骨架,搭建前必须建立符合人眼视觉规律、满足无障碍规范的色彩体系,核心标准为可感知访问性

image.png

3.1 传统 HSL/HSB 色彩模型的先天缺陷

目前行业常用的 HSL、HSB 存在致命短板:同等饱和度、同等明度数值下,不同色相给人眼带来的感知亮度完全不一致。
  1. 人眼对不同波长色彩敏感度不同:彩虹渐变条中,黄绿色视觉亮度更高,蓝色、紫色观感更暗沉;

    image.png

  2. 同等明度数值下,黄色文字与紫色文字放在同一背景,对比度差异巨大,黄色文字可读性显著更低;

    image.png

  3. 明度趋近 0% 或 100% 时,饱和度视觉效果大幅衰减;50% 明度区间,色彩鲜艳度观感最强;

    image.png

  4. 受亥姆霍兹 - 科尔劳施效应、阿布尼效应影响,色相偏移时感知亮度会出现无规律波动。
基于 HSL/HSB 搭建的色板,会出现组件对比度失控、文字可读性不达标问题,即便套用 WCAG 对比度检测,也无法修正人眼感知偏差,难以满足 APCA 新一代无障碍色彩规范。

3.2 最优解决方案:OKLCH 色彩空间

为解决传统色彩模型感知亮度不均的痛点,CIE(国际照明委员会)先后推出 CIELAB、CIEHSL 等模型,经过多轮算法迭代后,OKLCH成为当下搭建无障碍、标准化色板的最优色彩空间。
 
OKLCH 以人眼真实视觉感知为基准统一明度,所有色相在相同明度参数下观感亮度一致,能稳定输出符合 WCAG、APCA 无障碍标准的色阶,从底层规避组件文字、按钮对比度失效问题,是企业级组件库色彩体系的首选方案。

四、分层嵌套架构:四级组件模块化搭建思路

掌握变量与色彩规范后,核心是搭建清晰的组件嵌套层级,遵循「自下而上、积木化组合」逻辑。
 
所有页面容器均可拆解为标题区、内容区、操作按钮区三大模块,模块内部由更小单元组件组合而成;底层单元向上嵌套组合成复合组件,复合组件再拼接为完整业务页面。这套分层逻辑有三大优势:
  • 底层组件独立可控,单点修改全局同步,大幅降低迭代成本;
  • 各级组件变体自动向上继承,仅需少量基础变体即可组合出海量场景;
  • 分层逻辑贴合前端开发组件化思维,实现设计与开发对齐,减少沟通损耗。

层级 1:原子组件(最小基础单元)

  1. 定义:不可再拆分的最小 UI 元素,是整个组件库的底层素材,例如基础按钮、单选框、输入框、图标、分割线、标签等;
  2. 规范:所有视觉属性统一绑定全局设计 Token(颜色、字号、间距、圆角变量),保证全局风格统一;
  3. 作用:作为上层所有组件的基础素材,不可单独用于完整业务页面。

层级 2:子组件(布局组合模块)

  1. 定义:由多个原子组件嵌套组成的局部布局单元,服务于父组件内部区块;
  2. 典型案例:弹窗标题栏、弹窗底部操作区、表单条目(标题 + 输入框 + 报错提示)、卡片头部;
  3. 作用:可被上层父组件调用,单独封装区块样式与变体,实现区块复用。

层级 3:父组件(独立完整功能模块)

  1. 定义:由原子组件 + 多类子组件组合而成、可独立使用的完整 UI 模块;
  2. 典型案例:弹窗、图片预览弹窗、全局提示 Toast、下拉选择器;
  3. 能力:支持多维度变体配置(尺寸、状态、主次类型、是否带关闭按钮),可直接在页面中实例化使用。

层级 4:业务组件(业务场景页面片段)

  1. 定义:整合父组件、子组件、原子组件,适配特定业务场景的复合页面片段;
  2. 典型案例:完整新增表单、商品卡片列表、订单弹窗、用户信息模块;
  3. 作用:直接交付业务页面使用,面向业务设计师快速落地页面,无需重复拼装基础模块。

五、实战对比:弹窗组件看 Figma 组件化效率优势

以业务高频组件「弹窗」为例,直观对比 Sketch 与 Figma 的封装、维护成本差距:

5.1 Sketch 组件封装痛点

image.png

Sketch 不支持多维变体联动,所有标题、内容、按钮的组合样式必须全部穷举封装为独立组件。
 
假设弹窗标题区 3 种样式、内容区 4 种样式、底部按钮区 5 种样式,全部组合需要封装 3×4×5=60 个独立组件;
 
若后续需要修改按钮圆角、标题字号,必须逐个打开 60 个组件逐一调整,多页面复用场景下漏改、错改概率极高,维护成本极高。

 

5.2 Figma 模块化嵌套实现方案image.png

Figma 采用「底层子组件变体 + 上层组合调用」逻辑,无需穷举全部组合:
  1. 分别封装三级独立子组件:标题区 3 种变体、内容区 4 种变体、按钮区 5 种变体,仅需制作 3+4+5=12 个基础子组件;
  2. 将三类子组件嵌套进弹窗父组件,设置多维变体切换面板,自由搭配不同标题、内容、按钮组合;
  3. 叠加尺寸、弹窗类型、是否遮罩等控制维度,仅靠 12 个基础单元即可衍生上百种弹窗形态。

5.3 迭代维护优势

后续视觉改版时,仅需修改底层按钮 / 标题原子组件,所有嵌套该单元的子组件、弹窗父组件、业务页面会自动同步更新,无需人工排查修改,从根源减少重复工作量。

六、总结:积木式模块化设计系统核心价值

Figma 组件搭建的核心思路可概括为组合式积木模块化设计,依托变量数据驱动、多层级组件嵌套、多维变体三大核心能力,构建一套高复用、易扩展、视觉统一的设计系统。
对比传统 Sketch 工作流,Figma 组件化体系的价值覆盖全链路:
  1. 设计提效:减少 90% 重复组件封装工作,变体自由组合,无需穷举所有场景;
  2. 维护轻量化:变量 + 嵌套联动,单点修改全局同步,降低改版迭代成本;
  3. 协作标准化:云端组件库实时同步,全团队共用一套视觉规范,消除页面视觉偏差;
  4. 产研对齐:分层组件逻辑与前端组件架构完全匹配,降低设计交付、还原沟通成本。
设计师无需耗费大量时间处理重复素材搭建,可将更多精力投入业务体验、创意设计等高价值工作。
 

转载:站酷

 

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

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档