首页

剖析用户习惯-让你的产品更懂用户

博博 设计思维

 

用户习惯的重要性
为了设计出用户易于接受的产品,进行用户调研以了解其习惯变得尤为重要。在设计过程中,产品易用性是一个关键指标,它反映了产品是否易于使用。用户往往会基于他们的“惯性认知”,即其他产品培养出的使用习惯,来判断一款产品的易用性。因此,一个符合用户习惯的产品往往被认为易用性较好,而不符合用户习惯的产品则可能面临用户流失的风险。
 
剖析用户习惯-让你的产品更懂用户
 
 
 
用户习惯的形成
用户行为习惯的形成与记忆的两种类型“外显记忆和内隐记忆”紧密相关。
 
剖析用户习惯-让你的产品更懂用户
 
 
 
剖析用户习惯-让你的产品更懂用户
 
 
 
【外显记忆】是我们可以通过语言和文字描述的记忆,例如学校学习时背诵的课文和公式。而【内隐记忆】也称为非陈述性记忆,是我们无法用行为描述的记忆,例如学会骑自行车后很难遗忘的技能。这种记忆与我们的条件反射和肌肉记忆相关联,一旦形成,便不易改变。
内隐记忆的形成与我们使用App时的习惯性行为有很大关系,用户可能习惯性地点击App的最后一个主Tab寻找设置功能,因为大多数App都遵循这种设计模式。而对于那些不常用的功能,如微信的“生活服务”入口,用户可能需要短暂思考其位置,这表明习惯的形成与使用频率有关。因此,理解用户行为习惯背后的记忆机制,对于设计师来说至关重要,它有助于创建更符合用户直觉和习惯的产品。通过这种方式,设计师可以减少主观判断,更多地基于用户的实际行为特征来设计产品,从而提高用户体验。
 
剖析用户习惯-让你的产品更懂用户
 
 
 
剖析用户习惯-让你的产品更懂用户
 
 
 
 
用户习惯的重要性
  •  易用性
    用户习惯直接影响产品的易用性。如果产品与用户的习惯相符,用户可以轻松上手,这通常被认为是易用的。易用的产品更容易被用户接受,从而有可能取得成功。
  •  学习成本
    改变用户习惯意味着用户需要投入时间和精力去学习新的操作方式,这可能会造成用户的流失,尤其是对于那些不愿意或没有时间学习新事物的用户。
 
用户习惯的局限性
  •  创新的需求
    虽然遵循用户习惯可以提高易用性,但过度依赖习惯可能会限制创新。有时候,创新的设计能够提供更好的用户体验,尽管最初可能会遇到用户的阻力。
  •  市场变化
    市场和技术的快速变化可能要求产品不断创新以保持竞争力。在这种情况下,即使改变用户习惯存在风险,也可能是必要的。
 
产品成功的其他因素
  •  市场定位
    产品的市场定位、目标用户群体和竞争对手的情况也会影响产品的成败。
  •  品牌影响力
    强大的品牌可以培养用户的忠诚度,即使产品有所改变,用户也愿意跟随。
  •  营销策略
    有效的营销策略可以帮助用户理解和接受新的产品特性或习惯。
  •  产品品质
    产品的功能、性能和稳定性是用户是否愿意持续使用的关键。
 
平衡用户习惯与创新
  •  渐进式创新
    通过逐步引入新特性,而不是一次性大规模改变,可以让用户逐步适应。
  •  用户反馈
    收集用户反馈并根据反馈调整产品,可以帮助找到用户习惯与创新之间的平衡点。
  •  教育用户
    通过教育用户理解新产品特性的价值,可以帮助他们克服对新事物的抵触情绪。
 
 
为什么要避免改变用户习惯
改变用户习惯可能会带来不适甚至反感。例如,Instagram(Ins)的logo从拟物化变为扁平化,并改变了颜色。这个变化让许多用户难以在视觉上与旧logo产生联系。有些用户甚至因为找不到新logo的应用而感到困惑,或者觉得新logo不好看,从而不想再使用该应用。类似的情况还有Windows 8的界面变革,它引入了全新的开始屏幕,与传统开始菜单有很大差异,导致许多用户感到不习惯,这也成为了该系统受到批评的原因之一。
 
剖析用户习惯-让你的产品更懂用户
 
 
 
 
怎样避免改变用户习惯
 
 
剖析用户习惯-让你的产品更懂用户
 
 
 
 
什么时候可以改变用户习惯
用户习惯虽然在长时间内形成且难以改变,但在某些情况下,培养新的用户习惯是必要的,这有助于推动技术和社会的进步。以下是在何时培养新用户习惯的几种情况:
 
 
剖析用户习惯-让你的产品更懂用户
 
 
 
 
剖析用户习惯-让你的产品更懂用户
 
 
 
在培养新的用户习惯时,重要的是要确保这种改变能够为用户带来明显的价值,并且要通过良好的用户引导和教育来减少用户的抵触情绪。同时,产品应该提供足够的过渡期,让用户逐步适应新的习惯,而不是突然间强迫用户改变。
 
怎样让用户养成使用习惯
这里就需要提到“上瘾模型”。上瘾模型通过触发用户内在动机、简化行动步骤、提供即时奖励、鼓励用户投资以及形成正向反馈循环,有效地促进了用户习惯的培养。它利用人类的心理和行为特点,创造了一个能够引起用户情感共鸣并促使他们重复使用产品的体验。通过这个模型,产品设计者能够深入理解用户需求,设计出易于使用且能够满足用户需求的功能,最终实现提高用户粘性、增强品牌忠诚度和提升市场竞争力的目标。
这个模型是由尼尔·埃亚尔(Nir Eyal)和瑞安·胡佛(Ryan Hoover)在他们的作品《上瘾:让用户养成使用习惯的四大产品逻辑》中提出的。上瘾模型的目的是通过创造积极的用户体验循环,让用户反复回到产品中,最终形成习惯。
上瘾模型(Hook Model)是一种设计思维框架,用于创建能够吸引用户并促使他们反复使用产品或服务的体验。这个模型通常由四个主要步骤组成,分别是触发器(Triggers)、行动(Action)、奖励(Reward)和投资(Investment)。下面详细介绍每个步骤:
 
剖析用户习惯-让你的产品更懂用户
 
 
 
触发(Triggers)
内部触发:用户内心的焦虑、无聊、孤独等情感驱动他们采取行动。
外部触发:来自产品的通知、广告、电子邮件等外部信号,提醒用户采取行动。
 
剖析用户习惯-让你的产品更懂用户
 
 
 
 
行动(Action)
行动是上瘾模型的第二个步骤。用户在触发的驱使下采取行动,这通常涉及到执行一个简单的任务或操作。开始行动,才会养成习惯。
行动的简便性是关键,设计时应确保用户能够轻松地完成所需的操作。
斯坦福大学福格博士曾提出“福格公式”,福格行为模型可以用公式来呈现,即 B = MAT。B 代表行为,M 代表动机,A 代表能力,T 代表触发。只有动机、能力 、触发三者皆备,才能跨过“行动线”。
 
 
剖析用户习惯-让你的产品更懂用户
 
 
  •  动机(Motivation)
    动机是指一个人执行某个行为的内在驱动力,包括欲望、需求、愿望等。
    动机可以是正面(追求快乐、成就)或负面(避免疼痛、失败)的。
    在设计产品或服务时,需要考虑如何激发和增强用户的动机。
  •  能力(Ability)
    能力是指一个人完成某个行为所需的技能和资源。
    能力包括时间、金钱、体力、智力、社会支持等多个方面。
    为了让用户执行某个行为,必须确保他们具备相应的能力,或者产品设计要足够简单易用,以降低能力门槛。
  •  触发器(Trigger)
    触发器是指促使人们执行某个行为的信号或刺激。
    触发器可以是外部环境中的某个提示,也可以是内在的心理暗示。
    触发器在恰当时刻出现,能够有效地引发行为。
 
 
