兰亭妙微UI设计公司:在用户需求日益多元化的旅游市场中,会员权益的价值不仅在于提供优惠,更在于创造差异化的体验与长期归属感。本次会员权益感知升级,我们通过权益展示规则优化和场景化等方式,加强用户对会员权益的感知,让用户从预订到旅程的每个环节都能清晰感知会员权益的价值。
当前,集团持续加大在会员权益方面的投入,旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用户粘性和忠诚度,更能有效提高权益使用率和订单转化率。此次会员体验升级,正是希望通过优化权益设计和服务体验,实现用户价值与平台效益的双赢,最终形成"投入-体验提升-效益增长"的良性循环。
通过走查线上各业务线(如机票、酒店等)的页面,我们发现了以下 2 个问题:
1. 不同业务线间:权益的展示节点和感知强度不同,缺少一致的设计原则
目前各业务线在会员权益方面的设计手段不同,在权益展示点位和感知强度上存在明显差异,缺少一致的设计原则进行规范。具体表现为:
酒店:主要通过货架展示强化会员权益感知
机票:侧重在列表页和中间页等固定位置展示
火车票:则聚焦于权益使用环节的触达
2. 单个业务线内:优势权益在流程中没有充分传达
通过对各业务线现有页面的走查,我们发现会员权益在订前、订后部分关键节点存在展示缺失的问题。虽然用户在流程中能看到权益信息,但整体感知度仍有不足。
针对上述问题,我们需要建立统一的设计原则,在保持各业务线自身特色的同时,形成协同一致的会员体验,提升用户对会员权益的整体感知效果。
本次优化主要围绕两个核心目标展开:一是建立规范的权益展示原则,二是提升用户对权益的感知度。具体将从以下几个方向着手:
1. 权益前置,强化展示
根据历史机票和酒店的项目数据,我们发现将具有明显优势的权益提前展示,能够显著增强用户的感知,并有效提升预订转化率。例如携程酒店将会员账户中的的权益与预订流程结合,将原本无早餐的劣势转化为会员可免费兑早餐的优势展示。这样的方式为我们提供了本次优化的思路——通过权益前置来强化权益,加强感知。
什么样的权益需要前置?——设定强弱权益规则
为提升会员权益展示效果,我们通过对权益内容的系统分析,将其划分为两大类别:强权益和弱权益。
强权益:指与产品线直接相关或对价格产生显著影响的权益,例如酒店业务的免费早餐服务和会员专享价格。这类权益在用户购买决策中起关键作用,能有效提升用户满意度和预订转化率,因此需要在核心预订节点进行重点展示。
弱权益:指与产品线关联度较低的权益,例如机票业务的快速安检服务。虽然这类权益不会直接影响用户的预订决策,但可作为增值服务提升用户体验,间接促进转化。
为确保权益展示的客观准确,我们也可以借助内部的权益价值计算公式,量化每项权益的实际价值,帮助我们精准评估和展示权益,为用户提供更有价值的会员体验,最终提升用户满意度和忠诚度。
2. 让权益贯穿各节点的策略
在对各业务线的线上页面进行走查时,我们注意到订前、订后部分节点常常出现权益感知缺失的情况。
为了充分提升权益的曝光,我们制定了强弱权益展示的规则,定义了在各节点展示的必要性。在预订前节点,我们优先展示与用户决策紧密相关的强权益,并在相关性较低的节点提前展示弱权益,以加深用户印象并促进转化。预定后,对收益、转化率和 CPO(客服来电率)的影响较小,需要做到尽可能强的展示。
根据以上规则,我们在实际点位进行了应用:
以火车票业务为例,我们通过优化权益展示策略,在首页新增曝光点位、强化现有页面展示效果,并完善订后权益展示,使会员权益的触达贯穿用户全流程。优化后,权益曝光率和用户感知强度有了明显的提升。
3. 更加严格的设计规范
此前制定的会员权益视觉规范,因各业务线复杂度不同,在多次迭代后逐渐出现差异,导致不同业务线之间展示不一致、单个业务线内流程不统一的问题。为此,本次优化中我们也重点明确了各类场景的标签使用规范和文案规范,全面提升展示一致性,同时加强会员身份的表达。
经过以上几点优化,上线后数据显示用户对会员权益的满意度、会员权益的使用率都有显著提升,验证了设计方案的有效性。
除了常规流程中的会员感知,我们也在思考如何进一步加深用户的印象,让用户订票时优先选择携程。
1. 出行中节点——提供好用的体验
订后的节点往往容易被忽视,以机票的快速安检权益为例,用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成核销,步骤较长,导致体验打折。
新版本中,我们将出行相关的会员权益(如快速安检)直接前置至携程 App 大首页的行程卡片。用户打开 App 即可快速查看和使用权益,无需多层跳转。改版后,用户体验和权益使

