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——         一、项目背景——业务概述         二、工程结构         三、测试、打包 操做 说明 代码校验——工具化 JSLint  CssLint   上线报告——风险报告，如：兼容性评估报告，性能测试报告（原顺手付钱包改版后，领导仍是反应慢，而后出具测试报告，精准展现前端性能） 运营监测——betterJS  异常自动回馈运营   前端项目验收标准 如今的项目完工后，没有对项目进行标准化操做。 好比注释规范，工程结构规范，代码规范。 以及页面性能是否达到用户可接受范围。 好比，腾讯， 团队方向   重点分工 商业公司养一个纯研究性的团队不现实，可让不一样人员负责不一样领域的重点研究。好比偏CSS，偏JS，偏架构 梯队人才培养 目前前端技术框架层层不穷，咱们须要一个文档的技术开发框架，同时要让几个有余力的同事去研究当今前沿的技术框架。及热点库的热点更新。 导师制度   带新人、技术分享等 工程模板案例 构建成熟的技术框架实例。初始化后便可在适应新项目的初始化开发。

原文地址：UED团队规范设计参考及建议 - 模型设计,领域设计,软件设计, - 周陆军的我的网站

文有不妥之处，请告知