首页

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

 

评论(0) 浏览(50)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(61)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(80)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(61)

兰亭妙微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。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(67)

兰亭妙微ui设计公司分享：58同城重磅发布品牌手册！

清阳 平面设计

 
兰亭妙微ui设计公司分享：线下广告投放、线上物料输出前，设计团队总会反复面对同类标准化难题：品牌 LOGO 标准呈现形式、子母品牌联合排版规则、主辅色选用逻辑、全渠道物料统一识别方案……
 
58 同城业务体量庞大、投放渠道多元、合作供应商众多，若缺少一套完整底层视觉规则，极易出现品牌形象割裂、识别弱化的问题。为此，2025 年 58UXD 团队完整搭建新版品牌视觉手册，统一全场景品牌输出标准，保障品牌形象专业、统一、高辨识度。

一、品牌核心底层：58 品牌屋

先明确品牌底层定位，所有视觉规范均围绕品牌内核落地：

image.png

58品牌屋
  • 品牌使命：帮助人们安居乐业
  • 品牌定位：一站式综合生活服务平台
  • 品牌调性：可靠、高效、多元、年轻
  • 目标人群：求职蓝白领、房产租购用户、家政维修本地生活家庭、新车二手车消费群体
  • 品牌核心利益：便捷生活、资源丰富、安心保障
  • 平台功能支撑：信息聚合、供需匹配、交易支持、增值服务
本次品牌手册覆盖四大核心板块：标识标准化使用、品牌色彩体系、字体规范、AI 品牌资产库统一管理，从源头规范全业务线视觉输出，高效传递「事事可成 58 同城」全新品牌主张。
image
手册内页预览
 

二、品牌标识标准化使用规范

1. 标准制图与色彩数值体系

团队输出精确网格制图，严格规定数字「58」与「同城」文字的间距、比例、倾斜角度；同时统一 RGB、CMYK、PANTONE 专色、HTML 色值，解决印刷、线上屏幕多媒介色彩偏差问题，保证 LOGO 在任何载体下色彩统一。
image
LOGO标准网格制图
image
LOGO色值规范
 

2. 多场景 LOGO 组合排版规则

针对不同合作、联动场景划定固定版式，统一子品牌、内部活动 IP、外部合作品牌、异业跨界联名的 LOGO 搭配规范：
  1. 子品牌联合：子标识高度为主 LOGO 的 5%-8%，预留固定安全间距
  2. 内部活动 IP：遵循统一尺寸比例，避免视觉主次颠倒
  3. 外部商业合作品牌：双 LOGO 区间隔固定留白，平衡双方视觉权重
  4. 异业跨界联名：增设视觉分隔符号，区分双方品牌体系

image.png

子品牌联合规范

image.png

内部活动标识规范

image.png

外部合作品牌规范

image.png

异业联名规范
 
 

三、全新品牌主色：58 心意橙

配合「事事可成 58 同城」全新 slogan，58 推出专属主色「心意橙」，融合原有品牌红、黄基因，既延续大众固有品牌记忆，又注入年轻鲜活的视觉活力。

image.png

58心意橙色卡
 
色值标准：
 
HTML：#FF4614
 
RGB：255 70 20
 
CMYK：0 80 90 0
 
PANTONE 172C
色彩承载品牌情感：「心意橙」代表平台对用户的真诚期许，传递 “生活诸事皆可圆满成事” 的温暖愿景，适配招聘、房产、家政、汽车全业务场景的温暖生活化表达。

image.png

心意橙场景应用KV
 
同时手册完整定义主色渐变区间、四大辅助色（红 / 蓝 / 绿 / 橙）使用比例，明确视觉层级分配：心意橙作为主视觉占比 75%，辅助色彩合计占比 25%，黑白灰作为文本与背景基底。

image.png

主色渐变规范

image.png

色彩占比环形图

image.png

全色卡应用示例
 

四、AI 品牌资产库：标准化素材沉淀复用

本次品牌手册创新性搭建 AI + 传统双轨品牌资产库，整合历史项目素材，新增 AI 视频、AI 人物两大标准化素材体系，统一入库审核标准，实现素材跨业务线高效复用。

image.png

AI品牌资产库架构
 
资产库分为三大模块：人物库、视频库、案例库，所有素材入库前需通过多层级标准审核：

