•  

  鼠標指針最基本的功能之一是指向。用戶可以通過移動鼠標來控制指針在屏幕上的位置，指向不同的界面元素，如按鈕、鏈接、文本或圖像。
•  

  選擇功能通常與指向結合使用。當用戶將指針放在某個元素上并按下鼠標按鈕時，就可以選擇該元素。例如，在文本編輯器中，用戶可以通過指向并點擊來選擇文本；
•  

  在網頁上，指向并點擊鏈接可以打開新的頁面。

•  

  點擊是用戶與界面元素交互的常見動作。用戶將鼠標指針移動到按鈕或其他可激活的元素上，然后按下并釋放鼠標按鈕來執行點擊操作。
•  

  激活功能指的是通過點擊來觸發元素的事件或動作。例如，點擊一個按鈕可能會提交一個表單，點擊一個菜單項可能會打開一個新窗口或執行特定的命令。

•  

  拖動功能允許用戶通過按住鼠標按鈕并移動鼠標來拖拽界面元素，如窗口、圖標或選定的文本。
•  

  移動功能是指通過拖動操作來重新定位元素。用戶可以在桌面上移動窗口到不同的位置，或在文檔中拖動文本或圖像來改變它們的位置。
•  

  拖放操作是拖動的擴展，用戶可以將一個元素拖到另一個元素或區域來執行特定的功能，如將文件拖到文件夾圖標中進行移動或復制。

 

 

•  

  選擇：

  箭頭光標允許用戶點擊按鈕、選擇菜單項或激活鏈接。
•  

  指向：

  它提供了指向屏幕上特定元素的功能，幫助用戶直觀地識別可交互區域。
•  

  導航：

  在瀏覽網頁或應用程序時，箭頭光標幫助用戶在界面中導航。

•  

  懸停：

  將箭頭光標懸停在某個元素上可能會顯示額外的信息，如工具提示或菜單；也可能會觸發視覺變化，如顏色或大小改變
•  

  點擊：

  用戶可以通過將箭頭光標定位到目標上并點擊鼠標左鍵來執行點擊操作。

 

 

•  

  選擇：

  通過點擊操作選擇界面元素。
•  

  指向：

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

  激活：

  點擊按鈕或鏈接以觸發事件。
•  

  拖動：

  拖動窗口或對象到新位置。

•  

  懸停：

  將光標停留在某個元素上以查看狀態變化或提示信息。
•  

  點擊：

  按下并釋放鼠標按鈕以選擇或激活元素。
•  

  雙擊：

  快速連續點擊兩次以執行默認命令，如打開文件或文件夾。

 

 

•  

  文本輸入：

  允許用戶在文本字段中輸入字符。
•  

  文本編輯：

  用戶可以通過點擊文本光標來定位文本中的特定位置，進行編輯或修改。

•  

  點擊：

  用戶可以將鼠標指針移動到文本光標上并點擊，以在該位置插入或編輯文本。
•  

  拖動：

  用戶可以拖動文本光標來選擇文本。

 

 

•  

  精確定位：

  十字光標幫助用戶在屏幕上進行精確的點擊或選擇。
•  

  細節操作：

  在需要處理圖像、圖表或其他細節元素時，十字光標提供了更好的控制。

•  

  點擊：

  用戶可以使用十字光標進行精確點擊。
•  

  拖動：

  在需要選擇特定區域或繪制圖形時，用戶可以拖動十字光標。

 

 

•  

  禁用指示：

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

  防止誤操作：

  通過視覺提示防止用戶嘗試執行不可用的操作，從而避免可能的誤操作或錯誤。

•  

  視覺反饋：

  當用戶將鼠標移動到禁止操作的區域時，光標變化提供即時的視覺反饋。
•  

  操作阻止：

  系統阻止用戶執行任何無效的操作。

 

 

•  

  精確定位：

  十字光標幫助用戶在屏幕上進行精確的點擊或選擇。
•  

  細節操作：

  在需要處理圖像、圖表或其他細節元素時，十字光標提供了更好的控制。

