1. 什么是SUS ?
SUS 全称 System Usability Scale ,系统可用性量表。SUS最初是Brooke于1986年编制,可以科学地量化用户体验,用于完成一系列任务场景后,对产品或系统整体宏观的感知可用性测量。
SUS 全称 System Usability Scale ,系统可用性量表。SUS最初是Brooke于1986年编制,可以科学地量化用户体验,用于完成一系列任务场景后,对产品或系统整体宏观的感知可用性测量。
翻译过后可以得到下面的中文表,参与者在使用产品后对每个题目下面打钩来对产品进行5点评分。(小伙伴们可自行保存)
SUS提供整体可用性评估度量,由10个题目组成,奇数项为正面陈述,偶数项为反面陈述。
第4,5,10三项构成的子量表为“有效性”(Effectiveness)&“易学性”(Learnability) ;第2,3,7,8四项构成的子量表为“使用效率”(Use Efficiency)&“可用性”(Usability);第1,6,9三项构成子量表“满意度”(Satisfaction)。
SUS适用范围广泛,产品新旧版本迭代之间对比,同类型竞品之间对比,同一产品不同终端之间对比均可使用。可采用线上线下问卷调研的方式,简单高效的采集真实用户反馈。避免在初期过早的关注细节。
当收集好用户问卷反馈过后,步骤如下:
1. 对于奇数序号的问题,将其得分减1;(比如第1题分数为4,得分为4-1=3分)
2. 对于偶数序号的问题,将其得分被5减去;(比如第2题分数为3,得分为5-3=2分)
3. 将所有问题最后的得分加在一起,然后乘以2.5;(每个题目的得分范围记为0~4,最大值为40,SUS可用性得分的范围在0~100,换算后乘以2.5)
4. 计算出的结果即为产品的SUS可用性得分。
Tips 注意事项:
1. 填写之前不要进行总结或讨论;
2. 应当要求用户快速完成各个题目,不要过多思考;
3. 第二题和第六题对于参与者可能难以理解,需要解释清楚;
4. 如果用户因为某些原因无法完成其中某个题目,就视为用户在该题上选择了中间值。
SUS分数等级与百分等级的区别:
我将其翻译过后得到中文表,可以大体上感知得出的SUS分数对应的用户可接受范围。
更加细化的SUS用户感知,可参照SUS分数曲线分级范围表:
注意到这里SUS分数等级与百分等级的区别。对照SUS分数曲线分级范围表,如果你的SUS分数为68,说明你的产品比市面上50%的产品可用性要好。也就是说这个产品的用户体验算是合格了,表明需要进行较小的改进。50%中值点对应SUS分数68。((59-41)/ (71-65)= 3 故中值点为65+10/3≈68 ,68分是均值,因此对应百分比是50%。)
1. 量表公开免费,题目简单,只需参与者打分,实施便捷,操作简单;
2. 适用范围广泛,产品初期测试验证,竞品分析,新旧版本对比等等;
3. 研究证明SUS在样本量有限时,可以最快达到效果,可信度系数高;
4. 快速宏观有效区分可用系统(产品)和不可用系统(产品),避免在初期过早的关注细节;
5. 当团队内产生分歧时,SUS让更多的人员参与代替少数意见领袖说了算的形式,定量不追求定性。
6. 小样本量时依然呈现高度的内部一致性,产生真实可靠的反馈结果。
作者:设计师豆浆
链接:https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在数字产品设计日新月异的今天,打造卓越用户体验已成为产品成功的关键。这篇文章精准解析了UX设计的六大核心支柱,从用户研究到无障碍设计,为读者提供了全面且实用的设计框架。
开启用户体验设计探索之旅,首要任务是全面掌握其核心构成要素——这些是构筑绝佳用户体验的基石需求。事实上,在苹果、微软和谷歌等设计推动型科技巨头中,这些因素的关键性是不言而喻的,甚至因此催生了专属职业与角色的诞生。在这六大核心维度中,有一个更是脱颖而出,以至于一个全新的职能部门因此得以形成。接下来,让我们深入剖析这些零部件如何共同定义卓然出色的用户体验设计版图及行业切入点。
在深入分析用户体验设计的六大核心要素之前,我们需要先厘清其核心内涵。从本质上看,用户体验设计是一门创造愉悦且功能强大的体验艺术,确保产品既具有效性又兼具高效性、易用性和用户满意度。它涵盖了一个整体性的设计循环,通过不同维度的优化来最终实现这些目标。可以把用户体验设计比喻成一把“统筹性的大伞”,其下辐射的每个要素都是推动卓越体验构建的重要一环。本篇文章将沿着这把伞的思维体系,逐步探索这些不可或缺的构建模块及其影响力。
用户研究(亦称 UX 研究)之所以能在设计领域占据重要地位,其原因显而易见——它是产品设计的一大核心要素。随着其价值的日益凸显,越来越多的企业开始设立专门的用户研究团队。这一趋势背后的驱动力是什么?源于对用户洞察的深入理解直接决定了能否创造出卓越的产品体验。在探索方案的过程中,用户研究永远都是优先级最高的起点。这个关键过程的核心在于定义所谓的“用户”——通过全面梳理他们的使用体验,挖掘其需求、期望与操作行为,从而描绘出清晰的用户画像。这正是用户研究的精髓之所在。更具体地说,用户研究是围绕用户的需求、目标、行为模式以及心理动机,所展开的系统化调研与分析。执行用户研究有多种专业化方法工具,包括深入访谈、结构化调查、现场可视采样以及定性和定量化的可用性评估测试,每一步都旨在深刻理解目标人群,优化体验闭环。
交互设计是产品设计中的关键环节,此阶段负责精细化用户与系统之间的互动路径与体验设计。设计师需要梳理并规划用户操作触发的系统响应——例如按钮点击后的动作反馈。从提示的生成到任务处理的闭环,每一个交互流程都经过精致打磨。对交互表现的设计需通过深度用户研究与高频次的可用性测试进行不断优化,以确保全流程交互体验既顺畅又高效。
我的清单中提到的第三项是信息架构,这是在设计过程中理解内容与功能的关键环节。它的核心是对内容和功能进行科学的分类组织和标记,以确保产品的功能与结构清晰易懂,能够有效地满足不同用户的认知需求。可以把信息架构理解为产品的结构蓝图,为用户提供在界面元素间高效切换和操作的导引路径。它的价值在于将内容与功能资源以逻辑和体系化的方式呈现。那么如何精准定义哪些要素归属于顶层导航、次级导航或细化导航?此时,一种名为“卡片分类法”(Card Sorting)的用户体验研究方法便派上了用场,它帮助设计师优化信息层级,制定更具洞察力和用户思维的导航设计决策。
*卡片分类法:卡片分类法是一种用户体验研究方法,用于帮助设计师理解用户如何组织和分类信息。参与者通过将内容项(如网站页面或功能)进行排序和分组,提供了关于信息架构的见解。其主要步骤为:首先,每张卡片上写一个内容项;其次,招募目标用户;再次,用户根据理解将卡片分组并命名;最后,识别共同的分类方式。此方法有助于优化网站和应用的导航结构,提高用户体验。
接下来重点分析用户界面设计环节,也就是我们通常所提到的视觉设计,这是 UX 设计中至关重要的一环,主要关注产品的视觉展现层。UI 设计师的职责在于打造具有吸引力且直观自然的视觉体验。他们通过对色彩体系、排版字体、图形视觉以及插画风格的细腻打磨,为产品的整体视觉编码赋予独特且一致的品牌形象。
UX 写作,亦称微文案,是文案写作领域下的一个细分学科,聚焦于数字产品中的文本设计。UX 写作者的核心职责是优化数字界面中的文案,不仅要贴合用户需求,还要显著增强整体用户体验。他们善于运用精准而贴近用户心智的表达方式,撰写既通俗易懂又情感共鸣强的界面文案,从而最大化提升用户的可读性与互动效率。
最后,我们需要聚焦于可访问性——这是确保所有用户(包括有特殊需求的群体)都能高效且无障碍地使用产品的核心要素。作为设计从业者,共情能力是我们设计哲学的重要基石。但这种共情不仅局限于通用用户,还要涵盖那些需要特殊支持的用户群体。在每一次 UI 语义和交互设计中,我们必须以可访问性优先,确保无论用户的能力如何,都能获得最佳的可读性和充分的视觉对比体验,真正实现一视同仁的包容性设计。
作者:Abhi Chatterjee
译者:李泽慧
审核:李泽慧
编辑:丁怡豪
本文由人人都是产品经理作者【TCC翻译情报局】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在B端产品设计的世界里,色彩不仅仅是视觉元素,它还承载着信息传递、用户体验和品牌识别的重要角色。本文深入探讨了色彩空间理论在B端设计中的应用,从基础的色彩空间概念到如何在实际工作中运用这些理论,为设计师提供了一套科学的颜色搭配和管理方法。
对于 B 端产品而言,我们经常会和颜色进行斗争。
比如在工作当中,开发没有正确还原颜色、不知道如何进行色彩配置、以及对于 B 端产品而言,究竟应该如何协调科学的进行颜色的搭配~
最近会讲颜色的部分,整体会分为四篇文章:B 端设计如何理解色彩空间、B 端产品怎样合理搭配颜色、B 端项目的视觉风格、B 端项目颜色的实战技巧。
本篇文章是第一篇,我们先来聊聊产品配色的基础 色彩空间与颜色管理。
不知道各位同学是否遇到这种情况,当你在调整颜色时,就是在漫无目的的在拾色器上来回游走,在被问到为什么要选择这个颜色时,也茫然无措,这时候的你作何感想?
所以颜色还原需要熟练的掌握色彩空间,并配合屏幕进行颜色管理,才能够让设计顺利落地。但颜色其实过于抽象,因此我们将整体内容进行简化,多和大家聊聊在理论背后究竟应该如何与工作内容进行结合。
首先我们先说说色彩空间。
色彩空间又叫色彩模型,它是为了让系统能够准确地描述颜色、使用颜色,进而定义出来的一种颜色组织方式。
比如有一排随机颜色,要按特定规则排列,你会怎么做?我相信,我们首先想到的便是按照不同的色相进行归类。
如果颜色变为10000个,又该怎么排列呢?因此,为了让企业更好地使用颜色、设计师更便利地选择一致的颜色,行业中便提出了色彩空间的概念。
色彩空间其实很简单。因为我们需要使用颜色,且不同人群对颜色的需求不同,所以颜色的排列方式会存在差异。
比如,行业中较为出名的潘通色彩体系,其实是基于印刷行业制定的一种特殊色彩空间;CMYK是为印刷从业者提供的、便于他们更好地进行物料印刷的色彩空间;Lab是一种更强调色彩亮度的色彩空间。
因此,行业会根据颜色的不同规律和自身使用需求,总结整理出不同的色彩空间。
我们目前在工作当中,主要都是聚焦于屏幕当中,因此影响颜色呈现的也就变为:
在我们细致讲解色彩空间的部分时,我们先来了解三个重要的概念。
RGB是显示器当中的颜色基础。
比如在现实世界当中,我们将手机屏幕进行放大,你会发现屏幕都是由红绿蓝三个灯管所组成的。
而 RGB 的色彩模式就是模拟现实世界当中的屏幕显示原理,将灯光照射的逻辑在设计软件当中进行复现,因此在 RGB 的调色盘中,就会分别包含三个输入框,这便是 红绿蓝。
其中,数字 0 代表不发光、255 则是最亮的灯光。
那为什么最亮是 255,不是 250?或者是 280 呢?
原因在于RGB 所有的颜色,最后都需要通过计算机进行运算显示,对于它说并不认识 红色、蓝色,在它的脑袋里(不对,CPU 里面)就只有 0 与 1,因此在计算机存储的时候,一个字节也就是 8 个比特、也就是 2 的八次方、也就是 256,这样 一个色彩信息等于一个字节,数据存储就会更加高效。
所以我们所聊的颜色更多指的是代码层面的颜色设定。
接着我们打开 Figma,看到另一种格式 Hex,那我们称之为是 RGB 模式的精简版。
因为它嫌弃每个输入框都会出现 255(255,255,255 白色)实在太长,不利于我们在日常工作当中进行记录。
因此将每个颜色,三位数值缩减为两位数值(十进制变为十六进制),就是增加英文字符的数据,就能较短的表达颜色,使得颜色表达更为高效。
因为 Hex 只是 RGB 的精简版本,所以 Hex 里面,每两个字符所对应的就是 红、绿、蓝。
比如我们刚才提到的这个蓝色,在 RGB 空间当中为(0,86,255) ,Hex 则是#0056FF,也是一一对应关系。
RGB 听上去似乎很美好,但问题在于两点:
1.颜色的调整不够直观:作为设计师,我们很难模拟灯光的照射思维对颜色进行调整,具体应该增加多少颜色,其实是不够清楚的。我们更熟悉的其实是:亮度、色相、饱和度,因此在调色时会十分困难。
比如我目前是红色,那我要调整到紫色,应该输入多少值呢?其实我们很难进行一个准确的判断。
2.颜色信息与亮度信息的数据混合:导致我们很难对于有一个准确的判断,比如在 RGB 相同的数值当中,明显会感受到 黄绿色 与其他颜色的亮度存在较大差异,这样在调色时,颜色一致性偏差较大。
为了解决这些问题,就提出一种新的色彩模型:HSB
HSB (也叫 HSV)就是通过颜色的 色相、饱和度、亮度 来进行表示。
在色相当中,由于颜色的呈现是色环的方式,因此在数值上是以 0-360 度来进行表示的,在设计软件里面,我们也只能输入所对应的数值。
同时饱和度与亮度都是以百分比的形式进行呈现,饱和度越低,相对应就会给颜色增加白色,使其更灰;亮度越低,就会增加对应的黑色,让其更深。
由于 HSB 的色彩空间的分类模式非常有利于我们进行颜色的调整,因此我们在日常调色时其实会经常用到。
比如日常工作当中,假设我们需要设计一组图标,根据 HSB 颜色的基本原理,我们其实只需要调整不同的色相,就能够得到不同的图标颜色。
但… 颜色上依旧会存在问题。
你会发现当我们调整了色相过后,整体的颜色并没有形成统一。原因在于我们人眼对于 黄绿色的感知 会和红色、蓝色有所不同,我们通常在看黄绿色时会更为刺眼,因此在设计层面上需要单独调整。
所以在 HSB 当中的颜色逻辑上,也并没有解决颜色一致性的问题。于是在 2021 年 Google 提出一种全新的色彩模式,HCT。
HCT 首先会将颜色当中的 感知度、亮度 进行结合,对之前的 HSB 重新调整。
在颜色层面上主要分为:Hue:色相、Chroma:色度、Tone:色调
色相与色度和之前基本类似,但色调上优化了黄绿色凸显问题,让人眼的感知度也加入到了色彩空间当中,使其颜色更为准确。
同时色彩空间的呈现,优化了颜色渐变的流畅性,我们会发现整体的渐变感觉会更为自然。
那为什么 Google 想要做 HCT?
其实因为 Material Design 当中会强调设计的一致性和灵活性,在功能设计上,需要增加一个根据屏幕当中的图标生成与其风格一致的壁纸。
但在之前无论什么样的色彩空间都不能准确的还原颜色。现在就提供了一个可靠的色彩基础,能够让我们在不同的设备、平台和应用场景下,都能够生成具有一致性的色彩方案,同时也能更好地适应各种主题和风格的变化,如亮色模式和暗色模式的切换。
比如,还是以上面这个案例,我们使用 HSB 与 HCT 对颜色进行的色相的调整,那得到的结果明显会发现 HCT 会更加准确。
那 HCT 就真那么完美无瑕?
其实也不然,因为 HCT 色彩空间出现时间较晚,所以在使用上也会有很多问题。
这么深奥的色彩空间,到底要如何使用?
因为 HSB 是设计师最容易理解的色彩空间,因此我们在调色时需要根据数值来进行颜色的调教。
比如说你的颜色很脏,不够干净。其实就是在强调 HSB 当中使用了更多的黑色,我们便可以调整到这个色彩空间当中,去增加 B 的值(也就是第三个输入框)
比如说你的字体很灰,不够明确。
其实就是在说 你的亮度太高,需要减少亮度,也就是 H 的值(也就是第一个输入框)
因为每一个屏幕所显示的颜色其实都不太相同,因此色彩调整时要多看数据,观察数据之间的对比变化。
比如以 B 端产品的中性色为例,现在系统当中所使用的正文颜色为 #333333,看到过后就明确知道颜色深度不够、颜色也不透气。
我们就会按照,先确定颜色色相,为灰色偏蓝色,因此在色相当中需要拖动色环找到合适的色相;
紧接着确定饱和度,因为要偏蓝色,但不宜过多,因此整体的数值只会在 1-5 之前浮动;
最后确定深度,之前颜色过于浅,需要加深,所以直接减少,变为 22 左右的数值。
其次在判断颜色时,也会更具章法。
在多辅助色的情况下,我们可以使用 HCT 对颜色进行判断。
对于日常工作来说,我们可以使用 Figma 当中的 color Space 插件 进行日常的色彩管理。在今后遇到类似同类型图标时,我们可以使用 HCT 的方式快速生成发散色板,帮助我们进行色彩搭配。
最后在 B 端系统当中,会存在较多颜色搭配的场景。
像是图表设计、自定义系统主题,原来只能通过系统预设固定颜色的方式进行解决,而现在 Google 也将这套计算公式开源,也就是说程序员可以直接引用 HCT 的色彩空间,将颜色配置的权限给到用户,通过颜色的调整,呈现用户想要的颜色内容。
对于屏幕显示的色彩空间而言,有部分内容我们也是要重点关注。比如在 B 端设计当中,色彩还原老是出问题,那我们就可以通过屏幕的色彩空间进行判断。
sRGB(standard Red Green Blue)是由惠普公司和微软公司共同开发的一种标准色彩空间,目的是提供一种通用的色彩标准,使得在不同的设备(如显示器、打印机等)之间能够实现相对一致的色彩显示。
对于 sRGB 来说,它是我们作为设计师最为重要的屏幕显示色彩空间,因为它通用性强,所以大多数普通的电脑显示器、网页浏览器等都默认采用 sRGB 色彩空间,这样在浏览网页、查看普通的数码照片时,可以获得比较稳定的色彩效果。
所以我们在做设计时,通常都会将屏幕与软件,都调整的 sRGB 的空间当中,这样就能够最大限度保证色彩的一致。
Display P3 是基于 DCI – P3 色彩空间衍生而来的,主要用于消费级显示器设备。它在 DCI – P3 的基础上进行了一些调整,以适应显示器的特性。
整体而言 P3 色彩空间显示出来的颜色会更加 生动、艳丽,但是这会和你的设备密切相关。目前行业中只在苹果设备以及部分高端显示器才会使用,所以我们在设计时需要考虑自己产品的受众,这一设备是否普遍使用。
最后,我们总结一下:
本文由人人都是产品经理作者【CE青年】,微信公众号:【CE青年Youthce】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在做产品设计的时候,UI界面更多是由设计师完成,产品仅是提供界面元素和布置,其他的由设计师发挥。但如果产品能了解更多设计相关的知识,在和设计师探讨、分析时会更有针对性,也会让产品的工作显得更为专业。
在当今数字化时代,我们与各种移动应用、网页和软件界面打交道,图标就像是这些界面的明星。它们小巧玲珑、独具特色,扮演着连接用户与界面的重要角色。本文将带您深入了解UI图标的定义、作用以及在用户界面中的重要性。
A. UI图标的定义
UI图标是指用简洁明了的小型图形符号来表示特定功能、操作或信息的设计元素。图标通过简单的形状和图像,向用户传递信息和功能,并在界面中起到重要的导航和标识作用。
B. UI图标的作用
C. UI图标在用户界面中的重要性
UI图标在用户界面设计中扮演着不可或缺的角色,其重要性体现在以下几个方面:
UI图标设计是用户界面的重要组成部分,它们不仅可以帮助用户更快地理解和使用应用程序或网站,还可以增强整体视觉效果。为了设计出高质量的UI图标,设计师需要遵循一些基本原则和要素。
A. 独特性和可识别性
设计具有独特特征的图标 UI图标应该具有独特的特征,使其能够与其他图标区分开来。设计师可以通过使用不同的形状、颜色和风格来实现这一目标。同时,图标的形状和颜色也应该与应用程序或网站的主题和品牌形象相一致,以帮助用户更快地识别和理解图标的功能和意义。
避免与其他图标混淆 为了避免UI图标与其他图标混淆,设计师应该确保图标的形状、颜色和风格与其他图标有足够的区别。如果图标的形状和颜色与其他图标过于相似,用户可能会难以区分它们的功能和意义,从而影响用户的使用体验。
B. 简洁性和清晰性
追求简洁的图标设计 简洁的图标设计可以帮助用户更快地理解和使用图标。设计师应该尽可能地简化图标的形状和颜色,避免使用过多的细节和复杂的形状。简洁的图标设计还可以帮助应用程序或网站的整体视觉效果更加统一和和谐。
避免过度复杂化的细节 过度复杂化的细节可能会使图标变得过于复杂和难以理解。设计师应该避免使用过多的细节和复杂的形状,以确保图标的简洁性和清晰性。同时,设计师也应该确保图标的形状和颜色足够明确,以便用户能够轻松地识别和理解图标的功能和意义。
C. 一致性和统一性
维护整个UI界面的一致性风格 UI图标应该与整个UI界面的风格保持一致。设计师应该确保图标的形状、颜色和风格与应用程序或网站的主题和品牌形象相一致。这样可以帮助用户更快地识别和理解图标的功能和意义,同时也可以增强应用程序或网站的整体视觉效果。
使用相似的线条、颜色和风格 为了实现一致性和统一性,设计师应该使用相似的线条、颜色和风格来设计图标。这样可以使图标与整个UI界面的风格保持一致,同时也可以使图标的形状和颜色更加和谐统一。
D. 可视化传达
明确图标所代表的含义和功能 为了确保用户能够轻松地理解和使用图标,设计师应该确保图标的形状和颜色能够明确地传达
使用适当的形状、符号和颜色传达信息 为了确保图标能够明确地传达信息,设计师应该使用适当的形状、符号和颜色。
例如,一个图标可能需要使用一个圆形作为基本形状,同时使用一个代表性的符号来表示它的功能和意义。
同时,设计师也应该确保图标的形状和颜色与应用程序或网站的主题和品牌形象相一致,以帮助用户更快地识别和理解图标的功能和意义。
E. 可缩放性和适应性
使用矢量图形实现图标的可缩放性 为了确保图标在不同屏幕和设备上的可用性,设计师应该使用矢量图形来实现图标的可缩放性。
矢量图形是一种基于数学公式的图形,它们可以在不失真的情况下进行任意大小的缩放。
这意味着:即使图标被放大或缩小,它们的形状和颜色也不会发生变化。
确保在不同屏幕和设备上的可用性 为了确保图标在不同屏幕和设备上的可用性,设计师应该考虑图标在不同分辨率和屏幕尺寸下的表现。
例如,设计师应该确保图标的大小和形状适合不同屏幕和设备的显示。
同时,设计师也应该确保图标的颜色在不同的屏幕和设备上都能够保持一致,以帮助用户更快地识别和理解图标的功能和意义。
UI图标设计需要遵循一定的流程和技巧,以确保图标的高质量和可用性。
以下是一些常用的设计流程和技巧:
A. 需求分析和功能定义
在开始设计之前,设计师需要了解UI图标的使用场景和目的。这可以帮助设计师确定图标所代表的含义和功能,以确保图标的准确性和可用性。
B. 创意和草图阶段
在进行创意和草图阶段,设计师应该进行创意思维和头脑风暴,以产生出多种不同的设计方案。同时,设计师也应该从简单的草图开始构思图标设计,以确保图标的可行性和可实现性。
C. 细化和完善设计
在细化和完善设计阶段,设计师应该使用矢量工具进行图标设计,并重点关注细节和清晰度的提升。这可以帮助设计师创建出具有独特特征的图标,并确保图标的可缩放性和适应性。
D. 反馈和优化
在反馈和优化阶段,设计师应该向用户和团队收集反馈,并根据反馈进行图标的优化和调整。这可以帮助设计师确保图标的准确性和可用性,并根据用户的需求和期望进行调整和优化。
UI图标设计是一个重要的设计领域,它可以帮助用户更快地理解和使用应用程序或网站。以下是一些成功的UI图标设计案例和分析。
A. 探索成功的UI图标设计案例
成功的UI图标设计案例可以帮助设计师了解和学习一些设计最佳实践和技巧。成功的图标有很多以下只列举两个图标设计案例:
B. 分析图标设计背后的原理和决策
成功的UI图标设计案例背后都有一些共同的原理和决策。
以下是一些分析图标设计背后的原理和决策的方法:
A. 总结UI图标设计的重要性和原则
UI图标在用户界面中扮演着重要的角色,它们不仅能够传达信息和功能,还能够增强用户体验和界面的美感。以下是一些重要的UI图标设计原则:
B. 鼓励设计师继续探索和发展图标设计技能
图标设计是一个不断发展和演进的领域。鼓励设计师们继续学习、实践和探索,通过不断尝试新的技术和方法,提升自己的设计能力。以下是一些建议:
UI图标设计在用户界面中起着重要的作用。通过掌握设计原则和实践技巧,继续学习和发展设计技能,我们将能够创造出令人印象深刻的UI图标作品,提升用户体验和界面美感。不断探索和挑战自己,成为一名卓越的图标设计师!
本文由 @Esc 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
春节是一个很大的流量池,经过一年时间的劳累,人们有了更多的闲暇时光,这是企业也是内容创作者获取流量的绝佳时机。
这个春节,我被各大产品的情感化设计萌化了,设计细节太贴心了,极大的增加了产品与用户的粘性,各大厂都推出了既承载千年文化重量,又具备数字原生形态的新春物种,花样可谓是百花齐放。
各大厂都纷纷从视觉、社交互动、内容创作展开想象,设计了丰富多彩的春节用户体验,下面让我们来开开眼福,一睹他们的风采,同时也顺便学习下,作为设计师的我们有哪些创意出发点?
春节,作为中国最重要的传统节日,不仅承载着深厚的文化内涵,更是一场全民参与的消费盛宴和社交狂欢。在这个特殊的时期,人们的注意力高度集中,围绕春节展开的各种活动,无论是线上还是线下,都呈现出爆发式的增长。
从电商数据来看,2025年全国网上年货节期间,全国日均网上零售额同比增长6.2%,累计网络零售额更是突破7000亿元人民币,同比去年增长9.8%,再创历史新高。
抖音电商“春节不打烊,财神送福气”活动中,全域日均支付GMV同比增长56.02%,直播日均支付GMV同比增长46.57%。
快手本地生活“新春团购节”GMV同比大涨117%,新线城市日均支付用户数环比增长234%,这些惊人的数据,无一不彰显着春节期间电商消费的强劲活力。
社交平台上同样热闹非凡。除夕及春晚期间微博活动用户达2.97亿,全站互动超3.1亿次,4656万用户除夕赢得福运红包,全国年味相关话题阅读量破102亿。
快手在2025年春节期间,平台日活用户规模创历史新高,春节活动相关视频总播放量超2000亿,直播总观看量高达150多亿,“摇发财树”红包活动中,用户一共摇了57亿次红包。
如此庞大的流量和用户注意力,为品牌和商家提供了绝佳的展示舞台。在这个信息爆炸的时代,谁能在春节期间成功吸引用户的注意力,谁就能在市场竞争中抢占先机。
一个精心设计的广告、一场别出心裁的互动活动,都有可能在这个流量高峰中迅速传播,收获海量的关注和曝光,实现品牌知名度的提升和产品销量的增长。
下面就让我们看看各大厂在春节期间都找到了哪些设计机会点?
设计思考:
设计思考:
设计思考:
设计思考:
设计思考:
登录元梦之星和洪恩识字,感觉就像打开了一场烟花秀的视觉盛典,特别是洪恩识字,效果特别的炸裂,数字烟花秀做的特别吸睛。
这样的动效视觉表现很好的与用户产生了情感共鸣,拉近了彼此的距离,增加了节日的乐趣。
设计思考:
支付宝在春节期间推出了一款很惊艳的皮肤,画面中仙气飘飘,一改之前单调的纯色背景,将有中国韵味的敦煌壁画文化搬上了荧屏,增添了很多喜庆的氛围和中国味,养颜又养心。
设计思考:
腾讯QQ在过年期间,推出了一个领Q币的活动还挺有意思,小企鹅穿着厚厚的衣服,手中抱着一个福袋在奔跑,通过这样的动效引导用户去领金币,非常的有意思。
设计思考:
Banner是很好进行情感化设计的窗口,也是打造春节气氛的绝佳宝地,那么这个春节它也一定不会缺席。
设计思考:
今年的微信红包,新增了一个随机的拜年红包功能,可以随机的派送红包金额,并且在红包的封面上可以长按,说出你想跟对方说的寄语,这个小小功能的精进,让发红包这个事情也变得更加有温度。
微信红包,还有一个新的创新点,小小的红包封面变成了产品的宣传栏,比方说广汽埃安的这个红包封面,它既是拜年的寄语栏,又是绝佳的产品宣传栏,配合动效,特别的酷。
设计思考:
百度地图在这个春节心系百姓的民生问题,知道人们在这个节日有旅游、探亲、出行的需求。
百度地图开发了人口迁徙监测功能、交通拥堵实时监控功能,让人们在出行时避开高峰路段,以及人口扎堆的旅游景点。
更有后方快车通过的提醒功能,当后方来了一辆很快的车时,百度地图也会进行语音播报,提醒车主这时不能随便变道。
当自己体验到这个功能的时候,感觉到这不仅仅是简单的功能了,更是一份对用户的爱,以及对生命的敬畏。
设计思考:
过年期间,是重温感情的好机会,朋友间彼此的问候还是很有必要的,那么如何问候,是简单的文字,还是用更有创意的视频画面去表达呢?
发现我们考虑的,很多产品都已经帮我们想好了,比方说讯飞智作、剪映就推出了很多拜年视频的模板供用户自己去选择加工使用。
很大程度提升了用户制作视频的效率,也很大程度提升了产品的粘性,为用户多考虑一点,用户对产品的依赖也会更多一点。
设计思考:
发现支付宝在与用户社交互动这块做的非常的好,每逢大的节日都会有与大众互动的运营活动。
比方说元宵节的点福卡活动,萌萌的元宵,再配合微动效,以及引导用户去点击的手势动效,无不是在号召用户参与进来。
支付宝的五福活动,很有意思,入口的左右两边放置一个帅哥和靓妹在接红包,画面很有互动感,欢乐性十足,让人也忍不住去参与集福卡的活动。
春节是消费高峰期,人们有购置年货、礼品等需求,此时也是各大品牌搞营销活动的好机会。
设计思考:
设计思考:
酷我音乐在过年期间,把皮肤设计当成了一种增加会员的刺激手段,一旦成为会员就能享受跟普通用户不一样的头像装饰。
连音乐播放页的皮肤也会有更多选择,可以选择年味十足的播放页,这让成为会员的人有一种偏爱的感觉,很不错的促销手段。
产品既能赚到钱,又能满足一些用户的需求,多好的共赢方式,拥有着健康的成长生态。
在阿里UCAN年度设计趋势报告中,着重强调了设计在商业场景里对用户行为的关键影响。在春节这一特殊时期,流量高峰带来海量用户,此时设计的价值尤为凸显。
报告指出,随着技术的发展,设计已从单纯的视觉美化,转变为提升用户体验和驱动商业增长的核心力量。
以春节红包设计为例,具备按钮动效的设计能极大吸引用户注意力。从心理学角度来看,动态元素更容易刺激用户的视觉神经,引发他们的好奇心和探索欲。
这与UCAN报告中提到的利用动态设计增强用户交互体验的理念高度契合。数据显示,这种设计使红包打开率提高了30%,直观地体现了优秀设计在春节流量高峰下,对提升用户参与度的显著效果。
在电商页面设计方面,UCAN报告强调简洁直观且富有创意的界面设计,能有效引导用户行为。
春节期间,电商平台流量剧增,那些依据这一理念设计的页面,通过合理布局商品展示、运用鲜明的春节色彩元素,以及提供便捷的购物流程,成功吸引用户点击,提升了商品点击率和购买转化率 。
这不仅印证了报告中关于设计要贴合用户心理和行为习惯的要点,也再次证明了在流量高峰时,优秀设计对商业转化的巨大推动作用。
微信团队发布《微信里的赛博年味儿》报告显示,自制红包封面玩法流行,春节期间微信里诞生了1亿+款用户创作红包封面,约3.9亿人收到此类自制封面红包。
微信“送礼物”功能中,书籍品类送礼订单量环比增长10000%+,收到礼物数目最多的省份前三甲是广东省、山东省、浙江省。
看到这份趋势报告,我惊呆了,挖掘一个符合用户需求的产品功能,能带动海量用户的黏性和活跃,不得不说,微信自制红包的这个功能开发的太好了。
作为设计师,以前只在意产品的视觉和皮肤,没有站在一个多维的角度去看待一件事情以及背后的逻辑,发现写作让我思维更开阔,视角更全面,想事情想的更清楚,看问题看的更明白,感谢这一年来自己笔耕不辍,一直在精进的路上。
作者:姝斐suphie,公众号:姝斐
本文由 @姝斐suphie 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自作者提供
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
2024年,行业经历了飞书裁员、Salesforce视觉更新、钉钉商业化等重大事件,这些变化不仅影响了设计师的职业发展,也重塑了B端设计的市场格局。站在2025年的起点,本文将深入探讨B端设计的未来趋势,供大家参考。
每一年,我都有一个“任务”,为过去一整年的 B 端设计师进行汇报。
一方面是给大家汇报过去一整年瞬息变化的市场,同时呢也想聊聊站在我的视角当中,未来一整年的行业发展趋势,以及我自己的判断。
那今年也不例外,在今年整体行业的大背景下,我们究竟应该何去何从?想坐下来静静的和大家聊聊~
今天我们主要聊三个方面:2024 B 端行业大事件、当前整体环境、2025 年 B 端设计趋势判断,文章有些长,内容稍干,大家耐心观看~
在回忆过去一整年时,我会觉得有几件事情是非常重要,因此在这里提出给大家进行分享。
在 2024 年年初,飞书裁员,据说设计师裁员高达 60%,用研100%… 这一件事带来了一系列的连锁反应。
首先是市场会觉得设计并没有价值,B 端设计没有价值,设计师只是一个作图的工具。
因为飞书在我看来之前是异常重视用户体验,从我们梳理他们的设计改版开始,你会发现整个管理后台产品都在往着好的方向发展。
但即使这样,设计师也被裁员,会让我们感到困惑,问题到底出在哪里?
同时,这样大量且优质的设计师被裁过后,也会造成行业的踩踏效应。对于普通的设计师而言,行业内卷,求职会异常艰难,相信在那段时间求职的同学、特别是在北京的同学都会有感悟,真的是异常艰难。
在五月份时,沉寂许久的 Salesforce 迎来了其新版本的视觉更新,这是 Salesforce 成立以来,做的最大维度的更新。
首先整体页面样式经历了调整,从之前带有上世纪 90 年代风格转变为更为成熟、商务化的风格,这使得整个界面的协调性得以增强,这也符合目前 B 端产品的视觉风格发展趋势。
其次页面之中有效减少了信息干扰,让页面内容能够清晰地呈现于用户眼前。
同时针对元素圆角,将其增大。不过就我个人而言,不太欣赏整体圆角加大的设计,因为感觉这与 Salesforce 的整体品牌形象不够契合。
最后会发现,这次修改主要集中在界面样式方面,对信息结构以及界面布局并没有作出大规模的变动,我猜测他们是不敢做、也不能做。一个小的改动对于 Salesforce 这个庞然巨兽来说影响都会非常的大。
这里,想和大家一同聊聊 Salesforce 更新的原因竟是什么?
我认为,一方面是产品自身迭代的内在需求,确实需要进行 Style 层面的更新维护;
另一方面则是为新推出的 AI 功能进行铺垫,想试图借助崭新的视觉形象,吸引更多用户去使用 AI 功能。这也是很多产品更新常用的手段,比如早些年的微信也经常这样用游戏来吸引用户进行升级。
在我们看来,一个良好的 B 端产品,一定是需要拥有更理想的商业模式,而钉钉的商业化就显得更为顺利。
钉钉自从在阿里被独立出过后,几次发布会都在强调自己的在商业模式上的进展和变化。
从整体来看会发现钉钉对于用户的态度也会有所转变,从原来 以“老板为核心”变为现在以“要考虑员工感受”,也说明整个 B 端产品整体的发展路径就应该如此。
所以很多企业都是在产品初期,经历过混沌的时期过后才会需要 B 端设计师。
聊到公众号文章,也顺带说说今年的设计氛围和往年相比是更差的。
你会发现大家都不太愿意更新文章,无论是设计大会又或者是设计文章分享,最近能阅读的东西真的很少,这会导致大家的交流异常的匮乏。
从我整理过去 B 端行业的资料来看,这两年的资源更新是非常少的。
我们简单聊聊市场环境,对于整个互联网行业来说,你会发现整体都是异常萧条。
无论是 C 端产品的增长乏力也好、又或者是 B 端产品的行业不景气也罢,总之过去一年大家整体过得都比较艰难。对于设计行业的各位来说,我们目前的状态其实都是苟着~
因为设计师很难做到雪中送炭,也就是通过一个设计点,真正为企业、为产品创造更多的收入,所以这也就导致我们目前的处境十分尴尬。
你会发现大家在各个媒体上都在劝退 B 端设计师,说这是一个夕阳行业。
但这里想对刚入行的新人多说两句。目前经济环境,任何行业都会有劝退的人,你要做的是去分析目前自己的选择,也就是如果我不做 B 端设计师,我还有其他什么选择?
比如你学习的是 环艺设计、城市规划设计 等相关专业,又或者是你自己已经在 B 端工作多年,那可能 B 端设计师或许还是一个相对求职容易的行业,寻找明确的方向,就能获得行业当中的一些回报。
本来想说很多,但想想还是算了,今年的就业形势确实有所回暖,我们可以期待一波~
对于 2025 年,我们会认为有以下几个发展趋势:
AI是目前行业当中最迅猛的趋势,B端产品也不例外。
对于很多B端产品而言,AI的出现优化了用户在日常工作当中使用繁琐的问题,在许多B端产品当中,都会把AI当做是最为重要的产品功能。
比如我们之前总结过的:Salesforce、金碟、飞书,又或者是在阿里、腾讯内部的很多系统,都会通过AI的方式加以介入,来确保产品的高效使用。
在未来一年,我们要多去考虑 AI与语音交互、低代码产品、配置类系统之间的碰撞,在未来肯定会有着更为不错的发展。
行业当中有着非常多的无代码产品,原因在于国内的大多数系统,我们会发现通常都需要通过定制化的方式来进行处理。为此,行业当中就出现了较多的无代码产品,将产品的功能提供给用户进行配置和相应使用。比如常见的有钉钉宜搭,又或者是腾讯的微搭等等。这类产品的类型非常多。
但在行业中,有人会觉得这类型的产品不适用于小团队的管理。因为如果本身是小团队,需求整体没有那么大。因此在行业里还会存在像多维表格这样的系统来进行相应的呈现。
所以我们会发现,这类型的产品其实是市场大环境所需。在未来一年,个人认为类似多维表格、Airtable 这类型的产品会更受大家欢迎。因为它们能够很流畅地与 AI 进行结合,同时整个产品的规模结构也没有那么大,更容易被用户所接受。
产品出海是一个老生常谈的话题,很早之前我们就有谈到。由于国内市场竞争激烈,而且对于应对市场需求已经有了丰富的经验,很多企业将自己方向转向国外。比如最早飞书推出的国际版本Lark,ONES推出偏向研发管理相关的国际版本,以及小鹅通推出的付费国际版(这还挺影响我们国外同学学习听课…)
由于国内产品研发效率快,人力成本相对较低,所以能以更低的价格吸引到国外的用户。与此同时,国外对于整个产品付费的意愿比较高,产品出海有着广阔的发展空间。
除了以上提到的互联网产品出海外,我发现很多国内的越来越多的企业也开始跨国经营。面对出海发展的挑战,数字化平台的建设和应用就成了这些企业的刚需,会去设计开发相应的海外系统和软件。
所以在目前的整个求职阶段中,如果你在沿海城市,在工作中一定要考虑到英文的环境。在你的作品集里也可以适当地展示一些带有英文的项目,并展示自己的国际化和本土化的设计能力
除了常规的产品出海,还会有很多跨境电商相关的业务,这些业务也需要对应的管理系统。
比如行业当中常见的货代,需要有与之对应的海外仓储物流相关系统来配套。而且国内的很多相关产品其实都需要海外版本进行对应的维护。在这些系统当中,我见过最为奇特的便是国外网红的 MCN 系统。
因为很多电商类的产品都需要考虑广告投放相关事宜,因此会使用对应的 MCN 系统来管理不同的网红。这类系统其实在海外场景当中是非常常见的。所以很多从事跨境电商相关业务的产品想要拓展海外市场,可以去考虑跨境电商相关业务拓展。
本文由人人都是产品经理作者【CE青年】,微信公众号:【CE青年Youthce】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
为了避免出现用户所想看的信息被其他海量信息所淹没的情况,设计师或者产研团队需要思考如何做好信息收纳,让拥有厚重信息和功能的产品变得简单清爽且易用。这篇文章里,作者就梳理了如何利用好容器类UI组件达成这一目标的策略,一起来看。
如果你问用户他需要什么,他的回答大概率是“我全都要”。但是如果你把他想要的东西全都展示在页面上,会发生什么?
用户被自己想要的信息淹没了。他会说:“这根本没法看,也没法用,你们的设计太烂了。”
信息量大、操作复杂是B端产品的典型特征。我们如何把具有厚重信息和功能的产品,变得对用户来说清爽易用?
My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.
——Tess Gadd《UX cheat sheet: Preview and full display》
“界面设计就是把报纸塞进火柴盒的艺术”,这个比喻真是太妙了!(本土化:把大象装进冰箱的艺术)。怎么把报纸塞进火柴盒?变魔术吗?其实从某种角度上看,我们设计师就是魔术师——在适当的时机展示恰到好处的信息。
而我们用到的道具,就是容器类UI组件。区别于其他类型的组件(比如输入框下拉框),容器类组件就像收纳盒,也就是用来收纳信息和操作的。
咱们今天就来探索一下,如何利用好容器类UI组件,完成“空间膨胀术”,把报纸丝滑地塞进火柴盒。
本文会分成两部分。
这个决策树不限于提供以下价值:
下面我们正式开始吧~
一个单点数据关联的信息量能有多大?看一个网安行业的例子:
安全管理的目标是要确保资产安全。用户要做的,首先是要清点资产,资产分类分级和业务信息是资产自身属性。另外,资产本身会存在一系列漏洞,漏洞也有分类分级以及修复过程数据。如果漏洞被利用,就会产生威胁告警,而告警也存在分类分级及处置过程数据。
可以看出,将数据建立层层关联后,从一个单点可以衍生出来的信息是海量的、无边的。
我们当然不能把这全家桶一整个砸给用户呀,用户会被砸晕的。那我们该怎么做?
有两个定律,跟“复杂”有关。
这两个定律告诉我们一个道理:复杂,不会让用户觉得更好用,甚至增加了不必要的内耗。
处理复杂,我们一般有哪些办法呢。
第一步,先删除多余的部分。就好比我们整理房间时,先挑出垃圾和闲置。
第二步,把物品归类。被子和被子叠在一起,衣服和衣服挂在一起,书本放在书架上。总之,不能都堆到床上。
第三步,渐进呈现。这就到了设计师要用“容器类”组件来完成“空间膨胀术”的环节了。
渐进呈现的设计理论有点像C4模型。C4模型是一种软件架构可视化方法。它的独特之处,就是从宏观到微观,设置了多个焦距,来层层递进。
产品中的内容也存在层层递进。内容之间的关系,常见以下两种。
一种是从属关系,或父子关系。
一种是关联关系,数据以某种维度建立了关联。
我们如何用容器类UI组件,去放置这些复杂且层层关联的内容?
以下是我们常见的容器类UI组件。
这些组件都可以用来收纳,但是它们的特征差异也是巨大的,不能随意混用。
我从“复杂度高低”和“关联性强弱”这两个坐标维度来划分出四个象限,展示这几个容器的特征。
左下角这里基本是空的,为什么?因为这个是按照组件的最大潜力来摆放的,高维度可以兼容低维度。
值得注意的是,有一些组件在当前页面内,而有些在浮层中。浮层在空间Z轴上有高度,视觉表现为有投影。
容器可以展示信息,也可以用来承载操作。我们把这两个场景分开考虑。首先,我们从信息展示场景开始,分析如何选择容器。
这里有几个关键问题,我们逐个分析:
关键问题一:能否分清主次。
这个问题很难。用户可能说“这个内容我需要”,但“需要”这个词存在极大的灰度空间,我们要判断“需要”是多“重要”,需要从这几个维度去分析。
关键问题二:是否需要对比参考。
如果需要对比参考,不能使用tabs(选项卡)。因为tabs组件存在“排他性”——只有选中tab的子内容是展示的,未选中的tabs下的内容是被隐藏的。
以购物为例,用户在对几款产品进行对比挑选时,期望在一个界面同时看到几款产品的参数和价格等。如果把产品数据放入各tab中,用户就得在tab间反复横跳,让有限的短期记忆承受巨大压力。
(↑案例:苹果手机参数对比)
当然,如果没有对比参考的需求,我们可以考虑把内容归类到不同tabs下。在使用tabs组件时要确保内容分类合理、标签文案简洁易懂。这样用户才能理解并愿意探索。
(↑tabs的应用)
关键问题三:是否需要保持上下文。
有这样一个场景:上级单位对多个下属单位进行考核,打分有一定主观性,需要参考其他单位得分。如果跳转新页面进行打分操作,就会断开原有上下文的关系,影响用户操作流畅性。
需要保持上下文的场景中,应避免迫使用户离开父级页面,建议在原页面或浮层中呈现更多信息。
关键问题四:是否频繁往返。
这个一般由任务类型决定,即当前操作是“主线任务”还是“支线任务”。
在主线任务场景中,用户持续前进。比如网购商品,用户在选购商品-确认地址-付费-下单完成···等步骤中环环前行。这时建议使用原页面跳转的方式。
支线任务完成后,一般要回归主任务,也就是存在“往返”,就像从小路回归到大路上。比如清理邮箱:用户阅读处理完一封未读邮件后返回未读列表,继续处理下一条。在这里,“阅读并处理一条邮件”是支线任务,“”清理邮箱”是主线任务。建议给“支线任务”新开标签页处理。
关键问题五:是不是必须看到的。
当前信息对用户来说是否重要且关键?模态是较为“强势”的交互模式。原则上,界面态度保持礼貌克制,以免打扰到用户。
并不是所有容器都适合放置表单操作——部分容器因“排他性”的特征,会隐藏部分信息,可导致用户遗漏重要操作。
我们一般将操作分成两类:
我们可以按照表单的体量,或者信息的重要及关键程度,选择相应的UI组件。
容器组件的的神奇之处是可以多次嵌套和叠加,创造出更多空间。
但注意保持信息体量和层级之间的平衡,避免过多嵌套和叠加,让用户在多个容器中迷失方向。
(↑案例:抽屉嵌套抽屉)
(↑案例:tabs嵌套tabs)
(↑案例:抽屉嵌套tabs)
感谢读到最后的读者们,就用一句话来结束今天的分享吧~
设计一件东西时,总是要在更大的环境中考虑它——房间里的一把椅子、房子里的房间、环境中的房子、城市规划中的环境。
——埃里尔·沙里宁 (1873–1950),芬兰建筑师
本文由 @杜大大杜 原创发布于人人都是产品经理。未经作者许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
在视觉设计的世界里,色彩不仅仅是一种装饰,它是传达情感、影响情绪和吸引用户的关键。本文深入探讨了色彩在界面设计中的重要性,揭示了如何通过色彩的定义、属性、模型以及在不同场景下的应用来增强设计的吸引力。
色彩在我们日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,感觉在自己的设计生涯中,大部分都是在与色彩的博弈中度过的,虽然客户可能不懂色彩原理,可是客户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了客户,所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。
目录
一、 色彩的定义
二、 色彩的三属性
三、 色彩的三种常见模型
四、 色彩的语意及它的应用
五、 不同场景下的色彩应用
六、 色彩在B端设计中的作用
七、 B端色彩设计使用的原则
1、物理学角度
色彩是光的属性,当光波通过物体时,物体会吸收某些波长的光,而反射或透射其他波长的光,这些被反射或透射的光波长度决定了我们看到的颜色。
2、心理学角度
色彩是人脑对光波长的视觉感知,不同的波长刺激视网膜上不同类型的感光细胞,进而产生不同的色彩感觉。
3、 艺术学角度
色彩是艺术创作的重要元素,它不仅关乎视觉感受,还与情感、文化、象征意义相关联。
4、 设计学角度
在设计领域,色彩是传达信息、影响情绪和创造美感的关键工具。
5、 计算机科学角度
在数字图像处理中,色彩通常通过颜色模型(如RGB、CMYK等)来定义,这些模型通过不同比例的原色或色料混合来表示各种颜色。
色相是指不同颜色之间的差别,即不同颜色的表象和名称,每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示,人的眼睛可分辨出的色别有180种左右。
明度是指色彩的明暗程度。一般在反光率相同的情况下,不同色别的明暗程度不同。如黄色光比红色光更明亮,而红色光则比青色光要明亮。
同时,同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下,会呈现不同的明暗变化和差异。
饱和度(纯度)是指同一色别的纯净度和鲜明度的变化。从色光的角度而言,光的波长单一程度越高,饱和度就会越高;不同色别所达到的饱和度不同,一般情况下,红色的纯度可达到最高,绿色的则相对较低;同一色相深浅不同的颜色有不同的饱和度;黑白色光的渗入会导致饱和度和明度发生变化;通常,照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。
HSB模型也叫HSV模型,其中H代表色相,即颜色的种类;S代表饱和度,即颜色的纯度;B(V)代表亮度,即颜色的明亮程度。
这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型,如果在同色系中如果只想让他们有细微的变化,我通常会通过调节S和B的百分比数值来达到自己想要的目的。
以上就是我在设计项目中,运用该色彩模型做的一个实战,项目中用到了一个图形,需要用同色系来表达,我保持了H色值的不变,让S值和B值都发生着微妙的不同,于是就产生了四五种同色系的绿色,该色彩模型特别的好使,也鼓励大家多在实战中运用这样的色彩模型,简单实用。
RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于三者亮度之总和,越混合亮度越高,即加法混合。
红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。
虽然RGB模型色彩更加的丰富,但是很多颜色不能完全打印出来,于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑,通过颜料反射和吸收光线来显色。
记得之前自己从事平面工作的时候,就经常要用到CMYK模式,因为印出来的效果偏差是最小的,是最靠近设计效果图的。
通过对比,我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些,而CMYK的色彩模型颜色显示上就黯淡了不少,但是要印刷的话,就必须转化为成CMYK的色彩模式。
红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力,也常与兴奋、热烈的情绪相关。
著名的快餐品牌肯德基,在自己的网页及店铺装修中都运用了红色,因为红色是所有颜色中最容易引起人们注意的颜色,也是很容易刺激人们食欲和购买的颜色。
橙色传达温暖、欢快和积极向上的情感;它常与乐观、友好、创造力联系在一起,给人以活力充沛和充满希望的感觉。
百度网盘的这个登录界面就运用了橙色,给人阳光、向上、热情的感觉,通过色彩的运用一下让界面有了温度。
黄色象征快乐、开朗和乐观;它能带来明亮、愉悦的情绪,代表着阳光、温暖和智慧。
叫叫阅读是一款非常著名的儿童阅读软件,整个色调采用的是非常有活力的黄色,这与儿童处于好奇与活力的阶段相符合,这种高亮的黄色,饱和度和明度都非常的高,特别容易抓住儿童的目光,同时它是一种快乐的颜色,也是一种能激发孩子创造力和想象力的颜色,特别符合儿童成长的需求。
绿色代表平静、和谐与生机。绿色常与大自然相关,给人带来安宁、放松的感觉,也象征着成长、希望和新生。
青椒云的目标用户是吸引年轻用户和创意工作者,绿色这种富有活力和创意的颜色更容易吸引他们的关注,同时绿色也代表着健康、可持续发展的企业形象。
青色寓意清新、宁静和沉稳,它给人一种冷静、理智的印象,同时也带有一丝清新的活力。
青色是一种带有蓝色和绿色的颜色,因此青色既有蓝色的专业感、信任感,也有绿色的生机感、希望感。
以下是日本某牙医品牌的官网首页,病人希望在这里带来健康与复苏,也希望获得专业、可靠的治疗,而青色就成了很好传递这种情感的品牌色。
蓝色代表冷静、忠诚和信任;它常与沉稳、深邃的情感相关,能带来宁静、平和的心境,也象征着智慧和理性。
123云盘使用了蓝色,蓝色符合社会的普遍审美认知,接受度比较高;其次,蓝色给人安全的感觉,也符合云盘的初衷,给用户安全的存储服务。
紫色象征神秘、高贵和浪漫;它常给人一种优雅、奢华的感觉,同时也带有神秘莫测的氛围,与梦幻、创造力等情感相关。
美柚的主要用户是女性,紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质,这些特质与女性的审美和情感需求相契合,能够吸引女性的关注。
白色代表着纯洁、神圣、信任、安静、朴素和雅致,是一种充满纯洁的颜色,它可以跟任何颜色和谐的共生。
以下是熊掌ID的登录界面,颜色用了大量的白与灰,简洁又不失大气,传递出了一种质朴、雅致的感觉。
❶ 吸引顾客注意力
在众多商业场所中脱颖而出,色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来,吸引过往行人的目光,激发他们的好奇心和探索欲。
确实多彩的颜色更加容易引起我的关注,这不看到商场的美图,都忍不住拍照留念了,成功的吸引了我的目光。
❷ 增强可见性
即使在较远的距离或在繁忙的街道上,多彩热烈的配色也能让商场更容易被发现,提高商场的知名度和曝光度。
多彩的配色,让我很远就被商场美轮美奂的插画吸引,大大增加了商场的可见性。
❸ 营造愉悦氛围
色彩可以激发积极情绪,明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时,会感受到一种愉悦和轻松的氛围,从而更愿意在商场中停留和购物。
星沙永旺城的美陈设计很好,墙面采用极具诱惑力的颜色与美食,把小小实物十倍放大,增加了视觉看点,让人忍不住过去拍照晒一下,大大增加了愉悦性。
❹ 缓解压力
在现代生活中,人们常常面临各种压力。走进一个多彩热烈的商场,可以暂时摆脱日常的烦恼和压力,享受购物的乐趣。
特别可爱夸张的插图设计,引发了丝丝童趣和欢乐,让人短暂忘记压力,远离烦恼。
❺ 引导消费行为
商场通常会使用不同的颜色来区分不同的区域,如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域,提高购物效率。
突出重点商品,对于一些重点推荐的商品或促销活动,商场可以使用鲜艳的色彩来突出展示,吸引顾客的注意力,引导他们进行购买。
❻ 塑造品牌形象
6.1 传达个性和风格
不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合,商场可以传达出自己的个性和风格,吸引与之相符的顾客。
6.2 增强品牌记忆度
独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象,提高品牌的记忆度和辨识度。
芙蓉区的龙湖天街主要面向中等收入新兴家庭,是一个区域型的购物中心,集购物、餐饮、休闲、娱乐等多业态于一体,为消费者提供一站式商业综合体,它在餐饮区采用了大量的吃喝玩乐的插画来引导用户消费。
❶ 视觉特性方面
1.1 稳定性
蓝色给人一种沉稳、可靠的感觉。在B端产品中,用户往往需要处理重要的业务数据和进行复杂的操作,蓝色的稳定性可以让用户感到安心,增强对产品的信任感。
1.2 专业性
蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户,需要传达出专业、高效的形象,蓝色正好符合这一需求。
❷ 心理影响方面
2.1 减少焦虑
相比鲜艳、刺激的颜色,蓝色较为柔和,不容易引起用户焦虑和紧张的情绪;在B端使用场景中,用户可能需要长时间使用产品,蓝色的舒缓效果有助于提高用户的使用体验。
2.2 提高专注度
蓝色具有一定的沉静作用,能够帮助用户集中注意力,专注于工作任务。对于B端用户来说,高效完成工作是首要目标,蓝色的这一特性有助于提高工作效率。
B端产品在心理上追求的是类似如下图的这种宁静式的体验,跟教育有着异曲同工之处,就像这个易贝乐少儿英语一样,用大面积的蓝色,希望孩子在这里能很快的安静下来学习、专注自己的事情。
❸ 行业习惯方面
3.1 科技行业引领
许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色,逐渐形成了一种行业习惯。其他企业在设计B端产品时,也会倾向于选择蓝色以符合用户的认知和期望。
3.2 传统与延续
在过去的设计中,蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时,也不断优化和创新蓝色的运用方式,使其更符合现代设计趋势和用户需求。
嘉为科技是一个有着20多年技术沉淀的科技公司,它的官网和产品风格一直是沿用着科技蓝的风格,应该也是基于传统的沉淀吧。
❹蓝色可以提高产品的复用率
很多用户都能接受蓝色的B端界面,当面对有差不多需求客户时,同一套UI,可以多次复用,可以减少开发成本和设计成本,这也是自己通过长期实战观察发现的。
一个UI风格,用在了两个项目中,不同的用户,趋向同样的风格,说明蓝色在大家心目中的接受度是非常的高,用蓝色可以促进设计的多次复用。
在日常的项目中,我看到的B端UI界面是千篇一律的稳重,不追求过于刺激的颜色搭配,通常都比较的干净简洁,不像商场里面的美陈背景设计,色彩对比非常的强烈,比较的吸引人眼球。
有一次我厌烦了常规的稳重风,探索一种大胆的色彩风格时,虽然风格比较新颖,可是发出去客户的接受度不高,觉得太不稳重了,然后重新按照以往习惯进行设计时,就很好,客户一致认同。
可见每个领域都有自己的色彩运用习惯,商场需要吸引人眼球、刺激消费,越大胆越好,可是B端设计需要提供一个让人平静去处理工作事项的环境,它需要安静,不需要过于刺激的颜色搭配。
比方在日常设计当中,红色代表流程失败,绿色代表流程成功,橙色代表信息有告警,蓝色代表着链接,同时不同的按钮颜色也可以很好的区分按钮状态,在反馈结果和状况方面,色彩起着非常重要的作用。
下面这个IDC运营的监测平台,它就是通过颜色来区分不同的告警级别的,可见颜色在B端产品中的重要性。(备注:图中数据都不是真实数据,仅做展示)
B端设计中大面积使用品牌色,可以强化品牌形象,使用与品牌标志风格相近的色彩,可以帮助用户快速识别和记住品牌,在不同的B端产品界面中使用统一的色彩方案,有助于建立品牌的连贯性和一致性,增强用户对品牌的信任。
例如我给湖南高速设计的一套B端界面设计,用户强烈要求改变传统的蓝色风格,要求整套界面设计要用湖南高速品牌色-绿色,说明在追求大流和品牌色之间,客户更加倾向品牌的传达。(备注:图中数据都不是真实数据,仅做展示)
在B端界面设计中,颜色在帮助信息区分起着非常重要的作用,通常可以通过不同的色彩来区分功能区域,可以让用户更清晰地了解界面的结构和布局,例如,导航栏使用一种特定的颜色,而内容区域则使用另一种颜色。
我设计的天翼写作,就是这样的设计思路,导航栏和内容区的颜色完全不一样,这里颜色起到了很好的区分作用。
选择合适的色彩对比度可以增强文本的可读性,减少用户的视觉疲劳。例如,黑色文字在白色背景上通常比较容易阅读。
选择适当的色彩可以营造出专业、高效、舒适的工作氛围,从而影响用户的情绪和感受,提高用户的使用体验。
我参与的这个后台界面,就是通过合理的色彩搭配来引导用户使用的,当用户已经完成的环节都是用绿色表示,没有走完的流程就会是灰色的,寓意指示非常的鲜明,很好的解决了用户不知道清晰进程的卡点,提升了用户体验。
人的性格有活泼的、文静的、沉稳的、深邃的,其实色彩也是有性格的,不同的色彩也有不同的性格,当我们对色彩的性格有足够多的了解,在面对不同的客户时,我们对色彩的拿捏以及设计需求的把握时,会更加的游刃有余。
我们平常确实是在做设计,但是我们更多的是在与人打交道,我们更好的聆听,会帮助我们更快的抓取到客户的喜好,快速做出满足客户需求的设计,少受加班之苦。
比方说我之前给云门户设计的一套UI,客户的决策层是男性,且年龄偏大,他们就偏爱深沉的UI风格;而我负责的天翼云电脑专家,客户的决策层是女性,且年龄偏年轻,她每次就喜欢轻盈、明快的UI色调,不同的决策层客户,就会带来不同的设计结果。
在这个登录页面中,我就是运用的6:3:1原则,60%的主色,30%的次要色,10%的点缀色;使用了大面积的蓝色和蓝灰色,最后使用一点点的橙色,这样的配色会显得高级。
为了保证画面风格的统一、干净整洁,文字颜色、边框颜色、以及边框背景色都需要用到无彩色,通常通过颜色的深浅来区分信息的层级关系。
比方说我参与的星辰大模型AI文档生成能力的应用,里面无论文字颜色还是底色都是运用的无彩色,只是通过了色彩深浅变化来做了层级区分,因为无彩色可以起到很好的降噪作用,既传达了信息,又不会显得界面凌乱复杂。
比方说,日常我们设计的卡片都是用的白色,而底色我们用的是灰色,因为卡片里面的内容都是比较重要的信息,需要用一个亮度比较高的颜色,让内容往前走,而灰色的背景通常就往后走的感觉,这样能跟卡片形成一个一前一后的对比,更好的帮助内容进行传播。
比方说我设计的这个IT运维监控平台的首页,物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的,所以他们的图片底色用了纯度比较高的有彩色来标识。
作为设计师,我们的设计工作其实就是在设计一种感觉,一种情绪,设计前定调的意识真的太重要了,感觉对了,什么都就对了。
比方说我前段时间接到了一个B端的大屏可视化需求设计,客户说之前的大屏设计不喜欢,希望重新出一个新的设计,然后公司的需求对接人员在给我下达需求时,真的就只是给我下达了这几个字,让我重新出一个设计试试。
以我的职业直觉,感觉这个需求是不够细化的,于是我就多问了几句,我问客户是想要常规的蓝色调的还是别的?果然一问,客户说不希望再用常规的蓝色的,希望新的设计要用他们的品牌色绿色,刚听到这几个字的时候,我以为这次我把握住需求了,在收集参考图的时候,我发现常见的绿色大屏有深色的和浅色的,根据自己以往的作图习惯,我觉得深色会更加的受欢迎一些,我自以为是的朝着深色的方向去出图,出到了一半的时候,我内心有些许的忐忑,我于是找了一深一浅的参考图,让同事跟客户确认一下,客户是想要深色的感觉,还是要浅色的感觉,这次沟通又给了我深深的一击,客户不按常理出牌,说希望按浅色的风格来出图。
在出稿之前,通过自己反复的沟通确认,发现设计前的定调意识真的太重要了,要不是有出图前一波三折的反复确认以及需求的细化,就不会有后来的一遍过稿。
不管我们设计什么色系的界面,都避不开用到灰色,在设计中用跟主视觉相符的灰,会使得界面更加的高级、协调与美观,注意好了这个小细节,会给我们的设计加分不少。
下面是我日常体验到的两个界面,上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应,灰色没有向蓝色倾斜,界面看起来就没那么美观;下面通义千问的灰色设计就非常的注重细节,灰色偏紫,整个界面看起来浑然天成,毫无违和,美感、档次瞬间提升好几个等级。
一个微小细节的在意,在无形中拉高了设计的高度,十个细节乃至更多细节的在意,就会带来更多意想不到的结果。
总结:
以上就是我最近对色彩的一些顿悟、感受和学习收获,在不断的复盘总结中,我们总会收获一些新的认知,通过这次色彩的复盘之旅,发现色彩对设计师真的太重要了,希望我的分享对大家有启发,不足之处也欢迎大家留言交流。
本文由 @姝斐suphie 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自 Unsplash,基于CC0协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
随着电动车的发展,驾舱也越来越智能,对设计的要求也越来越高。从一开始的只是展示信息,到现在的情感陪伴、多感官交互,这篇文章,我们来看看都有哪些变化。
在科技飞速发展的今天,汽车已不再仅仅是一种交通工具,更是人们生活中的重要伙伴。随着人机交互技术的不断进步,智能驾舱多感官交互正从满足传统的安全驾驶需求逐渐转变为提供有情感的智能 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
对九类交互状态的深入理解和不断创新,将为产品设计带来更大的提升空间,为用户带来更加卓越的体验,推动产品在竞争激烈的市场中不断发展和进步。
交互状态在产品设计中起着至关重要的作用,它直接关系到用户体验和产品的可用性。良好的交互状态设计能够让用户在使用产品的过程中感受到便捷、高效和愉悦,从而提高用户对产品的满意度和忠诚度。
从用户体验的角度来看,交互状态可以增强用户参与感和控制感。例如,在人机交互设计中,互动性和反馈机制能够让用户觉得他们对系统有一定的掌控能力。当用户进行操作时,系统能够及时给予反馈,如按钮按下后出现的状态变化、鼠标悬停时的提示信息等,让用户清楚地知道他们的操作产生了什么效果。这种即时的反馈可以帮助用户理解系统的运作逻辑,减少用户的操作失误,提升用户的效率和满意度。
在产品的可用性方面,交互状态的设计也至关重要。例如,在电子产品设计过程中,实现人机交互可以为消费者提供良好的使用体验。设计师需要考虑不同人群的需求,如设计操作简单的老人机,以满足老年人的使用需求。同时,将人机交互理念融入产品设计中,能够提升消费者对产品的喜好程度,使设计出来的产品能够满足人们对电子产品设计的要求。
此外,交互状态的设计还能够影响产品的整体品质。例如,在 B 端产品的 UI 设计中,深入了解用户需求与场景,进行简洁直观的界面设计,可以提升产品的可用性。通过用户研究方法,了解用户的工作环境、使用习惯和设备网络条件等,将用户需求转化为具体的设计元素和功能,为用户提供更加贴合实际的使用体验。
综上所述,交互状态在产品设计中具有重要的地位,它对用户体验和产品可用性有着重大的影响。产品开发者和设计师应该充分重视交互状态的设计,以提高产品的竞争力,在市场中脱颖而出。
加载类型:除了电商 APP 和计算器应用的不同加载方式外,一些社交平台在加载用户动态时也会采用类似的渐进式加载。当用户打开社交平台,首先会看到最近的几条动态,随着用户不断下拉刷新,更多的动态内容逐步加载出来。这样既保证了用户能够快速看到部分内容,又不会因为一次性加载过多数据而导致等待时间过长。
加载状态:在加载状态中,不同的产品会有不同的表现形式。例如,一些在线学习平台在加载课程视频时,除了会有旋转的加载动画外,还会显示加载进度条,让用户清楚地知道视频加载的进度。如果加载成功,会有一个短暂的提示音,增强用户的感知。而如果加载失败,除了提示用户检查网络连接外,还会提供一些常见问题的解决方案,如清理缓存、更换网络环境等。
中断:中断情况在实际应用中较为复杂。以在线办公软件为例,如果在编辑文档过程中出现网络中断,软件会自动保存当前文档的进度,以防止数据丢失。同时,会提示用户网络中断,并尝试重新连接。如果长时间无法连接,用户可以选择将文档保存到本地,待网络恢复后再进行上传。
深度 / 夜间模式:除了阅读类应用,一些视频播放平台也提供夜间模式。在夜晚观看视频时,开启夜间模式可以降低屏幕亮度,减少对眼睛的刺激。同时,夜间模式下的界面颜色通常会更加柔和,营造出舒适的观看氛围。
存在沉浸模式插件:在一些在线教育平台中,也会有类似沉浸模式的功能。当学生进入课程学习时,平台会自动隐藏无关的通知和广告,让学生专注于学习内容。同时,学生可以通过特定的快捷键退出沉浸模式,方便随时查看其他信息。
输入:除了即时通讯软件,一些办公软件在输入方面也有很多优化。例如,在文档编辑软件中,当用户输入一些特定的关键词时,软件会自动弹出相关的文档模板或格式设置选项,提高用户的输入效率。
点击:在电商平台的商品详情页面,点击商品图片通常会放大显示,让用户更清楚地看到商品的细节。同时,点击购买按钮后,会有一个短暂的确认弹窗,让用户再次确认购买信息,避免误操作。
重复点击 / 恶意操作:在一些金融类应用中,对于重复点击或恶意操作的防范更加严格。例如,在股票交易软件中,如果用户连续多次提交相同的交易指令,系统会自动锁定该用户的交易功能,并提示用户联系客服解决问题。
极值:在旅游预订平台上,用户在选择酒店价格区间时,系统也会进行极值限制。价格下限通常为平台上的最低价格,价格上限则会根据当地酒店的市场价格和用户的搜索历史进行动态调整,确保用户能够得到合理的搜索结果。
边界:在一些图形设计软件中,除了画笔工具的边界限制,其他工具也有类似的限制。例如,当用户使用裁剪工具时,裁剪区域不能超出画布的范围,否则无法进行裁剪操作。
时间:在在线考试系统中,时间限制尤为重要。考试开始前,考生只能看到考试的相关信息和注意事项,无法进入答题页面。考试开始后,系统会精确计时,一旦考试时间结束,答题页面会自动提交,无法再进行答题。
网络中断:在在线游戏中,网络中断会对玩家的游戏体验产生很大影响。当网络中断时,游戏会自动暂停,并提示玩家网络中断。如果玩家在网络中断前已经保存了游戏进度,那么在网络恢复后可以继续游戏;如果没有保存进度,可能会丢失部分游戏数据。
信号不佳 / 不稳定:在视频会议软件中,当网络信号不佳时,软件会自动降低视频的分辨率和帧率,同时关闭音频中的一些高级功能,如降噪和回声消除,以保证会议的基本沟通需求。
流量形式切换:在一些音乐播放软件中,用户可以根据自己的网络环境手动切换流量形式。例如,在 Wi-Fi 环境下,用户可以选择自动播放高清音乐视频;而在移动数据环境下,用户可以选择只播放音频,以节省流量。
没有内容:在在线文档协作平台中,如果一个文档没有内容,系统会提示用户 “此文档为空,请添加内容”,并提供一些常用的文档模板供用户选择,方便用户快速创建内容。
敏感 / 违规内容:在电商平台上,对于商品描述中的敏感或违规内容,系统会进行严格的审核。如果发现违规内容,商品会被下架,并通知卖家进行整改。同时,平台会对卖家进行警告,严重的可能会关闭卖家的店铺。
站外内容:在一些知识分享平台中,当用户点击站外链接时,平台会提示用户 “该链接为站外内容,请注意安全”,并提供一个返回平台的快捷按钮,方便用户随时返回。同时,平台会对站外链接进行安全检测,确保链接的合法性和安全性。
横竖屏:在一些图片编辑软件中,横竖屏切换会影响用户的操作体验。当用户将手机从竖屏切换到横屏时,软件会自动调整界面布局,将工具菜单和编辑区域分别放置在屏幕的两侧,方便用户进行操作。而当用户将手机从横屏切换回竖屏时,软件会恢复到原来的布局。
分辨率:在一些游戏开发中,开发者会根据不同设备的分辨率进行优化。例如,在高分辨率的设备上,游戏画面会更加细腻,特效也会更加丰富;而在低分辨率的设备上,游戏会自动降低画质,以保证游戏的流畅运行。
清晰度:在一些在线视频教育平台中,清晰度的选择会影响用户的学习体验。在网络条件好的情况下,用户可以选择高清或超清的视频清晰度,以便更清楚地看到教学内容;而在网络条件差的情况下,用户可以选择标清或流畅的清晰度,以保证视频的播放流畅度。
不同版本:在一些软件的不同版本中,功能和界面会有所不同。例如,在一款绘图软件的专业版中,会提供更多的高级功能和工具,而在免费版中,功能会相对较少。同时,软件会在界面上明确标识出不同版本的特点和优势,方便用户根据自己的需求进行选择。
硬件调用:在一些智能家居控制软件中,当用户需要调用摄像头进行监控时,软件会弹出请求授权的提示框。在获得用户授权后,软件会提供实时监控画面,并支持远程控制摄像头的角度和焦距。
硬件联动:在一些智能办公场景中,硬件联动可以提高工作效率。例如,当用户在会议室中使用智能投影仪时,投影仪可以与会议室的灯光和音响系统联动,根据投影内容自动调整灯光亮度和音响音量。
未登录 / 已登录:在一些在线教育平台上,未登录用户只能浏览部分公开的课程内容,无法进行课程报名和学习进度跟踪。而已登录用户可以享受更多的服务,如个性化课程推荐、学习记录保存等。
新用户 / 老用户:对于新用户,一些在线购物平台会提供新人专享优惠券和折扣,帮助新用户快速熟悉平台的购物流程。对于老用户,平台会根据他们的购买历史和浏览记录,为他们推荐个性化的商品和促销活动。
游客账号:在一些在线音乐平台中,游客账号可以让用户试听部分歌曲,但无法下载和收藏歌曲。当游客想要享受更多功能时,可以通过注册账号成为正式用户。
普通 / 会员账号:以在线阅读平台为例,会员用户可以享受无广告阅读、优先阅读新书等特权。同时,平台会在会员专属内容上进行明显标识,吸引普通用户升级为会员。
内网 / 外网账号:在一些企业内部的项目管理软件中,内网账号可以访问企业内部的项目信息和文件,外网账号则只能查看一些公开的项目进度和报告。在设计这种账号体系时,软件会明确区分内网和外网账号的权限,确保企业信息的安全。
管理员账号:在一些社区论坛中,管理员账号可以对用户的发言进行审核和管理,维护社区的秩序。同时,管理员账号还可以进行系统设置和插件管理,提升论坛的功能和性能。
通过对九类交互状态的深入分析,我们可以清楚地看到交互状态在产品设计中的重要性。无论是加载相关、特殊模式,还是操作相关、限制相关等各个方面,交互状态都直接影响着用户对产品的使用体验和满意度。
例如,在加载相关方面,合理的加载类型和状态显示能够减少用户的等待焦虑,中断处理机制则能在意外情况下最大程度地保护用户数据和操作进度。在特殊模式中,深度 / 夜间模式和沉浸模式插件为用户提供了更加舒适和专注的使用环境。操作相关的输入、点击和防范重复点击 / 恶意操作等设计,确保了用户操作的准确性和安全性。限制相关的极值、边界和时间限制,使得产品的使用更加规范和合理。网络相关的处理能够在不同网络状况下为用户提供尽可能好的体验。内容相关的处理确保了用户在面对不同内容情况时都能得到恰当的引导和提示。站外内容相关的设计保障了用户在访问外部链接时的安全。设备相关的横竖屏、分辨率、清晰度、不同版本、硬件调用和联动等设计,适应了不同设备和用户需求。角色相关的不同状态设计,为不同类型的用户提供了个性化的服务和体验。
展望未来,随着科技的不断进步,交互状态的设计也将不断发展和创新。一方面,人工智能、大数据等技术的应用将使交互状态更加智能化和个性化。例如,通过分析用户的使用习惯和偏好,自动调整加载策略、推荐适合的操作模式等。另一方面,虚拟现实、增强现实等新兴技术的发展将为交互状态带来全新的体验。例如,在虚拟现实环境中的交互状态设计将更加注重沉浸感和自然交互。同时,随着物联网的发展,硬件之间的联动将更加紧密和智能,为用户提供更加便捷和高效的服务。
本文由 @用户体验王叔 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自 Unsplash,基于CC0协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com