剖析用户习惯-让你的产品更懂用户
 
 
 
奖励(Reward)
用户在采取行动后获得奖励,这可以是社交奖励、猎物奖励(如积分、徽章)、自我奖励等。
奖励能够满足用户的需求,增强他们对产品的正面情感,并鼓励他们继续使用。
 
投资(Investment)
用户在产品中投入时间、数据、努力、社会资本或金钱等资源。
投资增加了用户对产品的承诺,使他们更有可能在未来继续使用产品。
 
结语
产品设计师在遵循用户习惯与进行创新之间需要做出权衡。完全遵循用户习惯可能限制了设计的创新性,而不遵循用户习惯则可能导致用户难以适应。作为产品负责人,选择哪种方案取决于对用户习惯和产品创新价值的判断。最终,设计出既符合用户预期又具有创新性的产品,是设计师面临的挑战。这种平衡的实现需要深入理解用户需求,同时勇于尝试新的设计理念。


作者:Jr王山而
来源:站酷

 

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

B端表单设计-标题样式细节设计

博博 设计思维

B端系统软件中表单的应用场景非常多,今天就捞点干货,说说B端产品表单如何设计,用户体验会更好

标题输入框布局排版数据展示四个方面,详细介绍一下关于表单的体验设计,目录如下:

1.1 标签是否加冒号

设计师A说:不加冒号,用户不在意,而且占空间......

设计师B说:要加冒号,加上可以更好的区分上下文,以及标签和输入框的关系......

以上A/B设计师说的都有一定的道理,那到底加不加冒号呢?

遇到问题咱就先调研一波,看一下Win、Mac系统中是否有无冒号

Win系统:最新版本不加冒号

Mac系统:最新版本设计偏向C端化,不加冒号,13.0.1之前版本有冒号

是不是感觉主流的设计是不加冒号呀?稍等一下......

那在具体B端系统中是有怎样的应用场景呢?

以上场景中左右布局,单选/多选组件、标题加内容组件都不适合去掉冒号展示

那到底加不加冒号呢?可以先说一下答案,加不加冒号对用户无影响,《Web 表单设计·创建高可用性的网页表单》中,卡罗琳·贾雷特做过大量测试,最终证明没有一名用户留意表单冒号是否出现

因此,得出以下建议:

  1. 如果你希望系统重表单使用更多的业务场景,和对齐方式,请使用冒号

  2. 如果你当前已使用有冒号的表单,请保持使用冒号

  3. 如果你新建一个系统,使不使用冒号随意

  4. 一旦决定是否使用冒号,需要全部表单统一规则

1.2 表单必填样式

用户填写表单时,有必填项和选填项,如果表单中多数或全部是必填项,那是否还应该对其标记

答案是肯定的,用户遇到较多表单填写项时,是需要通过必填标记来评估工作量。下面就介绍一下具体标记必填项的三种样式

1.2.1 顶部统一提示

填写表单过长或填写表单被打断(移动端常见),就会增加用户工作记忆,和认知负荷,放完成任务更加困难,从而降低了用户体验

1.2.2 文字提示“必填”

有部分设计师认为红色星 * 会增加视觉噪音,并且重复的红色星 * 会带来一些认知恐慌

便采用文字提示方式,但这种方式比较占用空间,文字内容过长,用户压力较大,用户体验降低,不建议使用

1.2.3 红色星号 * 必填提示

虽然有设计师认为红色星 * 会增加视觉噪声,带来一些认知恐慌,但红色星 * 在互联网中很常见,用户熟知其意,已形成固定的视觉语言,并空间较小,也能与标签文字足够区分开,相比之下采用红色星 * 必填提示是非常值得推荐使用

但是还有一个文字,就是红色星 * 的位置是在字段前还是字段后呢?

红色星 * 的具体位置有三种位置,如上图做了详细展示

标题左侧:比较常见,用户打眼一看就能区分出必填项,推荐使用

标题右侧:比较常见,多配合无号码使用

输入框右侧:现有系统较少使用,由于输入框形式、长度不统一,会导致难以浏览和判断,不推荐

是否可标记可选字段

这不是强制性的,但标记可选字段非必填,确实减轻了用户思考,提升用户体验

1.3 提示样式

用户最理想阅读的标题文字数是7±2,当标题文字过长,或不足对输入项准确说明时,要给出对应的提示文字,帮助用户更好的输入内容,常见样式如下

这三种样式是递进逻辑,根据不同的文字提示内容和难度,选择不同的提示样式

其中对于第二种样式中,图标提示的位置还有几种方式,如下图说明

小结

本文事无巨细的说了一下表单中标题样式问题,虽然很多是表单设计的一些较冷较小的内容,但也需要设计师沉下心来,打磨细节之处,这里的阐述希望是抛砖引玉,能给大家更多的启发



作者:张大喜本喜
来源:站酷

 

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

优秀的设计就是带给用户惊喜!

博博 设计思维

一、降落伞带来的营销广告
在这个广告满天飞的年代,用户已经逐步开启广告免疫模式,如何提高用户对广告的关注度至关重要。
 
近期在体验饿了么时,等待送餐界面中空降一个降落伞,从左上角飘到右侧悬浮,弹出红包悬浮广告。降落伞飘浮的动态过程吸引了用户的关注度,进而提高了营销广告的点击率,虽然广告大家都比较反感,但是一个伴随着惊喜的广告也会让你放下戒备心理。
优秀的设计就是带给用户惊喜!
 
二、动效反馈商家备餐过程
提升等待过程对于用户体验来说尤为重要,降低用户等待过程中的焦虑感,才能让用户愿意为此停留。
 
通过饿了么点餐之后,商家需要一定的时间完成餐饮的制作,必然需要用户等待一些时间。在这个备餐过程中,当前界面以一个翻炒动效表达,情感化的动效不仅提示用户当前状态,也提升了设计表达的感官体验。
优秀的设计就是带给用户惊喜!
 
三、这个广告惊不惊喜意不意外
意料之外的广告是带给你惊喜还是反感呢?平台为了提高变现能力,各种层出不穷的广告玩法也让你猝不及防。
 
之前在体验腾讯视频 App 时,从闪屏广告过度到 Banner 图的过程中,经历了多个广告新花样。首先从闪屏切换到自动轮播的弹窗模式,再演变到放大版的多个广告切片(占 Banner 位呈现),最后再恢复到 Banner 的正常布局中。这个过程无疑是把广告的存在感拉满了,让你对广告的记忆形成硬性要求。
 
无论这个广告设计方案是否让用户反感,但是这个呈现的互动方式还是比较新颖的,相信广告的点击率必然有所提升。
优秀的设计就是带给用户惊喜!
 
 
四、Banner 广告的视觉沉浸感
Banner 图在产品中是非常普及的,各类形式的演变也层出不穷,产品设计师都在探索更多可能性。
 
在腾讯视频 App 动漫栏目中,发现一例很有想法的 Banner 表现。Banner 上面新增了一个悬浮的火焰燃烧的动效,提升了整体的氛围感,动效与 Banner 画面完美贴合,视觉沉浸感十足。
优秀的设计就是带给用户惊喜!
 
五、待机状态下的实时动态
随时让用户感受到你的存在,才能让人感到安心,服务过程中状态实时可见至关重要。
 
通过饿了么点餐之后,就算处于待机状态时,只要点亮屏幕即可看到当前出餐状态。可视化的图形结合时间提醒,让状态一目了然,使得点餐到用餐之间的过程更有用户可控性。
优秀的设计就是带给用户惊喜!
 
六、小图标里的细节反思
产品中有很多辅助功能/信息等表达的图标,既要能准确表达主题,也要让用户易于理解。
 
在汽车之家 App 发现了一个值得反思的图标案例,在扫一扫的图标中结合了汽车外形轮廓,不仅不会影响扫描的功能表达,也进一步表达了该功能的差异。和别的产品扫描功能不同,这个是对准汽车进行扫描,体现出了业务的差异化。一枚小小的图标体现出了设计师的能力,用最简单的方式表现自身产品的差异,以此提升用户的操作体验。
优秀的设计就是带给用户惊喜!
 
七、轮播式的悬浮设计
悬浮设计非常普及,因为占比小和滑动页面会隐藏,对用户的干扰比较小。
 
最近在芒果 TV 首页发现了悬浮窗口的轮播式表达,芒果卡和活动中心会自动轮播显示(也能手动切换)。让我们对悬浮窗口的设计又多了一种设计理解,可以呈现更多不同内容的表达,提升了窗口的利用率。
优秀的设计就是带给用户惊喜!
 
八、氛围热烈的底部标签栏
底部标签栏的设计在图标创意层面发挥较多,各类风格的图标让该栏目更加丰富多彩,除此之外也有在背景层渲染氛围的案例。
 
近期恰逢芒果 TV 十周年之际,在底部标签栏背景层也加强了氛围感。丰富多彩的元素和配色,结合主题化的图标设计,使得整体氛围感拉满。
优秀的设计就是带给用户惊喜!
 
九、收缩式交互设计
通过交互方式应对用户操作过程,特别是在滑动界面时,交互方式的优化可以降低干扰,提高当前界面的利用率。
 
在 Blurrr App 创作界面,默认以 3D 动态图标展示“开始创作”按钮,当滑动界面时按钮会收缩展示。通过收缩式的交互设计,让界面可以展示更多内容,也不会影响用户点击按钮进行创作。即通过 3D 动效加强了功能的曝光度,又通过收缩式交互提高了内容的展示空间,可谓是一举多得的设计解决方案。
优秀的设计就是带给用户惊喜!
 
十、形象化的进度设计
进度设计是反馈状态变化的关键,通过可视化的表达让用户一目了然,提高用户对服务过程的把控。
 
当用户通过携程旅行 App 订票后,在行程订单界面可以看到列车行驶状态的进度提示。通过可视化的列车形象的表达了行驶状态,让用户清晰的看到行驶方向和抵达站点示意。不仅信息传递高效,形象的表达也使得感官体验更佳。
优秀的设计就是带给用户惊喜!


作者:黑马青年
来源:站酷

 

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

教你一文读懂暗色模式

博博 设计思维

暗色模式(Dark Mode)的兴起是一个逐渐发展的过程,它涉及到技术进步、用户体验优化以及设计趋势的变化。
随着iOS 13在2019年的发布,暗色模式开始成为用户关注的焦点;在用户体验方面,设计者们考虑到了环境光线与屏幕亮度的匹配问题,暗色模式可以有效减少视觉疲劳;在实际使用中,用户发现暗色模式在光线较暗的环境中更为舒适,这也促使了暗色模式的普及和发展。
暗色模式在UI设计中的重要性体现在改善视觉舒适度、节省电量以及提供个性化选择上,其普及程度随着用户需求和技术发展不断提升。
 
 
「大厂设计师」教你一文读懂暗色模式
 
一、定义及其在UI设计中的表现形式
1.暗色模式的定义
  暗色模式是一种低光用户界面(UI)设计,也称为深色模式,是一种用户界面设计选项,它使用较深的颜色方案和背景,通常为黑色或深灰色,以减少屏幕亮度并提供更舒适的视觉体验。
iOS 13 亮色模式(左)与暗色模式(右)的对比
iOS 13 亮色模式(左)与暗色模式(右)的对比
 
2.暗色模式的定义
(1).暗色模式在UI设计中的表现形式
设计师需要为暗色模式创建一个新的调色板,这通常意味着降低颜色的饱和度,以适应深色背景。同时,避免使用纯黑作为主色调背景,而是选择接近纯黑的深灰色,以确保阅读体验的舒适性和可读性
亮色/暗色模式下主色需要进行调整
亮色/暗色模式下主色需要进行调整
 
(2).对比度控制
暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上,以保证内容的清晰度和易读性。对于彩色元素,也需要适当调整饱和度,确保整体色彩之间的对比度符合无障碍标准。
达到/未达到WCAG2.0AA标准的视觉效果对比
达到/未达到WCAG2.0AA标准的视觉效果对比
 
(3).视觉元素区分
在暗色模式下,设计师需要特别注意视觉元素的区分,通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转,而是一种“弱光”主题的设计思考,旨在优化用户在低光环境下的视觉体验。
亮色模式中的按钮在暗色模式中显得太跳跃
亮色模式中的按钮在暗色模式中显得太跳跃
 
二、历史回顾及发展脉络
1.命令行界面时代
在早期的计算机系统中,如DOS和Linux,终端通常使用暗色模式,这是因为早期的CRT显示器存在闪烁问题,暗色背景能够减少视觉疲劳,并提供较高的对比度。
Linux的终端界面
Linux的终端界面
 
2.个人电脑时代
随着个人电脑的普及,图形用户界面(GUI)逐渐成为标准,此时大多数操作系统和应用程序采用了亮色模式,以模仿纸张的颜色并减少CRT显示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移动设备时代
智能手机和平板电脑的兴起带来了OLED等先进显示技术,这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行,特别是在节省电量和减少眼睛疲劳方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系统时代
近年来,各大操作系统开始正式支持暗色模式。例如,Windows 10在2018年的更新中引入了暗色应用模式,macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、设计趋势中暗色模式的地位
暗色模式在当前设计趋势中占据重要地位,以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境,还提供美学上的新探索,响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新,暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序,如WhatsApp、Instagram、Google、Facebook等,都已经引入暗色模式设计,这表明暗色模式已经成为了一种广泛接受的设计趋势。
从左往右依次为:WhatsApp、Instagram、Google、Facebook
从左往右依次为:WhatsApp、Instagram、Google、Facebook
 
「大厂设计师」教你一文读懂暗色模式
 
一、用户体验层面
1.提高阅读舒适度
(1).对比度和可读性
在相同的对比度条件下,浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明,优化对比度是提高阅读舒适度的关键因素之一。
浅背景上深字与深背景上浅字的视觉对比
浅背景上深字与深背景上浅字的视觉对比
 
