ui - 设计每日一贴-专注优秀UI设计与软件开发-北京兰亭妙微

首页

062024-5

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

用户习惯的重要性

为了设计出用户易于接受的产品，进行用户调研以了解其习惯变得尤为重要。在设计过程中，产品易用性是一个关键指标，它反映了产品是否易于使用。用户往往会基于他们的“惯性认知”，即其他产品培养出的使用习惯，来判断一款产品的易用性。因此，一个符合用户习惯的产品往往被认为易用性较好，而不符合用户习惯的产品则可能面临用户流失的风险。

用户习惯的形成

用户行为习惯的形成与记忆的两种类型“外显记忆和内隐记忆”紧密相关。

【外显记忆】是我们可以通过语言和文字描述的记忆，例如学校学习时背诵的课文和公式。而【内隐记忆】也称为非陈述性记忆，是我们无法用行为描述的记忆，例如学会骑自行车后很难遗忘的技能。这种记忆与我们的条件反射和肌肉记忆相关联，一旦形成，便不易改变。

内隐记忆的形成与我们使用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开发

评论(0) 浏览(516)

062024-5

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

博博

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

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

1.1 标签是否加冒号

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

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

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

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

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

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

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

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

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

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

因此，得出以下建议：

如果你希望系统重表单使用更多的业务场景，和对齐方式，请使用冒号
如果你当前已使用有冒号的表单，请保持使用冒号
如果你新建一个系统，使不使用冒号随意
一旦决定是否使用冒号，需要全部表单统一规则

1.2 表单必填样式

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

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

1.2.1 顶部统一提示

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

1.2.2 文字提示“必填”

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

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

1.2.3 红色星号 * 必填提示

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

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

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

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

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

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

是否可标记可选字段

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

1.3 提示样式

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

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

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

小结

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

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

评论(0) 浏览(532)

062024-5

B端基础设计知识

博博

1.1、什么是b端设计

如果你不了解B端设计是什么那我来给你讲一下。这个B是Business的缩写、他的意思是商业。所以b端设计就是面向企业和商业用户的界面设计。

1.2、b端设计的价值

做为B端设计师、你有没有想过我们的价值体现在哪里。当我们明白这个的时候我们的工作才能更好的开展，更好的为我们产品提供一份力量。

1.2.1、视觉设计与交互体验优化

通过精心设计的视觉语言和信息布局，增强信息传达的清晰度和效率，确保品牌形象的统一，提升用户对产品的认知和接受度。

优化用户与系统的交互流程，去除冗余步骤，提高操作便捷性，降低用户学习成本，提升工作效率。

1.2.2、建立与维护设计规范

为B端产品搭建一套强大且统一的UI设计规范，确保不同模块、不同版本之间的视觉一致性，提升用户体验，同时也方便团队协作和后续迭代。

1.2.3、业务流程优化与降本增效

B端设计师深入理解业务流程，通过设计手段对现有工作流程进行梳理、简化或自动化，消除冗余环节，提高业务执行效率，帮助企业降本增效。

1.2.4、降低研发成本

建立标准化的设计规范和可复用的设计组件库，能够显著提高设计和开发的一致性、效率和质量，减少重复劳动，缩短产品研发周期，降低整体的研发成本。

不仅对外部客户产品进行设计，B端设计师还会为内部各种支持系统制定设计规则，通过构建适用于多个应用系统的统一设计规范，实现跨部门、跨项目的研发效能提升。

1.2.5、丰富的专业知识助力快速落地

凭借丰富的经验和深厚的专业知识，B端设计师能在面对复杂项目时，迅速提炼出适用的设计模型作为参照，确保设计方案的准确性和落地可行性，避免设计偏差导致的返工或项目延期。

2、B端设计和C端有什么区别

我个人感觉B端C端的区别是很大，但是C端设计师如果转B端还是相对很轻松的一件事。只要完善一下自己对B端业务的理解哪里。产品的使用场景的熟悉和对设计目标的改变就行。毕竟现在B端C化的趋势很明显。他们具体的区别也很明显。

2.1、C端

严格意义的说对于我来说并没有做过太多的C端项目。基本都是在B端项目中可能会设计到C端的产品或者项目做一些。也只是做过几个小的APP和小程序。

C端设计（Consumer-to-Consumer Design），即面向消费者的设计，主要关注的是直接服务于大众用户的产品或服务的用户体验设计。

2.2、BC的区别

C端产品和B端产品的使用场景导致了需求差异。C端产品，解决的是用户在生活场景中的需求痛点；B端产品服务于组织，组织的需求不是从单个用户需求点出发，而是一种生产关系的连接和延伸。

2.2.1、目标用户

B端面向的是企业或组织等机构用户，而C端则是面向广大普通消费者用户。

2.2.2、行业与场景

B端业务场景复杂，角色多且业务场景也多，不同行业不同客户需要不同的专业解决方案。而C端业务场景和业务逻辑则相对简单，流程也较为标准化。

2.2.3、盈利模式

B端多以项目招投标进行单次或持续性收费，也可能通过提供SaaS解决方案收费，如果有额外的定制化需求，还需再付费。C端则通常是通过广告变现、增值服务、佣金抽成等方式盈利。

2.2.4、产品设计

B端产品设计以业务为中心，目标是提升效率、降低成本、控制风险等，需要考虑不同角色的需求，且更注重实用性和服务性。C端产品设计则以用户为中心，目标是让用户充分使用产品，更注重用户体验和产品创新。

3、我们应该具备什么能力

上面我们说了我们作为设计师我们的价值都在那些方面。那我们想要完成这些价值，那么我们一定要有相应的能力。B端设计通常更侧重于效率、可扩展性、数据可视化和复杂工作流程的支持。能力够了你到哪里都会发光发亮。每个B端设计师都是小半个产品经理。加油设计师。

3.1、应具备的能力

由于B端业务和逻辑相对复杂。B端设计师需要具备深厚的业务理解力、强大的逻辑组织能力、出色的数据可视化技巧、良好的技术素养，以及出色的协作与沟通能力，以应对B端产品设计的复杂性和专业化需求。

3.1.1、深入理解业务流程

熟悉企业内部运作逻辑，能够解析复杂的业务规则和工作流程。能够与业务专家、产品经理紧密协作，准确把握用户角色、权限层级、任务目标和痛点。

3.1.2、用户研究与测试

运用用户调研、访谈、问卷调查等方法，了解企业用户的真实需求和使用场景。设计并执行可用性测试，评估设计方案的效果，持续迭代优化。

3.1.3、设计规范

遵循企业级设计语言和品牌指南，确保设计的一致性和专业性。

