换个角度聊效率

首发于微信公众号《前端成长记》，写于 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)