【效率】2B系統的全棧設計工作流——以Sketch為生產力工具

03-10

0.起因：

想要採用新的工作流的原因是近期在做內容運營系統的產品經理工作時，經歷了一個正常版本工作流的迭代，即產品經理梳理需求-交互設計師設計交互稿-前後端分離進行開發-測試-上線。而我們項目組的視覺設計師目前只有一位，加上2B後台系統對視覺的要求極低，視覺設計師在之前版本給出一版視覺規範後就不再跟進項目了。這樣導致開發按照交互稿實現的界面出現了很多視覺問題，雖然2B後台系統不需要表現層上的好看，但是也需要整潔舒適，不能出現「歪瓜裂棗」的界面。

因此在一個版本的開發後，我提出在這個2B平台的開發中採取全棧設計工作流的方式，即產品設計的模塊合起來由一個人完成，這樣做的原因有三：

（1）參與這個後台系統產品設計的人員過多，包括產品經理、之前版本的產品經理、交互設計師、以及對這個產品有需求的其他產品線產品經理，導致需求管控困難，權責不明確。同時每次變更要走多個流程，效率很低。

（2）後台系統的視覺需求不高，但也需要有視覺規範地去實現。專門為後台系統做視覺設計意義不大，因此可以嘗試視覺設計要求不高的全棧設計模式。

（3）目前的產品迭代周期效率不高，來自上游或其他系統的需求改動需要經過多個流程，每個版本迭代需要1個半月以上。

基於以上原因，在該2B後台系統的新版本需求設計中採取全棧設計的模式進行了嘗試，嘗試的總結和心得如下文。

1.工具選擇：

我在研究生階段的我們自己團隊的創業項目中嘗試了用Sketch直接畫帶有部分視覺樣式的交互稿，並且在後期直接在Sketch交互稿的源文件上直接調視覺效果的工作方式。不得不說這種方式非常適合創業團隊，節省了交互和視覺需要各畫一遍界面的過程。而且Sketch靈活的操作體驗本身也給產品設計帶來了很大樂趣，方便靈感迸發和設計修改。

但是在實際工作和開發交接需求的時候，Sketch在設計標註、界面間流程關係的表達上的欠缺和層級關係表達的缺失就比較成問題了。而我最近發現工具OverFlow可以完美解決流程、標註、導出上帝視角全畫板這些問題。並且OverFlow和Sketch高度聯動，可以從Sketch中直接導出artboards到OverFlow中並實時更新界面變化的特點也使得產品設計流程更加高效。

因此我最終選擇的工具流程是：用Sketch畫帶有視覺樣式的交互稿——用OverFlow添加交互說明、界面流程——用OverFlow進行演示及評審——在Skech上修改、細化視覺細節——用OverFlow補充詳細的產品邏輯說明——共享線上版本需求稿+用Sketh插件輸出的帶有視覺規範的視覺稿（mearsure或者阿里的Kitchen/Dapollo）。

推薦Sketch插件：阿里Kitchen（直接選擇iconfont庫里的icon，用圖片填充形狀、頭像等）
推薦工具：Overflow https://overflow.io/?gclid=Cj0KCQiA1sriBRD-ARIsABYdwwGME6KEb66fv0pswGYX8sgBPgn2Cnd0zkub_np1mDtenK-wtr-iuC0aAnFNEALw_wcB

2.工作流

在按照我的思路進行學習的過程中接觸到了原子設計、設計系統等概念，其中Brad Frost提出了Atomic Design的概念，而Airbnb在實踐中創建了設計系統DSL，並且給出了關於設計系統創建過程和應用實踐的總結https://airbnb.design/building-a-visual-language/

經過學習整理後，我得出做一個系統的工作流為：