教你快速了解設(shè)計(jì)系統(tǒng)
發(fā)布時(shí)間:2022-01-25 10:39 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

為什么需要搭建設(shè)計(jì)系統(tǒng)?設(shè)計(jì)系統(tǒng)解決了以下問題:

  • 設(shè)計(jì)高效率:快速了解產(chǎn)品設(shè)計(jì)全貌(包括設(shè)計(jì)原則、風(fēng)格,樣式、組件),多人協(xié)作如 Google docs 共享的方式高效。
  • 協(xié)作高效率:對(duì)齊研發(fā)的實(shí)現(xiàn)距離單位,高還原度,及跨學(xué)科跨崗位間的高效溝通。共享的詞匯表,有用的文檔使測(cè)試更容易,并作為未來協(xié)作友好的基礎(chǔ)。


什么是設(shè)計(jì)系統(tǒng)?


設(shè)計(jì)系統(tǒng)包括完整的設(shè)計(jì)價(jià)值觀和原則、設(shè)計(jì)標(biāo)準(zhǔn)、場(chǎng)景定義以及一套工具包(UI 模式庫和代碼),用于搭建和組合產(chǎn)品與服務(wù)。鼓勵(lì)崗位之間的合作,減少溝通障礙。一個(gè)好的風(fēng)格指南可以幫助設(shè)計(jì)人員和開發(fā)人員了解他們工具箱的工具,并為如何正確使用他們提供規(guī)則和最佳實(shí)踐。


設(shè)計(jì)系統(tǒng)的前世今生


從 1977 年 Christopher Alexander 在《A Pattern language》中首次提出模式的概念,anirbnb、Salesforce、Atlasssian、Spotify、AntDesign、Fusion Design 先后對(duì)外公布設(shè)計(jì)系統(tǒng),歷經(jīng)了 43 年的演練。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)


設(shè)計(jì)系統(tǒng)的構(gòu)成


設(shè)計(jì)系統(tǒng)由風(fēng)格指南、基礎(chǔ)構(gòu)件、模式庫、規(guī)則組成。據(jù)不同項(xiàng)目,構(gòu)成要素可以相應(yīng)重構(gòu)與取舍,但風(fēng)格指南、組件庫、設(shè)計(jì)原則必不可少。搭建完成后在項(xiàng)目中的版本迭代若只是視覺改版則只需改風(fēng)格指南。模式庫的組件分為:按鈕卡片、圖標(biāo)、導(dǎo)航、列表、下拉框、搜索框、表單、分頁、進(jìn)度欄、彈框、加載、側(cè)邊欄等。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

我們創(chuàng)建各種組件,用于構(gòu)成界面,那么關(guān)于組件:

  • 什么是組件?組件是可以在你的設(shè)計(jì)中反復(fù)使用的頁面元素。
  • 何時(shí)創(chuàng)建組件?在界面設(shè)計(jì)中發(fā)現(xiàn)兩個(gè)頁面中出現(xiàn)了重復(fù)的元素時(shí),可考慮是否要將它轉(zhuǎn)換為組件。
  • 如何創(chuàng)建組件?根據(jù)「原子設(shè)計(jì)Atomic Design」理論將組件進(jìn)行原子級(jí)的結(jié)構(gòu)拆分,這不是一個(gè)線性過程,而是一個(gè)思維模型。


如何搭建設(shè)計(jì)系統(tǒng)


1. 搭建要點(diǎn)

創(chuàng)建可維護(hù)的設(shè)計(jì)系統(tǒng),要建立長(zhǎng)遠(yuǎn)成功的設(shè)計(jì)系統(tǒng):

  • 建立設(shè)計(jì)體系團(tuán)隊(duì),合適的人員和流程來確保系統(tǒng)的穩(wěn)定發(fā)展。
  • 適應(yīng)性強(qiáng),使其易于維護(hù)。
  • 新模式的請(qǐng)求是如何處理的?發(fā)現(xiàn)錯(cuò)誤的時(shí)候會(huì)怎樣?誰批準(zhǔn)設(shè)計(jì)系統(tǒng)的變化?負(fù)責(zé)保持文檔更新的是誰?改變系統(tǒng)的 UI 模式?團(tuán)隊(duì)如何了解變化?
2. 搭建步驟流程
  • 共創(chuàng)者:UI + UI Dev
  • 創(chuàng)建工具:Sketch(UX設(shè)計(jì)工具)+ Zeplin(團(tuán)隊(duì)協(xié)作工具 + Storybook,github設(shè)計(jì)系統(tǒng)開源框架)
  • 協(xié)作方式:設(shè)計(jì)師與研發(fā)不再是線性的瀑布式協(xié)作模式,而是共創(chuàng)的協(xié)作模式。

步驟

以調(diào)色板為例,統(tǒng)一命名通過點(diǎn)擊 Sketch 頂部菜單欄 Plugins-Zeplin-Export Selected 可配色版的色值直接同步至 Zeplin 的 style guide。

前端研發(fā)可在 Zeplin style guide tab: Color & Text Styles 下查看,并把產(chǎn)品配色封裝為配色的變量保存至 storybook。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

