首页

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

 

image.png

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

 

image.png



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

 

image.png

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

 

image.png

 

兰亭妙微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. 统一视觉规范,用色彩、形状区分数据状态。
     
    这套轻量化优化思路,适用于资金、算力、积分、会员资产等所有多数据后台 / 个人中心页面。

兰亭妙微UI设计公司分享:5 组产品设计高频易混术语辨析,90% 设计师都在用错

清阳

前言

日常做界面、写功能文案时,不少产品、UI 设计师常会混用形近义异词汇:登录 / 登陆、稍后 / 稍候、预订 / 预定…… 仅一字之差,语义边界却完全不同。用词失准不仅拉低界面专业度,还会误导用户、割裂操作认知。兰亭妙微UI设计公司整理 5 组互联网产品高频混淆术语,结合真实业务场景拆解区分标准,给大家一套可直接落地的界面用词规范。

一、登录 vs 登陆

核心定义区分

  1. 登录(login)—— 互联网专属术语
     
    指用户进入系统、App、网页的身份核验流程,核心目的是完成身份校验,授予用户数据读写权限:
  • 读权限:查看个人专属信息;
  • 写权限:留存用户操作、交互数据至后台。
     
    适用场景:账号密码登录、短信验证码登录、扫码登录、「当前未登录,登录后解锁完整功能」。
  1. 登陆(land)—— 通用实景 / 营销词汇
     
    本义指船只、台风抵达陆地,军事领域指渡水上岸;引申为新品、新功能正式上线、切入市场。
     
    适用场景:诺曼底登陆、台风登陆、「全新 CRM 产品即将登陆,敬请期待」。

    image.png

总结判断标准

  • 进入账号系统、核验身份 → 登录
  • 产品上新、实体抵达陆地 → 登陆

二、删除 vs 移除

二者核心差异:操作对象是否永久留存于系统数据库。
  1. 删除:不可逆永久清除,数据从底层彻底销毁,系统无留存记录。
     
    场景示例:商家后台废弃整场无效大促活动、通讯录永久删除客户。
  2. 移除:仅从当前视图 / 分组中隐藏,原始数据完整保存在系统,可恢复。
     
    场景示例:活动列表移除多余商品、企业微信「移出群聊」(成员账号不会被删除,仅脱离当前群组)。

    image.png

落地设计思路

不必机械二选一,用词贴合用户直观认知优先。以企业微信为例:
  • 移出群聊:弱化永久删除感,用户清晰知晓对方账号仍存在;
  • 删除客户:明确告知操作不可逆,永久清除联系人数据。

三、新建 vs 添加

image.png

区分逻辑:对象是「从零创造」还是「调取已有对象」。
  1. 新建:从 0 到 1 生成全新对象,需手动配置参数、属性,无前置存量数据。
     
    行业案例:Mac 系统「新建文件夹」、Sketch「新建图层 / 画板」、后台「新建商品」。
  2. 添加:调取系统内已存在的对象,归入当前集合,无需重新创建主体。
     
    行业案例:添加本地组件库、添加银行卡、添加已有联系人、照片库添加本地图片。

image.png

判断口诀

从零搭建、全新创建 → 新建;
 
调取存量、归入集合 → 添加。

四、稍后 vs 稍候

image.png

二者均表等待,但语法结构、使用句式严格区分。
  1. 稍候:独立完整祈使短句,可单独收尾,侧重「当前正在处理,请等待片刻」,对应英文 wait a moment。
     
    界面示例:加载弹窗文案「数据加载中,请稍候…」。
  2. 稍后:副词,不能单独成句,后必须搭配动词,指代「延后一段时间再执行操作」。
     
    界面示例:加载失败提示「系统加载异常,请稍后重试」。

快速区分

句末单独使用、无需追加动作 → 稍候;
 
后面紧跟操作动词(重试、提交、刷新) → 稍后。

五、预订 vs 预定

image.png

差异核心:是否涉及资金交易。
  1. 预订(订):关联钱款、交易行为,提前支付定金锁定商品 / 服务。
     
    适用:预订酒店、预订机票、预订线下课程。
  2. 预定(定):仅规划、敲定时间、计划、节点,无资金往来。
     
    适用:预定会议时间、预定婚期、项目预定上线节点。

极简区分

涉及付费、交易 → 预订;
 
规划时间、方案、目标 → 预定。

写在最后

不少从业者会觉得:只是用词差异,用户看得懂就行,没必要抠细节。但乔布斯曾提出:精准表达是产品设计的底层内核。
 
