首页

语言媒介:解锁新文创设计的灵感密码

涛涛

语言是人类文明的载体,是交流思想、传递情感的复杂系统,其丰富的媒介形式为文创设计打开了全新的创作维度。从自然语言的口语、文字、手语,到人工语言的编程符号、数学公式,再到涵盖听觉、视觉、触觉等的非语言形式,每一种语言媒介都蕴含着独特的文化内涵与设计价值。当语言媒介与新文创设计碰撞融合,不仅让文化传播有了更多元的表达,更让文创产品兼具实用性、艺术性与文化性,成为连接传统与现代、文化与生活的桥梁。本文将从语言媒介的分类出发,结合经典设计案例,全面解析语言媒介如何成为新文创设计的灵感源泉。

人人都可以是设计师:UI&UX 小技巧大全(二)

清阳

让用户在使用产品时不产生混淆、可快速获取所需信息,是产品设计时应当考虑的重要层面,而这需要团队在设计时预先做好方案,去掉无关事物,清晰地呈现信息,提升产品的易用性与用户体验。兰亭妙微 UI 设计公司始终以 “精简信息、提升信噪比” 为设计核心,本篇文章里,作者结合实战经验,介绍了提高信噪比的设计技巧,一起来看一下。

用户对产品的体验往往源于直观感受,因此 UI&UX 设计直接影响着产品的成败 —— 即便产品功能再强大,糟糕的界面与交互体验也会让其价值大打折扣。
 
但想要优化 UI&UX 设计,并非一定要掌握系统且全面的设计知识,有时只需一些细微的调整,就能让设计效果实现质的提升。Marc Andrew 总结了 36 个可落地的 UI&UX 优化小技巧,分 6 篇系列文章呈现,本文为第二篇,希望能为设计师们提供实操参考。(原文发表于 Medium,标题为:UI & UX micro-tips: Volume two)

image.png

在打造高效、美观的 UI 界面时,那些看似不起眼的细节调整,往往能快速优化设计效果与用户体验。接下来,直接分享干货技巧:
 

一、选用通用认可图标,规避用户认知混淆

 
在设计界面中添加图标时,核心原则是选择行业通用、用户普遍认可的样式,确保图标能清晰传递操作意图与功能含义。
 

image.png

对比两种设计实例就能发现,使用表意模糊的自定义图标,会让用户产生操作困惑,形成认知障碍;而选用标准化的通用图标,能让用户无需思考即可理解操作指向。设计中切勿为了追求个性,使用过于小众、叛逆的图标样式,徒增用户的理解成本。
 

二、巧用亲密性原则,明确元素关联关系

 
在对比、间隔、重复等经典设计原则中,亲密性原则是打造清晰界面的关键,能有效帮助用户快速识别元素间的逻辑关系。

image.png

这一原则的落地方式十分简单:将内容相关、功能联动的设计元素就近排布,通过物理距离的远近,直观体现元素间的关联程度。反之,无关元素则保持合理间距。这样的设计方式,能让用户在浏览网页或 APP 时,快速建立对界面内容的认知,提升信息获取效率。
 
对比设计实例可见,元素排布松散的界面会让用户难以识别逻辑关联,而元素就近聚合的界面,能让信息层级更清晰。
 

三、4px 基线网格 + 8px 网格,打造和谐垂直视觉节奏

image.png

网格系统是界面排版的基础,将4px 基线网格与通用的8px 网格搭配使用,能让界面的垂直视觉节奏更和谐,尤其适用于字体排版环节。

 

具体实操方法为:让字体对齐 4px 基线网格,同时将行高值设置为 4 的整数倍(如 16、20、24、28px 等)。之所以选择 4px 作为基线网格单位,是因为单纯以 8px 为倍数进行伸缩,在处理部分文本尺寸时,灵活性与适配性会有所不足,而 4px 基线网格能弥补这一问题,与 8px 网格形成互补,让整体排版更具秩序感。
 

四、降低标题行高,提升视觉紧凑度与阅读体验

image.png

标题与长格式正文的排版需求截然不同:正文需要足够的行高来保证阅读舒适度,而标题通常文字简短,适当缩小行高不仅不会影响阅读,还能提升视觉紧凑度,让标题更具层次感。
 
设计中推荐将标题行高设置为文字大小的 1-1.3 倍,且标题文字越大,行高的倍数可适当降低。对比行高过高与行高适中的设计实例能明显发现,行高合适的标题视觉更聚焦,能让用户快速捕捉核心信息。
 

五、色轮类似配色,快速打造和谐配色方案

image.png

若在设计中陷入配色选择的困境,色轮类似配色法会是高效的解决方案 —— 类似色(也叫邻接色相 / 相邻色相)是最易打造视觉和谐的配色方案之一。
 
类似色指色轮上相邻的色相,由原色、间色与复色组合而成,基于这一原则选择配色,能快速搭建出简洁且无视觉违和感的色彩体系。借助色轮选择相邻色相进行搭配,无需复杂的色彩调试,就能让界面配色达到和谐统一的效果,大幅提升配色效率。
 

