pyqt 擷取 UI 中元件_聊聊前端 UI 元件：核心概念

基本概念

我們要聊的是「前端 UI 元件」，這個詞可以進一步拆分成「前端」、「UI」和「元件」這三個詞。是以，要想弄明白「前端 UI 元件」是什麼，得先把組成它的三個詞搞懂。

UI？GUI？

平時在談論一個軟體的視覺方面的問題時，總會用到「UI」這個英文縮寫，有時也會說「GUI」。雖然它們是不同的含義，但在大多數情況下，我們是将這兩個詞劃等号了。在這裡，我試圖幫大家将這兩個詞區分開，就算用法依然不變，至少能夠意識到它們的差別。

人與機器間，更确切地說是與人造系統間，是如何進行互動的以及如何更好地互動，是人們一直在探索的——也就是「人機互動」這個詞所代表的。「人造系統」可以是各種各樣的實體機器，也可以是計算機系統和軟體。

「互動」的本質就是人/物體間的資訊交換，即資訊從一個人/物體輸出，輸入到另一個人/物體中。是以，兩個人/物體、輸出方式、輸入方式是互動的幾個基本要素。

在人機互動的場景中，進行互動的對象是人和人造系統。人通過敲擊、觸摸、說話等方式輸出資訊，通過視覺、聽覺、觸覺等方式輸入資訊；人造系統則通過文本、圖形、聲音等方式輸出資訊，通過将人以各種方式産生的資訊轉化為電流的方式輸入資訊。

在人機互動中起到資訊交換作用的那塊空間，叫做「人機互動界面」，也叫「使用者界面」。「UI」就是「使用者界面」所對應的英文單詞「User Interface」的縮寫。

不同的互動方式和層次産生了不同的「使用者界面」，如：基于文本的「指令行界面（Command-line Interface）」、基于圖形的「圖形使用者界面（Graphical User Interface）」、基于語音的「自然語言使用者界面（Natural-language User Interface）」等等。

其中，「圖形使用者界面」是目前比較廣泛使用的，它的英文縮寫就是「GUI」。

前端開發

所謂的「前端開發」就是利用 web 前端技術進行 GUI 相關的開發工作，專門從事這類工作的人被稱為「前端開發者」。

在以前，「前端開發者」是指「頁面重構工程師」和「前端開發工程師」；随着業務和技術的發展，「頁面重構工程師」漸漸退出曆史舞台，「前端開發者」基本與「前端開發工程師」劃等号，并且稱呼變得更精簡——「前端工程師」。

在職業發生改變的同時，作為一個「前端開發者」，作為一名「前端工程師」，企業和業界的期望變高了，所承擔的職責變重了——這是一次職業更新，也是一次行業清洗——适應的人變更強了，不适的人被淘汰了。

時至今日，「前端開發」的含義也不是當初單純地寫寫頁面做做網站，還涵蓋了前端工程相關的 CLI 工具、移動端和桌面端的用戶端應用、服務端中比較靠近前端的部分等等等等——這俨然是一個「用戶端工程師」所做的工作——沒錯！「前端開發」本質上就是「用戶端開發」的一個分支，隻不過這點越來越被強化了，并且「用戶端開發」越來越趨向統一，可以稱之為「泛用戶端開發」。

無論工作内容和職業職責怎麼變，隻要是做這行，所要解決的核心問題是不變的——人與人造系統之間如何更好地進行互動。

元件？控件？

在軟體工程中，「元件（component）」一般是指軟體的可複用塊，好比制造業所使用的「構件」。這是一個比較寬泛的概念，它可以是軟體包，可以是 web 服務，也可以是子產品等。

但在前端眼裡，「元件」通常是指頁面上的視圖單元，即「UI 元件」。可以說，「UI 元件」是「元件」的子集。你可能還總會聽到「控件（control）」這個詞。放輕松，别抓頭，它隻是「UI 元件」的一個别名而已。

普通的元件通用性很差，也就是說，它基本隻能用于某個特定的系統且不能被替換。有一種元件，它是基于标準化的接口規範開發出來的，能用在任何對接了該接口的系統，也能被任何符合該接口規範的元件替換——它就是「可交換元件」，就像制造業所使用的「标準件」。

