建站
咨詢
售后
建站咨詢
新聞中心
設(shè)計(jì)組件作為設(shè)計(jì)系統(tǒng)里的組成部分，可以說是構(gòu)成這個(gè)系統(tǒng)最基礎(chǔ)也是最實(shí)用的部分了。它的出現(xiàn)比“設(shè)計(jì)系統(tǒng)”這個(gè)概念來得早，現(xiàn)在我們常說的積累沉淀、可復(fù)用、避免重復(fù)造輪子、提高效率等好處，大多是來源于它。
創(chuàng)新互聯(lián)建站是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。
早期的時(shí)候，組件拆分為兩個(gè)獨(dú)立的概念，一個(gè)以樣式為主，將常用的界面元素提煉出來，根據(jù)提煉的范圍包括樣式、形狀、狀態(tài)甚至交互，受眾主要為 UI 設(shè)計(jì)師，主要是為了提高設(shè)計(jì)師畫圖的效率。另外一個(gè)以邏輯為主，將常用的功能定義，交互規(guī)則和相關(guān)代碼等提煉出來，受眾主要為研發(fā)工程師(也輻射到交互設(shè)計(jì)師和產(chǎn)品經(jīng)理)，主要是為了提高研發(fā)碼代碼的效率。后來，一方面因?yàn)樵O(shè)計(jì)和研發(fā)協(xié)作性的加強(qiáng)，另一方面，可能是人們發(fā)現(xiàn)兩個(gè)庫的目錄長得差不多，現(xiàn)在很多設(shè)計(jì)系統(tǒng)開始逐漸統(tǒng)一為一個(gè)概念。
模式和組件 ?Nathan Curtis
但這兩個(gè)概念在整個(gè)行業(yè)并沒有完全統(tǒng)一，加上設(shè)計(jì)圈也開始用組件(component)這個(gè)概念就更有點(diǎn)亂了，最初的 component 是由研發(fā)牽頭的，介紹里可是主要講代碼的。而現(xiàn)在在一致性的驅(qū)動(dòng)下，可能會(huì)出現(xiàn)概念名詞的混用，同一個(gè)名詞，這個(gè)設(shè)計(jì)系統(tǒng)里可能指一個(gè)概念，在另外一個(gè)設(shè)計(jì)系統(tǒng)里可能又指向了另外一個(gè)概念。在這篇文章里，我以“設(shè)計(jì)組件”來代表這兩個(gè)概念。(即用設(shè)計(jì)組件來代表我上一篇文的組件和模式兩個(gè)名詞。)
五個(gè)大廠 web 端組件
1. Ant design 組件
網(wǎng)址： https://ant-design.gitee.io/components/overview-cn/
螞蟻集團(tuán)出品，分 7 個(gè)大類提供了 61 個(gè)組件，技術(shù)和設(shè)計(jì)統(tǒng)一，每個(gè)組件上面是設(shè)計(jì)的介紹，下面就對應(yīng) API，而且可以支持 VUE 和 React 兩種技術(shù)棧。提供的 UI kit 也和網(wǎng)站的目錄對應(yīng)的非常好。我自己帶的設(shè)計(jì)組在做 web 端的時(shí)候也選用了 Ant design 為基礎(chǔ)。
2. Element design 組件
網(wǎng)址： https://element.eleme.cn/#/zh-CN/component/installation
餓了么出品，也和技術(shù)做了統(tǒng)一，支持的是 react 技術(shù)棧;和 Ant design 一樣也對所有組件先進(jìn)行了分類，分為六個(gè)大類接近 70 個(gè)組件，不過在六大類中有一個(gè)基礎(chǔ)分類，里面包含了色彩、icon、字體等，按照我上篇文里的分類，算風(fēng)格和規(guī)范了。同為阿里旗下的組件，個(gè)人比較喜歡 Ant design，單從分類來說更具參考性一些。(具體分類參見文末表格)
3. Shopify Polaris 組件
網(wǎng)址： https://polaris.shopify.com/components/get-started
加拿大一家很有名的跨國 Saas 模式電商服務(wù)公司出品的，將組件分為四個(gè)大類提供 24 個(gè)組件，技術(shù)和設(shè)計(jì)的統(tǒng)一性也做的很好，技術(shù)棧支持 React，css only。當(dāng)前設(shè)計(jì)資源僅提供 figma 格式，figma 上有該設(shè)計(jì)團(tuán)隊(duì)專門提供資源的網(wǎng)址： https://www.figma.com/@shopify
4. Aliteambition Clarity design 組件
網(wǎng)址： https://design.teambition.com/
將組件分為了四個(gè)大類，基礎(chǔ)、區(qū)塊、業(yè)務(wù)，還有個(gè)比較特殊的頁面模板類別。UI 資源里基礎(chǔ)和業(yè)務(wù)類組件就有 49 個(gè)。和研發(fā)的統(tǒng)一性也做的很好，每個(gè)組件的介紹都包含設(shè)計(jì)側(cè)和研發(fā)側(cè) API 的介紹，支持 React 技術(shù)棧。
5. IBM Cartoon design 組件
網(wǎng)址： https://www.ibm.com/design/language/
比較老牌的經(jīng)典設(shè)計(jì)系統(tǒng)，一共 35 個(gè)設(shè)計(jì)組件沒有像前面的設(shè)計(jì)一樣再分大類。每個(gè)組件會(huì)分類介紹它的用法、樣式、代碼和可用性，資源提供 sketch/XD/Axure 三種格式。
微軟公司
1. MR design 組件
網(wǎng)址： https://docs.microsoft.com/zh-cn/windows/mixed-reality/discover/mixed-reality
figma 資源網(wǎng)址： https://www.figma.com/file/ltLag9SxjUIyLQFsp7NNE7/Figma-Toolkit-for-MRTK-%2F-HoloLens%2C-Windows-Mixed-Reality?node-id=116%3A4
針對微軟旗下的虛擬混合眼鏡 Hololens 的設(shè)計(jì)系統(tǒng)，技術(shù)?；?Unity。
網(wǎng)頁展示上秉承了整個(gè)公司的產(chǎn)品線，沒有單獨(dú)啟一個(gè)網(wǎng)站，這點(diǎn)還是蠻佩服微軟的，畢竟這么多業(yè)務(wù)。
網(wǎng)站目錄里沒有統(tǒng)一設(shè)計(jì)組件概念，取而代之的是交互模式和 UX 元素中的控件和行為。但當(dāng)前提供的 figma 格式資源，里面是有用組件這個(gè)概念的，和頁面目錄并沒有一一對應(yīng)。我這里以它提供的 figma 文件來算，分為九個(gè)類別 14 個(gè)組件，包括具有 MR 特色的比如 Hand Gestures(目錄對應(yīng) Hand coach)和 Bounding Box(目錄對應(yīng) Bounding Box and App bars)。從數(shù)量上來看應(yīng)該是我這批捋的里最少的，但因?yàn)?MR 虛實(shí)結(jié)合的特性，很多效果不是單純的 UI 能提供，而是二維 UI、三維模型、光效和特效、算法，界面研發(fā)共同的作用。
2. Fluent design 組件
網(wǎng)址： https://docs.microsoft.com/zh-cn/windows/apps/design/
微軟公司最有名的設(shè)計(jì)系統(tǒng)和它最讓人熟知的產(chǎn)品同源，作用對象主要為微軟系統(tǒng)的桌面應(yīng)用(UWP)，并以此為基礎(chǔ)涵蓋多個(gè)終端，分為 12 類共計(jì) 56 個(gè)設(shè)計(jì)組件。和研發(fā)的統(tǒng)一性也做的比較好，每一個(gè)組件頁面都提供對應(yīng)的開發(fā)文檔。另外，和 Hololens 的 MR 設(shè)計(jì)組件一樣，當(dāng)前 UIkit 也只提供 figma 格式資源。
谷歌公司的 Material design
網(wǎng)址： https://material.io/components
相較于微軟公司，基于 Anroid 系統(tǒng)擴(kuò)展到其他終端的設(shè)計(jì)語言對后來的終端進(jìn)行了更好的兼容，一共 30 個(gè)組件也沒有再分類，技術(shù)和設(shè)計(jì)端也很好的統(tǒng)一在了一起，在每個(gè)組件的介紹頁面既有設(shè)計(jì)側(cè)的介紹也有給研發(fā)工程師看的內(nèi)容。
在這 30 個(gè)組件里，有 7 個(gè)組件不是源于最初的 Android 移動(dòng)端，而是基于終端特性新建的，這 7 個(gè)組件是 Backdrop/Banners/Data tables/image lists/Lists/Sheets:side/Tooltips。
設(shè)計(jì)資源提供了 XD、figma 和 Sketch 三種文件格式。
蘋果公司的 Human Interface Guidlines
網(wǎng)址： https://developer.apple.com/design/human-interface-guidelines/
最早以設(shè)計(jì)出名的蘋果公司的設(shè)計(jì)系統(tǒng)，它沒有像隨之而起的谷歌 Material design、微軟 Fluent design 等給自己取了一個(gè)好聽的名字，就還是我最初知道它的那個(gè)標(biāo)題：Human Interface Guidlines。
人機(jī)界面指導(dǎo)方針。看看這名字，一股指點(diǎn)江山的豪邁鋪面而來!這格局，這氣勢，比不得比不得!(抱歉，最近二次元看得比較多)
不過，從那臺革新了手機(jī)行業(yè)的第一代 iPhone 開始，它的確劃開了一個(gè)時(shí)代，沒有只說不做。
現(xiàn)在，蘋果的 OS 組件已經(jīng)隨著蘋果產(chǎn)品線的擴(kuò)大從最初的 ios 擴(kuò)展到了 iOS、MacOS、WatchOS、tvOS 四大終端，主要為眾多在這些 OS 上研發(fā)應(yīng)用的開發(fā)者(包括設(shè)計(jì)師)服務(wù)。設(shè)計(jì)和研發(fā)的統(tǒng)一性也做的不錯(cuò)，但設(shè)計(jì)下的組件介紹頁面并不和開發(fā)語言混合，而是以“For developer guidance“開頭，指導(dǎo)鏈接到另外的頁面。和谷歌在組件下分終端不一樣，蘋果的整個(gè) OS 系統(tǒng)雖然秉承了一致性，但每個(gè)終端都對應(yīng)單獨(dú)的一套設(shè)計(jì)系統(tǒng)，并沒有“組件”這個(gè)概念。設(shè)計(jì)資源方面，在各個(gè)公司中少有的包含了 PS 格式的資源，OS13 還支持了 Keynote 格式。
1. iOS
蘋果設(shè)計(jì)系統(tǒng)的源起之處，對應(yīng)手機(jī)和 pad 端。
目錄里對應(yīng)設(shè)計(jì)組件的類別有四個(gè)分類(Bars、Views、Controls、Extensions)共計(jì) 38 個(gè)組件。另外還有應(yīng)用架構(gòu)、用戶交互、系統(tǒng)能力三個(gè)比較偏向交互邏輯和規(guī)則的介紹。不過，雖然 OS 系統(tǒng)的設(shè)計(jì)在其網(wǎng)站上沒有用組件這個(gè)詞，但它們的 Sketch 文件里倒是依然使用了組件(conponents)。
2. MacOS
目錄里將對應(yīng)設(shè)計(jì)組件分成 Windows and Views、Menu、Buttons、Fields and Labels、Selector、indicators、Touch Bar 和 Extensions 八個(gè)分類，共計(jì) 56 個(gè)組件。
好玩的是，MacOS 里還把它不建議使用的組件也放在了目錄內(nèi)(我這里未計(jì)入組件數(shù) 56 內(nèi))，比如在窗口和視圖分類里，它把自己不建議使用的 Drawers 和 Placards 也列了進(jìn)去，并列出了推薦使用的其他組件。果然是放眼人機(jī)界面指導(dǎo)方針，而不是局限在自己的 OS 設(shè)計(jì)系統(tǒng)內(nèi)。
2. WatchOS
目錄里設(shè)計(jì)組件這個(gè)概念被拆對應(yīng) Interaction 和 Element 兩大類，下面共計(jì) 22 個(gè)組件。和微軟的 MR design 一樣，由于終端的特殊性，交互分類下可以看到 Haptics 觸覺這種在其他設(shè)計(jì)組件里難得一見的目錄，也可以在 Element 里看到比如 Activity Rings 這種比較有意思的組件。
3. tvOS
網(wǎng)站目錄上和 watchOS 一樣使用的是 Element 概念，下面一共 13 個(gè)組件。
總的來說，可以看到在近幾年新出的，終端比較單一的設(shè)計(jì)組件里兩個(gè)概念統(tǒng)一的趨勢表現(xiàn)明顯，但組件的概念隨著產(chǎn)品和業(yè)務(wù)的擴(kuò)展而復(fù)雜化后，這兩個(gè)概念就又會(huì)呈現(xiàn)出還未完全統(tǒng)一時(shí)的分離狀態(tài)，這在早幾年就開始建設(shè)設(shè)計(jì)系統(tǒng)并影響到整個(gè)行業(yè)的谷歌、蘋果和微軟產(chǎn)品的組件設(shè)計(jì)中都可見端倪。
隨著設(shè)計(jì)工程化和研發(fā)與設(shè)計(jì)協(xié)作性的加強(qiáng)，我認(rèn)為整個(gè)行業(yè)中，這兩個(gè)概念必將會(huì)繼續(xù)合并統(tǒng)一，但落到每一個(gè)具體的設(shè)計(jì)系統(tǒng)上，設(shè)計(jì)組件是否需要設(shè)計(jì)研發(fā)統(tǒng)一，統(tǒng)一到什么程度，還是要看設(shè)計(jì)組件存在的具體環(huán)境和需求的。畢竟，回歸本源，組件這個(gè)東西的存在，和設(shè)計(jì)系統(tǒng)一樣，都是為了提升效率才出現(xiàn)的。
最后，附一張這幾個(gè)設(shè)計(jì)組件的對比表格：
當(dāng)前名稱：有哪些組件值得學(xué)習(xí)？我梳理了八個(gè)大廠的設(shè)計(jì)組件！
轉(zhuǎn)載源于：http://www.5511xx.com/article/dhcehpp.html