用率都得到了提升。
2. 会员升级节点——制造惊喜感
基于 KANO 模型,我们可以将用户需求分为三类:基本型、期望型、兴奋型,在前面的改版中我们已经满足了用户的前两类需求。我们希望制造惊喜感和仪式感来满足用户的兴奋型需求。携程会员体系以“山峰”为视觉符号,不同高度代表不同等级,用户每次升级,都象征着翻越一座新的高峰。象征用户翻越山峰的升级节点正是满足用户“兴奋型需求”的关键时刻。
因此,在用户升级时,我们在携程首页增加升级弹窗强化惊喜感和仪式感。用户打开 App 即可直观感受到等级提升的成就,并快速了解新增权益。上线后带来了人均使用权益订单量、会员中心访问率等数据的提升。
通过系统化的设计与持续迭代,会员权益体系能够深度释放用户价值,推动品牌的长期可持续增长。在这个过程中,我们需要确保用户在全渠道触点中获得连贯一致的体验,从而建立稳固的品牌信任,降低用户的学习与决策成本。同时,我们需要强化会员的价值感知,通过具象化的权益呈现和情感化的设计表达,让用户切实感受到专属特权与归属感,最终打造出更具黏性的用户体验闭环。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

在接触和学习 UI 设计的时候,我们都必须面对国内外 UI 设计风格差异巨大的问题。比如最近 618,相信大家没少被国产应用的广告“亲切的”问候。
一方面是寻找设计灵感时要做区分,另一方面则是我们学习 UI 时看的书籍,学习的理论、规范,都是由西方国家产出的,而国内设计的方向却和它们背道而驰,用一个词来形容现状,那就是 —— 割裂。
所以在初学阶段,理论学的越多,受到的冲击也就越大,疑问也就越多。所以我们今天的目标,就是来帮大家解答这个疑问。
当我们研究国内外 UI 设计的差异时,样式上的差异只是表象,它们是由更深层次的因素所激发,所以我们首先要深究这些问题的根源。
根据过去十几年的 UI 研究经验,我总结的设计差异包含下面这些因素:
1. 盈利模式的差异
国外产品相对国内的盈利模式相对简单、健康,排除掉大型平台和其它服务配套应用外(比如会员、硬件的配套),基本就是买断、订阅、广告这三个途径。
比如我们熟悉的 Figma、Canva、Notion 等,都是订阅制服务,在产品具备足够竞争力的条件下发展出海量的付费用户,获得巨大的收益和估值(团队只有一两百人时估值过百亿刀)。既然做好产品就能盈利,那这些产品的目标自然是打造更好的产品和提供更好的服务或体验来获得收益。
而国内市场我们都知道,用户付费的意愿是非常非常低的,这就导致很多产品即使做的还不错也看不到盈利希望,尤其是大厂产品,比如迅雷,百度网盘,网易云等等。
靠基础付费模式做不出让人满意的营收,产品团队自然要使出浑身解数来找到盈利点,不管是增加一些奇怪的功能,还是制造各种营销活动。而这些尝试想要获得持续的盈利是非常困难的,所以就得一直想,一直尝试,一直投放。
虽然吃相往往看上去很难看,但不这么做就会“暴毙”,而这么做至少还可以“苟延残喘”,为了生存和盈利,产品团队做出什么离奇的操作都能做出来。
这里还要澄清一点,有很多优秀的工具产品不是国内做不出来,是做出来也很难盈利,所以有能力的团队和开发者是不会轻易往火坑里跳的。
2. 人工成本的差异
第二点就是国内外人工成本上的巨大差异,发达国家的人工成本非常高昂,不只局限在产品开发团队的成本,还包括底层运营、客服、销售、业务员、快递员等等。
而产品的衍生业务往往要借助大量的底层劳力,比如京东做外卖服务,得有充沛的、廉价的骑手作为依托才办得起来,而这在发达西方国家是难以想象的。比如最近经常讨论的为什么日本线下购物市场还很繁荣,线上发展不起来。主要原因之一就是快递员的成本差了好几倍,做不出即廉价又便捷的网购体验。
加上西方国家对雇佣关系的保护,招人容易,裁员可就没有那么简单,所以多数产品团队对扩张都持非常谨慎的态度。人数少,又不能轻易搞 996,就大大限制了产品作妖的范围,这就直接导致他们没有人力做一大堆次要功能的迭代以及运营活动,设计需求自然也会低很多。
3. 用户习惯的差异
最后一点,就是用户习惯的差异。除了前面说的付费意愿低以外,还有很多其它因素。其中在我看来影响最大的因素,就是国内用户对互联网的依赖是远高于国外用户的。
国内的移动互联网行业爆发并不仅仅是局限在互联网行业里,而是把触手拓展到各行各业,用赢学的角度来讲甚至它还大幅度完善了政府基建和民生服务。我们今天缴纳水电费,办理银行卡通过线上就能完成,而很多发达国家甚至到今天还要你去营业厅手写填表。
并且互联网产品已经成为我们购物、娱乐的重要载体,大量的决策、交易、娱乐是在上面进行的。既然用户习惯和粘性都成型了,离不开这些产品了,那么“适当损害”一下用户体验也不是不可以。尤其是大厂各类离奇的功能和运营活动可以轮番轰炸用户,同时把用户对这类负面操作的耐受度都拉高了。
既然用户都适应了,那么为什么还要“装清高”,做个简约的、有原则的、有尊严的产品?当然是加入到运营的狂欢里和其它产品一起压榨用户的注意力,像孔雀开屏一样,在最鸡肋的器官上比划……
以上三点,就是造成国内外设计差异的根本因素。最早国内产品的设计是和国外看齐的,但随着市场的反馈和验证,我们最终走出了自己的道路。这是商业的选择,而不是简单归因给审美、民族、文化、消费力的限制。
不管创业者抱着什么样的想法,进入这个牌桌以后,最终都会被市场调教成相同的模样。
作为 UI 设计师来说,也不要认为这是错误的发展方向,因为这种模式大大增加了 UI 设计的需求量,间接提供了更多的饭碗。如果产品都按欧美的模式发展和设计,那对于国内 UI 设计行业来说真正的天塌了,设计岗位会锐减 8 成以上,而这是 AI 设计根本实现不了的破坏力。
有了内因,下面再对国内外 UI 设计的具体差异做对应的拆解,帮助大家更好理解国内市场的设计特征。
1. 中英文字形排版差异
第一个差异,就是中英文的字体形态差异。中文文字是方块化等宽的,而英文字母则是大小长短不一,词组长度更长,节奏感更强。所以英文设计中,往往会将字体作为一部分融入到排版中,丰富视觉观感。
而中文设计中文字的节奏感较弱,文本的主要作用基本就是传递信息,所以只用中文排版很难出现英文的相同效果,就会促使设计师添加更多的内容,来丰富界面的效果。
2. 运营需求的平面视觉
第二个差异,就是运营设计上的差异。欧美产品中运营活动不是没有,但是数量少,而且往往在设计上也做的很随意,说好听点叫简约,说难听点就是敷衍。
而国内运营活动数量多,且投入精力更大,运营的设计是没有限制的,可以用上广告平面的所有视觉手段,不管是插画还是 3D、AI、拟物、摄影。大团队往往会配置平面设计师完成这部分工作,小公司就要 UI 设计师自己负责,所以没有固定的设计要求,水平之间差距也巨大。
运营设计的差异,源自国内广告设计方向的特色,从早年追求隐喻、创意的合成设计,到现在追求视觉冲击力的大标题、大色块设计。
而国内运营设计在今天绝不只出现在一般广告位中,会见缝插针到所有元素中,比如页面顶部、二楼、胶囊、图标区、瓷片区、底部导航等等。
3. 字段和信息数量差异
国内有大量产品的功能和服务都更完善,这也就催生了更多的信息量和交互需求,单一页面、组件的信息量、交互、状态就远远比国外产品多。
这就导致我们在设计时要考虑这些复杂的情况,需要设计师做具体的业务分析整理字段,还需要做大量的稿件做测试和评审。
不像国外很多简单的产品内容就那么点,可以花大量精力去搞用研或者测试,在这种情况下光是完成产品需求就很困难,更遑论围绕那么海量的内容做用研也是很麻烦的。
所以国内团队虽然会强调体验,但实际设计过程中必然业务优先,体验更多是围绕业务的优化和改进。所以作品集表现上业务的权重是非常高的,绝对不是学习国外的项目包装逻辑堆砌体验和用研内容。
4. 品牌视觉特征的差异
在国内激烈的竞争环境中,建立品牌化的视觉感知就是每个产品都要认真对待的事情。但本身产品内容、信息量就已经很大了,要实现品牌化的视觉输出就没办法走传统品牌的“意识流”路线,使用简单的配色和大量的留白。
同时,UI 的组件样式又高度统一,使用常规样式完成的设计是很难塑造品牌化视觉的。所以最终的解决方案,就是给组件增加更多样式细节,通过局部的创意来塑造视觉上的差异,同时再和其它应用做出区分。
于是,主流产品就陷入这种样式上的竞赛,非常高频的更新组件和视觉的设计,希望做出和别人不同的设计同时又有自己的特点。
这种现状不能说是消极的,因为它确实推动了整个 UI 行业视觉的发展,但对 UI 设计师的视觉素养要求也就更高。所以今天国内的中高级 UI 设计师,转入国外 UI 市场以后都能实现降维打击,就是因为市场的要求对自身的磨练远比外部市场高。
基于以上的差异,可以说在国内做 UI 和和在国外做 UI 是两种难度,要学习和训练的方式也完全不同。作为 UI 设计师要懂得理解背后的成因,并不会无脑迷信国外的设计要求和标准,才可以帮助我们更好融入真实的工作。
结尾再说点有趣的问题,从我们之前学员到国外工作的反馈来看,虽然国内设计容易被嫌弃,但是从设计质量和输出上已经远超欧美的平均水平。
而他们的设计师多数还在划水搞一些无关痛痒的体验和用研时,我们在解决更复杂的商业问题,如果有机会,建议你们也可以去卷国外的 UI,会有你们想象不到的优势。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

