首页

会员功能持续升级,背后是设计师的满满用心

清阳 交互设计及用户体验

兰亭妙微UI设计公司:在用户需求日益多元化的旅游市场中,会员权益的价值不仅在于提供优惠,更在于创造差异化的体验与长期归属感。本次会员权益感知升级,我们通过权益展示规则优化和场景化等方式,加强用户对会员权益的感知,让用户从预订到旅程的每个环节都能清晰感知会员权益的价值。

一、背景

当前,集团持续加大在会员权益方面的投入,旨在通过更具价值的权益体系提升用户体验。优质的会员服务不仅能增强用户粘性和忠诚度,更能有效提高权益使用率和订单转化率。此次会员体验升级,正是希望通过优化权益设计和服务体验,实现用户价值与平台效益的双赢,最终形成"投入-体验提升-效益增长"的良性循环。

二、问题洞察

通过走查线上各业务线(如机票、酒店等)的页面,我们发现了以下 2 个问题:

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

目前各业务线在会员权益方面的设计手段不同,在权益展示点位和感知强度上存在明显差异,缺少一致的设计原则进行规范。具体表现为:

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

机票:侧重在列表页和中间页等固定位置展示

火车票:则聚焦于权益使用环节的触达

image.png

2. 单个业务线内:优势权益在流程中没有充分传达

通过对各业务线现有页面的走查,我们发现会员权益在订前、订后部分关键节点存在展示缺失的问题。虽然用户在流程中能看到权益信息,但整体感知度仍有不足。

image.png

针对上述问题,我们需要建立统一的设计原则,在保持各业务线自身特色的同时,形成协同一致的会员体验,提升用户对会员权益的整体感知效果。

三、设计优化——从"能看到"到"感知好"

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

1. 权益前置,强化展示

根据历史机票和酒店的项目数据,我们发现将具有明显优势的权益提前展示,能够显著增强用户的感知,并有效提升预订转化率。例如携程酒店将会员账户中的的权益与预订流程结合,将原本无早餐的劣势转化为会员可免费兑早餐的优势展示。这样的方式为我们提供了本次优化的思路——通过权益前置来强化权益,加强感知。

image.png

什么样的权益需要前置?——设定强弱权益规则

为提升会员权益展示效果,我们通过对权益内容的系统分析,将其划分为两大类别:强权益和弱权益。

强权益:指与产品线直接相关或对价格产生显著影响的权益,例如酒店业务的免费早餐服务和会员专享价格。这类权益在用户购买决策中起关键作用,能有效提升用户满意度和预订转化率,因此需要在核心预订节点进行重点展示。

弱权益:指与产品线关联度较低的权益,例如机票业务的快速安检服务。虽然这类权益不会直接影响用户的预订决策,但可作为增值服务提升用户体验,间接促进转化。

image.png

为确保权益展示的客观准确,我们也可以借助内部的权益价值计算公式,量化每项权益的实际价值,帮助我们精准评估和展示权益,为用户提供更有价值的会员体验,最终提升用户满意度和忠诚度。

2. 让权益贯穿各节点的策略

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

为了充分提升权益的曝光,我们制定了强弱权益展示的规则,定义了在各节点展示的必要性。在预订前节点,我们优先展示与用户决策紧密相关的强权益,并在相关性较低的节点提前展示弱权益,以加深用户印象并促进转化。预定后,对收益、转化率和 CPO(客服来电率)的影响较小,需要做到尽可能强的展示。

image.png

根据以上规则,我们在实际点位进行了应用:

以火车票业务为例,我们通过优化权益展示策略,在首页新增曝光点位、强化现有页面展示效果,并完善订后权益展示,使会员权益的触达贯穿用户全流程。优化后,权益曝光率和用户感知强度有了明显的提升。

image.png

3. 更加严格的设计规范

此前制定的会员权益视觉规范,因各业务线复杂度不同,在多次迭代后逐渐出现差异,导致不同业务线之间展示不一致、单个业务线内流程不统一的问题。为此,本次优化中我们也重点明确了各类场景的标签使用规范和文案规范,全面提升展示一致性,同时加强会员身份的表达。

image.png

经过以上几点优化,上线后数据显示用户对会员权益的满意度、会员权益的使用率都有显著提升,验证了设计方案的有效性。

四、强化重要节点的感知

除了常规流程中的会员感知,我们也在思考如何进一步加深用户的印象,让用户订票时优先选择携程。

1. 出行中节点——提供好用的体验

订后的节点往往容易被忽视,以机票的快速安检权益为例,用户通常需要打开携程 App → 查找订单详情 → 定位权益入口 → 完成核销,步骤较长,导致体验打折。

新版本中,我们将出行相关的会员权益(如快速安检)直接前置至携程 App 大首页的行程卡片。用户打开 App 即可快速查看和使用权益,无需多层跳转。改版后,用户体验和权益使

image.png

用率都得到了提升。

 

2. 会员升级节点——制造惊喜感

基于 KANO 模型,我们可以将用户需求分为三类:基本型、期望型、兴奋型,在前面的改版中我们已经满足了用户的前两类需求。我们希望制造惊喜感和仪式感来满足用户的兴奋型需求。携程会员体系以“山峰”为视觉符号,不同高度代表不同等级,用户每次升级,都象征着翻越一座新的高峰。象征用户翻越山峰的升级节点正是满足用户“兴奋型需求”的关键时刻。

因此,在用户升级时,我们在携程首页增加升级弹窗强化惊喜感和仪式感。用户打开 App 即可直观感受到等级提升的成就,并快速了解新增权益。上线后带来了人均使用权益订单量、会员中心访问率等数据的提升。

image.png

结语

通过系统化的设计与持续迭代,会员权益体系能够深度释放用户价值,推动品牌的长期可持续增长。在这个过程中,我们需要确保用户在全渠道触点中获得连贯一致的体验,从而建立稳固的品牌信任,降低用户的学习与决策成本。同时,我们需要强化会员的价值感知,通过具象化的权益呈现和情感化的设计表达,让用户切实感受到专属特权与归属感,最终打造出更具黏性的用户体验闭环。

转载:优设

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

 

image.png

为什么国内的UI设计比国外复杂?兰亭妙微UI设计公司总结了3个深层原因

清阳 行业趋势

在接触和学习 UI 设计的时候,我们都必须面对国内外 UI 设计风格差异巨大的问题。比如最近 618,相信大家没少被国产应用的广告“亲切的”问候。

image.png

一方面是寻找设计灵感时要做区分,另一方面则是我们学习 UI 时看的书籍,学习的理论、规范,都是由西方国家产出的,而国内设计的方向却和它们背道而驰,用一个词来形容现状,那就是 —— 割裂。

所以在初学阶段,理论学的越多,受到的冲击也就越大,疑问也就越多。所以我们今天的目标,就是来帮大家解答这个疑问。

 

一、设计差异的根源分析

当我们研究国内外 UI 设计的差异时,样式上的差异只是表象,它们是由更深层次的因素所激发,所以我们首先要深究这些问题的根源。

根据过去十几年的 UI 研究经验,我总结的设计差异包含下面这些因素:

  1. 盈利模式的差异
  2. 人工成本的差异
  3. 用户习惯的差异

1. 盈利模式的差异

国外产品相对国内的盈利模式相对简单、健康,排除掉大型平台和其它服务配套应用外(比如会员、硬件的配套),基本就是买断、订阅、广告这三个途径。

