用于概括单节点核心业务内容,建议控制在 10 字以内;若标题文字过长,横向布局极易挤压界面、破坏整体排版,需更换步骤条样式适配。
适配步骤数量:最优区间 4-8 步;3 步以内流程使用纵向布局会造成页面空间浪费。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

腾讯 CoDesign 诞生于2019年,最早以「设计云-工作台」的定位开始服务腾讯内部。在2020年从设计门户拆分为独立产品与品牌 CoDesign,并于同年开始对外服务。

在产品对外服务的过程中,产品一直在进行高速的产品能力与体验优化迭代,产品所服务的用户类型也在不断丰富。
今年,CoDesign 为满足更多类型用户的协作与体验诉求,在产品资产管理结构与权限、数字资产管理能力上进行了大幅度的升级;以及设计云产品生态的逐渐成熟与对生态品牌运营的规划,都对 CoDesign 的品牌与体验有着迫切的升级诉求。

今年上半年,CoDesign 的品牌与体验升级的设计工作几乎在同一时间启动,产品体验升级工作也面临着多个挑战。
在与项目组、品牌团队多次沟通后,我们决定通过以下策略解决产品体验升级所面临的挑战:
一、产品体验升级工作构成涉及到产品、交互、视觉、研发各个层面。首先,我们需要明确具体的体验优化项,并将其定位到具体层面,制定出体验优化的前置工作与规划。

二、结合新的产品升级方案,梳理经典页面结构。结合竞品分析,构建出具有差异化的体验基调。

三、最后,为了进一步加强产品体验与竞品的差异性,完善「推广视觉」到「产品视觉」的品牌体验闭环。我们将产品内触点进行进一步拆解,并在品牌声量象限中定位,结合设计核心(Design DNA)进行延展应用。

我们对当前版本进行全方位视觉及体验走查,并且整理用户反馈的缺陷问题,发现了 70 多个交互、视觉以及开发还原上的问题。总结归纳为框架扩展性不足,体验不统一,效率低,品牌感知弱。
首先在交互上,我们的交互同学对产品原则,全局定义,通用流程,页面框架,标准组件,文案规范进行进一步的定义和梳理,保证交互的规范性和一致性。
其次在视觉上,我们基于 1.0 的问题,在 2.0 上明确了形,色,构,质,大小,间距,组件等规范用法,并对其进行文档化。以便在后续工作中形成更加严谨的设计规范,来保证多人合作中大家从开始的思维一致到最后产出的一致。
再次在研发上,我们将基础组件和业务组件分开维护,基础组件代码我们从 Ten 切回 TDesign,极大地提升了组件的通用性和定制化,并参考 TDesign 的 Token 规则,定制 CoDesign 的基础组件样式。同时在业务组件上,我们将具有通用性组件进行抽离,(例如卡片组件)单独构建成为标准组件。保证研发异地合作组件样式的统一性,提高效率。

「 项目开始之初,不用急于陷入方案细节设计中,可以针对已知问题,拉通团队其他成员,对整体方案中各职能团队的前置工作进行初步规划,有助于后续工作中团队成员工作流的无缝衔接。」
2.1 结合产品方案,定义经典页面结构
梳理整站经典页面类型,结合产品新的界面框架方案,以一级功能模块举例:

定义一级功能模块,二级功能模块,各功能详情页,子模块表单页的页面结构。

2.2 国内外竞品分析,构建差异化页面结构
我们针对国内外优秀竞品进行研究分析,提取其中的共性特征,发现竞品常用的页面结构分别为:
从以上页面结构分析上,大致总结下构建差异化页面结构需要考虑的方向是:功能和内容的分割方式,内容区的展示方式。

那在整个体验升级,CoDesign 的所有工作都围绕着一个核心理念——「内容设计」。所谓内容设计,是我们希望用户在使用工作台时,不受其他因素的干扰,专注于内容本身。
所以在 CoDeisgn 的页面结构上,我们和市面上主流竞品做了差异化处理,新版本我们打破了传统内容分割的方式,在 Z 轴的空间上分出功能区域和内容区域,打通左侧导航和顶部操作栏的功能区域,将内容聚拢重点突出。去掉大量界面中的线与框,减少页面非必要元素露出,使其目光可以聚焦在内容本身,让整个页面层级清晰的同时带来简约的视觉感受。

「 不管是平面,左右还是上下结构,都没有绝对的好与坏,取决于我们希望用户的视觉落点和视觉动线在哪,例如在一个平面结构中,人们的视觉落点往往是最重的颜色或者最大的文字等,相对应你的视觉动线就在依次去找第二,第三「重」的内容,那当这个平面中增加了空间维度,依然是先看到最「重」的内容,只不过因为有了前后的关系,在视觉感官上你会区分前后内容的重量对比。
结合 CoDesign 首页页面结构设计最终效果图,你会发现首先视觉落点在前景白色内容区的内容卡片上,紧接着视觉动线来到后景用户高频操作的新建操作,最后是左侧导航栏的区域。」
我们将产品内触点进行进一步拆解,并在品牌声量象限中定位,结合品牌声量象限的设计要求以及设计核心(Design DNA)进行延展应用。


3.1 品牌色
基于品牌标志延展出基础的品牌色规则,并且为了兼顾多触点的应用,我们在品牌主色基础上降低了色彩的饱和度,延展出一系列辅助色,提供了较为丰富的色彩运用,同时为页面带来了更为轻盈,灵动的视觉感受。最后再根据品牌声量象限,指导不同品牌出点的颜色使用。

3.2 辅助图形
为了塑造统一的品牌语言,我们从品牌标志中提取基础辅助形,设计了一系列延展图形,打造多样化极具品牌调性和视觉表达。

3.3 品牌特征延展
通过品牌特征的运用,赋予图标、登录页、演示文件、空页面等应用场景更明确的品牌识别性,进一步强化统一品牌认知。


CoDesign 图标

CoDesign 登录页

CoDesign 演示文件封面

CoDesign 空状态

CoDesign 分享页&加载

CoDesign 核心界面效果展示
「 品牌视觉和产品视觉是相辅相成的,如何让用户有清晰的品牌感知,往往来源于一些细小的场景品牌运用,这也是视觉一致性的重要体现。」
4.1「一个」样式
我们在每一个组件的设计与规划中,都尽可能的照顾在多场景的兼容性。例如卡片组件的设计,1.0 的卡片设计,我们有着各种不同的样式,比例,间距等;新版设计中我们将内容卡片进行了结构化处理,采用了一样的视觉语言,框架,裁切方式,甚至开发逻辑,来增强视觉的统一性 ,减少维护成本的同时,兼容更多的场景。

4.2「一种」框架
设计开始规划时,我们就用一套颜色 Token 搭建起设计和开发之间界面样式的映射关系,为未来暗黑模式适配打下基础。

新版的页面结构设计,也为不同屏幕设备提供更好的兼容性。

4.3「一套」视觉语言
随着整个设计云生态的品牌形象的更新和统一,然而各个子产品内的视觉风格还是各异,那未来 CoDesign 会作为设计平台的连接器,我们也有意识的让新版的视觉风格延续到各大平台,来保持一致的视觉语言。那目前我们已经陆续让这套视觉风格延续到了设计云企业管理后台,OpenDesign,设计走查像素眼。

在视觉团队多人协作中,我们统一了协作环境,全文件的 Figma 化,并且将产品设计、运营设计组件化,方便团队成员使用更加灵活高效。

在视觉、研发多人协作中,设计与研发统一使用 TDesign 基础组件,保证基础组件一致性;业务组件在业务拓展过程中由业务开发独立建设并维护,在最后通过视觉样式 Token 化,建立设计和开发之间界面样式的映射关系。