image.png

  1. AI 视频入库标准：从版权、画质、内容准确性、创意风格 7 个维度分级校验，明确禁用画面与违规素材判定标准；
  2. AI 职业人物入库标准：区分服务从业者、普通用户两大形象，统一情绪、质感、场景、构图多样性要求，规范双人同框出镜逻辑。
依托 AI 工具，团队批量生成平台核心职业标准化人像，覆盖全业务服务角色，统一服饰、光影、构图、场景，为广告物料、运营海报提供标准化视觉素材：
  • 保洁：40 岁左右女性，居家清洁场景形象

    image.png

    保洁AI人物素材
     
  • 司机：40 岁左右男性，商务正装出行形象

    image.png

    司机AI人物素材
     
  • 餐饮服务员：20-30 岁女性，门店服务场景

    image.png

    服务员AI人物素材
     
  • 物流配送员：30 岁左右男性，工装配送画面

    image.png

    物流AI人物素材
     
  • 房产经纪人：30 岁左右女性，带看、签约办公场景

    image.png

    房产经纪AI人物素材
     
  • 维修技工：40-50 岁男性，工具检修实景

    image.png

    维修工AI人物素材
     

五、品牌手册实体落地包装

为方便各业务线、外部供应商线下查阅落地规范，团队同步完成品牌手册精装礼盒实体包装，统一视觉质感，线下分发使用，线上配套电子版规范文档，线上线下同步对齐标准。

image.png

手册礼盒包装
 

结语：以标准化体系构建统一品牌认知

对于大规模投放、多渠道分发的生活服务品牌而言，品牌建设的核心不在于单次创意，而在于长期统一的视觉管理。
 
这套完整的品牌视觉规范系统，从 LOGO、色彩、字体、版式到 AI 素材资产建立全链路管控标准，统一所有投放渠道、合作供应商的品牌输出口径。长期落地执行后，能够持续强化大众对 58 同城的统一品牌认知，稳步提升品牌整体市场影响力。
未来 58UXD 也会持续迭代这套规范体系，适配业务发展与市场视觉趋势，欢迎关注「58UXD」公众号获取更多大厂品牌设计实战案例。
 

转载：站酷

 

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

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(73)

兰亭妙微ui设计公司：百人团队如何从0到1构建高复用的企业级设计系统？

清阳 设计资源

兰亭妙微ui设计公司分享：三五个人时设计系统就是个规范文档的事，但到了百人规模，核心已经变成了协作问题。关键看做完大家用不用得起来、愿不愿意跟，以及用着用着会不会又跑偏。
不少团队一开始就先整理UI规范、抽基础组件、写设计原则。
但业务线一多、人员一动、项目并行
，同一个按钮在不同产品里就又各长各的了。同样的交互在不同端，实现逻辑也完全对不上。
所以百人团队的问题不在于"有没有设计系统"，而在于
有没有统一的使用方式，并且能持续运转下去。
 
一、先定标准，再动手搭组件
很多设计系统翻车的起点其实很简单：顺序搞反了。一上来就开干组件，规范后面再补。百人团队这么做基本必返工，因为没有统一标准，组件库越做越多，反而成了新的混乱源头。
我们的经验是，起点的核心其实是
三个问题
：设计语言有没有对齐，边界有没有划清楚，资产结构管不管得住。
设计语言统一
，不等于所有产品长一模一样，而是要在“默认长什么样”上达成共识。比如颜色是不是只保留一套主色体系，字号有没有固定梯度而不是随手拉，间距按8还是10走，按钮层级有没有明确区分。这些基础问题没定死，后面组件一定稳不住。

image.png

 
 
再说边界
。设计系统没必要铺到所有页面，它的边界就是把高频、稳定的那部分标准定死。像按钮、表单、弹窗、列表这些基础控件是必须收住的。但强业务属性的页面，比如活动页、营销页，硬套规范反而会把系统拖垮。
最后是资产结构
。组件不能往一个库里随便一丢就完了，得在一开始就想好分层：基础层放颜色字体间距，组件层放Button、Input这类，模式层放Form、Table，模板层放页面级结构。这样后面才好检索、好维护。这个阶段可以借助设计协作工具来把标准落地，我们用的是Pixso，把颜色、字体、组件结构先搭成可用的资产。
标准定好之后，还有一个问题：
怎么把这些东西快速搭起来
，而不是让设计师从头一个一个建。我们试过纯手工搭，效率实在太低，后来直接用了Pixso的AI生成能力。输入主色和主题方向，AI就能把颜色、字体、组件、阴影这些全吐出来，虽然生成的细节需要人再调一遍，但最耗时的骨架搭建被压缩到了一两天。而且生成的东西可以直接转成全局样式，不用再手动同步到设计稿里，团队内部复用起来也方便。