当 Toast 内图标、装饰元素较多时,画面容易杂乱松散。可以在主体元素后方增加专属背板,既能收拢零散元素、强化整体感,还能快速增加视觉层次。 搭配装饰图形时可巧用视觉对比:若主体元素线条圆润,可选用棱角分明的爆炸图形、几何图形做搭配,软硬结合让画面更有看点。在此基础上,还能继续叠加细节:添加卡片纹理、细线条装饰,进一步打磨精致度。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品;而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。
一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。
兰亭妙微UI设计公司,总结了12个简单直观的提升设计感的小细节,一起来学习。
在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比;单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。

每种颜色都有一个视觉权重,这有助于在内容中建立层次结构;通过使用颜色的深浅,为元素赋予不同的重要性。
如果可以的话,你甚至可以采用两到三种颜色:

类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

▲主标题字重为600,其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。
如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理:

不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。

但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:
一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色
其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃;通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。

选择一种基础色,再调整色调和颜色深浅来增加均衡;设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。
相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

这种轻柔的阴影呈现出的干净,增加了画面的精致;如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

阴影不一定是黑色的,还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。
在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。
我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。
通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了;要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。

3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本,一般在外卖美食类应用中比较常见。

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范;现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态;因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。
例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。

我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。
从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受;例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉独一无二,又进一步强化了用户对品牌形象的认知。
在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法;使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。
我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:
1)使用阴影
阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。