以上内容是基于 CoDesign 体验升级应用过程中的一些关键策略及执行思路。
总体来说,我们在这个版本的设计上,除了不断解决产品的诉求和用户反馈的体验问题之外,还在努力提升设计(交互、视觉)及研发一致性,构建可辅助团队标准化的设计、研发的 Token 及组件库;打好底层基础框架,未来 CoDesign 会增加更多的功能,辐射更广业务。我希望这些基础面的建设,能带来整个平台一致性的用户体验。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

从微信启动页孤独的小人望地球,到网易云音乐热评区的深夜共鸣,情感化设计正在重新定义产品竞争力。唐纳德·诺曼提出的三层模型——本能层的视觉吸引、行为层的流畅体验、反思层的价值认同——为产品设计提供了系统方法论。当功能差异逐渐缩小,能走进用户心里的设计才能建立真正的忠诚度。兰亭妙微UI设计公司:深度拆解情感化设计的理论脉络与经典案例,揭示如何让冰冷的产品拥有温度。
在体验设计飞速发展的今天,“功能可用”已不再是产品的核心竞争力,用户对产品的需求早已超越了工具属性,转向了更深层次的情感诉求。
情感化设计作为连接产品与用户心灵的桥梁,打破了“设计即功能”的传统认知,将人的情感需求、心理感受融入设计的每一个细节,让冰冷的产品拥有温度,让交互过程充满愉悦,最终实现产品与用户的深度共鸣。

当我们打开手机,看到微信启动页中孤独的小人望着地球,心中会泛起一丝莫名的触动;
当我们使用网易云音乐,被“网抑云热评”戳中内心,会忍不住分享与共鸣;
当我们操作苹果手机,流畅的动画过渡、细腻的触感反馈,会让每一次交互都感到舒适与愉悦;
当我们走进重庆钟书阁,被镜子反射出的层层叠叠的空间所震撼,会自然而然地将书店与山城的地域特色深深绑定。
这些场景背后,都藏着同一个设计理念——情感化设计。

在过去几十年里,设计行业经历了从“功能导向”到“用户导向”,再到“情感导向”的三次重大变革。
早期的设计,核心是“能用”,设计师关注的是产品的功能实现、性能稳定,至于用户使用过程中的感受、情绪变化,往往被忽略。
随着科技的发展、物质的丰富,同类产品的功能差异逐渐缩小,用户在选择产品时,不再仅仅关注“能不能用”,更关注“用得爽不爽”“有没有共鸣”“能不能满足我的情感需求”。
情感化设计应运而生,它将“人”的核心地位进一步凸显,强调设计不仅要解决用户的实际问题,还要照顾用户的心理感受、情感诉求,让产品成为用户情感的载体、生活的伙伴,而不仅仅是工具。
在多年的实践中深刻体会到:
好的设计,不仅能解决问题,还能传递情感;
优秀的情感化设计,能够让产品在众多同类产品中脱颖而出,建立用户忠诚度,甚至成为一个时代的符号。
情感化设计并非凭空出现,它的产生有着深刻的社会背景、思想源头与理论基础,是设计行业发展的必然结果,也是人类对设计本质认知不断深化的体现。
从早期的设计思想萌芽,到心理学、社会学理论的支撑,再到唐纳德·诺曼正式提出“情感化设计”理论,最终在科技发展与用户需求升级的推动下走向成熟,情感化设计经历了一个漫长而曲折的发展历程。
情感化设计的核心思想——“设计要兼顾功能与情感”,其实早在远古时期就已经出现。
人类最早的设计活动,本质上是为了生存,比如制作石器、陶器、房屋等,核心需求是“实用”,但在满足实用需求的同时,人类也不自觉地融入了情感与审美诉求。

远古时期,原始人类制作的石器,除了追求锋利、耐用(功能需求),还会在石器表面雕刻简单的纹路、图案,这些纹路并非毫无意义,而是原始人类对自然的敬畏、对生活的向往的情感表达;新石器时代的彩陶,不仅造型规整、便于使用,还会绘制鱼纹、鸟纹、几何纹等图案,色彩鲜艳、线条流畅,既体现了当时的审美水平,也传递了原始人类的情感——比如鱼纹象征着丰收、繁衍,鸟纹象征着自由、吉祥。
这些设计,虽然没有明确的“情感化设计”概念,但已经具备了情感化设计的核心特质:功能与情感的结合,实用与审美的统一。
进入奴隶社会、封建社会,设计的情感表达更加鲜明,且逐渐与等级、文化、宗教绑定。
比如中国古代的宫殿建筑,故宫的红墙黄瓦、飞檐斗拱,不仅满足了居住、办公的功能需求,更通过色彩、造型传递了皇权的至高无上、威严庄重的情感;
古代的家具,比如明清时期的红木家具,造型简洁、工艺精湛,不仅耐用、舒适,还通过纹理、雕刻传递了文人雅士的淡泊名利、雅致内敛的情感;
西方中世纪的教堂建筑,哥特式教堂的高耸、尖峭,彩色玻璃的绚丽,营造出神秘、庄严、肃穆的氛围,传递了人们对宗教的虔诚、对神性的敬畏。
这一时期的情感化设计,有两个显著的特点:
一是情感表达具有鲜明的阶级性、文化性,不同阶层、不同文化背景的设计,情感传递的方向、内容截然不同;
二是情感设计的主体是“设计者”,设计师根据自己的情感、审美,结合当时的社会文化、等级制度,进行设计创作,用户的情感需求往往处于被动接受的地位,而非设计的核心导向。
工业革命之后,设计行业进入了“功能至上”的时代。
18世纪60年代,工业革命率先在英国爆发,机器生产取代了手工生产,产品的批量生产成为可能,设计的核心目标变成了“提高生产效率、降低生产成本、满足大众的基本功能需求”。
这一时期,设计师关注的是产品的结构、性能、实用性,而情感、审美往往被忽略,甚至被视为“多余的装饰”。比如,早期的工业产品,无论是蒸汽机、纺织机,还是日常使用的桌椅、灯具,都造型简陋、色彩单调,只追求耐用、好用,毫无情感可言。
这种“功能至上”的设计理念,虽然极大地提高了生产效率,降低了产品价格,满足了大众的基本生活需求,但也让产品变得冰冷、刻板,缺乏温度,用户在使用过程中,只能感受到功能的满足,无法获得任何情感上的愉悦与共鸣。
随着工业革命的深入,“功能至上”的设计理念逐渐暴露出弊端,越来越多的人开始意识到,设计不能只关注功能,还要关注情感、审美。
20世纪初,一些设计运动开始兴起,反对“功能至上”的刻板设计,倡导“功能与审美结合”,为情感化设计的萌芽奠定了基础。其中,最具代表性的是包豪斯运动。
1919年,包豪斯学院在德国成立,包豪斯的核心设计理念是“艺术与技术的统一”“设计为大众服务”,强调设计既要满足功能需求,也要注重审美体验,反对多余的装饰,追求简洁、实用、美观的设计风格。
包豪斯的设计师们认为,产品的设计不仅要解决“能用”的问题,还要让用户在使用过程中感受到舒适、愉悦,这种理念,正是情感化设计的重要思想源头。