(2).用户偏好和满意度
一项针对用户对暗色模式的使用体验的调查显示,与默认的白底模式相比,用户在使用暗色模式时报告了更低的视觉疲劳和更高的满意度。斯隆(Sloan)的一项研究在1977年就报告说,如果更多的光线通过混浊的透镜到达眼睛,则出现畸变的可能性更大,即暗模式对视力障碍者更好
对于长时间从事屏幕工作的人来说,暗色模式对眼睛更加友好
对于长时间从事屏幕工作的人来说,暗色模式对眼睛更加友好
 
2.减少视觉疲劳
(1).人眼生理特性
暗色模式能减少屏幕发出的光线,这有利于减少眼睛疲劳和不适,特别是在低光环境下,人眼的虹膜会打开以接受更多光线,而暗色模式提高了减少的光源,减少了对眼睛的刺激
亮/暗环境下瞳孔大小的变化
亮/暗环境下瞳孔大小的变化
 
(2).蓝光辐射减少
人们通过长期研究发现短波可见光,即紫光和蓝光对眼底视网膜有相当程度的破坏作用, 而人们通常把这种可见光波长中高能量波段(400- 470nm)对视网膜的损坏现象称为“蓝光伤害现象”。 还有研究关注了暗色模式对蓝光辐射的影响。由于暗色模式降低了屏幕的整体亮度,因此也减少了蓝光的辐射
可见光波段分布
可见光波段分布
 
二、设备电池寿命
1.降低屏幕功耗
在OLED屏幕上,每个像素都是独立发光的,当显示黑色时,相关的像素点会关闭,从而不消耗能量。这意味着,显示大面积黑色内容的暗色模式能够显著减少屏幕的能量消耗。
OLED屏幕发光原理
OLED屏幕发光原理
 
2.实际省电效果
以 Google 测试数据为例,OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度,手机的电量消耗下降了 63%。
Google的测试数据
Google的测试数据
 
三、降低屏幕功耗
1.促进睡眠
对于晚上喜欢在床上阅读或工作的用户来说,暗色背景有助于降低屏幕亮度,减少对褪黑素分泌的干扰,也有助于减少蓝光对睡眠周期的影响,从而帮助用户更快入睡并提高睡眠质量。
OPPO手机暗色模式广告
OPPO手机暗色模式广告
 
2.减少眩光
眩光是明亮的屏幕和低光环境之间恼人的对比现象,对眼睛具有一定的影响并造成眼部不适。暗色模式通过使用深色背景和亮色文字,整体降低了屏幕的亮度,这样在光线较亮的环境中,屏幕的亮光与周围暗环境的对比度降低,从而减少了屏幕反射光线对眼睛的刺激,降低不适。
有眩光与无眩光的显示器对比
有眩光与无眩光的显示器对比
 
四、打造沉浸式体验
1.减少视觉干扰
暗色模式提高了一种无干扰的工作环境,有助于他们专注于手头的任务,特别是在进行写作、编码或其他需要集中注意力的活动时,暗色模式能够减少视觉干扰。
暗色模式为视觉设计提供了更大的对比度,使得界面元素更为突出。这种高对比度不仅有利于内容的战士,也增强了用户的视觉聚焦,让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时,暗色背景能够使色彩更为鲜明,提升用户的视觉体验。
编码软件一般默认暗色界面,有利于专注工作
编码软件一般默认暗色界面,有利于专注工作
 
2.增强视觉聚焦
暗色模式为视觉设计提供了更大的对比度,使得界面元素更为突出。这种高对比度不仅有利于内容的战士,也增强了用户的视觉聚焦,让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时,暗色背景能够使色彩更为鲜明,提升用户的视觉体验。
手游王者荣耀UI界面


作者:阿琳01
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

UI设计中的微文案:细微之处见真章

博博 设计思维

在UI设计中,微文案往往被视作细枝末节,容易被设计师们所忽视。然而,正是这些看似不起眼的文字,却在用户体验中扮演着举足轻重的角色。微文案,即那些短小精悍、直接明了的文字描述,它们不仅能够指导用户操作,还能够增强产品的情感价值,提升用户满意度。
 
资深设计专家Joshua Porter曾指出:优化界面体验的一个快捷方式,就是提升文案的质量。 他在《Writing Microcopy》一文中首次提及“微文案”这一术语,并以确认弹窗的文案为例,展示了如何通过清晰的表述“账单地址是你卡上显示的地址”,有效减少用户在使用过程中的错误。 简而言之,要想快速优化界面体验,提升文案水平是一个行之有效的途径。
 
一、了解微文案
如果你有学习过尼尔森的十大可用性原则,你会发现10条中有4条都与文案有关。
系统状态 —— 告诉用户当前正在发生什么,是卡住了还是处在loading中或是其它什么状态。
一致性和标准化原则 —— 有一些约定俗成的规则,其中有一些普遍接受的术语,明确的操作提示,在不同界面保持统一等等。
防错原则 —— 帮助用户明白当他们做什么操作会发生什么结果,或者清晰的解释某个操作会有什么行为。
明确错误 —— 错误信息应该用人话表达(不要用代码),较准确地反映问题所在,并且提出一个建设性的解决方案。
 
1、微文案的定义
微文案(Microcopy)指的是在界面中,能够引导、帮助用户与界面交互行为的简短文案,可以是一个单词、也可以是一句话,常见的有表单文案、按钮文案、弹窗文案、错误提示等,大部分微文案都会对用户的行为产生直接的影响,如下所示:
UI设计中的微文案:细微之处见真章
 
2、微文案被重视的原因
微文案,作为用户与产品交流中最直接的触点,不仅有助于用户预见潜在问题,更能激发他们继续操作的意愿。通过预先洞察用户在操作过程中可能遭遇的障碍并提供针对性的解决方案,微文案在很大程度上降低了用户的流失率。 优秀的微文案能够精准地揭示问题核心,消除用户的疑虑,从而加速他们的决策过程,为产品创造更多价值。
此外,微文案所传达的语气和态度,对用户情绪有着显著影响。用户的情绪状态往往决定了他们是否愿意继续在产品中深入探索。因此,众多产品在追求体验优化的过程中,都将微文案作为重点改进的一环。
UI设计中的微文案:细微之处见真章
 
3、微文案专设岗位
国外对于微文案的重视不止反映在公司对于职位的要求上,更反映在国外的教育市场上。国外有很多教育机构相继开设了UX Writing的课程体系,比如 UX Writer Collective 以及 UX Writing Hub。这都代表着国外市场对于微文案设计的重视程度提高。
相比之下,国内除了头部大厂在微文案方面有着较强的意识,其余以下尚未获得足够的重视,但其重要性正迅速提升,展现出巨大的发展潜力。
 
二、如何设计微文案
 
1、少用技术专业词汇
每个领域、每个公司都有专业的词汇,设计师和开发者通常会在产品当中潜移默化地使用这些专业词汇。而用户群体却是包罗万象,所以需要做的,是将专业的技术信息简单易懂地表述出来。
避免含糊文案,明确表述问题和指引。力求简洁,词语能达意则不用句,一句话能说明则不赘言。用户没有耐心来看你写小说。
避免含糊文案,明确表述问题和指引。力求简洁,词语能达意则不用句,一句话能说明则不赘言。用户没有耐心来看你写小说。
 