六、最大化设计信噪比,让核心信息更突出

image.png

设计的清晰度与可用性,核心在于提升信噪比—— 这里的 “信号” 指产品想要传递的核心相关信息,“噪音” 则是无意义的干扰元素。通过让信号最大化、噪音最小化,能让用户快速聚焦核心内容,提升信息获取效率。
 
实现这一目标的关键方法为:一方面通过强化视觉层级,让核心信息(信号)得到有效凸显;另一方面坚决剔除或弱化无关的文字、图标、装饰等元素(噪音),避免分散用户注意力。
 
对比两种设计实例能看到,元素堆砌、信息杂乱的界面会让用户难以捕捉重点,而剔除冗余元素、聚焦核心信息的界面,视觉更简洁,用户能快速获取关键内容。简言之,剔除无关、简化界面、突出核心,是提升设计信噪比的核心要义。
 
希望这些 UI&UX 微调技巧,能为大家的设计实践提供新思路,让每一处细节调整都能为产品体验赋能。

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

 

image.png

UI设计中的情感化设计

清阳

当下互联网产品日趋同质化,用户每天要接触、使用数十款各类软件,单纯满足基础功能需求的产品,早已难以留住用户;而一款自带温度、饱含情感的软件,不仅能大幅提升用户使用体验,更能悄悄拉近产品与用户的距离,让用户产生稳定的依赖感与不期而遇的惊喜感,在海量产品中牢牢占据用户心智。作为深耕界面设计与用户体验领域的兰亭妙微UI设计公司,始终将情感化设计视为UI设计的核心内核,认为好的UI设计从不只是视觉美化与功能排布,更是与用户的情感对话。本文将聚焦UI设计中的情感化设计,拆解核心思路与落地技巧,一同探寻让产品更有温度的设计密码。
 

UI 设计中的情感化设计:让产品与用户产生心灵共鸣

 
如今,用户每日都会接触和使用多款软件,一款能传递情感的产品,往往能大幅提升用户体验,让用户对产品产生依赖感与惊喜感。情感化设计,正是让产品跳出冰冷的功能框架,触达用户内心的关键,接下来我们就来深入探讨 UI 设计中的情感化设计之道。
 
心理学认为,情感是人对客观事物是否满足自身需求而产生的态度体验。当产品能够触动用户内心,引发其情感波动时,便不再是冰冷的工具。用户能透过界面与交互,感受到设计师为优化使用体验,在每一个细节处的用心打磨,进而心生愉悦、喜爱与幸福感。
 
情感化设计并非轰轰烈烈的大改动,有时一句暖心文案、一幅趣味插图、一个灵动动画,便能打动人心,让用户获得愉悦的使用体验。设计的高级感,从来不止于视觉层面的精致,这些藏在细节里的美好设计,满含积极情绪,是产品在满足功能性与易用性之后,对更高层次用户体验的追求。
 

一、提示性文字:用语言拉近距离,赋予产品生命力

image.png

语言是情感化设计最直接的利器,拟人化的对话相较于冰冷的机械文字,更易获得用户好感,为产品赋予鲜活的生命力。尤其在 App 推送场景中,用户每日接收大量推送,早已产生审美疲劳,此时一句精心设计的推送文案,成本低、效率高,能将对用户的 “打扰” 转化为趣味互动,让用户会心一笑。
 
荔枝 FM 的推送 “一个人吗?我也是呢”,精准戳中独处用户的情绪;一刻的 “你知道孤独是什么感觉吗:手机亮了,却只有推送”,用细腻的表达引发情感共鸣;随手记专业版的 “5 天没花钱,赞啊”,像朋友般为用户的省钱行为喝彩;百度地图的 “北京风好大,我要被吹走啦”,用俏皮的语气化解出行查询的枯燥;百词斩的 “周没背!!!卸掉我算了!!!”,以略带 “小脾气” 的表达,巧妙提醒用户打卡学习,这些都是提示性文字情感化的绝佳范例。
 

二、下拉刷新:让高频操作,成为趣味体验

image.png

下拉刷新是用户使用 App 时的高频操作,传统的图标加文字设计,虽简单直观,却毫无设计感,无法引发用户任何情绪波动。而下拉刷新作为一种临时交互状态,丰富其设计细节,不仅不会与产品界面产生违和感,反而能让产品收获用户好感。
 
以 UC 头条为例,其下拉刷新时会跳出一只奔跑的小鹿,既延续了品牌 logo 的视觉元素,又以 “快马加鞭” 的视觉隐喻,契合资讯类产品对内容更新速度的核心需求。用户在等待加载的过程中,被灵动的设计吸引,在愉悦的情绪中对产品产生好感,让原本枯燥的下拉刷新操作变得生动有趣。

image.png

三、头像设计:打造专属虚拟形象,增强用户认同感

image.png

