一、车载语音应用介绍

1、车载语音交互介绍

车载语音交互是指车辆内部的交互界面采用语音作为主要的输入和输出方式进行操作和反馈的技术。它通过语音识别技术将驾驶员的语音指令转化为可理解的指令，然后通过语音合成技术将系统的反馈信息以语音形式传达给驾驶员。
(1) 车载语音交互具有以下特点和优势

提升驾驶安全性：驾驶员可以通过语音指令完成操作，无需分散注意力去触摸屏幕或按钮，减少驾驶风险。
提供便捷的操作方式：语音交互能够提供更自然、更直观的人机交互方式，让驾驶员更轻松地控制车辆功能和获取信息。
支持多任务处理：通过语音交互，驾驶员可以同时进行驾驶和操作，无需停下来或转移注意力。
个性化体验：车载语音交互可以根据驾驶员的习惯和偏好进行个性化设置，提供更加贴合用户需求的服务和建议。
(2)车载语音交互的常见应用场景

导航系统：车载语音交互可以用于导航系统，用户可以通过语音指令告诉车载系统目的地的地址或名称，系统会通过语音反馈提供导航指示和路线规划。
娱乐系统：车载语音交互可以用于控制娱乐系统，用户可以通过语音指令播放音乐、调节音量、切换电台或播放特定的媒体内容。
通讯系统：车载语音交互可以用于通讯系统，用户可以通过语音指令拨打电话、接听来电、发送短信或使用语音助手与联系人进行语音交流。
车辆控制：车载语音交互可以用于控制车辆的各种功能，例如调节空调温度、开关座椅加热、调节车窗等。
智能助理：车载语音交互可以集成智能助理功能，例如语音识别、语音指令和语音反馈，用户可以通过语音与智能助理进行对话，获取天气信息、查询最新新闻、提醒行程等。
车辆诊断：车载语音交互可以用于车辆诊断系统，用户可以通过语音指令查询车辆的状态、故障码和维修建议。
车载语音交互的设计考虑因素包括用户体验和界面设计、语音交互的安全性和隐私保护等。为了提供良好的用户体验，车载语音交互需要具备清晰的语音提示和反馈，支持个性化的语音交互设置。同时，为了保护用户隐私和数据安全，车载语音交互需要合理处理和存储用户语音数据，并进行安全验证和控制。

2、车载语音技术解析

车载语音技术是指在车辆内部应用的语音识别和语音合成技术，用于实现语音交互和控制车辆功能的技术。下面对车载语音技术的主要组成部分进行解析：

自动语音识别(ASR)：语音识别技术是车载语音交互的基础，其目标是将用户的语音指令转化为机器可理解的文本。语音识别技术需要对语音信号进行预处理、特征提取和模型匹配等操作，以提高语音识别的准确性和鲁棒性。在车载场景中，语音识别技术还需要面对各种挑战，例如噪声干扰、非标准发音、语速和语调的变化等。因此，车载语音识别技术需要针对不同的场景进行优化和适应。
自然语言处理（NLP）：自然语言处理技术是将用户的自然语言指令转化为机器可执行的指令。在车载场景中，自然语言处理技术需要理解用户的意图和上下文信息，从而更好地响应用户的指令和需求。自然语言处理技术包括分词、词性标注、句法分析、语义理解等操作，可以实现文字抽取、信息归纳、语音转文字等功能。通过自然语言处理技术，车载语音系统可以更好地与用户进行交互，提高用户体验。
**自然语言生成（NLG）:这是车载语音助手的另一个重要技术。它根据NLP处理的文本信息，将其转化为自然语言文本，以便人类理解。NLG需要考虑语法、语速、音调等因素，以产生让人舒适的语音输出
** 文字转语音(TTS)：语音合成技术是将文字转化为语音的技术。在车载场景中，语音合成技术可以为驾驶员提供语音反馈和交互。通过收集不同驾驶场景下的语音合成数据，系统可以生成自然流畅的语音输出，为驾驶员提供准确、清晰的交互反馈。语音合成技术还需要考虑情感表达和个性化需求等因素，以提高语音反馈的质量和用户体验。

车载语音技术需要综合运用语音识别、自然语言处理和语音合成等技术，从而实现高效、智能、人性化的交互方式。随着技术的不断发展，车载语音技术将会越来越成熟，为驾驶带来更多的便利和安全。

二、制定车载语音的设计策略

1、面向功能层的设计策略

明确功能需求：车载语音交互系统应具备核心功能，例如导航、音乐、电话等，以满足用户的根本需求。同时，还应设计一些扩展功能，如语音搜索、语音提醒等，提升用户体验。
针对不同场景和用户群体：针对不同的驾驶情境和用户群体，例如城市驾驶与高速公路驾驶、职业驾驶员与非职业驾驶员，设计不同的语音交互功能。例如，在城市驾驶中，可能需要更精确的导航和语音搜索功能；而在高速公路驾驶中，简单的导航和音乐控制功能可能更实用。
确保语音输入的有效性：系统能够在各种异常条件下保持稳定和准确的理解和响应。例如，系统应能够处理用户的口语表达、不同口音和语速的语音输入，以及背景噪音和其他干扰因素。

2、面向内容层的设计策略

** 匹配用户需求：语音交互的内容应与用户场景和需求相匹配。例如，当用户在城市驾驶中搜索导航信息时，系统应提供详细的路线信息和交通状况；当用户在长途驾驶中听音乐时，系统可以推荐一些适合驾驶的音乐列表。
信息结构设计：设计合适的菜单和指令树，以便用户快速找到所需的功能和信息。例如，通过设计简洁明了的菜单结构和易于理解的指令，用户可以快速地进行导航、音乐播放等操作。
** 个性化语音反馈：根据用户的偏好和个性化需求，提供个性化的语音反馈。例如，用户可以选择系统使用的语音角色和表达方式，以及系统对用户指令的响应方式。

3、面向形式层的设计策略

** 品牌一致性：确保语音交互的“听觉形象”与品牌情感保持一致。例如，如果品牌形象注重科技感和现代感，那么语音交互的音效和音调应该与之匹配。
用户场景一致性：在驾驶过程中使用符合用户场景的形式。例如，在驾驶过程中，使用简短、明确的语音指令，避免使用过于复杂或冗长的语句。
** 个性化设计：根据不同用户的需求和偏好，提供个性化的语音交互设计。例如，用户可以选择系统使用的语音角色和表达方式，让系统更符合用户的个人风格和喜好。

4、面向情感层的设计策略

用户情感需求：通过语音交互设计关注用户的情感需求。例如，在某些情况下，系统可以使用安慰性的语言来缓解用户的压力和紧张情绪。
情感表达：使用亲昵、热情的语言风格，增强用户与系统的情感联系。例如，系统可以使用一些亲昵的称呼和表达方式，让用户感受到更多的关怀和关注。
个性化情感表达：根据用户的情感需求和偏好，提供个性化的情感表达方式。例如，对于一些情绪较为激动的用户，系统可以使用更加冷静和平和的表达方式来缓解用户的情绪。

小结：做好功能需求和个性化设计

三、车载语音交互设计

1、汽车语音中的信息交流

在车载语音交互中，信息交流是通过语音和视觉方式进行的。以下是一些常见的信息交流方式：
语音指令：用户可以通过语音指令与车载系统进行交互，例如说出目的地地址、播放音乐或调整温度等。车载系统通过语音识别技术将用户的语音指令转化为文字或指令，然后执行相应的操作。
语音反馈：车载系统可以通过语音合成技术将反馈信息以语音的形式传达给用户。例如，系统可以回答用户的问题、提供导航指示或播报车辆状态等。
视觉界面：车载系统通常配备有触摸屏或显示屏，可以通过图形界面来展示信息。用户可以通过触摸屏或按钮来进行操作，例如选择导航目的地、调整音量或查看车辆信息等。
图标和指示灯：车载系统中的图标和指示灯可以提供简洁的视觉提示，用于表示不同的功能或状态。例如，一个电话图标表示通话功能，一个汽车图标表示车辆状态，一个温度图标表示空调设置等。
文字提示：车载系统可以在显示屏上显示文字提示，例如菜单选项、导航路线或系统状态等。文字提示可以提供更详细的信息，帮助用户更好地理解和操作。

2、汽车语音交互系统框架

唤醒：唤醒节点负责监听和检测用户的唤醒词，以激活语音交互系统。当用户说出设定的唤醒词时，系统从待机状态切换到语音交互状态，准备接收用户的指令。
输入：输入节点负责接收用户的语音指令，并将其转换为文本形式。这一步骤通常包括语音识别技术，将用户的语音转录为文本，以便后续的处理和理解。
理解：理解节点负责对用户的语音指令进行语义解析，以理解用户的意图和需求。这一步骤通常包括自然语言处理和语义分析技术，将用户的文本指令转换为结构化的语义表示，以便后续的功能处理。
回答：回答节点负责根据用户的需求和意图，执行相应的功能操作，并将结果转换为语音形式回答用户。这一步骤通常包括对话管理和语音合成技术，根据用户的指令提供相应的服务和信息，并将回答转换为自然流畅的语音输出，以提供友好和亲切的用户体验。
通过这四个节点的协作，车载语音交互系统能够实现用户与车载系统的语音交互和功能操作。用户通过唤醒词唤醒系统，输入语音指令，系统经过语音识别和语义理解，理解用户的意图和需求，并执行相应的功能操作，最后将结果转换为语音形式回答用户。这个框架可以根据具体的系统需求和技术实现进行定制和扩展。

3、车载语音交互架构

车载语音交互架构的应用层涉及到的功能最多，与用户交互最密切；功能层主要包括语音信号处理、自然语言处理等功能；算法层涉及到的算法最多，需要不断优化和更新

4、汽车语音交互功能介绍