2)使用不同的背景色来区分
通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分;所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。

3)增加额外的留白
创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了,通过留白和间距来实现元素分组是UI设计中的常用手法。

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。
通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。
如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观;这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。
虽然默认字体可以满足大多数App 的设计需求,但会出现一个问题就是——系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微;例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。
通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计;一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式;为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。
我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想;而低品质的图片会瞬间拉低App的质感。
在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用;即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率;同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。

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

兰亭妙微UI设计公司分享:当AI能够深度理解'团圆经济'的情感密码,节日营销正在从流量争夺升级为心智渗透的精准战役。58同城在中秋期间以'好岗离家近'为核心,通过AI生成融合城市地标与职业场景的个性化视觉,在6大城市实现千万级曝光的同时提升简历投递量40%。这场品效合一的实践揭示了一个关键趋势:AI不再是冰冷的效率工具,而是情感共鸣的放大器——它让招聘广告从信息堆砌转向情感连接,真正实现了品牌温度与业务增长的双赢。
项目首先基于人口特征、营销资源与业绩需求,精准圈定长沙、成都、西安、无锡、南昌五大目标城市。这些城市的共性在于春节/中秋返乡率超80%,乡土情结与团圆氛围尤为浓郁。

执行层面:项目聚焦6大城市的24个核心商圈,选择电梯内、户外大屏、公交站亭三大高频触达渠道。
主视觉采用“品牌区+创意区”双分区布局:左侧传递“好岗离家近”的核心主张,右侧则分别针对B端企业(展示招聘实力)与C端求职者(突出岗位优势),引导“求职者投递-商家入驻”的双向转化。

