什么是設(shè)計(jì)系統(tǒng) - Design System
時(shí)間:2023-09-13 00:48:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-09-13 00:48:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)
什么是設(shè)計(jì)系統(tǒng) - Design System:
因?yàn)檠芯?Design System,無(wú)意中發(fā)現(xiàn)了這本「Design Systems」。本來(lái)只是期望著看看別人的思路和想法,粗略的看了幾個(gè)章節(jié)才發(fā)現(xiàn)自己錯(cuò)了。這本似乎并不太火的書可以說(shuō)是目前市面上對(duì)整個(gè) Design System、Language、Guidline 等概念思考得最為深入和全面的。
前段時(shí)間會(huì)員微信群里大家討論起了這本書,大家似乎對(duì)這本書都非常感興趣,但對(duì)這 200 多頁(yè)的全英文又擔(dān)心難以堅(jiān)持。既然這是一本非常值得讀的設(shè)計(jì)書,而大家又這么感興趣,我決定花一段時(shí)間的周刊來(lái)和大家基于這本書聊 Design System。希望能給大家在閱讀此書上提供一些幫助,也讓自己有機(jī)會(huì)能夠更深入的去進(jìn)行學(xué)習(xí)研究。
一點(diǎn)聲明:本系列周刊并非「Design Systems」的翻譯,而是基于本書結(jié)構(gòu)框架的讀書筆記和經(jīng)驗(yàn)總結(jié)。依然推薦大家閱讀原書,周刊內(nèi)容可以作為理解輔助。書籍購(gòu)買鏈接點(diǎn)這里>>
十年前互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)大多沒有 System 的概念,純憑手工一頁(yè)頁(yè)的去做,整體的效率和一致性都難以保障。直到 Yahoo DPL(Design Pattern Library)的出現(xiàn),大家才慢慢開始更多的開始關(guān)注到這個(gè)問題。
業(yè)務(wù)體量大小同樣會(huì)影響到團(tuán)隊(duì)對(duì)于 System 投入力度的差異,也許大家沒有接觸到 Design System,但 Design Pattern、Design Component、Design Language、Design Guideline 等等這類詞相信大家一定不會(huì)陌生。即使對(duì)于這些概念并不太清晰,但或多或少都會(huì)在設(shè)計(jì)的過程中受到一些影響。
如果我們用 Google Trends 搜索一下這些關(guān)鍵詞,你會(huì)發(fā)現(xiàn)「Design System」的關(guān)注熱度是最高的。大家都想搞清楚 Design System 是怎么回事,希望用它來(lái)提升自己產(chǎn)品的整體質(zhì)量、效率。
對(duì)于 Design System 不同的團(tuán)隊(duì)依據(jù)自己的體量和業(yè)務(wù)述求都有著自己的定義,這也是為什么我們會(huì)發(fā)現(xiàn)各 System 所包含的內(nèi)容有所差異。在我的理解來(lái)看既然叫做 System 它就應(yīng)該是更為完整、體系化的,所以我會(huì)將它定義為解決數(shù)字產(chǎn)品生產(chǎn)的整體解決方案,包含設(shè)計(jì)、內(nèi)容、工程等多個(gè)方面。
Google 對(duì)于 Material Design 的定義是
「Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.」,正如你所看到它們官網(wǎng)所展示的,這是一個(gè)想法復(fù)雜的系統(tǒng)工程、一個(gè)完整的世界觀。當(dāng)然 Material Design 因?yàn)樗南到y(tǒng)特殊性,和我們所需要做的 Design System 還不一樣,我們會(huì)在后面詳細(xì)說(shuō)明。
想要了解、創(chuàng)建自己的 Design System,我們還需要先回過頭弄清楚前面提及的那些概念它們之間的關(guān)系、差異。Design System 專題的第一期,我們將先從這些概念開始。
依照自己的理解,我將這些概念整理成了以下這張圖。希望先給大家一個(gè)概念上的全貌,然后我們?cè)賮?lái)逐一分解。
Design Principles(設(shè)計(jì)原則)
所有的 System 的出現(xiàn)都是為了解決一些列的問題,它們可能是一種業(yè)務(wù)形態(tài)(比如在線購(gòu)物),也可能是一種操作行為形態(tài)(比如數(shù)據(jù)管理)。它們背后有著共通的問題和述求,這也就為 Design System 提出了明確的要求。
所以我們可以將 Principles 理解為一系列的規(guī)則,它們是我們?cè)O(shè)計(jì)開發(fā)產(chǎn)品的核心思想,構(gòu)建一套有效的 Design System 的起點(diǎn)。用于解決用戶體驗(yàn)中的問題,引導(dǎo)業(yè)務(wù)、開發(fā)以及設(shè)計(jì)向既定(正確)的方向前進(jìn)。
每一個(gè)公司(團(tuán)隊(duì)),由于其業(yè)務(wù)的特性將可能產(chǎn)出不同的 Principles。以 IBM 的 Carbon Design 為例,他們的 Design Principles 是:
- Be essential (必要的)
- Be inclusive(包容的)
- Be consistent(一致的)
- Be humanistic(人文的)
- Be delightful(愉快的)
這是 IBM 對(duì)其云產(chǎn)品在整體產(chǎn)品體驗(yàn)上的定義與要求,也是它們想要傳遞給用戶的感受。作為設(shè)計(jì)的基本原則,它將嵌入到其產(chǎn)品、設(shè)計(jì)、開發(fā)、文案等一系列場(chǎng)景中,成為產(chǎn)品的“靈魂”。
我們可以再來(lái)看看多次提及的 Lightning Design System,它服務(wù)于 Salesforce 的 SaaS 服務(wù)。對(duì)于他們的產(chǎn)品,Lightning 也提出了自己的 Design Principles:
- Clarity (清晰的)
- EFFICIENCY(高效的)
- Consistency(一致的)
- Beauty(優(yōu)美的)
很明顯,作為一款 SaaS 平臺(tái)類產(chǎn)品,效率和一致性是他們產(chǎn)品核心競(jìng)爭(zhēng)力之一。為了確保平臺(tái)及第三方 ISV 能夠?yàn)榭蛻籼峁└咝А⒏哔|(zhì)的服務(wù),他們將“清晰、高效、一致性”作為了產(chǎn)品最核心的 Principles。
對(duì)于互聯(lián)網(wǎng)產(chǎn)品“清晰”“一致”一類的關(guān)鍵詞幾乎都會(huì)提到,這也是用戶體驗(yàn)設(shè)計(jì)最為根本的目標(biāo)之一。但隨著市場(chǎng)對(duì)行業(yè)深度的述求不斷加強(qiáng),大家對(duì)行業(yè)特性的述求也越來(lái)越明顯,甚至?xí)袂懊娴膬蓚€(gè)案例一樣寫入 Design Principles,成為產(chǎn)品設(shè)計(jì)的理念基石。當(dāng)然,談 Design System 我們無(wú)法不談 Material Design 。相比較而言它的 Principles 更加的抽象,除了由于它自有的獨(dú)特設(shè)計(jì)世界觀之外,很重要一點(diǎn)在于它是一套更為底層的“服務(wù)”。
相較之下它的“業(yè)務(wù)”更為廣泛,基于 Material Design 你可以開發(fā)一個(gè)電商應(yīng)用,也可以是一個(gè)社交、理財(cái)產(chǎn)品。因此它的 Principles 也需要更有“深度”。
以上是本期會(huì)員周刊的節(jié)選內(nèi)容,接下來(lái)我們將繼續(xù)分別講解 Design Component & Pattern、Language、Develop Library、Guideline,以及它們之間的差異、與 Design System 如何協(xié)作,成為產(chǎn)品進(jìn)步、發(fā)展的超級(jí)發(fā)動(dòng)機(jī)。
Design System 是 PinDesign 周刊的一個(gè)新系列,基于「Design Systems」這本書結(jié)構(gòu)框架的讀書筆記和經(jīng)驗(yàn)總結(jié)。希望將自己的感受和經(jīng)驗(yàn)分享給大家,輔助大家的閱讀。
加入 PinDesign 會(huì)員,獲取本期主題「
什么是 Design System」的全文內(nèi)容及前兩期周刊的贈(zèng)送。
點(diǎn)擊領(lǐng)取 PinDesign 會(huì)員計(jì)劃 50 元優(yōu)惠券
Design System 系列已更新:關(guān)注公眾號(hào)「設(shè)計(jì)有得聊」,了解更多設(shè)計(jì)系統(tǒng)相關(guān)資訊文章發(fā)布于:2017-11-20
關(guān)鍵詞:系統(tǒng),設(shè)計(jì)