3.1.4、组件化与模块化设计

掌握组件化设计原则，创建和维护一套适用于B端产品的UI组件库，确保界面一致性与开发效率。能够设计可复用、可配置的模块，适应不同企业用户的定制化需求。

3.1.5、数据敏感与数据可视化设计

理解数据在企业决策中的重要性，擅长设计各类数据报表、仪表板和数据分析工具。能够运用图表、表格、图形等元素，将大量复杂数据转化为易于理解和行动的可视化信息。

3.1.6、持续学习与行业洞察

关注B端设计趋势、新兴技术（如AI人工智能、低代码/无代码平台等）及其对设计的影响。不断更新知识结构，提升自身在特定行业（如金融、医疗、供应链等）的专业素养。

3.2、如果持续学习

我持续学习的方法其实还挺简单的、看大厂的项目总监。在项目做完后自己做复盘做总结。然后不断的沉淀做输出。用输出来倒逼输入。关注新的知识、如最近一年爆火的AI技术。

还有就是和大牛交流学习。

4、常见的一些系统介绍

身为B端人我们要了解我们会做到那些系统的设计工作。在过往的工作经历是我做过、SaaS、OA、CRM、后台管理系统等。那还有那些B端系统呢。这里我从网上搜了一下，我没做过的系统还真多。

4.1、B端管理系统的10种类型

B端管理系统是指面向企业客户的管理系统，也称为B2B管理系统。这些系统旨在帮助企业管理其各种业务流程和资源，包括客户关系、供应链、人力资源、财务、生产、项目管理等方面。

4.1.1、企业资源计划系统（ERP, Enterprise Resource Planning）

整合企业内部的财务、供应链、制造、人力资源、销售、采购、库存、项目管理等各个业务环节，提供一体化的信息管理和决策支持。

实现跨部门数据共享、业务流程自动化，提升企业运营效率和决策准确性。

好用的ERP系统

-金蝶ERP

金蝶ERP是国内最好的ERP系统之一，功能全面，适合各种企业规模，易于部署和使用，支持移动端，定制开发能力强。虽然价格相对较高，实施周期较长，需要专业人员支持，但作为国内领先的ERP软件，金蝶ERP在国内市场上具有一定的竞争力。

-用友ERP

用友ERP是亚太地区较大的管理软件，也是中国最大的独立软件厂商之一。它以集成的信息管理为基础，以规范企业运营，改善经营成果为目标。用友ERP拥有较为完善的本地化服务体系，能够快速响应客户需求并提供定制化服务。然而，由于定制化程度较高，一些功能可能比较复杂，需要较高的维护成本。总体而言，用友ERP是国内最好的ERP系统之一。

-浪潮ERP

浪潮ERP是国内最好的ERP系统之一，是中国企业管理软件领域的领先者。浪潮的ERP软件以项目运作为主，成熟度较高，产品线丰富。虽然产品线定位不够清晰，但平台化程度高，可以配置性强，且整合了物流和商业智能软件。此外，浪潮的ERP软件还具有较强的整合能力，可以配置不同行业的软件和解决方案。总的来说，浪潮ERP是国内最好的ERP系统之一。

4.1.2、客户关系管理系统（CRM, Customer Relationship Management）

管理与客户相关的所有活动，包括销售线索管理、市场营销、客户服务、订单处理、客户数据分析等。

提升客户满意度，优化销售策略，增强客户忠诚度，助力企业实现持续增长。

好用的CRM系统

-ZOHO

ZOHO 上榜理由:ZOHO成立于1996年美国,企业运行和管理的一站式云平台,提供CRM、在线Office、邮箱、项目管理、团队协作、人事管理、财务管理、BI商业智能、应用开发平台等SaaS软件产品。目前,ZOHO在全球100多个国家和地区拥有7000多万用户。

-纷享销客

国内排名第一的CRM管理系统:纷享销客通过百度指数、IDC等报告显示,纷享销客在国内CRM市场占有率多年稳居第一,同时也是增速第一的CRM厂商,连续多年登上胡润全球独角兽榜单。同时,纷享销客也是国内最为老牌CRM管理系统之一,具备非常成熟的产品功能,比如客户管理、拜访管理、商机、合同、数据分析、公海池等等,他几乎能够满足大部分大、中、小企业对于CRM管理的想象。同时,纷享销客的价格也是国内产品中性价比最高的几个产品之一,支持私有部署、定制化开发、SaaS等购买方案,且提供一定人数规模的免费使用。

-销售易

销售易是专注销售服务管理平台的CRM提供商,致力于通过新型互联网技术,打造符合数字化时代下企业需求的新一代CRM产品,将企业同客户互动的全过程数字化、智能化,帮助企业转型为真正以客户为中心的数字化运营组织。

4.1.3、供应链管理系统（SCM, Supply Chain Management）

协调供应商、制造商、分销商、零售商之间的物流、信息流和资金流，涵盖采购、生产计划、库存控制、订单履行、运输、仓储等环节。

实现供应链透明化，降低库存成本，提升响应速度，确保供需平衡。

好用的SCM系统

-金蝶K/3供应链管理系统

金蝶K/3供应链管理系统是一款面向中小型企业的供应链管理系统软件。它提供了完整的计划、执行和监控功能，包括需求计划、物料需求计划、采购、库存管理、销售和客户服务等。此外，它还支持多种不同的生产和物流业务模式，如按订单生产、按库存生产等。

-用友U8供应链管理系统

用友U8供应链管理系统是一款面向中型企业的供应链管理系统软件。它提供了完整的计划、执行和监控功能，包括需求计划、物料需求计划、采购、库存管理、销售和客户服务等。此外，它还提供了丰富的可视化和报告功能，帮助企业更好地了解供应链的运行情况。

-智邦国际供应链管理系统

智邦国际供应链管理系统是一款面向中小型企业的供应链管理系统软件。它提供了完整的计划、执行和监控功能，包括需求计划、物料需求计划、采购、库存管理、销售和客户服务等。此外，它还提供了丰富的可视化和报告功能，帮助企业更好地了解供应链的运行情况。

4.1.4、人力资源管理系统（HRM, Human Resource Management）

包括招聘、入职、培训、绩效管理、薪酬福利、员工发展、考勤、离职管理等功能。

提高人力资源管理效率，确保合规性，支持人才战略决策，提升员工满意度和组织效能。

好用的HRM系统

-北森人事云

北森算是老品牌了，做人才测评起家的，近些年也开始做人力系统，业内口碑较好，价格偏贵，是比较偏向于大型企业的HRSaaS服务平台，深入中大型企业HR业务提供从招聘、测评到人事、假期、薪酬再到绩效、继任、学习、敬业度调查的全场景解决方案。

