UED團隊規范設計參考及建議

公司產品線逐漸增多，變動頻繁且并行開發，常常需要設計與開發能夠快速的做出響應。同時這類產品中有存在很多類似的頁面以及組件，可以通過抽象得到一些穩定且高復用性的內容。通過模塊化的解決方案，降低冗余的生產成本。

而標準化規范是達到此目的起點。

在任何行業中一套良好的工作流程不僅可以保證各個階段輸出物的質量，提升工作效率，而且在一定的范疇下針對不同的項目，工作流程具有可復制的特點。如批量生產一款新車型，那就必須嚴格按照一定的汽車設計和生產流程進行操作，各階段通力合作，才能保證汽車品質以及最終的量產。設計行業流程化、規范化程度逐步提高意味著該行業成熟度的不斷提高。

因大企業后臺80%任務場景具有強規律性、可規范性、高復用性等特點，ued與前端共建，進行了規范約定，將常用的任務場景進行框架層的抽象，包括但不限于其布局、內容、交互、實現，框架下的需求內容可靈活定制，不僅大大減少各協作方對相同場景進行重復性的思考及工程投入，縮短了項目開發時間，而且保證項目有高質量和一致性的產出。

先科普下UED：

UED概念及職責略——具體找度娘，UED團隊包括：

• 交互設計師(Interaction Designer)

• 視覺設計師(Vision Designer)

• 前端開發工程師(Web Developer)

個大廠的UED設置都差不多，參考:

• http://ued.ctrip.com

• http://uedc.163.com/

• http://jdc.jd.com/

• http://www.aliued.cn/

• http://ued.qq.com/

要制定UED的標準規范，首先的從設計和交互入手，我覺得產品的靈魂源于設計，骨骼源于交互。而從源頭把控和規劃，才能從根本解決問題。

例如：組件、模塊、復用等問題

典型的例子：

• 從設計優化開發工作 扁平化——去圓角陰影 材質 比如.5xp 與1px ——參看《Retina真實還原1px邊框的解決方案》

• 交互優化設計及開發工作 典型案例：順豐彩組合支付原來22中組合策略優化。

• 如何復用現有資源 節慶換膚、營銷迭代改版

參考案例：

• Ant Design ：一個服務于企業級產品的設計體系，基于『確定』和『自然』的設計價值觀和模塊化的解決方案，讓設計者專注于更好的用戶體驗。

• Material Design  ：每個設計決策背后都會有一系列的邏輯作為支撐

而很多公司無法推行一套專業的設計流程，造成設計師專業度難以提升。設計師在接到需求的時候就直接上手開始做，沒有前期的分析和研究，做完了事，專業度沒有保證。

交互規范：首先需要做的工作： 需求分級規范：設計部門會接到大大小小需求不同的項目，而項目大小的不同也直接對應著設計流程的繁簡，評審人員與審核標準 流程規范：交互設計是否參與前期產品設計規范、設計是否需要交互參與及評審、定稿機制。 根據不同等級，走不同流程   例如：重點項目設計流程、敏捷設計流程、極簡設計流程 參考案例：

• 短兵相接勇者勝 — 緊張項目管理策略

• 場景中臺化助力提升上下游協作效率

• 復雜產品的設計策略

• 交互設計的規劃流程

• 無規矩、不方圓——大眾點評UED團隊的設計流程規范

模塊化設計規范 標準化模塊設計

模塊即是零件，動線即是圖紙；使用不同的模塊與動線，即可組成滿足不同需求的場景 如何推動模塊與動線設計？

• 模塊設計原則

• 交互組合原則

參考案例：

• 大促分會場-模塊化設計方法總結

• 如何制作交互組件庫

• 組件化設計思維 – 從規范到工具的構建與探索

• HAWK 供應鏈工作臺設計語言及開發框架整體方案

交互文檔規范制定我們現在的產品只要 很低保真原型圖，在交互上很容易錯過細節。需要開發、設計去仔細琢磨產品，來回往復看。特別是新人接手，需要重新進行業務知識大培訓。 產品及交互，需要給出清晰準確的數據流程及交互流程給設計及開發人員，而這些若有一套標準準則，則更利于規范與理解 比如：

圖片上傳失敗

重試

圖片上傳失敗

重試

設計規范

圖片上傳失敗

重試

設計規范

• 設計原則——設計的標準準則 板式架構（間距 留白  對齊）、 字體 、色彩等規范 參考案例  “范”柵格（HTML5 UI柵格研究） MXD logo設計規范–MXD Big Day

• 設計模式——精練問題的一般解決方案 在企業級業務中使用設計模式，能大幅度提升研發團隊的確定性，節約無謂的設計且保持系統一致性，讓『設計者』把創造力專注在最需要的地方。

• 設計資源——圖庫、模板、基礎色板（產品級色彩體系）

文檔規范為保證設計稿質量以及可傳承、易上手等特點，設計師輸出的文檔也需要一套輸出規范和模版。    標注規范    圖層命名規范    文檔格式規范 參考案例： 網頁設計與重構那些事兒【基礎篇】(原創技巧)設計與交互本人所知有限，不多談。現在來看看前端 思考案例：

• 紅綠燈與設計規范

• 互聯網金融體驗設計方法庫

• 如何讓設計效果可量化

• 在整理設計規范中變強

前端規范首先得講CodeGuide html+css+js GuideLines代碼標準規范  制定 重點：

• html 結構規范 ——嵌套層級規范、語義化 屬性類規范 組件化——封裝標準  

• css   命名規范 權重、層疊規范  布局 css嵌套

• js 命名規范  注釋規范  封裝  模塊化 語法

參考標準  

• alloyteam  推薦

• imweb

規范文檔應具備可操作性，同事配備檢驗工具（JSLint、CSSLint） 工程規范 框架/庫 ——應用框架設計  項目是初始化構建模板（yeoman） 接口規范—— rap接口管理 mock規則設置   readme——         1、項目背景——業務概述         2、工程結構         3、測試、打包 操作 說明 代碼校驗——工具化 JSLint  CssLint   上線報告——風險報告，如：兼容性評估報告，性能測試報告（原順手付錢包改版后，領導還是反應慢，然后出具測試報告，精準展示前端性能） 運營監測——betterJS  異常自動回饋運營   前端項目驗收標準 現在的項目完工后，沒有對項目進行標準化操作。 比如注釋規范，工程結構規范，代碼規范。 以及頁面性能是否達到用戶可接受范圍。 比如，騰訊， 團隊方向   重點分工 商業公司養一個純研究性的團隊不現實，可以讓不同人員負責不同領域的重點研究。比如偏CSS，偏JS，偏架構 梯隊人才培養 目前前端技術框架層層不窮，我們需要一個文檔的技術開發框架，同時要讓幾個有余力的同事去研究當今前沿的技術框架。及熱點庫的熱點更新。 導師制度   帶新人、技術分享等 工程模板案例 構建成熟的技術框架實例。初始化后即可在適應新項目的初始化開發。

原文地址：UED團隊規范設計參考及建議 - 模型設計,領域設計,軟件設計, - 周陸軍的個人網站

文有不妥之處，請告知