image.png

 
二、组件不在于多，稳更重要
标准定完之后，才是组件体系的搭建。但这里很容易走偏：越做越全。按钮做一套，输入框做一套，弹窗做一套，然后开始搞复杂组件，最后系统越来越重，实际项目翻来覆去还是用那几个基础款。
到了百人这个规模，设计系统的核心指标不是覆盖率，是稳定性。
1. 基础组件这块
，有几个关键点必须定死。按钮不能只定样式，Default、Hover、Disabled、Loading这些状态必须统一，不能含糊。输入框也是，错误状态、提示信息、聚焦状态要有一套固定规则，否则开发自己补的规则各不一样。
2. 比基础组件更关键的一层是
模式组件
。很多团队一开始不会做这个，但做对了效率提升非常明显。比如标准表单页、列表页、筛选区、分页区，把这些结构固定下来，后台类系统基本就是拼积木。
3. 再往上就是
变量体系
。这个容易被低估，但在多产品线里极其重要。颜色、字号、间距不再是写死的固定值，而是一套变量。不同产品线换个主题就行，组件不用重做。很多系统做到后期崩掉，就是因为没做变量层，只能靠复制组件来解决，越走越重。
 
 
 
三、系统能不能活下来要看管理
设计系统搭起来只是第一步，能持续用下去才是真本事。
百人团队里设计系统最大的问题通常不是技术，而是失控
。最典型的情况就是这几个：
  •  
    组件改了，旧项目还在用旧的，新项目又用新的，最后一套系统里跑着好几套逻辑；
  •  
    产品线各自扩展，各产品线自己搞分支组件，都说我这个按钮特殊；
  •  
    还有就是压根没人维护，设计系统变成设计组的私活儿，不是团队资产。
解决起来不复杂，但得有人管、有规则。我们分了三层：设计系统负责人管标准，前端核心管实现，业务代表管需求反馈。任何新增组件必须经过评审才能进系统，不然很快就会被各业务线的需求冲散。
还有个容易被忽略的点是
反馈机制
。系统做完了得能接收使用反馈，定期优化。某个组件在多个项目里被反复魔改，说明它本身设计得不对，需要调整，而不是让业务去适应它。

image.png

 
总结
百人团队从0到1搞设计系统，是建立一套长期运转的协作方式。其实就是让设计、开发、产品能在同一个语言体系里对话，别再各说各话。
等这套机制跑顺了，团队的变化会很明显：新项目不用从零对齐视觉，设计稿不会被反复推翻，开发也不用再为几像素的间距反复确认。

 

转载：站酷

 

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

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png



评论(0) 浏览(61)

兰亭妙微ui设计公司：订车票流程交互优化复盘｜长短途拼车票务页面 UX 设计思考

清阳 交互设计及用户体验

一、项目背景

兰亭妙微ui设计公司分享：本次设计落地于综合出行服务平台，核心业务覆盖长短途拼车、线上订票。用户完整购票链路为：填写上下车地点→加载票务查询列表→选中班次→完成下单。

image.png

 
本次优化聚焦票务查询列表页，针对传统拼车票务卡片存在的信息缺失、规则晦涩、操作低效三大体验痛点，做可视化 + 交互逻辑双重升级，完整记录设计思路与落地解决方案。

二、传统票务页面三大核心痛点

市面上主流拼车产品的票务卡片受容器尺寸限制，信息展示极度精简，大量关键信息后置到下单页，拉高用户决策成本，核心问题分为三类：

痛点 1：座位售卖状态无直观可视化，仅模糊展示剩余座位

image.png

常规票务卡片仅标注「余 X 座」、车型、起步价、是否支持儿童座图标，无法直观区分已售 / 可购席位。
 
示例传统卡片信息：
 
05:45-06:00（05:00 开始接人）¥50 起｜环城南路地铁站 D 口集散点↔嵩明县集散点
 
五座轿车｜剩余 4 座
 
用户只能知道还有空位，无法判断剩余座位分布，多人同行、带娃出行无法快速判断能否连座。

痛点 2：儿童座规则仅靠图标暗示，新手理解门槛极高

image.png