-金蝶人力云

金蝶人力云是金蝶企业专为企业HR信息化管理提供的解决方案，可以有效帮助全员互联、高效协作，有效打通内外部人才供应链条、为组织HR战略决策提供精确量化分析。

-i人事

以劳动力管理与智能薪酬为核心的一体化HR SaaS系统，以“软件+服务+生态”赋能方式，促动集团化人效提升。

功能覆盖人力资源管理6大模块、贯穿员工“选用育留”全流程，助力企业一个平台搭建智能HR管理闭环，提升管理效率；

4.1.5、酒店管理系统（PMS, Project Management System）

店管理系统PMS(Property Management System)是一个集成了多个功能模块的软件系统，旨在帮助酒店管理者更好地组织和协调各项业务活动。

PMS的核心功能包括客房预订、前台接待、账务管理、报表分析等。通过PMS，酒店可以实现信息共享、自动化处理和实时监控，从而提高工作效率和服务质量。

好用的PMS系统

-西软

石基旗下的西软，在国内四五星级酒店市场占有率超过80%，稳居国内市场占有率第一。做为opera在中国的唯一代理商，可以说一定程度上石基垄断着中国高星级酒店的酒店管理系统。进入2020年，石基西软践行“云+移动”战略，全面升级云XMS平台，除了PMS功能以外，云XMS还集成了POS、移动产品、ITF等模块，广泛适用于单店、集团用户。

作者：彪形大汉pro
来源：站酷

评论(0) 浏览(483)

262024-4

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

博博

一、降落伞带来的营销广告

在这个广告满天飞的年代，用户已经逐步开启广告免疫模式，如何提高用户对广告的关注度至关重要。

近期在体验饿了么时，等待送餐界面中空降一个降落伞，从左上角飘到右侧悬浮，弹出红包悬浮广告。降落伞飘浮的动态过程吸引了用户的关注度，进而提高了营销广告的点击率，虽然广告大家都比较反感，但是一个伴随着惊喜的广告也会让你放下戒备心理。

二、动效反馈商家备餐过程

提升等待过程对于用户体验来说尤为重要，降低用户等待过程中的焦虑感，才能让用户愿意为此停留。

通过饿了么点餐之后，商家需要一定的时间完成餐饮的制作，必然需要用户等待一些时间。在这个备餐过程中，当前界面以一个翻炒动效表达，情感化的动效不仅提示用户当前状态，也提升了设计表达的感官体验。

三、这个广告惊不惊喜意不意外

意料之外的广告是带给你惊喜还是反感呢？平台为了提高变现能力，各种层出不穷的广告玩法也让你猝不及防。

之前在体验腾讯视频 App 时，从闪屏广告过度到 Banner 图的过程中，经历了多个广告新花样。首先从闪屏切换到自动轮播的弹窗模式，再演变到放大版的多个广告切片（占 Banner 位呈现），最后再恢复到 Banner 的正常布局中。这个过程无疑是把广告的存在感拉满了，让你对广告的记忆形成硬性要求。

无论这个广告设计方案是否让用户反感，但是这个呈现的互动方式还是比较新颖的，相信广告的点击率必然有所提升。

四、Banner 广告的视觉沉浸感

Banner 图在产品中是非常普及的，各类形式的演变也层出不穷，产品设计师都在探索更多可能性。

在腾讯视频 App 动漫栏目中，发现一例很有想法的 Banner 表现。Banner 上面新增了一个悬浮的火焰燃烧的动效，提升了整体的氛围感，动效与 Banner 画面完美贴合，视觉沉浸感十足。

五、待机状态下的实时动态

随时让用户感受到你的存在，才能让人感到安心，服务过程中状态实时可见至关重要。

通过饿了么点餐之后，就算处于待机状态时，只要点亮屏幕即可看到当前出餐状态。可视化的图形结合时间提醒，让状态一目了然，使得点餐到用餐之间的过程更有用户可控性。

六、小图标里的细节反思

产品中有很多辅助功能/信息等表达的图标，既要能准确表达主题，也要让用户易于理解。

在汽车之家 App 发现了一个值得反思的图标案例，在扫一扫的图标中结合了汽车外形轮廓，不仅不会影响扫描的功能表达，也进一步表达了该功能的差异。和别的产品扫描功能不同，这个是对准汽车进行扫描，体现出了业务的差异化。一枚小小的图标体现出了设计师的能力，用最简单的方式表现自身产品的差异，以此提升用户的操作体验。

七、轮播式的悬浮设计

悬浮设计非常普及，因为占比小和滑动页面会隐藏，对用户的干扰比较小。

最近在芒果 TV 首页发现了悬浮窗口的轮播式表达，芒果卡和活动中心会自动轮播显示（也能手动切换）。让我们对悬浮窗口的设计又多了一种设计理解，可以呈现更多不同内容的表达，提升了窗口的利用率。

八、氛围热烈的底部标签栏

底部标签栏的设计在图标创意层面发挥较多，各类风格的图标让该栏目更加丰富多彩，除此之外也有在背景层渲染氛围的案例。

近期恰逢芒果 TV 十周年之际，在底部标签栏背景层也加强了氛围感。丰富多彩的元素和配色，结合主题化的图标设计，使得整体氛围感拉满。

九、收缩式交互设计

通过交互方式应对用户操作过程，特别是在滑动界面时，交互方式的优化可以降低干扰，提高当前界面的利用率。

在 Blurrr App 创作界面，默认以 3D 动态图标展示“开始创作”按钮，当滑动界面时按钮会收缩展示。通过收缩式的交互设计，让界面可以展示更多内容，也不会影响用户点击按钮进行创作。即通过 3D 动效加强了功能的曝光度，又通过收缩式交互提高了内容的展示空间，可谓是一举多得的设计解决方案。

十、形象化的进度设计

进度设计是反馈状态变化的关键，通过可视化的表达让用户一目了然，提高用户对服务过程的把控。

当用户通过携程旅行 App 订票后，在行程订单界面可以看到列车行驶状态的进度提示。通过可视化的列车形象的表达了行驶状态，让用户清晰的看到行驶方向和抵达站点示意。不仅信息传递高效，形象的表达也使得感官体验更佳。

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

评论(0) 浏览(438)

102024-4

教你一文读懂暗色模式

博博

暗色模式（Dark Mode）的兴起是一个逐渐发展的过程，它涉及到技术进步、用户体验优化以及设计趋势的变化。

随着iOS 13在2019年的发布，暗色模式开始成为用户关注的焦点；在用户体验方面，设计者们考虑到了环境光线与屏幕亮度的匹配问题，暗色模式可以有效减少视觉疲劳；在实际使用中，用户发现暗色模式在光线较暗的环境中更为舒适，这也促使了暗色模式的普及和发展。

暗色模式在UI设计中的重要性体现在改善视觉舒适度、节省电量以及提供个性化选择上，其普及程度随着用户需求和技术发展不断提升。

一、定义及其在UI设计中的表现形式

1.暗色模式的定义

暗色模式是一种低光用户界面（UI）设计，也称为深色模式，是一种用户界面设计选项，它使用较深的颜色方案和背景，通常为黑色或深灰色，以减少屏幕亮度并提供更舒适的视觉体验。

iOS 13 亮色模式（左）与暗色模式（右）的对比

2.暗色模式的定义

(1).暗色模式在UI设计中的表现形式

设计师需要为暗色模式创建一个新的调色板，这通常意味着降低颜色的饱和度，以适应深色背景。同时，避免使用纯黑作为主色调背景，而是选择接近纯黑的深灰色，以确保阅读体验的舒适性和可读性。

亮色/暗色模式下主色需要进行调整

(2).对比度控制

暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上，以保证内容的清晰度和易读性。对于彩色元素，也需要适当调整饱和度，确保整体色彩之间的对比度符合无障碍标准。

达到/未达到WCAG2.0AA标准的视觉效果对比

(3).视觉元素区分

在暗色模式下，设计师需要特别注意视觉元素的区分，通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转，而是一种“弱光”主题的设计思考，旨在优化用户在低光环境下的视觉体验。

亮色模式中的按钮在暗色模式中显得太跳跃

二、历史回顾及发展脉络

1.命令行界面时代

在早期的计算机系统中，如DOS和Linux，终端通常使用暗色模式，这是因为早期的CRT显示器存在闪烁问题，暗色背景能够减少视觉疲劳，并提供较高的对比度。

Linux的终端界面

2.个人电脑时代

随着个人电脑的普及，图形用户界面（GUI）逐渐成为标准，此时大多数操作系统和应用程序采用了亮色模式，以模仿纸张的颜色并减少CRT显示器的眩光。

Windows2000的GUI

3.移动设备时代

智能手机和平板电脑的兴起带来了OLED等先进显示技术，这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行，特别是在节省电量和减少眼睛疲劳方面。

iOS13的暗色模式

4.操作系统时代

近年来，各大操作系统开始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色应用模式，macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。

Windows10的暗色模式

三、设计趋势中暗色模式的地位

暗色模式在当前设计趋势中占据重要地位，以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境，还提供美学上的新探索，响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新，暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序，如WhatsApp、Instagram、Google、Facebook等，都已经引入暗色模式设计，这表明暗色模式已经成为了一种广泛接受的设计趋势。

从左往右依次为：WhatsApp、Instagram、Google、Facebook

一、用户体验层面

1.提高阅读舒适度

(1).对比度和可读性

在相同的对比度条件下，浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明，优化对比度是提高阅读舒适度的关键因素之一。

浅背景上深字与深背景上浅字的视觉对比

(2).用户偏好和满意度

一项针对用户对暗色模式的使用体验的调查显示，与默认的白底模式相比，用户在使用暗色模式时报告了更低的视觉疲劳和更高的满意度。斯隆（Sloan）的一项研究在1977年就报告说，如果更多的光线通过混浊的透镜到达眼睛，则出现畸变的可能性更大，即暗模式对视力障碍者更好。

对于长时间从事屏幕工作的人来说，暗色模式对眼睛更加友好

2.减少视觉疲劳

(1).人眼生理特性

暗色模式能减少屏幕发出的光线，这有利于减少眼睛疲劳和不适，特别是在低光环境下，人眼的虹膜会打开以接受更多光线，而暗色模式提高了减少的光源，减少了对眼睛的刺激。

亮/暗环境下瞳孔大小的变化

(2).蓝光辐射减少

人们通过长期研究发现短波可见光，即紫光和蓝光对眼底视网膜有相当程度的破坏作用，而人们通常把这种可见光波长中高能量波段(400- 470nm)对视网膜的损坏现象称为“蓝光伤害现象”。还有研究关注了暗色模式对蓝光辐射的影响。由于暗色模式降低了屏幕的整体亮度，因此也减少了蓝光的辐射。

可见光波段分布

二、设备电池寿命

1.降低屏幕功耗

在OLED屏幕上，每个像素都是独立发光的，当显示黑色时，相关的像素点会关闭，从而不消耗能量。这意味着，显示大面积黑色内容的暗色模式能够显著减少屏幕的能量消耗。

OLED屏幕发光原理

2.实际省电效果

以 Google 测试数据为例，OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度，手机的电量消耗下降了 63%。

Google的测试数据

三、降低屏幕功耗

1.促进睡眠

对于晚上喜欢在床上阅读或工作的用户来说，暗色背景有助于降低屏幕亮度，减少对褪黑素分泌的干扰，也有助于减少蓝光对睡眠周期的影响，从而帮助用户更快入睡并提高睡眠质量。

OPPO手机暗色模式广告

2.减少眩光

眩光是明亮的屏幕和低光环境之间恼人的对比现象，对眼睛具有一定的影响并造成眼部不适。暗色模式通过使用深色背景和亮色文字，整体降低了屏幕的亮度，这样在光线较亮的环境中，屏幕的亮光与周围暗环境的对比度降低，从而减少了屏幕反射光线对眼睛的刺激，降低不适。

有眩光与无眩光的显示器对比

四、打造沉浸式体验

1.减少视觉干扰

暗色模式提高了一种无干扰的工作环境，有助于他们专注于手头的任务，特别是在进行写作、编码或其他需要集中注意力的活动时，暗色模式能够减少视觉干扰。

暗色模式为视觉设计提供了更大的对比度，使得界面元素更为突出。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

编码软件一般默认暗色界面，有利于专注工作

2.增强视觉聚焦

作者：阿琳01
来源：站酷

评论(0) 浏览(673)

102024-4

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

博博

在UI设计中，微文案往往被视作细枝末节，容易被设计师们所忽视。然而，正是这些看似不起眼的文字，却在用户体验中扮演着举足轻重的角色。微文案，即那些短小精悍、直接明了的文字描述，它们不仅能够指导用户操作，还能够增强产品的情感价值，提升用户满意度。