比如我们熟悉的 Figma、Canva、Notion 等,都是订阅制服务,在产品具备足够竞争力的条件下发展出海量的付费用户,获得巨大的收益和估值(团队只有一两百人时估值过百亿刀)。既然做好产品就能盈利,那这些产品的目标自然是打造更好的产品和提供更好的服务或体验来获得收益。

image.png

 

 

而国内市场我们都知道,用户付费的意愿是非常非常低的,这就导致很多产品即使做的还不错也看不到盈利希望,尤其是大厂产品,比如迅雷,百度网盘,网易云等等。

image.png

靠基础付费模式做不出让人满意的营收,产品团队自然要使出浑身解数来找到盈利点,不管是增加一些奇怪的功能,还是制造各种营销活动。而这些尝试想要获得持续的盈利是非常困难的,所以就得一直想,一直尝试,一直投放。

虽然吃相往往看上去很难看,但不这么做就会“暴毙”,而这么做至少还可以“苟延残喘”,为了生存和盈利,产品团队做出什么离奇的操作都能做出来。

这里还要澄清一点,有很多优秀的工具产品不是国内做不出来,是做出来也很难盈利,所以有能力的团队和开发者是不会轻易往火坑里跳的。

2. 人工成本的差异

第二点就是国内外人工成本上的巨大差异,发达国家的人工成本非常高昂,不只局限在产品开发团队的成本,还包括底层运营、客服、销售、业务员、快递员等等。

而产品的衍生业务往往要借助大量的底层劳力,比如京东做外卖服务,得有充沛的、廉价的骑手作为依托才办得起来,而这在发达西方国家是难以想象的。比如最近经常讨论的为什么日本线下购物市场还很繁荣,线上发展不起来。主要原因之一就是快递员的成本差了好几倍,做不出即廉价又便捷的网购体验。

image.png

加上西方国家对雇佣关系的保护,招人容易,裁员可就没有那么简单,所以多数产品团队对扩张都持非常谨慎的态度。人数少,又不能轻易搞 996,就大大限制了产品作妖的范围,这就直接导致他们没有人力做一大堆次要功能的迭代以及运营活动,设计需求自然也会低很多。

3. 用户习惯的差异

最后一点,就是用户习惯的差异。除了前面说的付费意愿低以外,还有很多其它因素。其中在我看来影响最大的因素,就是国内用户对互联网的依赖是远高于国外用户的。

国内的移动互联网行业爆发并不仅仅是局限在互联网行业里,而是把触手拓展到各行各业,用赢学的角度来讲甚至它还大幅度完善了政府基建和民生服务。我们今天缴纳水电费,办理银行卡通过线上就能完成,而很多发达国家甚至到今天还要你去营业厅手写填表。

并且互联网产品已经成为我们购物、娱乐的重要载体,大量的决策、交易、娱乐是在上面进行的。既然用户习惯和粘性都成型了,离不开这些产品了,那么“适当损害”一下用户体验也不是不可以。尤其是大厂各类离奇的功能和运营活动可以轮番轰炸用户,同时把用户对这类负面操作的耐受度都拉高了。

image.png

既然用户都适应了,那么为什么还要“装清高”,做个简约的、有原则的、有尊严的产品?当然是加入到运营的狂欢里和其它产品一起压榨用户的注意力,像孔雀开屏一样,在最鸡肋的器官上比划……

以上三点,就是造成国内外设计差异的根本因素。最早国内产品的设计是和国外看齐的,但随着市场的反馈和验证,我们最终走出了自己的道路。这是商业的选择,而不是简单归因给审美、民族、文化、消费力的限制。

不管创业者抱着什么样的想法,进入这个牌桌以后,最终都会被市场调教成相同的模样。

作为 UI 设计师来说,也不要认为这是错误的发展方向,因为这种模式大大增加了 UI 设计的需求量,间接提供了更多的饭碗。如果产品都按欧美的模式发展和设计,那对于国内 UI 设计行业来说真正的天塌了,设计岗位会锐减 8 成以上,而这是 AI 设计根本实现不了的破坏力。

二、国内外 UI 的具体差异

有了内因,下面再对国内外 UI 设计的具体差异做对应的拆解,帮助大家更好理解国内市场的设计特征。

1. 中英文字形排版差异

第一个差异,就是中英文的字体形态差异。中文文字是方块化等宽的,而英文字母则是大小长短不一,词组长度更长,节奏感更强。所以英文设计中,往往会将字体作为一部分融入到排版中,丰富视觉观感。

image.png

image.png

而中文设计中文字的节奏感较弱,文本的主要作用基本就是传递信息,所以只用中文排版很难出现英文的相同效果,就会促使设计师添加更多的内容,来丰富界面的效果。

image.png

2. 运营需求的平面视觉

第二个差异,就是运营设计上的差异。欧美产品中运营活动不是没有,但是数量少,而且往往在设计上也做的很随意,说好听点叫简约,说难听点就是敷衍。

image.png

而国内运营活动数量多,且投入精力更大,运营的设计是没有限制的,可以用上广告平面的所有视觉手段,不管是插画还是 3D、AI、拟物、摄影。大团队往往会配置平面设计师完成这部分工作,小公司就要 UI 设计师自己负责,所以没有固定的设计要求,水平之间差距也巨大。

image.png

运营设计的差异,源自国内广告设计方向的特色,从早年追求隐喻、创意的合成设计,到现在追求视觉冲击力的大标题、大色块设计。

而国内运营设计在今天绝不只出现在一般广告位中,会见缝插针到所有元素中,比如页面顶部、二楼、胶囊、图标区、瓷片区、底部导航等等。

image.png

3. 字段和信息数量差异

国内有大量产品的功能和服务都更完善,这也就催生了更多的信息量和交互需求,单一页面、组件的信息量、交互、状态就远远比国外产品多。

image.png

这就导致我们在设计时要考虑这些复杂的情况,需要设计师做具体的业务分析整理字段,还需要做大量的稿件做测试和评审。

不像国外很多简单的产品内容就那么点,可以花大量精力去搞用研或者测试,在这种情况下光是完成产品需求就很困难,更遑论围绕那么海量的内容做用研也是很麻烦的。

所以国内团队虽然会强调体验,但实际设计过程中必然业务优先,体验更多是围绕业务的优化和改进。所以作品集表现上业务的权重是非常高的,绝对不是学习国外的项目包装逻辑堆砌体验和用研内容。

4. 品牌视觉特征的差异

在国内激烈的竞争环境中,建立品牌化的视觉感知就是每个产品都要认真对待的事情。但本身产品内容、信息量就已经很大了,要实现品牌化的视觉输出就没办法走传统品牌的“意识流”路线,使用简单的配色和大量的留白。

image.png

同时,UI 的组件样式又高度统一,使用常规样式完成的设计是很难塑造品牌化视觉的。所以最终的解决方案,就是给组件增加更多样式细节,通过局部的创意来塑造视觉上的差异,同时再和其它应用做出区分。

image.png

于是,主流产品就陷入这种样式上的竞赛,非常高频的更新组件和视觉的设计,希望做出和别人不同的设计同时又有自己的特点。