•  

  點擊：

  用戶可以使用十字光標進行精確點擊。
•  

  拖動：

  在需要選擇特定區域或繪制圖形時，用戶可以拖動十字光標。

 

 

 

 

•  

  復制操作：

  允許用戶通過拖動來復制文件、文件夾或其他界面元素。
•  

  數據傳輸：

  在不同應用程序或同一應用程序的不同部分之間傳輸數據。

•  

  拖動復制：

  用戶將鼠標指針放在可復制的元素上，按下鼠標按鈕并拖動以復制該項目。
•  

  釋放完成：

  用戶在目標位置釋放鼠標按鈕，完成復制操作。

 

 

•  

  創建快捷方式：

  允許用戶在不改變原始文件或文件夾位置的情況下，創建一個指向原始位置的鏈接。
•  

  節省空間：

  替身不占用額外的空間，因為它只是一個指向原始文件的引用。

•  

  拖動：

  用戶將鼠標指針放在文件或文件夾上，按下并拖動。
•  

  創建替身：

  在拖動過程中不松開鼠標按鈕，同時按下Option鍵（或根據系統提示的其他修飾鍵），光標將變為替身光標。
•  

  放置：

  用戶將文件或文件夾拖到所需位置并釋放鼠標按鈕，完成替身的創建。

 

 

•  

  提供信息：

  幫助指針可以向用戶顯示額外的說明或信息。
•  

  輔助理解：

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

•  

  懸停顯示：

  當用戶的鼠標指針懸停在具有幫助功能的界面元素上時，光標樣式可能會變化，同時顯示幫助信息。
•  

  點擊獲取：

  在某些情況下，用戶可能需要點擊帶有幫助指針的元素以打開幫助文檔或獲取更多信息。

 

 

•  

  文本輸入：

  鉛筆光標用于指示用戶可以在文本字段中輸入文字。
•  

  文本編輯：

  在已有文本上移動鉛筆光標，可以進行文字的選擇、編輯或修改。

•  

  點擊定位：

  用戶可以在文本中的任何位置點擊鉛筆光標，以定位文本插入點。
•  

  拖動選擇：

  用戶可以拖動鉛筆光標來選擇文本。

 

 

•  

  精確定位：

  允許用戶在需要高精度的界面元素上進行操作，如圖形設計、圖像編輯或表格數據輸入。
•  

  細致選擇：

  在文本編輯或代碼編輯中，精密指針可以幫助用戶更準確地選擇文本或代碼段。

•  

  點擊：

  用戶可以使用精密指針進行精確點擊。
•  

  選擇：

  用戶可以輕松地選擇小尺寸的界面元素或在緊密排列的元素之間進行選擇。

 

 

•  

  單元格選擇：

  允許用戶通過點擊來選擇單個或多個單元格。
•  

  內容編輯：

  指示用戶可以在單元格中輸入或編輯數據。

•  

  點擊選擇：

  用戶可以通過點擊來選擇單元格，單元格指針隨之移動到該單元格。
•  

  拖動選擇：

  用戶可以拖動單元格指針來選擇一個區域的單元格。
•  

  輸入編輯：

  用戶可以在單元格指針所在的位置輸入或編輯文本。

 

 

•  

  放大內容：

  允許用戶放大查看細節，例如地圖、圖片或文本。
•  

  縮小內容：

  允許用戶縮小以獲得更廣闊的視野。

•  

  點擊放大/縮小：

  用戶可以通過點擊帶有“+”或“-”符號的放大/縮小按鈕來進行操作。
•  

  拖動縮放：

  在一些應用中，用戶可以通過拖動一個滑塊或在觸摸屏幕上用兩個手指進行捏合操作來放大或縮小。
•  

  滾輪縮放：

  使用鼠標滾輪或觸控板的多點觸控手勢也可以實現放大或縮小。

 

 

•  

  元素移動：

  允許用戶通過拖動操作來改變元素在界面上的位置。
•  

  布局調整：

  用戶可以通過移動光標來調整界面元素的布局。