资深设计专家Joshua Porter曾指出：优化界面体验的一个快捷方式，就是提升文案的质量。他在《Writing Microcopy》一文中首次提及“微文案”这一术语，并以确认弹窗的文案为例，展示了如何通过清晰的表述“账单地址是你卡上显示的地址”，有效减少用户在使用过程中的错误。简而言之，要想快速优化界面体验，提升文案水平是一个行之有效的途径。

一、了解微文案

如果你有学习过尼尔森的十大可用性原则，你会发现10条中有4条都与文案有关。

系统状态 —— 告诉用户当前正在发生什么，是卡住了还是处在loading中或是其它什么状态。

一致性和标准化原则 —— 有一些约定俗成的规则，其中有一些普遍接受的术语，明确的操作提示，在不同界面保持统一等等。

防错原则 —— 帮助用户明白当他们做什么操作会发生什么结果，或者清晰的解释某个操作会有什么行为。

明确错误 —— 错误信息应该用人话表达（不要用代码），较准确地反映问题所在，并且提出一个建设性的解决方案。

1、微文案的定义

微文案（Microcopy）指的是在界面中，能够引导、帮助用户与界面交互行为的简短文案，可以是一个单词、也可以是一句话，常见的有表单文案、按钮文案、弹窗文案、错误提示等，大部分微文案都会对用户的行为产生直接的影响，如下所示：

2、微文案被重视的原因

微文案，作为用户与产品交流中最直接的触点，不仅有助于用户预见潜在问题，更能激发他们继续操作的意愿。通过预先洞察用户在操作过程中可能遭遇的障碍并提供针对性的解决方案，微文案在很大程度上降低了用户的流失率。优秀的微文案能够精准地揭示问题核心，消除用户的疑虑，从而加速他们的决策过程，为产品创造更多价值。

此外，微文案所传达的语气和态度，对用户情绪有着显著影响。用户的情绪状态往往决定了他们是否愿意继续在产品中深入探索。因此，众多产品在追求体验优化的过程中，都将微文案作为重点改进的一环。

3、微文案专设岗位

国外对于微文案的重视不止反映在公司对于职位的要求上，更反映在国外的教育市场上。国外有很多教育机构相继开设了UX Writing的课程体系，比如 UX Writer Collective 以及 UX Writing Hub。这都代表着国外市场对于微文案设计的重视程度提高。

相比之下，国内除了头部大厂在微文案方面有着较强的意识，其余以下尚未获得足够的重视，但其重要性正迅速提升，展现出巨大的发展潜力。

二、如何设计微文案

1、少用技术专业词汇

每个领域、每个公司都有专业的词汇，设计师和开发者通常会在产品当中潜移默化地使用这些专业词汇。而用户群体却是包罗万象，所以需要做的，是将专业的技术信息简单易懂地表述出来。

避免含糊文案，明确表述问题和指引。力求简洁，词语能达意则不用句，一句话能说明则不赘言。用户没有耐心来看你写小说。

2、不要拘束于一种表达方式

设计常常赋予产品独特的个性。在完成了前面的步骤后，我们往往需要将微文案与设计理念相融合。不同的设计与微文案结合，会产生不同的效果，但绝不应是单调冷漠的提示。相反，我们应赋予其人性化的口吻，比如将“未设置收货地址，请添加”修改为“您需要我们送到哪里？…”，从而使整个文案更具情感温度，成为一个温暖而富有亲和力的声音。

在一些特殊的场景下，微文案能起到安抚用户情绪、引导用户选择后续行为的作用

3、谨慎开玩笑，除非你对你的产品非常自信

虽然幽默风趣的微文案可以让人更加轻松，但是也要分场合，玩笑和俏皮的语言应该在氛围合适的时候使用，并且并不是所有人都能Get到特定的笑点。

有些笑话在文章当中或许合适，但是在UI界面当中就不一定那么有意思了。比如，你所提交的数据无法保存，结果文案是“糟糕！您的数据好像无法保存呢”，这对于当前的状况毫无裨益。

这样的表达方式既直接指出了问题所在，又给出了简单的解决方案或建议，更有助于用户理解和处理当前的问题。

4、克制与诚信是微文案应用的基石原则，它们共同构成了我们在运用微文案时应当坚守的底线

有时，我们过于依赖这些标签，使得人们对信息逐渐变得麻木不仁。又或是由于虚假、夸大其词的数据泛滥，使得人们开始对社会证明持怀疑态度。

正如张小龙在2017年微信之夜中所言，当App的推送变得过于频繁时，人们往往会选择忽视，以至于任何一个推送都无法引起他们的关注。

当全部都是特惠时，你还会因为优惠而冲动购买吗？

结语

微文案不仅是文字，更是沟通的桥梁。请确保微语言准确、清晰，同时注重情感化和个性化，以贴近用户。同时，保证可读性和可理解性，避免复杂表达。保持微语言的一致性和连贯性，提升用户体验。通过精心设计的微语言，为用户创造更舒适、便捷的体验。

作者：晚上去拔罐
来源：站酷

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

评论(0) 浏览(496)

252024-3

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

博博

近日，全球科技圈最火的热点非Sora莫属，它是OpenAI发布的首个文生视频模型Sora，其视频生成能力、效果呈现的成熟度震撼了全世界。有人说，这是视频生成领域的iPhone moment，AGI（通用人工智能）又向前划了一个时代。

Sora的使用非常简单，与ChatGPT一样，只需要输入合适的prompt（提示词），它就能跟根据文本指令创建视频。

此前也有一些AI生成视频工具，但大都只能生成10秒以内，还“卡成 PPT”，但 Sora 弯道超车，直接将时长拉到 60 秒。这个突破相当厉害，毕竟时间越长，内容越复杂，想表达准确把控好节奏难上加难。

Sora生成的视频画面截图 | 东京街头的时尚女性

Sora生成的视频画面截图 | 白雪皑皑草地上的猛犸象

更厉害的是，根据Sora技术报告的介绍，Sora不仅可以理解用户在提示中所要求的内容，还能理解这些内容在物理世界中的存在方式。因此，它生成的视频不仅逼真，还包含精细复杂的场景、生动的角色表情以及复杂的镜头运动。

Sora生成的视频截取 | 穿过郊区的火车车窗上的倒影

不少人高呼影视行业变天了，明星即将失业，有网友甚至把美国电影工业的象征Hollywood（好莱坞）改成了这样：

其实，不止影视行业，包括教育、营销、互联网甚至所有行业都会或多或少受到影响。

作为在互联网浸润多年的“老油条”来说，笔者最近一直在思考，Sora等AI工具对我们究竟是机会还是挑战？个人认为，机会大于挑战。

比如，对产品经理和UX设计师来说，可以考虑怎么把Sora的能力用到自己的产品上去：一款社区产品，可以通过Sora快速输出大量视频内容；

一款教育类产品，可以通过Sora生成定制化的教学视频；

一款新闻APP或者视频网站，可以利用Sora进行个性化推荐；

……

不过这一切的前提是，你必须掌握AI。

除了上述提到的AI生成视频工具Sora，笔者还总结了很多优秀的AI工具，这些工具能大大帮助我们提升工作效率，生成创意灵感，一起来看看吧~

1、小摹AI

小摹AI是一款集成了人工智能技术的产品设计工具，能够根据文本指令轻松生成可编辑的原型图，对产品经理来说可谓解放了生产力！

官网：

https://www.mockplus.cn/ai

主要功能及亮点：

目前有智能原型、智能文本、智能图片、智能翻译和智能表格五大功能，能有效地提升设计效率，没有设计经验也能轻松上手哦。

1）智能原型：根据用户的描述，智能生成一张原型设计页面。

2）智能文本：根据用户的描述，智能生成一段文本内容，对写产品需求文档很有帮助。

3）智能翻译：有“画板翻译”和“输入内容”两项子功能，可以轻松地实现整页内容的翻译，也可以输入内容进行翻译。

价格：

现阶段可免费使用

推荐理由：

小摹AI界面简洁，上手非常容易，它最大的亮点是利用AI优化设计流程，快速实现从概念到原型的转变，大幅度提升了产品经理和设计师的工作效率！

推荐评级：

⭐⭐⭐⭐⭐

2、Galileo AI

Galileo AI也是一个AI设计工具，它能根据用户的输入智能创建UI设计，生成的界面清晰，间距、字体大小、图片使用等方面都不错。另外，它还有个非常实用的功能，你可以将生成的设计导出到你的 Figma 中继续编辑~

官网：https://www.usegalileo.ai/explore

主要功能及亮点：

1）即时设计生成：根据自然语言提示迅速生成复杂的UI设计。

2）AI生成的插图和图像：为设计添加AI生成的艺术元素，增强视觉吸引力。

3）完整的产品文案自动化：利用大型语言模型自动生成产品文案，节省设计师的时间和精力。

价格：

现阶段免费

推荐理由：

如果你想获得一些灵感，想看到一些新鲜的设计，真的可以试试这个工具。

推荐评级：

⭐⭐⭐⭐

3、Uizard

Uizard是一个基于Web的设计工具，用户可通过它的AI技术快速创建网站界面，还能快速将手绘草图转换为交互式原型，提高设计效率和创新能力。

官网：https://uizard.io/

主要功能及亮点：

1）手绘转数字原型：将纸上的草图转换为数字界面原型。

2）用户界面自动化设计：基于用户输入自动生成设计元素和布局。

3）交互式原型创建：快速构建可交互的原型，用于用户测试和演示。

价格：

提供免费试用版本，付费版12美元/月起。

推荐理由：

Uizard是一款设计神器，它的AI功能，丰富的可复用模板和设计元素，能帮你节省大量时间。

推荐评级：

⭐⭐⭐⭐⭐

4、Whimsical

Whimsical是一款多功能的在线设计工具，它可以帮助用户完成思维导图、流程图、线框图的制作，成品逻辑清晰，层次分明，还能帮助设计师及时标记灵感，是一款万能的专业辅助设计工具。

官网：https://whimsical.com/home

主要功能及亮点：

1）上下文工具栏、可直接用于展示的输出、无限画布以及实时更新；

2）庞大的符号库工具帮助用户更好的完成设计操作；

3）Whimsical的AI功能可以快速生成图表，用以直观展示概念、思维导图和网页等内容。

价格：

提供免费版本，付费版10美元/月起。

推荐理由：

Whimsical是一款全能绘制工具，其中还有非常庞大的符号库工具，能帮助你更好更快地的完成设计。

推荐评级：

⭐⭐⭐⭐

5、Khroma AI

Khroma是一款利用人工智能技术来生成配色方案的工具，它能根据你的喜好和需求，提供高效、直观的配色解决方案，并创建无限的调色板让你尽情探索。

官网：https://www.khroma.co/

主要功能及亮点：

1）AI生成配色方案：根据用户偏好和流行趋势自动生成配色方案。

2）自定义配色选项：允许用户根据自己的需求调整和优化配色。

3）保存和分享功能：用户可以保存自己的配色方案，并与他人分享。

价格：

提供免费版，进阶功能需付费订阅

推荐理由：

Khroma的深度学习算法很厉害，它能够学习用户的配色偏好，并根据流行趋势提供创新的配色方案。

推荐评级：⭐⭐⭐⭐

6、AI Colors

AI Colors是一个人工智能色彩调色板生成器，它可以根据你的描述生成贴心的配色方案，同时你也可以参考提供的配色案例，每一种配色方案都有对应的效果展示，让你能够快速找到想要自己的配色方案。

官网：https://aicolors.co/

主要功能及亮点：

1）提供四种配图案例，分别是移动应用、仪表盘、落地页、作品集；

2）单击复制颜色或者直接导出配色方案，不喜欢的颜色还可以手动修改。

推荐理由：

通过AI Colors，你可以轻松生成调色板，并将其应用于产品界面，查看它们的配色效果，非常适合希望轻松掌握调色板的新手。

推荐评级：

⭐⭐⭐

7、Fontjoy

Fontjoy是一个帮助设计师选择最佳字体组合的工具，它可以让用户在一次点击中生成字体组合，还可以混合和匹配不同的字体，达到完美组合效果。

官网：https://fontjoy.com/

主要功能及亮点：

1）帮助用户调整字体外观，还有字体的类型、大小、颜色等

2）丰富的字体资源：包括中文字体、英文字体、日文字体等；

推荐理由：

只需点击生成，就能看到不同的字体，让字体搭配毫不费力。

推荐评级：

⭐⭐⭐

8、Huemint

Huemint是一个内置AI色彩模型的在线配色网站，它通过AI技术帮助用户快速生成吸引人的配色方案，你还可通过调节滑块控制配色方案的对比度，适用于设计师和创意专业人士。

官网：https://huemint.com/brand-intersection/

主要功能及亮点：

1）AI配色方案生成：根据用户输入和偏好，AI算法生成配色方案。

2）控制配色对比度：用户可以通过调节滑块来控制配色方案的对比度。

3）多样化的配色选项：支持生成等阶色、渐变色和2到11色的配色方案。

价格：

在线免费使用

推荐理由：

Huemint的AI色彩模型能够根据最新的设计趋势和用户偏好提供创新的配色方案，帮助设计师快速找到灵感，轻松提高设计效率。

推荐评级：⭐⭐⭐⭐

