继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

electron可视化桌面脚手架的设计

longming
关注TA
已关注
手记 1
粉丝 3
获赞 4

可能你用过vue cli、create-react-app等脚手架快速生成项目,可你用这样的吗?

http://img.mukewang.com/5f5ee2c60001f38913290709.jpg

项目背景:

当你的团队经常需要为甲方爸爸重复地做一些类似的项目或者自己偶尔会接一些差异不大的外单,那这个时候有一个能快速生成自己想要的项目工具还是有必要的

这里主要大家介绍一下这个项目从需求的开始到设计的流程哈

开始

一个项目从零到1,先是想法的开始,想什么,解决什么需求:

  • 我要在桌面快速生成想要项目类型。

  • 我想学一下electron的开发,想研究一下vue cli等脚手架的原理,搞一个桌面级来玩

我们来整理一下,脚手架大概的产品架构:

http://img4.mukewang.com/5f5ee2e30001f07c10820883.jpg

把操作的流程图画出来

http://img.mukewang.com/5f5ee2e40001466621150530.jpg

现在我们大概知道这个项目的比较清晰的结构和功能了,接着我们开始把画一下草图原型


原型草图

我们随便用笔或者画图应用简单画几个框框,画几条线连起来标明流程,看,完成了

http://img4.mukewang.com/5f5ee2e500018abd36212392.jpg

草图原型完成了,接下来我们就要做点UI设计了

UI 设计

参考一些觉得不错的应用参考,用sketch(figma,XD都行)照葫芦画瓢

http://img.mukewang.com/5f5ee2e7000158e920000377.jpg

还没完,为了接下来开发的方便:什么组件化、规范化、更换主题等等,我们还得对设计资源做点整理

颜色和图层样式

http://img1.mukewang.com/5f5ee2e70001cd6a12800658.jpg

字体样式

http://img1.mukewang.com/5f5ee2e80001263f12800631.jpg

icon图标

http://img3.mukewang.com/5f5ee2e80001d02012800424.jpg

图标部分可以考虑做成 图标字体库

组件栏

http://img.mukewang.com/5f5ee2e90001014831180970.jpg

设计得七七八八了,我们得做点交互设计

交互设计

把设计稿先处理一下导入principle(或者其他交互应用),把交互动效做起来

初始化

http://img2.mukewang.com/5f5ee3090001458301650026.jpg

导航和内容的交互

http://img2.mukewang.com/5f5ee31000010a6d01650026.jpg

**项目的创建**

http://img1.mukewang.com/5acb3c8700013dc501600160.jpg

交互做好了我们得把需求文档给整理一下,方便开发的时候查阅和记录等

需求到设计就到这里哈,思考一下这个项目的价值和难点在哪

文档整理

需求文档是在草图原型画好之后开始做的,到这边再做个补充优化修改等

大概是这样

http://img2.mukewang.com/5f5ee3200001f2d012800792.jpg

最后把需求文档,设计资源和规范、交互设计文件+动图,通过上传到蓝湖,就可以交付协作开发者一起做啦

资源获取

拉到文章最后关注公众号「前端小手册」

回复:脚手架

就能获取所有 :

需求文档 word | pdf

设计稿:页面、组件,图标、UI规范、标注

principle的交互动画文件,还有 gif 和mp4

推荐阅读

如何从0到1打造一个小前端团队工程化服务环境

http://img1.mukewang.com/5f5ee3300001e96412800493.jpg

感谢你们的关注

最后是非常非常的希望能获取你们的关注啦啦~~~

你们小小关注就是我们大大的动力啊,我们会给你们持续地推送原创和好文

这个是我们公众号的二维码

http://img2.mukewang.com/5f5ee3310001a42a11040470.jpg



打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP