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

時間 2019-12-14

標籤 ued 團隊規範設計參考建議简体版

原文原文鏈接

公司產品線逐漸增多，變更頻繁且並行開發，經常須要設計與開發可以快速的作出響應。同時這類產品中有存在不少相似的頁面以及組件，能夠經過抽象獲得一些穩定且高複用性的內容。經過模塊化的解決方案，下降冗餘的生產成本。

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

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

因大企業後臺80%任務場景具備強規律性、可規範性、高複用性等特色，ued與前端共建，進行了規範約定，將經常使用的任務場景進行框架層的抽象，包括但不限於其佈局、內容、交互、實現，框架下的需求內容可靈活定製，不只大大減小各協做方對相同場景進行重複性的思考及工程投入，縮短了項目開發時間，並且保證項目有高質量和一致性的產出。

先科普下UED：

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

交互設計師(Interaction Designer)
視覺設計師(Vision Designer)
前端開發工程師(Web Developer)

個大廠的UED設置都差很少，參考:

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

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

典型的例子：

從設計優化開發工做扁平化——去圓角陰影材質好比.5xp 與1px ——參看《Retina真實還原1px邊框的解決方案》
交互優化設計及開發工做典型案例：順豐彩組合支付原來22中組合策略優化。
如何複用現有資源節慶換膚、營銷迭代改版

參考案例：

Ant Design ：一個服務於企業級產品的設計體系，基於『肯定』和『天然』的設計價值觀和模塊化的解決方案，讓設計者專一於更好的用戶體驗。
Material Design ：每一個設計決策背後都會有一系列的邏輯做爲支撐

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

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

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

模塊便是零件，動線便是圖紙；使用不一樣的模塊與動線，便可組成知足不一樣需求的場景如何推進模塊與動線設計？

模塊設計原則
交互組合原則

參考案例：

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

圖片上傳失敗

設計規範

設計原則——設計的標準準則板式架構（間距留白對齊）、字體、色彩等規範參考案例「範」柵格（HTML5 UI柵格研究） MXD logo設計規範–MXD Big Day
設計模式——精練問題的通常解決方案在企業級業務中使用設計模式，能大幅度提高研發團隊的肯定性，節約無謂的設計且保持系統一致性，讓『設計者』把創造力專一在最須要的地方。
設計資源——圖庫、模板、基礎色板（產品級色彩體系）

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

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

html 結構規範 ——嵌套層級規範、語義化屬性類規範組件化——封裝標準
css 命名規範權重、層疊規範佈局 css嵌套
js 命名規範註釋規範封裝模塊化語法

參考標準

alloyteam 推薦
imweb

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

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

文有不妥以前，請告知