一区二区三区四区国产综合,国产真人无码作爱免费视频app,家庭乱码伦区中文字幕在线 http://m.payeee.cn/blog/ zh-cn www.emlog.net C妙微UI设计公司分nQ生态型工具品牌与体验升U指南——体验升U篇 http://m.payeee.cn/blog/post-14613.html 背景介绍

腾讯 CoDesign 诞生?019q_最早以「设计云-工作台」的定位开始服务腾讯内部。在2020q从设计门户拆分为独立品与品牌 CoDesignQƈ于同q开始对外服务?/p>

在品对外服务的q程中,产品一直在q行高速的产品能力与体验优化P代,产品所服务的用L型也在不断丰富?/p>

今年QCoDesign 为满x多类型用L协作与体验诉求,在品资产管理结构与权限、数字资产管理能力上q行了大q度的升U;以及设计云品生态的逐渐成熟与对生态品牌运营的规划Q都?CoDesign 的品牌与体验有着q切的升U诉求?/p>

一、阐明策?/h2>

今年上半q_CoDesign 的品牌与体验升的设计工作几乎在同一旉启动Q品体验升U工作也面着多个挑战?/p>

  • 产品体验升具体需要做什么?
  • 如何兼容产品未来能力Q?/li>
  • 怎么在品牌不定的前提下Q确保后l视觉的一致性及与竞品的差异性?