个人中心是承载用户信息的核心页面,也是用户虚拟形象的展示窗口。传统的默认头像加登录文字的设计,死板且缺乏温度,无法让用户产生身份认同感。如今,越来越多产品摒弃了这种单一设计,为用户提供多样化的头像选择,赋予产品人格魅力,让产品拥有生命力,消除人机交互的冰冷感,帮助用户与产品建立友好的情感联结。

image.png

美团外卖、躺平等产品,为用户设计了贴合产品气质与用户属性的专属虚拟形象,让用户在使用过程中产生强烈的身份共鸣,仿佛拥有了与产品契合的专属标签,大幅提升了用户对产品的接纳度与认同感。
 

四、缺省页设计:化解负面情绪,传递产品温度

 
缺省页通常出现在页面无内容、网络断开等场景,传统简陋的图标加提示文字设计,会让用户产生心理落差,陷入挫败、烦躁等负面情绪。而情感化的缺省页设计,能通过设计手段有效缓解用户的负面感受,成为传递产品温度的重要载体。
 
设计师可结合产品属性与品牌视觉体系,延展图形设计,搭配动效、插画等形式,丰富缺省页内容。比如躺平的空白页,设计出贱萌有趣的视觉场景,一句 “没消息就是好消息”“内容找不到了,发现更多圈子”,让用户在无奈的场景下会心一笑,将负面情绪转化为轻松的体验,让产品充满趣味性与人情味。

image.png

五、标签栏微动效:让页面切换,告别单调死板

 
随着情感化设计的不断丰富,标签栏图标设计不再局限于静态视觉,动态动画效果的融入,让标签栏切换操作告别死板。用户在频繁切换页面时,不会再感到单调枯燥,精心设计的微动效,还能有效缓解用户等待时的焦躁心情,从心理层面缩短用户的等待感知,同时让品牌视觉形象更深入人心,强化用户对产品的记忆点。

image.png

六、模拟用户行为:贴合真实场景,深化情感认同

 
当产品能够精准模拟用户行为,将用户代入真实的使用情境时,便能让用户产生深刻的情感认同感。这种设计核心,在于精准洞悉用户的行为习惯与潜在需求,实现产品与用户的 “心意相通”。

image.png

潮汐 App 会根据时间、场景与季节变化,播放雨声、雷声、风声、潮水声等不同的背景音效,为用户营造身临其境的氛围感,让用户在专注、睡眠、小憩等不同场景下,获得贴合心境的体验;微信能感知用户的截屏行为,当用户打开对话框时,自动显示截屏图片,提前预判用户发截图的需求,让操作更便捷;淘票票则精准捕捉到观众看电影后等彩蛋的习惯,在影片详情页添加彩蛋提醒,告知用户电影是否有彩蛋、彩蛋出现在哪个位置,避免用户白白浪费时间,这些设计都从用户真实需求出发,让产品成为懂用户的 “贴心伙伴”。

image.png

七、有趣的细节设计:藏起小彩蛋,激发探索欲

 
常言道,有趣的灵魂万里挑一,在 UI 设计中,有趣的细节设计能引发用户与产品的积极互动,让用户产生愉悦的情绪。这类设计分为隐形与显性两种,无论是需要用户主动发现的隐藏彩蛋,还是直观呈现的趣味设计,都能为用户带来惊喜,增强用户对产品的探知欲与粘性。

image.png

B 站电脑端鬼畜区的 “隐藏彩蛋” 便是隐形设计的代表,长按返回图标 10 秒,页面会出现提示语,引导用户输入字母,随后鬼畜明星的画面会划过屏幕,这种需要用户主动探索的设计,让用户在发现彩蛋时收获满满的喜悦,大幅提升了产品的趣味性;优酷视频的显性趣味设计同样出彩,会员发弹幕后,可使用剧集相关角色的头像,带角色扮演头像的弹幕,让用户的发言更有剧集代入感,既强化了会员的尊贵感与专属特权,又丰富了弹幕区的互动形式,一举两得。

image.png

总而言之,UI 设计的 “高级感”,既需要在视觉层面精雕细琢,从细微之处打造精致、富有设计感的画面,更需要从情感化设计出发,站在用户的角度换位思考,洞悉用户的情绪需求与行为习惯,让产品与用户产生情感共鸣。当产品不再只是满足功能需求的工具,而是能传递温度、引发共鸣的情感载体时,才能让用户获得更高层次的使用体验,建立起长久且牢固的产品情感联结。
 

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

 

image.png

 

设计不是改界面,而是读懂情绪

清阳

作为专注于体验设计的创新团队,兰亭妙微UI设计公司认为:一个好的设计,不仅要解决问题,更要抚慰情绪。我们从“不确定感”“压力”和“关怀”三种典型情绪出发,重新拆解航班状态页的设计逻辑,让它不再是冰冷的工具,而是成为用户旅程中善解人意的“情绪伙伴

你有没有匆忙赶着去机场的经历?是否也在航班延误时感到过焦虑? 这些情绪我们都曾体验过——但它们真的被运用到设计中了吗?