•  

  點擊并拖動：

  用戶可以通過點擊并拖動移動光標來移動元素。
•  

  釋放完成移動：

  用戶釋放鼠標按鈕后，元素將停留在新位置。

 

 

•  

  抓取元素：

  允許用戶通過拖動操作來抓取界面上的元素。
•  

  移動元素：

  在抓取元素后，用戶可以將其移動到新的位置。

•  

  點擊并拖動：

  用戶可以通過點擊并拖動抓取指針來抓取元素。
•  

  釋放完成移動：

  用戶釋放鼠標按鈕后，元素將被放置在新位置。

 

 

•  

  指示忙碌狀態：

  向用戶明確表示應用程序正在忙碌，正在處理數據或執行任務。
•  

  提供反饋：

  為用戶提供即時的視覺反饋，告知他們操作正在進行中。

•  

  顯示載入光標：

  當應用程序開始處理任務時，指針變為載入光標。
•  

  隱藏載入光標：

  任務完成后，載入光標消失，恢復為正常指針樣式。

 

 

•  

  內容瀏覽：

  允許用戶瀏覽超出當前視圖范圍的內容。
•  

  滾動內容：

  允許用戶滾動查看內容，如網頁、文檔或圖像。

•  

  拖動滾動：

  用戶可以點擊并拖動滾動條上的滑塊來上下或左右滾動內容。
•  

  滾輪滾動：

  使用鼠標滾輪或觸控板的滾動手勢可以快速滾動頁面。
•  

  自動滾動：

  在某些應用程序中，內容可以自動滾動，如在演示或某些游戲場景中。

•  

  定義：一致性原則要求在整個應用程序或網站中，鼠標指針的行為和樣式保持統一。這意味著相同的操作應產生相同的視覺反饋，相同的指針樣式應表示相同的功能。
•  

  應用：例如，如果標準箭頭指針用于所有選擇操作，那么用戶就會學會預期這種指針樣式，并知道何時可以進行選擇。

•  

  定義：反饋原則指的是系統應提供即時的視覺或聽覺信號，以響應用戶的操作。這有助于用戶理解他們的操作是否成功，以及系統的狀態。
•  

  應用：例如，當用戶將鼠標指針移動到按鈕上時，按鈕可能會改變顏色或顯示陰影，以表明它是可點擊的。

•  

  定義：可見性原則確保鼠標指針在所有情況下都是可見的，以便用戶始終知道他們當前的位置和可以進行的操作。
•  

  應用：例如，當指針移動到特定元素上時，元素可能會高亮顯示，或者指針可能會改變形狀或大小，以提高其可見性。

•  

  定義：適應性原則指的是鼠標指針應能夠適應不同的用戶需求和上下文環境。這包括對不同屏幕尺寸、分辨率和用戶偏好的適應。
•  

  應用：例如，提供可調整的指針大小選項，以便視力不佳的用戶可以更清楚地看到指針。或者在不同的操作系統或設備上使用適當的指針樣式。

•  

  鼠標指針提供了一種直觀的方式來快速導航和選擇界面元素。通過精確的指向和點擊，用戶能夠高效地完成任務，減少尋找和選擇目標所需的時間。
•  

  鼠標指針的變化可以即時反映用戶的操作，如當用戶將指針移動到鏈接上時，指針變成手形，這是一種即時的視覺反饋，告訴用戶這是一個可點擊的鏈接。
•  

  清晰的指針狀態變化可以減少用戶在操作過程中的不確定性，幫助他們更好地理解界面的當前狀態和預期行為，從而降低操作錯誤。

•  

  鼠標指針的設計考慮到了不同能力的用戶。例如，可調整的指針大小和顏色對比度可以幫助視力不佳的用戶更容易地看到和跟蹤光標。
•  

  輔助功能，如指針粘滯鍵或慢速指針移動，可以幫助運動障礙用戶更準確地控制指針，確保所有用戶都能有效地與界面交互。

•  

  通過自定義鼠標指針的樣式和動畫，應用程序和網站可以增強其品牌識別度。獨特的指針設計可以幫助用戶在視覺上與品牌建立聯系。