以上就是笔者的“掏心”分享了，希望读到这里的小伙伴能真正尝试用一下AI。毕竟，现在我们必将和AI一起成长同行，只有了解AI掌握AI才能不落后于时代，也让我们一起期待人工智能下一个“Sora”吧！

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

评论(0) 浏览(538)

252024-3

标签设计的超全分析总结

博博

在日常生活中，我们经常会给他人贴上标签。这些标签可能是基于个人特征、行为或经历而形成的，它们可以帮助我们更好地理解和分类他人。例如，当我们初次见到一个人时，我们可能会根据他们的外貌、穿着和言谈举止来给他们贴上一个“自信”、“开朗”或“胆小”、“内向”的标签。我们不可避免地会贴标签或被贴标签，因为这是一种快速且低门槛的有效记忆方式。

关注不同平台的标签设计，发现平时不太注意的小标签承担了许多重要的作用。在电商类设计中，标签可以强化商品折扣、优惠信息、服务特色等吸引用户。对于偏向浏览和文章发布类产品，标签设计旨在方便读者更好地理解文章内容，平台还可以根据标签聚合同类文章，建立目录索引，引导读者快速查看标签文章。

看似简单的标签却有这么强的作用，以下将根据标签的定义、属性特征及使用场景作出一些思考和探索，帮助大家对标签有一个更清晰的认识。

一、标签的定义

二、标签的组成

三、标签设计的作用

四、标签设计要点

百度百科对网络标签(Tag)定义是：

一种互联网内容组织方式，是相关性很强的关键字，它帮助人们轻松的描述和分类内容，以便于检索和分享，Tag已经成为web 2.0的重要元素。

Ant Design 对标签给出的定义是：用来进行标记和分类。使用场景：1.用于标记事物的属性和维度；2.进行分类。

TDesign对标签给出的定义是:用于表明主体的类目，属性或状态。

所以标签是什么?

标签是结合产品内容及属性特征经提炼后产出的关键词，是信息的一种集合方式，便于用户查找、定位以及系统识别。

标签可以帮助传达信息、建立可预知操作、产品分类和营销引流、优化搜索等。通过使用标签，方便用户快速识别，提升信息转化的效率，在UI设计中，标签是最常用的设计组件之一。

标签由容器、文本、图标等元素组成。

三者都是可选的，它们可以随机组合，常见的是这5种组合：文本、图标、容器+文本、容器+图标、容器+文本+图标。

文本标签：

更直观地表达含义，主要用于抽象的、或分类较多的标签，这种类型标签通常也以#+文字的形式呈现为超链接，主要出现在文字内容较多的列表页面、详情页的开头或结尾。它们也可以被理解为常说的话题标签。通过这些标签，用户可以快速了解到内容的主题和核心，并能够方便地链接到与该内容相关联的信息。

图标标签：

更富有设计感且吸引眼球，但这种图标必须是用户熟识的、一看就明白含义的；

容器+文本标签：

主要为突出特色、卖点来进行促销，类型及样式比较多元化，且单个产品可能多达 4~5 个标签，以此来吸引用户购买。

图标+文本标签：

面积会较大，视觉冲击很强，有的出于交互功能的需要，有的则是用在节日和特别专题。

容器+文本+图标标签：

而图标则是为了进一步强调或补充标签文本的信息，增强用户的视觉感知。

01 标签的颜色

标签的颜色选择和搭配对于信息传递和品牌塑造具有重要影响。不同的颜色和用色的面积/重量会给用户带来不同的感知，比如，绿色代表清新、免费，黄色棕色代表尊贵VIP，红色象征火爆热门。同时也会对品牌形象产生影响。

在白色背景下，我们可以自由地选择任何颜色作为标签的主体色、辅助色和点缀色。当面对同一组信息多个标签时，我们可以通过混合不同颜色来更好地区分它们。例如，我们可以将主要标签设置为红色，次要标签设置为蓝色，然后将它们组合在一起以形成一个更丰富的视觉层次结构。

在图片背景下，我们的选择受到了很大的限制。由于图片本身已经具有了丰富的颜色和纹理，因此我们需要谨慎选择标签的颜色以避免与图片产生冲突。通常情况下，我们会使用白色/黑色+不透明度或主体色作为标签容器，并将文字设置为黑色或反白处理以确保其可读性。

总之，无论是白色背景还是图片背景都有其独特的优势和适用场景。在选择背景时应根据具体情况进行权衡并做出最佳决策。

02 标签形状

标签的形状设计在信息视觉传达中扮演着重要的角色，不同的形状代表着不同的信息特性和情感色彩。常用的标签形状有圆形、矩形（半圆角、全圆角）、气泡或异形等。

形状是标签信息传递中的视觉轮廓表现，它作为承载信息的容器，对文字元素的包容性极强，能够使标签信息更加聚焦，让用户在获取内容和进行信息归类时更加专注。

在UI设计中，标签的特征跟生活中的标签也很相似，用以标注内容分类或内容要点，方便用户快速定位自己需要的内容目标。标签还有满足用户的隐形需求的作用，当用户在犹豫是否要进行下一步操作的时候，标签在一定程度上加强了用户的需求欲望，促进下一步操作。那标签到底有什么作用？

传达信息，突出产品特色

标签的基本功能是分类和突出内容要点，以方便用户快速定位他们需要的信息或功能。标签常用于传达产品基本信息、折扣信息、优惠信息、产品卖点等。对产品而言，它能优化信息层级，又能简单明确地传达产品特点；对用户而言，可以第一时间获取关键信息，降低用户阅读门槛，所以标签的首要任务就是为满足用户的隐性需求而传达特色信息。

例如，美团天天神劵、折扣信息等，淘宝里的直降低多少钱、同款低价，让用户潜意识地认为能够降低经济成本。

引导用户操作，建立用户操作的预期

标签还可以用于建立用户操作的预期，让用户在使用产品之前就知道点击后可能发生的效果，从而增加用户点击的兴趣和满意度。

例如：音频标签、视频标签“独播”、“vip”等，让用户在点击前预知点击后的效果。标签还可以用作行为引导，告知某操作的结果，如淘宝里“常逛的店”，让用户提前知悉操作之后得到的结果，加强点击的动机。

03 传递品牌与可靠性

品牌性质的标签，让消费者对产品产生信任感。同时，标签也是品牌与消费者之间的沟通桥梁，通过简洁明了的文字和视觉元素，传达产品的特点和优势。

例如如：“百亿补贴”、“官方店”、“品牌”。许多用户在浏览列表时，会通过标签快速判断是否有必要点击查看详情。此外，标签内展示强公信力的信息（榜单排名/评分等），可以加强内容可靠性及优质性。

