從0到1,搭建一套完整的產品 “設計語言” !

1 評論 3796 瀏覽 14 收藏 18 分鐘

編輯導語:設計語言的搭建有助于內容與信息的傳遞,建立嚴整的設計規范,并推動后續設計效率的提升。而設計語言的搭建可以圍繞企業或產品來進行。本篇文章里,作者總結了如何從零開始搭建一套設計語言的方法,一起來看一下。

一、什么是設計語言?

設計語言是把設計作為一種“溝通的方式”,用于在特定的場景中進行內容與信息的傳遞。我們最常見到的是交互界面規范相關的設計語言:

其實設計語言的內容遠不止于此,作為一種能夠被大眾解讀和認可的“表達”,它通常具備以下特點:

  • 具備嚴謹的設計規范:設計語言是產品設計參考的標準和規范,規定了產品設計的基本原則和基礎框架。
  • 是動態的,不斷升級的:設計語言不是一成不變的,需要根據市場所流行和認可的設計趨勢,進行補充、迭代和完善。
  • 能夠使產品具備統一的特征性:使用設計語言設計出的產品能夠保持較好的統一性,并帶明顯的品牌特征。
  • 能夠提高設計效率:設計語言中的規則和元素可以被當成組件,應用于產品設計的過程中,減少重復性工作。
  • 符合主流用戶群的審美標準:“美” 是很難被定義的,設計語言通常會更傾向于所屬行業和主流用戶群體的審美標準。

很多有一定影響力的公司以及優秀的產品都有自己的設計語言,例如 Matreial Design,就是 Google 為 Andorid 平臺編寫的設計語言:

除了Google 和 Apple 這些國外公司,國內如騰訊和阿里等大廠也都陸續發布了自己的設計語。例如騰訊的 Q 語言,設定了三個基本目標:統一體驗,基因體現,社交向善;并基于對用戶的洞察,制訂了設計原則和應用規范:

除了軟件界面設計,在硬件產品的設計中也有一些公司依靠應用設計語言,突出了品牌特性。比如:你肯定不會輕易將保時捷品牌的車認錯,哪怕是擋住了車前方的標志。

國內很多公司也不乏優秀案例:小米生態鏈中的智能家居產品在設計時就很重視設計語言,即使是面對不同行業、不同品類的產品也依舊可以做到設計風格的統一:

二、如何構建設計語言?

設計語言可以針對一個企業或一個產品進行構建。構建設計語言并不是一個簡單的工作,需要設計師同時具備理性思維和感性表達,結合品牌特性、流行趨勢,以及對市場和用戶的洞察等多個方面,進行系統的規劃。

我們可以從以下幾個方面入手。

1. 企業 / 產品特征與背景

你需要對將要使用你的設計語言的企業 / 產品足夠了解,并依此奠定設計語言的核心基調,你可以思考(但不限于)以下幾點:

  • 行業背景:了解行業大背景、整體風格,比如美妝行業和科技行業的設計調性就大不相同。
  • 價值觀:設計語言的核心精髓來源于企業 / 產品的價值觀,并與之保持一致。
  • 品牌特性:應用設計語言的一個重要意義就是突出企業 / 產品的品牌特性,設計語言中的元素需要與品牌形象相呼應,是品牌意向的提煉與升級。
  • 用戶群體:通過對企業 / 產品的用戶群進行分析,找出群體特點和喜好,更好的為產品設計打基礎。
  • 流行趨勢:觀察和預判設計的流行趨勢,把握設計潮流發展的大方向,使設計語言新穎現代,符合或超出用戶預期。

2. 設計價值觀

每一套設計語言都有其價值觀,為設計師提供評價設計好壞的標準,并為解決具體設計問題指明方向。

設計語言的價值觀來源于企業 / 產品特征,并包含一定的設計哲思,是設計語言的核心精髓。以下給出幾個例子:

設計價值觀看上去很抽象,但卻是整個設計語言的靈魂核心,也是企業或產品文化的直接體現。

3. 設計原則

設計原則是由設計價值觀衍生出的要遵循的設計準則,將設計價值觀進一步細化和落地。設計原則包含一定的設計學基本原理,是設計語言的基礎架構。以下給出幾個例子:

設計原則根據企業 / 產品的屬性和功能進行制定,并在此基礎上制訂更詳細的設計范式

4. 設計范式

設計范式是由設計價值觀和設計原則推導出來的、針對具體問題的一般解決方案。

對于互聯網產品來說,設計范式通常包括整體設計布局、界面設計風格、設計組件、業務模塊 / 場景、動效規則等一系列內容,這也是整個設計語言的主要構成部分。設計范式需要盡可能地考慮全面、詳細,這部分的內容會非常繁雜,必須做到條理清晰,邏輯嚴謹。

騰訊的 Q 語言,詳細地規范了色彩、圖標、交互行為、文案等內容,每一部分的內容都有詳細的文檔規范和應用說明。

為了更好的應對用戶復雜多變的場景需求,讓團隊能以更小的成本,對不同場景和版本的產品進行有規律性的差異化設計,Q 語言也設計了一套設計控件。

不僅僅是騰訊的 Q 語言,阿里巴巴的 Ant Design、Google 的 Material Design、微軟的 Fluent Design 都有著自己一套完整的設計范式。設計范式需要具備獨特性,使得每套設計語言之間形成差別。推薦幾個設計語言的案例,你可以感受下不同產品設計語言的差別:

