•  

  鼠标指针最基本的功能之一是指向。用户可以通过移动鼠标来控制指针在屏幕上的位置，指向不同的界面元素，如按钮、链接、文本或图像。
•  

  选择功能通常与指向结合使用。当用户将指针放在某个元素上并按下鼠标按钮时，就可以选择该元素。例如，在文本编辑器中，用户可以通过指向并点击来选择文本；
•  

  在网页上，指向并点击链接可以打开新的页面。

•  

  点击是用户与界面元素交互的常见动作。用户将鼠标指针移动到按钮或其他可激活的元素上，然后按下并释放鼠标按钮来执行点击操作。
•  

  激活功能指的是通过点击来触发元素的事件或动作。例如，点击一个按钮可能会提交一个表单，点击一个菜单项可能会打开一个新窗口或执行特定的命令。

•  

  拖动功能允许用户通过按住鼠标按钮并移动鼠标来拖拽界面元素，如窗口、图标或选定的文本。
•  

  移动功能是指通过拖动操作来重新定位元素。用户可以在桌面上移动窗口到不同的位置，或在文档中拖动文本或图像来改变它们的位置。
•  

  拖放操作是拖动的扩展，用户可以将一个元素拖到另一个元素或区域来执行特定的功能，如将文件拖到文件夹图标中进行移动或复制。

•  

  选择：

  箭头光标允许用户点击按钮、选择菜单项或激活链接。
•  

  指向：

  它提供了指向屏幕上特定元素的功能，帮助用户直观地识别可交互区域。
•  

  导航：

  在浏览网页或应用程序时，箭头光标帮助用户在界面中导航。

•  

  悬停：

  将箭头光标悬停在某个元素上可能会显示额外的信息，如工具提示或菜单；也可能会触发视觉变化，如颜色或大小改变
•  

  点击：

  用户可以通过将箭头光标定位到目标上并点击鼠标左键来执行点击操作。

•  

  选择：

  通过点击操作选择界面元素。
•  

  指向：

  指示屏幕上的特定位置。
•  

  激活：

  点击按钮或链接以触发事件。
•  

  拖动：

  拖动窗口或对象到新位置。

•  

  悬停：

  将光标停留在某个元素上以查看状态变化或提示信息。
•  

  点击：

  按下并释放鼠标按钮以选择或激活元素。
•  

  双击：

  快速连续点击两次以执行默认命令，如打开文件或文件夹。

•  

  文本输入：

  允许用户在文本字段中输入字符。
•  

  文本编辑：

  用户可以通过点击文本光标来定位文本中的特定位置，进行编辑或修改。

•  

  点击：

  用户可以将鼠标指针移动到文本光标上并点击，以在该位置插入或编辑文本。
•  

  拖动：

  用户可以拖动文本光标来选择文本。

•  

  精确定位：

  十字光标帮助用户在屏幕上进行精确的点击或选择。
•  

  细节操作：

  在需要处理图像、图表或其他细节元素时，十字光标提供了更好的控制。

•  

  点击：

  用户可以使用十字光标进行精确点击。
•  

  拖动：

  在需要选择特定区域或绘制图形时，用户可以拖动十字光标。

•  

  禁用指示：

  指示用户界面中的某些元素或操作目前不可用或被锁定。
•  

  防止误操作：

  通过视觉提示防止用户尝试执行不可用的操作，从而避免可能的误操作或错误。

•  

  视觉反馈：

  当用户将鼠标移动到禁止操作的区域时，光标变化提供即时的视觉反馈。
•  

  操作阻止：

  系统阻止用户执行任何无效的操作。

•  

  精确定位：

  十字光标帮助用户在屏幕上进行精确的点击或选择。
•  

  细节操作：

  在需要处理图像、图表或其他细节元素时，十字光标提供了更好的控制。

•  

  点击：

  用户可以使用十字光标进行精确点击。
•  

  拖动：

  在需要选择特定区域或绘制图形时，用户可以拖动十字光标。

•  

  复制操作：

  允许用户通过拖动来复制文件、文件夹或其他界面元素。
•  

  数据传输：

  在不同应用程序或同一应用程序的不同部分之间传输数据。

•  

  拖动复制：

  用户将鼠标指针放在可复制的元素上，按下鼠标按钮并拖动以复制该项目。
•  

  释放完成：

  用户在目标位置释放鼠标按钮，完成复制操作。

•  

  创建快捷方式：

  允许用户在不改变原始文件或文件夹位置的情况下，创建一个指向原始位置的链接。
•  

  节省空间：

  替身不占用额外的空间，因为它只是一个指向原始文件的引用。

•  

  拖动：

  用户将鼠标指针放在文件或文件夹上，按下并拖动。
•  

  创建替身：

  在拖动过程中不松开鼠标按钮，同时按下Option键（或根据系统提示的其他修饰键），光标将变为替身光标。
•  

  放置：

  用户将文件或文件夹拖到所需位置并释放鼠标按钮，完成替身的创建。

•  

  提供信息：

  帮助指针可以向用户显示额外的说明或信息。