这种现状不能说是消极的,因为它确实推动了整个 UI 行业视觉的发展,但对 UI 设计师的视觉素养要求也就更高。所以今天国内的中高级 UI 设计师,转入国外 UI 市场以后都能实现降维打击,就是因为市场的要求对自身的磨练远比外部市场高。

基于以上的差异,可以说在国内做 UI 和和在国外做 UI 是两种难度,要学习和训练的方式也完全不同。作为 UI 设计师要懂得理解背后的成因,并不会无脑迷信国外的设计要求和标准,才可以帮助我们更好融入真实的工作。

结尾

结尾再说点有趣的问题,从我们之前学员到国外工作的反馈来看,虽然国内设计容易被嫌弃,但是从设计质量和输出上已经远超欧美的平均水平。

而他们的设计师多数还在划水搞一些无关痛痒的体验和用研时,我们在解决更复杂的商业问题,如果有机会,建议你们也可以去卷国外的 UI,会有你们想象不到的优势。

转载:优设

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

 

image.png

保姆级教程!4 个技巧,轻松打造吸睛创意 Toast 设计

清阳 设计资源

Toast 是 UI 设计里高频使用的基础组件,主要用于用户完成操作后,给出轻量化即时反馈,弹窗数秒后便自动消失。市面上常规 Toast 样式大同小异,想要做出亮眼、有质感的效果,不妨试试这 4 个设计思路,从造型、层次、色彩多维度优化,轻松跳出常规设计框架。
日常应用中,纯文字提示是最普遍的 Toast 形式,此外还有弹窗式贴纸式等衍生样式,风格更活泼、更具情感氛围。下面结合实操案例,拆解创意 Toast 的完整设计方法。

一、造型突破:巧用破形 + 异形,摆脱单调轮廓

image.png

常规 Toast 多为规整矩形,视觉平淡,我们可以通过破形异形两种手法重塑造型,提升视觉张力。
  1. 破形设计

    image.png

    让主体元素超出卡片边界,打破边框束缚。这种方式能弱化拘束感,让整体排版更大气舒展,视觉冲击力更强。
  2. 异形设计

    image.png

    在基础图形上做创意改造,常见形式有斜切边角、缺口造型、双弧形、馒头形等。最优思路是结合品牌 IP、Logo、专属图形延展造型(例如马蜂窝 APP 的蜂窝轮廓),让组件和品牌风格统一。若无固定品牌图形,优先选择斜切样式,兼顾美观与视觉舒适度。

    image.png

二、叠加背板:整合视觉元素,丰富画面层次

 

当 Toast 内图标、装饰元素较多时,画面容易杂乱松散。可以在主体元素后方增加专属背板,既能收拢零散元素、强化整体感,还能快速增加视觉层次。

image.png

搭配装饰图形时可巧用视觉对比:若主体元素线条圆润,可选用棱角分明的爆炸图形、几何图形做搭配,软硬结合让画面更有看点。在此基础上,还能继续叠加细节:添加卡片纹理、细线条装饰,进一步打磨精致度。

image.png

三、色彩搭配:冷暖对冲,平衡视觉氛围

image.png

色彩是影响观感的关键:大面积暖色会让画面显得躁动浮夸,大面积冷色则容易压抑沉闷。
 
设计时遵循冷暖色对比原则:若整体以暖色调为主,点缀少量冷色做中和;主色调偏冷时,加入暖色提亮。冷暖相互制衡,能让色彩体系更和谐,画面耐看度大幅提升。

四、色彩呼应:全域联动,避免色彩孤立

image.png

配色时切忌单一色彩集中在某一处,造成视觉割裂。当画面中出现跳脱的点缀色时,可在其他位置增加同色系小元素做呼应,让色彩贯穿整个 Toast,形成视觉联动。
 
最后还可以添加细微投影,拉开元素间的空间距离,强化立体层次感,完成整体优化。
 
转载:优设
 

 

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

 

image.png

 

如何提升UI设计的高级感

清阳 行业趋势

在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品;而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。

一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。

兰亭妙微UI设计公司,总结了12个简单直观的提升设计感的小细节,一起来学习。

一、使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比;单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。

每种颜色都有一个视觉权重,这有助于在内容中建立层次结构;通过使用颜色的深浅,为元素赋予不同的重要性。

如果可以的话,你甚至可以采用两到三种颜色:

  • 主要内容使用深灰色(诸如标题,但是不要用纯黑);
  • 次要内容使用灰色(比如商品介绍);
  • 辅助性内容采用浅灰色(比如发布日期);

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

  • 大多数的文本采用正常的字重(400到500,具体取决于字体);
  • 对于需要强调的文字采用较重的字重(600到700,具体取决于字体);

▲主标题字重为600,其他标绿点的文字字重都为400

应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。

如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。

灰色文字在无彩/彩色背景下要分开处理:

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

但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:

一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色

其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃;通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。

二、统一色调

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

三、干净的阴影

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。

相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

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

阴影不一定是黑色的,还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。

在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。

四、个性的图标设计

合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。

我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。

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

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

五、Tab的设计感

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。

 

image.png

 

AI设计重构招聘品牌营销:节日营销品效双赢之道

清阳 平面设计

兰亭妙微UI设计公司分享:当AI能够深度理解'团圆经济'的情感密码,节日营销正在从流量争夺升级为心智渗透的精准战役。58同城在中秋期间以'好岗离家近'为核心,通过AI生成融合城市地标与职业场景的个性化视觉,在6大城市实现千万级曝光的同时提升简历投递量40%。这场品效合一的实践揭示了一个关键趋势:AI不再是冰冷的效率工具,而是情感共鸣的放大器——它让招聘广告从信息堆砌转向情感连接,真正实现了品牌温度与业务增长的双赢。

 

01 精准锚定:明确情感与场景的设计方向

项目首先基于人口特征、营销资源与业绩需求,精准圈定长沙、成都、西安、无锡、南昌五大目标城市。这些城市的共性在于春节/中秋返乡率超80%,乡土情结与团圆氛围尤为浓郁。

执行层面:项目聚焦6大城市的24个核心商圈,选择电梯内、户外大屏、公交站亭三大高频触达渠道。

主视觉采用“品牌区+创意区”双分区布局:左侧传递“好岗离家近”的核心主张,右侧则分别针对B端企业(展示招聘实力)与C端求职者(突出岗位优势),引导“求职者投递-商家入驻”的双向转化。

02 AI赋能:效率与创意的双重突破

AI设计的核心价值,在于让“情感共鸣”与“高效落地”并行不悖。本次项目中,AI技术贯穿创意生成、视觉优化全流程,既精准传递“团圆+留乡”的情感内核,又破解了多城市定制、短周期交付的效率难题,实现双重突破。

设计提案方向:

1. 情感+场景化共鸣:让设计唤醒本土情结

设计紧扣“中秋团圆”与“留乡就业”的双重诉求,以主题文案将求职需求与家庭情感深度绑定,精准触动目标人群的“本土情结”。

创意构思沿两个方向展开:

「中秋+商圈实景」方向提案:

快速建立“本地招聘”的直观认知,通过融合城市地标与品牌色,结合 “中秋团圆” 节点,延续 “好岗离家近” 的核心诉求,同时针对不同城市定制化文案(如西安的“照的见你的未来”、成都的“岗位和火锅一样沸腾”),既传递就业价值,又契合城市气质,激活留乡就业的情感需求。,让城市印记成为情感纽带。

「中秋+地标+职业人物」方向提案:

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