音区锁定：这个功能可以确保语音指令只能被特定的乘客区域拾取，这样就可以保证只有指定区域的乘客能够下达指令，增加了交互的私密性和安全性。
唤醒+延时聆听：这个功能可以在车辆行驶过程中，实时监测驾驶员或乘客的语音指令，并进行识别。当系统检测到唤醒词时，会开始聆听后续的语音指令，并进行相应的操作。这种功能可以避免误操作，提高交互的准确性。
自定义唤醒：这个功能可以让用户自定义唤醒词，以方便在特定情境下的交互操作。比如，在驾驶过程中，驾驶员可能更习惯使用“帮我开窗”这样的唤醒词来代替默认的唤醒词。
全双工：全双工语音交互使得车辆可以在接收用户指令的同时进行语音应答，提高了交互的效率和便利性。
全时免唤醒：全时免唤醒功能可以在一段时间内无需再次唤醒系统，用户可以直接下达语音指令进行操作。这种功能可以提高交互的自然性和便捷性。
自定义播报音：这个功能可以让用户自定义播报音，以符合自己的喜好或满足特定场景的需求。比如，在车内需要提醒乘客接听电话时，可以使用自定义的播报音进行通知。
单指令多意图车控：这个功能可以使得一条指令能够对应多个操作，提高了交互的效率和便利性。例如，驾驶员只需下达一次指令“我累了”，系统就可以自动调节座椅角度、开启车内氛围灯等操作，提高驾驶员的舒适度。
多轮对话：多轮对话功能可以让车辆根据用户的连续指令或对话进行相应的操作。这种功能可以提高交互的自然性和连续性，使用户无需频繁重复指令或进行繁琐的操作。
离在线融合：离在线融合技术结合了离线和在线两种处理方式，以实现更高效和可靠的语音交互。离线处理可以处理预定义的指令和操作，而在线处理则可以处理更复杂的指令和情境。这种结合方式可以提高系统的灵活性和响应速度。
可见即可说：这个功能允许用户通过语音指令控制车辆的各种功能，无需通过传统的菜单或按钮操作。这种直接的方式可以提高交互的效率和便捷性。
用户自定义车控：用户可以通过语音指令控制车辆的各种功能，包括但不限于调节温度、开启音乐等。这种自定义的方式可以满足用户的个性化需求，提高交互的灵活性和便捷性。

四、车载语音形象设计

1、语音视觉形象的作用

车载语音视觉形象是指在车载界面中为语音交互设计的虚拟形象或图标，用于代表语音交互的角色或实体。它可以是一个动画角色、一个图标或者一个虚拟助手的形象。车载语音视觉形象在车载语音交互中扮演着重要的角色，具有以下作用：
提升用户体验：语音交互往往是无形的，通过给语音交互设计一个视觉形象，可以增加用户的参与感和亲近感，提升用户对车载系统的满意度和使用体验。
增加可信度和亲和力：通过给语音交互设计一个可爱、友好或者专业的视觉形象，可以增加用户对语音交互的信任感，使用户更容易接受和使用语音交互功能。
强化品牌形象：车载语音视觉形象可以与品牌形象相一致，通过设计符合品牌特点的形象，可以强化品牌形象，提升品牌认知度和形象。
提供情感连接：通过给语音交互设计一个有表情和动作的视觉形象，可以与驾驶员建立情感连接，使驾驶员更容易与语音交互进行互动和沟通。
个性化定制：车载语音视觉形象可以根据用户的喜好和需求进行个性化定制，提供不同的形象选择和交互方式，以满足用户的个性化需求。

2、语音视觉形象分类

** 虚拟助手形象：这种形象通常是一个具有人类特点的虚拟助手，可以有自己的外貌、声音和行为。它可以是一个虚拟的人类形象，如一个虚拟助手、一个虚拟导游或一个虚拟顾问，通过虚拟助手的形象来提供语音交互的支持和服务。
** 动画角色形象：这种形象通常是一个具有动画特点的虚拟角色，可以有自己的外貌、表情和动作。它可以是一个拟人化的角色，如一个机器人、一个动物或一个虚拟人物，通过动画形象来代表语音交互的实体。
** 品牌形象：这种形象通常是与品牌形象相一致的形象，通过与品牌的标志、颜色和风格相匹配来强化品牌形象。它可以是一个品牌吉祥物、一个品牌形象或一个品牌代言人，通过品牌形象来传达品牌的价值和形象。
** 图标形象：这种形象通常是一个简化的图标，用来代表语音交互的功能或实体。它可以是一个符号、一个图形或一个标志，通过简洁而直观的图标来表达语音交互的含义。

这些类型并不是互斥的，实际上，车载语音视觉形象可以结合多种类型，以满足不同的设计目标和用户需求。无论是哪种形象类型，车载语音视觉形象的设计都应考虑与用户的情感连接、品牌形象一致性和用户体验的关系。

3、车载语音形象如何设计

**(1) 品牌源点 **
在设计车载语音助手之前，我们需要首先明确品牌的核心价值和灵魂。这涉及到品牌的历史、使命、愿景以及价值观等方面。通过深入了解品牌，我们可以找到品牌与用户之间的联系点，从而为设计提供灵感。例如，如果品牌的核心价值是“智能、便捷、舒适”，那么车载语音助手就应该以此为出发点，为用户提供高效、人性化的服务。
**(2) 文化特征 **
在设计车载语音助手时，我们需要分析目标用户的文化背景和审美趋势。不同地域、不同年龄段的用户对车载语音助手的需求也会有所不同。例如，年轻用户可能更希望车载语音助手具备娱乐、互联等功能，而中年用户可能更注重车载语音助手的实用性和易用性。因此，我们需要了解目标用户的需求和喜好，以设计出更符合他们文化特征的产品。
**(3) 文化共识 **
在确定车载语音助手的设计方案时，我们需要考虑品牌所处的文化圈层，并探索文化共识与品牌形象之间的关系。例如，在一些西方国家，简洁、时尚的设计风格更受欢迎；而在一些东方国家，则更注重细节和情感化设计。我们需要根据目标市场的文化共识来选择合适的设计方案，以便产品能够得到广泛认可。
**(4) 品牌角色 **
车载语音助手作为品牌形象的一种表现形式，需要能够代表品牌的角色和身份。这意味着我们需要明确品牌在用户心中的价值和地位，并通过车载语音助手来传递这种价值。例如，如果品牌以“创新者”的形象出现，那么车载语音助手就应该具备智能、前卫的特点；如果品牌以“可靠者”的形象出现，那么车载语音助手就应该注重稳定性和安全性。
**(5) 风格表达 **
车载语音助手的风格应该是简洁明了、易于理解的。同时，它也应该能够适应不同的驾驶情境。在当今市场上，智能语音助手的设计风格大致可以分为三种：简洁型、情感型和实用型。简洁型设计风格以简洁、明了为特点，情感型设计风格则注重人格化、情感化的表达，而实用型设计风格则以功能强大、易于操作为特点。在设计车载语音助手时，我们需要根据目标用户的需求和喜好来确定合适的风格表达方式。
**(6) 场景故事 **
通过了解用户使用场景和需求，我们可以挖掘品牌与用户之间的情感联系，并为设计提供源源不断的创意。例如，在驾驶过程中，用户可能需要车载语音助手来帮助导航、播放音乐等；而在停车或休息时，用户则可能需要车载语音助手来提供一些生活服务信息，如天气预报、新闻资讯等。因此，我们需要根据不同的使用场景来设计车载语音助手的功能和交互方式，以满足用户的多样化需求。
下面以之前设计的高途课堂的IP为例，说明如何通过这六个维度去设计车载语音：

4、从场景和情绪去设计语音状态

**(1)场景 **

特定场景
基础状态场景在设计车载语音形象时，可以从场景维度考虑，基础状态场景包括默认态、对话态和播报态。下面是一些例子：
默认态
欢迎词：当用户启动车辆时，语音形象可以使用热情友好的语言说：“欢迎上车，准备出发吧！”
空闲提示：当车载语音系统处于空闲状态时，语音形象可以用轻松自如的语气说：“我随时为您提供帮助，请告诉我您需要什么。”
聆听态
等待指令：当用户唤醒发出词激活语音交互功能后，语音形象可以用耐心的语气说：“请告诉我您需要什么，我在剧中。”
确认理解：当语音形象接收到用户的指令后，语音形象可以使用确认性的语言和语气，例如说：“明白了，您需要我帮您导航到XX地点，是吗？”
播报态
导航播报：当语音形象进行导航指引时，语音形象可以使用专业准确的语气说：“请保持左转，继续行驶500米后，到达目的地。”
通知提醒：当车辆需要提醒用户一些重要信息时，语音形象可以使用明确和警示的语气说：“请注意，油量已接近警戒线，请及时加油。”
以上示例可供参考，实际设计中可以根据不同的场景和用户需求来选择合适的语音表达方式。通过合理设计车载语音消息的默认状态、关联状态和播报状态，可以提供更好的用户体验和情感连接。

主动交互场景
从场景维度去设计车辆语音形象，以下是一些交互场景的例子：
导航：在导航功能中，车载语音交互系统需要提供精确的导航指令和道路信息。在这种情况下，系统的语音形象需要清晰、准确，并且能够快速地理解和响应用户的导航需求。例如，“请行驶至XX路与XX路交叉口”，“下一个路口请左转”。
音乐播放：在音乐播放功能中，车载语音交互系统需要提供简单的音乐控制功能。例如，“请说出歌曲名或歌手名，我将为您播放”，“现在是音乐暂停时间，您可以稍后继续播放”。
电话接听：在电话接听功能中，车载语音交互系统需要提供语音识别和自动接听等功能。例如，“请说出对方的电话号码”，“已为您接通电话”。
天气预报：在天气预报功能中，车载语音交互系统需要提供实时的天气信息。例如，“明天天气预报：温度10℃，多云，微风”。
车辆信息：在车辆信息功能中，车载语音交互系统需要提供基本的车辆信息。例如，“您当前的行驶速度为60km/h”，“燃油剩余量约为30%”。
针对这些交互场景，车载语音交互系统需要使用不同的语音形象来适应不同的场景和功能需求，以确保用户能够获得更好的交互体验和驾驶安全性。

**(2) 情绪状态 **
正向情绪
愉快：语音形象可以使用轻快、欢快的语调和语气，让用户感到愉悦和舒适。例如，当用户成功完成一项任务时，语音形象可以用高兴的语气说：“恭喜你，任务完成了！”
友善：语音形象可以使用亲切、友好的语调和语气，给用户一种受到欢迎和关心的感觉。例如，当用户需要帮助时，语音形象可以用温暖的语气说：“我在这里，有什么可以帮到你的吗？
鼓励：语音形象可以使用鼓励性的语言和语气，让用户继续努力。例如，当用户遇到困难时，语音形象可以用鼓励性的语气说：“不要放弃，你可以做到！继续努力！”
幽默：语音形象可以使用幽默的语言和语气，吸引用户一些乐趣和轻松感。例如，当用户犯错时，语音形象可以用幽默的语气说：“哎呀，看来我们需要一个空间修正。别担心，我来帮忙！”

负向情绪
严肃：语音表情可以使用严肃、正式的语调和语气，使用户感到重要事情的紧迫性。例如，当用户需要注意安全时事时，语音表情可以用严肃的语气说：“请务必带好安全带，保证您的安全。”
警示：语音形象可以使用警示性的语气，提醒用户注意语言潜在的风险或问题。例如，当用户疲劳驾驶时，语音形象可以使用警示性的语气说：“请注意，您的驾驶状态似乎有些疲劳，请准时休息。”
悲伤：语音形象可以使用温柔、慈悲的语调和语气，给用户安慰和支持。例如，当用户遇到意外或困难时，语音形象可以用慈悲的语气说：“不要担心，我在这里陪伴着”你，一切都会好起来的。
疑问：语音形象可以使用怀疑、追问的语言和语气，引导用户思考并提供更准确的信息。例如，当用户提出模糊的指令时，语音形象可以用疑问的语气说：“抱歉，我不太明白您的意思，请再详细说明一下。”

