設計體系的目標、價值及構(gòu)成原理

Darcy
1 評論 6399 瀏覽 27 收藏 10 分鐘
B端产品经理要负责对目标行业和市场进行深入的分析和调研,了解客户的需求、痛点、期望和行为,找到产品的价值主张 🔗

近年來,“設計規(guī)范”逐漸被“設計體系”的概念重塑,與之俱來的新設計方法可以幫助產(chǎn)品設計團隊更好的站在整體層面構(gòu)建方案。

“設計規(guī)范”這一概念早已行之有年,它對于一個產(chǎn)品甚至一家公司的品牌識別效應的構(gòu)筑起著重要的作用。如今,作為其升級版本,“設計體系”(Design System)又將這一概念提升到了新的高度。

過去,UI設計師們會創(chuàng)建一些結(jié)構(gòu)松散的設計說明文檔,其中包括配色、字體、按鈕樣式或是圖標一類的風格定義。這些文檔通常會被安靜地保存在硬盤里,僅在新設計師加入團隊或外部設計代理商需要了解相關規(guī)范時才會被想到。

在日常工作中,這些文檔可能沒有太多的實用價值,設計師們在很多時候僅會憑記憶來判斷某些設計模式是否被使用過。長此以往,一致性方面的問題便會積累起來,最終導致難以收拾的狀況也是十有八九。

近年來,“設計規(guī)范”逐漸被“設計體系”或“設計語言”(Design Language)的概念重塑,與之俱來的新設計方法可以幫助產(chǎn)品設計團隊更好地站在整體層面構(gòu)建方案?;谝惶准軜?gòu)嚴謹、規(guī)則統(tǒng)一的體系框架,產(chǎn)品表現(xiàn)層面的設計工作可以逐漸實現(xiàn)模塊化運作。諸如Brand.ai或是來自Invision的Craft等工具已經(jīng)在一定程度上滿足了標準化的、模塊拖放式的設計需求,團隊協(xié)作過程中的統(tǒng)一性得到提升,視覺設計工作變得更加高效,有時甚至可以跨過傳統(tǒng)的低保真原型設計階段。

本文旨在討論設計體系的目標、價值及構(gòu)成原理,而不會深入到具體的構(gòu)建方法當中。

在過去的幾年中,我參與了很多公司的設計體系項目,其中既有初創(chuàng)型團隊,同時也包括了知名度和成熟度都相當高的組織。我最近的一個項目就是為Qstream打造設計體系。

我剛剛加入Qstream團隊時就意識到盡快打造一套新型、實用的設計體系是非常必要的一件事。產(chǎn)品設計缺乏一致性,而問題還會隨著功能復雜度的提升以及設計團隊規(guī)模的擴大而愈演愈烈 – 通過詳實、完備、易懂的設計體系對設計工作進行把控,從整體上穩(wěn)定設計航向,這件事刻不容緩。

在這樣的背景下,我們開始創(chuàng)建自己的設計體系,即QUIK – Qstream User Interface Kit。

第一步:解決不一致的問題

再次說明,本文不會就創(chuàng)建設計體系的具體方法進行深入探討,不過我會對大致的流程進行簡要說明。