最终方案:

2. AI提效:贯穿流程的设计革命

AI技术在此次项目中深度融入从创意到落地的全流程,实现“多快好省”的突破:

创意图像生成:借助Topnow等工具,快速合成“中秋+商圈”的定制化场景,使AI元素与实景自然衔接,直观传递信息,降低用户理解成本。

高效素材处理:

即梦4.0

字体设计:几分钟内完成字体设计方案。

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

即梦3.0

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

卡通插画:效果比4.0优秀

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

关键词参考:

“一个外卖小哥抱着熊猫玩偶,大步跑,绿色系工作服,开心地笑,黑色单线描边,扁平插画,炫彩配色”

“一个女孩面对手机视频通话,身穿衬衫,坐姿端正,张口说话,居家环境,黑色单线描边,扁平插画,橙色系配色”

“5个男女青年,抬头看前方,一人手指前方,全身,站立,背影,时尚穿搭,黑色单线描边,扁平插画,丰富配色”

具体成效:

创意阶段:半天生成4个完整方向,传统方式需2-3天。

多城市适配:快速产出兼具系列感与地方特色的视觉方案。

修改优化:响应客户反馈的速度提升70%以上。

3. 物料延展:保障多场景视觉统一

基于“一套核心视觉,多场景适配”原则,AI扩图、高清修复,协助快速延展生成线下物料、线上专场Banner、长图海报等多尺寸物料,确保线上线下品牌形象统一,强化用户认知。

03 价值落地:三大逻辑驱动品效合一

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

1.情感逻辑:激活本土情结,拉动C端转化。AI设计精准触达留乡需求,让“像鸟飞往自己的山”不再只是心理期许,而是有具体岗位支撑的现实可能。数据印证成效:长沙、成都、西安等地线上专场简历投递量增长40%,“本地岗位”搜索量上升62%,有效拉动C端用户参与度。

2.商业逻辑:精准赋能B端,超额完成业绩。对B端商家而言,精准广告投放是核心需求。通过“行业+地域”的定制化广告设计,有效提升了商家投放意愿与合作转化。

3.品牌逻辑:沉淀长期认知资产。设计围绕“贴近受众、强化认知、促进转化”原则,将“提供家乡好工作”的营销逻辑,拆解为“明月+地标+文案+品牌信息”的直观的视觉符号组合,降低用户信息理解成本。通过品牌色、视觉等符号在多场景的重复曝光,持续强化“找本地好工作,就上58”的用户心智,使品牌从工具平台升级为“助力团圆”的伙伴,构筑独特的品牌竞争壁垒。

04 行业启示:走向“策略+情感”的AI设计新范式

本次实践为行业带来核心启示:AI是设计师的“超级助手”,其核心价值在于提升效率精准度。未来的品牌设计应聚焦于 “策略为先,AI赋能,情感共鸣”的融合模式——以策略为导向,用AI提效,最终以情感打动人心。

打动人心的永远是对人性的洞察和情感的共鸣:

对招聘品牌推广而言,这打破了“信息堆砌”的传统广告模式;对更广的行业来说,则示范了“AI赋能设计,设计驱动品效”的新路径。技术终究是工具,而深度的策略思考与人文洞察,永远是设计师不可替代的核心价值。当AI与品牌策略、情感共鸣深度结合,营销才能实现真正的突破,为品牌创造可持续的长期价值。

05 写在最后

58同城此次中秋品牌营销项目,正是技术理性与创意感性完美融合的例证。用AI实现高效精准的落地,用设计传递深刻的情感价值,最终成就了品牌声量与业务增长的双赢,也为行业提供了可复制的品效合一实践范本。

转载:人人都是产品经理

 

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

 

image.png

2026 年 6 月设计素材周刊

清阳 设计资源

 
 
本期兰亭妙微UI设计公司,为大家整理新鲜设计资讯、实用工具、优质素材与趣味插件,灵感与效率两不误。
本期周刊整合新鲜设计资讯、实用效率工具、免费商用素材与趣味插件,覆盖 AIGC、Figma、像素艺术、3D 创意等多个方向,助力设计师拓宽灵感边界、提升日常工作效率。

一、行业热点:Figma 正面回应 “设计已死” 争议

近年来,随着 AI 设计工具、无代码平台快速普及,“AI 将取代设计师”“设计行业走向消亡” 的论调频繁出现在行业讨论中。针对这一热议话题,Figma 举办线下活动,幽默且坚定地回应了 “Design is dead(设计已死)”的说法。
据海外社交平台 X(原 Twitter)统计,2026 年以来,“设计已死” 的论调已被提及多达 847 次。但 Figma 明确指出:设计从未消亡,只是不断变换形态,深度融入大众生活的方方面面。
  1. 设计的本质是体验,不止于视觉
     
    很多人将设计简单等同于绘制界面、图标与配色,实则不然。地铁线路图清晰的指引、餐厅菜单合理的排版、App 人性化的消息通知…… 这些润物细无声的体验,都是设计价值的体现。设计早已渗透在生活细节之中。
  2. AI 越强,设计师的核心价值越凸显
     
    AI 能够快速生成设计初稿与方案,但无法定义创作方向、把控体验质感、传递情感温度。设计师的核心能力,是判断 “什么值得创造”“怎样的体验更舒适”,赋予产品人文关怀,这也是自动化工具难以替代的核心竞争力。
  3. 技术迭代恒在,核心能力不变
     
    从 Photoshop、模板网站、Sketch,再到如今的 Figma 与各类 AI 工具,每一次新技术诞生,都会引发 “设计师将被淘汰” 的质疑。但事实证明,迭代的永远是工具,设计师的审美能力、用户洞察力、问题解决能力与独立判断力,才是立足行业的根本。
附 Figma 官方文案节选:
 
无论多少次被宣告 “消亡”,设计始终生生不息。它藏在帮你避免坐过站的地铁图里,藏在一目了然的菜单里,也藏在贴心的 App 通知里。设计不是转瞬即逝的潮流,也不是可被替代的技术,它关乎体验、关乎感受,而非仅仅追求功能可用。设计屡遭唱衰,却一次次证明自身不可替代。
 
官方链接:https://x.com/figma/status/2061101954034442293

image.png

二、优质工具推荐(全品类实用工具,附直达链接)

1. 3D 转 ASCII 动画工具

可将任意 3D 模型一键转换为 ASCII 字符动画,风格复古趣味,非常适合用作官网动态插画。工具支持自定义配色、动画效果,同时兼容多种格式导出。
 
访问地址:https://bitmap-forge.vercel.app/

image.png

2. macOS 专用图像查看器

基于 SwiftUI 开发,专为鼠标操作优化的轻量图片查看工具。支持文件夹索引、侧边栏管理、图片缩放与浏览,鼠标、键盘操作逻辑流畅,是 Mac 用户的看图利器。

3. 在线像素编辑器

创意像素艺术工具,打破传统位图模式,像素即代码。支持像素绘画、动画制作,可直接导出可用代码,兼顾创作与开发需求。
 
访问地址:https://newt.sh/

image.png

4. 组件音效库

为网页 / UI 组件添加语义化音效反馈,仅需一行代码即可接入,适配 shadcn/ui 组件库。内含 17 种语义音效、24 类组件适配,让静态界面 “发声”,大幅提升交互体验。
 