作者：飞凡实验室
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

车辆是人们日常生活中不可或缺的部分，而车载界面的设计将直接影响驾驶者的体验和安全性。本文将探讨车载界面设计的特点和挑

车载界面设计是指在车辆中使用的人机交互界面设计。它是一种非常重要的设计领域，因为车辆是人们日常生活中不可或缺的一部分，而车载界面的设计将直接影响驾驶者的体验和安全性。本文将探讨车载界面设计的特点和挑战。

车载界面设计的特点
车载界面设计的特点可以归纳为以下几个方面:

功能性：车载界面设计需要满足车辆的各种功能需求，包括导航、音乐、电话、空调等等。因此，车载界面设计需要具备强大的功能性，以便为驾驶员提供更加便捷、高效的操作体验。安全性：车载界面设计需要考虑到车辆的安全性。例如，界面的设计应该避免不必要的干扰，以免分散驾驶员的注意力。同时，界面的显示效果和操作方式应该易于理解和操作，以确保驾驶员在行驶过程中能够快速、准确地进行操作。便捷性：车载界面设计应该尽可能地简化操作过程，使驾驶员能够快速地到达目的地。例如，在导航界面中，界面应该能够直观地显示路线、预测到达时间以及多种导航方式供驾驶员选择。舒适性：车载界面设计需要考虑驾驶员的舒适性。例如，在听音乐时，界面的设计应该能够显示歌词、显示专辑封面等，以增加音乐的娱乐性。同时，空调界面设计应该能够实时地显示温度、风速等参数，使驾驶员能够更加方便地控制空调系统。智能化：车载界面设计应该具备一定的智能化能力，例如语音识别、手势识别、面部识别等等。这些技术可以使得车载界面更加智能化、便捷化，提高驾驶员的驾驶体验。

车载界面设计的挑战
随着汽车技术的不断发展，车载界面设计已成为汽车设计中至关重要的一部分。一个好的车载界面设计可以让驾驶者更加高效地操作车辆，提高行车安全性。然而，车载界面设计面临着许多挑战，这些挑战需要设计师们不断创新和改进。
第一个挑战是如何让车载界面设计更加易于使用
在驾驶过程中，驾驶者需要频繁地操作车载界面，因此界面的设计需要尽可能简洁、直观和易用。设计师需要通过科学的分析和实验来确定最佳的操作方式，例如使用手势、语音、触摸屏等方式，让驾驶者能够快速准确地进行操作。

第二个挑战是如何在车载界面设计中实现多平台的兼容性

随着汽车技术的发展，车载界面的设计需要满足不同平台和不同车型的需求。这意味着设计师需要深入了解不同平台和车型的特点，并设计出能够兼容多个平台的车载界面。

第三个挑战是如何在车载界面设计中提高交互体验
随着车载设备的功能越来越强大，驾驶者需要更多的交互方式来使用这些功能。设计师需要设计出更加智能化和人性化的交互方式，例如语音控制、手势操作、人脸识别等，让驾驶者更加轻松地掌握车辆的各种功能。

第四个挑战是如何在车载界面设计中实现可持续性
设计师需要考虑到车载界面的可持续性，不仅仅是在设计方面，还包括材料的选择、能源的消耗、排放等方面。设计师需要设计出更加环保、节能、可持续的车载界面，为环境保护做出贡献。

最后一个挑战是如何在车载界面设计中实现艺术性和功能性的平衡
车载界面的设计不仅仅是美学方面的追求，还需要考虑到功能性和实用性。设计师需要设计出既美观又实用的车载界面，让驾驶者在使用车辆时感到愉悦和舒适。

https://img.zcool.cn/community/02jqddlpmcxvsaraum5ls33137.gif

总之，车载界面设计面临着许多挑战。随着汽车技术的发展，设计师需要不断创新和改进，以满足驾驶者的需求，提高行车安全性，并实现可持续性。设计师们可以通过深入分析、实验和思考，找到最佳解决方案，从而设计出更加优秀、易于使用、智能、环保和美观的车载界面。

作者：飞凡实验室
链接：https://www.zcool.com.cn/article/ZMTUzNzc5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在开始分享之前，我想先与大家探讨几个问题。

第一个问题，有两个组件，左边用来控制页面间切换，右边用来定位页面内内容，它们在样式上一模一样，请问，在设计系统里应将它们归为一类组件吗？

第二个问题，同样都是日期选择器组件，理论上它可以承载很多功能，那么，我们在设计系统里应该做到何种程度才算合适呢？

第三个问题，BackTop 组件在 Ant Design 4.0 之前作为一个独立组件而存在，请问，它真的算是一个组件类型吗？如果算，那右边这种情况是否应该归为新的一类组件？

最后一个问题，某设计系统需要建设平铺式多选器这样一类组件，我们有两位设计师出了两套方案，请问哪个方案更适合作为规范纳入到设计系统当中呢？

上述问题其实也是我们过去在建设各类设计系统时经常遇到的问题，由于各种原因最终导致所谓的设计系统越来越不规范，那么长期而言，对业务来说其应用价值将会递减、运维成本递增。

如何解决上述问题？经过两年的思索、实践，我们内部沉淀出一套相对确定的、易用的理论方法，能帮助我们更快、更好的建设设计系统，目前它已被应用于指导 Ant Design 5.0、 Ant Design Mobile 5.0 以及蚂蚁内部诸如企业智能场景子系统等各种设计系统的建设当中。

我们给它起了一个好记的名字：Ant Design MetaGuide 设计系统元规范（下文简称 ADM）。

什么是 ADM 元规范？
ADM 就是设计系统自身的建设规范，它的目标用户是设计系统的建设者们，希望授人以渔，帮助系统建设者更好的建设和发展自己企业的设计系统。

更具体来说，ADM 能帮助系统建设者达到两个目的：1、确定要做什么组件；2、评估组件的质量。

这里插播一下，5.0 在 ADM 的指引下，本次新增了一些新组件和变体组件，这些内容欢迎大家阅读文章《Ant Design 5.0，更美、更灵活》。

Part 1：如何确定做什么组件？
回到今天主题的第一部分，如何通过 ADM 元规范来确定设计系统应该要做什么组件呢？

在讲解之前，我想先和大家分享一则小故事。

在我上大学的时候，有一门设计课程，导师要求我们用废弃的瓦楞纸设计一把让人叫好的椅子。起初我心里犯嘀咕，常见的椅子不都是木质、塑料或钢铁材料设计而成的吗，瓦楞纸怎么可能设计出一把好椅子？

老师接着说，所谓椅子的设计，不是要我们去思考要设计“什么颜色的椅子”、“什么材质的椅子” 抑或 “什么形状的椅子”。他希望我们回归用户去思考，设计椅子的初衷究竟是为了什么？是为了满足用户“坐”这个行为目的。

因此，所以“设计一把椅子”，其本质不是设计一把怎样的椅子，而是设计“坐”。真正的设计者，即使面对瓦楞纸这样一个简单的材料，一样能设计出一把用户心满意足的椅子。

初入设计学的我，醍醐灌顶。

其实，为设计系统设计一个组件，一样如此。用户通过界面使用我们的组件，并非为了用而用，而是为了达到他的某种行为目的。如果我们回归到这样一个简单的本质，那么对于组件的定义可能就十分清晰了。

回顾一下过去我们都是如何建设一个设计系统的。

我们可能会去看看竞品做没做这类组件、我们可能会听从老板的建议增删某类组件、我们也可能掉入满足所有业务诉求的陷阱当中，让用户之声成为系统建设的依据。诸如此类的判断标准，正是一种从现状和多决策因素出发形成的归纳性思维，在设计系统构建过程当中，它容易让我们优先思考组件的表层属性即其作为物品时的属性，从而作出建设的判断。正因如此，我们才经常会看到类似组件越做越多、越做越不成规范的设计系统。

归纳性建设思维，在建设 0-1 设计系统时很快。但当设计系统伴随企业发展变得越来越成熟，这样的建设思维就会出发很多“规范不规范”的难题。

这时，我们要回归本质，去源头寻找组件建设的决策依据，一个确定的能让团队共识的决策依据。这个依据正是 ADM 所倡导的，将建设视角从归纳视角切换成演绎视角，认识到真正的设计规范不是「物的规范」而是「行为的规范」。演绎视角是一种探究本质的思维，这与“第一性原理”一样，我们需要去寻根究底何为组件的本质。

想想椅子的故事，组件的本质正是为了满足用户某种行为目的。因此，组件做到和中程度取决于你要多大程度的满足用户的某个行为目的。根据组件满足的行为目的不同，我们就会产生组件的分类，更进一步，根据衍生出来的行为目的，系统会建设对应组件变体。

将设计系统理解为「行为的规范」，我们便能对系统的边界有清晰的认知，当下应该建设到何种程度，未来又该往何处发展。

理论比较抽象，接下来我将带着一个小工具帮助大家消化这个理论，并真正理解它是怎样在建设过程当中其作用的。这个小工具我称之为「组件行为模式地图」。
以开篇提到的 DatePicker 日期选择器为例，我们使用行为模式地图来对其进行定义。

首先我们知道，使用日期选择器不是用户的行为目的，用户是想通过它来达到「输入时间型数据」这样一个行为目的，根据时间型数据的不同，行为目的可细分为「输入时间点」和「输入时间段」，因此无论如何我们的设计系统，必须提供对应的必备组件，供用户使用（下图蓝色部分是 3.0 之前建设完成的组件）。

伴随企业数字化的发展，用户希望能够更快的达成他的行为目的，因此在原来的行为目的之上产生了衍生的行为目的，如「更快捷的选择某个特定日期的数据」等，因此我们在设计系统里，提供了对应的组件交互变体（下图中绿色部分是 5.0 本次新增的变体组件）。请注意，因为组件交互变体满足的是衍生行为目的，所以理论上我们的设计系统不提供对应的交互变体，用户一样能够完成他的行为目的。

在考虑完组件的定义之后，我们根据对应服务的企业和业务的差异，为组件穿上全局一致的“衣服”，便完成组件的建设。当然如果企业对于本组件有特殊的样式要求，通过判断这种样式具备一定的通用性，那么我们也可以新增一个组件的样式，以便进一步提效，这样我们便有组件的样式变体。

当然，我们希望样式尽量通过底层 token 灵活性提供给业务自行改造，尽可能克制的在系统中增加样式变体。

通过这样一个行为模式地图的拆解和定义，一个完整的「DataPicker 日期选择器」便定义和建设完成了，而它未来的生长方向也有了清晰的预判。

再来看一个设计系统里比较复杂的案例，重型表格组件。

在 Ant Design 5.0 当中，我们也将内部使用多年的 6+ 重型组件开放出来给大家使用，这部分的介绍大家可阅读文章《Ant Design 5.0：ProConponents》。

