随着电动车的发展,驾舱也越来越智能,对设计的要求也越来越高。从一开始的只是展示信息,到现在的情感陪伴、多感官交互,这篇文章,我们来看看都有哪些变化。
在科技飞速发展的今天,汽车已不再仅仅是一种交通工具,更是人们生活中的重要伙伴。随着人机交互技术的不断进步,智能驾舱多感官交互正从满足传统的安全驾驶需求逐渐转变为提供有情感的智能 AI 陪伴需求,为驾驶者带来全新的出行体验。
在过去,智能驾舱的主要功能是确保驾驶的安全。通过先进的传感器、显示屏和控制系统,为驾驶者提供车辆状态信息、导航指引和安全警示等。例如,高清数字仪表盘能够清晰地显示车速、油耗等关键数据,帮助驾驶者随时掌握车辆运行情况;倒车影像和雷达系统可以在倒车时提供清晰的后方视野,降低碰撞风险。然而,这种以安全为核心的智能驾舱虽然满足了基本的驾驶需求,但缺乏情感互动和个性化体验。
如今的智能驾舱多感官交互技术能够实现对驾驶者情感状态的识别。车内的摄像头和传感器可以捕捉驾驶者的面部表情、语音语调、身体动作等信息,分析其情绪变化。当检测到驾驶者疲劳时,智能 AI 会发出温馨的提醒,建议休息或播放轻松的音乐来缓解疲劳;当驾驶者感到焦虑或紧张时,智能 AI 可以通过调节灯光颜色、播放舒缓的音乐或者讲述有趣的故事来帮助驾驶者放松心情。
智能 AI 还能根据驾驶者的情绪做出个性化的回应。例如,如果驾驶者心情愉快,智能 AI 可能会播放欢快的音乐并与驾驶者进行愉快的交流;如果驾驶者情绪低落,智能 AI 则会给予安慰和鼓励,让驾驶者感受到被理解和关心。
基于对驾驶者的了解,智能驾舱可以提供高度个性化的交互体验。智能 AI 会记住驾驶者的喜好,如喜欢的音乐类型、温度设置、座椅调节角度等,并在驾驶者上车时自动调整到相应的状态。这种个性化的服务让驾驶者感受到车辆是为自己量身定制的,增强了驾驶者与车辆之间的情感连接。
智能 AI 还可以根据驾驶者的日常习惯和兴趣爱好提供个性化的建议和服务。比如,如果驾驶者经常在周末去郊外游玩,智能 AI 可能会在周末来临前推荐适合的郊游地点和路线;如果驾驶者喜欢听某一类型的广播节目,智能 AI 会在合适的时间自动播放该节目。
智能驾舱不再是一个孤立的空间,而是可以与外界进行社交互动的平台。通过车联网技术,驾驶者可以与家人、朋友保持联系,分享自己的行程和感受。例如,在行驶过程中,驾驶者可以通过语音指令发送消息给朋友,或者与家人进行视频通话。
智能 AI 还可以组织车内的社交活动,增强驾驶者与乘客之间的互动。例如,在长途旅行中,智能 AI 可以发起游戏或话题讨论,让大家在旅途中充满乐趣。
对于长期驾驶者来说,智能驾舱可以成为一个陪伴成长与学习的伙伴。智能 AI 可以记录驾驶者的驾驶习惯和技能提升过程,提供针对性的驾驶建议和培训。例如,当驾驶者在某个驾驶操作上存在不足时,智能 AI 会及时指出并提供改进方法。
智能 AI 还可以提供各种知识和信息,满足驾驶者的学习需求。比如,在等待红绿灯的间隙,智能 AI 可以播放一段新闻、历史故事或者科普知识,让驾驶者在碎片化的时间里不断学习和成长。
高清显示屏和数字仪表盘不仅可以提供车辆信息,还可以展示温馨的画面和个性化的主题,根据驾驶者的情绪和喜好进行变化。例如,当驾驶者心情愉悦时,显示屏可以呈现出绚丽的色彩和欢快的动画;当驾驶者需要放松时,显示屏可以切换到宁静的自然风景画面。
氛围灯的运用也为情感交互增添了色彩。不同颜色的氛围灯可以反映不同的情绪状态,营造出相应的氛围。比如,蓝色的氛围灯可以带来宁静的感觉,红色的氛围灯可以增加活力和激情。
高品质的音响系统可以播放各种类型的音乐和声音,满足驾驶者不同的情感需求。智能 AI 可以根据驾驶者的情绪选择合适的音乐播放列表,或者根据场景自动调整音乐的风格和音量。
语音交互更加自然和亲切。智能 AI 的语音不再是机械的合成音,而是具有情感色彩的声音,能够更好地与驾驶者进行交流和互动。
座椅的按摩功能和温度调节可以根据驾驶者的身体状况和情绪进行调整,提供舒适的驾驶体验。例如,当驾驶者感到疲劳时,座椅可以自动启动按摩功能,帮助驾驶者放松身体。
方向盘和控制面板的触摸反馈更加灵敏和个性化,让驾驶者在操作过程中感受到与车辆的互动。
香氛系统可以释放不同的气味,调节车内的氛围。智能 AI 可以根据驾驶者的情绪和喜好选择合适的香氛,如清新的花香可以带来愉悦的感觉,舒缓的草本香可以帮助驾驶者放松心情。
随着技术的不断进步,智能驾舱多感官交互将在满足情感智能 AI 陪伴需求方面发挥更大的作用。未来的智能驾舱将更加智能化、个性化和人性化,成为驾驶者真正的情感伙伴。汽车制造商和科技企业将不断创新和完善多感官交互技术,为驾驶者带来更加丰富、温暖的出行体验。
从满足安全驾驶需求到提供有情感的智能AI陪伴需求,智能驾舱多感官交互的发展为汽车行业带来了新的机遇和挑战。通过情感识别、个性化交互、增强社交互动和多感官技术的支持,智能驾舱将成为驾驶者生活中不可或缺的一部分,为人们的出行带来更多的乐趣和温暖。
本文由 @INFP怡伶设计 原创发布于人人都是产品经理。未经许可,禁止转载。
题图来自 Pexels,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在设计领域,有些原则虽然我们经常使用,却可能并不熟悉其背后的理论。冯·雷斯托夫效应(Von Restorff Effect)就是这样一种现象,它解释了为何在一系列相似元素中,独特的那个更容易被记住。
在我们的日常生活中,心理学的影响无处不在。它像一把神奇的钥匙,能打开人们内心深处的秘密。作为设计师,我们更应该掌握并运用心理学,将其融入我们的设计中,从而创造出更具有吸引力和影响力的作品。
设计并不仅仅是形状、颜色和布局的组合,更是对人类心理的探索和解读。我们的每一个设计决策,都与用户的心理状态和认知过程息息相关。如何抓住用户的眼球、引发他们的兴趣、引导他们的行为,这些都是我们需要深入研究的课题。
在众多的心理学原理中,冯·雷斯托夫效应(Von Restorff Effect)是一个值得设计师们关注的设计法则。这个效应揭示了一个有趣的现象:特殊的东西往往比普通的东西更容易被人记住。这就意味着,在设计中,我们要制造一些“特殊”的元素,使它们能够从众多的信息中脱颖而出,成为用户关注的焦点。今天笔者就带大家了解一下设计中常用的心理学之一冯·雷斯托夫效应。
在1933年的德国,一个名叫海德维希·冯·雷斯托夫的医生开启了一项改变我们对人类记忆理解的实验。她深入探索了当人们面对一系列物品时,他们的记忆是如何运作的。通过精心设计的对比实验,她发现了一个令人惊奇的现象:在一组物品中,那个最特别的物品总是更容易被人们记住。
这一发现为我们揭示了一个核心事实:特别的事物更能吸引我们的注意力,并在我们的记忆中留下深刻的印记。想象一下,在一组物品中,如果有一个被聚光灯照亮,那么相比其他未被照亮的物品,它无疑会成为人们关注的焦点,从而在记忆中留下更深的痕迹。
这个人类行为和记忆的规律后来被命名为“冯·雷斯托夫效应”。这一效应不仅仅是一个简单的观察,它实际上是人类行为学和心理学领域的一项重要研究成果。随着时间的推移,这一效应逐渐被应用于美学和设计领域,为设计师们提供了全新的视角和工具,以创造出更具吸引力和影响力的作品。
自冯·雷斯托夫效应被正式确立命名以来,众多科研学者在此基础上进行了更深入的研究,他们不仅剖析了这一效应的内在机制和影响因素,还探讨了其在不同情境下的应用。随着研究的深入,对于这一效应的理解也在不断加深,并衍生出了许多其他的理论和学术观点。
冯·雷斯托夫效应为我们提供了一个独特的视角,帮助我们更好地理解人类记忆的运作方式。通过运用这一原理,我们可以在设计中有意识地创造出令人难忘的元素,从而与观众建立更深刻的联系。无论是在广告、品牌推广还是产品设计中,突出特别的元素都是一种有效的策略,可以帮助我们更好地吸引观众的注意力并留下深刻的印象。
冯·雷斯托夫效应,又被称为隔离效应或新奇效应,揭示了人们在记忆中的偏好。当情境或经历中出现与众不同的刺激时,这种效应尤为明显。
在当今信息爆炸的时代,用户往往没有耐心去仔细查找信息,而是快速扫视。因此,设计师需要巧妙地运用莱斯托夫效应,使关键内容从繁杂的信息中脱颖而出,吸引用户的目光。
统一性是设计的基础,但只有差异化的元素才能让信息从页面中脱颖而出。通过巧妙运用颜色、形状、布局等元素,我们可以创造出与众不同的视觉效果,引导用户的视线。通过巧妙地突出关键内容,我们能够更好地与用户沟通,引领他们的注意力,为业务创造更大的价值。
在界面设计中,我们常常会遇到这样的情况:在同类型的元素中,某一元素与其他元素存在显著差异,这种现象我们称之为“背景不同”。为了使某个模块或元素在用户心中留下深刻印象,我们可以利用环境差异来提高其识别度和记忆度。这种手法在UI设计中被广泛应用,它利用了冯·雷斯托夫效应,能有效吸引用户点击。
例如淘宝底部标签栏中的四个ICON,唯独首页的第一个ICON(品牌logo)风格与众不同。即使离开了该页面,这个特殊的ICON依然让人印象深刻,饿了么第二的图标也是如此。因此,我们在设计界面时,若想吸引用户的注意或提高点击量,可以打破常规,让特定元素在同背景下脱颖而出。
再比如下图的个人中心界面,功能入口模块均采用ICON展示,而游乐场模块却采用了特殊的布局和设计。因此,当用户进入个人中心时,最先映入眼帘的便是游乐场模块。这也解释了为什么我们在进行广告和活动投放时,需要特别设计的原因。
当遇到与过去经验显著不同的情况时,我们的大脑会产生一种特殊的效应,这种效应被称为“经验不同”的效应。例如,在骑自行车的过程中,我们通常习惯于左手控制左把手,右手控制右把手。但是,如果我们尝试用双手交叉的方式来骑车,结果很可能会摔倒。从此以后,每当我们听到或描述有关骑车摔倒的事情时,我们都会立刻想起那次“经验不同”的尝试。
同样地,淘宝和京东在618、双十一等大型促销活动时,会选择重新设计他们的首页。与往常的设计相比,这些新的首页设计通常会增加更多的促销入口,甚至改变ICON的风格。从冯·雷斯托夫效应的角度来看,这种与以往不同的设计能够更好地吸引用户的注意力,加深用户的记忆,并扩大活动对用户的影响力。
在视觉层面难以实现强烈差异化时,我们可以通过功能来实现有效的隔离。以微信为例,其置顶功能允许用户将好友或群聊消息置于顶部,从而与其他信息区分开来。这种设计确保了关键信息的优先级,使用户能够更快速地找到和关注所需内容。通过巧妙地运用功能,我们可以轻松地解决视觉上的一致性与差异化之间的矛盾,为用户提供更加流畅和个性化的体验。
静态页面容易让人视觉疲劳,动效能够更加生动有趣地展示内容,引导用户更加关注页面。相较于被动接受信息,动效能够更加有效地吸引用户注意。
随着Banner自动轮播的普及,用户对其的吸引力逐渐降低。面对不断变化的广告,用户不再耐心地逐个浏览。当无法获取所需信息时,他们的视线会迅速转向其他区域。
为了应对这一挑战,腾讯视频首页的Banner采用了背景联动的形式。这意味着头部背景色会根据Banner图片的色调进行变化,从而扩大了内容的变化空间。这种设计不仅使广告更加引人注目,还使用户更容易被吸引并保持关注。
频道页的入口方式多种多样,金刚区icon无疑是最优选择。若要突出展示某些业务功能,单一的icon配合动效可有效吸引用户关注。此策略简单高效,有助于用户快速找到所需内容。
在设计界面时,我们追求的是在有限的空间内展示更多的有效信息,避免信息的无效重复。但在电商平台中,尤其是涉及到利益点时,我们需要确保信息具有足够的价值感和吸引力。
以智行APP开通会员为例,领神卡作为核心卖点被突出展示,采用了平铺展开的方式,从而突显其价值。相对其他权益则相应地进行了弱化处理,以保持整体信息的清晰度和重点。这样的设计既充分利用了屏幕空间,又确保了用户能够快速了解到核心的利益点。
页面信息层次分明,信息层级越高,用户感知越强烈,越能吸引注意。例如,模态弹窗处于最上层,与内容层完全隔离,用户无法忽视。其次是非模态悬浮层,与内容层隔离,但不影响用户操作。还有侧边悬浮按钮、顶部或底部悬浮横条等。
受“危险按钮”的影响,过去设计师常常给予负向情绪操作很高的视觉层级,例如退出登录。这样的设计意图是警示用户操作危险,但视觉上却过于强调,甚至有些“喧宾夺主”。近年来,移动端设计中这种矛盾逐渐减少,但仍然存在。与其强调操作的难度和危险性,不如考虑如何让用户自然地忽视这些操作,减少不必要的干扰。从冯·雷斯托夫效应来看,这种设计方式有本末倒置之嫌,应尽量避免。
新手设计师常常会遇到想要突出所有元素,但最终无法突出任何一项的问题。页面中的特异点应该属于少数,如果所有元素都想做得不一样,都会让页面整体视觉效果崩溃。因此,在设计中要学会取舍,选择最重要的元素进行突出,才能达到最佳的视觉效果。
总的来说,将冯·雷斯托夫效应运用到设计中,能帮助我们创造出更具吸引力、更容易被记住的设计。但请记住,任何设计决策都应以用户为中心,了解他们的需求和心理是关键。只有这样,我们才能真正创造出打动人心的设计。
专栏作家
大漠飞鹰;人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘,利用设计的手段为受众用户带来更好的体验,即好看、好用。
本文原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
Bento UI其实流行已经有一段时间了,但是近一两年来才展现出发展的势头,Bento UI的体验和用户友好性在设计中的价值不断被认识与验证。本文就Bento UI设计风格进行分析总结,希望能给你一些启发。
Bento UI的流行已经有一段时间,但直到最近一两年,它才真正展现出强劲的发展势头。这是因为设计师们逐渐认识到,Bento UI的体验和用户友好性在设计中的价值。
关于Bento UI的起源存在一些争议,就像许多设计趋势一样。有人认为Bento UI的成功应归功于苹果公司,因为苹果在其UI元素中采用了类似的风格。另一些人则指出,微软的Metro UI实际上就是Bento UI的一种体现。不管它的来源如何,毋庸置疑,Bento UI正变得越来越受欢迎。随着其使用量的增加,它作为一种UI风格的可靠性也在不断得到验证。
Bento UI 的灵感来自便当盒(一种精心布置且视觉上吸引人的日本料理)概念,提供了令人耳目一新的设计。它不仅仅是一个设计框架,而是一种兼顾用户需求和视觉吸引力的整体理念。这篇文章让我带你深入研究一下 Bento UI 如何实现实用性与美观的相互融合。
Bento UI设计的优点多种多样,它将实用性和美学完美融合,为用户带来出色的体验。
1. 强调模块化和可重用性: Bento UI将界面元素拆分为模块化的组件,使得设计师可以轻松地组合、调整和重用这些组件,从而提高了设计效率和一致性。
2. 简洁而美观的外观: Bento UI注重简约、现代和美学的结合,带来干净、清晰且视觉吸引人的界面。这有助于提升用户的第一印象,增加用户停留时间和参与度。
3. 良好的用户体验: Bento UI注重用户导向,通过清晰的布局、直观的导航和有趣的交互元素,为用户创造出愉悦和流畅的浏览体验。
4. 强化品牌形象: Bento UI可以根据品牌的风格和价值观进行定制,从而增强品牌在用户心中的形象和认知。一致的设计元素有助于塑造品牌的独特性。
5. 强调交互和动画: Bento UI强调微交互和动画效果,为用户创造出更加生动和有趣的互动体验。这不仅吸引用户的注意,还增强了用户的参与感。
6. 提升移动设备体验: Bento UI通常是响应式的,可以自适应不同的屏幕尺寸和设备类型。这为移动用户提供了更好的体验,无论是在手机、平板还是桌面电脑上。
要设计出成功的Bento UI,首先需要理解其核心原则。简约、模块化和活力交互是Bento UI的灵魂。简约的设计风格能够使界面更加清晰明了,而模块化的组件则让设计师能够灵活构建页面,快速满足不同需求。活力交互,包括动画效果和微交互,能够增强用户与界面的互动感,提升用户体验。
在Bento UI中,清晰的布局是至关重要的。界面元素应该有明确的排列,避免过于拥挤和混乱。通过合理的分区和对齐,可以将信息有序地呈现给用户,使其能够快速获取所需信息。此外,清晰的布局还能够增强用户的舒适感,使其更乐意与界面互动。
Bento UI倡导使用鲜明的颜色和独特的图标设计。色彩可以传达情感和品牌特点,因此选择适合项目风格的颜色是至关重要的。同时,图标作为界面的视觉元素,能够直观地传达信息,提高用户的使用效率。确保颜色和图标的使用既美观又有意义,能够为用户带来更好的视觉体验。
Bento UI的动画效果和微交互是设计中的亮点之一。动画可以增强用户与界面的互动感,使用户感受到界面的活力。微交互则能够提供反馈,引导用户完成操作。设计师可以巧妙地运用过渡效果、淡入淡出和其他动画元素,使界面变得更加生动有趣。
在整个设计过程中,保持一致性和用户友好性至关重要。界面的风格、字体和元素应该保持统一,以确保用户在浏览不同页面时能够感受到一致的视觉效果。另外,界面的导航和操作也应该简单明了,让用户能够轻松找到所需内容。
一些案例:
iPhone 14 Pro介绍页面中,您将看到以这种方式呈现的高级功能介绍,并通过多种视觉处理来保持有趣。虽然有不同的视觉处理,但由于使用大小和渐变文本有效地引导用户的眼睛,内容不会相互冲突。
Bolt对每个图块使用了更加一致的视觉方法,以使内容更易于浏览。这对于传达功能并引导他们在最后查看更多内容非常有用!
Linear的设计师也采用了Bento UI的设计风格,我个人很喜欢他们这样的设计。
Iconwerk使用Bento UI风格来展示他们最好的图标设计。每个内容框都保持得非常小,这样当它们全部放在一起时,就不会感到拥挤。
Traf使用Bento UI以时尚的深色主题设计来布局他的作品集作品。
是否选择应用Bento UI取决于您的项目需求和目标。如果您追求引人入胜的界面、活力的交互和用户友好性,Bento UI可能是一个理想的选择。特别是对于品牌展示、产品推广和互动性强的网页,Bento UI能够为您的项目增添独特的魅力和吸引力。然而,设计师应该根据项目特点,灵活运用Bento UI的元素,以确保最终的设计能够满足用户需求并达到预期效果。
但是Bento UI并非适用于所有项目。它最适合于拥有简洁层次结构的项目,因此,如果您的项目层次结构较为复杂,Bento UI可能并不适合。不过,如果您的项目存在复杂层次结构,或许是时候改变这一现状了。
Bento UI的设计和感觉极具现代氛围,我预测它将在未来一段时间内持续受欢迎。随着苹果等专业设计团队的使用还有诸如Vision Pro等新技术的出现,它甚至可能发展成我们目前尚未能够预见的新形态。
Bento UI是一种引人注目的设计风格,简约美学、动感交互和模块化创造力为设计带来了新的可能性。作为一种新兴的设计趋势,Bento UI正在成为越来越多设计师和品牌的选择。
通过将Bento UI的理念融入设计中,我们能够为用户创造出令人难忘的体验,将品牌价值传达得更加生动而深刻,从而实现更好的用户参与和品牌传播效果。
本文由 @收手的阿祖 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
2022 原创输出第 15 篇,我们互相努力。
作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。
最近黑马哥结合落地产品所呈现出来的设计趋势,进行了这方面的探索,今天以其中之一的趋势-极光风和大家先聊一聊。
一、极光风趋势的来源
二、UI 场景中的极光风设计
三、实现极光风设计的方法
四、极光风案例实战
五、小结
极光(Aurora),是一种绚丽多彩的等离子体(发光)现象,在夜间出现灿烂美丽的光辉。在南极被称为南极光,在北极被称为北极光,视为自然界中最漂亮的奇观之一。(来源于百度百科)
这样的自然奇观被摄影师捕捉到静态的影像中,设计师再结合这样的影像作品,视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用,形成一种流行的视觉风格。在众多的互联网产品设计中,也经常运用这种类似极光的视觉影像风格,称之为 Aurora UI。
在产品设计底层需求获得满足之后,感光体验的提升被重视,视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层,在背景层和装饰性元素上面发挥,使得 Aurora UI 得到了发挥的空间。
富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致,助推了其成为 UI 设计趋势的关键,下面就让我们一起来看看落地产品中的 Aurora UI。
由于在众多落地产品中被广泛运用,形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似,也有设计师将该风格归类为弥散光,下面就看一下具体的运用场景。
2.1、强化导航栏设计的视觉感
如果想要强化顶部导航栏的视觉感,通常是利用品牌色作为背景颜色,这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式,而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力,也能使得整体风格更加年轻化。
2.2、强化个人中心顶部视觉区域
随着互联网用户年轻化的趋势,在配色上面逐步趋近于年轻化,众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势,可以是同色系的饱和度变化,也可以是不同色相的相互融合。利用低饱和度高明度的配色原则,使得整体的视觉感更加轻量化,视觉效果清新自然且通透力更强。
也有基于品牌色结合极光风进行融合,相对单色来说效果更加丰富自然,使得背景的变化更加多样。
2.3、丰富背景设计的视觉感
除了在顶部区域进行运用以外,也有一些产品会在背景层面进行强化,相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少,在局部背景层上的运用比较多些,可以强化局部模块的视觉感。
2.4、点缀弹窗设计局部
极光风的设计表现也会出现在一些局部功能的细节处,比如运用到弹窗的色彩处理中,作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然,也不会过度干扰其他元素的呈现。
2.5、强化卡片式设计局部
卡片式设计也是近些年运用比较多的设计趋势之一,基本是以白色卡片居多,具有整合信息的好处。在卡片的边缘位置强化色彩,可以使得卡片色彩更加丰富,也有一些电商产品是起到与商品形成色彩呼应的作用。
2.6、突出搜索设计的差异化
搜索框的设计在大部分的认知里面都是白色或者浅灰色,也有一些是带有边框的形式,利用低饱和度高明度的配色原则来进行设计,带来的效果更加年轻化。也是一种差异化设计的尝试,打破常规的设计认知。也可以举一反三,在一些按钮或者标签设计中运用。
2.7、分类标签的装饰设计
这是一个装饰性的设计尝试,在突出模块分类的当前状态时,通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化,装饰元素除了线段和一些图形元素以外,极光风的背景元素也是一种不错的表现手法。
2.8、图标设计中的运用
运用到图标设计中通常是出现在质感类图标,辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求,就可以尝试运用极光风的处理技巧,将颜色通过模糊和剪切蒙版的形式融入到图标中,可以使得图标色彩丰富和强化光影变化。
2.9、深色卡片色彩强化
以上案例属于在浅色或者白色的环境中运用,在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用,效果也是非常不错的,可以给深色的卡片一些色彩感和丰富度。
2.10、作品包装中的背景强化
除了在 UI 设计场景中运用以外,最近发现在设计师作品包装中的运用也是非常普遍,用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰,也有在封面设计中重点运用,使得作品集紧贴设计趋势,提高作品的打开率。
2.11、其他场景中的应用普及
在 UI 场景还有很多运用场景,这里仅为抛砖引玉,无论是作为背景强化还是元素装饰,都能带给用户更加年轻化的感官体验。
除了在 UI 场景中呈现以外,极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛,是一个影响范围比较广的设计趋势之一。
通过一些线上的案例欣赏和分析,相信大家对于极光风在 UI 场景中运用都有一定的了解,在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难,关键因素在于控制好配色原理,下面就为大家总结几种实现的方法。
方法 01 :利用不透明度渐变融合
不透明度渐变在设计中的运用比较普遍,利用的是不透明度从 100%-0% 之间形成渐变,让色彩逐渐消失或者淡化。
画一个圆形,选择径向渐变,渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%,另一个颜色不透明度设置为 0%,这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合,即可完成极光风背景设计。
方法 02 :利用模糊度变化融合
这个方法是结合了形状和模糊设置(高斯模糊等),绘制几个大小不等的圆形进行排版组合,然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异,排版错落有致,这样形成的效果比较富有变化。
在颜色的选择上面需要根据背景的强化程度选择,低饱和度的颜色融合性更高,适合作为弱化性质的背景使用。
方法 03 :利用背景模糊融合
背景模糊在 Sketch、Figma 等设计软件中有该功能,是一个影响设计趋势较为常用的功能,特别是在实现玻璃质感和一些质感图标上面非常实用。
在背景层绘制图形,颜色和形状均可自由发挥,然后再绘制一个形状作为调节层,调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色(必须要带有透明度),然后再设置背景模糊,背景模糊数值的大小决定模糊的程度,不透明度的大小决定整体效果的亮度。
方法 04 :利用图片模糊融合
以上的方法都需要进行配色处理,如果色感方面比较薄弱的设计师,也可以挑选一些不错的图片来实现极光风效果。
挑选一张色彩符合要求的图片,然后在 Photoshop 等设计软件中执行高斯模糊,半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外,也可以截取其中的一部分,也许可以带来意想不到的效果。
除了这几个方法以外还有更多不一样的实现方法,大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式,根据想要实现的效果选择最灵活的方法,这样才能便于后期的反复调整。
五、小结
研究落地产品的设计细节和视觉趋势,将有助于提高我们对于当前有效设计趋势的把控,而不仅仅只是停留在概念化的预测阶段,而是行之有效的真实案例。
极光风是近些年运用在落地产品中的 UI 设计趋势之一,通过大量案例验证之后的有效方法,希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多,本次分享的仅为抛砖引玉,后续将和大家探讨更多的有效设计趋势,辅助提高我们的设计能力。
作者:黑马青年(vx: heimaux)
本文由 @黑马青年 原创发布。未经许可,禁止转载。
UI 行业正站在创新与变革的前沿,极简主义与情感化设计的融合、智能交互的驱动、响应式设计的进阶、3D 元素与微交互的崛起以及数据可视化的深入应用等趋势相互交织,共同塑造着未来 UI 设计的全新风貌。对于 UI 设计师而言,紧跟这些趋势,不断学习和探索新技术、新方法,将用户需求与创新设计理念相结合,才能在这个充满活力与挑战的领域中打造出引领潮流、满足用户期待并推动数字产品成功的优秀 UI 作品。
【6】Telegram更新:全面提升应用使用性能
【7】Openvibe:一款将多个社交应用进行整合的开放式社交平台
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。
新需求为我们理解用户需求提供了新的思路,而产品场景化思维则是将这些需求转化为实际产品的重要方法。在产品设计、开发和推广过程中,我们应该充分运用场景化思维,深入分析场景五要素,精准把握用户需求,为用户提供更加优质、个性化的产品和服务,从而在激烈的市场竞争中脱颖而出。
蓝蓝设计的小编 http://www.lanlanwork.com