深度解析設計系統

深度解析設計系統

你覺得設計系統重要嗎?那目前手裡的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規範?那怎麼避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感?

設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規範、設計模式、設計語言、設計原則有什麼關係?

設計系統

設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在製作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統裡。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。

設計模式

設計模式是一種經常性,可重複使用的解決方案,可用於解決設計問題,我們經常會說解決整個方案我們要運用什麼樣的設計模式。


設計語言

設計語言是把設計作為一種“溝通的方式”,用於在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規範+多場景應用三大要素組成的一套設計應用規範系統。

設計原則

設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用於傳達品牌主張或設計理念,它將指引業務設計執行的方向。


比如Airbnb的設計原則可以簡單歸納為幾點:

設計規範

設計規範對於設計師來說並不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規範不僅有利於設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。

那是不是只要製作一套設計系統,在團隊進行擴散就可以了?那平台的統一性就解決了?


我曾經加入一個設計團隊,看到平颱風格不統一,當時很自豪很堅定的製定了一套平台設計規範,從色彩體系、文字體系、icon體系、botton體係以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平台統一性指日可待,沒想到這個規範就成了我自己的規範,僅僅是我在自嗨。

為什麼已經建立設計規範了,還是沒能解決平台統一的問題?這裡延伸出另一個問題,為什麼其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什麼推不起來?

那要追溯到設計體系的目的是什麼?它的意義何在?

1-建立統一的設計文化體系

2-保證多團隊成員共同參與的項目視覺一致性

3-提升品牌調性

4-節省與研發人員的溝通成本

5-將元素組件化,提升設計師和程序員的工作效率

6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。

7-在用戶層方面,對某產品的體驗一致性得到落實

8-減少設計出錯率

……

整體可以歸納為

1-對內統一,對外區分

2-管理與協作變得方便

3-建立設計文化體系,建立品牌感

4-減少、優化錯誤出現

對內統一,對外區分

規範定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別於同類競品的,比如阿里雲、騰訊雲,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規範。這樣才能在協作上達到對內統一。我們都不希望在阿里雲的網站,各個頁面的設計差異明顯,像跳轉到其他平台。而這些針對用戶層一致性都是非常重要的體驗。

undefined

管理與協作變得方便

for Designer:

多個設計成員協同一個產品,迭代與更改規範都能更快的同步。可以試著想像一下一個幾十人的設計團隊,如果沒有統一設計規範,那網站會變成什麼樣子。

for Developer:

在UI還原中,設計需要經常與前端進行溝通“這裡這裡這樣做,那裡那裡這樣做”,對於每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。

設計規範統一後,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。

建立設計文化體系,突出品牌感

做品牌的時候需要製定一整套VI規範手冊,那平台同樣也需要統一的品牌感。建立統一的文化體係可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。

undefined

你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎?

減少、優化錯誤出現

設計經常碰到設計完後需要修改一個點,然後就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規範後只需要修改組件即可。盡可能的避免錯誤的出現。

設計規範的意義這麼強大,對網站及品牌有至關重要的作用,那為什麼還會出現沒有應用起來的情況呢?

很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規範是不是就失去了變化和新鮮感?那設計還有什麼意義?開發都可以做設計的事情了。”

這裡就要看設計規範理解的深度—設計規範是分層次的平台規範歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本

對無法拆分的底層基礎元素做嚴格規定

底層基礎元素也可以說是全局樣式,比如色彩規定、文字大小、icon線/面、botton體係等一些基礎的元素,給用戶一種統一的視覺形象,在跨界面、跨端、跨系統間有熟悉感,從而潛移默化地進行品牌的滲透。

增強界面設計的靈活性和可維護性

對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的複合組件減少過於局限的限定條件,考慮各種拓展的可能性。組件在製定過程中要考慮多種狀態,多種可能。

設計規範隨著業務的發展或技術的變革終究是會過時的,是需要迭代的。

設計規範是需要迭代的,而不是我只要製作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻

~~希望我每天都有新衣服穿,做夢中~

對設計體系的誤解

設計體系最大的重要性毋庸置疑就是規範節省人力,設計師可以更多的時間去發揮創造性。

誤解1-設計系統限制了設計師的創造力

很多設計師覺得統一了規範,那我的創造性從哪發揮,界面都長的差不多。在設計中,設計目的是解決商業或用戶的問題,並不僅僅是為了有創意而引入新的樣式或交互方式。


有了設計體系,統一了整體品牌風格,不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上,更多的回去關注更全局的設計策略。

誤解2-設計系統只關乎設計,可由設計師獨立完成