访问地址:https://www.sensory-ui.com/#showcase

image.png

三、免费设计素材(可商用,直接下载使用)

1. Playwrite TZ 免费字体

image.png

字体风格与经典 Apple Hello 高度相似,字体美观灵动,完全免费可商用,适用于标题、海报、界面文字等多种场景。
 
字体下载:https://fonts.google.com/specimen/Playwrite+TZ

2. Gradientora 渐变素材库

image.png

收录 1100 + 款精品渐变配色,风格丰富多样,全部支持免费下载,满足海报、界面、插画等设计的色彩搭配需求。
 
素材地址:https://gradientora.com/

四、趣味插件 & 个性化资源

1. FigmaEX 吾皇巴扎黑皮肤

image.png

为 FigmaEX 客户端定制的 CSS 个性化皮肤,更换后可美化 Figma 界面,打造专属使用风格。

2. Chrome 视频控制插件

浏览器实用插件,支持视频倍速播放、画中画、页面关灯等功能,追剧、学习看教程都能提升体验。
 
插件地址:https://chromewebstore.google.com/detail/

3. Chrome 历史记录插件

复刻 Edge 浏览器快捷历史功能,可快速查看浏览记录与近期关闭页面,弥补原生 Chrome 功能短板,提升日常浏览效率。
 
插件地址:https://chromewebstore.google.com/detail/
 

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

 

image.png

设计的新趋势:用好有效摩擦,拒绝无效麻烦

清阳 行业趋势

导语

过去二十年,互联网设计的共识是极致去摩擦:缩短注册步骤、精简操作链路、抹平交互门槛,高效顺滑成为体验标配。但随着全行业体验同质化、用户划走即遗忘,Burberry 慢镜头广告、Apple Liquid Glass 拟物玻璃界面、CCD 胶片回潮等现象,正在推翻单一的效率逻辑:刻意设计的良性摩擦≠恶意制造使用麻烦。在 AI 批量产出标准化内容的当下,合理的摩擦是品牌打造记忆锚点、加深用户参与的关键抓手。

一、无摩擦从行业进步,沦为同质化枷锁

早年去摩擦设计切实解决商业痛点:电商优化支付路径降低下单流失、出行打通一键叫车闭环、软件简化学习成本,效率优化实实在在提升转化。

image.png

但当全产品模板趋同:统一卡片布局、同质化滑动交互、算法自动连播,极致顺滑催生三大问题:
  1. 用户流失无记忆:页面一键划过、用完即走,品牌无法在用户心智留存印记;
  2. 感官同质化贫瘠:界面去掉材质、纹理、层次,所有产品只剩扁平标准化外壳,丢失独特氛围感;
  3. 体验缺少实感:全程零等待、零操作、零选择,用户从 “主动使用产品” 沦为被动接收信息流。
设计学者 Luna Maurer 与 Roel Wouters 在《Designing Friction》提出:体验摩擦(Resistance)是人与物品间的触感、温度、行动参与阻力,不等于系统故障带来的额外负担,全盘消灭阻力,本质是抹杀用户真实参与的可能性 —— 人无法只依靠效率完成情感消费。

二、摩擦二分法:坏摩擦消耗耐心,好摩擦沉淀体验

image.png

所有额外耗时的操作分两类,核心判定标准:用户付出的时间,是否对应情绪、体验、拥有感回报

1. 负面坏摩擦(需彻底剔除)

image.png

源于产品设计疏漏、系统缺陷,用户被迫替产品漏洞买单,全程无任何收益:验证码反复失效、APP 跨端无序跳转、入口层级混乱、无理由超长排队、规则刻意晦涩难懂。
 
Maya Kronic 提出的jankspace精准概括这类痛点:产品对外宣传全链路无缝自动化,实际使用却要在账号、支付、文件、权限间反复跳转,消耗用户耐心却毫无体验增益,属于设计失误带来的无效负担。

2. 正向好摩擦(可主动设计)

通过仪式、探索、参与类步骤,把效率损耗转化成体验价值,用户清楚付出的目的:
  • 仪式摩擦:黑胶拆封上针、相机装胶卷、演出排队入场、新品拆盒;
  • 探索摩擦:线下逛街随手摸面料、货架偶遇算法未推荐的单品、钻研桌游规则;
消费心理学宜家效应佐证:用户亲手投入步骤完成事物后,会自发抬高产品价值;动手参与的沉没成本,最终转化为情感与记忆沉淀。
表格
 
 
 
摩擦分类 用户体感 典型场景 设计决策
坏摩擦 被迫填坑、烦躁流失 重复登录、错乱跳转、无效排队 全盘删除优化
交易必要摩擦 安全感确认 支付二次核验、隐私授权 精简话术、保留必要步骤
仪式型好摩擦 沉浸场景、充满期待 开箱、线下试穿、集章打卡 结构化设计,配套情绪回报
记忆型好摩擦 愿意投入时间、加深印象 长内容观看、线下展览动线、手作 DIY 设计体验峰值
核心结论:用户不排斥多走一步,只反感「不知道为什么多走一步」的无用折腾。

三、AI 时代,实体服务业靠 “人性化摩擦” 重回价值高地

AI 正在无限抹平标准化工作:文案、制图、方案规划均可一键生成,极致顺滑变成基础基建,不可标准化的人工细节、带微小阻力的人性化服务,成为稀缺竞争力
 
优秀服务从不盲目追求全程零沟通、高效率:
  1. 线下门店:店员观察顾客随身状态、天气、赶时间与否再上前推介,而非一进门强行推销;
  2. 生活服务:美容师记住顾客睡眠状况,按需减少推销、预留安静休憩时间;
  3. 社区小店:老板记住老客饮食习惯,随口一句 “照旧?”,无数据转化指标,却牢牢锁住复购。
体验经济理论《Welcome to the Experience Economy》早已点明:企业售卖的不止商品,更是一段专属经历;AI 全面自动化后,人的临场判断、即兴互动、留白停顿,恰恰是效率产品无法复刻的独特摩擦价值。

四、两大经典案例:一正一反看懂摩擦落地逻辑

image.png

正向案例:Apple Liquid Glass(界面设计)

从 iOS 扁平化极简,到 2025 WWDC 推出 Liquid Glass 动态玻璃界面,苹果重新把光影折射、材质形变、层级反馈带回交互:点击触发玻璃形变、环境光实时改变界面通透度,不堆砌冗余特效,用可控的物理触感摩擦,让用户清晰感知 “正在操控实体化界面”

image.png

区别于早年臃肿拟物化,新版玻璃设计遵循克制原则:仅在关键控件增加材质反馈,兼顾可读性与操作实感,印证:优质简洁不是全盘抹除触感,而是保留必要的交互阻力。

反面案例:Amazon Style(线下零售踩坑)

亚马逊试图用全数字化改造服装门店:顾客扫码选品、系统远程送衣进试衣间、全程线上结账,砍掉逛街摸面料、随性闲逛、店员穿搭建议、偶遇冷门好物的所有低效环节,把线下实体店做成高价版线上 APP。
 
最终 2023 年全线闭店。线下商业的核心刚需从不是 “最快买完衣服”,而是闲逛、试错、即兴决策带来的沉浸式体验;盲目消灭所有低效摩擦,等于剥夺用户到场的核心理由。

五、Z 世代反向选择:主动给自己增设有效阻力

image.png