我们都知道，任何一个设计系统都有关于表格组件的定义，但各有差异。这种差异的根源也正是从物的规范去理解表格这个资产带来的。过去我们内部也是从物的角度去抽象结构表格的建设范围，会发现越抽象越多，最终只能交给专家感性判断做什么与不做什么。

如果我们转变成 ADM 元规范的视角来指导表格的建设， 我们能得到什么？我们能得到：

一个有内在统一逻辑，可维护，可拓展的表格组件架构图
组件不容易重复建设，不会使表格演变的越来越冗余
有清晰的表格组件演进路径，容易判断当下应该先做什么
建设者认知统一，从生产到消费的产物都能达到内在的统一
由于时间原因，大家可自行对比查阅下列两张资产架构图的差异点。

我们将视野从组件拔到整个设计系统层面，理论上，如果能对每类组件逐一定义其「行为模式地图」，我们可以便能等到一张完整的设计系统的行为模式大图。这张大图告诉了我们，设计系统的边界在哪里，现状是怎样的，未来可以往哪里发展。

从而，让设计系统更「确定」，让基于其发展的领域设计子系统具备「生长性」。

这里也跟大家分享我们的一些判断，如果你所服务的企业还处于中小型初创阶段，那么你可以建设一个满足必要行为目的的「0-1 通用设计系统」，用 ADM 确保组件交互是收敛确定的，用底层 token 的灵活度机制让样式足够的开放，可被灵活定制。如果伴随的企业业务壮大，你可能需要更成熟和大型的设计系统，此时你可以通过满足更多的行为目的和衍生行为目的来构建一个「1-N 通用设计系统」。

更进一步，如果你所服务的企业是像蚂蚁一样具有海量业务场景的平台型企业，那你可能需要依赖通用系统去生长出适用于不同业务场景的领域设计子系统，去进一步深入到不同领域里提供更高效、垂域的设计解决方案。

以上就是关于 ADM 元规范第一部分的介绍，分别从意识层和方法层介绍了如何定义组件。

是不是挺简单的 ？只要意识转变一下，再借助一些小工具，很多疑问就会迎刃而解～

Part 2：如何评估组件质量？
通过 Part 1 的分享，我们知道，设计系统规范的本质不是定义「物的规范」，而是定义用户的「行为规范」。
满足一个「行为目的」可以有千万种组件解决方案，那么哪种方案是最适合成为规范的呢？接下来第二部分就会跟大家分享如何评估组件方案的好坏。

我们知道，设计系统不单纯是个规范，其本质是一个设计工程化的「产品」，它的用户是千千万万的业务。因此对于系统质量的评估必然分为两个层次，第一，系统本身组件的质量；第二，系统被应用到业务后的表现情况。今天今天这里仅与大家交流如何评估组件质量。

在设计研究领域，调研思路可抽象为以下几类。第一 part 提到组件的本质是「行为的规范」，因此对组件的评估，我们同样聚焦到如何评估「组件行为」这个本质事情上。因此我们选择更客观、独立于业务的底层的人机交互模型，通过它评估而来的结果能 100% 客观反馈交互行为的质量。

在人机交互领域、在学术界，这类涉及人机交互底层的评估模型其实有很多，大家所熟知的 Fitts 菲兹定理就是典型代表之一，另外还有非常具备影响力的 GOMS 行为交互模型。

ADM 元规范的组件评估模式正式基于 GOMS 人机交互模型演变而来。GOMS 是 1983 年 Card 等人在《The Psychology of Huamn Computer Interaction》首次提出的一种交互建模方法，它的核心理念是将用户与界面交互行为拆解为行为元动作，无需真实用户介入就能预测交互行为的序列，评估交互的质量。

后来的学者基于此理念不断构建了适用于不同人机交互界面的行为评估模式，包括 GOMS-KLM（用于 PC端，由外国学者创建），GOMS-HLM（用于移动端，由中国北邮人机交互实验室创建）等。

关于 GOMS 的更多介绍就不在这次演讲里展开，接下来我们通过一个实际的案例来跟大家介绍我们是如何评估组件质量。

我们来看一下设计系统里最简单不过的一个组件——Button。如何评估 Button 的行为质量呢？我们来看下，用户完成一次按钮点击行为，它的具体流程和构成是怎样的：

step 1：用户需要意识并辨别按钮在哪里——记为一次心理单元（即认知） M
step 2：用户需要将鼠标指针移动到按钮上面——记为一次指向单元 P
step 3：用户点击鼠标，完成一次按钮点击行为——记为一次按键单元 K
如此，我们定义了按钮的交互行为序列为 MPK。更进一步，如果我们能测得这些元动作的交互效率，我们就能得到按钮这个组件的交互质量了。

实际上，确实可以。在每一个基于 GOMS 演变而来的模型，人机交互学者都通过海量的样本测的每一个交互行为元动作的平均耗时，我们称之为典型值。如果我们直接用典型值预测界面的交互效率，其结果与真实用户监测测得的耗时极其接近，几乎所有预测值都在测量值 1 个标准差之内。

这里以 GOMS-KLM 模型为例，展示了对应的元动作，包含物理操作单元、心理反应单元和系统反应单元三大部分，其对应的典型值附在拉单元下方。

理论讲的有点多，我们直接来看一些案例就知道怎么应用了。

以我们开篇第四个问题提到的组件「平铺式多选器」为例，我们到底该选哪个方案作为规范纳入设计系统当中呢？
首先，该组件的本质是满足用户「选择并输入 x 个数据对象」的行为目的，那么我们对输入 1 个（即单选）和输入多个（即多选，以多选三个标签为例）的两个具体行为过程进行评估。

单选场景：二者虽然样式有所差异，但交互行为序列均为 MPK，交互效率均为 2.65 s
多选场景：前者为 MPKMPKMPK，交互效率为 7.95s，后者为 MPKPKPK 交互效率为 5.25s
从结果来看，方案二更好，进一步根据序列分析，方案一由于选中前后的 UI 结构不稳定，导致用户在每个重复的选择行为前面都增加了一个心理反应时，因此综合表现不佳。

时间原因，就不再讲解更多案例。这边给大家预留一个小作业，我们在 4.0 的时候升级了 3.0 日期选择器的交互，请大家用元规范评估模型评估一下哪个方案更好？

这边先告诉大家答案，实际上是 3.0 的表现更佳～ 说明我们走了些弯路 。

在评估的过程中，我们也发现了一些小规律，这些小规律其实验证了对我们在日常设计中一些感性判断。比如，
让人们选择多次好过让人们在多个选项中选择之类的；比如，尽量不要键鼠切换等等。

在蚂蚁内部，我们还将原规范应用到其它设计系统的建设当中。比如，Ant Design Mobile 5.0 今年引来大版本的更新，从 200+ 的冗余组件收敛成了 68 个通用组件，同时通过评估发现其组件质量也提升了不少，系统中单组件平均交互行为耗时从 3.42 降到了 3.17，高于业界平均。

大家可以设想一下，一个组件虽然只提升了零点几，但当乘以所有组件数量、组件使用频率和用户数，每年能为用户省下的工作时间也相当可观。

最后，总结一下第二 part 的内容，我们分享了如何去评估系统组件的行为交互质量。在 ADM 的评估框架里还包含了系统级层面的评价，包括：
系统是否帮助业务提效
当业务不能直接应用系统，能否灵活改动
系统是否帮助业务变得更有竞争力、更创新了
这部分内容时间原因不展开细讲了，欢迎大家私下找我交流。

尾声
好的，关于 ADM 元规范的两部分内容，我们就介绍到这里了。如它山开场分享所言，ADM 元规范的诞生有其大的历史背景，也有蚂蚁大规模业务场景的孕育。随着企业业务场景的增长，对 Ant Design 有更高的要求，同时内部又不断基于 Ant Design 孕育出各式各样的场景设计子系统。

这些都倒逼我们去创建更确定的设计系统、去定义解决设计系统本源的问题，授人以渔，帮助各位系统的建设者更好的去构建和发展自己的设计系统。

不足之处，还请谅解，如果有任何建议和意见，欢迎随时找我交流～

作者：梓义
来源：知乎

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1.盈利模式和运作

最重要也是最先要搞清楚的就是公司的盈利模式和运作，它就像一个人的心脏一样重要，毕竟，活着很重要。其实盈利模式及运作可以用一句话来理解。公司用了什么策略，给谁，解决了什么问题，获得了什么收益

先简单举个例子，稍后我会用一个产品来详细拆解。就拿小红书来举例子，大家应该都用过小红书吧，这两年很火的“搜索引擎”。
首先看小红书用了什么策略？小红书做了一个UGC APP
小红书目标群体主要是谁？90后高学历女性数据来源于2021年小红书官方数据，有点过时，只是拿来举个例子
解决了她们什么问题？分享和记录生活
获得了什么收益？广告分成、商城收益

梳理后你会发现，小红书的盈利模式和运作方式你就大概了解了，当然啊，是否能真正盈利咱另说。目前小红书在转型中，毕竟大部分人都把它当搜索引擎，搜完了就去红色软件下单了，钱都给别人挣了……话说回来，我们用这样的方法就能了解一个公司的盈利模式和运作方式。这时候你可能会问了：“小红书这种产品大家都在用，我当然很容易获取它的一些信息啦。”“B端的产品更复杂，我要怎样快速获取并理解信息？”别担心，有3个方法帮助你了解。
第一：看战略战略是一个公司为了实现一个目标而制定的一系列计划和决策，它是变化的，它很重要。小红书15年~18年的战略定位于“社区”，当时的目标更多的是先搭台子唱戏，把人引进来。而近两年，从它的布局来看，战略里一定包含了直播电商。
那么就意味着，假如你在小红书工作。2015年的时候，社区是它的核心业务。而在2023年，直播才是它的核心业务。
为啥要了解核心业务呀？因为越是核心业务，资源投入越多，你的可操作空间就越大。战略去哪里看？官网、搜索引擎或者Chat GPT。

第二：看官网尤其是B端产品的官网，一般都会把公司的产品介绍得很清晰。
可以着重看几个地方：顶部导航、关于我们、新闻中心
顶部导航：先对公司的产品、案例和客户有个印象
关于我们：了解公司的发展历程
新闻中心：了解公司在所在行业的地位和最新的资讯
看完了这些内容，其实你对这家公司就已经有了一个比较初步的了解了，这时候让你介绍这家公司，恐怕你都能说出个一二三来。第三：看定价定价是我们最直接能够获取到的公司的盈利方式，所以一定要看。

到此先做个小结：① 了解公司盈利和运作的公式：公司用了什么策略，给谁，解决了什么问题，获得了什么收益
② 深入了解的方法看战略、看官网、看定价现在咱们已经了解了公司的盈利和运作，以及公司发展历程，相当于相亲时了解了对方的家庭背景，下面就可以开始进一步深入了解了。