平台儿童座固定规则：每台车仅配备 1 个儿童安全座椅，仅限车尾三排席位可选，儿童票享半价。
 
旧版仅用儿童图标标识班次是否可购儿童票，完整规则藏在下单页底部长文说明，首次使用用户极易踩坑：不知道一车限 1 个儿童座、不清楚半价规则、不了解座位限定区域。

痛点 3：多档位席位价格全隐藏，需跳转下单页才能查看

所有班次卡片只展示最低起步价，不同车型、不同位置席位的差价完全不外露。用户若想对比价格，必须逐个点击进入下单页来回切换，决策链路冗长，流失风险高。

三、针对性交互优化方案

image.png

针对以上三类痛点，我采用可视化座位示意图 + 卡片展开面板 + 互斥交互限制组合方案，一站式解决信息不透明、规则看不懂、操作步骤多的问题。

优化 1：席位俯视图示，实时区分可购 / 已售座位

image.png

在票务卡片内增加车型座位简笔画，覆盖平台主流 4 类车型：5 座轿车、7 座商务车、9 座小客车、大巴车（大巴席位过多不展示示意图）。
 
视觉区分逻辑：
  • 品牌亮色区块：当前可正常选购空位
  • 灰色置灰区块：已被售出、不可选座位
     
    用户无需点进详情，列表页一眼看清剩余席位分布，多人同行可快速判断能否凑齐连座。
     
    车型座位图示规范：
  1. 5 座轿车：1 主驾；2/3 前排乘客；4/5 后排双人座
  2. 7 座商务车：1 主驾；2/3 中排双人；4/5/6 后排三人座
  3. 9 座小客车：1 主驾；2/3 前排；4/5 中排；6/7/8 后排三人座

优化 2：卡片展开面板 + 互斥交互，显性传递儿童座全部规则

image.png

  1. 信息显性化：票务卡片支持上下展开，展开面板内完整标注儿童座三条核心规则，无需翻阅长篇说明；同步标注儿童半价金额，价格一目了然。
  2. 交互强约束，用操作传递规则：用户选中某一班次儿童座后，同页面内其余所有班次的儿童座选项自动置灰锁定；仅取消当前儿童座选择，其他班次儿童座才恢复可点击。
     
    通过交互行为直观告知用户：单订单仅能选购 1 个儿童座椅，同时搭配文字说明车尾限定席位、半价政策，消除全部理解歧义。

优化 3：卡片展开展示分层票价，缩短决策路径

image.png

旧方案：查看多档位价格→点击班次→跳转下单页选座看价→返回列表对比，多次跳转；
 
新方案：点击展开卡片即可查看全车不同席位对应售价，无需跳转页面。
 
用户选定心仪席位后，数据直接缓存带入下单流程，下单页跳过选座步骤，直接填写乘车人信息，大幅精简操作步骤，提升下单转化率。

四、设计总结

本次优化核心思路：把决策需要的信息前置到列表页，用可视化降低阅读成本，用交互代替文字解释规则。
  1. 席位图示解决座位状态不透明问题，减少用户脑补成本；
  2. 展开面板 + 互斥选择，将晦涩的儿童座规则转化为看得见、感受得到的交互行为，降低新手学习成本；
  3. 分层票价前置展示，省去多次页面跳转，缩短用户下单链路。
     
    整套方案在不大幅增加页面视觉负担的前提下，补齐传统票务卡片三大信息短板，兼顾信息完整度与页面简洁度，有效提升用户选班、购票效率。

 

 

转载：站酷

 

 

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

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

评论(0) 浏览(68)

兰亭妙微ui设计公司：B 端顶栏组件完整设计思路解析

清阳 交互设计及用户体验

前言

兰亭妙微ui设计公司分享过 B 端界面两大基础模块：全局整体框架搭建、侧边导航栏设计拆解。相比侧边导航，顶部栏常常容易被忽略 —— 它承载的信息偏少，存在感薄弱，留白过多时还会破坏页面整体视觉平衡。
 
本篇将聚焦顶部栏，系统拆解其设计逻辑与优化方案，帮大家打造协调好用的 B 端顶栏组件。

一、B 端顶栏承载内容拆解

image.png

顶栏核心两大职能：展示全局基础信息、承载全局高频操作，整体遵循左信息、右操作的经典排布逻辑。

image.png

1. 左侧：全局基础信息区

image.png