2、不要拘束于一种表达方式
设计常常赋予产品独特的个性。在完成了前面的步骤后,我们往往需要将微文案与设计理念相融合。不同的设计与微文案结合,会产生不同的效果,但绝不应是单调冷漠的提示。相反,我们应赋予其人性化的口吻,比如将“未设置收货地址,请添加”修改为“您需要我们送到哪里?…”,从而使整个文案更具情感温度,成为一个温暖而富有亲和力的声音。
在一些特殊的场景下,微文案能起到安抚用户情绪、引导用户选择后续行为的作用
在一些特殊的场景下,微文案能起到安抚用户情绪、引导用户选择后续行为的作用
 
3、谨慎开玩笑,除非你对你的产品非常自信
虽然幽默风趣的微文案可以让人更加轻松,但是也要分场合,玩笑和俏皮的语言应该在氛围合适的时候使用,并且并不是所有人都能Get到特定的笑点。
有些笑话在文章当中或许合适,但是在UI界面当中就不一定那么有意思了。 比如,你所提交的数据无法保存,结果文案是“糟糕!您的数据好像无法保存呢”,这对于当前的状况毫无裨益。
这样的表达方式既直接指出了问题所在,又给出了简单的解决方案或建议,更有助于用户理解和处理当前的问题。
这样的表达方式既直接指出了问题所在,又给出了简单的解决方案或建议,更有助于用户理解和处理当前的问题。
 
4、克制与诚信是微文案应用的基石原则,它们共同构成了我们在运用微文案时应当坚守的底线
有时,我们过于依赖这些标签,使得人们对信息逐渐变得麻木不仁。又或是由于虚假、夸大其词的数据泛滥,使得人们开始对社会证明持怀疑态度。
正如张小龙在2017年微信之夜中所言,当App的推送变得过于频繁时,人们往往会选择忽视,以至于任何一个推送都无法引起他们的关注。
当全部都是特惠时,你还会因为优惠而冲动购买吗?
当全部都是特惠时,你还会因为优惠而冲动购买吗?
 
结语
微文案不仅是文字,更是沟通的桥梁。请确保微语言准确、清晰,同时注重情感化和个性化,以贴近用户。同时,保证可读性和可理解性,避免复杂表达。保持微语言的一致性和连贯性,提升用户体验。通过精心设计的微语言,为用户创造更舒适、便捷的体验。
UI设计中的微文案:细微之处见真章
 
 
作者:晚上去拔罐
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发


著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

除了Sora,这8大AI工具值得每个设计师和产品经理尝试!

博博 设计思维

 

 

近日,全球科技圈最火的热点非Sora莫属,它是OpenAI发布的首个文生视频模型Sora,其视频生成能力、效果呈现的成熟度震撼了全世界。有人说,这是视频生成领域的iPhone moment,AGI(通用人工智能)又向前划了一个时代。
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
Sora的使用非常简单,与ChatGPT一样,只需要输入合适的prompt(提示词),它就能跟根据文本指令创建视频。
此前也有一些AI生成视频工具,但大都只能生成10秒以内,还“卡成 PPT”,但 Sora 弯道超车,直接将时长拉到 60 秒。这个突破相当厉害,毕竟时间越长,内容越复杂,想表达准确把控好节奏难上加难。
Sora生成的视频画面截图 | 东京街头的时尚女性
Sora生成的视频画面截图 | 东京街头的时尚女性
Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象
Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象
更厉害的是,根据Sora技术报告的介绍,Sora不仅可以理解用户在提示中所要求的内容,还能理解这些内容在物理世界中的存在方式。因此,它生成的视频不仅逼真,还包含精细复杂的场景、生动的角色表情以及复杂的镜头运动。
Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影
Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影
不少人高呼影视行业变天了,明星即将失业,有网友甚至把美国电影工业的象征Hollywood(好莱坞)改成了这样:
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
其实,不止影视行业,包括教育、营销、互联网甚至所有行业都会或多或少受到影响。
作为在互联网浸润多年的“老油条”来说,笔者最近一直在思考,Sora等AI工具对我们究竟是机会还是挑战?个人认为,机会大于挑战。
比如,对产品经理和UX设计师来说,可以考虑怎么把Sora的能力用到自己的产品上去: 一款社区产品,可以通过Sora快速输出大量视频内容;
一款教育类产品,可以通过Sora生成定制化的教学视频;
一款新闻APP或者视频网站,可以利用Sora进行个性化推荐;
……
 
不过这一切的前提是,你必须掌握AI。
除了上述提到的AI生成视频工具Sora,笔者还总结了很多优秀的AI工具,这些工具能大大帮助我们提升工作效率,生成创意灵感,一起来看看吧~
 
1、小摹AI
小摹AI是一款集成了人工智能技术的产品设计工具,能够根据文本指令轻松生成可编辑的原型图,对产品经理来说可谓解放了生产力!
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
目前有智能原型、智能文本、智能图片、智能翻译和智能表格五大功能,能有效地提升设计效率,没有设计经验也能轻松上手哦。
1)智能原型:根据用户的描述,智能生成一张原型设计页面。
2)智能文本:根据用户的描述,智能生成一段文本内容,对写产品需求文档很有帮助。
3)智能翻译:有“画板翻译”和“输入内容”两项子功能,可以轻松地实现整页内容的翻译,也可以输入内容进行翻译。
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
价格:
现阶段可免费使用
推荐理由:
小摹AI界面简洁,上手非常容易,它最大的亮点是利用AI优化设计流程,快速实现从概念到原型的转变,大幅度提升了产品经理和设计师的工作效率!
推荐评级:
⭐⭐⭐⭐⭐
 
2、Galileo AI
Galileo AI也是一个AI设计工具,它能根据用户的输入智能创建UI设计,生成的界面清晰,间距、字体大小、图片使用等方面都不错。另外,它还有个非常实用的功能,你可以将生成的设计导出到你的 Figma 中继续编辑~
官网:https://www.usegalileo.ai/explore
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)即时设计生成:根据自然语言提示迅速生成复杂的UI设计。
2)AI生成的插图和图像:为设计添加AI生成的艺术元素,增强视觉吸引力。
3)完整的产品文案自动化:利用大型语言模型自动生成产品文案,节省设计师的时间和精力。
价格:
现阶段免费
推荐理由:
如果你想获得一些灵感,想看到一些新鲜的设计,真的可以试试这个工具。
推荐评级:
⭐⭐⭐⭐
 
3、Uizard
Uizard是一个基于Web的设计工具,用户可通过它的AI技术快速创建网站界面,还能快速将手绘草图转换为交互式原型,提高设计效率和创新能力。
官网:https://uizard.io/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)手绘转数字原型:将纸上的草图转换为数字界面原型。
2)用户界面自动化设计:基于用户输入自动生成设计元素和布局。
3)交互式原型创建:快速构建可交互的原型,用于用户测试和演示。
价格:
提供免费试用版本,付费版12美元/月起。
推荐理由:
Uizard是一款设计神器,它的AI功能,丰富的可复用模板和设计元素,能帮你节省大量时间。
推荐评级:
⭐⭐⭐⭐⭐
 