它僅僅是設計軟件上可複用的組件,所以可由設計師獨立完成,這種想法是錯誤的,是需要來自不同角色支持和參與的,這裡包括前端、品牌、動態設計、 用戶研究等。

誤解3 -設計系統是一勞永逸的

有時候會想只要完成了規範就大功告成了,其實不然,對待設計規範就像對待產品一樣,是需要維護和改進的,包括兩個方面:一種是對內部使用的開發以及同事,一種是對用戶的,應該定期收集用戶以及同事的反饋,確保及時更新迭代。


誤解4 -設計系統的重要性

1-提高設計開發效率,最顯而易見的好處就是,組件庫的可複用性。

比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。

2-確保設計一致性,為用戶提供連貫一致的用戶體驗,設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。

網站統一的視覺規範、交互體驗,會讓用戶產生一種掌控感。

3-設計系統促進了公司內部的合作和交流,一個成功的設計系統是需要跨功能團隊參與,設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。

那我們要如何去執行呢?

已經了解了規範的目的/意義,那該怎麼去著手呢?

  • 對於設計規範的意義要同步給設計人員,提高認知,這是一件提高效率的規範,規範必須落地。

在製定規範前期,不應該是一個人規定這個規範,設計團隊的成員應積極參與,前期先把規範的基調定好,人人都參與進來了,規範也就能更好的運營,當時我就是一個人定了規範,只是單純把規範發給其他設計人員,他們沒有參與,自然不會使用規範,對裡面的設計元素沒有加深理解。

主導人

這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力,這樣能把紕漏降到最低。

undefined

  • 應用規範裡的界面、交互規範必須得遵循

大家一般說的設計規範是界面的視覺規範,從UI的定義,User Interface—用戶界面,用戶與界面之間的交互關係,可以歸納規範其實可以包含兩大類,一類是視覺規範,一類是交互規範。

視覺規範可以給用戶傳達統一的品牌形象,確保視覺一致性。後期的設計元素須複合規範的原則。

交互規範可以減少用戶的學習成本,讓用戶有歸屬感。交互規範在製定的過程中,需要寫好交互規則與條件,不然後期維護會混亂。像蓋房子一樣,地基都沒打穩的話,整個樓都是偏的。

那在使用規範時,一定要遵循規範裡的要求進行應用,否則會亂套,不僅起不到統一的品牌風格,反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。

設計規範的節點

節點和公司的進度搭邊,看當前的產品是應該先獨立風格還是先統一基礎規範。

1-固定的設計風格規範,比如:google的“扁平”,微軟的“磁貼”,可以全局使用,並且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。後期再進行拓展。這種比較適規模比較大的團隊,定好基調,不會走偏。

2-不斷優化的設計規範,根據公司的節奏,有些產品目前比較迫切的是需要界面統一性、交互統一性。基礎做完以後,進而考慮產品固定風格。這種比較適合小團隊協作。可以隨時調整。

建立規範


·製作原理—利用粒子構成的原理與三維解構

利用粒子構成的原理與三維解構,一個組件被科學的三維解析後由粒子再構成,理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變,高度靈活

·具體過程

建立單個元素——設立簡單組件——構成複雜組件——形成模板——最後組成頁面。

·元素是工具庫的必要部分

並不是每個時刻都能夠直接使用完整的組件,元素是我們工具庫必不可少的部分,它可以更大的方便你修改組件,再造組件以及特殊的排版,方便拖拉拽。

·組件的命名規範化

規範組件命名,方便查找、方便協作。

協作

一鍵導出/同步最新組件到Sketch模板。

標註方面,目前我們團隊使用的是藍湖私有化。

那是不是所有的公司都需要創建設計系統?

一般情況下,公司有不同的產品線,且都需要長期的開發與迭代。

公司中,越來越多的設計師加入,設計風格需要統一。

那建立一套設計體系會面臨什麼挑戰?

設計體系裡麵包含了設計語言、設計規範,需要與前端、品牌、動態設計、 用戶研究等溝通,還是需要迭代優化的,這是非常繁瑣耗時的項目,初期會非常的艱難,當設計師開始做組件時,也是非常耗時的工作,需要考慮不同場景下的使用情況以及設計的延展性,都需要投入大量的設計人力。

聊了這麼多,大家對設計系統有了一定了解,建立好設計系統可以事半功倍,以此提升效率才能提升UED價值。

思考點:

1-對於設計團隊只有一兩個人的時候,是否需要建立設計系統?

2-你是否願意把時間花費在前期建立設計系統,後期更多時間用於創造性地東西?

3-建立設計系統前很枯燥,你會怎麼堅持,怎麼讓設計體系價值更大化?

感謝大家的閱讀。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。