界面文字是产品和用户沟通的唯一文字载体,术语混用、用字错误,本质是设计细节把控不到位,直接损耗用户专业感知。作为产品、体验设计师,规范基础用字是做好用户体验的第一道门槛。
如果你在工作中遇到其他易混淆的界面术语,欢迎留言交流补充。
 

转载:优设

 

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

 

image.png

兰亭妙微UI设计公司:在大厂做 B 端定制化设计是什么体验?

清阳

 
兰亭妙微UI设计公司分享:钉钉从诞生之初便依托客户共创落地产品,多年来始终坚持「产品功能源于真实客户需求」的设计核心思路。
 
不少免费客户升级付费专属版后,受制于自身设计、研发能力短板,即便平台开放全套定制工具与能力,也很难打造出贴合自身企业调性、满足业务预期的钉钉应用。
基于此,我们推出大客户超级服务体系,以此破解企业定制落地难题。下文将以钉钉专属版大客户超级服务为例,拆解 ToB 定制服务完整链路,分享 B 端设计服务的落地方法论。

一、穿透表层问题,深挖客户底层真实诉求

image.png

客户提出的需求往往直白、片面,大多停留在表面观感与功能取舍:比如 “工作台界面观感简陋、不够大气”“页面模块冗余,希望直接删减”。
 
如果仅针对这类表层诉求做修改,只能治标不治本,很难建立长期稳定的客户信任。想要交付匹配企业业务的定制方案,必须跳出问题本身,从三大维度完整拆解客户真实需求:
  1. 厘清行业专属特征
     
    不同行业对视觉风格、交互逻辑的需求差异巨大。以传统媒体行业为例,产品页面需适配纸媒阅读习惯,侧重文字可读性、规整排版,整体视觉严谨克制;若设计风格与行业属性脱节,作为企业门户核心的工作台,很难获得客户认可。
  2. 区分客户生命周期阶段
     
    客户可按使用阶段划分为免费版、付费专属版两类。当企业完成付费升级后,若界面、功能无明显差异化感知,极易产生负面认知:“付费后没有任何升级体验,投入没有价值”,界面视觉作为用户第一感知触点,是化解该痛点的关键。
  3. 兼顾多方角色差异化诉求
    image.png
    B 端产品链路涉及多层人群,需求立场各不相同:决策者是付费买单方,项目执行者负责落地对接,企业管理者、普通员工是日常使用者。
     
    设计过程中,既要拆解各岗位员工的使用痛点,也要精准抓住决策者的核心关注点,同时输出完整落地素材,方便对接执行者向内部管理层汇报方案价值。

二、不止解决显性问题,交付超出预期的定制方案

客户带着负面评价提出修改诉求时,单纯整改问题只能平息不满;而设计师依托可视化设计产出,能够直观传递专业度、建立客户信任感。整套方案遵循「先解决刚需,再延伸增值体验」的思路落地:

1. 优先落地客户明确提出的核心优化项

image.png

围绕客户反馈的操作效率、业务适配、行业视觉三大核心痛点,结合前期实地走访、多角色需求调研完成迭代。
 
以传统媒体工作台优化案例为例:针对采编、审核、行政等岗位高频操作路径精简页面布局,调整版式字体适配内容阅读需求,剔除企业无用模块,直接解决客户直观不满。

2. 基于深度洞察延伸增值品牌方案

image.png

image.png

付费客户的核心隐性诉求,是拥有专属企业数字化门户,弱化 “通用钉钉” 感知,强化自有品牌归属感。
 
我们覆盖登录注册、办公应用、即时沟通全流程页面,植入企业品牌视觉与企业文化元素,打造专属化使用体验。
 
一方面让决策者直观感受到付费升级的差异化价值,认可方案贴合企业定位;另一方面为项目执行者提供完整、可视化的汇报素材,便于对内展示数字化建设成果。

三、用客户故事赋能方案汇报,建立长效持续服务

 

对内汇报时,我们能精准匹配汇报对象关注点调整表达逻辑;但对接外部客户时,常因不熟悉企业组织架构、业务场景,导致方案讲解难以引发共鸣。对此,我们将前期实地调研、一线采风素材转化为「客户真实故事」,融入方案汇报,让客户沉浸式感知设计价值。

1. 交互层:以「角色 - 行为 - 价值」讲清业务逻辑

遵循 Who(使用角色)-What(操作行为)-Value(落地价值)三要素,还原员工完整工作链路。
 

image.png