在与目l、品牌团队多ơ沟通后Q我们决定通过以下{略解决产品体验升所面的挑战:

一、品体验升U工作构成涉及到产品、交互、视觉、研发各个层面。首先,我们需要明具体的体验优化,q将其定位到具体层面Q制定出体验优化的前|工作与规划?/p>

二、结合新的品升U方案,梳理l典面l构。结合竞品分析,构徏出具有差异化的体验基调?/p>

三、最后,Zq一步加Z品体验与竞品的差异性,完善「推q视觉」到「品视觉」的品牌体验闭环。我们将产品内触点进行进一步拆解,q在品牌声量象限中定位,l合设计核心QDesign DNAQ进行g展应用?/p>

二、设计实?/h2>

1. 从定位问题,制定规划开?/h3>

我们对当前版本进行全方位视觉及体验走查,q且整理用户反馈的缺陷问题,发现?70 多个交互、视觉以及开发还原上的问题。ȝ归纳为框架扩展性不I体验不统一Q效率低Q品牌感知弱?/p>

首先在交互上Q我们的交互同学对品原则,全局定义Q通用程Q页面框Ӟ标准lgQ文案规范进行进一步的定义和梳理,保证交互的规范性和一致性?/p>

其次在视觉上Q我们基?1.0 的问题,?2.0 上明了形,Ԍ构,质,大小Q间距,lg{规范用法,q对其进行文档化。以便在后箋工作中Ş成更加严谨的设计规范Q来保证多h合作中大家从开始的思维一致到最后出的一致?/p>

再次在研发上Q我们将基础lg和业务组件分开l护Q基lg代码我们?Ten 切回 TDesignQ极大地提升了组件的通用性和定制化,q参?TDesign ?Token 规则Q定?CoDesign 的基lg样式。同时在业务lg上,我们具有通用性组件进行抽,Q例如卡片组Ӟ单独构徏成ؓ标准lg。保证研发异地合作组件样式的l一性,提高效率?/p>

?目开始之初,不用急于陷入Ҏl节设计中,可以针对已知问题Q拉通团队其他成员,Ҏ体方案中各职能团队的前置工作q行初步规划Q有助于后箋工作中团队成员工作流的无~衔接。?/p>

2. 从页面结构上切入

2.1 l合产品ҎQ定义经兔R面结?/strong>

梳理整站l典面cdQ结合品新的界面框架方案,以一U功能模块D例:

定义一U功能模块,二功能模块Q各功能详情,子模块表单页的页面结构?/p>

2.2 国内外竞品分析,构徏差异化页面结?/strong>

我们针对国内外优U竞品q行研究分析Q提取其中的共性特征,发现竞品常用的页面结构分别ؓQ?/p>

  • q面l构用线分割功能区和内容?/li>
  • 左右l构用线面组合的形式分割功能区和内容?/li>
  • 上下l构用线面组合的形式分割功能区和内容?/li>

从以上页面结构分析上Q大致ȝ下构建差异化面l构需要考虑的方向是Q功能和内容的分割方式,内容区的展示方式?/p>

那在整个体验升QCoDesign 的所有工作都围绕着一个核心理?mdash;—「内容设计」。所谓内容设计,是我们希望用户在使用工作台时Q不受其他因素的q扰Q专注于内容本n?/p>

所以在 CoDeisgn 的页面结构上Q我们和市面上主竞品做了差异化处理Q新版本我们打破了传l内容分割的方式Q在 Z 轴的I间上分出功能区域和内容区域Q打通左侧导航和剙操作栏的功能区域Q将内容聚拢重点H出。去掉大量界面中的线与框Q减页面非必要元素露出Q其目光可以聚焦在内容本nQ让整个面层清晰的同时带来简U的视觉感受?/p>

?不管是^面,左右q是上下l构Q都没有l对的好与坏Q取决于我们希望用户的视觉落点和视觉动线在哪Q例如在一个^面结构中Qh们的视觉落点往往是最重的颜色或者最大的文字{,相对应你的视觉动U就在依ơ去扄二,W三「重」的内容Q那当这个^面中增加了空间维度,依然是先看到最「重」的内容Q只不过因ؓ有了前后的关p,在视觉感官上你会区分前后内容的重量对比?/p>

l合 CoDesign 首页面l构设计最l效果图Q你会发现首先视觉落点在前景白色内容区的内容卡片上,紧接着视觉动线来到后景用户高频操作的新建操作,最后是左侧D栏的区域。?/p>

3. 在品牌上延

我们品内触点q行q一步拆解,q在品牌声量象限中定位,l合品牌声量象限的设计要求以及设计核心(Design DNAQ进行g展应用?/p>

3.1 品牌?/strong>

Z品牌标志延展出基的品牌色规则Qƈ且ؓ了兼֤触点的应用,我们在品牌主色基上降低了色彩的饱和度Qg展出一pd辅助Ԍ提供了较Z富的色彩q用Q同时ؓ面带来了更盈,灵动的视觉感受。最后再Ҏ品牌声量象限Q指g同品牌出点的颜色使用?/p>

3.2 辅助囑Ş

Z塑造统一的品牌语aQ我们从品牌标志中提取基辅助形,设计了一pd延展囑ŞQ打造多样化极具品牌调性和视觉表达?/p>

3.3 品牌特征延展

通过品牌特征的运用,赋予图标、登录页、演C文件、空面{应用场景更明确的品牌识别性,q一步强化统一品牌认知?/p>

CoDesign 图标

CoDesign d?/strong>

CoDesign 演示文g面

CoDesign I状?/strong>

CoDesign 分n?amp;加蝲

CoDesign 核心界面效果展示

?品牌视觉和品视觉是相辅相成的,如何让用h清晰的品牌感知,往往来源于一些细的场景品牌q用Q这也是视觉一致性的重要体现。?/p>

4. 在兼Ҏ上闭环

4.1「一个」样?/strong>

我们在每一个组件的设计与规划中Q都可能的照顾在多场景的兼Ҏ。例如卡片组件的设计Q?.0 的卡片设计,我们有着各种不同的样式,比例Q间距等Q新版设计中我们内容卡片进行了l构化处理,采用了一L视觉语言Q框Ӟ裁切方式Q甚臛_发逻辑Q来增强视觉的统一?Q减维护成本的同时Q兼Ҏ多的场景?/p>

4.2「一U」框?/strong>

设计开始规划时Q我们就用一套颜?Token 搭徏赯计和开发之间界面样式的映射关系Qؓ未来暗黑模式适配打下基础?/p>

新版的页面结构设计,也ؓ不同屏幕讑֤提供更好的兼Ҏ?/p>

4.3「一套」视觉语a

随着整个设计云生态的品牌形象的更新和l一Q然而各个子产品内的视觉风格q是各异Q那未来 CoDesign 会作计^台的q接器,我们也有意识的让新版的视觉风格gl到各大q_Q来保持一致的视觉语言。那目前我们已经陆箋让这套视觉风格gl到了设计云企业理后台QOpenDesignQ设计走查像素眼?/p>

三、资产管理与设计提效

1. 品牌、视觉、运营协?/h3>

在视觉团队多人协作中Q我们统一了协作环境,全文件的 Figma 化,q且品设计、运营设计组件化Q方便团队成员用更加灵z高效?/p>

2. 视觉、研发协?/h3>

在视觉、研发多人协作中Q设计与研发l一使用 TDesign 基础lgQ保证基lg一致性;业务lg在业务拓展过E中׃务开发独立徏讑ƈl护Q在最后通过视觉样式 Token 化,建立设计和开发之间界面样式的映射关系?/p>

l语

以上内容是基?CoDesign 体验升应用q程中的一些关键策略及执行思\?/p>

M来说Q我们在q个版本的设计上Q除了不断解决品的诉求和用户反馈的体验问题之外Q还在努力提升设计(交互、视觉)及研发一致性,构徏可辅助团队标准化的设计、研发的 Token 及组件库Q打好底层基框架Q未?CoDesign 会增加更多的功能Q辐更q业务。我希望q些基础面的Q能带来整个q_一致性的用户体验?/p>

转蝲Qh人都是品经?/p>

C妙微Q蓝蓝设计)m.payeee.cn 是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计?a href="/icon.html" target="_blank" rel="noopener">图标定制?a href="/Design.html" target="_blank" rel="noopener">用户体验设计?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询?a href="/web.html" target="_blank" rel="noopener">高端|站设计?a href="/xz.html" target="_blank" rel="noopener">q面设计Q以及相关的软g开发服务,咨询电话Q?1063334945?/p>

关键词:UI咨询?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a>UI设计公司?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司?a href="/bank.html" target="_blank" rel="noopener">银行金融软gUI界面设计?a href="/monitor.html" target="_blank" rel="noopener">能源及监控Y?/a>UI界面设计?a href="/weather.html" target="_blank" rel="noopener">气象行业UI界面设计?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝGIS UI界面设计?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软gUI界面设计?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软gUI界面设计?a href="/education.html" target="_blank" rel="noopener">教育行业软gUI界面设计?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a>软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?

我们建立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学习成长,咨询及进请加蓝助微信ben_lanlan?/p>

 

image.png

]]>
Tue, 16 Jun 2026 01:43:21 +0000 清阳 http://m.payeee.cn/blog/post-14613.html
灉|枯竭不用愁!5 个优质品设计y思,L打破创作瓉 http://m.payeee.cn/blog/post-14612.html
大家好,Ƣ迎来到C妙微UI设计公司d享专栏!我们会持l拆解优质线上品案例,挖掘实用的设计思\与细节,和大家一起发现日品里的精妙设计,汲取创作灉|。今天就分n 5 个落地性极强的产品设计巧思,帮大家走出创作瓶颈?/div>

一、懂车帝QAI 囄识RQ打造零门槛查R体验

懂R帝上U?AI 囄识R功能Q用户只需拍摄或上传R辆照片,pȝ便能快速识别R型,q同步展C品牌、款式、R辆配|等完整信息Q精准解决用h车、识车的核心痛点?/div>
  1. 化操作,降低信息查询成本
     
    针对汽R爱好者、购车h?“认R难、查配置程J琐” 的问题,该功能自动抓取R辆外观、R标等核心特征Q一键输出完整R型资料。对比传l手动检索、参数比对的方式Q大q提升信息获取效率?/li>
  2. 全场景适配Q助力消费决{?/strong>

    image.png

    无论是街头偶遇心仪R辆随手识别,q是在二手R市场栔R车辆配置QAI 识R都能_և匚w信息。多场景的实用能力,为用户选R、购车提供客观参考,让R辆信息查询变得简单高效?/li>

二、高德地图:地标打卡动效Q赋予互动满满A式感

在高德地图「qV的地标打卡环节Q品搭配趣呛_甅R手机震动双重反馈,大幅提升用户的用体验与参与感。设计以h持旗插地的动态画面ؓ核心Q打卡完成后弹出 “地标打卡?rdquo; 专属标语?/div>
  1. 动效加持Q强化打卡A式感
     
    插旗动画搭配手机震动Qؓ单的打卡行ؓ赋予十仪式感。动作画面与荣誉标语自然衔接Q及时给予用h向心理反馈,让打卡成功的喜悦感更强烈?/li>
  2. 味互动Q打造长效记忆点

    image.png

    生动畅的动效,让「qV功能深入h心。原本单U的记录工具Q{变ؓ “征服地图、收集地?rdquo; 的趣味互动玩法,有效Ȁ发用户主动探索、解锁更多打卡称L意愿?/li>

三、懂车帝Q?D 看RQ线上沉式感知实RI间

依托高精?3D 车辆模型Q懂车帝 3D 看R功能完整q原实R外观与内饰细节。ؓ了让用户直观判断车内乘坐I间Q品还提供多款不同w高的h体模型,可精准测R内头、腿部等区域的剩余空间?/div>
  1. H破局限,打造沉式看R体验

    image.png

    借助三维建模技术,用户可自由旋转、羃放R辆模型,配合畅的交互动M实时反馈Q打破传l图文看车的单调感,营造n临其境的U上看R氛围Q提升用户对车辆的认知度与信L?/li>
  2. 数据可视化,直观评估乘坐I间
     
    抽象的车辆寸数据转化为可视化场景Q借助不同w高假h模拟乘坐状态,直观展示车内I间大小。帮助用户在U上快速判断R辆空间是否适配自n需求,有效提升选R决策效率?/li>

四、美团外卖:食动态展C,味视觉拉动量转化

团外卖在商品列表中融入食制作动画Q动态呈现美食热气腾腄画面Q用味视觉效果吸引用户目光Q同时助力商家引获客?/div>
  1. 味动画Qg长用h览时?/strong>

    image.png

    用户上下滑动面Ӟ食动画势播放Q鲜zȝ画面~解了用?“选择困难、不知道吃什?rdquo; 的浏览焦虑,有效留住用户Q提升页面停留时ѝ?/li>
  2. 双向赋能Q实现流量高效{?/strong>
     
    区别于生的q告推送,食动画兼顾q_推广需求与用户体验Q既能帮助商家曝光品,又能Ȁ发用戯店、下单的Ʋ望Q实现^台、商家、用户三方共赢?/li>

五、滴滴搬Ӟ场景化套设计,降低用户决策隑ֺ

滴滴搬家摒弃单纯|列货R寸、展CR辆图片的传统模式Q结合用L实搬家场景设计套,让用户快速匹配适配车型Q告别反复对比的困扰?/div>
  1. 场景化展C,需求一目了?/strong>
     
    功能_ևҎ用户搬家核心需求,清晰标注不同车型可装载的物品Q例如两轮R、洗机、三人沙发、床垫、床架等Qƈ附上物品寸限制Q内容直观易懂?/li>
  2. 贴合用户认知Q简化选择程

    image.png

    产品跛_专业车型参数表述Q按?strong>单h物品、双人物品、小家庭、大家庭
    {生zd场景划分套餐Q用h需理解复杂车型规格Q根据家庭h数、物品多就能快速选定车型Q极大降低决{门槛?/li>

写在最?/h2>

以上案例均来自团队日?UED 体验与ȝ。后l我们也会持l深度体验各cM品,挖掘更多优秀设计思\与落地案例,把实用的设计Ҏq用到实际工作中Q打出更优质的用户体验?
 
希望本次分n能ؓ大家带来启发Q我们下期再见!
 
转蝲Q优?/div>

C妙微Q蓝蓝设计)m.payeee.cn 是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计?a href="/icon.html" target="_blank" rel="noopener">图标定制?a href="/Design.html" target="_blank" rel="noopener">用户体验设计?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询?a href="/web.html" target="_blank" rel="noopener">高端|站设计?a href="/xz.html" target="_blank" rel="noopener">q面设计Q以及相关的软g开发服务,咨询电话Q?1063334945?/p>

关键词:UI咨询?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a>UI设计公司?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司?a href="/bank.html" target="_blank" rel="noopener">银行金融软gUI界面设计?a href="/monitor.html" target="_blank" rel="noopener">能源及监控Y?/a>UI界面设计?a href="/weather.html" target="_blank" rel="noopener">气象行业UI界面设计?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝGIS UI界面设计?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软gUI界面设计?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软gUI界面设计?a href="/education.html" target="_blank" rel="noopener">教育行业软gUI界面设计?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a>软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?

我们建立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学习成长,咨询及进请加蓝助微信ben_lanlan?/p>

 

image.png

]]> Tue, 16 Jun 2026 01:42:55 +0000 清阳 http://m.payeee.cn/blog/post-14612.html 发红包用户不领情Q看淘宝如何用“砸金蛋”让用户参与度狂飙! http://m.payeee.cn/blog/post-14611.html
C妙微UI设计公司分nQ在电商q营中,直接z֏U包的模式逐渐陷入瓉Q福利Ş式单一、用户领完即赎ͼ既无法沉淀用户停留旉Q也难以强化频道心智。对此,淘宝U杀团队另辟y径Q以 **「天天砸金蛋?* 为核心玩法,单U的权益发放升为沉式互动体验Q借助游戏化设计大q提升用户参与度与复访率。本文将完整拆解该项目的设计思\、玩法架构、视觉体pM品牌融合{略Q重新定义电商权益设计的核心价倹{?/div>

一、重新认知权益设计:?“发福?rdquo; ?“造体?rdquo;

传统电商权益以红包ؓ主,具备l果明确、操作简单的特点Q但~陷十分H出Q用户领取后立刻dQ整个过E毫无期待感与参与感Q权益仅停留?“物质奖励” 层面Q无法成接用戗频道与消费决策的纽带?/div>
淘宝设计团队提出全新思\Q?strong>让每一ơ权益领取,都成为值得期待的互动过E?/strong>。我们将权益隐藏在趣味玩法之中,借助 “研R?rdquo; 的动作营造期待感Q在揭晓奖励的瞬间放大用L获得感。至此,冰冷的福利发放{变ؓ有温度、有仪式感的体验Q完成从 “被动领取” ?“d参与” 的核心{变?/div>

二、选择 “研R?rdquo;Q契合用户心智的l典玩法重构

“研R?rdquo; q新兴玩法Q但其天焉配电商U杀场景Q也是团队最l选定该蝲体的核心原因Q?/div>
  1. 低学习成本,玩法直观
     
    整套程化ؓ「进入页?— 砸开金蛋 — 揭晓奖励 — 领取权益」四步,逻辑通俗易懂Q用h需额外学习Q零认知门槛卛_参与?/li>
  2. 贴合用户心智Q场景共?/strong>
     
    该玩法自带线下商促销的氛围感Q精准匹配淘宝秒杀用户 “省钱、薅利” 的核心诉求,天然拉近与用L距离?

    image.png

Zq一载体Q团队搭Z可无限扩展的玩法l构Q以 “砸蛋” ZU核心,面动线围绕用户核心行ؓ设计Q保?“q入卛_砸蛋” 的流畅体验。在此基上,叠加d体系、蛋壳积分、道L法、周期活动等拓展内容Q全E不打断ȝ交互Q既固化了长期玩法心智,也实C多元权益的整合,解决了^台权益分散、玩法杂q问题?/div>

image.png

三、视觉体p:?“变与不变” 打造长效吸引力

金蛋不仅是玩法蝲体,更是贯穿全场的视觉符受团队采?**“基础l一 + 动态创?rdquo;** 的设计原则,q品牌辨识度与体验新鲜感,打造可复用的超U视觉容器?/div>

Q一Q不变:{牢视觉锚点Q徏立用户信?/h3>

image.png

始终保留金蛋核心形态:l一的金色质感、高光效果与圆润造型。无论活动如何P代,核心视觉W号保持E_Q让用户一D?“淘宝U杀金蛋”Q快速徏立熟悉感与信L?/div>

Q二Q变化:分层设计Q持l激zL鲜感

团队金蛋拆解ؓ多层视觉l构Q通过轻量化改动实C验更斎ͼ不增加用戯知负担:
  1. 表情与动作层Q传递实时情l反?

    image.png

    l合不同使用场景设计丰富表情与肢体动作,区分初始状态、点M动、等待停留、完成Q务等不同场景。将用户操作转化为可视化情AQ搭配?3」?5」等x数值提C,实现情A + 数据双重正向反馈Q直观强?“操作必有回报” 的认知,Ȁqhl参与?/li>
  2. 主题服饰?/strong>Q适配节日与品牌场?

    image.png

    针对元旦、春节等各大节日定制专属皮肤Q元旦融合灯W{飘雪元素,营造迎新氛_春节搭配p葫芦、糖ȝ国风元素Q烘托喜庆年呟뀂借助节日视觉攑֤仪式感,驱动用户?“可参?rdquo; 转变?“d惛_?rdquo;?/li>
  3. 道具与动态层Q丰富互动趣?

    image.png

    搭配手持道具、粒子动效、礼q效等内容。砸开金蛋时触发气泡、液体飞溅、星光闪烁等_子效果Q强化互动的冲击力,让奖励揭晓的瞬间更有 “惊喜?rdquo;?/li>

四、品牌融合:告别广Q让合作自然融入体验

传统品牌合作多以静?Logo 贴片呈现Q极易被用户判定为广告,接受度极低。在「天天砸金蛋」玩法中Q团队创新品牌植入模式,让品牌成Z验的一部分Q?/div>
  1. 品牌皮肤定制Q让品牌 “I上金蛋外衣”

    image.png

    为合作品牌定制专属金蛋皮肤,用户在砸蛋互动中自然接触品牌形象Q将 “被动接收q告” 转化?“d发现利”?/li>
  2. 动态语a适配Q脓合品牌调性设计动?

    image.png

    Ҏ品牌属性定制粒子动态:饮品品牌强化液体动效果Q高端美妆品牌突出高光质感,用动态设计替代生的品牌露出?/li>
  3. 情Al定Q让品牌兌好体验

    image.png

    依托金蛋丰富的表情体p,品牌与 “惊喜、开心、满?rdquo; {正面情l绑定。用戯住的不再只是品牌名称Q而是参与玩法时的愉悦感受Q大q提升品牌记忆度?/li>

五、核心思考:权益设计的终极目?/h2>

当权益成为电商^台拉动流量、促q{化的核心驱动力时Q设计的核心l非一x大红包、优惠券{数字奖励。淘宝秒杀团队通过「天天砸金蛋」项目验证了一个核心结论:设计的h|是放大权益的体验q程?/div>
我们一颗普通的金蛋Q打造成承蝲全品cL益、多元玩法、品牌合作的容器Q实C?“单纯发放权益” ?“味玩{权益” 的升U。设计不再只是功能的载体Q更是用户h值的攑֤器?/div>
原本 “领完卌” 的单ơ福利行为,被重塑ؓ用户愿意停留、乐于互动、主动复访的长效体验。当权益被赋予温度与味Q用hL׃只是一份优惠,更是一D值得回味的互动体验?/div>
 
转蝲Q优?/div>

C妙微Q蓝蓝设计)m.payeee.cn 是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计?a href="/icon.html" target="_blank" rel="noopener">图标定制?a href="/Design.html" target="_blank" rel="noopener">用户体验设计?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询?a href="/web.html" target="_blank" rel="noopener">高端|站设计?a href="/xz.html" target="_blank" rel="noopener">q面设计Q以及相关的软g开发服务,咨询电话Q?1063334945?/p>

关键词:UI咨询?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a>UI设计公司?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司?a href="/bank.html" target="_blank" rel="noopener">银行金融软gUI界面设计?a href="/monitor.html" target="_blank" rel="noopener">能源及监控Y?/a>UI界面设计?a href="/weather.html" target="_blank" rel="noopener">气象行业UI界面设计?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝGIS UI界面设计?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软gUI界面设计?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软gUI界面设计?a href="/education.html" target="_blank" rel="noopener">教育行业软gUI界面设计?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a>软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?

我们建立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学习成长,咨询及进请加蓝助微信ben_lanlan?/p>

 

image.png

]]> Tue, 16 Jun 2026 01:39:05 +0000 清阳 http://m.payeee.cn/blog/post-14611.html 产品l理必知?个前端UI框架Q让你的产品设计瞬间高大?/title> <link>http://m.payeee.cn/blog/post-14610.html</link> <description><![CDATA[<p>C妙微UI设计公司分nQ过去,产品l理谈界面设计,常常只需要说一句:“q个面按后台系l常规样式做p?rdquo;</p> <p>但今天,q句话已l不够用了?/p> <p> </p> <p>一斚wQAI 产品、SaaS 工具、内容^台、数据看ѝ运营后台越来越多,产品的第一印象来依赖界面质感。另一斚wQ前端开发已l不再是从零开始写每一个按钮、表单和弹窗Q大多数团队都会Z成熟?UI 框架或组件库快速搭Z品?/p> <p>所以,产品l理虽然不一定要会写代码Q但臛_应该知道Q市面上有哪些常见的前端 UI 框架Q它们分别适合什么品?什么时候该用现成框Ӟ什么时候需要做定制设计Q如果你完全不了解这些,很容易在需求评审时提出“不现实的设计要求”Q或者在产品视觉层面输给竞品?/p> <p>q篇文章Q就帮品经理系l梳理一ơ?/p> <h2 id="toc-1" class="jltoc--item">一、什么是前端 UI 框架Q?/h2> <p>单理解,前端 UI 框架是一套已l设计好、开发好的界面组仉合?/p> <p>比如Q?/p> <p>按钮、输入框、下拉选择器、表根{弹H、标{N、菜单、日期选择器、上传组件、通知提醒、侧Ҏ、数据卡?hellip;…</p> <p>q些都是产品面中高频出现的基础元素?/p> <p>如果没有 UI 框架Q前端工E师需要从零开始写q些lgQ不仅开发效率低Q也很难保证不同面之间的风格统一?/p> <p>而有?UI 框架之后Q团队可以直接调用现成组Ӟ再根据品牌风D行主题定制。对于品经理来_q意味着Q?/p> <ul> <li>面开发速度更快Q?/li> <li>交互一致性更强;</li> <li>设计和研发沟通成本更低;</li> <li>后箋l护和P代更可控?/li> </ul> <p>所以,UI 框架q不只是“让页面变好看”的工P它本质上是品研发效率的一部分?/p> <h2 id="toc-2" class="jltoc--item">二、品经理ؓ什么需要了?UI 框架Q?/h2> <p>很多产品l理会觉得:“UI 框架不是前端工程师的事情吗?我ؓ什么要懂?”</p> <p>原因很简单:你不需要会用,但你需要会判断?/p> <p>产品l理臛_要知道三个问题:</p> <p><strong>W一Q这个品适合用什么类型的 UI 框架Q?/strong></p> <p>一个企业管理后収ͼ和一?AI 聊天产品Q和一个营销zd面Q对界面风格的要求是不一L。后台系l更看重表格、表单、权限、筛选和数据展示QAI 产品更看重现代感、轻量感、动效和交互体验Q官|落地页则更看重视觉冲击力和转化路径?/p> <p><strong>W二QUI 框架会媄响品气质?/strong></p> <p>同样是一个管理系l,?Ant Design、Element Plus、shadcn/ui、HeroUI 做出来的感觉可能完全不同。有的偏企业化,有的偏清爽,有的偏现代,有的偏国际化?/p> <p><strong>W三QUI 框架会媄响需求实现成本?/strong></p> <p>有些lg框架本n提供复杂表根{表单校验、日期选择、上传、权限布局{能力,实现成本较低Q但如果产品l理提出的交互和框架默认能力差异很大Q研发成本就会上升?/p> <p>所以,?UI 框架Q不是ؓ了替前端做技术选型Q而是Z让品经理在设计需求、评估成本、判断风格时更专业?/p> <h2 id="toc-3" class="jltoc--item">三、品经理必知的几类前端 UI 框架</h2> <p>前端 UI 框架很多Q但产品l理不需要全部掌握。你只需要知道以下几cR?/p> <h3>1. Ant DesignQ企业后台pȝ的经兔R择</h3> <p>如果你做q中后台产品Q大概率听说q?<a target="_blank" rel="noopener">Ant Design</a>?/p> <p><img class="aligncenter wp-image-6411768" src="https://image.woshipm.com/wp-files/2026/06/sFv1oD1pKEguQfmilKxz-scaled.png" alt="" width="760" height="404" loading="lazy" data-action="zoom"></p> <p>它最适合的场景是Q企业管理后台、CRM、ERP、数据^台、运营后台、权限系l、审批系l、配|系l等?/p> <p>Ant Design 的优势是lg非常完整Q尤光合复杂表格、复杂表单、数据筛选、弹H、菜单、导航、分c上传等中后台场景。对于国内很?B 端品来_它几乎已l是一U?ldquo;默认选择”?/p> <p>但它也有一个明N题:默认风格比较“企业?rdquo;。如果不做主题调_产品Ҏ看v来像传统后台Q缺年L和高U感?/p> <p>产品l理在?Ant Design 时要注意一点:它适合提高效率Q但不代表品一定好看。如果是面向外部客户?SaaS 产品Q最好在颜色、间距、卡片、图标和数据可视化上做二ơ设计?/p> <p>适合场景Q?/p> <ul> <li>企业后台</li> <li>SaaS 理pȝ</li> <li>数据看板</li> <li>权限理pȝ</li> <li>q营配置q_</li> </ul> <p>不太适合Q?/p> <ul> <li>强品牌感官网</li> <li>高?AI 产品首页</li> <li>视觉表达要求很强?C 端?/li> </ul> <h3>2. Element PlusQVue 技术栈里的后台常用选择</h3> <p><a target="_blank" rel="noopener">Element Plus</a> ?Vue 生态里非常常见?UI lg库,很多国内团队做后台系l都会用它?/p> <p><img class="aligncenter wp-image-6411772" src="https://image.woshipm.com/wp-files/2026/06/W63p3JsOlRlfiHymdkYg.png" alt="" width="758" height="542" loading="lazy" data-action="zoom"></p> <p>如果你的技术团队?Vue 3Q那?Element Plus 通常会是一个很Ҏ被考虑的选项。它上手成本低,文友好Q组件也比较完整Q适合快速搭建管理系l?/p> <p>它的产品气质?Ant Design 有点cMQ都是偏中后台、偏效率、偏E_的\Uѝ对于品经理来_Element Plus 的核心hg?ldquo;多么惊艳”Q而是“E_、通用、开发快”?/p> <p>适合场景Q?/p> <ul> <li>Vue 技术栈后台pȝ</li> <li>内部理q_</li> <li>表单密集型?/li> <li>快速搭?MVP</li> <li>q营理pȝ</li> </ul> <p>需要注意的是,如果产品对视觉高U感要求很高QElement Plus 默认风格也需要二ơ设计,否则Ҏ昑־普通?/p> <h3>3. Naive UIQ更清爽C?Vue lg?/h3> <p><a target="_blank" rel="noopener">Naive UI</a> 也是 Vue 3 生态中值得产品l理了解的一套组件库?/p> <p><img class="aligncenter wp-image-6411773" src="https://image.woshipm.com/wp-files/2026/06/MEurSPYmEZxyU3GpFkft-scaled.png" alt="" width="759" height="415" loading="lazy" data-action="zoom"></p> <p>?Element Plus 相比QNaive UI 的气质更轅R更CQ视觉上也更清爽一些。它比较适合那些既需要后台能力,又希望界面不要太传统的品?/p> <p>比如 AI 工具后台、内容管理系l、知识库产品、数据分析工兗轻?SaaS 控制台等Q都可以考虑 Naive UI?/p> <p>对品经理来_Naive UI 的h值在于:它不那么“老派后台”Q同时又具备比较完整的组件能力。如果你希望产品既有效率Q又看v来更q轻Q它是一个不错的选择?/p> <p>适合场景Q?/p> <ul> <li>Vue 3 目</li> <li>清爽型后?/li> <li>AI 工具理?/li> <li>内容q_后台</li> <li>轻量 SaaS 产品</li> </ul> <h3>4. Arco DesignQ适合q轻化企业?/h3> <p><a target="_blank" rel="noopener">Arco Design</a> 是一套偏企业U的设计pȝ和组件库Q既?React 版本Q也?Vue 版本。它的整体风格比传统企业后台更年轻,适合需要兼效率和视觉感的产品?/p> <p><img class="aligncenter wp-image-6411775" src="https://image.woshipm.com/wp-files/2026/06/uEgacGy73DarCJpEMYny.png" alt="" width="764" height="466" loading="lazy" data-action="zoom"></p> <p>如果?Ant Design 更像成熟E重的企业后収ͼ那么 Arco Design 相对更轻、更zL一些。它适合做企业协同品、效率工兗数据^台、SaaS 后台、运营系l等?/p> <p>产品l理可以?Arco Design 理解为:在企业能力和年d视觉之间做^衡的一套方案?/p> <p>适合场景Q?/p> <ul> <li>企业U?SaaS</li> <li>协同办公产品</li> <li>数据分析q_</li> <li>q营后台</li> <li>q轻?B 端?/li> </ul> <h3>5. MUIQ适合国际化品和 Material Design 风格</h3> <p><a target="_blank" rel="noopener">MUI</a> ?React 生态里很成熟的一套组件库Q基?Google ?Material Design 风格?/p> <p><img class="aligncenter wp-image-6411785" src="https://image.woshipm.com/wp-files/2026/06/7UQKag7ZV0WlLQTlOmuL.png" alt="" width="761" height="485" loading="lazy" data-action="zoom"></p> <p>它的特点是规范感强、组件完整、国际化E度高。很多v外品、开发者工兗SaaS 产品会?MUI?/p> <p>不过QMUI 的默认风格有比较明显?Material Design 特征。如果你的品希望看h?ldquo;Google p?rdquo;QMUI 会比较合适;但如果你希望做出独特品牌感,需要进行较多主题定制?/p> <p>适合场景Q?/p> <ul> <li>国际?SaaS</li> <li>React 目</li> <li>工具型?/li> <li>外用户产品</li> <li>Material Design 风格产品</li> </ul> <h3>6. MantineQReact 生态里的全能型选手</h3> <p><a target="_blank" rel="noopener">Mantine</a> 是一套比较全能的 React lg库?/p> <p>它的优势在于lg丰富、hooks 完整、主题定制能力强Q适合做各U?Web 应用Q尤光合 SaaS、后台系l、工具型产品?/p> <p>?Ant Design 相比QMantine 的视觉气质更M些;?shadcn/ui 相比Q它又更像一个完整的lg库,开即用能力更强?/p> <p>如果你的团队使用 ReactQƈ且想要一个既能快速开发、又不会太传l的 UI 框架QMantine 是值得考虑的选择?/p> <p>适合场景Q?/p> <ul> <li>React SaaS 产品</li> <li>工具?Web 应用</li> <li>理后台</li> <li>表单密集型?/li> <li>中小型商业?/li> </ul> <h3>7. Shadcn uiQ当下很适合 AI 产品的现代组件方?/h3> <p>q几q_<a target="_blank" rel="noopener">Shadcn ui</a> ?React ?Next.js 圈子里非常受Ƣ迎?/p> <p><img class="aligncenter wp-image-6411792" src="https://image.woshipm.com/wp-files/2026/06/oWbrnZQBljREtMSdGPa0.png" alt="" width="766" height="459" loading="lazy" data-action="zoom"></p> <p>严格来说Q它q不是传l意义上的组件库。它更像是一套可以复制到自己目里、再自由攚w的lg体系。它的设计风格非常现代,配合 Tailwind CSS 使用Q很Ҏ做出高、干净、有质感的界面?/p> <p>q类风格非常适合 AI 产品、SaaS 官网、开发者工兗数据看ѝ知识库产品、内容^台等?/p> <p>shadcn/ui 的优势是好看、灵zR可控;~点是它对前端团队能力要求更高,不像传统lg库那?ldquo;一装即?rdquo;。如果团队前端能力不错,它可以做出非常有差异化的产品视觉Q如果团队比较依赖现成组Ӟ使用成本可能会更高?/p> <p>适合场景Q?/p> <ul> <li>AI 产品</li> <li>Next.js 目</li> <li>SaaS 控制?/li> <li>开发者工?/li> <li>高感管理后?/li> <li>需要定制化设计pȝ的?/li> </ul> <p>对品经理来_shadcn/ui 值得重点x。因为现在很多新一?AI 产品的界面风|已经不再是传l后収ͼ而是更轻、更白、更克制、更高的设计语a?/p> <h3>8. HeroUIQ适合惌默认好看的 React 产品</h3> <p><a target="_blank" rel="noopener">HeroUI</a> 也是一套适合 React 目的现?UI lg库?/p> <p><img class="aligncenter wp-image-6411802" src="https://image.woshipm.com/wp-files/2026/06/2iNYfbtMYXLwWqsjHMd1.png" alt="" width="760" height="509" loading="lazy" data-action="zoom"></p> <p>它的特点是默认视觉比较好Q组件带有更明显的现代感和动效感Q适合?AI 工具、创作者品、社Z品、轻?SaaS 产品{?/p> <p>如果产品l理希望产品一开始就有不错的视觉表现Q而不是完全依赖设计师和前端从零调_HeroUI 会是一个不错的选择?/p> <p>适合场景Q?/p> <ul> <li>AI 工具</li> <li>创作者工?/li> <li>轻量 SaaS</li> <li>C֌产品</li> <li>C?Web 应用</li> </ul> <h3>9. Tailwind CSSQ不是组件库Q但产品l理也应该知?/h3> <p><a target="_blank" rel="noopener">Tailwind CSS</a> 严格来说不是 UI lg库,而是一?CSS 工具框架?/p> <p>你可以把它理解成一?ldquo;原子化样式系l?rdquo;。它不会直接l你一个完整的表格或弹H,但它可以让前端非常灵zd搭徏各种界面?/p> <p>现在很多C UI 框架和组件方案都会基?Tailwind CSSQ比?shadcn/ui、HeroUI {?/p> <p>产品l理不需要理?Tailwind CSS 的写法,但要知道它代表了一U趋势:来多团队不满于直接套用传统lg库,而是希望通过更灵zȝ样式pȝQ做出更有品牌感的界面?/p> <p>适合场景Q?/p> <ul> <li>高定制化官网</li> <li>SaaS 官网</li> <li>AI 产品面</li> <li>需要强视觉表达的?/li> <li>自徏设计pȝ</li> </ul> <h2 id="toc-4" class="jltoc--item">四、品经理应该如何选择 UI 框架Q?/h2> <p>产品l理不需要决定最l技术选型Q但可以和设计师、前端一起从以下几个l度判断?/p> <h3>1. 先看产品cd</h3> <p>如果是企业后台、管理系l、配|^収ͼ可以优先考虑 Ant Design、Element Plus、Arco Design?/p> <p>如果?AI 产品、SaaS 工具、开发者工P可以重点x shadcn/ui、HeroUI、Mantine?/p> <p>如果?Vue 技术栈Q可以看 Element Plus、Naive UI、Arco Design Vue?/p> <p>如果是官|、落地页、活动页Q可以关?Tailwind CSS 及其生态组件?/p> <h3>2. 再看技术栈</h3> <p>React 目常见选择Q?/p> <ul> <li>Ant Design</li> <li>MUI</li> <li>Mantine</li> <li>shadcn/ui</li> <li>HeroUI</li> <li>Arco Design React</li> </ul> <p>Vue 目常见选择Q?/p> <ul> <li>Element Plus</li> <li>Naive UI</li> <li>Arco Design Vue</li> <li>shadcn-vue</li> </ul> <p>不同框架q不是随侉K的Q它和团队技术栈高度相关。品经理不要只?ldquo;我喜Ƣ这个风?rdquo;Q还要问一句:“我们现在的前端技术栈适合用它吗?”</p> <h3>3. 看组件完整度</h3> <p>如果产品里有大量复杂表格、筛选、表单、权限、弹H、上传、日期选择Q组件完整度非常重要?/p> <p>q类产品更适合选择成熟lg库,比如 Ant Design、Element Plus、Mantine、Arco Design?/p> <p>如果产品更重视视觉表达、页面质感和品牌差异化,可以选择 shadcn/ui、HeroUI、Tailwind CSS 生态?/p> <h3>4. 看设计定制能?/h3> <p>很多产品的问题不?ldquo;没有 UI 框架”Q而是“所有页面都长得像模?rdquo;?/p> <p>如果你希望品有自己的品牌感Q就不能只依赖默认样式。品经理需要关注:</p> <ul> <li>是否支持主题色定Ӟ</li> <li>是否支持暗黑模式Q?/li> <li>lg间距能不能统一调整Q?/li> <li>按钮、卡片、表根{弹H是否能形成l一设计语言Q?/li> <li>设计E和前端lg是否能长期保持一_</li> </ul> <p>一个成熟品,最l一定不是简单套模板Q而是形成自己的设计系l?/p> <h2 id="toc-5" class="jltoc--item">五、不同品场景的推荐选择</h2> <p><strong>如果你是做企业中后台Q?/strong></p> <p>优先?Ant Design、Element Plus、Arco Design。它们组件成熟,适合复杂业务场景Q尤其是表格、表单、筛选、权限等能力比较重要的系l?/p> <p><strong>如果你是?AI 产品Q?/strong></p> <p>优先?shadcn/ui、HeroUI、Mantine。它们更Ҏ做出C感和高感,适合 AI 工具、AI 工作台、AI 内容q_、AI Agent 控制台等产品?/p> <p><strong>如果你是?SaaS 产品Q?/strong></p> <p>可以Ҏ风格选择 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后台管理,可以?Ant Design ?ArcoQ如果是偏现代工P可以?shadcn/ui ?Mantine?/p> <p><strong>如果你是做官|和营销:</strong></p> <p>可以x Tailwind CSS 生态。相比传l后台组件库Q它更适合做品牌官|、课E页、活动页、品介l页?/p> <p><strong>如果你是 Vue 团队Q?/strong></p> <p>可以重点?Element Plus、Naive UI、Arco Design Vue。如果想E_Q就?Element PlusQ如果想更现代,可以?Naive UIQ如果要企业U完整方案,可以?Arco Design Vue?/p> <h2 id="toc-6" class="jltoc--item">六、品经理要避免的几个误?/h2> <p><strong>W一个误区:以ؓ UI 框架{于设计Eѝ?/strong></p> <p>UI 框架只是基础lgQ不{于完整设计。真正的产品体验q包括信息架构、页面布局、视觉层U、交互\径、文案表辑֒品牌调性?/p> <p><strong>W二个误区:只看好不好看Q不看业务复杂度?/strong></p> <p>有些框架看v来很,但不一定适合复杂后台。如果品有大量表格、筛选和表单Q组件能力比视觉炫酷更重要?/p> <p><strong>W三个误区:只追求差异化Q忽略开发成本?/strong></p> <p>如果每个lg都要重写Q每个交互都要高度定Ӟ产品看v来可能更特别Q但研发成本和维护成本也会大q上升?/p> <p><strong>W四个误区:认ؓ用了某个框架׃定高U?/strong></p> <p>同样使用 shadcn/uiQ有的品很高Q有的品也会很普通。框架只是v点,最l效果取决于设计能力、前端实现和产品l节?/p> <h2 id="toc-7" class="jltoc--item">七、品经理真正应该掌握的不是框架名字Q而是选型逻辑</h2> <p>产品l理了解 UI 框架Q不是ؓ了和前端争论“到底用哪个库”Q而是Z提升产品判断力?/p> <p>你至要能判断:</p> <ul> <li>q个产品是偏后台Q还是偏前台Q?/li> <li>是效率优先,q是品牌优先Q?/li> <li>是快速上U,q是长期打造设计系l?</li> <li>?React 技术栈Q还?Vue 技术栈Q?/li> <li>是重表格表单Q还是重视觉体验Q?/li> <li>是内部系l,q是面向用户的商业品?</li> </ul> <p>当你能回{这些问题,和设计师、前端沟通时׃更专业?/p> <h2 id="toc-8" class="jltoc--item">l语Q未来的产品l理Q要懂一点前端审和工程效率</h2> <p>AI 时代Q品经理的能力边界正在变化?/p> <p>q去Q品经理重点关注需求、流E和功能Q现在,产品l理q需要懂一点界面审、组件思维、设计系l和研发效率?/p> <p>前端 UI 框架是q接产品、设计和研发的重要桥梁?/p> <p>你不需要成为前端工E师Q但你需要知道:</p> <ul> <li>做企业后台时Qؓ什么很多团队会选择 Ant Design ?Element PlusQ?/li> <li>做现?AI 产品ӞZ么越来越多团队关?shadcn/ui、HeroUI ?Tailwind CSSQ?/li> <li>?SaaS 产品ӞZ么组件库不仅影响开发速度Q也影响用户对品专业度的第一印象?/li> </ul> <p>真正优秀的品经理,不只是会写需求文档,也要能判断一个品该用什么方式被更高效、更观、更可持l地做出来?/p> <p>q,是产品l理应该了解前端 UI 框架的原因?/p> <p> </p> <p>转蝲Qh人都是品经?/p> <p class="ds-markdown-paragraph"><a href="/blog/content/uploadfile/202411/8ad61732265770.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></a></p> <p><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">C妙微Q蓝蓝设计)</a><a href="/index.html" target="_blank" rel="noopener">m.payeee.cn</a> 是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>?a href="/icon.html" target="_blank" rel="noopener">图标定制</a>?a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>?a href="/web.html" target="_blank" rel="noopener">高端|站设计</a>?a href="/xz.html" target="_blank" rel="noopener">q面设计</a>Q以及相关的软g开发服务,咨询电话Q?1063334945?/p> <div id="kurliqqj73c" class="container-N52Q2C"> <div id="kurliqqj73c" class="item-xiWXhh"> <div id="kurliqqj73c" class="container-VwJ4V9 chrome70-container"> <div id="kurliqqj73c" class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message"> <div id="kurliqqj73c" class="message-block-container-tkzqSk" data-testid="message-block-container"> <div id="kurliqqj73c" class="message-box-p8ru6o" data-testid="receive_message" data-message-id="3786495991702018"> <div id="kurliqqj73c" class="message-box-content-wrapper-g6XZZQ"> <div id="kurliqqj73c" class="message-content message-box-content-WoA7L1 receive-message-box-content-Ba_z2R samantha-message-box-content-Y8MYFH" data-testid="message_content"> <div id="kurliqqj73c" class="container-p6WrVu flow-markdown-body theme-samantha-_RgbJJ" dir="ltr" data-testid="message_text_content" data-show-indicator="false"> <p>关键词:<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司</a>?a href="/bank.html" target="_blank" rel="noopener">银行金融软g</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/monitor.html" target="_blank" rel="noopener">能源及监控Y?/a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝ</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软g</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软g</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/education.html" target="_blank" rel="noopener">教育行业软g</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a><a href="/Work.html" target="_blank" rel="noopener">软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?</a></p> <p>我们建立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学习成长,咨询及进请加蓝助微信ben_lanlan?/p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="kurliqqj73c" class="container-N52Q2C"> <div id="kurliqqj73c" class="item-xiWXhh"> <div id="kurliqqj73c" class="container-VwJ4V9 chrome70-container"> <div id="kurliqqj73c" class="inner-lM6ViN inner-item-A0sIAC" data-target-id="message-box-target-id" data-testid="union_message"> <div id="kurliqqj73c" class="message-block-container-tkzqSk" data-testid="message-block-container"> <div id="kurliqqj73c" class="message-box-p8ru6o message-box__reverse-_SbCa_" data-testid="send_message" data-message-id="3788866250046978"> <div id="kurliqqj73c" class="message-box-content-wrapper-g6XZZQ send-message-rNQDpw"> <div id="kurliqqj73c" class="message-content message-box-content-WoA7L1 send-message-box-content-kJrEkE !p-0 !bg-transparent samantha-message-box-content-Y8MYFH" data-testid="message_content"> <div id="kurliqqj73c" class="flex flex-col items-end"> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p><img src="/blog/content/uploadfile/202410/d2b51730368097.png" alt="image.png" width="144" height="123"></p>]]></description> <pubDate>Mon, 15 Jun 2026 10:45:02 +0000</pubDate> <dc:creator>清阳</dc:creator> <guid>http://m.payeee.cn/blog/post-14610.html</guid> </item> <item> <title>会员功能持箋升Q背后是设计师的满满用心 http://m.payeee.cn/blog/post-14602.html C妙微UI设计公司Q在用户需求日益多元化的旅游市ZQ会员权益的价g仅在于提供优惠,更在于创造差异化的体验与长期归属感。本ơ会员权益感知升U,我们通过权益展示规则优化和场景化{方式,加强用户对会员权益的感知Q让用户从预订到旅程的每个环节都能清晰感知会员权益的价倹{?/p>

一、背?/span>

当前Q集团持l加大在会员权益斚w的投入,旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用L性和忠诚度,更能有效提高权益使用率和订单转化率。此ơ会员体验升U,正是希望通过优化权益设计和服务体验,实现用户价gq_效益的双赢,最lŞ?投入-体验提升-效益增长"的良性@环?/p>

二、问题洞?/span>

通过走查U上各业务线Q如机票、酒店等Q的面Q我们发C以下 2 个问题:

1. 不同业务UKQ权益的展示节点和感知强度不同,~少一致的设计原则

目前各业务线在会员权益方面的设计手段不同Q在权益展示点位和感知强度上存在明显差异Q缺一致的设计原则q行规范。具体表CؓQ?/p>

酒店Q主要通过货架展示强化会员权益感知

机票Q侧重在列表和中间늭固定位置展示

火R:则聚焦于权益使用环节的触?/p>

image.png

2. 单个业务U内Q优势权益在程中没有充分传?/strong>

通过对各业务U现有页面的走查Q我们发C员权益在订前、订后部分关键节点存在展C缺q问题。虽然用户在程中能看到权益信息Q但整体感知度仍有不?/p>

image.png

针对上述问题Q我们需要徏立统一的设计原则,在保持各业务U自w特色的同时QŞ成协同一致的会员体验Q提升用户对会员权益的整体感知效果?/p>

三、设计优?mdash;—?能看??感知?

本次优化主要围绕两个核心目标展开Q一是徏立规范的权益展示原则Q二是提升用户对权益的感知度。具体将从以下几个方向着手:

1. 权益前置Q强化展C?/strong>

Ҏ历史机票和酒店的目数据Q我们发现将h明显优势的权益提前展C,能够显著增强用户的感知,q有效提升预订{化率。例如携E酒店将会员账户中的的权益与预订程l合Q将原本无早的劣势转化Z员可免费兑早的优势展示。这L方式为我们提供了本次优化的思\——通过权益前置来强化权益,加强感知?/p>

image.png

什么样的权益需要前|?——讑֮强弱权益规则

为提升会员权益展C效果,我们通过Ҏ益内容的pȝ分析Q将其划分ؓ两大cdQ强权益和弱权益?/p>

强权益:指与产品U直接相x对hg生显著媄响的权益Q例如酒店业务的免费早餐服务和会员专享h根{这cL益在用户购买决策中v关键作用Q能有效提升用户满意度和预订转化率,因此需要在核心预订节点q行重点展示?/p>

弱权益:指与产品U关联度较低的权益,例如机票业务的快速安服务。虽然这cL益不会直接媄响用L预订决策Q但可作为增值服务提?a class="tag_a" target="_blank" rel="noopener">用户体验Q间接促q{化?/p>

image.png

为确保权益展C的客观准确Q我们也可以借助内部的权益hD公式,量化每项权益的实际h|帮助我们_և评估和展C权益,为用h供更有h值的会员体验Q最l提升用h意度和忠诚度?/p>

2. 让权益诏I各节点的策?/strong>

在对各业务线的线上页面进行走查时Q我们注意到订前、订后部分节点常常出现权益感知缺q情况?/p>

Z充分提升权益的曝光,我们制定了强弱权益展C的规则Q定义了在各节点展示的必要性。在预订前节点,我们优先展示与用户决{紧密相关的强权益,q在相关性较低的节点提前展示弱权益,以加q户印象ƈ促进转化。预定后Q对收益、{化率?CPOQ客服来늎Q的影响较小Q需要做到尽可能强的展示?/p>

image.png

Ҏ以上规则Q我们在实际点位q行了应用:

以火车票业务ZQ我们通过优化权益展示{略Q在首页新增曝光点位、强化现有页面展C效果,q完善订后权益展C,使会员权益的触达贯穿用户全流E。优化后Q权益曝光率和用h知强度有了明昄提升?/p>

image.png

3. 更加严格的设计规?/strong>

此前制定的会员权益视觉规范,因各业务U复杂度不同Q在多次q代后逐渐出现差异Q导致不同业务线之间展示不一致、单个业务线内流E不l一的问题。ؓ此,本次优化中我们也重点明确了各cd景的标签使用规范和文案规范,全面提升展示一致性,同时加强会员w䆾的表达?/p>

image.png

l过以上几点优化Q上U后数据昄用户对会员权益的满意度、会员权益的使用率都有显著提升,验证了设计方案的有效性?/p>

四、强化重要节点的感知

除了常规程中的会员感知Q我们也在思考如何进一步加qL印象Q让用户订票时优先选择携程?/p>

1. 中节?mdash;—提供好用的体?/strong>

订后的节点往往Ҏ被忽视,以机的快速安权益ZQ用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成栔RQ步骤较长,D体验打折?/p>

新版本中Q我们将相关的会员权益(如快速安Q直接前|至携程 App 大首늚行程卡片。用h开 App 卛_快速查看和使用权益Q无需多层跌{。改版后Q用户体验和权益?/p>

image.png

用率都得C提升?/p>

 

2. 会员升节点——刉惊喜感

Z KANO 模型Q我们可以将用户需求分Zc:基本型、期望型、兴奋型Q在前面的改版中我们已经满了用L前两c需求。我们希望制造惊喜感和A式感来满用L兴奋型需求。携E会员体pM“山峰”觉符P不同高度代表不同{Q用hơ升U,都象征着越一座新的高峰。象征用L山峰的升节点正是满用户“兴奋型需?rdquo;的关键时刅R?/p>

因此Q在用户升Ӟ我们在携E首增加升U弹H强化惊喜感和A式感。用h开 App 卛_直观感受到等U提升的成就Qƈ快速了解新增权益。上U后带来了h均用权益订单量、会员中心访问率{数据的提升?/p>

image.png

l语

通过pȝ化的设计与持lP代,会员权益体系能够深度释放用户价|推动品牌的长期可持箋增长。在q个q程中,我们需要确保用户在全渠道触点中获得q诏一致的体验Q从而徏立稳固的品牌信QQ降低用L学习与决{成本。同Ӟ我们需要强化会员的价值感知,通过兯化的权益呈现和情感化的设计表达,让用户切实感受到专属Ҏ与归属感Q最l打造出更具黏性的用户体验闭环?/p>

转蝲Q优?/p>

C妙微Q蓝蓝设计)m.payeee.cn 是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计?a href="/icon.html" target="_blank" rel="noopener">图标定制?a href="/Design.html" target="_blank" rel="noopener">用户体验设计?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询?a href="/web.html" target="_blank" rel="noopener">高端|站设计?a href="/xz.html" target="_blank" rel="noopener">q面设计Q以及相关的软g开发服务,咨询电话Q?1063334945?/p>

关键词:UI咨询?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a>UI设计公司?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司?a href="/bank.html" target="_blank" rel="noopener">银行金融软gUI界面设计?a href="/monitor.html" target="_blank" rel="noopener">能源及监控Y?/a>UI界面设计?a href="/weather.html" target="_blank" rel="noopener">气象行业UI界面设计?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝGIS UI界面设计?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软gUI界面设计?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软gUI界面设计?a href="/education.html" target="_blank" rel="noopener">教育行业软gUI界面设计?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a>软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?

我们建立了一个微信群Q每天分享国内外优秀的设计,有兴请加入一起学习成长,咨询及进请加蓝助微信ben_lanlan?/p>

 

image.png

]]>
Mon, 15 Jun 2026 10:37:57 +0000 清阳 http://m.payeee.cn/blog/post-14602.html
վ֩ģ壺 99ֻоƷƵ6| ˲| ᰡſᶯ̬ͼ| ۺɫ߹ۿվ| Ʒ˲| av?һ糵| ߸Ь˿߲| ˾Ʒһ| ŷƷþþþþþ| ƨ׽һ| ŷ붯zozo߲| vĻþ| 㽶ۺ| bt°| þþƷ| žž| | ٸִҽVAƵ| ɫɫxxxxx| ŮŮȾƷƵ߹ۿ| ձƷһ| ޹Ʒþþ| Ʒһ| ձһƵ | ˳| 99þþþƷѹۿ| ˿רƵվ| ĻŷƵ| ٸþ| Ʒڶҳ߲| ޾ƷһۺڵִˬֻƵƵ | Ů߳ˮ߹ۿ| 97þþþ| 91Ʒһ | ݾƷƵ| պĻһ| | ݺˬ| av| þ99ۺϾƷ1| ҹƷС˵ |