这一次,我们从“情绪”出发,重新设计了航班状态页,分享 3 个由用户情绪驱动的设计决策。

01.情绪:不确定感

想象一下这个场景: 用户可能正坐在赶往机场的火车上。一边盯着时间,一边核对路线,脑子里不断计算着:“我来得及吗?万一航班有变化怎么办?”

这是一种非常典型的不确定时刻。 不是恐慌,而是那种微妙却持续的紧张——用户此刻只想确认一件事:一切是否仍在按计划进行。

我们的设计回应在这个场景中,用户最需要的,其实就是航班状态信息本身的确定性反馈。 而最常见、也最容易引发误解的状态之一,就是航班“延误”。

但延误并不等于灾难——航班依然会飞,有时甚至反而给用户多出了一点赶往机场的时间;起飞延误,也不一定意味着落地延误。

而在旧版本中,“延误”与“取消”使用了同一种红色。这种表达,会在第一秒就把“延误”解读为一种危险信号,放大了用户原本就存在的不确定感。

因此在改版中,我们将“延误”的颜色调整为橙色:

  • 与“正常起飞”的绿色保持清晰区分
  • 在视觉上依然足够显眼
  • 但在情绪感知上更加克制
  • 也更符合“延误”本身的真实严重程度

一个颜色的变化,背后对应的其实是一种“风险等级可视化分级设计”,而不是简单的视觉改动——让信息 既足够被看见,又不会过度制造恐慌。

也正是在这种细微的情绪调节中,用户的不确定感被悄悄降低了。

02.情绪:压力

再换一个场景:用户已经站在值机柜台前,一只手拿着护照,另一只手扶着行李,也许身旁还有一个小孩正拉着他们的衣角。外部刺激密集、节奏迅速,这是一种短暂但强烈的压力时刻。

在这种状态下,用户最迫切的需求,往往不是“浏览”; 而是马上确认关键信息是否齐全——PNR 号、行李额度、值机所需的任何关键信息。 这不是一个可以让用户慢慢寻找入口的时刻。

他们只想快速、明确、毫不犹豫地进入「我的预订」。

我们的设计回应

航班状态页,往往是用户走到柜台前最后查看一次的页面。  因此在这个高压场景中,“我的预订”必须是第一时间被看到的入口。

在这次改版中,我们做了三件小调整:

  1. 让入口更加明显
  2. 增加图标,方便用户快速理解
  3. 文案从泛泛的“查看预订(View bookings)”,调整为更贴近当下心智模型的“我的预订 My booking”

这些变化看起来都不大,但它们背后遵循的是同一个原则:在高压力状态下,为用户提供「最短决策路径(Shortest Decision Path)」。

当用户无需思考“我要点哪里”,而是第一眼就知道“这就是我要找的”,压力,便在这一瞬间被有效削减了。

03.情绪:关怀(Care)

在旅程的后半段,节奏逐渐慢了下来。

用户已经通过安检,买了一杯咖啡,坐下等待登机。

在这个相对放松的时刻,他们偶尔会再次打开航班状态页,然后看到一个按钮:“分享航班状态”。

也正是在这一瞬间,用户的情绪,从“关注自己”,悄然转向了“想到别人”。

他们会想到来接机的朋友或家人——

是否顺利、是否会在机场焦急地反复确认时间。 于是,一个非常真实、也非常普遍的念头出现了:“我想让对方更方便一点。”

我们的设计回应

为了让这种“关怀”更容易被表达,我们在这次改版中优化了“航班分享”的入口: 让用户可以一键将航班信息发送给接机的人, 对方无需再向用户反复确认,便能直接跟踪航班的实时动态。

这不是一个效率型功能,而是一个典型的“情绪外溢(Emotional Spillover)”场景——用户所感知到的安心,被自然地传递给了另一端的人。

设计在这一刻所做的,只是顺势托住了这种善意:让用户,帮别人更轻松一点。

结语:像方法派演员一样设计

如果要总结这一切,我想说:设计不仅是在“做界面”,而是在“进入用户的情绪”。

这有点像演员的“方法派表演(Method Acting)”——他们不是站在外面诠释角色,而是走进角色,成为角色本身。

当你也带着这样的方式进入用户的情绪场景时,你会发现:

很多设计决策不再是反复权衡的“选择题”,而会变成一种顺理成章、甚至“非这样不可”的结果。

因为此时你已经不再是站在屏幕这一侧为用户设计,你是在用户的状态之中,替他们做出判断。

转载:人人都是产品经理

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

 

image.png

读懂用户心理,才是好 UI 设计的开始

清阳

在设计领域,优秀的用户界面(UI)设计,从来不止是视觉上的美感,更是对用户心理的深刻理解。本文将带你深入了解优秀 UI 设计背后的心理学原理,揭示为什么某些设计能够让人感到自然、流畅,甚至在无意识中提升用户体验。
 
你肯定遇到过那种用起来恰到好处的设计。一切元素仿佛都在它该在的位置,你无需费力去辨认、思考,也不会烦躁地点来点去才能弄明白。
 