例如传统媒体编辑,日常需跨多套系统完成选稿、采编、校版,同时还要处理园区打卡、饭卡充值等行政事务。我们完整还原全流程工作场景,展示定制化设计如何打通业务断点、简化操作流程,让客户感知方案完全贴合自身业务。

2. 视觉层:实景采风传递企业文化共鸣

image.png

实地记录企业园区环境、员工真实工作场景、品牌视觉标识,将线下企业气质转化为线上界面设计语言。
 
设计方案不再是冰冷的界面改版,而是企业线下文化、办公氛围的线上延伸,更容易打动客户,契合企业对内传递文化形象的需求。

3. 倾听客户反馈,沉淀产品迭代机会,长效服务

每一次大客户走访,既能解决企业个性化定制难题,也能收集大量具备普适性的产品优化建议。
 
举例:不少企业管理者提出需要一键清除消息小红点功能,钉钉现有功能虽支持该操作,但入口隐藏较深。办公场景下,普通员工需要消息提醒避免遗漏工作,而管理者常被无关消息干扰,现有产品未针对不同角色做差异化适配。
 
这类来自一线客户的真实反馈,会同步沉淀为产品迭代思路,持续优化产品与配套服务。

写在最后

一套高质量 B 端定制服务,核心根基是深度洞察客户底层诉求,而非被动整改表层问题。
 
汇报环节依托真实业务场景故事传递设计内核,同时持续收集决策者、一线员工的使用反馈,反向推动产品迭代。只有精细化打磨适配企业全角色的每一处产品细节,才能让大客户超级服务真正落地到数字化服务的全流程中。
 

转载:钉钉用户体验官方账号

 

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

 

image.png

AI 驱动:如何重构IP全流程设计?

清阳

兰亭妙微UI设计公司分享:聚焦搜索团队“一定橙”IP设计案例,深入剖析其从传统IP制作流程向AI驱动制作流程转型的核心动因与实践路径,结合真实案例拆解AI赋能IP设计的核心价值。

同时,立足AI技术深度渗透的行业发展趋势,抛出设计师如何维系自身不可替代性的深层思考,为行业同类IP转型及设计师职业发展提供参考。

一、转型AI生产流程核心动因

1. 业务层面

大事件运营与长线激励活动是撬动业务指标增长的关键。

IP 作为视觉符号,不仅是活动强化产品辨识度、打造专属的记忆点,更是沉淀资产、降本增效的核心利器,能为长线运营持续赋能。

2. 团队层面

传统 IP 生产工序多、高度依赖 3D 人员、长周期等痛点,已难以匹配业务的快速迭代需求。

从2025高考项目出发,搜索设计团队借助AI工具在25年以全年为目标重构 IP 生产,既是为了满足运营物料的质与量,更是为了突破场景限制、降低资源依赖,实现团队产能的跃迁。

3. 技术层面

AI 工具的普及不是设计行业的 “终局”,而是认知重构的 “开端”。

当 AI 成为设计流程的标配,如何让技术服务于核心需求而非束缚创意,如何在效率提升的同时,守护 IP 设计的原创性与情感温度,这不仅是设计师的个人命题,更是整个行业在 AI 时代的生存之道。

那么,以2025年高考的IP“一定橙”案例分析,看看我们在2025年全年做了什么?

二、AI赋能实现创新与效能的双向突破

1. 创新突破

流程创新: “多工种线性生产” 到 “任务模块化协同”

过去,IP 设计是一条 “2D 立绘→三视图→2D 转 3D→静态转动态→多端适配” 的线性流水线,每个环节都靠单一设计师扛,跨团队协作难、效率低,还容易出现风格 “断层”。

我们的流程创新主要走了两条路:

一是把设计任务模块化拆解,用 AI 实现多环节并行生产,打破时序限制的同时,保证风格全程统一;

二是靠 AI 一键转换 + 批量生成的能力,实现 “一次设计,全域适配”,不仅优化了团队的技能配置、降低了人力成本,更把跨场景适配的时间和成本压到了最低。

技术创新:“手工绘制” 到 “多模态 AI 生成”

传统 IP 创作的核心是 “手绘 + 基础软件”,设计师的手绘能力和软件水平直接决定了作品的上限,不仅效率低、创意容易被个人能力束缚,还很难批量产出。

而 AI 赋能下的技术创新,核心是用多模态生成技术替代手工创作,打造一条从 “文本描述” 到 “视觉呈现”,再到 “3D 建模、动态效果、衍生物料” 的全链路自动化生成通道。

2. 效能突破

从 “有限试错” 到 “无限可能性”

