首發於微信公眾號《前端成長記》，寫於 2020.01.22

換個角度聊效率

PPT地址

內容源自作者上個月部門內部的分享，本文將圍繞著以下四個角色來聊：

• 互動設計
• 視覺設計
• 前端開發
• 後端開發

為什麼要聊這個

京東數科CEO陳生強在杭州烏鎮網際網路大會上說道：產業數字化核心本就是去解決企業的效率問題。

效率的基本保障

所謂“工欲善其事，必先利其器”。有了一些開發工具的輔助，我們能更高效地進行工作。

• 互動設計：Axure 、Sketch 等
• 視覺設計：PhotoShop 、Sketch 等
• 前端開發：WebStorm 、VSCode 等
• 後端開發：IDE 、Eclipse 等

如何提升效率

互動&前端

互動和前端合作起來有個最大的痛點，就是原型更新同步需要人力溝通，出錯率高，所以我們可以通過一下兩種方式來解決。

Axure Interactive Redline Tool

可以類比 Sketch 中的 Measure 外掛。主要優點如下：

• 在某些場景下，根據原型也能獲取到尺寸資訊，這樣可以直接用於開發
• 可以線上分享，線上更新，另外做變動通知

基於 Nginx 搭建區域網一體化文件平臺

互動同學在本機搭建 Nginx 服務，配置好目錄後，每次生成檔案匯出到該指定目錄即可完成更新。前端同學可以通過 IP 完成區域網訪問。這樣都可以避免更新傳遞過程導致的問題。

視覺&前端

視覺和前端合作的時候，有時候會利用率不高，需要重複設計或者重複開發，所以為了解決這個問題，通常會採用下面的方式。

設計元素庫 + 協同修改

在某種程度上統一設計規範，提供多套色系模版，以便快速生成對應的設計元素庫，再配合開發 Sketch 外掛，即可做到實時協同。本質上也是解決的是協同的效率和準確性。

元素 -> 元件 -> 系統模版

有了元素庫以後，元素組合或者調整就可以釋出成新的元件。元件組合加頁面約束就可以生成系統，能夠高效複用，快速完成相似度高的中後臺系統的搭建與開發。

這裡的頁面約束指的是邊距等一些基本設計約束定義。

GUI 工具

使用現有模版或者自行拖拽組合現有的元件，快速初始化對應專案UI及基本互動。這裡可以參考阿里的飛冰。

Sketch 外掛進行釋出維護

通過 Sketch 外掛進行元件的釋出維護，將元件的維護權交給設計端，解決設計稿的還原度問題，解放前端花在 UI 上的時間。

互動&視覺&前端

這裡我們有遇到這麼一個痛點：互動的初稿過程是帶有邏輯性的，如果給產品看原型的話可能不夠直觀，並且說服力不足。這裡我們有一個解決方案如下：

原型 -> 頁面

通過原型匯出成 Markdown 檔案，然後針對該檔案做解析，然後拿到結構自動生成帶導航內容的預覽頁面。

前端

前端也總結了幾種方式來提高效率。

功能抽象，反饋互動和視覺

針對功能性需求，儘可能將其進行抽象，反饋給互動和視覺拓展元件元素，提高複用性。

Git Hooks + ESlint

類似設計，約定一套程式碼規範。在多人協作過程中，通過 BeforeCommit 鉤子，自動進行程式碼質量檢查，保障合作效率。

JSON + 元件 + 頁面約束

通過 JSON 配置來建立元件的引用關係，加上頁面閱讀即可快速高效地生成一些偏固化的流程頁。比如：實名認證、修改密碼、風險評估等。

協議平臺

以前的協議需要設計排版和前端製作，費時費力。通過將協議編譯成 HTML，加上基本的設計約束和設計樣式即可自動生成協議頁面，大大提高效率，節省了時間。

前端&後端

前端和後端最大的一個吐槽點就是介面文件，格式參差不齊，交付方式千奇百怪。

介面文件平臺

前後端的介面溝通往往是最費時且容易出錯的。我們通過程式碼註釋，生成可維護可預覽的介面文件，線上對比測試，降低了出錯率和溝通成本，同時也可以接入 Mock 進行更為完善的測試，節約測試資源。

閘道器平臺

讓後端只需要關心服務提供，前端只需要關心介面呼叫。中間的差異抹平交由閘道器層，同時也支援多介面呼叫，也能提高開發效率。

後端

後端由於只是略有涉獵，在這大膽做兩個設想。

GraphQl + 可行的資料庫設計

之前可能會出現需求微調，導致前後端都需要做欄位更新等操作。引入 GraphQl 後，取什麼資料由前端來決定。介面服務與資料庫的連結可以參考 Restful 風格設計，或者其他可行的設計方式。

結合 GUI 工具快速完成簡單專案

可以利用之前提到的 GUI 工具，通過拖拽實現自動佈局，快速生成無複雜互動的專案，如一些表單專案：EBS、保單填寫等。

做個總結

TODOS

我們首先要做的事：

• 互動和視覺共同約定一套或多套不同場景下的設計語言
• 前端根據設計語言由小到大鯽魚場景進行組合封裝
• 基於設計語言，針對性地拓展效率工具

NEEDS

需要我們長期做的事：

• 每個角色或崗位發現並收集工作中的痛點
• 溝通討論尋找提高效率的解決方案

SUMMARY

在業務相對趨於平穩的時期，提升各方面效率依然可以持續地創造價值。

最後，一句話共勉：有你有我，未來可期。

以上是分享的全部內容，感謝！

（完）

本文為原創文章，可能會更新知識點及修正錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗
如果能給您帶去些許幫助，歡迎 ⭐️star 或 ✏️ fork
(轉載請註明出處：https://chenjiahao.xyz)