對于體驗設(shè)計師來說，搭建設(shè)計資產(chǎn)就像積木游戲，你不得不玩這些重要關(guān)卡。本文將會為您具體介紹，讓我們一起看看。

一、設(shè)計資產(chǎn)

設(shè)計資產(chǎn)，名詞，用于幫助產(chǎn)品設(shè)計師完成工作的各種資源、工具和素材。

換個方式說：設(shè)計資產(chǎn)就像游戲里的氪金裝備，讓設(shè)計師們在創(chuàng)意戰(zhàn)場上如魚得水。有了這些資產(chǎn)，產(chǎn)品設(shè)計師們就能夠高效、精準(zhǔn)地完成任務(wù)。

說到開源的組件庫，大廠們可不吝嗇啊！換做10年前哪有這等福利，阿里系的Ant Design、字節(jié)跳動的Arco Design、還有抖音的Semi Design等等，都可以借鑒學(xué)習(xí)，而且還是免費版！

對于體驗設(shè)計師來說，搭建設(shè)計資產(chǎn)就像積木游戲，你不得不玩這些重要關(guān)卡：全局樣式、圖標(biāo)庫、基礎(chǔ)組件、通用區(qū)塊、還有典型頁面。

所以在搭建設(shè)計資產(chǎn)時，以下是五個裝備需要你留意下：

1. 全局樣式

全局樣式指產(chǎn)品設(shè)計中的規(guī)范和屬性。主要用來定義產(chǎn)品外觀和布局元素。

2. 產(chǎn)品設(shè)計人員

• 品牌設(shè)計一致性：全局樣式有助于確保產(chǎn)品的整體外觀與公司品牌一致。這使他們能夠在設(shè)計過程中更容易維護品牌標(biāo)識和風(fēng)格。
• 提升效率：產(chǎn)品設(shè)計師可以更快速地創(chuàng)建新頁面和組件，更好的協(xié)作、提高設(shè)計效率。
• 用戶體驗提升：一致的全局樣式可幫助設(shè)計師創(chuàng)建更一致的用戶界面，提高用戶體驗。

3. 開發(fā)人員

• 簡化開發(fā)工作：開發(fā)人員在整個應(yīng)用程序中重用相同的樣式規(guī)則，從而減少了開發(fā)時間和減輕了維護負擔(dān)。
• 減少樣式?jīng)_突：通過確保全局樣式的一致性，開發(fā)人員可以減少樣式?jīng)_突的可能性。

4. 用戶

• 一致的用戶體驗：用戶將在整個網(wǎng)站或應(yīng)用程序中獲得一致的外觀和感覺，這有助于提高他們的舒適感和信任感。
• 可識別的品牌：用戶可以更容易地識別和記住品牌，因為品牌的標(biāo)識和顏色會在整個產(chǎn)品中保持一致。

其中顏色、字體、間距、陰影、布局、響應(yīng)式、需要一一去制定規(guī)則。

5. 圖標(biāo)庫

創(chuàng)建一個有組織、易于維護并符合產(chǎn)品風(fēng)格的圖標(biāo)庫，將有助于提高產(chǎn)品的用戶體驗，確保設(shè)計的一致性，減少開發(fā)工作量，同時也有助于傳達產(chǎn)品品牌的專業(yè)性和品質(zhì)。

制定符合產(chǎn)品的圖標(biāo)庫，可按系統(tǒng)圖標(biāo)、通用圖標(biāo)、第三方圖標(biāo)進行簡單的分類。

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

圖標(biāo)的形式可根據(jù)實際產(chǎn)品風(fēng)格而定。具體可參考Material Design、iOS標(biāo)準(zhǔn)規(guī)范圖標(biāo)。

二、基礎(chǔ)組件

制定基礎(chǔ)組件是設(shè)計系統(tǒng)中的關(guān)鍵任務(wù)（最辛苦、最累），因為這些組件在絕大部分產(chǎn)品中都會頻繁使用。這些基礎(chǔ)組件包括各種類型，如輸入類、反饋類、展示類、導(dǎo)航類、表單和表格等等。通過制定這些組件，可以提高設(shè)計的一致性，減少重復(fù)工作，以及提高產(chǎn)品的用戶體驗。

關(guān)于是否選擇開源，這是一個依賴于企業(yè)的產(chǎn)品生命周期和發(fā)展策略的決策。開源組件庫有其明顯的優(yōu)勢，如社區(qū)支持、共享的最佳實踐和代碼審查。

但同時，它們也可能需要額外的維護工作，以確保與滿足企業(yè)需求的。

企業(yè)應(yīng)該根據(jù)自身情況和需求來選擇是否采用開源組件庫。

在一些情況下，選擇開源組件庫可以顯著加快開發(fā)進程，減少成本，但在其他情況下，可能需要自定義的解決方案以滿足獨特的要求?？傊?，這是一個需要仔細權(quán)衡和考慮的決策。

下面以輸入類為例。

三、通用區(qū)塊

是指在特定情況下，基礎(chǔ)組件和典型頁面無法滿足特殊業(yè)務(wù)需求，或者需要新增功能時，設(shè)計人員可以創(chuàng)建的可重用組件。

舉例：在設(shè)計導(dǎo)航時，需要新增一些按鈕、搜索條件等元素，以提高業(yè)務(wù)操作的效率。這個時候就需要通用區(qū)塊去制定一些擴展性的搭配，以適應(yīng)各種情況和需求。

兩個關(guān)鍵原則是：

符合整體設(shè)計語言：通用區(qū)塊的設(shè)計應(yīng)與整體設(shè)計語言一致，包括顏色、字體、間距等。這有助于確保在整個應(yīng)用中保持一致的用戶體驗，同時提高品牌識別度。

拓展性：通用區(qū)塊應(yīng)具備足夠的拓展性，以應(yīng)對未來可能的需求變化。這意味著它們應(yīng)該易于擴展和自定義，以滿足不同的業(yè)務(wù)場景。

總的來說，組件庫不是僵化你設(shè)計的鎖鏈，而是幫助你的趁手工具。

四、典型頁面

典型頁面是設(shè)計系統(tǒng)和產(chǎn)品中的重要組成部分，它們展示了組件庫和全局樣式的實際應(yīng)用。這些頁面在保證視覺一致性方面起著關(guān)鍵作用。

目的是最終實現(xiàn)產(chǎn)品的視覺一致性和用戶體驗一致性特別是在規(guī)劃儀表盤、詳情頁、表單頁和表格頁時，制定基礎(chǔ)的規(guī)范和說明非常重要。

這不僅有助于團隊里的新成員更快地熟悉設(shè)計規(guī)范，提高工作效率，還在驗收和走查過程中充當(dāng)了重要的依據(jù)，確保整體視覺風(fēng)格和用戶體驗的一致性。

總之

設(shè)計資產(chǎn)和組件庫是設(shè)計和開發(fā)中的強大工具，它們可以提高效率、保持一致性、傳達品牌文化，減少錯誤和促進協(xié)作。

它們對于設(shè)計師、開發(fā)者和企業(yè)都非常有價值，可以幫助他們更好地滿足用戶需求、提高產(chǎn)品質(zhì)量，并增強品牌影響力。

【知識擴展區(qū)】

1. 儀表盤（Dashboard）

儀表盤通常用于顯示關(guān)鍵業(yè)務(wù)指標(biāo)（KPIs）和數(shù)據(jù)可視化。在設(shè)計儀表盤時，考慮以下因素：

• 關(guān)鍵指標(biāo)的展示：決定儀表盤上顯示哪些關(guān)鍵指標(biāo)，并確保它們易于理解。
• 圖表和數(shù)據(jù)可視化：選擇適當(dāng)?shù)膱D表類型來呈現(xiàn)數(shù)據(jù)，例如柱狀圖、折線圖、餅圖等。
• 信息層級：使用信息層級確保用戶可以根據(jù)需要深入了解數(shù)據(jù)。

2. 詳情頁（Detail Page）

詳情頁通常用于顯示特定項目、產(chǎn)品或?qū)ο蟮脑敿毿畔ⅰＴ谠O(shè)計詳情頁時，考慮以下因素：

• 信息結(jié)構(gòu)：確定詳細信息的組織結(jié)構(gòu)，例如分區(qū)塊、標(biāo)簽頁等。
• 多媒體內(nèi)容：處理可能包含的多媒體內(nèi)容，如圖片、視頻或文檔。
• 互動元素：包括用戶可以執(zhí)行的操作，如編輯、刪除、分享等。

3. 表單頁（Form Page）

表單頁用于收集用戶輸入的信息。設(shè)計表單時，考慮以下因素：

• 表單字段：確定需要收集的信息，并選擇合適的輸入字段類型。
• 驗證與反饋：設(shè)計實時驗證和錯誤反饋機制，幫助用戶更輕松地填寫表單。
• 布局和流程：考慮表單的布局以及用戶填寫表單的流程，使其直觀易懂。

4. 表格頁（Table Page）

表格頁通常用于展示大量結(jié)構(gòu)化數(shù)據(jù)。在設(shè)計表格頁時，考慮以下因素：

• 數(shù)據(jù)呈現(xiàn)：選擇合適的列和行來呈現(xiàn)數(shù)據(jù)，確保數(shù)據(jù)清晰可讀。
• 排序和篩選：允許用戶按照特定列進行排序和篩選，提高數(shù)據(jù)的可控性。
• 行動操作：提供適當(dāng)?shù)男袆影粹o，允許用戶執(zhí)行操作，如查看詳細信息、編輯或刪除。

5. 典型頁面的重要性表現(xiàn)

• 樣式一致性：通過在典型頁面中使用一致的顏色、字體、間距和樣式，確保整體產(chǎn)品的視覺統(tǒng)一性。
• 組件重用：將常見的UI組件納入典型頁面，以便在整個產(chǎn)品中重復(fù)使用，減少重復(fù)工作并減小維護成本。
• 用戶體驗一致性：通過在典型頁面中定義用戶界面元素的布局和互動，確保用戶在不同部分之間的體驗是一致的。
• 文檔化和培訓(xùn)：制定規(guī)范和說明可用于文檔化設(shè)計系統(tǒng)，使其可供新員工參考，從而提高他們的學(xué)習(xí)曲線。
• 驗收和走查：在產(chǎn)品開發(fā)和設(shè)計迭代的不同階段，典型頁面可用于驗證設(shè)計是否符合規(guī)范，以及在實際應(yīng)用中是否能夠提供一致的用戶體驗。

以上是讀《B 端體驗設(shè)計：企業(yè)級視角的系統(tǒng)化方法》心得,歡迎一起交流。