我們做的第一件事就是對產(chǎn)品當中現(xiàn)有的界面組件進行徹底的清查。Brad Frost(“Atomic Design”一書作者)曾就如何進行UI清查寫過一篇出色的指導文章“Interface Inventory”,建議閱讀(http://bradfrost.com/blog/post/interface-inventory/)。

這個環(huán)節(jié)會很艱難,你可能需要花費大量的時間,而且過程很枯燥,但卻是值得和必要的。通過UI清查,你可以:

  • 充分了解當前產(chǎn)品當中哪些地方存在不一致性的問題。
  • 站在全局層面理解一些關鍵元素的使用方式。
  • 快速掌握產(chǎn)品的信息架構(gòu)與運作方式。
  • 向團隊集中展示現(xiàn)有問題,進而體現(xiàn)一套標準、統(tǒng)一的設計體系的必要性。

我們的平臺UI清查文檔,現(xiàn)有設計當中的不一致性問題一目了然。

第二步:創(chuàng)建元素

我們的設計體系由三個部分組成。

  1. 品牌:產(chǎn)品的品牌識別由一些關鍵的視覺要素構(gòu)成,包括配色、字形、圖標等等。
  2. 界面元素:包括那些最小顆粒度的、在全局范圍內(nèi)可復用的元素,例如按鈕、文本輸入框等等。
  3. 組件:組件由若干界面元素構(gòu)成。多個組件協(xié)同配合,形成常見的設計模式,例如對話框、列表、卡片等等。

我們需要根據(jù)UI清查的結(jié)果對設計體系的組成元素進行優(yōu)先級判定,看看哪些元素在產(chǎn)品全局范圍內(nèi)被使用的最為廣泛,以此為序逐一梳理。

在著手處理諸如按鈕、文本輸入框等具體元素之前,我們會首先對風格與樣式規(guī)則進行基礎性的定義,包括配色、字形、圖標、間距等等。

依照我們的執(zhí)行順序,設計體系的建設工作越深入,所涉及到的元素在產(chǎn)品當中的權(quán)重越低。不過無論怎樣,它們都是體系的一部分;所有元素無一或缺才能確保設計語言的完整和一致。

我們還有一個針對插畫設計風格的設計體系項目正在進行中,本文暫不做詳解,如果你有興趣,可以到我們的Behance了解更多(https://www.behance.net/gallery/49205497/Illustration-Guidelines)。

第三步:完善

我們目前正進行到這一階段。坦誠地講,我們可能永遠也無法真正走完這個階段。在你接受設計體系的挑戰(zhàn)之前,最好明白一點 – 這是個永無止境的過程。你在打造的更像是一款產(chǎn)品,而非終點明確的項目 – 設計體系需要隨著產(chǎn)品的發(fā)展而不斷的成長和進化。

你可能需要專門組建團隊來負責設計體系的維護,或是由一些設計師來專職擔任。一套嚴整規(guī)范的設計體系可以為產(chǎn)品設計工作帶來不可或缺的核心價值,使工作流程更加聚焦、清晰,設計模式的一致性與產(chǎn)品開發(fā)速度都能得到顯著提升。

綜合性體系

站在產(chǎn)品全局層面創(chuàng)建并維護一套行之有效的設計體系,這只是規(guī)范化、體系化的一部分;我們同時還在構(gòu)建產(chǎn)品的品牌規(guī)范及設計原則。

我們認為,在產(chǎn)品設計的復雜性上升到一定程度之前,將基礎框架奠定牢靠是非常關鍵的,否則各種潛在問題將一路積累下去,直到無法解決的地步。一系列規(guī)范、原則與體系的建立將能確保我們在擴大產(chǎn)品及團隊規(guī)模時穩(wěn)定在正確的軌道上。

我們計劃在QUIK進入實用階段之后,繼續(xù)創(chuàng)建一套用于定義產(chǎn)品個性化特質(zhì)的設計規(guī)范。我們將會建成的綜合性體系包括:

  • 品牌規(guī)范(Brand Guidelines):用于描述品牌個性與特質(zhì)的一系列文檔,其中包括文案基調(diào)、配色風格、logo使用約束等方面的定義說明。
  • QUIK:將產(chǎn)品全局范圍內(nèi)的設計理念、方法及界面組件等集約在一處進行標準化定義的設計體系(Design System)。
  • 設計原則(Design Principles):幫助我們恪守產(chǎn)品設計方向,聚焦于對團隊及客戶最為重要的目標之上,最大程度地實現(xiàn)二者的統(tǒng)一。

接下來

我們將持續(xù)力爭在產(chǎn)品平臺全局范圍內(nèi)實現(xiàn)統(tǒng)一化的設計標準。面對這個目標,我們還有很長的路要走。產(chǎn)品團隊當中的每一個人都明白這是個巨大的挑戰(zhàn),但我們同樣理解這件事對于產(chǎn)品保持平穩(wěn)發(fā)展的重要性。

 

作者:C7210

來源:微信公眾號:Beforweb

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
14020人已学习14篇文章
在很多产品中,搜索都是其中比较基础且很重要的一个功能。搜索的设计、逻辑、交互等问题也是需要特别注意,本专题的文章分享了电商搜索功能的设计指南。
专题
13111人已学习12篇文章
随着互联网的不断发展,如今获客渠道及方式也有很多。本专题的文章分享了获客渠道及方法。
专题
11709人已学习12篇文章
数据管理系统在后期能够为企业提供基础数据服务,保证企业往更好的方向运营。本专题的文章分享了如何做好数据管理。
专题
13420人已学习12篇文章
本专题的文章分享了B端产品经理的通用工作流程。
专题
11780人已学习12篇文章
随着现代科技的不断发展进步,智慧城市的建设也在不断发展,本专题的文章分享了智慧城市设计指南。
专题
19129人已学习13篇文章
画像标签是由数据标签经过分析、加工处理,形成的更加抽象、易于理解的复合标签。本专题的文章分享了如何设计用户标签体系。