比如,包豪斯设计师马塞尔·布鲁尔设计的瓦西里椅,采用钢管与皮革结合的材质,造型简洁、轻便、耐用,既满足了日常使用的功能需求,又通过流畅的线条、舒适的坐感,传递了简约、时尚、舒适的情感,成为现代家具设计的经典之作;
另一位包豪斯设计师威廉·华根菲尔德设计的台灯,造型简洁、线条流畅,灯光柔和,既实用又美观,让用户在使用过程中感受到温暖、舒适,打破了早期工业产品冰冷、刻板的形象。
除了包豪斯运动,20世纪中期的斯堪的纳维亚设计运动,也进一步推动了情感化设计思想的萌芽。
斯堪的纳维亚设计强调“以人为本”,注重产品的实用性、舒适性与审美性的结合,追求自然、简约、温馨的设计风格,注重细节处理,关注用户的使用感受与情感需求。
比如,芬兰设计师阿尔瓦·阿尔托设计的弯木家具,采用天然的木材,造型柔和、曲线流畅,坐感舒适,既体现了自然之美,又传递了温馨、亲切的情感,让用户在使用过程中感受到自然的温度与人文的关怀。
这一时期,情感化设计的思想虽然没有形成系统的理论,但已经逐渐被设计师们所认可,设计的核心开始从“功能”向“人”倾斜,设计师们开始关注用户的使用感受、情感需求,尝试将情感、审美融入设计的细节中,为后续情感化设计理论的形成奠定了坚实的实践基础。
20世纪中期以后,心理学、社会学、认知科学等学科的飞速发展,为情感化设计提供了坚实的理论支撑,让情感化设计从“经验型”的实践,逐渐走向“科学化”的研究。
其中,认知心理学、人本主义心理学、符号学的相关理论,对情感化设计的影响最为深远。
1.2.1 认知心理学:揭示情感与认知的关系

认知心理学是研究人类认知过程(如感知、记忆、思维、语言、决策等)的学科,它的出现,打破了传统行为主义心理学“只关注行为,忽略情感、认知”的局限,开始关注人类的内心活动,揭示了情感与认知之间的密切关系,为情感化设计提供了核心理论支撑。
认知心理学认为,人类的认知过程与情感过程是相互影响、相互作用的,情感不仅会影响人类的认知判断、决策行为,还会影响人类对事物的感知与记忆。
比如,当一个人处于愉悦的情绪中时,会更容易接受新事物、做出积极的决策,对产品的使用体验也会有更高的评价;当一个人处于烦躁、焦虑的情绪中时,会更容易产生负面情绪,对产品的微小缺陷也会更加敏感,甚至会放弃使用产品。

20世纪60年代,认知心理学家唐纳德·诺曼(Donald A. Norman)开始将认知心理学的理论应用于设计领域,研究人类的情感与产品设计之间的关系。
诺曼认为,产品的设计不仅要符合人类的认知规律,还要照顾人类的情感需求,因为情感是人类认知的重要组成部分,忽略情感的设计,无论功能多么完善,也无法获得用户的认可。
诺曼在研究中发现,人类对产品的情感反应,往往发生在认知之前,比如,我们看到一个产品,首先会被它的外观、色彩、造型所吸引(情感反应),然后才会去了解它的功能、使用方法(认知过程);如果一个产品的外观让人感到厌恶、不适,即使它的功能非常强大,用户也不会愿意去使用它。这种“情感优先于认知”的观点,成为情感化设计的核心理论之一。
此外,认知心理学中的“感知负荷理论”“情绪唤醒理论”也为情感化设计提供了重要的理论支撑。
感知负荷理论认为,人类的认知资源是有限的,如果产品的交互过程过于复杂、繁琐,会增加用户的感知负荷,让用户产生烦躁、焦虑的情绪,影响使用体验;而情感化设计,通过简化交互流程、优化视觉设计、增加情感反馈,能够降低用户的感知负荷,让用户在使用过程中感到轻松、愉悦。
情绪唤醒理论认为,适度的情绪唤醒能够提高人类的注意力、记忆力与工作效率,而过度的情绪唤醒(过于兴奋或过于压抑)则会降低人类的认知能力。
情感化设计的核心,就是通过设计手段,唤醒用户适度的积极情绪(如愉悦、舒适、安心),避免用户产生过度的负面情绪(如烦躁、焦虑、厌恶),从而提升用户的使用体验与产品认可度。
1.2.2 人本主义心理学:凸显“人”的核心地位
人本主义心理学是20世纪50年代兴起的心理学流派,其核心思想是“以人为本”,强调人的价值、人的尊严、人的情感需求与自我实现,反对将人视为“机器”或“刺激的被动接受者”,认为人是具有主观能动性、情感丰富的个体。

人本主义心理学的代表人物马斯洛,提出了著名的“需求层次理论”,将人类的需求分为五个层次:生理需求、安全需求、归属与爱的需求、尊重需求、自我实现需求。
其中,生理需求、安全需求是基础需求,主要与产品的功能、性能相关;而归属与爱的需求、尊重需求、自我实现需求,则是情感需求、精神需求,与产品的情感化设计密切相关。
马斯洛认为,当人类的基础需求(生理、安全)得到满足后,会逐渐追求更高层次的情感需求、精神需求。
这一理论,为情感化设计提供了重要的理论依据:随着科技的发展、物质的丰富,用户的基础需求(产品功能、性能)已经得到充分满足,此时,用户开始追求更高层次的情感需求——比如,通过使用产品获得归属感、被尊重感、自我实现感,这也是情感化设计能够兴起并快速发展的核心原因之一。
人本主义心理学强调,设计应该尊重人的情感、人的需求,关注人的内心感受,让产品成为满足人类情感需求、实现自我价值的载体。
比如:
一些社交产品,通过设计让用户能够快速找到志同道合的人,获得归属感;
一些健身产品,通过设计激励用户坚持锻炼,实现自我提升,获得成就感;
一些奢侈品,通过设计传递高端、尊贵的情感,满足用户的尊重需求。
人本主义心理学的思想,进一步凸显了“人”在设计中的核心地位,推动了设计行业从“功能导向”向“情感导向”的转型,让情感化设计的理念更加深入人心。
1.2.3 符号学:赋予产品情感意义
符号学是研究符号、符号系统及其意义的学科,它认为,人类的一切行为、一切创造,本质上都是符号的表达,产品也是一种符号,不仅具有实用功能,还具有情感意义、文化意义。
符号学将产品分为“功能符号”与“情感符号”:
功能符号是产品的实用功能的体现,比如手机的通话功能、电脑的办公功能、椅子的坐卧功能;
情感符号是产品所传递的情感、意义、文化,比如产品的外观、色彩、造型、品牌标识等,都属于情感符号,能够传递不同的情感信息。
比如:
符号学的理论,为情感化设计提供了重要的实现方法:设计师可以通过设计产品的情感符号(外观、色彩、造型、品牌标识等),赋予产品特定的情感意义、文化内涵,让用户在使用产品的过程中,通过解读这些情感符号,获得情感上的共鸣与满足。

比如,苹果公司的logo,是一个被咬了一口的苹果,这个简单的符号,不仅具有很高的辨识度(功能符号),还传递了“创新、叛逆、打破常规”的情感意义(情感符号),让用户在看到这个logo时,就能联想到苹果产品的创新精神,产生情感共鸣;
可口可乐的红色logo、流线型字体,传递了“热情、快乐、分享”的情感意义,成为可口可乐品牌的核心情感符号,陪伴了一代又一代用户的成长。
20世纪末,随着认知心理学、人本主义心理学、符号学等学科的不断发展,以及设计实践的不断积累,情感化设计终于形成了系统的理论体系,其中,唐纳德·诺曼在1999年出版的《情感化设计》(Emotional Design)一书,正式提出了“情感化设计”的概念与核心理论,标志着情感化设计作为一门独立的设计学科,正式诞生。
1.3.1 唐纳德·诺曼与《情感化设计》:情感化设计的里程碑
唐纳德·诺曼,美国认知心理学家、工业设计家,认知科学学会的发起人之一,被誉为“情感化设计之父”。
诺曼早年从事认知心理学的研究,后来将认知心理学的理论应用于产品设计、用户体验设计领域,提出了许多影响深远的设计理论,其中,《情感化设计》一书,是他最具代表性的著作,也是情感化设计领域的里程碑式作品。
在《情感化设计》一书中,诺曼正式提出了“情感化设计”的概念:情感化设计,是指将人类的情感需求融入产品设计的每一个环节,通过设计让产品能够引发用户的积极情感,降低用户的负面情感,从而提升用户的使用体验与产品认可度。
诺曼认为,情感不是设计的附加品,而是设计的核心,好的设计,必须兼顾功能与情感,既要解决用户的实际问题,也要照顾用户的心理感受。

