像做產(chǎn)品一樣,對(duì)Design System進(jìn)行前期規(guī)劃

1 評(píng)論 3806 瀏覽 19 收藏 8 分鐘

本文作者將結(jié)合自身經(jīng)驗(yàn)與大家分享:對(duì)Design System進(jìn)行前期規(guī)劃,enjoy~

關(guān)于Design System,個(gè)人以為仍難以進(jìn)行最精準(zhǔn)的概念定義 – 包括產(chǎn)品類型、階段、規(guī)模,團(tuán)隊(duì)構(gòu)成、文化,甚至連同整個(gè)公司/組織在產(chǎn)品側(cè)的策略也可以包含進(jìn)來(lái),都會(huì)對(duì)所謂“設(shè)計(jì)體系”的存在目的與方式產(chǎn)生決定性的影響。

因此我所能聊到的,也僅是當(dāng)前我在自己所面對(duì)的特定工作情境中的狀況;某些方面或許具備普適性,而另外一些方面或許只能提供特定角度的參考,這樣。

像做產(chǎn)品一樣

何為“像做產(chǎn)品一樣”?這里特指《用戶體驗(yàn)要素》這本書(shū)所定義的最為經(jīng)典的產(chǎn)品設(shè)計(jì)思維模型,即是將“設(shè)計(jì)”流程分為五個(gè)層面,從最為本質(zhì)和抽象的核心出發(fā)依次向上梳理至User Interface表現(xiàn)層面;大致包括:

  • 目標(biāo)層:定義多方面目標(biāo),所謂“多方面”即是指公司業(yè)務(wù)目標(biāo)、產(chǎn)品設(shè)計(jì)目標(biāo)及用戶目標(biāo);圍繞“產(chǎn)品”這一“實(shí)體”,對(duì)各方面的痛點(diǎn)、訴求進(jìn)行辨識(shí)與整合。
  • 范圍層:基于目標(biāo)定義,界定產(chǎn)品信息/功能范圍,判別最為必要與核心的要素/有利于目標(biāo)實(shí)現(xiàn)的要素/概念相關(guān)但與當(dāng)前目標(biāo)實(shí)現(xiàn)無(wú)關(guān)的要素。
  • 結(jié)構(gòu)層:在明確界定的信息/功能范圍當(dāng)中,梳理信息/功能架構(gòu),定義流程。
  • 框架層:將信息架構(gòu)與功能流程具像化,即通過(guò)相對(duì)低保真的形式對(duì)界面流程關(guān)系及界面信息層級(jí)進(jìn)行組織呈現(xiàn)。
  • 表現(xiàn)層:細(xì)化界面表現(xiàn)形式,結(jié)合品牌特質(zhì)與情感化要素對(duì)界面進(jìn)行高保真呈現(xiàn)。

圖片來(lái)自crowdfavorite.com

話說(shuō)回來(lái),無(wú)論工作還是生活中,諸多事務(wù)都會(huì)體現(xiàn)著類似的邏輯框架,即依次明確為什么要做(Why)、做什么(What)、如何做(How)。以我們?cè)诋a(chǎn)品設(shè)計(jì)工作中最為硬核的“思維框架”來(lái)打造產(chǎn)品設(shè)計(jì)工作中最為硬核的“工具框架”,這事兒自然而然,符合邏輯。

Design System的前期規(guī)劃

前期規(guī)劃主要遵循五層思維模型的前三個(gè)層面,即對(duì)“目標(biāo)”、“范圍”、“結(jié)構(gòu)”進(jìn)行定義。需要再次說(shuō)明,相關(guān)經(jīng)驗(yàn)僅與特定產(chǎn)品/團(tuán)隊(duì)狀況相關(guān);思路供參考。

Design System的目標(biāo)

Design System,顧名思義,是體系化的工作,需要短期內(nèi)集約重要/大量的資源進(jìn)行構(gòu)建,并保持長(zhǎng)期的維護(hù)/進(jìn)化工作。對(duì)于這種量級(jí)的事項(xiàng),必須顧全多方面的目標(biāo),在前期充分達(dá)成共識(shí),才能盡可能爭(zhēng)取資源,并形成長(zhǎng)期合力。目標(biāo)所涉及的對(duì)象或可包括:

(1)設(shè)計(jì)師