方便分类

标签广泛用于用户区分产品内容，进行分类，进而确定关键词，优化搜索。避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。

例如：京东水果蔬菜“时令热卖”标签和淘宝里的评价标签，用户可选择自己感兴趣的标签去查找自己想要的信息，提高浏览效率，节约时间成本。

营销引流

为用户打上不同的标签，用于区分不同用户群体，分类精准定向推送产品。标签既能突出产品特色信息、又不会占用太多空间，所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。

如：小红书文末的文字标签、淘宝搜索的“探索发现”

从众心理引导转化

在营销中，利用从众心理可以引导用户做出购买决策，这类信息广泛应用在标签设计中，积极引导用户点击和转化。

例如，可以展示其他用户的购买记录或评价，让用户看到其他人对该产品的认可和好评，从而增加他们的信任感和购买欲望。像淘宝里的“多少人回购”，银行理财里的“多少人次购买”等等，都会对当前用户的心理产生极大影响，很多时候，用户的想法和行为受到周围人的影响程度，往往超过理性的认知。当用户无法决策时，从众心理会成为影响用户决策的重要因素。

06 告知状态

当内容状态变化且产品希望提示用户知悉时，标签可以作为告知当前状态的提示，如上新的“New”、“直播中”等。

此外，告知当前状态还有营造稀缺性的作用。如“限购多少件”、“即将售罄”，促使用快速决策。

07 营造氛围

标签不仅仅是产品信息的载体，更是营造氛围的重要元素。通过选择适合的色彩、字体和图案，标签可以传达出不同的情感和氛围，吸引消费者的注意力，激发购买欲望。

例如：“38换新节”、“上新啦”，有的产品确实是基于热度展示的标签，也有的产品只是为了吸引用户注意力而展示。

在UI设计中，标签是一个不可或缺的元素，那如何设计才能达成业务目标？

01 简洁明了

标签设计的文案（字段）长短尽量简短清晰，具有一定的识别性、易通性，避免使用复杂的词汇和句子。用户在浏览界面时，应该能够快速理解标签的含义。这里所说的精炼并非一味地求短，虽然“短”是标签必备的因素，但有时候过于简短的标签根本没办法给用户传达足够的信息，甚至会导致用户更加疑惑，这也失去了添加标签的初衷。

02 一致性与差异性

在不同的页面和场景中，标签的设计应该保持一致的风格和格式。这包括颜色、字体、大小、布局和位置等方面的一致性。这样做有助于用户建立认知模型，提高他们的使用效率。然而，尽管标签设计需要保持一致性，但也需要一定的差异性。这种差异性是针对不同类型和视觉权重的标签，通过不同的视觉样式和色彩来体现信息的层级关系。因此，虽然表面上看起来存在冲突，但实际上并不矛盾。

03适当的颜色

标签的颜色应该与背景颜色形成对比，以便用户能够清楚地看到。同时，颜色的选择也应该考虑到品牌的形象和用户的视觉感受。

04 适当的位置

标签的位置应该方便用户操作。例如，重要的标签应该放在显眼的位置，而不太重要的标签信息可以放在次要的位置。

结语

UI 设计中的标签跟我们日常生活中的标签很相似，它不仅能对产品作分类、特色标记，还能在用户犹豫不决的时候起到一定的推动作用，是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。根据产品的目的和需求，在不同时间和场景下使用合适的标签是至关重要的。通过简单精炼的表达方式，标签能够在有限的空间内提供更多的信息维度，吸引用户的注意并激发他们的好奇心、提升信息转化的效率。

作者：满满滴滴
来源：站酷

评论(0) 浏览(634)

212024-3

暗色模式的优势

博博

一、用户体验层面

1.提高阅读舒适度

(1).对比度和可读性

在相同的对比度条件下，浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明，优化对比度是提高阅读舒适度的关键因素之一。

浅背景上深字与深背景上浅字的视觉对比

(2).用户偏好和满意度

对于长时间从事屏幕工作的人来说，暗色模式对眼睛更加友好

2.减少视觉疲劳

(1).人眼生理特性

亮/暗环境下瞳孔大小的变化

(2).蓝光辐射减少

可见光波段分布

二、设备电池寿命

1.降低屏幕功耗

OLED屏幕发光原理

2.实际省电效果

以 Google 测试数据为例，OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度，手机的电量消耗下降了 63%。

Google的测试数据

三、降低屏幕功耗

1.促进睡眠对于晚上喜欢在床上阅读或工作的用户来说，暗色背景有助于降低屏幕亮度，减少对褪黑素分泌的干扰，也有助于减少蓝光对睡眠周期的影响，从而帮助用户更快入睡并提高睡眠质量。

OPPO手机暗色模式广告

2.减少眩光

有眩光与无眩光的显示器对比

四、打造沉浸式体验

1.减少视觉干扰

暗色模式提高了一种无干扰的工作环境，有助于他们专注于手头的任务，特别是在进行写作、编码或其他需要集中注意力的活动时，暗色模式能够减少视觉干扰。暗色模式为视觉设计提供了更大的对比度，使得界面元素更为突出。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

编码软件一般默认暗色界面，有利于专注工作

2.增强视觉聚焦

手游王者荣耀UI界面

作者：阿琳01
来源：站酷

评论(0) 浏览(620)

212024-3

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

博博

一、定义及其在UI设计中的表现形式

1.暗色模式的定义

iOS 13 亮色模式（左）与暗色模式（右）的对比

2.暗色模式的定义

(1).暗色模式在UI设计中的表现形式

亮色/暗色模式下主色需要进行调整

(2).对比度控制

达到/未达到WCAG2.0AA标准的视觉效果对比

(3).视觉元素区分

亮色模式中的按钮在暗色模式中显得太跳跃

二、历史回顾及发展脉络

1.命令行界面时代

Linux的终端界面

2.个人电脑时代

Windows2000的GUI

3.移动设备时代

iOS13的暗色模式

4.操作系统时代

Windows10的暗色模式

三、设计趋势中暗色模式的地位

从左往右依次为：WhatsApp、Instagram、Google、Facebook

作者：阿琳01
来源：站酷

评论(0) 浏览(599)

« 1 2 3 4 5 6 7 ... 44 »

日历

链接

个人资料

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

首页

1.1 标签是否加冒号

1.2 表单必填样式

1.2.1 顶部统一提示

1.2.2 文字提示“必填”

1.2.3 红色星号 * 必填提示

是否可标记可选字段

1.3 提示样式

小结

分类

日历

链接

个人资料

存档