设计组-前端课程

1. 前端界面设计

1.1 做开发不能只会敲代码

虽然我们的专业是偏向编程的，但是我们要学的可不仅仅只是编程。就我而言，我是软件工程专业的，如果只是想让我们当个程序员，那么为什么这门课还要叫软件工程呢？叫软件编程专业岂不是更直接。

以上是瞎balabala的，纯粹吊胃口。

我个人认为，一个好的程序员/工程师=产品思维+设计能力+编程能力。
其实前端这个词覆盖面很广，web端、客户端、Android端、IOS端等等都有涉及到前端。作为设计组的分享课，再结合大家的专业，我这篇博客重点放在web前端的设计和编程。

1.2 设计不能想当然的乱来

在做设计的时候，可以脑洞大开。来一场头脑风暴，然后将自己想到的东西记录下来。但是！在你实际去做的时候，一定要记得把之前想当然的东西与实际标准结合。毕竟那些标准都是前人通过不断地尝试、调查得来的。（当然，这里不否认创新，如果你创新出来的东西能让大众认可，这也是非常鼓励的。）

1.2.1 设计的重要性

1、对网站建设运营的作用

其实网站最终能否运营成功或者说盈利比较好，与其在百度上的排名有着密切的联系，换句话说就是有排名网站能够持续运营，没有排名，网站最终也会经验失败。网站设计对于网站建设和优化而言，有着非常重要的作用，主要体现在网站框架和结构布局上。特别是对于模板网站建设来说，如果这种形式的设计会在互联网上和其他众多的网站具有类似性，那么这个网站就比较难赢得百度的青睐，因为太多雷同的网站显然不容易吸引蜘蛛。
另外网站的描述、标题以及相关的MATA设置等细节工作同样也会对网站的优化产生负面影响。同时还包括了网站关键词的选择等。选择合适的关键词能够有效降低优化的难度，同时还能够适当的找到符合网站的目标用户，降低网站的优化难度。所以网站设计对网站优化具有最大的影响。

2、对网站建设用户体验的作用

简洁的网站可以让用户打开网站之后，可以以舒适的方式浏览和阅读网站，同时还需要具备良好的打开速度，用户能够在较短的时间找到相应的网站内容。而且这些内容的网页架构和整体设计都能够符合用户的操作习惯。比如我们中国人大多数使用右手，那么相关的布局就应该以右手操作习惯为主，同时为了节省用户的访问时间，一方面要设计更加全面的导航栏目，另一方面还需要构建站内搜索，从而有效的提升用户体验。

3、设计才是良好网站建设运营的基础

虽然我们知道了网站设计对于网站运营期的重要影响，但是怎样的设计才能够不对运营期产生负面影响，而是产生积极的作用呢?我认为只需要注重下面的原则即可。那就是要符合用户习惯，能够对用户产生吸引力。具有一定的个性化，同时内容丰富，质量较高，这些都会对网站的运营产生非常积极的影响，并能够为日后的运营起到巨大的帮助。

1.2.2 基本常识

一、前端视觉

对于那些刚刚触及网站前端设计的人来说，他们总是认为界面设计越漂亮越好。这是一种非常不合理的设计方法。在早期，网站的视觉表现将使用一些闪光。闪烁的动画是各种颜色和丰富多彩的网站的组合。用户的审美观念已经转移到时尚方向。因此，设计网站以更接近这个方向，设计一些高调的网站而不是一些俗气的特效。由于界面效果对网站的内容没有帮助，这些内容的唯一作用是阻碍用户访问网站的信息内容，这浪费了用户的时间并造成不良印象，从而提高了跳出率网站。

二、字体方面

设计网站界面不同于设计普通平面工程。设计网站需要相对简单和简单的字体，比如系统默认的黑体、宋体、楷体等，因为根据网站字体的调用规则，网站上使用的字体必须在计算机中。已经，如果用户的计算机上没有字体并且在设计网站时调用了字体，那么它将无法正常显示，并且系统默认字体将被显示，因此字体的存在没有意义，所以在设计时一个网站，你不能使用其他字体，你只能使用用户计算机上已有的系统默认字体。

在这些默认字体中，有serif字体和sans serif字体。 Serif是一种字体表达形式。像黑体这样的水平和垂直笔画更适合设计页面新闻标题和网站。导航。特别是，当您增加文本的大小时，可以使文本组件看起来很重且很明显。宋体结构相对纤细，当字体较小时，文字结构仍清晰可见。因此，它更适合作为网站的文本来设计，节省空间和显示更多的文本内容。

三、所用图片的尺寸与规格

图片不是网站不可或缺的元素。甚至视频网站都与图片密不可分。图片使网站丰富多彩。网站设计公司需要使用图片来表达某些风格的效果。有些设计人员在设计界面时不满足要求。某些图像的大小超出正常范围，导致界面加载缓慢。我们需要知道，如果已加载网站的内容，则尚未加载该界面。什么样的效果会发生，网站会非常凌乱。因此，在设计网站的前端界面时，应尽量减少图像的体积，确保图像的打开顺畅！

以上三点源于网络。

1.2.3 原则及规范

这两部分内容比较多，而且这玩意也不是我造的，我就直接上链接了

一、设计原则

点击查看

二、设计规范

点击查看

1.2.4 原型设计

上面呈现了设计
作为设计组的成员，必须要知道原型这个玩意。至于它的官方解释呢，点击查看

我个人对它的理解就是通过制作工具使用低保真或高保真的方式将你想要做的产品的功能逻辑或界面展现出来，让用户或者开发人员更好的了解你想做的产品。
这是一个项目的基础也是关键。

那么我们为什么要用原型呢？

我们可以把它视为一种沟通工具，毕竟你要向用户或开发人员展示你的山坡时，文字和图片不一定能很好的表述。

1.3 设计工具

设计:

• PS

原型：

• Axure RP
• 墨刀
• 摹客
• Adobe XD

2. 前端基础知识介绍及学习

下面这三个你可以找相应代码进行讲解，然后推荐学习网站。

2.1 HTML

教程：

• w3school教程
• 菜鸟教程

2.2 CSS

教程：

• w3school教程
• 菜鸟教程

2.3 JS

教程：

• w3school教程
• 菜鸟教程

3. 前端进阶

框架使用：

Vue.js-国人开发，文档非常友好

React.js-facebook开发

Angular.js-Google开发

4. 现场案例、工具

案例：

案例你可以自己拿你做过的东西展示。如果内容比较少，可以分别展示HTML、CSS、JS

工具：
IntelliJ IDEA

IDEA的功能我感觉是比较强大的，Java、php、C等等很多都可以使用。建议安装。
WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

5. 前端学习经验分享

描述自己的学习心得。

最后，课程可以分为理论和实操两部分，前半部分可以作为PPT理论讲述，后半部分的编程及工具可以作为实操，打开编程软件现场操作给大家看，还有可以再加上打开浏览器，通过浏览器对网页进行修改。