設(shè)計(jì)師是Design System最直接的“用戶”,能否解決設(shè)計(jì)師工作中的實(shí)際痛點(diǎn),這也是Design System最為關(guān)鍵的價(jià)值之一。目標(biāo)或可包括幫助現(xiàn)有設(shè)計(jì)師規(guī)范工作流程,使工具、方法、產(chǎn)出更加標(biāo)準(zhǔn)化,提高執(zhí)行效率,進(jìn)而提升設(shè)計(jì)思考的工作比例,等等;此外對(duì)于新進(jìn)設(shè)計(jì)師快速進(jìn)入標(biāo)準(zhǔn)化工作狀態(tài)的作用也要考慮到。

(2)設(shè)計(jì)團(tuán)隊(duì)

在解決直接“用戶”的痛點(diǎn)的同時(shí),Design System更要在設(shè)計(jì)團(tuán)隊(duì)層面進(jìn)行賦能,例如提升設(shè)計(jì)團(tuán)隊(duì)在公司內(nèi)/外的專業(yè)度與影響力等等。

(3)產(chǎn)品

Design System所解決的問(wèn)題最終將體現(xiàn)在實(shí)際產(chǎn)品的體驗(yàn)當(dāng)中,譬如提升產(chǎn)品/產(chǎn)品家族在交互、視覺(jué)表現(xiàn)、品牌識(shí)別等層面的一致性,提升產(chǎn)品體驗(yàn)與公司品牌形象等等;無(wú)法上升到產(chǎn)品/業(yè)務(wù)層面的解決方案都只是空中樓閣。

Design System的范圍

界定Design System的作用域,譬如:

  • 產(chǎn)品:針對(duì)單一產(chǎn)品,還是需要橫跨整個(gè)產(chǎn)品家族;僅針對(duì)線上產(chǎn)品,還是需要包含線下服務(wù)鏈當(dāng)中的每一個(gè)用戶/客戶觸點(diǎn)。
  • 面向人員:僅面設(shè)計(jì)師(交互/視覺(jué)/創(chuàng)意/物料/空間/全鏈路),還是需要涵蓋產(chǎn)品經(jīng)理、工程師等上下游相關(guān)職能。

Design System的結(jié)構(gòu)

基于作用域范圍的界定,梳理Design System的信息架構(gòu)。之前的相關(guān)文章當(dāng)中也有過(guò)介紹;通常意義上的設(shè)計(jì)體系大致包括以下最為典型的組成部分:

(1)基礎(chǔ)要素

  • 顏色(Color)
  • 文字(Typography)
  • 樣式(Style)
  • 柵格(Grid)

(2)設(shè)計(jì)模式

  • 組件(Component)
  • 模塊(Module)
  • 動(dòng)效/動(dòng)畫(huà)(Transition/Animation)

(3)設(shè)計(jì)規(guī)范

  • 全局
  • 價(jià)值主張
  • 設(shè)計(jì)原則
  • 品牌規(guī)范

(4)元素

  • 功能定義
  • 類型/狀態(tài)
  • 應(yīng)用原則
  • 應(yīng)用示例

同時(shí)對(duì)于更為廣義的“設(shè)計(jì)工作標(biāo)準(zhǔn)化”而言,或可進(jìn)一步包括流程與方法規(guī)范、工具規(guī)范、素材與產(chǎn)出形式規(guī)范等等。

此外,對(duì)于“基礎(chǔ)要素”和“設(shè)計(jì)模式”這兩部分來(lái)說(shuō),采用層級(jí)更為復(fù)雜、同時(shí)也更具靈活性和工程性的“Atomic Design”作為架構(gòu)設(shè)計(jì)思路也是非常推薦的;你可以將以上的架構(gòu)示例理解為抽象層面的邏輯梳理,而非針對(duì)最終的產(chǎn)出形式而嚴(yán)格區(qū)分。

到此為止就是今天想要聊的全部,關(guān)于如何通過(guò)產(chǎn)品設(shè)計(jì)思路對(duì)Design System進(jìn)行前期規(guī)劃;而接下來(lái)更為細(xì)化的規(guī)劃/執(zhí)行方式,包括工具方法等等,我或會(huì)根據(jù)實(shí)際工作中的推進(jìn)狀況再做進(jìn)一步的介紹和分享。

 

原文作者:Marcin Treder

原文地址:https://heydesigner.com/blog/minimum-viable-design-system/

譯者:C7210(微信公眾號(hào):Beforweb(ID:beforweb)),交互設(shè)計(jì)師、UX設(shè)計(jì)熱愛(ài)者、VR探索者、譯者、貓奴、吉他手、鼓手,現(xiàn)就職于騰訊上海,

譯文地址:http://beforweb.com/node/969

題圖來(lái)自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!