诺曼在书中明确指出,过去的设计,过于关注产品的功能、性能,忽略了用户的情感需求,导致很多产品“能用但不好用”“好用但不喜欢”。
他认为,产品的设计,应该从“人”的角度出发,关注用户的情感、心理、行为习惯,让产品成为用户情感的载体,而不仅仅是工具。
此外,诺曼在书中提出了情感化设计的“三层模型”,这也是情感化设计最核心、最具影响力的理论,为情感化设计的实践提供了明确的指导方向。
情感化设计的三层模型,将设计分为三个层次:本能层设计(Visceral Design)、行为层设计(Behavioral Design)、反思层设计(Reflective Design),三个层次相互关联、相互影响,共同构成了情感化设计的完整体系。

1. 本能层设计:关注产品的外观、色彩、造型、材质等视觉与触觉体验,是用户对产品的第一印象,也是情感反应的起点。
本能层设计的核心,是“好看、好摸、有吸引力”,通过视觉、触觉等感官刺激,引发用户的本能反应,比如愉悦、喜欢、好奇等积极情感。
本能层的设计,往往是无意识的,用户在看到产品的第一眼,就会产生相应的情感反应,这种情感反应,会直接影响用户对产品的后续认知与使用意愿。
比如,一款手机的外观设计简洁、流畅,色彩柔和,材质细腻,用户在看到它的第一眼,就会产生喜欢、愉悦的情感,从而更愿意去了解它的功能、使用它;反之,如果一款手机的外观设计丑陋、粗糙,色彩刺眼,用户在看到它的第一眼,就会产生厌恶、不适的情感,即使它的功能非常强大,也很难吸引用户。
2. 行为层设计:关注产品的功能、可用性、易用性、交互流程等,是用户在使用产品过程中的体验。
行为层设计的核心,是“好用、高效、流畅”,通过优化产品的功能、简化交互流程、提供及时的反馈,让用户在使用产品的过程中感到轻松、愉悦、高效,避免产生烦躁、焦虑等负面情感。
行为层的设计,与用户的行为习惯、认知规律密切相关,设计师需要深入了解用户的使用场景、行为逻辑,设计出符合用户习惯的交互方式,让用户能够快速上手、高效使用产品。
比如,一款APP的交互流程简洁、清晰,按钮布局合理,操作反馈及时,用户在使用过程中能够快速找到自己需要的功能,完成相应的操作,从而感到轻松、愉悦;反之,如果一款APP的交互流程复杂、繁琐,按钮布局混乱,操作反馈延迟,用户在使用过程中会感到烦躁、焦虑,甚至会放弃使用。
3. 反思层设计:关注产品的意义、价值、文化内涵,是用户在使用产品后产生的情感共鸣与心理认同。
反思层设计的核心,是“有意义、有共鸣、有价值”,通过赋予产品特定的意义、文化内涵,让用户在使用产品的过程中,能够感受到产品所传递的情感、价值观,从而产生情感共鸣与心理认同,甚至将产品视为自己的身份象征、生活伙伴。
反思层的设计,是情感化设计的最高层次,也是最能建立用户忠诚度的层次,它能够让产品超越工具属性,成为用户情感的载体。
比如,网易云音乐的“热评文化”,通过用户的真实评论,传递了不同的情感、故事,让用户在使用产品的过程中,能够找到共鸣,感受到“有人懂我”的温暖,从而对网易云音乐产生强烈的心理认同与忠诚度;
比如,故宫文创产品,将故宫的传统文化、历史元素融入产品设计中,赋予产品深厚的文化内涵,让用户在使用产品的过程中,能够感受到传统文化的魅力,产生文化自信与情感共鸣。
诺曼强调,情感化设计的三个层次,并不是相互独立的,而是相互关联、相互影响的。
一款优秀的情感化产品,必须兼顾三个层次的设计,缺一不可。
比如,苹果手机,本能层设计简洁、美观,色彩柔和,材质细腻,能够吸引用户的注意力;行为层设计流畅、易用,交互反馈及时,能够让用户获得良好的使用体验;反思层设计传递了“创新、简约、高品质”的价值观,让用户在使用产品的过程中,能够感受到苹果产品的价值,产生心理认同与忠诚度,从而成为苹果手机的忠实用户。
《情感化设计》一书的出版,彻底改变了设计行业的认知,让情感化设计的理念迅速在全球范围内传播开来,越来越多的设计师、产品研发者开始关注情感化设计,将情感化设计的理论应用于实践中,推动了情感化设计的快速发展。
1.3.2 情感化设计的发展与普及(21世纪至今)
进入21世纪,随着科技的飞速发展(尤其是互联网、移动互联网、人工智能的发展)、用户需求的不断升级,情感化设计迎来了快速发展的黄金时期,逐渐从理论走向实践,从小众走向大众,成为体验设计、产品研发的核心理念之一。
21世纪初,互联网的兴起,让产品的形态发生了巨大的变化,从传统的实体产品,逐渐延伸到互联网产品(如网站、APP、软件等),情感化设计的应用场景也逐渐丰富。
互联网产品的核心是用户体验,而情感化设计,正是提升用户体验的关键手段。
比如,早期的门户网站,设计简洁、清晰,通过优化视觉设计、简化操作流程,让用户能够快速找到自己需要的信息,获得良好的使用体验;早期的社交软件,如QQ,通过设计可爱的头像、表情、昵称,让用户能够表达自己的情感,获得归属感与愉悦感。
2010年以后,移动互联网的爆发,进一步推动了情感化设计的普及与发展。
智能手机的普及,让APP成为用户日常生活中不可或缺的一部分,同类APP的竞争日益激烈,功能差异逐渐缩小,情感化设计成为APP脱颖而出的关键。
比如:
与此同时,人工智能、大数据等技术的发展,为情感化设计提供了更加强大的技术支撑,让情感化设计更加精准、更加个性化。
比如:
通过大数据分析用户的行为习惯、情感偏好,设计师可以为不同的用户提供个性化的情感化设计,让产品能够更好地满足用户的个性化情感需求;
通过人工智能技术,产品可以实现情感识别、情感反馈,比如,智能音箱可以识别用户的情绪变化,根据用户的情绪播放相应的音乐、传递相应的安慰话语;智能客服可以识别用户的负面情绪,提供更加耐心、贴心的服务,缓解用户的烦躁、焦虑。
除了互联网产品,实体产品、空间设计、服务设计等领域,情感化设计的应用也越来越广泛。
此外,随着设计行业的不断发展,情感化设计的理念也逐渐被全球范围内的设计师、企业所认可,越来越多的设计奖项(如红点设计奖、IF设计奖、IDEA设计奖等),将情感化设计作为重要的评选标准,鼓励设计师进行情感化设计创作;越来越多的高校,开设了情感化设计相关的课程,培养情感化设计领域的专业人才,推动情感化设计的不断发展与创新。
情感化设计的兴起与发展,并不是偶然的,而是多种因素共同作用的结果,其核心原因主要包括以下几个方面:
1.4.1 用户需求的升级:从功能满足到情感追求
随着科技的发展、物质的丰富,用户的需求已经发生了根本性的变化,从早期的“功能满足”,逐渐升级为“情感追求”。
在过去,物质匮乏,用户选择产品的核心标准是“能用”,只要产品能够满足基本的功能需求,就能够被用户接受;而现在,物质丰富,同类产品的功能差异逐渐缩小,用户在选择产品时,不再仅仅关注“能不能用”,更关注“用得爽不爽”“有没有共鸣”“能不能满足我的情感需求”。
比如,在手机市场,早期的手机,只要能够通话、发短信,就能够满足用户的需求;而现在,手机的功能已经非常完善,通话、发短信、上网、拍照、娱乐等功能,几乎所有手机都具备,用户在选择手机时,会更加关注手机的外观设计、交互体验、情感传递,比如,有些用户喜欢苹果手机的简约、高端,有些用户喜欢华为手机的科技、爱国情怀,有些用户喜欢小米手机的性价比、年轻化,这些都是用户情感需求的体现。
用户需求的升级,是情感化设计兴起的核心动力,它推动了设计行业从“功能导向”向“情感导向”的转型,让情感化设计成为产品研发的核心理念之一。
1.4.2 科技的发展:为情感化设计提供技术支撑
科技的飞速发展,尤其是互联网、移动互联网、人工智能、大数据等技术的发展,为情感化设计提供了强大的技术支撑,让情感化设计的实现变得更加容易、更加精准。
在互联网、移动互联网出现之前,实体产品的情感化设计,主要依赖于外观、色彩、造型等视觉与触觉元素,受技术限制,情感化设计的表达形式比较单一,无法实现个性化、精准化的情感传递;而互联网、移动互联网的出现,让产品的情感化设计有了更多的表达形式,比如,交互反馈、动画效果、内容设计、社交互动等,能够更好地传递情感,引发用户共鸣。
人工智能、大数据技术的发展,进一步提升了情感化设计的精准度与个性化水平。
通过大数据分析用户的行为习惯、情感偏好、使用场景,设计师可以深入了解用户的情感需求,为不同的用户提供个性化的情感化设计;通过人工智能技术,产品可以实现情感识别、情感反馈,能够根据用户的情绪变化,调整产品的交互方式、内容呈现,提供更加贴心、精准的服务,让用户感受到“被理解、被重视”。
1.4.3 市场竞争的加剧:情感化成为产品差异化竞争的关键
随着市场竞争的日益加剧,同类产品的功能、性能、价格差异逐渐缩小,产品的差异化竞争,逐渐从“功能差异化”转向“情感差异化”。
在激烈的市场竞争中,只有那些能够满足用户情感需求、与用户产生深度共鸣的产品,才能够脱颖而出,建立用户忠诚度,占据市场优势。
比如,在饮料市场,可口可乐与百事可乐的功能差异非常小,都是碳酸饮料,能够解渴、提神,但两者的情感化设计差异非常明显:可口可乐传递“热情、快乐、分享”的情感,主打经典、怀旧;百事可乐传递“年轻、时尚、活力”的情感,主打年轻群体。
正是这种情感化的差异化设计,让两者在激烈的市场竞争中,都占据了重要的市场份额,拥有大量的忠实用户。又如,在互联网音乐市场,网易云音乐、QQ音乐、酷狗音乐的功能差异也非常小,都能够播放音乐、下载音乐、推荐音乐,但网易云音乐通过“热评文化”“私人FM”“每日推荐”等情感化设计,传递“陪伴、理解、共鸣”的情感,与用户产生深度共鸣,从而在激烈的市场竞争中,脱颖而出,成为很多年轻用户的首选音乐APP。
1.4.4 设计理念的进化:从“物为本”到“人为本”
设计理念的不断进化,也是情感化设计兴起的重要原因之一。
早期的设计理念,是“物为本”,设计师关注的是产品的功能、性能、外观,忽略了“人”的需求,将产品视为“独立于人的工具”;而随着设计行业的不断发展,设计理念逐渐进化为“人为本”,设计师关注的是“人”的需求、“人”的感受,将“人”作为设计的核心,认为产品是“为人服务的”,是“人与世界连接的桥梁”。
“人为本”的设计理念,强调设计要尊重人、理解人、关爱人,要兼顾人的功能需求与情感需求,要让产品成为用户情感的载体、生活的伙伴。
这种设计理念的进化,推动了情感化设计的兴起与发展,让情感化设计成为“人为本”设计理念的核心体现。
情感化设计的价值,最终要通过实践来体现。
在多年的设计实践中,国内外众多企业、设计师,将情感化设计的理论(本能层、行为层、反思层)融入产品、空间、服务的每一个细节,打造了众多经典的情感化设计案例,这些案例覆盖了互联网产品、实体产品、空间设计、服务设计等多个领域,不仅为用户带来了良好的体验,也为企业带来了巨大的商业价值,同时也为后续的情感化设计实践提供了宝贵的参考。
本部分将围绕情感化设计的“三层模型”,拆解不同领域的经典案例,深入分析每个案例的情感化设计逻辑、实现方法、落地效果,让读者直观感受情感化设计的魅力与价值,掌握情感化设计的实践技巧。
互联网产品(APP、网站、软件等)是情感化设计应用最广泛、最成熟的领域,因为互联网产品的核心是用户体验,而情感化设计正是提升用户体验的关键手段。
互联网产品的情感化设计,主要体现在本能层(视觉设计、动画效果)、行为层(交互流程、功能设计、反馈设计)、反思层(内容设计、社交互动、品牌传递)三个方面,三者相互结合,打造出有温度、有情感、有共鸣的产品体验。
2.1.1 案例一:微信——国民级APP的情感化设计精髓