AI设计的核心价值,在于让“情感共鸣”与“高效落地”并行不悖。本次项目中,AI技术贯穿创意生成、视觉优化全流程,既精准传递“团圆+留乡”的情感内核,又破解了多城市定制、短周期交付的效率难题,实现双重突破。
设计提案方向:
设计紧扣“中秋团圆”与“留乡就业”的双重诉求,以主题文案将求职需求与家庭情感深度绑定,精准触动目标人群的“本土情结”。
创意构思沿两个方向展开:
「中秋+商圈实景」方向提案:
快速建立“本地招聘”的直观认知,通过融合城市地标与品牌色,结合 “中秋团圆” 节点,延续 “好岗离家近” 的核心诉求,同时针对不同城市定制化文案(如西安的“照的见你的未来”、成都的“岗位和火锅一样沸腾”),既传递就业价值,又契合城市气质,激活留乡就业的情感需求。,让城市印记成为情感纽带。

「中秋+地标+职业人物」方向提案:
采用真实场景与AI生成插画人物相结合的方式(如职场女性与城市景观、特色元素的融合),画面生动富有层次,打破传统招聘广告的单调感。

最终方案:

AI技术在此次项目中深度融入从创意到落地的全流程,实现“多快好省”的突破:
创意图像生成:借助Topnow等工具,快速合成“中秋+商圈”的定制化场景,使AI元素与实景自然衔接,直观传递信息,降低用户理解成本。

高效素材处理:
即梦4.0:
字体设计:几分钟内完成字体设计方案。

处理图片:快速调整建筑角度、优化图片内容,适配户外大屏的传播需求,大幅减少后期耗时。


即梦3.0:
生成图片:月亮的质感与主文案的艺术化呈现,通过 AI 技术实现视觉吸引力,既保证节日氛围的营造,又让文案具备强记忆点。

卡通插画:效果比4.0优秀
在插画生成上表现卓越,通过精准指令,快速产出风格统一的本地职业形象(如成都外卖小哥、西安青年群体),传递“本地工作的愉悦感”,效率远超人工。

