產品設計的三個問題與解法

李政

2016年10月9日，習近平總書記在十八屆中共中央政治局第三十六次集體學習時發表講話，強調要深刻認識互聯網在國家管理和社會治理中的作用，推進技術融合、業務融合、數據融合，實現跨層級、跨地域、跨系統、跨部門、跨業務的協同管理服務。浙江省數字化改革建設在此背景下，各應用系統為實現“三融五跨”，對系統的架構設計、功能設計、用戶體驗等各方面都有了更高的要求，政務產品通常是大平臺、大數據、大應用，這對產品設計工作也帶來了更高要求和挑戰，在這樣的背景下產品設計通常會遇到三種問題：

1、產品團隊內部協作難。一個復雜度較高的系統，如果多名產品經理共同參與產品設計，通常對原型文件版本的管理會比較繁瑣：每名產品經理電腦本地存儲的原型文件，在釘釘等通訊工具中發送后，最新版本和修改內容難以實時同步或匯總。

2、原型文件標準不統一。在缺乏標準原型設計組件庫的情況下，每位產品經理的原型，會按照自己的“習慣”進行“創作”，會導致每個模塊產品功能設計不一致，交互邏輯和體驗不一致，系統參差不齊，缺乏整體性。

3、原型設計耗時長。在交付排期緊急的情況下，產品經理沒有時間繪制高保真的產品原型，未能明確客戶的具體需求，可能以一張草稿或者PPT就交付到設計和開發手中，功能模塊缺乏嚴肅的產品設計思考，導致上線后不斷返工，系統修修補補。

要研發出更高品質的政務產品，需要做“刀刃向內”的產研變革，要解決這三類問題需要有實用、強大的工具進行輔助，在實踐經驗中，總結出三類有效解決問題的經驗。

近幾年，受疫情影響，居家辦公和遠程協作的工作場景越來越多。工欲善其事，必先利其器，可以通過“云”進行在線協作完成原型設計的軟件也在此期間蓬勃發展，經過我們團隊的長期使用實踐，體驗比較了Adobe XD、Figma、藍湖 MasterGO等多款產品。綜合軟件穩定性、共享便利性、操作易用性等各個角度，最終選擇了使用Figma。

一個復雜系統產品的設計，“單兵作戰”通常無法完成，“團隊協同作戰”是必然的，因此需要團隊成員實時共享設計進度和思路。在Figma中的文檔管理界面，所有成員都可以將設計文檔共享在團隊中，并且可以根據項目分組，團隊中的設計師、產品經理、工程師，可以實時了解最新的設計內容，客戶也可以看到最新且實時的設計稿，甚至可以看到其他成員在設計過程中鼠標拖拽等實時操作。

比如在IRS項目中，有多名產品經理和設計師共同參與產品設計工作，涉及到三個子系統的功能模塊設計，團隊成員可以在線完成各負責模塊的設計工作，并且實時查看最新設計稿，無需互相發送源文件，在線進行原型設計評審，實時查看修改后的效果，開發同學也可以看到最新項目設計進展，直接下載切圖和CSS樣式。

解決規范不統一的問題，需要UED、產品、開發團隊共同建立“產品設計系統”（也被稱作Design System設計系統），它是一個內部產品、也是一種內部共識和一種協作思維方式，產品設計系統由三部分和三種角色對應組成：

1、UI設計標準規范 - 設計師；

2、原型設計組件庫 - 產品經理；

3、前端標準組件框架 - 工程師。

產品設計系統需要實現：原型組件化、設計標準化、開發規范化。

之所以稱之為“產品設計系統”，是因為設計規范、組件庫、前端框架三者缺一不可，并不是僅僅提供一套可以拖拉拽和可復制的源文件這么簡單，從編程語言中最小的元素，如色值、字號、間距，到基礎控件，如按鈕、輸入框，再到頁面中的模塊，只有達成一致并積累形成規范，并且形成“內部協作交付機制”，才能保障從原型稿到設計稿再到線上代碼的一致性。