https://ant-design.gitee.io/index-cn

https://material.io

https://www.microsoft.com/design/fluent/#/

作為設計語言的主要構成部分,設計范式該如何整理和輸出呢?我們可以分軟件產品硬件產品兩個方面來看。

三、軟件產品

軟件是一種邏輯產品,如果你設計的產品或者供職的公司是以軟件產品為主,設計范式通??梢詮模ú幌抻冢┮韵聝热葸M行構建和思考。

1. 布局

布局是體系化視覺設計的起點,產品界面的布局空間要基于動態、體系化的角度出發展開。

單位:規定好設計時遇到的分辨率、像素密度、繪圖單位等,并做好切圖和畫布設置等相關規則。

Fusion Design 設計語言:單位規范示例

適配:做好頁面的適配規則,規定斷點、拉伸規則、設備兼容規則等。

Material Design 設計語言:響應式柵格布局示例

間距:制定基線網格、間距設置方法、引導線等相關規范,使元素的布局有依據。

Material Design 設計語言:間距規范示例

2. 樣式

樣式是產品通用的基本規則,包括顏色、字體、圖標、陰影、模式、動效、音效等方面,從產品功能出發進行規范制定。

顏色:規定整個界面的全局顏色系統,包括品牌色、中性色(中立色)、功能色三部分色彩,以及衍生出的?UI 調色板。

Material Design 設計語言:間距規范示例

字體:字體通常從主字體、行寬與行高、字重、字體顏色等幾個方面進行系統的規范。

Ant Design 設計語言:字體行高規范示例

圖標:制定圖標的設計原則、設計規格、設計風格等方面,通過提煉具有品牌辨識度的視覺元素,傳達品牌特性。

圖標設計規格示例

陰影:陰影能夠體現界面上元素的層次,元素所處的層級不同,陰影屬性也有所不同。

對于陰影,Material Design 有深入的研究,其扁平化風格的設計語言很注重陰影的應用:

Material Design 設計語言:陰影規范示例

模式:近兩年非常流行的暗黑模式,如果在你的界面中有涉及到,也需要做好深色色彩應用的相應規范。

Material Design 設計語言:陰影規范示例

音效:對音效進行統一的規范,統一聲音類型應用方式。音效會從聽覺的角度豐富和提升用戶的使用體驗。

Material Design 設計語言:音效的設計原則示例

動效:動效可以增強 UI 的表現力,你可以選擇符合產品場景需求的動畫效果,對不同元素運動的時間、速度、位置、軌跡等方面進行規則制定。

動效的設計規范示例

3. 組件

組件可以把視覺表達模塊化、產品需求場景化,每個組件通過標準的組合方式構建設計方案,從而提升設計效率,并保證產品在各個場景中的一致性。

在搭建組件的過程中,要始終遵循設計原則和規范,既要兼顧全局,又要考慮細節。

Fusion Design 組件庫搭建

四、硬件產品

硬件產品的設計范式與軟件產品不同,你可以從以下(不限于)這些角度進行思考與設計范式的搭建。

1. 整體風格

產品的整體風格是一個較為抽象的概念。如果你在設計硬件產品時,遵守設計語言的價值觀和設計原則,整體的產品風格就已經基本形成了。整體風格是使用一個或幾個詞匯就可以概括出來的,使用戶提起品牌 / 產品名稱就會想到相應的設計理念

提起無印良品,你可能會立即想到:天然、簡潔、素雅等詞匯。無印良品以一種趨近于“無”的形式進行產品設計,是禪宗的“空寂”意識的反映,也是產品的設計價值觀。

2. CMF

CMF 是每一件硬件產品在設計和生產時都必須要考慮的問題。

  • 顏色 / Color:思考產品的主色調、點綴色。一款硬件產品的配色通常不會超過4種顏色。系列產品在配色上需保持相對統一。?
  • 材質?/ Material:產品的材料和質感的選擇也會傳遞出產品獨特的氣質。
  • 成型?/ Finishing:產品成型方式和加工工藝會影響產品的外觀以及產品的使用感受。

3. 細節元素

硬件產品品類繁雜,細節元素遠多于軟件產品,具體產品要具體分析和總結。這里舉幾個例子。

邊角:產品的邊角會展示出產品的性格,直線和曲線會體現不同的特點和風格。

接縫:產品的接縫是設計細節的體現,不同的接縫處理會產生細微的差別感受。

按鈕:按鈕也是展現產品設計的細節之處,不同造型的按鈕讓產品具有不同的個性。

五、設計語言維護與更新

設計語言并不是一成不變的,需要不斷的維護與更新,是一個動態進化的過程。這種進化,包括三個方面的內容:

  1. 設計過程中的靈活應用:設計范式中的組件庫可以優化設計工作方法,提升設計效率。靈活應用組件,能夠最大限度地保證產品的一致性。
  2. 產品功能的更新與迭代:隨著產品功能的更新和新產品的上市,設計范式和組件庫都會不斷被添加和完善。
  3. 設計趨勢的發展與變化:設計語言跟隨設計流行趨勢做出調整,符合當下流行的審美觀,做補充和優化。

設計語言不是一蹴而就的,在維護和升級的過程中要做好版本的記錄,把整個設計語言作為一個完整的項目進行管理,更有助于設計系統的良性生長與發展。

 

作者:元堯,螞蟻集團設計師。

本文由 @Ant Design 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 組件的作用還有:設計理論的實例化。支持Ant Design

    回復