当下年轻人主动逃离全自动化效率产品,复古消费持续升温:
  • 数码:CCD 胶片相机、功能笨手机、有线耳机回归,主动接受废片多、不能无限刷信息流的限制;
  • 文娱:黑胶、实体 CD 销量上涨(2024 上半年美国黑胶销售额同比 + 17%),愿意经历拆碟、上针、翻面的繁琐流程;
  • 生活:纸质手账、桌游、城市漫游走红,放弃智能提醒、一键开局的便利。
根源在于:算法产品过度顺滑、精准投喂,用户长期被动接收内容逐渐疲惫;可控的人为阻力,帮用户夺回生活自主权,Slow Technology(慢科技)理念同样佐证:产品除了高效完成任务,也可以为反思、停顿、长期陪伴设计合理阻力。

六、AI 泛滥环境:带人工痕迹的小摩擦,成为品牌差异化符号

image.png

海量 AI 量产内容千篇一律:文案、海报、短视频工整完美、无瑕疵无棱角,标准化顺滑内容不再稀缺,带手工痕迹的 “不完美摩擦” 成为辨识度来源,喜茶拙趣设计是绝佳落地样本:
 
手写不规则字体、涂鸦风围挡、保留错字手写修改痕迹、用户手绘 DIY 杯贴实体上墙。没有刻意拉长排队、增设操作步骤,仅通过保留人的手工瑕疵,跳出 AI 模板化设计,让用户直观感知:这份设计出自真人之手,而非流水线批量生成。
设计师隐喻「表情符号没有皱纹,但人有情绪」:全链路零瑕疵的产品没有记忆点,局部手工瑕疵、适度不规整、可控小阻力,恰恰是品牌跳出同质化的识别符号。

七、落地准则:品牌如何科学设计良性摩擦(避坑指南)

绝对避雷(禁止刻意制造坏摩擦)

不藏入口、不晦涩规则、不无故拉长排队、不用低可读性文案、不靠繁琐动效为难用户,良性摩擦是用户自愿参与的邀请,不是筛选用户的门槛

四大好摩擦设计原则

  1. 路径可预期:多一步操作,提前告知用户收益;
  2. 等待有回馈:短暂等候后,给到情绪惊喜、专属体验;
  3. 学习有价值:学习规则后,解锁专属玩法、深度体验;
  4. 操作有收获:触摸、筛选、比对的动作,转化为产品拥有感。

八、结语:顺滑负责成交,摩擦负责留下

极致顺滑帮品牌快速完成交易、高效流转用户;而经过设计的良性摩擦,拉长体验密度、沉淀用户记忆、塑造品牌独特气质。
 
未来产品与品牌的竞争,不再比拼谁能把流程压到最短:咖啡不必极速出餐、线下门店不用照搬 APP 逻辑、品牌广告不必 3 秒抓眼球、内容不必无脑一键划走。
 
效率是行业标配基建,质地、参与、投入、真实记忆才是新的稀缺资源;好设计既要让人高效通过,更要靠良性摩擦,让用户深度留下

优化亮点说明

  1. 结构优化:去掉原文零散碎片化批注、无关小红书杂图文字,9 大板块合并为逻辑递进 8 段,从概念→分类→案例→落地,阅读流畅度提升;
  2. 文字精简:剔除口语化冗余短句、重复观点,保留全部权威理论(宜家效应、慢科技、体验经济、Designing Friction)与原版案例;
  3. 落地强化:提炼落地表格 + 设计准则,方便产品 / 设计师直接复用;
  4. 细节规整:统一案例时间、数据标注,专业概念释义通俗化,兼顾专业性与可读性;
  5. 标题分层:大小标题层级清晰,适配公众号 / 行业专栏排版。

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

 

image.png

AI 正在淘汰的 10 种 UI 交互模式

清阳 行业趋势

AI 正在重构 UI 底层设计逻辑,表单填报、数据看板、筛选组件等依托用户手动操作诞生的经典交互范式迎来系统性迭代,大量沿用多年的产品界面从 “人机操作载体” 转向 “AI 结果校验载体”。当下产品与设计团队普遍面临隐性 UX 负债:大量仍可正常运行,但底层设计逻辑已经落后于 AI 技术发展的老旧交互模式。
过往数十年,仪表盘、录入表单、筛选侧边栏、配置向导、消息通知、FAQ 帮助页、新手引导等界面,设计出发点统一围绕:用户需要手动落地操作。设计师所有界面方案,均立足于 “人作为实际执行者” 这一核心前提。但生成式 AI、智能 Agent、多模态理解技术落地后,这套底层假设正在崩塌:AI 可自主完成绝大多数标准化操作,一大批传统 UI 失去原生存在价值。

image.png

本文拆解八大被 AI 重塑的经典交互形态,区分淘汰、改造、留存三类设计走向,总结 UI 从「人类执行界面」向「人类监督界面」的行业大迁移。

一、八大传统 UI 模式的迭代变革

1. 多步骤配置向导:分步弹窗引导→AI 智能预判 + 结果确认

image.png

传统配置向导通过拆分线性步骤、分步弹窗提问,引导用户完成系统配置,要求使用者读懂专业术语、跟随固定流程逐项设置。但 AI 可依托账号历史数据、操作场景、初始行为自动推演配置需求,层层问询反而变成使用阻碍。
 
改造逻辑:用户仅通过一句话自然语言表达需求,系统自动完成全流程配置搭建,用户角色从逐项填表的操作者,转变为结果审核人,只需修正 AI 生成内容的偏差。
 
落地案例:Shopify Sidekick 依托店铺经营数据,自动识别爆款商品,一键生成精选商品合集、配套折扣规则与营销活动,商家仅需核对方案、确认落地;反观 HubSpot 创建报价需 7 步手动填表选型,全流程重复录入系统已存信息,向导模式效率劣势凸显。
留存边界:极小众精细化定制场景,配置向导保留兜底入口,不作为主流操作路径。

2. 筛选侧边栏 + 关键词手动搜索:多条件手动勾选→自然语言意图检索,筛选退居微调辅助

image.png

传统搜索需要用户完成两次转化:把真实需求提炼关键词,再通过尺码、价格、分类等筛选控件拆分条件,关键词 + 复选筛选组合是过去精准检索的标配。自然语言语义检索成熟后,用户一句话即可锁定全部约束条件。
 
改造逻辑:产品以自然语言输入框作为搜索主入口,侧边筛选不再是核心检索工具,降级为结果微调组件;用户可通过多轮对话持续优化筛选范围。
 
落地案例
  1. KAYAK AI 模式:单句输入出行需求,系统自动解析日期、位置、预算等信息,直出机票、酒店结果,无需拆分表单填写;
  2. 招聘工具 Wrangle:HR 输入岗位经验、技能要求,AI 自动批量匹配候选人并生成匹配分数,摒弃多维度筛选面板。
     
    补充:筛选组件并未消亡,在用户漫无目的、随意浏览探索的场景(如鞋服商城闲逛),筛选用于可视化全品类商品,承担浏览发现作用,仅从核心功能变为辅助功能。

3. 手动录入表单:全字段人工填写→AI 自动提取 + 高置信预填,表单转为纠错面板

image.png

传统表单设计聚焦优化输入体验:调整字段排序、快捷键跳转、输入校验,默认所有信息由用户手动录入,即便附件已有完整数据,仍需二次手动誊写,造成冗余操作。文档 AI 可从图片、PDF、邮件、票据中结构化提取信息,从根源消除重复录入。
 