4、Whimsical
Whimsical是一款多功能的在线设计工具,它可以帮助用户完成思维导图、流程图、线框图的制作,成品逻辑清晰,层次分明,还能帮助设计师及时标记灵感,是一款万能的专业辅助设计工具。
官网:https://whimsical.com/home
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)上下文工具栏、可直接用于展示的输出、无限画布以及实时更新;
2)庞大的符号库工具帮助用户更好的完成设计操作;
3)Whimsical的AI功能可以快速生成图表,用以直观展示概念、思维导图和网页等内容。
价格:
提供免费版本,付费版10美元/月起。
推荐理由:
Whimsical是一款全能绘制工具,其中还有非常庞大的符号库工具,能帮助你更好更快地的完成设计。
推荐评级:
⭐⭐⭐⭐
 
5、Khroma AI
Khroma是一款利用人工智能技术来生成配色方案的工具,它能根据你的喜好和需求,提供高效、直观的配色解决方案,并创建无限的调色板让你尽情探索。
官网:https://www.khroma.co/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)AI生成配色方案:根据用户偏好和流行趋势自动生成配色方案。
2)自定义配色选项:允许用户根据自己的需求调整和优化配色。
3)保存和分享功能:用户可以保存自己的配色方案,并与他人分享。
价格:
提供免费版,进阶功能需付费订阅
推荐理由:
Khroma的深度学习算法很厉害,它能够学习用户的配色偏好,并根据流行趋势提供创新的配色方案。
推荐评级:⭐⭐⭐⭐
 
6、AI Colors
AI Colors是一个人工智能色彩调色板生成器,它可以根据你的描述生成贴心的配色方案,同时你也可以参考提供的配色案例,每一种配色方案都有对应的效果展示,让你能够快速找到想要自己的配色方案。
官网:https://aicolors.co/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)提供四种配图案例,分别是移动应用、仪表盘、落地页、作品集;
2)单击复制颜色或者直接导出配色方案,不喜欢的颜色还可以手动修改。
推荐理由:
通过AI Colors,你可以轻松生成调色板,并将其应用于产品界面,查看它们的配色效果,非常适合希望轻松掌握调色板的新手。
推荐评级:
⭐⭐⭐
 
7、Fontjoy
Fontjoy是一个帮助设计师选择最佳字体组合的工具,它可以让用户在一次点击中生成字体组合,还可以混合和匹配不同的字体,达到完美组合效果。
官网:https://fontjoy.com/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)帮助用户调整字体外观,还有字体的类型、大小、颜色等
2)丰富的字体资源:包括中文字体、英文字体、日文字体等;
推荐理由:
只需点击生成,就能看到不同的字体,让字体搭配毫不费力。
推荐评级:
⭐⭐⭐
 
8、Huemint
Huemint是一个内置AI色彩模型的在线配色网站,它通过AI技术帮助用户快速生成吸引人的配色方案,你还可通过调节滑块控制配色方案的对比度,适用于设计师和创意专业人士。
官网:https://huemint.com/brand-intersection/
除了Sora,这8大AI工具值得每个设计师和产品经理尝试!
主要功能及亮点:
1)AI配色方案生成:根据用户输入和偏好,AI算法生成配色方案。
2)控制配色对比度:用户可以通过调节滑块来控制配色方案的对比度。
3)多样化的配色选项:支持生成等阶色、渐变色和2到11色的配色方案。
价格:
在线免费使用
推荐理由:
Huemint的AI色彩模型能够根据最新的设计趋势和用户偏好提供创新的配色方案,帮助设计师快速找到灵感,轻松提高设计效率。
推荐评级:⭐⭐⭐⭐
 
以上就是笔者的“掏心”分享了,希望读到这里的小伙伴能真正尝试用一下AI。毕竟,现在我们必将和AI一起成长同行,只有了解AI掌握AI才能不落后于时代,也让我们一起期待人工智能下一个“Sora”吧!


作者:摹客设计云
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

标签设计的超全分析总结

博博 设计思维

在日常生活中,我们经常会给他人贴上标签。这些标签可能是基于个人特征、行为或经历而形成的,它们可以帮助我们更好地理解和分类他人。例如,当我们初次见到一个人时,我们可能会根据他们的外貌、穿着和言谈举止来给他们贴上一个“自信”、“开朗”或“胆小”、“内向”的标签。我们不可避免地会贴标签或被贴标签,因为这是一种快速且低门槛的有效记忆方式。
设计干货分享|标签设计的超全分析总结
关注不同平台的标签设计,发现平时不太注意的小标签承担了许多重要的作用。在电商类设计中,标签可以强化商品折扣、优惠信息、服务特色等吸引用户。对于偏向浏览和文章发布类产品,标签设计旨在方便读者更好地理解文章内容,平台还可以根据标签聚合同类文章,建立目录索引,引导读者快速查看标签文章。
看似简单的标签却有这么强的作用,以下将根据标签的定义、属性特征及使用场景作出一些思考和探索,帮助大家对标签有一个更清晰的认识。
 
目录:
一、标签的定义
二、标签的组成
三、标签设计的作用
四、标签设计要点
设计干货分享|标签设计的超全分析总结
百度百科对网络标签(Tag)定义是:
一种互联网内容组织方式,是相关性很强的关键字,它帮助人们轻松的描述和分类内容,以便于检索和分享,Tag已经成为web 2.0的重要元素。
 
Ant Design 对标签给出的定义是:用来进行标记和分类。使用场景:1.用于标记事物的属性和维度;2.进行分类。
TDesign对标签给出的定义是:用于表明主体的类目,属性或状态。
设计干货分享|标签设计的超全分析总结
所以标签是什么?
标签是结合产品内容及属性特征经提炼后产出的关键词,是信息的一种集合方式,便于用户查找、定位以及系统识别。
标签可以帮助传达信息、建立可预知操作、产品分类和营销引流、优化搜索等。通过使用标签,方便用户快速识别,提升信息转化的效率,在UI设计中,标签是最常用的设计组件之一。
设计干货分享|标签设计的超全分析总结
标签由容器、文本、图标等元素组成。
三者都是可选的,它们可以随机组合,常见的是这5种组合:文本、图标、容器+文本、容器+图标、容器+文本+图标。
设计干货分享|标签设计的超全分析总结
文本标签:
更直观地表达含义,主要用于抽象的、或分类较多的标签,这种类型标签通常也以#+文字的形式呈现为超链接,主要出现在文字内容较多的列表页面、详情页的开头或结尾。它们也可以被理解为常说的话题标签。通过这些标签,用户可以快速了解到内容的主题和核心,并能够方便地链接到与该内容相关联的信息。
 
图标标签:
更富有设计感且吸引眼球,但这种图标必须是用户熟识的、一看就明白含义的;
 
容器+文本标签:
主要为突出特色、卖点来进行促销,类型及样式比较多元化,且单个产品可能多达 4~5 个标签,以此来吸引用户购买。
 
图标+文本标签:
面积会较大,视觉冲击很强,有的出于交互功能的需要,有的则是用在节日和特别专题。
 
容器+文本+图标标签:
而图标则是为了进一步强调或补充标签文本的信息,增强用户的视觉感知。
设计干货分享|标签设计的超全分析总结
设计干货分享|标签设计的超全分析总结
 