微信,作为中国国民级的社交APP,拥有超过10亿的用户,其成功不仅在于强大的功能(社交、支付、办公、娱乐等),更在于其细腻、贴心的情感化设计,微信的每一个细节,都融入了情感化元素,让用户在使用过程中感受到温暖、亲切、舒适,从而建立了强烈的用户忠诚度。
1. 本能层设计:简约、干净、亲切,打造舒适的视觉体验
微信的本能层设计,遵循“简约、干净、亲切”的原则,视觉设计简洁大方,色彩柔和,造型简约,让用户在看到微信的第一眼,就能够产生舒适、愉悦的情感。
首先,在色彩设计上,微信的主色调是绿色,绿色象征着自然、健康、和谐、亲切,能够缓解用户的视觉疲劳,传递温暖、舒适的情感,与微信“连接人与人、连接生活”的核心定位相契合;微信的界面背景,采用白色作为主背景,简洁干净,没有多余的装饰,让用户的视觉注意力能够集中在核心内容上,降低视觉负荷。
其次,在图标设计上,微信的图标设计简约大方,造型圆润,没有锋利的棱角,传递亲切、温和的情感。
比如,微信的启动图标,是一个绿色的对话气泡,气泡内有两个白色的小人,象征着“人与人的对话、人与人的连接”,简洁明了,又充满情感;微信内部的功能图标(如微信、通讯录、发现、我),设计简约,造型统一,色彩协调,让用户能够快速识别,同时也能够感受到视觉上的舒适。
再次,在动画设计上,微信的动画效果细腻、流畅,没有夸张的特效,却能够传递出亲切、自然的情感。
比如,微信的启动动画,是一个孤独的小人,望着蓝色的地球,这个动画虽然简单,却传递出“连接、陪伴”的情感——无论你身在何方,微信都能够让你与远方的亲人、朋友保持连接,不再孤独;
微信的消息提示动画,是一个简单的震动+气泡弹出,细腻柔和,既能够提醒用户有新消息,又不会打扰到用户,传递贴心的情感;微信的转账、红包动画,采用红色作为主色调,搭配简单的动画效果,传递喜庆、快乐的情感,契合中国人的情感习惯。
2. 行为层设计:流畅、易用、贴心,打造高效的交互体验
微信的行为层设计,遵循“流畅、易用、贴心”的原则,优化交互流程,简化操作步骤,提供及时的反馈,让用户在使用微信的过程中,能够快速上手、高效操作,感受到轻松、愉悦,避免产生烦躁、焦虑等负面情感。
首先,在交互流程设计上,微信的交互流程简洁清晰,没有复杂的操作步骤,用户能够快速找到自己需要的功能,完成相应的操作。
比如,发送消息的流程,只需点击联系人、输入文字、点击发送,三步即可完成,简单易用;转账、发红包的流程,也非常简洁,只需点击相应的功能、输入金额、确认发送,即可完成,让用户能够快速完成操作,节省时间。
其次,在功能设计上,微信的功能设计非常贴心,能够精准捕捉用户的使用场景与情感需求,解决用户的实际问题,同时传递温暖的情感。
比如:
微信的“语音消息”功能,允许用户发送语音,无需打字,既方便了那些不擅长打字、或者不方便打字的用户(如老人、开车的用户),又能够让用户感受到“面对面交流”的温暖,传递陪伴的情感;
微信的“视频通话”功能,支持实时视频,让用户能够与远方的亲人、朋友“见面”,缓解思念之情,传递连接的情感;
微信的“收藏”功能,允许用户收藏自己喜欢的文章、图片、视频、语音等,方便后续查看,传递“贴心、实用”的情感;微信的“免打扰”功能,允许用户设置免打扰时段,避免被消息打扰,尊重用户的个人空间,传递尊重的情感。
再次,在反馈设计上,微信的反馈设计及时、细腻,能够让用户清晰地知道自己的操作是否成功,传递安心的情感。比如,发送消息后,会显示“发送成功”的提示,同时消息气泡会变成灰色,让用户知道消息已经发送成功;
转账、发红包后,会显示“转账成功”“红包已发出”的提示,同时会有相应的动画反馈,让用户知道操作已经完成;
如果操作失败(如网络异常、金额错误),会显示清晰的错误提示,同时给出相应的解决方法,缓解用户的烦躁情绪,传递贴心的情感。
3. 反思层设计:连接、陪伴、共鸣,打造深度的情感认同
微信的反思层设计,核心是“连接、陪伴、共鸣”,通过赋予微信特定的意义、文化内涵,让用户在使用微信的过程中,能够感受到微信所传递的情感、价值观,从而产生深度的情感共鸣与心理认同,将微信视为自己生活中不可或缺的一部分。
首先,在社交互动设计上,微信通过多种方式,促进人与人之间的连接,传递陪伴、温暖的情感,让用户获得归属感。
比如,微信的“朋友圈”功能,允许用户分享自己的生活、心情、感悟,同时也能够查看好友的动态,点赞、评论,促进好友之间的互动与交流,让用户感受到“被关注、被重视”;
微信的“群聊”功能,允许用户创建群聊,邀请好友加入,方便好友之间的集体交流,传递“团圆、陪伴”的情感,比如,家庭群、同学群、同事群,让用户能够与自己关心的人保持紧密的联系,获得归属感;
微信的“拜年红包”“节日祝福”功能,契合中国人的节日情感习惯,让用户在节日期间,能够向亲人、朋友传递祝福,增进感情,传递温暖、喜庆的情感。
其次,在内容设计上,微信通过“公众号”“视频号”“小程序”等功能,为用户提供丰富、有价值的内容,同时传递积极、正向的价值观,让用户在使用微信的过程中,能够获得情感共鸣与精神满足。
比如:
再次,在品牌传递上,微信的品牌定位是“连接人与人,连接人与生活”,通过多年的情感化设计与品牌传播,微信已经成为“连接”“陪伴”的象征,让用户在使用微信的过程中,能够感受到微信所传递的“温暖、连接、包容”的价值观,从而产生深度的品牌认同。
比如:
微信的广告语“微信,是一个生活方式”,传递了微信与用户生活的深度融合,让用户意识到,微信不仅仅是一个社交工具,更是自己生活的一部分,是陪伴自己的伙伴;
微信的公益活动(如微信公益、腾讯公益),传递了社会责任与爱心,让用户在使用微信的过程中,能够感受到自己的价值,产生自豪感与认同感。
案例总结
微信的情感化设计,是本能层、行为层、反思层三者完美结合的典范。
微信的成功,证明了情感化设计的价值——好的情感化设计,能够让产品超越工具属性,成为用户生活的伙伴,建立强大的用户忠诚度,实现商业价值与情感价值的双赢。
2.1.2 案例二:网易云音乐——以情感共鸣打造差异化竞争优势
网易云音乐,作为国内最具代表性的音乐APP之一,在激烈的市场竞争中,脱颖而出,拥有大量的忠实用户,其核心竞争力,并不是强大的曲库(与QQ音乐、酷狗音乐相比,曲库并没有绝对优势),而是其独特的情感化设计——网易云音乐以“情感”为核心,打造了“陪伴、理解、共鸣”的产品氛围,让用户在使用音乐的过程中,能够找到情感的慰藉,产生深度的情感共鸣,从而建立了强烈的用户忠诚度。
1. 本能层设计:文艺、简约、有质感,打造沉浸式的视觉体验网易云音乐的本能层设计,遵循“文艺、简约、有质感”的原则,视觉设计充满文艺气息,色彩柔和,造型简约,能够让用户在使用过程中,感受到舒适、放松,快速进入音乐的氛围中。
首先,在色彩设计上,网易云音乐的主色调是红色,红色象征着热情、温暖、情感,与网易云音乐“情感共鸣”的核心定位相契合;网易云音乐的界面背景,采用深色作为主背景(夜间模式)或浅色作为主背景(日间模式),深色背景能够营造沉浸式的音乐氛围,让用户的注意力集中在音乐上,浅色背景则简洁干净,缓解视觉疲劳;界面中的文字、图标,色彩协调,对比清晰,既保证了视觉的美观,又保证了可读性。
在图标设计上,网易云音乐的图标设计简约、有质感,充满文艺气息。比如,网易云音乐的启动图标,是一个红色的唱片,唱片上有白色的音符,象征着音乐、情感,简约而有质感,能够快速传递产品的核心定位;网易云音乐内部的功能图标(如发现、我的、云村、视频),设计简约,造型统一,色彩协调,充满文艺气息,让用户能够快速识别,同时也能够感受到视觉上的舒适。
在动画设计上,网易云音乐的动画效果细腻、流畅,充满情感,能够增强产品的沉浸感与情感传递。
比如,网易云音乐的播放界面,唱片会随着音乐的播放而旋转,旋转的速度与音乐的节奏相契合,让用户能够直观地感受到音乐的韵律,增强沉浸感;
网易云音乐的切换歌曲动画,简洁流畅,没有多余的特效,却能够传递出自然、舒适的情感;
网易云音乐的“心动模式”动画,采用红色的爱心作为核心元素,搭配细腻的动画效果,传递温暖、浪漫的情感,契合用户的情感需求。
2. 行为层设计:流畅、易用、贴心,打造个性化的音乐体验
网易云音乐的行为层设计,遵循“流畅、易用、贴心”的原则,优化交互流程,简化操作步骤,提供个性化的功能与反馈,让用户在使用音乐的过程中,能够快速上手、高效操作,获得个性化、舒适的音乐体验。
首先,在交互流程设计上,网易云音乐的交互流程简洁清晰,没有复杂的操作步骤,用户能够快速找到自己需要的功能,完成相应的操作。比如,搜索歌曲的流程,只需点击搜索框、输入歌曲名称、点击搜索,三步即可完成,简单易用;播放歌曲的流程,只需点击歌曲名称,即可开始播放,同时,播放界面的操作按钮(暂停、播放、上一首、下一首、音量调节)布局合理,操作便捷,让用户能够快速调整播放状态。
在功能设计上,网易云音乐的功能设计非常贴心,能够精准捕捉用户的音乐需求与情感需求,提供个性化的音乐服务,传递温暖、贴心的情感。
比如,网易云音乐的“每日推荐”功能,通过大数据分析用户的听歌习惯、情感偏好,为用户推荐符合自己口味的歌曲,每天推荐的歌曲都不一样,让用户感受到“被理解、被重视”,传递陪伴的情感;
网易云音乐的“私人FM”功能,根据用户的听歌习惯,自动播放歌曲,无需用户手动操作,让用户能够轻松享受音乐,缓解疲劳,传递贴心的情感;
网易云音乐的“心动模式”功能,能够根据用户喜欢的歌曲,推荐相似风格的歌曲,同时,点击爱心按钮,即可收藏歌曲,传递浪漫、温暖的情感;
网易云音乐的“歌词翻译”“歌词滚动”功能,让用户能够更好地理解歌曲的含义,享受音乐的魅力,传递贴心的情感。
在反馈设计上,网易云音乐的反馈设计及时、细腻,充满情感,能够让用户清晰地知道自己的操作是否成功,同时感受到温暖、贴心的情感。
比如,收藏歌曲后,会显示“已收藏”的提示,同时爱心图标会变成红色,让用户知道歌曲已经收藏成功;下载歌曲后,会显示“下载成功”的提示,让用户知道歌曲已经下载完成;
如果操作失败(如网络异常、歌曲无法播放),会显示清晰的错误提示,同时给出相应的解决方法,缓解用户的烦躁情绪,传递贴心的情感;
此外,网易云音乐的播放反馈,会根据音乐的节奏,显示相应的歌词滚动与唱片旋转,让用户能够直观地感受到音乐的韵律,增强沉浸感与情感体验。
3. 反思层设计:共鸣、陪伴、认同,打造有温度的音乐社区
网易云音乐的反思层设计,是其情感化设计的核心,也是其差异化竞争的关键。
网易云音乐通过打造“云村”社区、“热评文化”等,让用户在使用音乐的过程中,能够找到情感的共鸣,获得陪伴与理解,从而产生深度的情感认同与品牌忠诚度。
首先,在“热评文化”设计上,网易云音乐的“热评”是其最具代表性的情感化设计,也是用户情感共鸣的核心载体。
每一首歌曲的评论区,都有大量的用户留言,这些留言,有的是用户的心情感悟、有的是用户的故事、有的是用户的思念与祝福,真实而真挚,能够戳中用户的内心,引发用户的情感共鸣。
比如,很多用户在听到伤感的歌曲时,会在评论区留言自己的伤心事,其他用户会在评论区安慰、鼓励,形成一种“相互陪伴、相互理解”的氛围;很多用户在听到温暖的歌曲时,会在评论区留言自己的幸福事,分享自己的快乐,让其他用户也能够感受到快乐。
网易云音乐的“热评”设计,不仅让用户能够表达自己的情感,还能够让用户找到志同道合的人,获得归属感与陪伴感。
此外,网易云音乐还会将优质的热评,展示在歌曲的播放界面,让更多的用户看到,引发更多的情感共鸣;同时,网易云音乐还会举办“热评征集”活动,鼓励用户留言,进一步强化“热评文化”,传递陪伴、理解、共鸣的情感。
其次,在“云村”社区设计上,网易云音乐打造了“云村”社区,让用户能够围绕音乐,进行更深入的社交互动,传递陪伴、共鸣的情感。
“云村”社区涵盖了“动态、Mlog、歌单、话题”等多个板块,用户可以在“云村”发布自己的动态、Mlog,分享自己的音乐感悟、生活故事;可以创建歌单,分享自己喜欢的歌曲,与其他用户交流音乐心得;可以参与话题讨论,围绕音乐、情感等话题,与其他用户交流互动,找到志同道合的人,获得归属感。
比如,“云村”的“每日话题”,每天都会推出一个与情感、音乐相关的话题(如“你听过最治愈的一首歌”“用一首歌形容你的今天”),鼓励用户参与讨论,分享自己的故事与感悟,引发用户的共鸣。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

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

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