可交換的 UI 元件是前端 GUI 開發從手工作坊到自動裝配的關鍵所在。

相關概念

上面通過三個比較基本的概念闡述了「前端 UI 元件」是什麼，下面再來說說會對其産生重大影響的幾個概念——

設計體系

所謂的「設計體系」，即「Design System」，是與 UI 元件息息相關的一個概念。可以認為，設計體系是 UI 元件的外觀及互動的理論依據，而 UI 元件是設計體系的具體實作。

設計體系的存在是為了輔助像網站、應用等數字産品的設計與開發，它作為唯一的參考而讓不同團隊的人（如産品經理、設計師和開發人員等）可以一起參與到數字産品的建設當中。

基于設計體系設計并開發出來的産品無論是在觀感上還是體驗上都能夠保持一定的一緻性，樹立産品形象并傳播品牌價值。

設計體系所涵蓋的内容，包括但不限于設計語言、風格指南、模式庫、UI 元件、品牌語言及與之相關的使用說明文檔——設計體系本身不是一個傳遞物，但它是由一些傳遞物組成的，并會随着産品、工具和技術等的更新而不斷進化。

從上面所列出的設計體系的涵蓋内容中可以看出，構成它的元素有有形的，像模式、UI 元件、指南及給設計師和開發人員所使用的工具等；還有一些是無形的，像品牌價值觀、協作方式、思維方式和共同信念等。

風格指南和模式庫是比較重要的兩個傳遞物：風格指南着眼于一些圖形樣式及其用法，如顔色、字型、圖檔等；模式庫則內建了具備功能的 UI 元件及其用法。

資料及其形态

人機互動中所交換的資訊，就是「資料」，它是資訊的載體，是人機互動的核心。在這裡，「資料」這個詞的含義更傾向于指代對人類友好的程式設計語言所提供的基本資料類型以及基于它們構造的資料結構，而非對機器友好的二進制編碼等。

「資料」是對現實世界客觀事物的描述，計算機程式裡每種類型的資料都應有其正确的語義，如：「是」與「否」這種二進制邏輯的用布爾型；計數時用數值型；說明時用字元串型；實體用對象型；實體集合用清單型。

上面提到了「實體」——能夠互相差別且獨立存在的事物。它的概念比較寬泛，其代表的可以是具體的，也可以是抽象的；可以是自然的，也可以是人工的；可以是實際存在的，也可以是虛拟出來的……「人」是實體，「狗」是實體，「風」是實體，「語言」是實體，「物質」是實體，「精神」也是實體。即便如此，我們在說「實體」時，大多是指那些看得見摸得着的。另外，「實體」是一系列能夠描述其特性的屬性的集合。

在一個應用中，使用者操作所涉及到的資料類型大概有：布爾、整數、浮點數、日期、金額、字元串、長文本、枚舉、對象、清單等等。除了對象和清單算作複雜資料類型，其餘的都是簡單資料類型。在由計算機程式所構築的數字世界裡，每個實體用一個對象來表示，清單為實體集合，實體的屬性則簡單資料類型和複雜資料類型皆可——實體及實體集合統稱為「視圖」，實體的屬性稱為「字段」。

當字段的值為簡單資料類型時是「普通字段」，也可叫作「簡單字段」；值為複雜資料類型時則是「關聯關系字段」，簡稱為「關系字段」，也可叫作「複雜字段」。根據與所關聯的實體之間的關系，關系字段又可被細分為「一對一」、「一對多」、「多對一」和「多對多」這幾種。其中，「一對多」和「多對一」是鏡像關系。

将「實體」根據特征進一步泛化，即可抽象為「模型」，也就是說，一個「模型」是一類「實體」。在讨論交流時，「實體」和「模型」這兩個詞一定程度上可以互相替換，但要注意它們在語義上的差别。若将模型映射為資料庫表，表中的每條記錄即為實體。

總結

本文以解釋從「前端 UI 元件」所拆分出的「前端」、「UI」和「元件」這三個詞所蘊含的概念來普及一些知識，試圖說清楚「前端 UI 元件」到底是什麼，并借此機會為本系列後續的文章圈定範圍——聊聊與基于 web 前端技術所開發的 UI 元件相關的一些事情。