肖威洞察 | 针对于前端案例的体系的梳理

7680238-28b4b81a5e8d9099
肖威先生 SuperX CEO

如何在草图3中设计着陆页 - 响应(第5/5部分)
https://www.youtube.com/watch?v=Z7jnXrmS1to&t=768s

最近一段时间将老外的前端页面到代码的流程体系又查看了一遍,在这个课程体系的教学的演示的过程中,还是有很多的不流畅的地方,针对于这个案例,我自己做了一个课程体系的梳理。

这个案例在完成前端的页面的实现的时候,主要包括这样这个步骤,从而更加快速的完成产品的开发。

一、使用 Sketch 工具完成原型图的制作;

1、使用 sketch 工具完成网页端和移动端的原型的设计;
2、使用 css 样式完成基本样式的打板;
3、使用 上色的流程将原型图制作为可见的网页设计图;

在这个地方应该掌握的知识体系是网页端的经典的样式和代码实现的逻辑,以及比较优秀的颜色网站,这是我们需要掌握的一些工具;

二、使用代码编辑器完成网页代码的实现;

1、使用 代码的形式完成骨架的打造
2、使用 样式的形式完成表皮的包装;(介绍 sass 的工具)
3、调整网页端的样式完成移动端的适配;
在这个过程中,我需要掌握的是基本上的样式的修改和可复用的代码的保存

7680238-abb1dc6b23699cd1.png
koala-app.com

http://koala-app.com/index-zh.html
在这个过程中主要有两个部分其实是值得学习的部分,一个人关于图片的引入,一个是关于原型图片的样式,这个地方是基本的样式。

7680238-6e6d7b3f1bafd9e8.png
屏幕快照 2018-08-10 上午8.48.51.png
7680238-a1ff3292c5c7d82f.png
屏幕快照 2018-08-10 上午8.34.55.png
7680238-5e37c6298fed75dd.png
屏幕快照 2018-08-10 上午8.13.05.png
7680238-bd08779ba5420afe.png
屏幕快照 2018-08-09 下午9.07.13.png

前端的技能体系相对来说还是比较好掌握,其中没有涉及到关于产品的逻辑的思考,所以在这个维度体系思考问题,我们如果想要快速的完成前端的代码的实现的关键就是大量的复现有价值的案例体系,从而在这个不断的复现的过程中,开始完成有价值的删减和增添,从而完成自己的产品的打造,从而具备独立完成有价值的产品的创造的能力。

雕爷:我用这个方法,三个月培养出顶级美工!

1 、找出心仪案例;
2 、拆解并做出模型,
3 、凭记忆临摹,
4 、对比找不足;
5 、再次凭记忆临摹直到满意,
6 、周而复始一至五步。

深悦会丨罗子雄@TED:如何成为一名优秀设计师?
https://v.qq.com/x/page/u015460vrfe.html

现在我们所遇到的最大的问题就是我们现在没有一本直接就是最优秀设计的案例集合,然后在这个过程中,每天都在不断的模仿和实践的过程中,我们其实关键就是看的优秀的东西太少,然后我们自己做的东西太少,所以我们没有形成自己的知识体系的结构,这是我们所遇到的最大的问题。

针对于后端的开发其实也是一样,我们的案例太少,然后在这个过程中,复现太少了,所以就难以成为最优秀的个体,这是我们所遇到的问题。

肖威
书写于湖北
2018年8月10日

7680238-a53a167c8861dfaa

猜你喜欢

转载自blog.csdn.net/weixin_34320159/article/details/87803889