兰亭妙微UI设计公司分享:过去,产品经理谈界面设计,常常只需要说一句:“这个页面按后台系统常规样式做就行。”
但今天,这句话已经不够用了。
一方面,AI 产品、SaaS 工具、内容平台、数据看板、运营后台越来越多,产品的第一印象越来越依赖界面质感。另一方面,前端开发已经不再是从零开始写每一个按钮、表单和弹窗,大多数团队都会基于成熟的 UI 框架或组件库快速搭建产品。
所以,产品经理虽然不一定要会写代码,但至少应该知道:市面上有哪些常见的前端 UI 框架?它们分别适合什么产品?什么时候该用现成框架,什么时候需要做定制设计?如果你完全不了解这些,很容易在需求评审时提出“不现实的设计要求”,或者在产品视觉层面输给竞品。
这篇文章,就帮产品经理系统梳理一次。
简单理解,前端 UI 框架就是一套已经设计好、开发好的界面组件集合。
比如:
按钮、输入框、下拉选择器、表格、弹窗、标签页、菜单、日期选择器、上传组件、通知提醒、侧边栏、数据卡片……
这些都是产品页面中高频出现的基础元素。
如果没有 UI 框架,前端工程师就需要从零开始写这些组件,不仅开发效率低,也很难保证不同页面之间的风格统一。
而有了 UI 框架之后,团队可以直接调用现成组件,再根据品牌风格进行主题定制。对于产品经理来说,这意味着:
所以,UI 框架并不只是“让页面变好看”的工具,它本质上是产品研发效率的一部分。
很多产品经理会觉得:“UI 框架不是前端工程师的事情吗?我为什么要懂?”
原因很简单:你不需要会用,但你需要会判断。
产品经理至少要知道三个问题:
第一,这个产品适合用什么类型的 UI 框架?
一个企业管理后台,和一个 AI 聊天产品,和一个营销活动页面,对界面风格的要求是不一样的。后台系统更看重表格、表单、权限、筛选和数据展示;AI 产品更看重现代感、轻量感、动效和交互体验;官网落地页则更看重视觉冲击力和转化路径。
第二,UI 框架会影响产品气质。
同样是一个管理系统,用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出来的感觉可能完全不同。有的偏企业化,有的偏清爽,有的偏现代,有的偏国际化。
第三,UI 框架会影响需求实现成本。
有些组件框架本身就提供复杂表格、表单校验、日期选择、上传、权限布局等能力,实现成本较低;但如果产品经理提出的交互和框架默认能力差异很大,研发成本就会上升。
所以,懂 UI 框架,不是为了替前端做技术选型,而是为了让产品经理在设计需求、评估成本、判断风格时更专业。
前端 UI 框架很多,但产品经理不需要全部掌握。你只需要知道以下几类。
如果你做过中后台产品,大概率听说过 Ant Design。