** 2.产品线**

一个发展了几年了B端产品一般都会有多条产品线，你大概率只负责其中的一部分，但是建议最好全面地了解一下产品线。避免只盯着手上的那点活儿，眼光也可以横向拓展看看，个人的竞争力就是这么来的。
去哪里了解呢？一般企业官网都会把自家产品列出来，方便客户查看，咱们也可以顺着这条路线去走。就拿飞书举例，从导航栏的“产品功能”我们可以看到，主要是四条线，咱们不用把每条线都挖得很细致，但是起码要有大概的认知，知道这是个什么东西，做什么的，最好上手体验体验。

这时候你可能会问了。这么多功能，哪条线才是重点啊？

问到点子上了。一般官网都会把自己主推的产品着重拎出来。
例如飞书在未登录用户的首页黄金位置，把重点功能单独强调，在登录用户的导航栏和头部的位置都做了这些功能的露出。反复强调和露出，重要程度不用我多说了吧。

到这一步，我们就已经是公司半个娘家人了，下面可以开始拆解公司的产品了。前面的步骤都是了解的阶段，第三步可是真正要动手实操了，光看可没用。
千万别懒，这时候要把公司产品的信息架构和关键流程做出来。首先，梳理信息架构，对功能模块有清晰的认知没啥技巧，就是耐心二字。一个界面一个界面走，用脑图把框架理出来，有手就会。
是不是觉得很麻烦？确实麻烦，而且费时，考验耐心，但是一定要做。不要想着靠眼睛去看，靠记忆力去记，一定要落到纸面上。

然后，梳理关键流程，了解产品的运作和流动怎么梳理，截图，一张张拼，把路线画出来，别看这招简单粗暴，但是很有用。不仅能帮我们快速理解产品链路，说不定还能发现产品中的一些体验槽点，找到优化机会。

** 4.案例拆解**

下面，上案例。还是看完整的案例更加清晰。就用一款我前段时间用的电子签名和电子合同的产品“法大大”为例。咱们一步步走。
第一步，了解盈利模式及运作公司用了什么策略，给谁，解决了什么问题，获得了什么收益

策略：一个电子签名和电子合同的PC网页产品
目标用户：有线上签名和线上合同需求的企业、政府和个人
解决的问题：远程签合同，电子签名
收益：签署套餐费

第二步，了解产品线

第三步，梳理信息架构和关键流程

作者：馊面包
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在现在的社交媒体应用中，无尽流已经成为了一种主流。例如在抖音上，除了容易忽视或令人恼火的插入性广告推广能够鼓励用户休息一下以外，它的内容流几乎无法停止。但是抖音是否真的想让用户放下手机呢？如果这款App真的想限制用户的使用时长，为什么他要用精细的推荐算法迎合用户的确切品味提供永无止境的内容流？

曾经，大部分社交媒体App的内容流允许用户滑到页面的底端或到达已阅读过的内容。Facebook和Instagram上的内容流会根据时间来排序，用户在查看完好友的近期动态后便会转移到其他App上。而现在由于“无尽流”的出现，用户能够看到永无止境的内容，其中包含好友的更新以及算法推荐的与其兴趣相关的帖子，甚至跳出更旧的内容来填充持续性内容。

逐渐，无尽流的产品策略逐渐被广大用户及用户体验设计师们所接纳，我们基本上都认为这是一种正常且优秀的做法，在“注意力经济”掌权的生活中，能吸引用户停留时长越长越好吗？我认为可能相反，也许无尽流所带来的技术和社会问题远比它能解决的更多。

什么是无尽流？

分页与连续

据我所知，无限流是由播客《Your Undivided Attention》的联合主持人Aza Raskin发明的。他在2006年为一家名为“人性化”的用户界面公司工作，那个时候人们还在使用“分页”的设计，而他则想创建一种能够取替分页的方法。分页是将内容切割成几个页面，通过底部的导航栏页签选择可以跳转的页面，我们现在仍然能在一些电商网页版中看到这种设计的踪影，如下图所示。

分页式设计的主要问题在于用户必须主动点击页面，起初人们认为点击几次并不是什么大问题。然而在界面交互中，“滚动”这种操作方式远比“点击”更容易，并且用户不需要花费太多时间等待内容的加载，无限滚动在触摸屏手机端中获得了最佳的体验。当用户被蒙蔽在一个不知道多长的内容流中，则会逐渐淡化对浏览时间的感知。

尼尔森·诺曼集团通过验证发现，“无限滚动可以最大限度降低交互成本，增加用户参与度”。无限滚动的操作方式可以让用户持续保持对页面的关注，因为这个页面永远不会终结。无限流给用户一种“总有更多内容要看，即便弹出一个广告，只需一键划走就可以忽略”的感觉，非常的方便。

无限流的优点

1. 无缝、连续的内容供给
2. 最小化内容中断=更低的页面跳失率
3. 更贴合移动端的内容供给表达
4. 大大降低了用户的交互成本
5. 提升了用户参与度

无限流的缺点

1. 难以重新查找内容
2. 页面过长影响性能
3. 页面完整性差
4. 用户无法结束下划

为什么用户无法结束下划？

我们在前面从技术和体验层面分析了无尽流的利弊，下面我们来看一下它的社会影响。无尽流的创始人Aza Raskin曾在2019年的一条推文中推翻了自己的创作，他是这样说的：

我从无限滚动中学到了一点：优化产品的易用性并不意味着对用户体验来说就是最好的。

当时在推特上有一些挑战社交媒体交互行为的标签出现，例如“社交媒体成瘾”，有人使用这个标签对无尽流做出挑战，他说：“无尽流的创建者Aza Raskin在设计这一功能的本意是好的，但根据他的说法，我们的无限滚动操作每天都会浪费20万人一生的时间。”

成瘾设计

其实不论是否有无尽流的存在，社交媒体都会让人上瘾。
每个用户研究领域的人都应该知道心理学家B.F.Skinner和他的“斯金纳盒子”理论。他把老鼠放在密闭的盒子里研究了它们滑稽的行为，在几十年后斯金纳的研究成果被应用到世界各地的商业实践中。

心理学家斯金纳做的实验是使用惩罚或奖励手段来鼓励小鼠按下杠杆，当小鼠按下杠杆时给予食物奖励，小鼠便会持续按压杠杆；当小鼠按压杠杆受到了电击时，小鼠便不去碰杠杆了，这个行为虽然现在听起来很简单，但在当时这项简单的实验却是理解人类行为的基础。

斯金纳的实验启发了许多社媒app，用户就像实验中的老鼠一样，当用户沉浸在无尽流的内容时，即使并不是所有的内容都能引起用户的高度兴趣，但我们依然会下意识地继续滚动寻找有趣的内容。

上瘾与焦虑

社交媒体给人的感觉就像赌博，我们就像上瘾一样不断点按刷新按钮，查看是否能够得到有趣帖子的奖励。我们逐渐在不可预测的回报中越陷越深，更可怕的是这种行为还会潜在改变我们的大脑结构。

研究表明，社交媒体不仅可以让用户上瘾，还会导致焦虑和抑郁情绪的增加。用户在查看内容流时的几个小时里，难免会看到一些负向的社会纪实内容，例如火灾、枪击案、犯罪和其他不幸的新闻，在用户被动获取这些视、图像时会潜意识产生负面的心理作用，并且经过社媒的推荐算法，这些负面的新闻会随着用户的观看而不断出现，引发用户的悲观情绪。如果你持续观看负向内容，负向内容就会持续找上你，有人将这种现象称为“末日滚动”。

对商业有益，对用户不利

“如果你没有为产品买单，那么你就会成为产品。” ——Jaron Lanier

随着用户花在社交媒体时间上的增多，对于抖音或Facebook的利益相关者来说是件不可否认的好事，但这真的对用户有利吗？这种交互方式真的人性化吗？我们是否应该停止无尽流呢？

作为设计师，我们需要考虑的是设计该如何影响用户。设计应该首要服务于用户体验而非商业利润，我们必须要在“有利可图”和“合乎道德”之间走钢丝，设计若想以人为本，首先我们可以反思以下几个问题。

1. 花在无尽流内容上的时间对用户的心理产生了哪些影响？
2. 如果无限滚动导致用户在平台上花费的时间过长，我们该如何阻止用户过度使用？

如何停止无限滚动
对于不健康、上瘾的无限滚动操作，有以下几个UX解决方式：

加载更多按钮

“加载更多”按钮并不是用来自动填充页面底部内容，而是阻隔无限流并对内容进行翻页的交互方式。这个操作的交互成本很低，只需一个按钮就为用户提供了一个自然的停靠点。

2. 全都刷完啦！

这个交互方式在互联网领域是有争议的，当用户刷新完一定内容后，告知用户“你已经全部刷完啦！” 这个操作赋予用户浏览其他app的机会，鼓励用户走出手机，去外面看看真实的世界。

3. 限制观看时间的通知
   

以抖音为例，抖音通过一些方法让用户理解和控制自己花在app上的时间。
尽管我在整篇文章中都对抖音的交互方式持怀疑态度，但我不得不赞扬它为用户提供了一种限制app使用时间的工具，用户可以通过这个工具来设置屏幕时间限制。大部分的操作系统也都有类似的工具来限制屏幕时间。

多想想如何对用户有益，而不仅仅是对产品有益。这些时间，本可以花在更有价值的事情上面。

总结

自2006年问世以来，无尽流已经成为了社交媒体的标准。无缝的内容供给大大增加了用户参与度，抓住用户的眼球就等于抓住了成功，因此抖音、Instagram、Facebook等平台都获得了巨大的成功。然而无尽流也有它相应的技术壁垒，由于无限滚动不适用于搜索引擎优化和查找内容，用户很容易在跳失后难以找到原先的内容。
无尽流所带来的潜在心理影响就像是上文中所说的，过度沉迷社交网络所导致的负向反馈循环，引发用户心理上的焦虑和抑郁。而作为体验设计师，我们应该用批判性的目光审视当今流行的交互方式，参与不断的创新，更多的以人为本来做设计。

作者：ZoeyWangDesign
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1.内容结构作为视频内容平台，通过对腾讯视频APP的结构梳理，发现产品内大部分的内容都是围绕视频来进行拓展，整体框架分为：首页、短视频、VIP会员、热议、我的这几个模块。本次我们主要针对于首页与播放器这两个场景进行重点分析

2.首页首页作为腾讯视频的首个场景，主要以视频内容推广为主，主要内容有如下：顶部操作区、内容推荐区、各分区推荐页等

2.1顶部操作区
顶部操作区一般集合着大量的操作入口，主要功能如下：加追与预约：其中包含用户添加的追剧列表、热门预约、历史观看记录等功能搜索：点击进入搜索结果页，其中包含热门榜单、历史记录，用户也可以快速搜索自己需要查找的视频内容游戏中心：游戏中心主要是推广腾讯自家的游戏内容，通过游戏中心对游戏进行引流与拉新周边商城：周边商城里面为视频的周边产品，用户可以在周边商城中进行商品购买