关键词参考:
“一个外卖小哥抱着熊猫玩偶,大步跑,绿色系工作服,开心地笑,黑色单线描边,扁平插画,炫彩配色”
“一个女孩面对手机视频通话,身穿衬衫,坐姿端正,张口说话,居家环境,黑色单线描边,扁平插画,橙色系配色”
“5个男女青年,抬头看前方,一人手指前方,全身,站立,背影,时尚穿搭,黑色单线描边,扁平插画,丰富配色”
具体成效:
创意阶段:半天生成4个完整方向,传统方式需2-3天。
多城市适配:快速产出兼具系列感与地方特色的视觉方案。
修改优化:响应客户反馈的速度提升70%以上。
基于“一套核心视觉,多场景适配”原则,AI扩图、高清修复,协助快速延展生成线下物料、线上专场Banner、长图海报等多尺寸物料,确保线上线下品牌形象统一,强化用户认知。

AI赋能的设计创新,本次设计通过情感、商业、品牌三大逻辑,实现“品效合一”核心目标。让设计不仅是视觉呈现,更实现了品牌价值与业务增长的双重落地。

1.情感逻辑:激活本土情结,拉动C端转化。AI设计精准触达留乡需求,让“像鸟飞往自己的山”不再只是心理期许,而是有具体岗位支撑的现实可能。数据印证成效:长沙、成都、西安等地线上专场简历投递量增长40%,“本地岗位”搜索量上升62%,有效拉动C端用户参与度。
2.商业逻辑:精准赋能B端,超额完成业绩。对B端商家而言,精准广告投放是核心需求。通过“行业+地域”的定制化广告设计,有效提升了商家投放意愿与合作转化。
3.品牌逻辑:沉淀长期认知资产。设计围绕“贴近受众、强化认知、促进转化”原则,将“提供家乡好工作”的营销逻辑,拆解为“明月+地标+文案+品牌信息”的直观的视觉符号组合,降低用户信息理解成本。通过品牌色、视觉等符号在多场景的重复曝光,持续强化“找本地好工作,就上58”的用户心智,使品牌从工具平台升级为“助力团圆”的伙伴,构筑独特的品牌竞争壁垒。
本次实践为行业带来核心启示:AI是设计师的“超级助手”,其核心价值在于提升效率与精准度。未来的品牌设计应聚焦于 “策略为先,AI赋能,情感共鸣”的融合模式——以策略为导向,用AI提效,最终以情感打动人心。
打动人心的永远是对人性的洞察和情感的共鸣:
对招聘品牌推广而言,这打破了“信息堆砌”的传统广告模式;对更广的行业来说,则示范了“AI赋能设计,设计驱动品效”的新路径。技术终究是工具,而深度的策略思考与人文洞察,永远是设计师不可替代的核心价值。当AI与品牌策略、情感共鸣深度结合,营销才能实现真正的突破,为品牌创造可持续的长期价值。

58同城此次中秋品牌营销项目,正是技术理性与创意感性完美融合的例证。用AI实现高效精准的落地,用设计传递深刻的情感价值,最终成就了品牌声量与业务增长的双赢,也为行业提供了可复制的品效合一实践范本。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

附 Figma 官方文案节选:无论多少次被宣告 “消亡”,设计始终生生不息。它藏在帮你避免坐过站的地铁图里,藏在一目了然的菜单里,也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流,也不是可被替代的技术,它关乎体验、关乎感受,而非仅仅追求功能可用。设计屡遭唱衰,却一次次证明自身不可替代。官方链接:https://x.com/figma/status/2061101954034442293


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

消费心理学宜家效应佐证:用户亲手投入步骤完成事物后,会自发抬高产品价值;动手参与的沉没成本,最终转化为情感与记忆沉淀。
| 摩擦分类 | 用户体感 | 典型场景 | 设计决策 |
|---|---|---|---|
| 坏摩擦 | 被迫填坑、烦躁流失 | 重复登录、错乱跳转、无效排队 | 全盘删除优化 |
| 交易必要摩擦 | 安全感确认 | 支付二次核验、隐私授权 | 精简话术、保留必要步骤 |
| 仪式型好摩擦 | 沉浸场景、充满期待 | 开箱、线下试穿、集章打卡 | 结构化设计,配套情绪回报 |
| 记忆型好摩擦 | 愿意投入时间、加深印象 | 长内容观看、线下展览动线、手作 DIY | 设计体验峰值 |
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