它最适合的场景是:企业管理后台、CRM、ERP、数据平台、运营后台、权限系统、审批系统、配置系统等。
Ant Design 的优势是组件非常完整,尤其适合复杂表格、复杂表单、数据筛选、弹窗、菜单、导航、分页、上传等中后台场景。对于国内很多 B 端产品来说,它几乎已经是一种“默认选择”。
但它也有一个明显问题:默认风格比较“企业化”。如果不做主题调整,产品容易看起来像传统后台,缺少年轻感和高级感。
产品经理在使用 Ant Design 时要注意一点:它适合提高效率,但不代表产品一定好看。如果是面向外部客户的 SaaS 产品,最好在颜色、间距、卡片、图标和数据可视化上做二次设计。
适合场景:
不太适合:
Element Plus 是 Vue 生态里非常常见的 UI 组件库,很多国内团队做后台系统都会用它。

如果你的技术团队使用 Vue 3,那么 Element Plus 通常会是一个很容易被考虑的选项。它上手成本低,文档友好,组件也比较完整,适合快速搭建管理系统。
它的产品气质和 Ant Design 有点类似,都是偏中后台、偏效率、偏稳定的路线。对于产品经理来说,Element Plus 的核心价值不是“多么惊艳”,而是“稳定、通用、开发快”。
适合场景:
需要注意的是,如果产品对视觉高级感要求很高,Element Plus 默认风格也需要二次设计,否则容易显得普通。
Naive UI 也是 Vue 3 生态中值得产品经理了解的一套组件库。