2.1.1产品亮点：加追与预约功能在首页左上角增加最近再追功能，此功能让用户在首页就可以更快速的找到自己在追的内容，而且在页面中还包含新片预约和历史浏览记录功能，让用户在了解更多预约内容与历史记录。此功能放在首页很好的降低用户操作成本，提升产品体验。

2.1.2设计误区：加追功能关闭交互加追功能在关闭时有一个缩放交互，此交互场景可以很好的让用户感知当前是从哪里进行跳转，出发点是好的，但由于在点开时没有缩放动画与缩放的样式不太理想反而导致此交互效果并不好，所以可以适当优化下。

2.1.3设计亮点：滑动屏幕顶导隐藏与出现交互当用户滑动屏幕时，顶部操作区会跟随手势进行向上隐藏，这样可以在用户向上滑动浏览信息时给界面带来更多的展示空间，当用户向下滑动一定距离时顶导出现，方便用户对顶导进行相关操作。这里的交互细节很舒适，大家可以多多学习。

2.1.4设计亮点：顶部背景跟随banner颜色进行变化顶部背景跟随banner进行变化，当用户滑动banner时顶部背景会跟随banner的颜色进行变化，这样可以让界面的配色看起来更加和谐，提升界面视觉一致性。同时赋予用户体验惊喜感。

2.1.5设计亮点：下拉刷新新玩法大多数产品下拉都为刷新界面操作，但腾讯视频对下拉进行两部交互操作，用户下拉到第一个阶段会出现提示"下拉发现更多好玩"当前这时用户松手可以进行常规刷新操作， 但用户看到这样的提示会更想知道在向下拉到会带来怎么的内容，当用户再次下拉后会出现对应的内容推荐，类似于游戏推广与热播剧推广，赋予用户惊喜感的同时还能增加广告收入。

2.2内容推荐区内容推荐区主要以推荐视频内容为主，主要功能分为：Banner：banner主要推荐站内的热门内容与广告，支持滑动切换与自动切换展示双瀑布流推荐位与大卡片推荐：卡片形式采用“封面/视频+标题+标签”的形式，推荐一些站内的热门内容与广告内容定制内容页：热门的视频会定制内容页，为视频定制界面样式与布局

2.2.1设计亮点：Banner切换的创新交互方式腾讯视频的Banner 切换动画是十分有特点的，整体是logo的剪影效果，并且在右下角的数量指示点也是logo的形状，很好的突出品牌形象，设计创新的同时强化品牌在用户心中的位置。

2.2.2产品亮点：双瀑布流推荐机制banner下方共6个双瀑布流推荐位，这种排列方式可以在一屏中展示更多的信息，但不足就是如果界面全部都是这种排列方式会导致用户浏览成本提高，降低用户的浏览欲望，所以腾讯视频把内容控制在6个，不会给用户增加浏览负担，其次在推荐机制上对前两个卡片进行“最近在看”标签，和视频预览，相比其他静态卡片可以让用户更加快速的发现自己想看的内容。

2.2.3产品亮点：视频大卡片推荐这种样式的推荐形式虽然同屏下相比双瀑布流的可推荐内容少，但可以让用户更注重内容视频本身，推荐的视频内容都为该作品的热门片段，小编经常看着看着就安利了一个新剧，很适合作为长视频推荐列表使用

2.2.4设计亮点：不一样的定制化分区内容页腾讯视频会根据站内的热门内容进行定制化分区内容页，虽然这种形式在各个视频平台都有设计，但腾讯视频的似乎更加与众不同，它相比其他竞品不仅增加了开屏动画，加强界面氛围感，同时在功能上增加了一级标题，如在长相思专题中的“独家花絮、有声书、看微综、相思榜”等入口，可以让用户在页面中发现更多剧情本身以外的衍生内容，一级标题的形式也可以让用户直达视频播放页，快速了解想要看到的视频内容。

2.2.5设计误区：分区中的入口icon设计电视剧作为腾讯视频的高频点击分区，在头部的icon确实有失大厂风范，图标过大、视觉比例不一致、风格不统一等问题，很影响界面的视觉美感，但入口的点击转化是否有影响未知。

3.播放器相关播放器作为视频产品的核心使用场景，其中的功能非常庞大，腾讯视频的播放器内容主要分为：竖屏播放页与横屏播放器

3.1竖屏播放页竖屏播放页为用户点击进入视频的第一个场景，主要功能为：顶部播放器：顶部为视频播放区域详情：详情中包含视频标题、选集、讨论、周边、视频推荐等功能底部快捷操作区：包含再追、下载、投屏、一起看、分享等功能

3.1.1设计亮点：定制化的视频播放器对于热门的内容，腾讯视频依然会定制化页面，给予专属的配色与标题，给用户提供更加沉浸的氛围感

3.1.2产品亮点：底部操作区功能相比其他产品，腾讯视频在进入竖屏播放页后不会再顶部的视频中默认展示操作内容，给用户带来更好的观看体验，并且把视频相关的操作内容放置底部做成一个底部操作区，用户可以在底部快速的对视频进行操作如：下载、投屏、一起看、分享等。而不是把功能分散在界面中，这样不仅可以降低用户的寻找这些高频操作的成本，同时提升视频的观看体验。

3.2横屏播放器横屏播放器是大家在使用产品中最高频的操作，这里腾讯视频也是下了很大的成本，也有不少的细节，界面的主要功能有：顶部操作区：标题、一起看、臻彩视听、投屏等功能左右侧操作区：锁屏、讨论、拍照、录像等功能底部操作区：进度条、暂停、弹幕、倍速、发电、选集等功能其他场景：弹幕播放、特效、音量控制、快进等功能

3.2.1设计亮点：定制化进度条与标记糖点对应热门视频内容，腾讯视频会定制化进度条样式与进度点样式，（如《长相思》中定制红色木槿花）让用户更加沉浸的观看体验，同时在进度条上方有标记样式，用户点击会触发标记动效与糖点，所有标记的糖点数据也会以波动图的形式显示在进度条上方，提高互动玩法。

3.2.2产品亮点：发电功能为自己支持的CP上分在底部操作区增加发电功能，用户可以点击为自己支持的cp送出礼物，不仅可以满足用户的“嗑CP”心理，同时对直播场景中的核心送礼功能很好的结合到视频产品中，给视频内容提供了商业价值，提高产品收入。

作者：不是作家
来源：站酷

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

有这么一句话：“复杂的事情简单做，你就是专家；简单的事情重复做，你就是行家；重复的事情用心做，你就是赢家”。前言

设计师是一个工作类型较为多元化的岗位，如UI除界面视觉外，还要会点插画、动效、品牌、交互等，而UE除交互体验之外，还得懂视觉、运营、业务以及前/后端知识...。这就逐渐让设计师们形成了一种习惯，涉及的方面越多、经验越丰富，就越容易过度思考，把事情也想的、做的复杂，虽说是为了提升设计价值而想尽办法，但最终臃肿复杂的解决方案不断分散、混淆用户的意志力，让用户体验变得非常糟糕。有这么一句话：“复杂的事情简单做，你就是专家；简单的事情重复做，你就是行家；重复的事情用心做，你就是赢家”。没错，要解决那些臃肿且复杂的设计，首先要做的就是化繁为简，我们可以采用一个非常经典的设计理论「奥卡姆剃刀原则」。奥卡姆剃刀是经过很多前辈反复实践验证过的设计法则，特别在方案的设计与评估阶段非常有效，今天笔者就和大家一起来看看，如何利用奥卡姆剃刀给设计做减法。
分享目录
一、认识奥卡姆剃刀原则二、优秀的设计案例（iPhone）三、奥卡姆剃刀与设计的结合四、不能“剃”的过猛五、结语
一、认识奥卡姆剃刀原则

1.奥卡姆剃刀背景
奥卡姆剃刀原则是由英国学者、逻辑学家、圣方济各会修士奥卡姆威廉（William of Ockham）于中世纪提出，也被称为「奥康的剃刀」、「简单有效原理」。他在《箴言书注》中指出：“切勿浪费较多的东西去做用较少的东西同样可以做好的事情”。奥卡姆剃刀原则意味着当现有的几个理论都能对现象进行解释时，应该使用假设最少的那个。我们不能人为的将事情复杂化、为自己制造的麻烦而烦恼，需要保持事情的简单性才能抓住根本、解决实质性的问题，如果将该原则简化为八个字，即为“如无必要，勿增实体”。

2.各行业中的应用
投资领域：应该用奥卡姆剃刀来应对复杂的投资市场，对于需要消耗大量时间、金钱及精力的事情加以区分并将其简单化，重新定义自己的投资策略，方能那些那些困境；科学领域：不管有几个存在竞争地位的理论，如果最终得出的结论相同，那么就选择最简单的那个；企业管理领域：在制定管理决策时，应该抓住主要矛盾、剔除干扰，尽量将复杂的事情简单化才能解决企业最根本问题，保持正确的发展方向。奥卡姆剃刀原则还广泛应用于政治、社会、经济、设计等领域。不仅如此，很多名人都有过类似该原则的描述：

爱因斯坦：万事万物应该都应尽可能简洁，但不能过于简单。
罗伯特-格罗斯泰斯特：在其他条件相同的情况下，要求得越少的那个就越好，越有价值。
亚里土多德：自然界选择最短的道路。
艾萨克·牛顿：每件东西都应该越简单越好，不能只是稍微简单一点儿。
奥卡姆的威廉：如无必要，切勿假定繁多。
......

3.设计领域中的应用
“剃刀”的意思是将多余的内容削去，删除不必要的步骤、简化冗余信息、减少多余的消耗、呈现最直观的样子、寻找解决问题的最短路径等，都是奥卡姆剃刀原则最直观的体现。奥卡姆剃刀出自心理学和物理学，虽然不是为设计而生，但很多设计师已经将其运用在提升信息传达效率以及用户体验之上。将复杂的设计需求简单化，去除无关内容对视觉的干扰，让设计更严谨、纯粹，确保核心元素能在第一时间被用户察觉并理解对设计师来说至关重要。当然，奥卡姆剃刀也要视情况而定，当内容简化到不能再简化时，就需要设计师通过一些视觉表现手段去吸引、引导用户获取信息，让内容更好的呈现。说的直白点就是在不影响功能、视觉的前提下去除多余元素，同时已保留的内容需要用更简单、清晰的方式呈现给用户。

二、优秀的设计案例（iPhone）

苹果的产品在设计领域无论哪一方面都能作为业界领袖、数一数二的存在，纵观 iPhone 的发展史，无论是硬件外观、还是系统界面，都在一刀一刀的不断去除繁琐、无必要的东西，那把奥卡姆剃刀从来都没放下过。