•  

  個性化的指針樣式可以提供更豐富的用戶體驗，讓用戶感覺界面更加貼心和專屬。

 

 

•  

  操作系統通常提供了一套預定義的鼠標指針方案，包括不同的指針形狀和大小，以適應各種操作和視覺需求。

•  

  用戶可以通過控制面板或系統設置訪問鼠標指針的配置選項。例如，在Windows中，用戶可以打開“鼠標屬性”對話框來更改指針速度、調整指針可見性（如指針大小和顏色），以及選擇不同的指針方案。
•  

  一些操作系統還提供了輔助功能，如指針的軌跡顯示，幫助用戶更清晰地追蹤鼠標移動。

•  

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

  用戶和設計師可以通過創建自定義指針樣式來個性化他們的計算機或應用程序。這通常涉及選擇或設計新的指針圖像，并將其應用為鼠標指針。
•  

  自定義指針樣式可以包括獨特的圖形設計、顏色和主題，以匹配應用程序的品牌或用戶的個性。
•  

  動畫指針可以提供更豐富的視覺反饋，例如，一個等待動畫可以顯示旋轉的圖標，以表明應用程序正在處理用戶的操作。

•  

  開發者可以通過編程方式控制鼠標指針的行為，以增強應用程序的交互性。這包括改變指針的形狀、位置、可見性，甚至創建自定義的指針效果。
•  

  在Web開發中，CSS和JavaScript可以用于更改指針樣式和行為。例如，cursor屬性可以改變HTML元素上的指針圖標，而JavaScript可以用于監聽鼠標事件并動態更改指針樣式。
•  

  在桌面應用程序開發中，開發者可以使用相應的API來控制指針。例如，Windows API允許開發者設置自定義光標，而macOS的AppKit框架提供了設置光標的接口。
•  

  編程還可以實現更高級的交互，如捕捉鼠標位置、響應鼠標事件，以及在特定條件下更改指針行為。

•  

  不一致的指針樣式：使用多種不同的指針樣式可能會導致用戶混淆，特別是如果指針變化與功能不匹配時。
•  

  不明顯的可交互元素：當指針移動到可交互元素上時，如果沒有清晰的視覺反饋，用戶可能不知道可以進行操作。
•  

  指針尺寸不適當：指針太小或太大都可能影響用戶體驗，特別是在不同分辨率的屏幕上。
•  

  缺乏視覺反饋：鼠標指針在懸停、點擊或拖動時，如果沒有適當的動畫或變化，可能會讓用戶感到困惑。
•  

  指針與界面元素間距不當：當用戶點擊按鈕或其他元素時，如果指針位置與實際觸發區域不一致，可能會導致誤操作。
•  

  指針樣式與品牌形象不符：如果自定義指針樣式與品牌的視覺形象不協調，可能會削弱品牌識別度。
•  

  在不同操作系統或設備上的兼容性問題：設計的指針樣式需要在不同的操作系統和設備上進行測試，以確保一致性和功能性。
•  

  動畫過度或不足：指針動畫可能會吸引用戶的注意力，但過度的動畫可能會分散用戶對主要內容的關注；不足的動畫則可能無法提供足夠的交互提示。
•  

  指針行為與用戶期望不符：用戶對指針行為有一定的預期，如果指針的實際行為與這些預期不符，可能會導致用戶感到困惑。

 

 

 

 

 

 

伴著公司業務發展，開源的組件庫已無法滿業務需要，搭建一套更適合公司業務的UI組件庫，勢在必行；設計系統承載著作為一個沉淀基礎能力的支持平臺，同時也具有賦能多多邊業務、多種角色的重要作用和價值；

 

 

為了更適用于企業級產品的開發和使用，通過大量中后臺場景的的實踐，B+Design設計系統提煉出以下設計原則：

 

 

 

 

 

 

 

 

 

 

 

 

•  

  基礎組件

 

 

 

 

 

 

 

 

•  

  業務組件

 

 

•  

  頁面模板