Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

换个角度聊效率 #51

Open
ChenJiaH opened this issue Jan 22, 2020 · 1 comment
Open

换个角度聊效率 #51

ChenJiaH opened this issue Jan 22, 2020 · 1 comment
Labels
share 分享内容

Comments

@ChenJiaH
Copy link
Owner

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

@ChenJiaH ChenJiaH added the share 分享内容 label Jan 22, 2020
Copy link

test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
share 分享内容
Projects
None yet
Development

No branches or pull requests

2 participants