1.iPhone 硬件外观
2007年，当大家还拿着大部分空间位置都被按键占用（屏幕占小部分）的传统手机时，苹果推出了第一代 iPhone，它直接将机械化按键变成了界面触控，你用它就在那里，不用就自动隐藏了，释放了大部分界面空间资源，显示更多内容，整个手机正面减的就剩下一个 Home 按键。另外，滑动解锁、两指变焦、重力感应等功能更是减少了大量的操作步骤，让操作变的更简单、更容易。2010年的 iPhone 4 是乔布斯时代最经典的杰作，更是为 2012年的 iPhone 5s 创下巅峰打下了良好的基础，机身从弧形设计变成方形和棱角分明的外观设计，到后来的充电接口和插孔的变窄、Home 键去掉中间小方块、机身的变薄、以及再后面充电插口与耳机插口的合并，无一不是在彰显着减法的魅力。直到 2017年 iPhone X 全面屏的问世，将手机正面唯一的 Home 给减掉了，虽然“刘海”的存在一度被吐槽，且全面屏的概念是由小米率先提出的，但如果说是 iPhone 在引领潮流一点都不为过，熄屏后的 iPhone X 就像一块完整的玻璃，即便是刘海也不应效果它简洁且独特的美感。

2.iOS 系统界面
当2007年 iPhone Runs OS X（iOS 1 系统）出现时，应用界面和操作上跟现在的系统很像，里面也有了邮件、日历、照片、时钟、文本、Safari、便笺等应用。流畅的动画、多点触控的交互方式、简洁的UI足以颠覆人们对于传统意义上手机界面的认识。随后，iOS 系统每次新版本的出现，都有一些变化，但与iOS 7 相比，就是小巫见大巫了。2013年，iOS 7 的发布，是迄今为止 iOS 系统史上设计风格的最大一次升级，UI设计由之前的拟物化转向扁平化，整个系统外观看起来十分简洁，新增的指纹解锁、控制中心设置快速切换、中国人喜爱的九宫格输入法，以及简化的图标、交互的过渡动画等，基本上每一各元素都在根据用户的操作及行为习惯发生变化。毫不夸张的说，iOS 7 系统改变了近十年的设计风格，设计趋势也正式从拟物化（复杂）时代走向扁平化（简约）时代。iOS 12 在设计上虽然没有太大变化，但系统的流畅度相对提升了很多，例如相机启动速度提升70%、App启动速度提升40%，新增勿扰模式、密码自动填充等，包括后面 iOS 13 更加省电、面部解锁速度提升、安装包/更新包内层变小等，无一不是在将事情变的更简单、更容易。

三、奥卡姆剃刀与设计的结合

1.简单直接的话术
用户的每一次操作及信息的接收都是与产品的一次交流，在对话方面，不应该使用多重否定、较长的定语或含糊其辞的描述，以免用户出现认知偏差导致理解上的错误，减少用户出错率最直接的方法就是用通俗易懂的极简话术与其交流。

2.N次能解决就不要用N+1
用户在进行一个任务时，提升任务完成率最好的办法就是避免复杂，任何一个流程，能用N次操作解决的事情，就不要用N+1次操作来完成，让用户以最少的点击次数就能完成任务，以提升用户对产品的满意度与忠诚度。下图是用户登录未勾选「用户服务协议」，图1、图2分别给出了不同的交互流程，显然，图2的操作次数更少，让登录变的更容易完成。在设计一个功能时，如果存在多种交互方案，那么最简单那个肯定是最好的。▽图1：四步操作完成登录

▽图2：两步操作完成登录

3.只放置必要的功能
在设计一个页面之前，需尽可能简化内容和操作步骤，但这并非不让产品给用户提供更多信息，可以将「更多信息」用其他方式呈现。例如，某个产品有A、B、C三个功能，A和B是主功能，C是辅助，很多用户更喜欢C，但C的存在会使很多用户离开主功能，这是就需要用到奥卡姆剃刀“削去”辅助功能，让主功能不在受到干扰。这个例子从表面上看似舍弃了优秀的辅助功能，却很大程度的提高了主功能的完成率。“削去”并不意味着删除，如果某些功能不重要但需要存在，可通过削弱视觉权重来做减法，例如将其放在不显眼的位置或提供入口/链接也是很常见的一种设计手段。

4.尽可能的减少选项
这一点与「希克定律」的表达是一致的，做过多的决定对用户来说也是一种麻烦，产品所提供的内容不能让用户有过多的思维负担，尽可能的减少选项，避免用户因选择性困难导致迷茫，如果选项过多，将不常用的隐藏起来。关于这一点，先不多做赘述，后续笔者会输出一篇介绍「希克定律」的文章，会有更详细的描述。

5.克制颜色的使用数量
在同一个产品中，应使用一个主题色贯穿整个设计，作为强调重点的存在，然后再选择1~2个辅助色作为点缀使用。不要添加太多花里胡哨的颜色，增加额外的视觉噪音，尤其是在B端设计中，克制颜色的使用能让整体看起来更加简洁有层次感。

6.已知方案“A”，勿增方案“B”
如果已经有一个非常不错且成熟的设计方案，那么我们应该将其设定为统一的标准，在后续的同类设计中应该与这个方案保持一致，不要固步自封去搞“创新”，因为新的方案很可能存在漏洞、或与之前的法案发生冲突。当然，如果你能承受失败带来的损失，也可大胆尝试。

四、不能“剃”的过猛

将复杂的设计简单化，剔除大部分多余元素是奥卡姆剃刀在设计中的核心理念，但它并不是一味的强调简单的就是好的、复杂的就是差的，应确定好这两种形式的边界在哪里、目的是什么。回归设计本身，剔除的目的不在于追求至简，而是通过合情合理的减法让用户更好的接收信息以及完成目标，一旦“剔”的过猛就会伤筋动骨。2007年，巨头企业微软推出的 Metro UI 就是一个很好的例子，全面去除光影、色彩变化以及质感等细节，直接以简单的色块+icon组合展示，让其变的毫无层次感，多用一点时间就会发现这种简洁过于单调，很容易让人产生审美疲劳。虽说微软设计师的这套扁平设计理念新颖且超前，但用户并没有买账，极度的扁平直接导致极度的冷淡。Metro UI 的失败让后面的 Windows 10 直接放弃了这套设计语言，重新引入了丰富的细节，让设计从纯粹的扁平中得以解脱。超前一代是天才，超前两代就是疯子，很显然，Metro UI 超前过头了，这一反面案例应该值得所有设计师深思。当然，这么说有点“马后炮”的味道，但前辈们已踩过的坑就是我们最好的避坑经验。

作者：大漠飞鹰CYSJ
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在产品界面中信息交互过程中，信息最为常见的四种载体：图形、文字、音频、视频（全景图、gif图、动效图在大类暂时可算图形，不作细分），而图、文占据了绝对的比重，所以需要重点关注图、文信息的识别体验。

根据美国哈佛商学院有关研究人员的分析资料表明，人的大脑每天通过五种感官接受外部信息的比例分别为：视觉83%、听觉11%、嗅觉3.5%、触觉1.5%、味觉1%（数据暂不涉及短视频直播领域）在群核体系下的产品，图和文分别是有哪些？

在界面中以图形化的形式表达动作、品牌、说明等信息，让用户能直观的感知到信息的含义，图形的类型有：动作执行类操作、品牌示意、辅助说明、图例展示4大类型；
在界面中以文字的形式表达信息，主要文案的类型有：动作命令、解释说明、专业名词、标点符号。

如何提升以上几个类型的信息识别体验：直观的图形提升信息识别的准度和效率、规范的文案提升信息表达的精准度。

直观的图形提升信息识别的准度和效率
以下几个案例是项小组试点探索验证信息表达优化如何对业务有效的验证，可以直观理解图形的准度和效率对业务指标有哪些影响。
案例1:工具入口的图形化表达用户从工作台进入到设计工具，纯文本的表达用户很容易产生疑惑，在不改变业务逻辑的情况下，进行图形化表达。

用户进入到下一步的成功率相比原版提升了10.2%，因此可以说明图形化信息表达更有助于用户识别并进行下一步决策。案例2:模型专题
群核下的设计工具，以专题化的形式聚类商家、平台推荐的模型是基本的运营动作，如下图，原本以真实效果图的方式展示模型专题，用户难以感知是方案还是模型。通过封面图形的优化：将核心的模型类型展示出来，用户能够预见里面的内容。

仅改版封面后，UV环比提升120.4%，此案例可以说明更精准的信息识别体验能够助力业务指标的增长。
案例3:对象菜单鼠标偏好设置在设计工具中，选择对象唤出菜单，在酷家乐工具中可以设置为鼠标左键点击即唤出菜单（仅展示图标），也可以鼠标右键唤出菜单（图标文字结合）。

用户可以自定义偏好，但上线很长时间很多还是不知道如何修改，在对提示进行图形化调整后，发现切换点击数据提升了300%，因此可以说明更精准直观的信息能直接影响用户的行动决策。
案例4:产出图纸的操作
在酷家乐工具中定制用户用户完成设计后，可以直接自动产出图纸，但由于之前操作入口的信息过于相似，用户难以决策点哪个是自己需要的，或很容易产生误操作，经过调研发现用户很容易混淆图纸类型从而生成对自己无用的图纸。

在新版优化中图形化的表达了图纸类型的差异，即便增加了流程步骤数，最终用户点击图纸的UV提升了15%，此案例可以说明，更精准有效的对象表达能吸引更多用户来使用此功能，对业务产生直接效果。
案例5:户型命令图例
户型绘制和调整是酷家乐工具的必经之路，由于对象间用2D图形图例表达比较难辨识出来准确意思，因此设计做了图形信息的优化，让命令更为直观，更高效的拾取命令操作。

上线后通过问卷调研用户满意度相比旧版提升了21.66%，因此可以证明，更精准的图形辅助用户更高效的使用工具操作。

规范的文案提升信息表达的精准度
在界面交互中，文案作为信息传递的载体，占据的比重是最大的，在群核的产品中，我们规范了文案的表达提升信息表达的精准度，之前有针对工具文案做了梳理。
结合人设和语气确定，以及酷家乐定义“善解人意、理想、直率”的文案原则，在工具操作中我们梳理了以下几类比较容易出现问题的场景，试图通过文案来提升信息表达的精准度，从而让用户更流畅的进行界面交互。
动作命令：结合直率的文案原则，简洁高效的描述命令动作

解释说明：结合理性、直率的原则，精炼的去解释内容

专业名词：结合善解人意和直率原则，避免让用户产生多重疑惑，专业名称平民化、通用化

作者：酷家乐UED
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

组件是设计师常用且基础的知识点，随着软件设计和开发越来越成熟，已经延伸出很多的类型，能否正确合理的使用也是衡量交互设计水平的一个标准。文章里理论知识比较少，我想说点比较实用的东西，给大家解惑。所以关于基本的控件/组件类型的基础知识不做过多说明，理论和实践相辅相成，理论知识大家可以去优秀平台学习并吸收，但实践需要带入更多的思考。

分清控件和组件

控件可以理解为平台系统定义的某种形式，严格意义上来说，控件的专业叫法为“原生控件”，不过大家都习惯性的顺口说“控件”，这样会更简单点。

组件从字面理解就是组装而成，在技术层面，代码是需要封装的，那被封装在一起，就可以形成组件，能自定义内容，名称等。

原生控件相比较组件，颗粒感更细，一个组件可以包含多个控件，单个控件也可以作为组件。可以使用一个简单的例子来阐述他们的关系，控件就好比是药材，那么药方就可以理解成是一个组件。如果还不能理解，那可以用更具体的案例来说明下；

如下图是用户登陆流程中的一个交互组件，该组件由两种原生控件来组成，输入框和按钮，这样结合就构成“账号输入”的组件；

再如下图，单独的输入框控件也可以成为一个独立的“账号输入”组件；

以上两个例子，说明了组件可以由单一或多个的控件类型进行组成，如何去定义组件的构成，其实还需要结合具体的设计需求，上面第一个组件给账号修改增加一个按钮的控件，让用户可以通过按钮清除所有的字段，让用户直接重新输入，通过手动和按钮操作的两种方式去进行账号修改，第二个组件仅支持手动键入进行修改。通过增加了清除的交互方式，组件的构成就会有不一样的设计方式。

再深入聊下组件

各平台基本都有自己独立的设计体系，有自己定义的组件和组件库，学习组件要了解它分为基础组件和业务/高级组件两种类型。基础组件是一种底层组件，例如输入框、按钮、单选框；其特点是比较独立单一，通用性很强，适应各种业务场景；业务组件是一个基础组件集合而成的大组件，也可以叫高级组件，是复合型的区块组件，主要是针对解决业务问题；如下截图是flomo笔记用用的网页版本，以它的首页为例；页面按照左右结构类型区分，可以定义为两个大的业务组件，由浅入深，可以再细分，得到再定义更多的业务组件，这里，我以“发布笔记”的组件具体说明下，它是怎么组成来解决业务问题的；首先我们拆解下组成部分：文本内容，工具按钮（添加标签和图片、文本编辑、快速引用等三种类型），发布按钮。用户发布笔记的行为主要为文字输入-内容编辑-发布完成；结合用户行为和组件设计，解决了用户输入文本内容，给笔记归纳，增加图片，修改文本样式，快速引用，最终进行发布的问题。产品在迭代过程中，我们会发现更多的需求，业务组件就要通过再优化帮用户解决实际问题。

学做组件管理

结合自己的学习和设计经验，我把组件相关的内容和知识整理定义为组件管理，包括组件的样式定义，组件和组件库设计，搭建，沉淀优化应该都算是它的组成部分。组件和组件库作用，和基本概念我就不做过多描述了，毕竟市面上关于这些内容已经有很多了，我想从小的点去做深度思考，讲点有用的东西，呈现给大家；组件和组件库首先一定是遵循和围绕着设计的原则、理念、目标去构思，如苹果的《人机交互指南》里面提到的系统设计三大主旨（清晰、遵从、层次）和六大原则（完整性、一致性、直接性，反馈感、隐喻性、控制感），安卓系统《材料设计1，2》中提到的三大原则（材料就是隐喻、大胆，生动，有意、运动提供意义）。还有国内b端最权威的蚂蚁设计体系Ant design，从设计价值观延伸设计原则，从而思考设计模式。

这里可以总结，平台在创造设计标准时，思考的方向都会不一样，所以系统遵循什么，没有统一的模式，况且这些名词本身就很抽象，这需要设计师们去思考应该把平台系统设计成什么样。这确实很依赖和考验设计师各方面的综合能力。所以组件设计和搭建，它并不是某一个人的事，而是整个团队的任务。

组件和组件库的设计和搭建过程中，需要了解系统平台，是苹果端还是安卓，web端，不同的系统设计的差异性很大，对应系统的控件类型我们也要很熟练的掌握。例如安卓一直保留的原生的底部导航栏的操作控件（返回、主页、菜单），反观苹果最早出现在底部的HOME键，随着硬件设计的升级，物理按钮的作用已经完全被交互手势操作替代，根据设计准则，可以先设计出确定的初版组件样式，然后设计师们要熟悉项目业务，深挖每个功能中的不同业务场景，并设计出对应的业务组件；这样设计师最终对于当前组件进行整合分类，做出版本的组件库；组件和组件库是设计和开发相结合的，设计师呈现页面上的模块是直观的，但都是技术人员进行底层代码拼接的再封装而成的，有规模的公司一般都会做成开源的组件库。去提升项目人员之间的协作效率，复用率高，节省成本。如下图是Ant design里面的部分按钮组件的样式和代码演示，作为国内独一档的免费学习的设计体系网站。如果大家能够从头到尾研究一遍，相信对你构建组件和组件库有十分大的帮助。

最后组件和组件库的优化迭代是贯穿整个产品设计的生命周期的，从搜集组件需求、思考组件优化、设计组件优化方案、验收更新组件和组件库；

搜集组件需求

项目角度：设计师开发过程中遗漏的、新的业务场景中发现的组件问题，设计和开发者评审讨论出来的包括影响协作效率的，不合理的问题；用户体验：产品中的用户反馈的功能体验不好，使用时体验差的模块；外部借鉴：团队人员从优秀的组建案例中发现的可借鉴的需求；

思考组件优化

思考方向1：设计师可以查阅资料，研究优秀的组件平台，从成熟的产品中查看同类的组件设计案例；或者和开发者、设计师进行深度交流，得到有用的建议；

思考方向2：结合业务场景，最好能够将应用场景穷举梳理出来，具体到某个的功能，考虑该功能里存在的每一个场景中，组件需要有什么样的状态和变化；

设计组件优化方案

设计师根据以上步骤完成组件优化的分析之后，可以相对应的设计组件优化方案，组织开发人员一起多次的评审，大家一起去讨论完善，最终技术人员再进行组件代码的开发和封装；组件设计优化，设计师要注意在既定的设计原则下合理优化，要保留分析材料和思考过程，进行有理有据的评审论证；

验收更新组件和组件库

当开发人员将组件样式通过代码落地之后，优化中的组件方案需要带入到实际功能场景中进行测试检查，验证组建优化的是否符合预期，在优化过程中，可以用一张《组建优化表》进行记录，可以方便项目人员追踪和查看。

组件设计的应用和思考

组件的设计本质上也是为了解决某种特定场景的问题。例如提示弹窗，为了让用户在操作过程中有反馈提示，提示中又可以通过解决某种场景问题，选择让用户进行操作或者不操作，所以平台设计出这种弹窗组件，即模态和非模态弹窗类型。下面通过两个例子，结合功能和场景具体分析产品应该如何做组件设计；

案例1:支付宝“商家转账功能”组件设计

我们去商店购买东西使用支付宝支付的过程中，可以通过扫描商家二维码，进行转账交易，转账支付的流程主要包括输入数额，选择支付方式，确认支付；因为每个流程中的组件都十分复杂，我们仅拿其中一个流程，对用户操作过程中涉及的组件进行拆解说明；输入金额和添加备注流程：页面的组件主要是用户信息文本，输入框、备注组件、键盘控件，弹框组件；这个流程包括2个行为事件，4个大的业务场景；

行为事件一：用户在商店通过扫码商家二维码，分别两次给商家转账20000和100000元的金额，

业务场景1：用户没有输入任何金额

业务场景2：用户转账输入的金额没有超过限制

业务场景3：用户转账输入的金额超过最大限制

业务场景123主要应用金额输入框组件，输入框组件根据用户操作行为，会有不一样的设计，用户没有任何操作，输入框内有默认文案提示“输入付款金额”，用户输入金额后，计算单位超过‘百’，数字金额上方会有单位提示，同时显示删除按钮，支持删除，重新输入，业务场景2中根据金额输入范围定义了产品业务规则，再细分出三种场景，不同范围内的金额，可以对应的组件设计方案解决确认转账确认问题；

（1）当输入金额范围在1-50000，进入新页面，通过点击按钮组件，进行转账确认

（2）当输入金额范围在50000-99999，在当前页面使用模态弹框组件，进行转账确认
（3）当输入金额范围在100000-999999，进入新页面，重新输入框内输入转账金额，进行确认，若两次金额不一致，出现弹窗提示用户操作。

当输入的金额超过限制后，弹框组件配合进行超限的toast提示。

通过拆解行为事件1，我们细分出了3个业务场景，通过运用输入框、键盘、和toast弹窗，它们相互关联解决了输入金额产生的各种问题；

无金额输入时，输入框能给予用户提示，这是比较常见的输入框组件设计，预置提示文本；

输入金额未超出限制，输入框中会带入计量单位，这就是组件设计的细微之处，转账金额是一个关联自己财产的行为操作，应当是需要谨慎的，所以计量单位也是在用户输入过程中出现，给用户一个提示，没有任何打断操作的意思，出现的时机很适合，再加上输入的文本数字已经足够醒目，能够提示用户输入有足够的准确度，如果没有加入这个字段，确实也不影响用户操作，但这种双重衡量的方式，潜意识里会让自己输入的更放心，不怕自己有误差；这就是组件设计给用户带来的惊喜感。

金额超出限制后，通过组件toast提示“付款金额超限”，第一提示框组件很好的限制键盘的数字输入，避免用户无效输入，第二toast提示框的触发时机设计，这里的方案是当输入金额超百万，按数字键盘的时候就会给予提示，而不是等用户输入完之后，再去按确认键的时候，弹出来提示金额超限。

行为事件二：用户点击备注按钮，添加转账信息。

业务场景4：确认完成输入金额后，给商户添加备注信息，20个字以内；

输入转账金额后，文字键盘上方出现备注按钮，点击弹出备注信息弹窗，在弹窗的输入框中写备注信息，其实添加备注，可以在页面中使用文本框，可为何去使用弹窗中增加输入框，确认之后再展示到页面中呢？输入金额和添加备注的行为的优先级来看，备注信息应该是比较低的，信息的展示的重要性也比较低。首先如果使用文本框，和输入框的组件层级在同一级，用户的关注点会被干扰，所以使用不突出的文字按钮组件进行区别，另外备注文字按钮出现的触发条件也是因为有输入金额这个动作，所以备注的信息展示在产品设计中就是很弱。另外在弹窗输入框中也提示了备注信息20个字以内，有这样的信息规则，弹窗组件比文本框更适合短文本的信息录入，这样和金额输入框组件能够被区分。

作者：Q什伍
来源：站酷

转账是涉及财产安全的业务，所以组件的设计除了解决不同场景下用户体验问题（及时反馈、合理提示、增加惊喜、操作方便），还要处理核心的业务问题（保证用户的财产问题）
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司