01 标签的颜色
标签的颜色选择和搭配对于信息传递和品牌塑造具有重要影响。不同的颜色和用色的面积/重量会给用户带来不同的感知,比如,绿色代表清新、免费,黄色棕色代表尊贵VIP,红色象征火爆热门。同时也会对品牌形象产生影响。
  • 在白色背景下,我们可以自由地选择任何颜色作为标签的主体色、辅助色和点缀色。当面对同一组信息多个标签时,我们可以通过混合不同颜色来更好地区分它们。例如,我们可以将主要标签设置为红色,次要标签设置为蓝色,然后将它们组合在一起以形成一个更丰富的视觉层次结构。
设计干货分享|标签设计的超全分析总结
  • 在图片背景下,我们的选择受到了很大的限制。由于图片本身已经具有了丰富的颜色和纹理,因此我们需要谨慎选择标签的颜色以避免与图片产生冲突。通常情况下,我们会使用白色/黑色+不透明度或主体色作为标签容器,并将文字设置为黑色或反白处理以确保其可读性。
设计干货分享|标签设计的超全分析总结
总之,无论是白色背景还是图片背景都有其独特的优势和适用场景。在选择背景时应根据具体情况进行权衡并做出最佳决策。
 
02 标签形状
标签的形状设计在信息视觉传达中扮演着重要的角色,不同的形状代表着不同的信息特性和情感色彩。常用的标签形状有圆形、矩形(半圆角、全圆角)、气泡或异形等。
设计干货分享|标签设计的超全分析总结
形状是标签信息传递中的视觉轮廓表现,它作为承载信息的容器,对文字元素的包容性极强,能够使标签信息更加聚焦,让用户在获取内容和进行信息归类时更加专注。
设计干货分享|标签设计的超全分析总结
 
在UI设计中,标签的特征跟生活中的标签也很相似,用以标注内容分类或内容要点,方便用户快速定位自己需要的内容目标。 标签还有满足用户的隐形需求的作用,当用户在犹豫是否要进行下一步操作的时候,标签在一定程度上加强了用户的需求欲望,促进下一步操作。那标签到底有什么作用?
01
传达信息,突出产品特色
 
标签的基本功能是分类和突出内容要点,以方便用户快速定位他们需要的信息或功能。标签常用于传达产品基本信息、折扣信息、优惠信息、产品卖点等。对产品而言,它能优化信息层级,又能简单明确地传达产品特点;对用户而言,可以第一时间获取关键信息,降低用户阅读门槛,所以标签的首要任务就是为满足用户的隐性需求而传达特色信息。
例如,美团天天神劵、折扣信息等,淘宝里的直降低多少钱、同款低价,让用户潜意识地认为能够降低经济成本。
设计干货分享|标签设计的超全分析总结
02
引导用户操作,建立用户操作的预期
 
标签还可以用于建立用户操作的预期,让用户在使用产品之前就知道点击后可能发生的效果,从而增加用户点击的兴趣和满意度。
 
例如:音频标签、视频标签“独播”、“vip”等,让用户在点击前预知点击后的效果。标签还可以用作行为引导,告知某操作的结果,如淘宝里“常逛的店”,让用户提前知悉操作之后得到的结果,加强点击的动机。
设计干货分享|标签设计的超全分析总结
03 传递品牌与可靠性
品牌性质的标签,让消费者对产品产生信任感。同时,标签也是品牌与消费者之间的沟通桥梁,通过简洁明了的文字和视觉元素,传达产品的特点和优势。
 
例如如:“百亿补贴”、“官方店”、“品牌”。许多用户在浏览列表时,会通过标签快速判断是否有必要点击查看详情。此外,标签内展示强公信力的信息(榜单排名/评分等),可以加强内容可靠性及优质性。
设计干货分享|标签设计的超全分析总结
04
方便分类
标签广泛用于用户区分产品内容,进行分类,进而确定关键词,优化搜索。避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。
例如:京东水果蔬菜“时令热卖”标签和淘宝里的评价标签,用户可选择自己感兴趣的标签去查找自己想要的信息,提高浏览效率,节约时间成本。
设计干货分享|标签设计的超全分析总结
05
营销引流
 
为用户打上不同的标签,用于区分不同用户群体,分类精准定向推送产品。标签既能突出产品特色信息、又不会占用太多空间,所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。
如:小红书文末的文字标签、淘宝搜索的“探索发现”
设计干货分享|标签设计的超全分析总结
05
从众心理引导转化
 
在营销中,利用从众心理可以引导用户做出购买决策,这类信息广泛应用在标签设计中,积极引导用户点击和转化。
例如,可以展示其他用户的购买记录或评价,让用户看到其他人对该产品的认可和好评,从而增加他们的信任感和购买欲望。像淘宝里的“多少人回购”,银行理财里的“多少人次购买”等等,都会对当前用户的心理产生极大影响,很多时候,用户的想法和行为受到周围人的影响程度,往往超过理性的认知。 当用户无法决策时,从众心理会成为影响用户决策的重要因素。
设计干货分享|标签设计的超全分析总结
06 告知状态
当内容状态变化且产品希望提示用户知悉时,标签可以作为告知当前状态的提示,如上新的“New”、“直播中”等。
此外,告知当前状态还有营造稀缺性的作用。如“限购多少件”、“即将售罄”,促使用快速决策。
设计干货分享|标签设计的超全分析总结
 
07 营造氛围
标签不仅仅是产品信息的载体,更是营造氛围的重要元素。通过选择适合的色彩、字体和图案,标签可以传达出不同的情感和氛围,吸引消费者的注意力,激发购买欲望。
 
例如:“38换新节”、“上新啦”,有的产品确实是基于热度展示的标签,也有的产品只是为了吸引用户注意力而展示。
设计干货分享|标签设计的超全分析总结
 
 
设计干货分享|标签设计的超全分析总结
在UI设计中,标签是一个不可或缺的元素,那如何设计才能达成业务目标?
01 简洁明了
标签设计的文案(字段)长短尽量简短清晰,具有一定的识别性、易通性,避免使用复杂的词汇和句子。用户在浏览界面时,应该能够快速理解标签的含义。这里所说的精炼并非一味地求短,虽然“短”是标签必备的因素,但有时候过于简短的标签根本没办法给用户传达足够的信息,甚至会导致用户更加疑惑,这也失去了添加标签的初衷。
 
02 一致性与差异性
在不同的页面和场景中,标签的设计应该保持一致的风格和格式。这包括颜色、字体、大小、布局和位置等方面的一致性。这样做有助于用户建立认知模型,提高他们的使用效率。然而,尽管标签设计需要保持一致性,但也需要一定的差异性。这种差异性是针对不同类型和视觉权重的标签,通过不同的视觉样式和色彩来体现信息的层级关系。因此,虽然表面上看起来存在冲突,但实际上并不矛盾。
 
03适当的颜色
标签的颜色应该与背景颜色形成对比,以便用户能够清楚地看到。同时,颜色的选择也应该考虑到品牌的形象和用户的视觉感受。
 
04 适当的位置
标签的位置应该方便用户操作。例如,重要的标签应该放在显眼的位置,而不太重要的标签信息可以放在次要的位置。
 
结语
UI 设计中的标签跟我们日常生活中的标签很相似,它不仅能对产品作分类、特色标记,还能在用户犹豫不决的时候起到一定的推动作用,是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。根据产品的目的和需求,在不同时间和场景下使用合适的标签是至关重要的。通过简单精炼的表达方式,标签能够在有限的空间内提供更多的信息维度,吸引用户的注意并激发他们的好奇心、提升信息转化的效率。
 