留存边界:极小众精细化定制场景,配置向导保留兜底入口,不作为主流操作路径。
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来,自然成为视觉焦点。
引导用户注意力优先落在关键信息或操作点上,这就是对比原则,我们可以通过形状的对比让卡片突出,增加视觉表现力:
在一些视觉页面中,也可以用异形容器增加视觉表现力,可以结合主题设计容器,例如下方就是一个以纸质火车票造型作为卡片背景的例子:
也可以结合内容设计容器,例如页面的内容是感谢用户,就可以从感谢信或者信纸的角度设计容器:
在设计中,想要为卡片或页面增加形式感,丰富背景是直接且高效的方式,可以从颜色、底纹、装饰元素这三个核心维度展开,让背景不再单调,为整体设计加分:
1. 优化颜色增加背景的形式感
可将背景的无彩色(如黑白、灰度色)替换为带有明确色相的有彩色(如柔和的薄荷绿、清新的天蓝、低饱和的珊瑚橙等)
借助 “无彩色与有彩色” 的属性差异,让卡片与周围的浅灰背景或普通卡片形成直观色彩对比,快速从整体布局中跳脱出来:
也可以将卡片的单一纯色设计,升级为多种颜色的渐变效果 —— 通过这种渐变色,让卡片与周围的背景、其他组件形成鲜明对比
从而快速从整体布局中凸显出来,成为视觉焦点,快速抓住用户注意力:
2. 给背景增加底纹
在背景中增加底纹(如低透明度的几何纹理、轻微的肌理质感等),不仅可以强化视觉层次,还可以向用户传递页面的风格氛围,增强记忆点。
例如科技类产品用细线条网格底纹增强科技感,古风类产品可以用纸张等营造复古的氛围感:
下面列举了一些常见的底纹元素,可搭配图层的混合模式、不透明度使用:
3. 在背景上增加装饰
可以根据页面/活动添加合适的装饰元素,装饰可以是图形、文字等与页面相关的元素。
装饰元素主要是为了平衡界面视觉,优化整体协调性:当界面存在 “大面积空白” 或 “元素分布不均” 时,装饰元素可起到 “视觉平衡” 作用。
这里的文字不仅是卡片标题,也可以是活动标题或者页签导航,那么文字的设计感可以怎么加呢?我们可以从图形装饰、线条装饰、文字装饰、背景装饰四个方面给文字添加设计感:
1. 图形装饰
将图形放在标题空白处增加标题的设计感:
也可以用来填补标题的空白区域,平衡视觉:
用图形代替文字的某一个笔画,传递产品的氛围:
2. 线条装饰
用简单的线条突出标题,辅助信息分层,突出重点信息,降低认知成本:
3. 文字装饰
用风格独特的字体写一句英文作为标题的装饰:
另一种方法是将文字放大起到装饰作用:
4. 背景装饰
在标题后面增加背景,不仅可以保证标题的可读性,还能让标题抓住用户的眼球,进一步强化视觉表现力:
尽管上面的案例分别展示了不同的提升形式感的方法,但在实际设计中,不必局限于单一形式。
将多种手法灵活组合(比如为卡片搭配有彩色背景的同时,叠加轻量底纹并点缀细节装饰),更能放大视觉表现力,让界面摆脱单调感,呈现出更丰富的层次与质感。
如果这篇内容对你有启发,或是你有其他提升形式感的实用思路,欢迎在评论区分享交流,一起探索更多设计可能性~
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