贴合用户从左至右的自然浏览习惯，主要放置系统核心标识与页面上下文信息：
  • 品牌 LOGO、系统名称；
  • 页面标题、面包屑导航；
  • 实时时间、系统版本、登录欢迎语等全局提示；
     
    特殊拓展场景：若系统导航层级复杂、一级导航条目较少，可将一级导航直接收纳至顶栏左侧。

2. 右侧：全局交互操作区

image.png

放置全页面通用、无需切换页面即可触发的高阶功能，契合用户右侧操作使用习惯：
 
全局搜索、消息通知、签到入口、客服咨询、个人中心、账号设置、主题切换等功能图标与按钮。

3. 多元素承载方案：多行顶栏布局

image.png

当全局信息、操作入口数量过多，单行排布拥挤失衡时，可采用双层 / 多行顶栏：
 
最典型用法是新增页面标签栏；也可拆分模块，将导航、面包屑、页面标题单独划分一行，分层梳理信息，避免视觉拥挤。

设计取舍要点

顶栏内容不可盲目堆砌，设计前需结合侧边导航统一把控信息密度，做到左右视觉体量均衡，切忌为了丰富而复杂化，造成头重脚轻、左右失衡。

二、结合全局框架的顶栏落地设计方法

顶栏属于页面全局框架的组成部分，无法独立设计，必须联动侧边导航、内容主区域统筹规划，分四步落地：

1. 界定 LOGO 区域归属，区分组件视觉权重

image.png

页面左上角 LOGO 是侧边栏与顶栏的交叉核心，归属划分直接决定两大组件层级：
  • 若 LOGO 归顶栏：可给顶栏搭配深色背景，强化顶栏层级感，视觉和谐统一；
  • 若 LOGO 归侧边栏：则深色主题仅适配侧边导航，顶栏不宜再使用深色，否则两套深色模块并列会割裂界面、观感突兀；
  • 极简一体化方案：弱化侧边栏与顶栏边界，两者底色连通，把视觉重心完全留给下方业务内容区。

2. 统一对齐基准，规范内部排版逻辑

image.png

顶栏左右分区的对齐参考线，必须与下方主体内容区域左右边距保持一致，保证全页面视觉规整。
 
沿统一对齐线排布所有元素，统一设置元素间距；功能模块较多时，可用细分割线区分分组，平衡左右区块的视觉重量。

避坑要点：禁止在顶栏居中放置核心元素

image.png

尤其不建议将搜索框置于顶栏居中位置。居中元素会过度抢夺视觉焦点，割裂左右分区结构，让整个顶栏布局松散杂乱。

3. 视觉细节差异化设计：重点美化右侧区块

页面左上角被 LOGO 固定占据，左侧无多余视觉发挥空间，所有特色视觉、差异化样式统一放在顶栏右侧：
  1. 图标差异化：普通消息、设置图标保持基础简约样式；会员标识、AI 智能入口、签到等特色功能图标，可增加渐变、徽章、高亮等视觉强化；
  2. 按钮差异化：普通操作按钮使用基础样式，重要活动、付费、特色功能按钮可增加圆角、渐变、描边等特殊样式，突出优先级。

三、核心设计总结

顶栏设计不能孤立看待，需联动侧边导航、内容区同步调整：
  1. 把控信息密度，既不能留白过多显得空洞，也不能功能堆砌造成拥挤杂乱；
  2. 统一页面对齐规范，保持整体版式规整；
  3. 合理划分 LOGO 归属，协调顶栏与侧边栏色彩层级；
  4. 遵循左信息、右操作的排布，特色视觉统一放在右侧，不破坏基础阅读动线。

 

转载：站酷

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

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发.

我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

 

image.png

 

评论(0) 浏览(75)

兰亭妙微ui设计公司：一个资产中心界面藏着这么多设计细节，看懂大厂 UI 优化逻辑

清阳 移动端UI设计文章及欣赏

兰亭妙微ui设计公司：本次设计优化对象为平台资产中心页面，页面承载总收益、今日收益、算力余额、资产流水等大量分类数据。
 
最大痛点：数据维度多、信息排布零散，视觉层级混乱，用户无法快速抓取核心资产数据。本次改版核心目标：梳理清晰信息层级，兼顾数据可读性与高级视觉质感。
先看改版前原始页面：整体布局松散，数据模块无统一收纳容器，标题平淡无区分度，按钮样式呆板，正负收益数据无视觉区分，整体信息杂乱，重点数据被淹没。
优化后页面分为两大核心模块：顶部核心数据头部卡片 + 下方资产流水 Feed 信息流，下面分两大模块拆解完整优化步骤。