規(guī)則

設(shè)計(jì)原則:有助于塑造我們的設(shè)計(jì)方法,并協(xié)助我們?cè)诋a(chǎn)品設(shè)計(jì)過程中評(píng)估權(quán)衡。

jared M.Spool 提出的驗(yàn)證原則的方法 「6 個(gè)違反直覺的測(cè)試 」 :

  • 它直接來自研究嗎?
  • 它在大多數(shù)情況下是否可以幫助您說「不」?
  • 它是否將您的設(shè)計(jì)與競(jìng)爭(zhēng)對(duì)手區(qū)分開?
  • 在將來的發(fā)行版中您可能會(huì)扭轉(zhuǎn)嗎?
  • 您是否對(duì)該項(xiàng)目進(jìn)行了評(píng)估?
  • 它的含義是否被不斷測(cè)試?

好的設(shè)計(jì)原則應(yīng)具備:

  • 足夠具體以進(jìn)行衡量
  • 在整個(gè)產(chǎn)品流程中工作
  • 激勵(lì)您的團(tuán)隊(duì)創(chuàng)造更好的結(jié)果
  • 挑戰(zhàn)中等和半定結(jié)果
  • 簡(jiǎn)單而令人難忘
  • 將您的產(chǎn)品與競(jìng)爭(zhēng)對(duì)手區(qū)分開來

定義出色的產(chǎn)品原則:研討會(huì)的想法。

  • 材料:便利貼、鋼筆、墻、零食。
  • 參與者:召集項(xiàng)目中的利益相關(guān)者,首席工程師、產(chǎn)品經(jīng)理、設(shè)計(jì)師、市場(chǎng)營(yíng)銷等。

在 10 分鐘內(nèi)寫下至少需與競(jìng)品區(qū)別 8 種品質(zhì)貼在墻上,將類似的便利貼放在一塊做聚類。回答以下內(nèi)容并讓每個(gè)人都在注釋中進(jìn)行解釋。(如果我們的產(chǎn)品是動(dòng)物/一個(gè)人/公司/電影/產(chǎn)品 ,那就是……又為什么呢?)要特別注意區(qū)分產(chǎn)品的原因和任何描述性屬性后聚類。

花 10 分鐘描述希望產(chǎn)品對(duì)用戶的感覺的 3-5 條原則,寫下希望產(chǎn)品避免使用的 2-3 個(gè)描述符并介紹自己的原則,最后列出 8–15 個(gè)潛在原則。共享利益相關(guān)者,在項(xiàng)目中溝通磨練形成最佳內(nèi)容,確定后盡一切努力貫徹在項(xiàng)目團(tuán)隊(duì)意識(shí)中。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

風(fēng)格指南

雖然風(fēng)格識(shí)別指南是相當(dāng)觸覺的,設(shè)計(jì)語言指導(dǎo)方針更難確定。設(shè)計(jì)語言風(fēng)格指導(dǎo)闡明一般的設(shè)計(jì)方向、哲學(xué)和方法具體項(xiàng)目或產(chǎn)品。設(shè)計(jì)師薩曼莎·沃倫(Samantha Warren)在設(shè)計(jì) style tiles 時(shí)做出了回應(yīng),這是一款比情緒板更有形的可交付產(chǎn)品。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

在視覺設(shè)計(jì)語言中,發(fā)散視覺風(fēng)格推薦 The 20 second gut test 方法論。這個(gè)練習(xí)使涉眾在早期接觸到各種美學(xué),通過品味差異有助于達(dá)成一些共同的審美價(jià)值。視覺設(shè)計(jì)師可抓住這些洞察開始將這些美學(xué)價(jià)值轉(zhuǎn)化為項(xiàng)目的視覺方向。

在項(xiàng)目啟動(dòng)一部分會(huì)議上,向涉眾每 20 秒/個(gè),展示 20 個(gè)相關(guān)網(wǎng)站,選擇特定于行業(yè)的站點(diǎn)及視覺上有趣的站點(diǎn)。為了增加可信度將網(wǎng)站 logo 改為項(xiàng)目 logo。

對(duì)每個(gè)網(wǎng)站每人投票范圍 1-10,得分 1 表示「如果這是我們的網(wǎng)站,我就辭職」。得分 10「如果這是我們的網(wǎng)站,我一定會(huì)欣喜如狂」。發(fā)起者考慮參與者感興趣的視覺屬性,比如:排版、顏色、密度、布局、插畫風(fēng)格和總體氛圍。

快速將分?jǐn)?shù)加起來,聚類結(jié)果。談?wù)摰梅肿畹偷?5 個(gè)網(wǎng)站,得分最高的 5 個(gè)網(wǎng)站及爭(zhēng)議最大的網(wǎng)站。發(fā)起者應(yīng)該解釋參與者為什么會(huì)被某個(gè)特定的網(wǎng)站吸引或排斥,并與團(tuán)隊(duì)一起解決意見上的分歧。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

基礎(chǔ)構(gòu)件

字體排版(Typography)規(guī)范:

首先,了解產(chǎn)品需要支持哪些媒介?手機(jī)、平板、電腦、HMI車載屏等,其次,需要考慮如何定義 Font-Color,F(xiàn)ont-Size & Line-Height,F(xiàn)ont-Size,F(xiàn)ont-Family。

  • Font-Color:關(guān)于安全色,如何保證文字的可閱讀性,常常用的 3 個(gè)閱讀色 #333333,#666666,#999999,可以通過該網(wǎng)站測(cè)試字體色與背景色的對(duì)比度是否能夠保證可讀性。
  • Font-Size & Line-Height:字號(hào)大小和行高的定義從用戶特質(zhì)(年齡特征、工作環(huán)境)及可閱讀性來思考。(比如用戶視力程度如何?是比較年輕的還是比較年長(zhǎng)的?工作環(huán)境的光線如何?)
  • Font-Size:考慮字重級(jí)字體的粗細(xì)使用 regular,medium,bold 的使用與定義,字重的定義主要通過對(duì)比增加設(shè)計(jì)的層次與韻律。css 支持字重與系統(tǒng)的字重,如 light,regular,medium,bold,bolder 會(huì)有差別,具體與研發(fā)調(diào)整再定義。
  • Font-Family:在項(xiàng)目上,了解大部分的用戶使用系統(tǒng)及使用人群,方便系統(tǒng)快速識(shí)別。整個(gè)產(chǎn)品除了 logo 是 VI 字體,其余為 web 默認(rèn)中英文。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

布局(Layout)規(guī)范-間距公式:

8 的倍數(shù)在 Sketch 里建立運(yùn)用刪格系統(tǒng),基于 1366*768 空間最大化利用 y=8+8*n n>0(eg:8、16、24、32、64px)。對(duì)于諸如列表,表格,卡片,表格等常見內(nèi)容區(qū)域存在一個(gè)或多個(gè)部分和面板組成的系統(tǒng),這些部分共同協(xié)作以創(chuàng)建一致的視覺布局。

帶側(cè)邊欄的≦1440像素屏幕的草圖布局計(jì)算:

  • 畫邊寬度 – 邊欄寬度 = 內(nèi)容區(qū)域
  • 內(nèi)容區(qū)域 – 邊距*2 = 總寬度
  • 邊欄寬度 + 邊距 = 偏移

帶側(cè)邊欄的≦1440像素示例計(jì)算:

  • 1440px – 80px = 1360px
  • 1360px – 50px * 2 = 1260px
  • 80px + 50px = 130px

無側(cè)邊欄的≦1440像素屏幕的草圖布局計(jì)算:

  • 畫邊寬度 = 內(nèi)容區(qū)域
  • 內(nèi)容區(qū)域 – 邊距*2 = 總寬度
  • 偏移 = 0 – 僅選擇「居中」

帶側(cè)邊欄的≦1440像素示例計(jì)算:

  • 1440px – 80px = 1360px
  • 1440px – 50px * 2 = 1340px
  • 偏移 = 0 – 僅選擇「居中」

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

模式庫

原子設(shè)計(jì)方法論,組件的建立中,重點(diǎn)聊聊原子設(shè)計(jì),原子設(shè)計(jì)方法論由五個(gè)不同的階段共同工作,以創(chuàng)建界面設(shè)計(jì)系統(tǒng)深思熟慮的,等級(jí)分明的方式。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

原子Atoms,界面的基本元素,設(shè)計(jì)時(shí)需要考慮:

  • 按鈕的樣式:Background color 背景色、Border radius 圓角、Color 字體顏色、Font Size 字號(hào)、Font-weight 字重、Font-family 字體、Padding 內(nèi)邊距、Margin 外邊距、Box-shadow 陰影。
  • 交互狀態(tài):Button/Primary/Default、Button/Primary/Hover、Button/Primary/Pressed、Button/Primary/Disabled、Button/Primary/Loading
  • 大小層次:Small、Medium、Large
  • 按鈕的層次:Primary、Secondary、Thirdly
  • 可擴(kuò)展性:是否固定 padding 值,據(jù)內(nèi)容保持固定內(nèi)邊距自適應(yīng),或文字+圖標(biāo)擴(kuò)展形式。

基礎(chǔ)科普!用一篇文章幫你快速了解設(shè)計(jì)系統(tǒng)

一個(gè)好的設(shè)計(jì)系統(tǒng)需要設(shè)計(jì)師與研發(fā)工程師共同協(xié)作,建立統(tǒng)一認(rèn)知的設(shè)計(jì)價(jià)值觀,風(fēng)格指南梳理設(shè)計(jì)原則,構(gòu)建完善的組件庫,協(xié)調(diào)研發(fā)規(guī)則與協(xié)作流程,立足于創(chuàng)建可維護(hù)的長(zhǎng)遠(yuǎn)設(shè)計(jì)系統(tǒng);谖磥淼脑O(shè)計(jì)系統(tǒng),創(chuàng)建適應(yīng)性的,智能的,能夠感知上下文并自動(dòng)結(jié)合,從而減少工作負(fù)荷,AI 驅(qū)動(dòng)設(shè)計(jì)。

Illustrator2021從入門至精通教程
我要自學(xué)網(wǎng)商城 ¥150 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC