近年來,“設計規(guī)范”逐漸被“設計系統(tǒng)”的概念所重塑,新的設計方法可以幫助產品設計團隊更好地在整體層面上構建解決方案。
“設計規(guī)范”已經存在很長時間了,它在產品甚至公司的品牌識別效果的構建中起著重要作用。今天,作為升級版本,設計系統(tǒng)將這一概念提升到了新的高度。
過去,UI設計人員創(chuàng)建了結構松散的設計文檔,包括顏色方案,字體,按鈕樣式或圖標的樣式定義。這些文檔通常安靜地保存在硬盤驅動器上,只考慮新設計人員加入團隊或外部設計代理需要了解規(guī)范時。
在日常工作中,這些文件可能沒有太大的實用價值。設計人員通常依靠內存來確定是否使用了某些設計模式。從長遠來看,一致性問題將會積累,最終難以清理的情況也很可能。
近年來,“設計規(guī)范”逐漸被“設計系統(tǒng)”或“設計語言”的概念所重塑,新的設計方法可以幫助產品設計團隊更好地站立。在整體層面構建一個程序?;谝惶讎乐斀y(tǒng)一的系統(tǒng)框架,產品性能水平的設計工作可以逐步實現(xiàn)模塊化操作。來自Invision的Brand.ai或Craft等工具在一定程度上滿足了標準化,模塊拖放設計要求,團隊合作過程的一致性得到了提高,視覺設計工作變得更加高效,有時甚至更高效可以跨越傳統(tǒng)的低保真原型制作階段。
本文的目的是討論設計系統(tǒng)的目標,價值和原則,而不涉及具體的施工方法。
在過去的幾年里,我參與了公司的許多設計系統(tǒng)項目,包括初創(chuàng)團隊和具有高度可見性和成熟度的組織。我最近的一個項目是為Qstream創(chuàng)建一個設計系統(tǒng)。
當我第一次加入Qstream團隊時,我意識到有必要盡快建立一個新的實用設計系統(tǒng)。產品設計缺乏一致性,隨著功能復雜性的增加和設計團隊的擴展,問題將越來越激烈。 –通過詳細,完整且易于理解的設計系統(tǒng)控制設計工作,并穩(wěn)定整個設計方向。這件事不能拖延。
在這種背景下,我們開始創(chuàng)建自己的設計系統(tǒng),即QUIK– Qstream用戶界面套件。
第1步:解決不一致問題
同樣,本文并未深入研究創(chuàng)建設計系統(tǒng)的細節(jié),但我將簡要介紹一般過程。
我們要做的第一件事就是徹底調查產品中現(xiàn)有的界面組件。 Brad Frost(“Atomic Design”一書的作者)撰寫了一篇關于如何進行UI庫存的優(yōu)秀指南文章< ;; Interface Inventory",建議閱讀(http://bradfrost.com/blog/post/interface-inventory /)。
這個會議可能很難,你可能需要花費很多時間,而且這個過程很無聊,但這是值得和必要的。通過UI檢查,您可以:
完全了解當前產品中存在不一致之處。
了解在全球范圍內使用某些關鍵要素。
快速掌握產品的信息架構和操作。
向團隊介紹現(xiàn)有問題,并反映出對標準統(tǒng)一設計系統(tǒng)的需求。
我們的平臺UI庫存文檔,現(xiàn)有設計的不一致性一目了然。
第2步:創(chuàng)建元素
我們的設計系統(tǒng)由三部分組成。
品牌:產品品牌識別由許多關鍵的視覺元素組成,包括配色方案,字形,圖標等。
界面元素:包括可全局重用的最小粒度的元素,如按鈕,文本輸入框等。
組件:組件由多個界面元素組成。多個組件協(xié)同工作以形成通用設計模式,例如對話框,列表,卡片等。
我們需要根據(jù)UI清單的結果確定設計系統(tǒng)組件的優(yōu)先級,以查看在產品的全局范圍內最廣泛使用的元素。
在我們開始處理按鈕和文本輸入框等特定元素之前,我們首先要定義樣式和樣式規(guī)則,包括顏色,字形,圖標,間距等。
根據(jù)我們的執(zhí)行順序,設計系統(tǒng)的構造越深,產品所涉及的元件的重量就越低。但無論如何,它們都是系統(tǒng)的一部分;所有元素對于確保設計語言的完整性和一致性是必不可少的。
我們還有一個正在進行插圖設計風格的設計系統(tǒng)項目,本文不會詳細解釋,如果您有興趣,可以到我們的Behance了解更多(https://www.behance.net/gallery/49205497/Illustration - 指南)。
第三步:完美
我們目前處于這個階段。坦率地說,我們可能永遠無法真正完成這個階段。在你接受設計系統(tǒng)的挑戰(zhàn)之前,最好先了解一下–這是一個永無止境的過程。您正在構建的產品更像是產品,而不是定義明確的項目。 &ndash的;隨著產品的發(fā)展,設計系統(tǒng)需要不斷發(fā)展壯大。
您可能需要建立一個團隊來負責維護設計系統(tǒng),或者成為一名全職設計師。嚴格的標準化設計系統(tǒng)可以為產品設計工作帶來不可或缺的核心價值,使工作流程更加集中和清晰,并且可以顯著提高設計模式和產品開發(fā)速度的一致性。
綜合系統(tǒng)
在產品的全球層面創(chuàng)建和維護有效的設計系統(tǒng)只是標準化和系統(tǒng)化的一部分;我們還在為產品建立品牌規(guī)格和設計原則。
我們認為,在產品設計的復雜性達到一定水平之前,堅定地奠定基礎框架非常重要。否則,各種潛在的問題將一直積累,直到無法解決。建立一系列規(guī)范,原則和系統(tǒng)將確保我們在擴展產品和團隊規(guī)模時走上正軌。
我們計劃繼續(xù)創(chuàng)建一套設計規(guī)范,定義QUIK進入實際階段后產品的個性化。我們將建立的綜合系統(tǒng)包括:
品牌指南:用于描述品牌個性和特征的一系列文檔,包括文案音調,顏色匹配樣式和徽標使用限制的定義。
QUIK:設計系統(tǒng),在全球范圍內集成設計概念,方法和界面組件,并在一個地方標準化。
設計原則:幫助我們堅持產品設計方向,專注于我們團隊和客戶的最重要目標,并最大限度地實現(xiàn)兩者的統(tǒng)一。
下一步
我們將繼續(xù)努力在全球范圍內的產品平臺上實現(xiàn)統(tǒng)一的設計標準。面對這一目標,我們還有很長的路要走。產品團隊中的每個人都明白這是一個巨大的挑戰(zhàn),但我們也理解這個問題對于產品的順利開發(fā)的重要性。