一、项目背景：本次优化核心难点

本次设计优化对象为平台资产中心页面，页面承载总收益、今日收益、算力余额、资产流水等大量分类数据。

image.png

image.png最大痛点：数据维度多、信息排布零散，视觉层级混乱，用户无法快速抓取核心资产数据。本次改版核心目标：梳理清晰信息层级，兼顾数据可读性与高级视觉质感。
先看改版前原始页面：整体布局松散，数据模块无统一收纳容器，标题平淡无区分度，按钮样式呆板，正负收益数据无视觉区分，整体信息杂乱，重点数据被淹没。
优化后页面分为两大核心模块：顶部核心数据头部卡片 + 下方资产流水 Feed 信息流，下面分两大模块拆解完整优化步骤。

二、第一大优化方向：顶部核心数据头部卡片精细化改造

页面头部承载用户最关心的资产核心数据，是视觉重心，分 6 步逐层升级质感与信息秩序：

步骤 1：重塑标题视觉样式

image.png

原版页面标题基础样式单调，无辨识度。优化时增加专属字体层级、字重区分与轻微装饰元素，强化板块头部识别感，快速划分页面区域。

步骤 2：容器整合，收拢零散数据

image.png

原版总收益、今日收益、算力余额三组关键数据分散排布，割裂感强。运用统一容器思维，将三组数据全部收纳进同一张头部卡片内，从布局根源解决页面散乱问题。

步骤 3：信息降噪，统一数据排版规范

image.png

收纳完成后做信息层级降噪处理，统一「今日收益」「算力余额」两类辅助数据的排版格式，采用左右对称并排布局，规整数据展示逻辑，降低用户阅读成本，主次关系一目了然。

步骤 4：异形卡片打破呆板矩形

image.png

常规矩形卡片过于单调，对数据卡片做异形裁切处理，打破规整布局的沉闷感，小幅提升页面独特设计感，同时预留视觉留白区域用于装饰。

步骤 5：毛玻璃底 + AI 装饰图标填充留白

image.png

利用异形卡片产生的空白区域，搭配 AI 生成轻量化金融类装饰图标；卡片底层叠加毛玻璃磨砂质感，弱化厚重感，提升现代轻量化 UI 氛围。

步骤 6：全局光效渐变烘托页面氛围

image.png

页面顶部底板增加柔和渐变光效，头部数据卡片同步搭配同色系渐变底色，上下视觉元素相互呼应，整体氛围感统一，弱化页面单调白底的廉价感。

三、第二大优化方向：内容区通用卡片细节升级

 

Feed 流内的功能卡片、数据明细卡片统一优化，解决原版交互弱、层级模糊问题：

步骤 1：重构按钮视觉，强化交互识别image.png

原版操作按钮样式单一、辨识度低，视觉存在感薄弱。重新调整按钮圆角、渐变底色、描边与 hover 状态，区分主 / 次操作按钮，让用户一眼识别可点击交互区域。

步骤 2：分层排版，色彩区分正负数据

image.png

  1. 文字层级拆分：弱化数据标签文字字重与明度，加粗放大数值，突出核心数字；
  2. 数据色彩规范：针对收益涨跌数据建立色彩体系，正数盈利使用正向绿色，负数亏损使用警示红色，仅靠色彩就能快速传递盈亏信息，降低阅读负担。

四、优化前后整体效果总结

image.png

整套优化没有大刀阔斧改动页面结构，而是从容器收纳、层级降噪、视觉质感、交互识别四个维度精细化调整。在原有业务框架不变的前提下，解决了多数据页面信息过载、视觉杂乱的通病，同时通过异形、毛玻璃、光效渐变等轻量设计手法提升页面精致度。

文末总结思考

当页面承载大量多维度数据时，不用急于增加复杂图表，优先做好三件事：
  1. 用容器收拢分散信息，建立统一收纳体系；
  2. 分层弱化辅助文字，强化核心数值；
  3. 统一视觉规范，用色彩、形状区分数据状态。
     
    这套轻量化优化思路，适用于资金、算力、积分、会员资产等所有多数据后台 / 个人中心页面。
评论(0) 浏览(63)

分类

日历

链接

个人资料

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

存档