运用AI在前期创意探索周期可压缩 90% 以上,可通过文生图、风格迁移、元素融合等能力,在分钟级生成数千张不同风格、形态概念图和动画Demo,快速筛选出高潜力方案,验证创意可行性。

从 “重复劳动” 到 “精准高效”

传统 IP 制作里,2D 转 3D 是个大工程,又费时间又费人;而 AI 能一键实现 2D 转 3D、静态转动态、图文转视频,直接省掉大量成本。

到了后期做衍生内容,三视图、表情包、海报这些标准化物料,传统模式下又累又容易走形。

但只要用 LoRA 训练专属模型,再用 ControlNet 锁定 IP 的核心比例、色彩和质感,AI 就能批量生成完全符合规范的内容,效率直接提升 10 倍以上。

三、一定橙IP设计:全流程AI化工作流亮点拆解

亮点1:LoRA模型AI化生成

通过AI生成-抽帧-后期流程形成优质 IP 样本(如 30 张核心形象图)训练专属 LoRA 模型,锁定 IP 的核心比例、五官、色彩、质感。在后续的概念生成、多媒介适配、系列化创作中,调用 LoRA 模型即可快速生成符合特征的 IP 内容,确保一致性。

亮点2:基于LoRA+ControlNet 精准控制IP多维度形象

通过 LoRA+ControlNet 控制技术,误差≤2%,导入 IP 核心形象图,选择控制类型(如骨骼、深度、姿态、表情),即可精准控制 IP 的比例、姿态、角度。

首帧+标准化提示词可以稳定控制IP形象输出灵动细腻的动画。

亮点3:AI高效迁移多种风格

通过 AI 风格迁移模型,输入 IP 核心形象图与目标风格参考图,即可一键将 IP 形象迁移至多种风格(如 3D 转简笔插画)。

在转换过程中严格保留 IP 核心特征,确保风格统一、输出稳定,满足业务素材与物料的快速迭代需求。

四、IP应用场景

一定橙 IP 形象贯穿 2025 年多项核心活动,包括高考及渠道推广物料、暑期走路赚钱、组队赚钱、开学季等场景。

通过 AI 实现全链路 IP 渗透,在保障视觉质量的前提下,整体效率提升 50% 以上。

五、设计思考:AI技术与设计共创,实现本我价值最大化

AI 技术与设计创意的深度共融,本质是技术为创意赋力、人文为技术锚向的双向奔赴,而非单向度的工具替代。

它正在重构设计产业的全链路流程:既彻底解放了设计师的基础生产力,更打破了创意表达的固有边界,最终让设计真正回归 “以人为本” 的核心本质。

长期以来,设计师近 80% 的精力,都被消耗在机械重复的执行落地、素材拼接、参数调整等低价值事务中,创意的火花往往被繁琐的执行磨平。而 AI 的规模化介入,彻底消解了这一行业痛点,让设计师的核心精力得以真正回归到用户洞察、创意构思与价值创造本身。

随着 AI 在设计领域的深度渗透,行业内也涌现出诸多悲观论调:

有人说 AI 终将彻底取代设计师,商业设计的全流程都可由 AI 独立完成;

有人担忧设计行业将迎来大规模裁员,普通设计师会彻底失去市场立足之地;

更有人断言,AI 的零门槛创作会抹平专业设计的壁垒,设计师的个人创意与审美表达将不再具备商业价值。

但在我看来,AI 能替代的,永远只是「术」层面的标准化执行与重复性劳作,永远替代不了「道」层面的用户洞察、创意思考、审美决策与人文价值创造。

对设计师而言,真正的核心命题从来不是对抗技术浪潮,而是在 AI 时代锚定自身的不可替代性 —— 以人文为内核,以创意为核心,以技术为工具,在时代的洪流中始终保有前行的底气与主动权。

转载:人人都是产品经理

 

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

 

image.png

对话框不是万能的,AI产品的交互尽头在哪里?

清阳

兰亭妙微UI设计公司分享:很多产品经理认为,给产品塞进一个对话框就是“AI 化”了。但在 AI Center 的实践中,我们发现 LUI(对话交互)往往是产品设计的“懒惰表现”。

真正的 AI 原生交互,应该是让界面消失,让用户意图透明。

本人经过多年研究 AI 产品的交互,结合近期看到一篇 CHI 2026 最佳论文提名,推荐给做 AI 产品的小伙伴。

微软亚洲研究院 + 港科大提了个 IAI(Interaction-Augmented Instruction)模型。

