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 命名規範  註釋規範  封裝  模塊化 語法

參考標準  

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


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

文有不妥之處,請告知


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章