市面上知名的“產品設計系統”主要有：

1、Apple - Human Interface Guidelines；

2、Google - Material Design；

3、IBM - Carbon Design；

4、Microsoft - Fluent Design System；

5、Alibaba - Ant Design；

6、Tencent - TDesign；

7、ByteDance - Arco Design。

其中Carbon Design、 Ant Design、 TDesign、Arco Design四個產品設計系統都具備非常專業、詳細設計規范以及豐富成熟的組件庫，還有可快速部署引用的前端框架，并且UI風格和組件交互風格都非常適合政務領域的產品設計場景。

經過接近兩年的積累，UED和產品團隊共同制作的組件庫已覆蓋包含按鈕、圖標、表格、菜單等9個一級分類，由230個以上的基礎元素構成，基本滿足了大部分場景的產品設計需要。

在使用過程中，需要持續對各類組件進行調優，如展示效果、自適應以及增加更多豐富的組件，滿足各類產品設計場景，這都離不開產品、設計、工程師等各類角色共同的迭代優化。

作為“產品設計系統”中的最后一環，前端同學基于產品+UED的組件化原型圖，通過使用Web組件開發庫（Storybook）搭建了一套以“政務業務+通用類型”為基礎的開源組件化工具，包含按鈕、表單、表格、菜單、面包屑、通用政務風格模版、導航條等7個一級分類，“代碼復用+組件化開發”基本滿足了部門政務產品中的開發需求。

以浙江省互聯網+監管系統為例，各個子系統功能頁面有超過300余頁面，涉及到上百萬行代碼，即使是不同的產品、設計、開發小組，整個系統仍然保持著很高的視覺一致性、產品交互邏輯、功能操作規則，讓用戶能夠感受到一個整體的系統。

在產品交付排期緊急的情況下，擺在產品面前的可以有兩種選擇：

1、簡單口述需求，使用PPT或草圖，協調設計師和開發同事緊急趕工；

2、利用UED團隊制作的標準組件庫，快速制作一個可交互的Demo，向客戶演示介紹，確認需求，高保真交付給開發。

舉個例子：一個標準的輸入框，在具體產品設計過程中，我們經常會需要做一些調整，比如使其具備必填、禁用、下拉等功能，如果每次都去手動修改原型，或者去設計規范里復制或拖拽一個源文件，操作會非常繁瑣且費時。

此時可以利用Figma的“變體”（ Variants ）功能，對各類場景下的輸入框和下拉框進行制作，一共12個組件合并制作成一個“變體”組件，之后每次使用時，只需要從左側組件庫中拖拽出“萬能輸入框”組件，通過對輸入框的展示形式進行選擇，基本就能覆蓋大多數的使用場景，無需手動調整，節約了大量的原型設計時間。

正如前面所說，產品設計系統是一個內部產品、也是一種內部共識和一種協作思維方式，即使團隊有了設計規范和組件庫，但是缺乏協作機制，產品設計系統也并沒有形成，設計師、產品經理和工程師三方需要達成內部共識，每個人需要嚴格遵守規范，才能讓整個團隊高效運轉協作，產出高品質的產品。

如果我們的交付的產品質量很差，沒有達到客戶預期，是否應該問自己三個問題：設計師是否有標準的設計規范？

產品經理是否遵循設計規范，使用組件庫搭建原型？工程師是否有可復用的前端組件庫？

在數字化改革的推進過程中，隨著業務協同更緊密、業務融合更深入，產品設計系統作為技術支撐的工具之一，在更多的多跨場景、大應用中將會面臨更多迭代優化的需求，任重道遠。作為產研人員，需要持續沉淀知識體系，基于數字技術、思維和認知，在深刻理解改革命題深意、深諳數字技術支撐的方法和路徑中，提升業務與數字化素養，以更好的產品設計能力、更高的研發效率設計出可動態迭代的開放生命系統。