这可不是什么魔法,背后靠的是成熟的心理学原理。
 
出色的 UI 设计,可不只是选对了色调,或是用了漂亮的字体。它之所以好用,是因为洞悉人们的思维方式:知道人们会注意什么、忽略什么,以及什么会让用户感到舒适、顺畅。
 
下面我们就来剖析优秀 UI 设计背后的心理学原理,帮你打造出让用户轻松上手、体验感极佳的界面。
 
兰亭妙微 UI 设计公司多年专注于用户界面与体验设计,坚持以用户心理为底层逻辑,在美观与易用之间找到最佳平衡,让每一个界面都好看、好用、好懂。

 

1.大脑是个 “偷懒的天才”(认知负荷)

关键在于:人类的大脑很强大,但也超级 “偷懒” 。

我们一直都在努力节省脑力。这就是为什么优秀的 UI 设计不会让人们进行没必要的思考。要是你的应用程序用起来像解谜游戏,用户会直接离开,说不定走之前还会留下一篇言辞激烈的差评。

设计不是为了炫耀你有多聪明,而是要让用户感觉自己很聪明 。

这些技巧能让大脑 “不宕机” :

  • 清晰呈现层级关系。通常,每个界面只设置一个主要操作就够了。
  • 别搞没必要的选择。这又不是智力竞猜节目。

把复杂内容藏起来,等需要的时候再展示。(对,说的就是你 “高级设置” 。 )

2.“选择过多” 问题(希克定律)

希克定律很简单:你给别人的选择越多,他们做决定花的时间就越长,而且越想哭,或者直接放弃。

你有没有盯着一个按字母顺序排列,从 “阿富汗” 开始罗列了 30 个国家的下拉菜单发懵?就是这种情况。

设计要做的是减少决策难度。不是剥夺用户选择自由,而是让选择路径一目了然。

像极简主义者一样设计:

  • 把大任务拆分成小步骤。
  • 突出最常见或推荐的选项。
  • 使用默认设置,反正大多数用户都会选它。

3.目标应易于点击(菲茨定律)

小得可怜的按钮、细得离谱的文本链接,还有关闭按钮 “X” 比果蝇还小的可关闭弹窗。

我们都为此吐槽过。菲茨定律表明,点击某物所需的时间取决于两个因素:目标的大小和距离。所以,要是你想让用户真的去点击按钮,那就得让它便于点击。

实用建议如下:

  • 增大触摸目标,在移动端尤其如此。毕竟没人能像忍者那样手指精准。
  • 把主要按钮放在易于触及的位置,想想大拇指操作的区域。
  • 避免将操作按钮堆叠得太近。误触现在可是新的“抓狂乱点”源头。

4.视觉层级:为何你的用户会迷失

用户看屏幕可不是从上到下逐行阅读,他们浏览的样子就像喝了浓缩咖啡的松鼠,这儿瞅瞅那儿看看。

所以,你得像指挥家引领管弦乐队那样把控视觉层级。通过尺寸、颜色、粗细和间距来告诉用户:“嘿,先看这儿!”

要是没有视觉层级,所有元素都在争抢用户的注意力。可要是所有元素都在大喊大叫,那就什么都听不见了。

不妨试试这些方法:

  • 主要操作使用粗体,不太重要的内容用细一些的字体。
  • 像对待本职工作一样利用好留白(因为这就是你的工作)。
  • 想快速检验效果?眯着眼看你的设计,最先映入眼帘的就是焦点。

5.熟悉感胜过创意

你或许想成为按钮设计界的毕加索,或者重新发明导航栏。但你猜怎么着?人们偏爱他们熟悉的东西。

登录表单总是按固定顺序设置邮箱和密码输入框,这并非偷懒,而是因为大家对此熟悉。

具体做法如下:

  • 关键流程,如注册、结账、导航等,沿用标准的UI模式。
  • 把创意用在微交互或视觉效果上,别用在基础布局上。
  • 记住:熟悉意味着可靠,怪异则会引发怀疑。

6.物以类聚(格式塔心理学)

格式塔心理学本质上是我们大脑快速解读现实的方式。我们不会把事物看成孤立的元素,而是依据接近性、相似性、对齐方式和连续性对它们进行分组。

如果你的用户界面(UI)不遵循这些模式,用户就会感到困惑。而困惑会让用户迅速关闭页面。

举例如下:

  • 外观相似的按钮应该执行类似的操作,别误导用户。
  • 在表单中,将相关字段放在一起,别把“姓名”和“邮箱”像彩蛋一样随意分散。
  • 对齐内容,未对齐的元素会在潜意识层面引发混乱。

7.情感大于逻辑

告诉你个秘密:人们做决策时凭的是情感,之后才从逻辑上找理由。这一点在 UI 设计中同样适用。

想想看,你有没有因为某个按钮给人的感觉很好就点了它?比如那令人愉悦的悬停效果,或是那巧妙的动画。

设计能引发愉悦感,也可能带来挫败感。

如何从情感角度进行设计:

  • 使用有个性的微文案,一点点魅力就能产生很大效果。
  • 动画要流畅得像黄油般顺滑,而不是像迈克尔・贝电影那样夸张。
  • 打造令人愉悦的瞬间:比如一条欢快的成功提示信息、一个五彩纸屑动画,或是一个让人满意的加载状态。

8.人们记住的是峰值与结尾(峰终定律)

用户不会记得使用过程中的每一秒,他们记住的是最强烈的瞬间和结尾,这就是峰终定律。

所以,如果你的结账流程十分顺畅,但确认页面却像 404 错误页一样糟糕,猜猜他们会记住什么?

设计小贴士:

  • 找出你的“峰值时刻”,让它们令人愉悦。
  • 绝不要忽视结尾。确认消息、感谢页面、注册成功页面,它们比你想象的更重要。

9.用户体验的真正大敌:不确定性

要是用户不确定某个按钮的功能,就会犹豫不决。而这种犹豫会破坏操作的连贯性。

最出色的用户界面(UI)能消除疑虑。它们仿佛在告诉用户:“嘿,点这儿,放心,不会误删所有东西。”

可以利用以下方法:

  • 清晰的标签:“保存草稿”就比“提交”更明晰。
  • 微文案:短短一行字就能打消用户的顾虑。
  • 反馈:及时告知用户刚刚发生了什么,以及接下来会怎样。

10.助你保持思路清晰的工具

说实话,有时候你确实没时间从头构建每一个流程。这时候,像 “Made in Figma” 这样的插件就能救急。

它能让你直接使用预先构建好的 UI 流程和组件,这些都遵循了最佳实践。无需猜测,也不用到处找灵感。就好比有个不唠叨的设计副驾在帮你

当我想在不牺牲质量的前提下快速推进工作,或者大脑靠咖啡因强撑,只需要一个可靠的布局来开展工作时,我就会经常用它。

额外福利:要是你还在看……

首先,感谢你。显然你对优秀设计非常上心。

其次,这里有一份基于心理学的 UI 设计小抄:

  • 去除干扰(少即是多)
  • 引导视觉
  • 遵循默认设置和模式
  • 兼顾情感与逻辑进行设计
  • 让用户有掌控感
  • 要是拿不准怎么做?别耍小聪明,保持清晰就

转载:人人都是产品经理

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

 

image.png

 

 

毫无亮点的界面,该怎么加设计感?这个破班,不上也罢!

涛涛

你是不是也常遇到这种情况:拿到手的界面原型平平无奇,满屏都是基础文字和按钮,想优化加设计感却无从下手,改来改去要么还是单调乏味,要么画蛇添足影响体验,最后只能烦躁吐槽:“这破班,不上也罢!”

设计的理性与感性:以逻辑为基,以情感为翼

涛涛

设计的感性与理性之争,似乎从未有过标准答案。有人将设计视作灵感迸发的艺术创作,重感性表达;有人将其当作解决问题的工程实践,尊理性决策;也有人笼统说 “要平衡二者”,却始终说不清该如何平衡。事实上,这场争论的核心误区,在于混淆了设计的决策过程与表达结果两个维度。设计从来不是非此即彼的选择,而是一场理性为根、感性为枝的生长 —— 理性决定设计的方向与可行性,让设计不偏离解决问题的本质;感性赋予设计的温度与感染力,让设计超越功能成为与用户共鸣的载体。二者并非对立或并列,而是层层嵌套的先后关系:先以理性锚定目标,再以感性点亮价值。

如何为日本市场打造多场景设计语言

鹤鹤