作者:满满滴滴
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

暗色模式的优势

博博 B端界面设计文章及欣赏

一、用户体验层面
1.提高阅读舒适度
(1).对比度和可读性
在相同的对比度条件下,浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明,优化对比度是提高阅读舒适度的关键因素之一。
浅背景上深字与深背景上浅字的视觉对比
浅背景上深字与深背景上浅字的视觉对比
 
(2).用户偏好和满意度
一项针对用户对暗色模式的使用体验的调查显示,与默认的白底模式相比,用户在使用暗色模式时报告了更低的视觉疲劳和更高的满意度。斯隆(Sloan)的一项研究在1977年就报告说,如果更多的光线通过混浊的透镜到达眼睛,则出现畸变的可能性更大,即暗模式对视力障碍者更好。
对于长时间从事屏幕工作的人来说,暗色模式对眼睛更加友好
对于长时间从事屏幕工作的人来说,暗色模式对眼睛更加友好
 
2.减少视觉疲劳
(1).人眼生理特性
暗色模式能减少屏幕发出的光线,这有利于减少眼睛疲劳和不适,特别是在低光环境下,人眼的虹膜会打开以接受更多光线,而暗色模式提高了减少的光源,减少了对眼睛的刺激。
亮/暗环境下瞳孔大小的变化
亮/暗环境下瞳孔大小的变化
 
(2).蓝光辐射减少
人们通过长期研究发现短波可见光,即紫光和蓝光对眼底视网膜有相当程度的破坏作用, 而人们通常把这种可见光波长中高能量波段(400- 470nm)对视网膜的损坏现象称为“蓝光伤害现象”。 还有研究关注了暗色模式对蓝光辐射的影响。由于暗色模式降低了屏幕的整体亮度,因此也减少了蓝光的辐射。
可见光波段分布
可见光波段分布
 
二、设备电池寿命
1.降低屏幕功耗
在OLED屏幕上,每个像素都是独立发光的,当显示黑色时,相关的像素点会关闭,从而不消耗能量。这意味着,显示大面积黑色内容的暗色模式能够显著减少屏幕的能量消耗。
OLED屏幕发光原理
OLED屏幕发光原理
 
2.实际省电效果
以 Google 测试数据为例,OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度,手机的电量消耗下降了 63%。
Google的测试数据
Google的测试数据
 
三、降低屏幕功耗
1.促进睡眠对于晚上喜欢在床上阅读或工作的用户来说,暗色背景有助于降低屏幕亮度,减少对褪黑素分泌的干扰,也有助于减少蓝光对睡眠周期的影响,从而帮助用户更快入睡并提高睡眠质量。
OPPO手机暗色模式广告
OPPO手机暗色模式广告
 
2.减少眩光
眩光是明亮的屏幕和低光环境之间恼人的对比现象,对眼睛具有一定的影响并造成眼部不适。暗色模式通过使用深色背景和亮色文字,整体降低了屏幕的亮度,这样在光线较亮的环境中,屏幕的亮光与周围暗环境的对比度降低,从而减少了屏幕反射光线对眼睛的刺激,降低不适。
有眩光与无眩光的显示器对比
有眩光与无眩光的显示器对比
 
四、打造沉浸式体验
1.减少视觉干扰
暗色模式提高了一种无干扰的工作环境,有助于他们专注于手头的任务,特别是在进行写作、编码或其他需要集中注意力的活动时,暗色模式能够减少视觉干扰。暗色模式为视觉设计提供了更大的对比度,使得界面元素更为突出。这种高对比度不仅有利于内容的战士,也增强了用户的视觉聚焦,让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时,暗色背景能够使色彩更为鲜明,提升用户的视觉体验。
编码软件一般默认暗色界面,有利于专注工作
编码软件一般默认暗色界面,有利于专注工作
 
2.增强视觉聚焦
暗色模式为视觉设计提供了更大的对比度,使得界面元素更为突出。这种高对比度不仅有利于内容的战士,也增强了用户的视觉聚焦,让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时,暗色背景能够使色彩更为鲜明,提升用户的视觉体验。
手游王者荣耀UI界面
手游王者荣耀UI界面
 
 


作者:阿琳01
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

暗色模式的基本概念和发展历程

博博 B端界面设计文章及欣赏

一、定义及其在UI设计中的表现形式
1.暗色模式的定义
暗色模式是一种低光用户界面(UI)设计,也称为深色模式,是一种用户界面设计选项,它使用较深的颜色方案和背景,通常为黑色或深灰色,以减少屏幕亮度并提供更舒适的视觉体验。
iOS 13 亮色模式(左)与暗色模式(右)的对比
iOS 13 亮色模式(左)与暗色模式(右)的对比
 
2.暗色模式的定义
(1).暗色模式在UI设计中的表现形式
设计师需要为暗色模式创建一个新的调色板,这通常意味着降低颜色的饱和度,以适应深色背景。同时,避免使用纯黑作为主色调背景,而是选择接近纯黑的深灰色,以确保阅读体验的舒适性和可读性
亮色/暗色模式下主色需要进行调整
亮色/暗色模式下主色需要进行调整
 
(2).对比度控制
暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上,以保证内容的清晰度和易读性。对于彩色元素,也需要适当调整饱和度,确保整体色彩之间的对比度符合无障碍标准。
达到/未达到WCAG2.0AA标准的视觉效果对比
达到/未达到WCAG2.0AA标准的视觉效果对比
 
(3).视觉元素区分
在暗色模式下,设计师需要特别注意视觉元素的区分,通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转,而是一种“弱光”主题的设计思考,旨在优化用户在低光环境下的视觉体验。
亮色模式中的按钮在暗色模式中显得太跳跃
亮色模式中的按钮在暗色模式中显得太跳跃
 
二、历史回顾及发展脉络
1.命令行界面时代
在早期的计算机系统中,如DOS和Linux,终端通常使用暗色模式,这是因为早期的CRT显示器存在闪烁问题,暗色背景能够减少视觉疲劳,并提供较高的对比度。
Linux的终端界面
Linux的终端界面
 
2.个人电脑时代
随着个人电脑的普及,图形用户界面(GUI)逐渐成为标准,此时大多数操作系统和应用程序采用了亮色模式,以模仿纸张的颜色并减少CRT显示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移动设备时代
智能手机和平板电脑的兴起带来了OLED等先进显示技术,这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行,特别是在节省电量和减少眼睛疲劳方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系统时代
近年来,各大操作系统开始正式支持暗色模式。例如,Windows 10在2018年的更新中引入了暗色应用模式,macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、设计趋势中暗色模式的地位
暗色模式在当前设计趋势中占据重要地位,以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境,还提供美学上的新探索,响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新,暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序,如WhatsApp、Instagram、Google、Facebook等,都已经引入暗色模式设计,这表明暗色模式已经成为了一种广泛接受的设计趋势。
从左往右依次为:WhatsApp、Instagram、Google、Facebook
从左往右依次为:WhatsApp、Instagram、Google、Facebook


作者:阿琳01
来源:站酷

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

《UnitLife》APP界面/交互设计案例

前端达人 设计资源

下面开始:
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例
 
 
收藏
《UnitLife》APP界面/交互设计案例


 

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 
作者:dodoheyiqian
链接:https://www.zcool.com.cn/work/ZNjgwNjI4OTI=.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档