核心一句话:AI 时代的交互不该只有“写 prompt”,而是“prompt + 各种交互形态”的混合体。

其实他们就做了三件事:

1、把 AI 时代的人机对话方式拆成了 6 个实体:人、文字、交互、增强指令(Aug)、AI、产物。

他们最关键的创新是把“增强指令 Aug”独立出来,作为 AI 真正消费的东西。

2、分析了 66 个 AI 工具,归纳出 12 种原子交互范式:点击改 prompt、画草图作指令、AI 给你做滑块挂在结果上随便调……每种都有对应的信息流图。

3、用模型推导出全新范式:比如“AI 主动发起 + 情境感知”(走进食堂,AR 眼镜直接问你吃肉还是菜并给个滑块)。

简单总结就是:专家技能正在从“Prompt Engineering”转向“Instruction Design”。前者是教用户写作文,后者是设计“工具+情境+控件”,让用户哪怕只点几下,也能合成出比 prompt 更精准的指令。

链接:https://www.microsoft.com/en-us/research/publication/interaction-augmented-instruction-modeling-the-synergy-of-prompts-and-interactions-in-human-genai-collaboration/

一、困局:被“对话框”绑架的 AI 产品

打开现在的 AI 应用,映入眼帘的几乎全是类似微信的聊天界面。

这种 LUI(Language User Interface)确实降低了开发门槛,但对用户来说,它存在两个致命的痛点:

1、“空白页恐惧症”:用户面对闪烁的光标,往往不知道该问什么。

2、高认知负荷:输入文字(或组织语言)本身就是一种高成本的体力与脑力活。

对话框只是 AI 交互的婴儿期。如果一个操作点击两次就能完成,强迫用户输入一句话就是设计的倒退。

二、 逻辑重构:从“功能搜索”到“意图识别”

传统 GUI(图形界面)的逻辑是:用户寻找功能。你想听歌,要先找音乐 App,再找搜索框,再打字。

AI 时代 UX 的底层逻辑是:系统识别意图

1. 意图识别(Intent Recognition)

未来的交互不再是等用户下指令,而是通过环境上下文(Context)捕捉意图。

案例:在智能座舱中,你视线看向窗外某个地标并问“那是什么?”,系统结合视线追踪(眼动)和高精地图,直接给出答案。这里没有复杂的菜单,只有自然发生的意图捕捉。

2. 生成式 UI(Generative UI)

这是目前最前沿的方向。界面不再是预设好的死板组件,而是根据 AI 预测的意图实时生成的。

如果你在聊出差行程,界面自动弹出的不是聊天文字,而是一个包含航班、酒店和天气对比的定制化表格。

三、进阶设计:主动交付(Anticipatory UX)

最好的交互是“不交互”。这就是我们正在卷的 “主动交付” 逻辑。

  • 从“拉”到“推”:传统交互是用户“拉取”信息(Pull);下一代交互是 AI “推送”结果(Push)。
  • 场景编排:AI 应该预判你的下一步。例如,当你设定了一个 8 点的会议,AI 发现路况拥堵,它不应只在 8 点提醒你开会,而应在 7 点提示你提前出门,并自动帮你启动车辆预热。

PM 的实战准则:判断一个 AI UX 好不好的标准,是看它减少了用户多少次不必要的决策。

四、给 AI 产品经理的 3 条交互避坑指南

1. 保留“逃生舱”:无论 AI 多么智能,其意图识别永远存在概率性的错误。界面上必须永远有一个显眼的、确定性的“手动干预”按钮,防止 AI 陷入逻辑闭环。

2. 拒绝“黑盒式”等待:AI 处理复杂任务需要时间。不要只给一个 Loading 转圈,要通过交互展现 AI 的“思考过程”(如逐步显示推理步骤),这能极大地缓解用户的焦虑感。

3. 不要为了 AI 而 AI:传统的进度条、开关掣、单选框,在特定场景下依然比对话更高效。顶级 PM 的功力,在于知道何时该给用户一个对话框,何时该给用户一个简单的物理按钮。

总结:交互的终局是“透明”

在大模型时代,我们对 UI 的理解正在经历一场从“人适应机器”“机器适应人”的革命。

下一代 AI 产品的竞争,不在于谁的对话框更好看,而在于谁能让用户感知不到界面的存在,却能精准地交付结果。

从 LUI 走向 Intent-Centric(以意图为中心),这才是产品经理和研发人员真正该卷的战场。

 

 

 

转载:人人都是产品经理

 

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

 

image.png

日历

链接

个人资料

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

存档