围绕「如何更好地触达日本用户」这一目标,并行探索了两种不同的设计方向:
一种侧重‘日式美学体验’,另一种侧重‘saas商业信任’。
这个过程引发了我们关于「美学价值」与「商业目标」如何平衡的深度思考,本文旨在沉淀与分享我们团队的这次探索过程与方法论。
首先,设计之前先读懂日本美学的“潜台词”:
日本设计常被视为高级感的代名词,其设计感强的同时能保证信息足够清晰明了。这背后是深植于其传统哲学的独特美学——「间」(Ma)与「侘寂」(Wabi-Sabi),一种于克制中见风骨的艺术。它并非悬浮的理论,而是可以被转译为现代设计语言的实用准则。
对我们而言,其核心是
通过克制的色彩、有序的留白和对细节的极致打磨,践行“少即是多”的哲学理论
一、色彩:「和风三色」的碰撞
在色彩选上,我倾向于从日本传统色谱(https://nipponcolors.com/)中汲取灵感。相比于高饱和度的色彩,源自自然的
低饱和度、低明度的配色
更能营造出沉静、雅致的氛围。为了让设计更具识别性,会考虑适度选择
樱色、松绿、靛蓝
三个颜色,唤起用户对日本文化的深层共鸣。
简单来说:樱色、松绿、靛蓝这三种颜色,虽然没有一个官方固定的名称,但它们的确是能够完美代表日本传统审美和自然观的经典色彩组合,之所以如此具有代表性,是因为每一种颜色都深深植根于日本的自然、文化和历史之中,感兴趣的同学可以自己去了解一下,在这里我们把它们简称为
「和风三色」。
 
二、布局:严谨的留白与“直角vs圆角”的思辨
布局是日式设计的灵魂,而留白(间)则是其精髓。
视觉元素间的留白比例通常会达到30%-50%
,远超一般的设计标准。这不仅是为了美观,更是为了引导视线,让信息有序地呈现。设计中严格遵循网格系统,对文字与图片的间距、字体的行间距进行精细到像素级别的调整,构建一种“板正”的秩序感。
参考:https://www.webdesignclip.com/
 
这里有一个很有趣的细节值得探讨:
边角处理的选择
选择圆角——能带来亲和、自然的感觉,符合一部分日式设计中对
“有机形态”
的追求。
选择直角
——
基于严格网格系统的排版中,锐利的直角能够最大化地强化秩序感和专业性,让整个界面看起来如同精心切割的木工作品,精准而有力。
选择哪一种,取决于想传递的具体气质,我们也是应用到了不同的场景里进行尝试。
三、图片:承载“视觉呼吸”的侘寂之窗
在日式排版中,图片往往不只是信息的补充,更是
营造“视觉呼吸感”的关键载体
因此,在图片选择上,需要格外注意它能否传达出「侘寂」美学中那种对不完美、无常、自然的敬畏感。
通过
大量的留白来突出主体
,引导观者进入一个宁静的哲学意境。
它们与文字和图标一起,共同构成了那个充满呼吸感、值得细细品味的设计空间。
 
站点实战复盘——两种设计策略的并行探索:
一、 两种设计哲学(方案)的碰撞
1、以‘日式美学优先’建立情感连接
方案A ————
  •  
    沟通方式:
    感性沟通——传达“我能让你变得很有品位”的概念,向他们兜售一个关于“理想之家”的筑梦工具;
  •  
    设计目标:
    希望能第一时间抓住用户眼球,让用户感知到这是一家高级的公司;
  •  
    风格调研:
    在本地用户投票调研中拿到了不俗的票数,说明成功地引发了用户“共鸣”;
  •  
    差异化:
    在普遍SaaS网站中,风格比较独特鲜明;
  •  
    总结:
    通过大面积的留白、克制的和风配色、以及严谨的网格系统和锐利的直角,去传递产品的专业与品位,旨在先与用户建立情感共鸣。
     
     
2、以‘本土信任优先’驱动商业转化
方案B ————
  •  
    沟通方式:
    理性沟通——传达“我们很厉害”的概念,告诉用户我们在卖一个“解决方案”;
  •  
    信赖感强:
    蓝色主色搭配黄色的辅助色,配合线条插画,是日本SaaS网站建立用户信任的“标配”元素;
  •  
    风格清晰:
    明确的SaaS风格,降低用户认知成本,同样在本地用户投票调研中拿到了不俗的票数;
  •  
    总结:
    符合日本主流SaaS网站的设计范式,开门见山地展示了软件的核心功能、客户案例墙、增长数据,通过“理性沟通”,用最快的速度告诉用户“相信我,我能帮你解决问题”;
 
*配图仅截取方案的某一部分
二、团队的决策与沉淀:设计策略的“情境化”应用
经过用户调研和团队内部的深入讨论,我们达成共识:在SaaS官网这一
以“转化”为核心
的特定场景下,以方案B——“信任优先”的策略更贴合现阶段的商业目标。
它在建立用户信任、降低认知和决策成本上表现更优,是更稳妥的市场切入策略。最终上线后,我们的结论也在日本市场中得到了相应的数据验证。
当然,我们对于方案A的验证也没有完全舍弃,而是应用在线下推广的应用中,在平面设计领域尽可能发挥出日式美学的魅力。
image.png
三、设计的答案,永远在“情境”之中
我们只是在不同声道上与用户对话,作为设计师,我们的目标就是成为一个“多声道”的沟通者,既要懂得如何用“工程师”的语言搭建高效的转化桥梁,也要懂得如何用“艺术家”的语言构建引发共鸣的情感空间。
这或许也是国际化设计最迷人的挑战吧!
 
 
作者:群核科技MCUX
链接:https://www.zcool.com.cn/article/ZMTY3ODA2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

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

 

image.png

 
 

为什么 AI 产品都爱用蓝紫色?背后藏着色彩心理学与行业巧思

鹤鹤

打开手机里的各类 AI 应用,你大概率会被一种蓝紫色调 “包围”:通义 APP 的 logo、百度的问 AI 按钮、钉钉的 AI 表格图标、讯飞星火的官网 banner……
 
可用的色彩那么丰富,为何 AI 产品偏偏对蓝紫色 “情有独钟”?其实这种选择并非设计师随意为之,背后既贴合大众的认知习惯,也藏着心理学逻辑与行业设计巧思。

image.png

一、色彩设计心理学:精准契合 “稳重 + 创新” 的核心需求

 
颜色从来不止是视觉装饰,更承载着大众的心理联想,而蓝紫色恰好精准踩中了 AI 产品最需要的两大认知标签 ——“靠谱稳重” 与 “前沿创新”。
 
蓝色自带的 “信任感” 早已深入人心:支付宝用蓝色传递安全可靠,多数科技品牌以蓝色彰显专业严谨,AI 产品自然也借助这份 “信任红利”,让用户从视觉上就先认可其技术实力。
 

image.png

但仅靠蓝色远远不够,AI 功能还需凸显 “新意”,避免陷入传统科技产品的沉闷感。此时紫色的加入,恰好补上了 “创新感” 的缺口:紫色由蓝色与红色调和而成,既保留了蓝色的理性稳重,又融入了红色的活力,却无红色的刺眼感,比蓝色多了几分创造力与神秘感。

image.png

 
这种 “理性基底 + 创新活力” 的双重质感,堪称为 AI 量身定制 ——AI 既要靠严谨算法体现逻辑,又要靠创新功能吸引用户,蓝紫色的组合完美适配这一核心特质。

image.png

以钉钉为例,其主色调为蓝色,但在 AI 相关设计中大量融入紫色调:官网首页 banner、分类卡片、功能按钮、UI 界面及装饰图形等,均采用蓝色搭配浅紫、粉紫的组合,既保留了品牌的专业感,又传递出 “能创造新价值” 的工具属性,精准契合 AI 突破常规的定位。这种 “蓝色稳根基 + 紫色添新意” 的搭配,让 AI 产品既不冰冷遥远,又不失专业可信度。
 

二、打破科技色惯例:在同质化中实现差异化突围

 
早年科技圈几乎是 “蓝色的天下”:海外的 IBM、Meta、微软、推特等品牌,均是蓝色的重度使用者;国内不少互联网品牌的主题色选择,也或多或少受此影响。

image.png

若 AI 产品继续沿用纯蓝色,极易在同质化竞争中被淹没,而蓝紫色则成为最具性价比的破局方案。一方面,蓝紫色调未脱离 “科技感” 的大众认知框架,不会让用户产生陌生感;另一方面,鲜艳的蓝紫渐变自带强烈视觉吸引力,能营造出未来感与现代感,快速抓住用户眼球。随着越来越多 AI 产品采用这一配色,蓝紫色逐渐成为行业视觉约定,帮助用户快速识别 AI 工具与相关内容。

image.png

 
阿里通义千问便是典型代表:设计中摒弃了阿里系传统的橙红色,也未跟风科技圈的纯蓝色,转而采用青蓝到亮紫的渐变设计,从 logo、页面 UI 到宣传海报,均贯穿蓝紫色调。既与其他 AI 产品形成差异化辨识度,又牢牢扎根于大众对 “科技色调” 的认知,实现了平衡与突围。
 

三、数字场景 “天生百搭色”:适配多场景使用需求

 
AI 产品需适配手机、电脑等多终端的日常使用,而蓝紫色恰好是数字场景的 “理想配色”,经得住各类屏幕与使用场景的考验。
 
其一,显示效果友好。蓝紫色在屏幕上不会像红、黄色那般刺眼,也不会因过浅而模糊不清,尤其是渐变效果,能在手机、电脑上呈现出丰富层次感。无论是深色模式下的护眼需求,还是浅色模式下的醒目度要求,蓝紫色都能完美适配,契合用户昼夜切换的使用习惯。

image.png

 
其二,视觉效果突出。蓝紫色搭配和谐不易出错,同时贴合当下设计潮流,能让用户直观感受到产品的新潮感,提升对产品的好感度。
 
当然,蓝紫色并非 AI 产品的 “万能公式”:ChatGPT、腾讯元宝采用绿色主题,更显活泼灵动;ima 页面以浅绿色为主,按钮等元素搭配深灰色,无明确主题色;纳米 AI 的 logo 选用红色,风格特立独行(这类配色在 AI 产品中相对小众,不建议轻易尝试)。

image.png

 
但对绝大多数 AI 产品而言,蓝紫色仍是最稳妥的选择:既契合大众对 “靠谱科技” 的认知,又能在竞争中脱颖而出,还能适配各类使用场景。下次再看到蓝紫色调的 AI 产品,你便会明白,这背后藏着设计师精准拿捏用户心理的 “设计巧思”。
 

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

 

image.png

8 个极具巧思的 UI 设计案例,打破同质化困局

涛涛

随着设计行业的蓬勃发展,产品 UI 的整体水准持续提升,但同质化现象也愈发明显。想要让产品在同类竞品中脱颖而出,设计师需要在细节表达、功能适配、情感共鸣等维度持续探索。今天就为大家精选 8 个极具创意的 UI 设计案例,希望能为你的设计实践带来新的灵感。

日历

链接

个人资料

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

存档