响应式是一种网页前端技术,让网页可以根据分辨率、设备的变更,自动调整样式和布局。
它的诞生起源于移动互联网兴起的热潮,彼时智能手机访问网站的需求激增,但多数网站的适配都是面向电脑端的大屏幕,仅有少数网站会额外开发符合移动端显示需求的版本(自适应)。
响应式的提出,就是为了解决这种问题,通过建立一套约定好的设计、开发方法,用一套代码自动适配台式电脑、笔记本、平板、移动端等各种设备,提高网站的兼容性和开发效率。
而学习响应式,首先就要从浏览器开始说起。
浏览器是一个非常特殊的软件,比如大家熟知的 Chrome、Safari、Eage 等,我们日常访问的所有网页,都需要通过浏览器加载并渲染出最终的样式。
可以把网页 HTML 文件理解成是一个程序,而浏览器就是运行这个程序的系统(环境),也就是说解析网页依靠的是浏览器而不是 Windows、Mac、iOS、Android、Linux 等客户端系统。
浏览器即系统中的系统(类似虚拟机),不管在任何系统或设备上,只要安装了浏览器,就可以用大体相同的规则、逻辑去加载、渲染出网页。
但不同设备的屏幕有很大差异,网页如何识别并匹配这些设备呢?
方法主要有两种,第一种是浏览器会识别当前系统和设备,并提供接口让网页读取。而部分网站会准备多种规格的网页,根据获取的设备类型推送对应的规格,这种做法叫做自适应模式。
通常自适应只区分桌面端和移动端两种,较大的门户、购物、工具类网站,普遍使用自适应模式。因为移动端访问网页的需求并不高,所以会对移动端版本做大量的精简,降低开发、维护成本。
另一种方法,则是读取浏览器视图区域的分辨率。任何浏览器的界面,都包含功能区域和视图区域两个部分,功能区域提供相关的软件菜单、操作按钮,视图区域则是显示网页界面的区域。随着设备和屏幕分辨率的变化,浏览器的大小也会不同,网页视图区域也会跟着缩放。
网页视图注定小于整个浏览器的软件窗口,而浏览器作为软件,在系统中的尺寸不等于系统分辨率(或设备分辨率),一方面有系统的全局组件影响,另一方面窗口并不是非得全屏,用户可以任意调整。
所以响应式网页就是根据浏览器的视图区域做适配,不管你是在电脑上缩放软件窗口,还是在不同的设备、系统中打开,本质上都只是显示区域大小的变更。而在浏览器的检查选项中,模拟不同的设备其实就是缩放出一个指定的视图窗口出来。
这种依赖关系延伸出一个新的知识点,即网页显示的分辨率,和显示设备的屏幕分辨率,是两套不同的体系。
这是因为硬件分辨率和系统渲染的分辨率是两个概念,尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸笔记本,硬件分辨率是 3024 x 1964 (254 ppi),但在系统的屏幕分辨率选择中,默认的却是 1512*982(即原来的 1/2)。
这是因为硬件分辨率太高了,1:1 渲染的话,那么大多数图标、文字是无法被看清的,所以默认使用了 2x 的规格渲染。但这只是其中一个选项,在 HIDPI 技术的加持下,用户还可以选择别的分辨率,比如我会进一步调高到 1800*1169。
在 Windows 系统中同理,虽然有很多高分辨率的屏幕,但是用户为了看清内容,会在系统中设置 120%、150% 的放大效果,等于为系统分辨率做出变更。
说到底,系统显示分辨率的规格也是无穷无尽的。但是不管外部的转换逻辑有多复杂,规格有多少,都和响应式网页无关,它只需要认准浏览器的视图区域分辨率即可。
所以了解线上案例的响应式布局规则,或者检查已经开发好的响应式页面,并不需要切换不同设备查看,只要拖拽缩放浏览器的大小(主要是宽度)即可获得完整的响应效果。
最后总结起来,响应式网页是面向浏览器视图区域做适配的布局方法,而不是面向系统、屏幕分辨率的适配,这和自适应布局有本质的差异。
在 B 端领域,绝大多数项目都只部分兼容响应式,放弃移动端的适配,即使支持移动端也是使用自适应的混合模式。要面对这些复杂的场景,就月需要理解上面这些基础的概念,否则设计师就无法真正满足响应式项目的前期创建和后期交付需要。
转载:优设
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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