和 Element Plus 相比,Naive UI 的气质更轻、更现代,视觉上也更清爽一些。它比较适合那些既需要后台能力,又希望界面不要太传统的产品。
比如 AI 工具后台、内容管理系统、知识库产品、数据分析工具、轻量 SaaS 控制台等,都可以考虑 Naive UI。
对产品经理来说,Naive UI 的价值在于:它不那么“老派后台”,同时又具备比较完整的组件能力。如果你希望产品既有效率,又看起来更年轻,它是一个不错的选择。
适合场景:
Arco Design 是一套偏企业级的设计系统和组件库,既有 React 版本,也有 Vue 版本。它的整体风格比传统企业后台更年轻,适合需要兼顾效率和视觉感的产品。

如果说 Ant Design 更像成熟稳重的企业后台,那么 Arco Design 相对更轻、更活泼一些。它适合做企业协同产品、效率工具、数据平台、SaaS 后台、运营系统等。
产品经理可以把 Arco Design 理解为:在企业级能力和年轻化视觉之间做平衡的一套方案。
适合场景:
MUI 是 React 生态里很成熟的一套组件库,基于 Google 的 Material Design 风格。

它的特点是规范感强、组件完整、国际化程度高。很多海外产品、开发者工具、SaaS 产品会使用 MUI。
不过,MUI 的默认风格有比较明显的 Material Design 特征。如果你的产品希望看起来更“Google 系”,MUI 会比较合适;但如果你希望做出独特品牌感,就需要进行较多主题定制。
适合场景:
Mantine 是一套比较全能的 React 组件库。
它的优势在于组件丰富、hooks 完整、主题定制能力强,适合做各种 Web 应用,尤其适合 SaaS、后台系统、工具型产品。
和 Ant Design 相比,Mantine 的视觉气质更轻一些;和 shadcn/ui 相比,它又更像一个完整的组件库,开箱即用能力更强。
如果你的团队使用 React,并且想要一个既能快速开发、又不会太传统的 UI 框架,Mantine 是值得考虑的选择。
适合场景:
近几年,Shadcn ui 在 React 和 Next.js 圈子里非常受欢迎。

严格来说,它并不是传统意义上的组件库。它更像是一套可以复制到自己项目里、再自由改造的组件体系。它的设计风格非常现代,配合 Tailwind CSS 使用,很容易做出高级、干净、有质感的界面。
这类风格非常适合 AI 产品、SaaS 官网、开发者工具、数据看板、知识库产品、内容平台等。
shadcn/ui 的优势是好看、灵活、可控;缺点是它对前端团队能力要求更高,不像传统组件库那样“一装即用”。如果团队前端能力不错,它可以做出非常有差异化的产品视觉;如果团队比较依赖现成组件,使用成本可能会更高。
适合场景:
对产品经理来说,shadcn/ui 值得重点关注。因为现在很多新一代 AI 产品的界面风格,已经不再是传统后台,而是更轻、更白、更克制、更高级的设计语言。
HeroUI 也是一套适合 React 项目的现代 UI 组件库。

它的特点是默认视觉比较好,组件带有更明显的现代感和动效感,适合做 AI 工具、创作者产品、社区产品、轻量 SaaS 产品等。
如果产品经理希望产品一开始就有不错的视觉表现,而不是完全依赖设计师和前端从零调整,HeroUI 会是一个不错的选择。
适合场景:
Tailwind CSS 严格来说不是 UI 组件库,而是一套 CSS 工具框架。
你可以把它理解成一套“原子化样式系统”。它不会直接给你一个完整的表格或弹窗,但它可以让前端非常灵活地搭建各种界面。
现在很多现代 UI 框架和组件方案都会基于 Tailwind CSS,比如 shadcn/ui、HeroUI 等。
产品经理不需要理解 Tailwind CSS 的写法,但要知道它代表了一种趋势:越来越多团队不满足于直接套用传统组件库,而是希望通过更灵活的样式系统,做出更有品牌感的界面。
适合场景:
产品经理不需要决定最终技术选型,但可以和设计师、前端一起从以下几个维度判断。
如果是企业后台、管理系统、配置平台,可以优先考虑 Ant Design、Element Plus、Arco Design。
如果是 AI 产品、SaaS 工具、开发者工具,可以重点关注 shadcn/ui、HeroUI、Mantine。
如果是 Vue 技术栈,可以看 Element Plus、Naive UI、Arco Design Vue。
如果是官网、落地页、活动页,可以关注 Tailwind CSS 及其生态组件。
React 项目常见选择:
Vue 项目常见选择:
不同框架并不是随便选的,它和团队技术栈高度相关。产品经理不要只说“我喜欢这个风格”,还要问一句:“我们现在的前端技术栈适合用它吗?”
如果产品里有大量复杂表格、筛选、表单、权限、弹窗、上传、日期选择,组件完整度非常重要。
这类产品更适合选择成熟组件库,比如 Ant Design、Element Plus、Mantine、Arco Design。
如果产品更重视视觉表达、页面质感和品牌差异化,可以选择 shadcn/ui、HeroUI、Tailwind CSS 生态。
很多产品的问题不是“没有 UI 框架”,而是“所有页面都长得像模板”。
如果你希望产品有自己的品牌感,就不能只依赖默认样式。产品经理需要关注:
一个成熟产品,最终一定不是简单套模板,而是形成自己的设计系统。
如果你是做企业中后台:
优先看 Ant Design、Element Plus、Arco Design。它们组件成熟,适合复杂业务场景,尤其是表格、表单、筛选、权限等能力比较重要的系统。
如果你是做 AI 产品:
优先看 shadcn/ui、HeroUI、Mantine。它们更容易做出现代感和高级感,适合 AI 工具、AI 工作台、AI 内容平台、AI Agent 控制台等产品。
如果你是做 SaaS 产品:
可以根据风格选择 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后台管理,可以选 Ant Design 或 Arco;如果是偏现代工具,可以选 shadcn/ui 或 Mantine。
如果你是做官网和营销页:
可以关注 Tailwind CSS 生态。相比传统后台组件库,它更适合做品牌官网、课程页、活动页、产品介绍页。
如果你是 Vue 团队:
可以重点看 Element Plus、Naive UI、Arco Design Vue。如果想稳妥,就选 Element Plus;如果想更现代,可以看 Naive UI;如果要企业级完整方案,可以看 Arco Design Vue。
第一个误区:以为 UI 框架等于设计稿。
UI 框架只是基础组件,不等于完整设计。真正的产品体验还包括信息架构、页面布局、视觉层级、交互路径、文案表达和品牌调性。
第二个误区:只看好不好看,不看业务复杂度。
有些框架看起来很美,但不一定适合复杂后台。如果产品有大量表格、筛选和表单,组件能力比视觉炫酷更重要。
第三个误区:只追求差异化,忽略开发成本。
如果每个组件都要重写,每个交互都要高度定制,产品看起来可能更特别,但研发成本和维护成本也会大幅上升。
第四个误区:认为用了某个框架就一定高级。
同样使用 shadcn/ui,有的产品很高级,有的产品也会很普通。框架只是起点,最终效果取决于设计能力、前端实现和产品细节。
产品经理了解 UI 框架,不是为了和前端争论“到底用哪个库”,而是为了提升产品判断力。
你至少要能判断:
当你能回答这些问题,和设计师、前端沟通时就会更专业。
AI 时代,产品经理的能力边界正在变化。
过去,产品经理重点关注需求、流程和功能;现在,产品经理还需要懂一点界面审美、组件思维、设计系统和研发效率。
前端 UI 框架就是连接产品、设计和研发的重要桥梁。
你不需要成为前端工程师,但你需要知道:
真正优秀的产品经理,不只是会写需求文档,也要能判断一个产品该用什么方式被更高效、更美观、更可持续地做出来。
这,就是产品经理应该了解前端 UI 框架的原因。
转载:人人都是产品经理
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

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

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