改造逻辑:上传原始凭证后,AI 自动填充表单字段,高置信数据静默回填、低识别度字段高亮标红,用户只修改异常内容,表单从录入载体变为数据核对视图。
 
落地案例:QuickBooks 报销系统迭代 Autofill 功能,上传发票图片 / 文件,系统秒级抓取收款方、金额、开票日期等信息,用户告别全字段手动填写。

4. 静态数据看板与预制报表:全指标平铺展示→异常优先预警 + 对话式数据下钻

image.png

传统数据看板、周期报表提前预设固定统计维度,铺满全量 KPI 指标,所有数据权重一致,需要使用者人工翻阅海量数据、自主查找业务异动,关键异常极易被海量数据淹没。AI 数据分析实现实时异动监测与归因,重构看板设计思路。
 
改造逻辑:看板不再罗列全部数据,优先高亮业务异常、增长机会,附带可一键执行的优化动作;深度数据探查改用自然语言提问,AI 自动拆解数据、定位问题、输出优化方案。
 
落地案例
  1. Shopify Pulse:自动分析店铺营收,提炼爆款促销、购物车挽回等运营建议,搭配一键创建活动按钮;
  2. Amplitude AI:输入 “优化定价页转化率”,系统自动定位无效点击、暴躁点击等转化卡点,同步输出三套落地优化方案。

5. CRUD 数据表格:单条逐单元格编辑→自然语言批量指令 + 变更差异审阅

image.png

传统增删改查表格基于单行单字段操作设计,批量修改大量数据时,用户需重复上百次点开、编辑、保存操作,用户宏观业务意图被切割为碎片化操作。
 
改造逻辑:用户用自然语言下达批量修改指令,AI 自动生成全量变更清单,页面展示修改前后数据差异,使用者批量确认或驳回个别修改项,表格从编辑工具转为变更预览视图。
 
落地案例:Airtable 智能字段助手,一句指令即可批量全网调研竞品营收与产品优势,自动整表填充新增字段,无需逐个单元格录入。

6. 静态 FAQ + 分层帮助文档 + 固定式新手引导:静态说明书→场景化实时 AI 答疑

image.png

过往产品依靠分步新手弹窗引导、层级式帮助文档、标准化 FAQ 解答问题,内容为通用模板,无法匹配用户当下页面、报错场景、操作链路,用户遇到个性化问题很难精准检索对应方案。
 
改造逻辑:帮助文档、FAQ 转为 AI 知识库底层素材,不再面向用户开放查阅;AI 实时识别用户所处页面、操作行为、报错信息,按需推送定制化解决方案,熟练度越高,引导提示越精简;复杂问题支持屏幕共享、语音对话多模态求助。
 
落地案例:Google AI Studio 搭载实时屏幕共享、语音咨询功能,AI 实时同步用户操作画面,针对性解决实操问题。

7. 时序信息流通知:全消息平铺推送→AI 智能分级摘要 + 重点事项定向提醒

image.png

传统通知系统按时间线平铺全量消息,点赞评论、系统故障、审批提醒权重一致,海量无效消息淹没关键告警,用户需要逐条浏览筛选重要信息。
 
改造逻辑:AI 充当信息分诊官,依据紧急度、业务关联度拆分消息:低优先级内容合并为定期摘要简报,高风险事件附带因果链路、业务影响、处理方案定向推送,通知中心进化为决策工作台。
 
落地案例:Datadog 监控告警摒弃零散条目推送,以「故障根源 - 服务异常 - 用户影响」链式结构展示事故,运维人员一键定位问题。

8. 空白页「新建」按钮:空白画布从零创作→AI 一键生成初稿,用户择优修改

“新建空白文档 / 项目” 按钮把用户置于零创作起点,空白界面极易带来创作焦虑。
 
改造逻辑:用户描述创作需求、约束条件,系统自动生成完整初稿,用户工作从从零原创变为内容微调、择优优化,创作界面完成从空白创建到内容迭代的转变。

二、推动 UI 变革的八大核心技术驱动力

  1. 执行全自动化:AI Agent 可闭环完成多步骤串联工作,依赖人工分步操作的界面失去刚需;
  2. 环境上下文理解:系统自动读取用户文档、历史行为、账号数据,无需页面反复采集已有信息;
  3. 自然语言意图解析:机器读懂口语化需求,无需用户把想法转化为下拉框、筛选条件等系统语言;
  4. 多模态输入融合:支持图文、语音、屏幕画面多维度交互,打破仅文字 + 表单的交互限制;
  5. AI 生成初稿能力:依托简短描述生成可用内容,消灭空白创建的使用痛点;
  6. 按需场景解释:精准捕捉用户困惑,即时推送对应指引,摒弃前置全量灌输的新手教程;
  7. 交互成本压缩:多步人工操作浓缩为单次指令,精简冗余页面流程;
  8. 信息智能分级:自动筛选信息优先级,告别全量信息无差别展示。

三、行业发展规律:新旧 UI 并非非此即彼,而是主次迁徙

传统交互不会瞬间彻底消亡,筛选栏、配置向导、空白新建按钮仍会长期保留:面向 AI 信任度不足的用户、小众边缘业务场景、无 AI 算力支撑的使用环境,老旧交互作为兜底备用方案。
 
长期演化趋势:传统执行型 UI 从产品核心主路径,逐步下沉为备选兜底功能;AI 驱动的决策监督型 UI 成为产品主流交互。

两类界面划分

  1. 执行导向 UI(持续萎缩):服务人工重复录入、分步配置、逐条修改等机械操作,AI 接管落地执行后,该类页面持续精简;
  2. 决策监督 UI(快速增长):用于审核 AI 输出结果、修正系统偏差、研判异常数据,是未来 UI 设计核心发力方向。

四、总结

AI 时代 UI 设计的核心变化:人类不再是系统操作工,变成 AI 成果的审核决策者。未来优质界面的设计目标,是放大人类的判断与决策价值,而非强迫用户复刻机器的运行逻辑。
 
转载:人人都是产品经理
 

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

 

image.png

作品总是没细节怎么办?这3招教你给设计增加形式感!

清阳 设计资源

一、异形容器

通过制造视觉元素的差异—— 让 “不一样” 的元素从周围环境中凸显出来,自然成为视觉焦点。

引导用户注意力优先落在关键信息或操作点上,这就是对比原则,我们可以通过形状的对比让卡片突出,增加视觉表现力:

image.png

在一些视觉页面中,也可以用异形容器增加视觉表现力,可以结合主题设计容器,例如下方就是一个以纸质火车票造型作为卡片背景的例子:

image.png

也可以结合内容设计容器,例如页面的内容是感谢用户,就可以从感谢信或者信纸的角度设计容器:

image.png

二、背景

在设计中,想要为卡片或页面增加形式感,丰富背景是直接且高效的方式,可以从颜色、底纹、装饰元素这三个核心维度展开,让背景不再单调,为整体设计加分:

1. 优化颜色增加背景的形式感

可将背景的无彩色(如黑白、灰度色)替换为带有明确色相的有彩色(如柔和的薄荷绿、清新的天蓝、低饱和的珊瑚橙等)

