設計系統 Design System 這個概念已經引入國內一段時間了,相信很多大型企業也已經將設計系統這個模式掌握的比較熟練,但是最近與一些B端設計師交流,發現一些中小型企業專案也慢慢運用設計系統的方法,去提升B端產研效能。相比於市面上一些大型企業內有充沛的人力去進行大而全的設計系統及工具研發,這裡想分享幾條適合中小型團隊發展小而美的設計系統的解題思路及工具。

一,圈定小而美的設計系統範圍,讓小團隊設計產出快速統一

在小型企業中B端設計師角色比較泛化,除了少數專職的設計師,一般都有產品、前端工程師、後端工作師,這些泛化的設計師角色進行進產品介面設計工作。而一套最小可行性的設計系統一般包含,設計價值觀、設計資產、體驗度量這三個最基本要素。

首先從意識層的角度保持統一,可以透過基礎的設計價值觀樹立產品設計判斷好壞的標準,市面上絕大部分的B端設計價值觀都會關注的效率這一層面,然後可以加上與自身企業自身品牌元素關聯的,例如溫度或者科技相關的元素進行視覺呼應便可變得更符合自身業務情景。另外,從全域性樣式層面可以以色彩、佈局、字型、圖形這幾個介面元素,並需要透過一些工具將文件線上化,實現產品介面快速統一。

這裡推薦一款Fusion Design的設計工具,在這裡可以非常方便的建一個專業設計系統站點,與多方角色進行協同。

B端必看!小團隊打造設計系統的常用工具

以下是工具連結地址:

二,如何快速製作設計資產庫

小團隊設計資產庫一般總體數量建議保持在五十個左右較為合適,過多的數量一方面設計師用起來的確不是太好找,另一方面太多的形式化變種也著實讓使用者找不著使用規律,從而降低可用性。而設計資產一般包含:元件、區塊、模板三個基礎層面內容。

在設計資源包製作層,我以Sketch控制元件這功能為例,強烈建議大家可以直接下載一些成熟且開源的元件庫進行改造即可,無需從零到一。一方面Sketch這款軟體對設計系統相容就不太友好需要層層設計目錄引數,另一方面成熟的Sketch資源庫往往設計細節比較經得起推敲,我們只需在他們的基礎上定製一些與自身業務相關的元件就行,這樣可以節約設計系統的設計成本。

在這裡推薦一款Kitchen的Sketch外掛,運用這款外掛可以方便的實現設計資產分發。

B端必看!小團隊打造設計系統的常用工具

以下是工具連結地址:

三,如何從設計到工程提升研發效能

在設計到工程階段,往往需要透過前端工程師手寫程式碼完成,其實往往這一環節非常低效且浪費人力。目前已經有一些大型企業在探尋設計稿直出程式碼之路,但目前應用的最廣泛的還是用一些低程式碼搭建工具去進行在簡單場景裡的“Design To Code”。透過統一的產品、設計、研發的工具,可以在一些基礎的填寫表單應用、資料展示應用實現較好的透過少量研發資源投入實現專案快速上線。

在這裡推薦一款宜塔工具,這款工具提供了一套適合中小企業的頁面搭建解決方案。

B端必看!小團隊打造設計系統的常用工具

以下是工具地址:

四、如何在中小型企業度量B端產品體驗

其實無論大型企業還是中小型企業往往都講究收益與成本兩個核心商業因素,而往往中小型企業裡B端產品往往都是一些內部產品,和直接型收益很難扯上關係,但一般都會以節約成本角度進行衡量B端產品價值。所以,建議在設計上以可用性這一方向切入。在定性衡量上可以嘗試用一些易用性度量表讓使用者直觀的感性評分目前行業裡已經有許多大師研究的非常透徹,有興趣同學可以看看尼爾森集團的部落格可以收穫頗多。

但是,定量的衡量往往對於B端專案常常很難,在這裡建議可以用一些人工智慧眼動儀預測工具並結合實際的錄屏獲得理性的產品體驗反饋。推薦一款業界常用的眼動儀智慧測試工具,可以降低企業購買硬體進行測試的成本。

B端必看!小團隊打造設計系統的常用工具

以下是工具地址:

以上講述了一些小團隊的解題思路,並附上設計工具地址,希望能幫上大家。