•  

  辅助理解：

  帮助用户理解界面元素的功能或操作方式。

•  

  悬停显示：

  当用户的鼠标指针悬停在具有帮助功能的界面元素上时，光标样式可能会变化，同时显示帮助信息。
•  

  点击获取：

  在某些情况下，用户可能需要点击带有帮助指针的元素以打开帮助文档或获取更多信息。

•  

  文本输入：

  铅笔光标用于指示用户可以在文本字段中输入文字。
•  

  文本编辑：

  在已有文本上移动铅笔光标，可以进行文字的选择、编辑或修改。

•  

  点击定位：

  用户可以在文本中的任何位置点击铅笔光标，以定位文本插入点。
•  

  拖动选择：

  用户可以拖动铅笔光标来选择文本。

•  

  精确定位：

  允许用户在需要高精度的界面元素上进行操作，如图形设计、图像编辑或表格数据输入。
•  

  细致选择：

  在文本编辑或代码编辑中，精密指针可以帮助用户更准确地选择文本或代码段。

•  

  点击：

  用户可以使用精密指针进行精确点击。
•  

  选择：

  用户可以轻松地选择小尺寸的界面元素或在紧密排列的元素之间进行选择。

•  

  单元格选择：

  允许用户通过点击来选择单个或多个单元格。
•  

  内容编辑：

  指示用户可以在单元格中输入或编辑数据。

•  

  点击选择：

  用户可以通过点击来选择单元格，单元格指针随之移动到该单元格。
•  

  拖动选择：

  用户可以拖动单元格指针来选择一个区域的单元格。
•  

  输入编辑：

  用户可以在单元格指针所在的位置输入或编辑文本。

•  

  放大内容：

  允许用户放大查看细节，例如地图、图片或文本。
•  

  缩小内容：

  允许用户缩小以获得更广阔的视野。

•  

  点击放大/缩小：

  用户可以通过点击带有“+”或“-”符号的放大/缩小按钮来进行操作。
•  

  拖动缩放：

  在一些应用中，用户可以通过拖动一个滑块或在触摸屏幕上用两个手指进行捏合操作来放大或缩小。
•  

  滚轮缩放：

  使用鼠标滚轮或触控板的多点触控手势也可以实现放大或缩小。

•  

  元素移动：

  允许用户通过拖动操作来改变元素在界面上的位置。
•  

  布局调整：

  用户可以通过移动光标来调整界面元素的布局。

•  

  点击并拖动：

  用户可以通过点击并拖动移动光标来移动元素。
•  

  释放完成移动：

  用户释放鼠标按钮后，元素将停留在新位置。

•  

  抓取元素：

  允许用户通过拖动操作来抓取界面上的元素。
•  

  移动元素：

  在抓取元素后，用户可以将其移动到新的位置。

•  

  点击并拖动：

  用户可以通过点击并拖动抓取指针来抓取元素。
•  

  释放完成移动：

  用户释放鼠标按钮后，元素将被放置在新位置。

•  

  指示忙碌状态：

  向用户明确表示应用程序正在忙碌，正在处理数据或执行任务。
•  

  提供反馈：

  为用户提供即时的视觉反馈，告知他们操作正在进行中。

•  

  显示载入光标：

  当应用程序开始处理任务时，指针变为载入光标。
•  

  隐藏载入光标：

  任务完成后，载入光标消失，恢复为正常指针样式。

•  

  内容浏览：

  允许用户浏览超出当前视图范围的内容。
•  

  滚动内容：

  允许用户滚动查看内容，如网页、文档或图像。

•  

  拖动滚动：

  用户可以点击并拖动滚动条上的滑块来上下或左右滚动内容。
•  

  滚轮滚动：

  使用鼠标滚轮或触控板的滚动手势可以快速滚动页面。
•  

  自动滚动：

  在某些应用程序中，内容可以自动滚动，如在演示或某些游戏场景中。

•  

  定义：一致性原则要求在整个应用程序或网站中，鼠标指针的行为和样式保持统一。这意味着相同的操作应产生相同的视觉反馈，相同的指针样式应表示相同的功能。
•  

  应用：例如，如果标准箭头指针用于所有选择操作，那么用户就会学会预期这种指针样式，并知道何时可以进行选择。

•  

  定义：反馈原则指的是系统应提供即时的视觉或听觉信号，以响应用户的操作。这有助于用户理解他们的操作是否成功，以及系统的状态。
•  

  应用：例如，当用户将鼠标指针移动到按钮上时，按钮可能会改变颜色或显示阴影，以表明它是可点击的。

•  

  定义：可见性原则确保鼠标指针在所有情况下都是可见的，以便用户始终知道他们当前的位置和可以进行的操作。
•  

  应用：例如，当指针移动到特定元素上时，元素可能会高亮显示，或者指针可能会改变形状或大小，以提高其可见性。

•  

  定义：适应性原则指的是鼠标指针应能够适应不同的用户需求和上下文环境。这包括对不同屏幕尺寸、分辨率和用户偏好的适应。
•  

  应用：例如，提供可调整的指针大小选项，以便视力不佳的用户可以更清楚地看到指针。或者在不同的操作系统或设备上使用适当的指针样式。

•  

  鼠标指针提供了一种直观的方式来快速导航和选择界面元素。通过精确的指向和点击，用户能够高效地完成任务，减少寻找和选择目标所需的时间。
•  

  鼠标指针的变化可以即时反映用户的操作，如当用户将指针移动到链接上时，指针变成手形，这是一种即时的视觉反馈，告诉用户这是一个可点击的链接。
•  

  清晰的指针状态变化可以减少用户在操作过程中的不确定性，帮助他们更好地理解界面的当前状态和预期行为，从而降低操作错误。

•  

  鼠标指针的设计考虑到了不同能力的用户。例如，可调整的指针大小和颜色对比度可以帮助视力不佳的用户更容易地看到和跟踪光标。
•  

  辅助功能，如指针粘滞键或慢速指针移动，可以帮助运动障碍用户更准确地控制指针，确保所有用户都能有效地与界面交互。

•  

  通过自定义鼠标指针的样式和动画，应用程序和网站可以增强其品牌识别度。独特的指针设计可以帮助用户在视觉上与品牌建立联系。
•  

  个性化的指针样式可以提供更丰富的用户体验，让用户感觉界面更加贴心和专属。

•  

  操作系统通常提供了一套预定义的鼠标指针方案，包括不同的指针形状和大小，以适应各种操作和视觉需求。

•  

  用户可以通过控制面板或系统设置访问鼠标指针的配置选项。例如，在Windows中，用户可以打开“鼠标属性”对话框来更改指针速度、调整指针可见性（如指针大小和颜色），以及选择不同的指针方案。
•  

  一些操作系统还提供了辅助功能，如指针的轨迹显示，帮助用户更清晰地追踪鼠标移动。

•  

  需要下载第三方应用程序完成自定义，例如：Steer Mouse；xGestures；Smooth Scroll；Catch Mouse等
•  

  用户和设计师可以通过创建自定义指针样式来个性化他们的计算机或应用程序。这通常涉及选择或设计新的指针图像，并将其应用为鼠标指针。
•  

  自定义指针样式可以包括独特的图形设计、颜色和主题，以匹配应用程序的品牌或用户的个性。
•  

  动画指针可以提供更丰富的视觉反馈，例如，一个等待动画可以显示旋转的图标，以表明应用程序正在处理用户的操作。

•  

  开发者可以通过编程方式控制鼠标指针的行为，以增强应用程序的交互性。这包括改变指针的形状、位置、可见性，甚至创建自定义的指针效果。
•  

  在Web开发中，CSS和JavaScript可以用于更改指针样式和行为。例如，cursor属性可以改变HTML元素上的指针图标，而JavaScript可以用于监听鼠标事件并动态更改指针样式。
•  

  在桌面应用程序开发中，开发者可以使用相应的API来控制指针。例如，Windows API允许开发者设置自定义光标，而macOS的AppKit框架提供了设置光标的接口。
•  

  编程还可以实现更高级的交互，如捕捉鼠标位置、响应鼠标事件，以及在特定条件下更改指针行为。

 

Play Video

Playreplay 10 secondsforward 10 seconds

Current Time 0:00

/

Duration Time 0:52

 

Loaded: 0%

 

Progress: 0.00%

Playback Rate

1.00x

Non-Fullscreen

 

•  

  不一致的指针样式：使用多种不同的指针样式可能会导致用户混淆，特别是如果指针变化与功能不匹配时。
•  

  不明显的可交互元素：当指针移动到可交互元素上时，如果没有清晰的视觉反馈，用户可能不知道可以进行操作。
•  

  指针尺寸不适当：指针太小或太大都可能影响用户体验，特别是在不同分辨率的屏幕上。
•  

  缺乏视觉反馈：鼠标指针在悬停、点击或拖动时，如果没有适当的动画或变化，可能会让用户感到困惑。
•  

  指针与界面元素间距不当：当用户点击按钮或其他元素时，如果指针位置与实际触发区域不一致，可能会导致误操作。
•  

  指针样式与品牌形象不符：如果自定义指针样式与品牌的视觉形象不协调，可能会削弱品牌识别度。
•  

  在不同操作系统或设备上的兼容性问题：设计的指针样式需要在不同的操作系统和设备上进行测试，以确保一致性和功能性。
•  

  动画过度或不足：指针动画可能会吸引用户的注意力，但过度的动画可能会分散用户对主要内容的关注；不足的动画则可能无法提供足够的交互提示。
•  

  指针行为与用户期望不符：用户对指针行为有一定的预期，如果指针的实际行为与这些预期不符，可能会导致用户感到困惑。

伴着公司业务发展，开源的组件库已无法满业务需要，搭建一套更适合公司业务的UI组件库，势在必行；设计系统承载着作为一个沉淀基础能力的支持平台，同时也具有赋能多多边业务、多种角色的重要作用和价值；

为了更适用于企业级产品的开发和使用，通过大量中后台场景的的实践，B+Design设计系统提炼出以下设计原则：

•  

  基础组件

•  

  业务组件

•  

  页面模板