借助 “无彩色与有彩色” 的属性差异,让卡片与周围的浅灰背景或普通卡片形成直观色彩对比,快速从整体布局中跳脱出来:

image.png

也可以将卡片的单一纯色设计,升级为多种颜色的渐变效果 —— 通过这种渐变色,让卡片与周围的背景、其他组件形成鲜明对比

从而快速从整体布局中凸显出来,成为视觉焦点,快速抓住用户注意力:

image.png

2. 给背景增加底纹

在背景中增加底纹(如低透明度的几何纹理、轻微的肌理质感等),不仅可以强化视觉层次,还可以向用户传递页面的风格氛围,增强记忆点。

例如科技类产品用细线条网格底纹增强科技感,古风类产品可以用纸张等营造复古的氛围感:

image.png

image.png

image.png

下面列举了一些常见的底纹元素,可搭配图层的混合模式、不透明度使用:

image.png

3. 在背景上增加装饰

可以根据页面/活动添加合适的装饰元素,装饰可以是图形、文字等与页面相关的元素。

装饰元素主要是为了平衡界面视觉,优化整体协调性:当界面存在 “大面积空白” 或 “元素分布不均” 时,装饰元素可起到 “视觉平衡” 作用。

image.png

image.png

image.png

三、文字

这里的文字不仅是卡片标题,也可以是活动标题或者页签导航,那么文字的设计感可以怎么加呢?我们可以从图形装饰、线条装饰、文字装饰、背景装饰四个方面给文字添加设计感:

1. 图形装饰

将图形放在标题空白处增加标题的设计感:

image.png

也可以用来填补标题的空白区域,平衡视觉:

image.png

用图形代替文字的某一个笔画,传递产品的氛围:

image.png

2. 线条装饰

用简单的线条突出标题,辅助信息分层,突出重点信息,降低认知成本:

image.png

3. 文字装饰

用风格独特的字体写一句英文作为标题的装饰:

image.png

另一种方法是将文字放大起到装饰作用:

image.png

4. 背景装饰

在标题后面增加背景,不仅可以保证标题的可读性,还能让标题抓住用户的眼球,进一步强化视觉表现力:

image.png

总结

尽管上面的案例分别展示了不同的提升形式感的方法,但在实际设计中,不必局限于单一形式。

将多种手法灵活组合(比如为卡片搭配有彩色背景的同时,叠加轻量底纹并点缀细节装饰),更能放大视觉表现力,让界面摆脱单调感,呈现出更丰富的层次与质感。

如果这篇内容对你有启发,或是你有其他提升形式感的实用思路,欢迎在评论区分享交流,一起探索更多设计可能性~

转载:优设

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

 

image.png

一读就懂!B端响应式设计的新手扫盲

清阳 设计资源

兰亭妙微UI设计公司:最近重新更新一下 B 端响应式相关的内容,帮助已经初步掌握的同学重新巩固,还没学会的同学快速入门。

响应式的适配对象

响应式是一种网页前端技术,让网页可以根据分辨率、设备的变更,自动调整样式和布局。

image.png

它的诞生起源于移动互联网兴起的热潮,彼时智能手机访问网站的需求激增,但多数网站的适配都是面向电脑端的大屏幕,仅有少数网站会额外开发符合移动端显示需求的版本(自适应)。

响应式的提出,就是为了解决这种问题,通过建立一套约定好的设计、开发方法,用一套代码自动适配台式电脑、笔记本、平板、移动端等各种设备,提高网站的兼容性和开发效率。

而学习响应式,首先就要从浏览器开始说起。

浏览器是一个非常特殊的软件,比如大家熟知的 Chrome、Safari、Eage 等,我们日常访问的所有网页,都需要通过浏览器加载并渲染出最终的样式。

image.png

可以把网页 HTML 文件理解成是一个程序,而浏览器就是运行这个程序的系统(环境),也就是说解析网页依靠的是浏览器而不是 Windows、Mac、iOS、Android、Linux 等客户端系统。

浏览器即系统中的系统(类似虚拟机),不管在任何系统或设备上,只要安装了浏览器,就可以用大体相同的规则、逻辑去加载、渲染出网页。

image.png

但不同设备的屏幕有很大差异,网页如何识别并匹配这些设备呢?

方法主要有两种,第一种是浏览器会识别当前系统和设备,并提供接口让网页读取。而部分网站会准备多种规格的网页,根据获取的设备类型推送对应的规格,这种做法叫做自适应模式。

通常自适应只区分桌面端和移动端两种,较大的门户、购物、工具类网站,普遍使用自适应模式。因为移动端访问网页的需求并不高,所以会对移动端版本做大量的精简,降低开发、维护成本。

image.png

另一种方法,则是读取浏览器视图区域的分辨率。任何浏览器的界面,都包含功能区域和视图区域两个部分,功能区域提供相关的软件菜单、操作按钮,视图区域则是显示网页界面的区域。随着设备和屏幕分辨率的变化,浏览器的大小也会不同,网页视图区域也会跟着缩放。

image.png

网页视图注定小于整个浏览器的软件窗口,而浏览器作为软件,在系统中的尺寸不等于系统分辨率(或设备分辨率),一方面有系统的全局组件影响,另一方面窗口并不是非得全屏,用户可以任意调整。

image.png

所以响应式网页就是根据浏览器的视图区域做适配,不管你是在电脑上缩放软件窗口,还是在不同的设备、系统中打开,本质上都只是显示区域大小的变更。而在浏览器的检查选项中,模拟不同的设备其实就是缩放出一个指定的视图窗口出来。

image.png

这种依赖关系延伸出一个新的知识点,即网页显示的分辨率,和显示设备的屏幕分辨率,是两套不同的体系。

这是因为硬件分辨率和系统渲染的分辨率是两个概念,尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸笔记本,硬件分辨率是 3024 x 1964 (254 ppi),但在系统的屏幕分辨率选择中,默认的却是 1512*982(即原来的 1/2)。

image.png

这是因为硬件分辨率太高了,1:1 渲染的话,那么大多数图标、文字是无法被看清的,所以默认使用了 2x 的规格渲染。但这只是其中一个选项,在 HIDPI 技术的加持下,用户还可以选择别的分辨率,比如我会进一步调高到 1800*1169。

在 Windows 系统中同理,虽然有很多高分辨率的屏幕,但是用户为了看清内容,会在系统中设置 120%、150% 的放大效果,等于为系统分辨率做出变更。

image.png

说到底,系统显示分辨率的规格也是无穷无尽的。但是不管外部的转换逻辑有多复杂,规格有多少,都和响应式网页无关,它只需要认准浏览器的视图区域分辨率即可。

所以了解线上案例的响应式布局规则,或者检查已经开发好的响应式页面,并不需要切换不同设备查看,只要拖拽缩放浏览器的大小(主要是宽度)即可获得完整的响应效果。

 

image.png

image.png

 

最后总结起来,响应式网页是面向浏览器视图区域做适配的布局方法,而不是面向系统、屏幕分辨率的适配,这和自适应布局有本质的差异。

在 B 端领域,绝大多数项目都只部分兼容响应式,放弃移动端的适配,即使支持移动端也是使用自适应的混合模式。要面对这些复杂的场景,就月需要理解上面这些基础的概念,否则设计师就无法真正满足响应式项目的前期创建和后期交付需要。

转载:优设

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

 

image.png

日历

链接

个人资料

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

存档