前言

随着互联网的不断发展，设计师和开发人员之间的界限越来越模糊。在过去，设计师只需要关注设计方面的工作，而开发人员只需要关注编程方面的工作。但现在，设计师需要具备一定的开发知识，以便更好地与开发人员合作，共同完成项目。接下来讲一些基础知识拆分为车架/外壳/动力系统进行讲解，希望通过具象化的策略帮助各位同行理解前端知识。

设计师理解开发知识的难点

设计师可能不熟悉开发中使用的技术术语和概念，例如编程语言、技术框架、数据库等。这些术语和概念对于开发人员来说非常熟悉，但对于设计师来说可能比较陌生，需要花费一定的时间和精力去理解。

设计师可能对于某些技术实现的复杂性感到困惑或者无从下手。例如，设计师可能不了解如何使用代码实现某个功能，或者不知道如何集成不同的技术框架。这些问题需要通过学习和实践来逐步解决。

设计师可能无法理解开发人员使用的术语和技术，而开发人员可能难以理解设计师的想法和需求。在这种情况下，需要通过积极的沟通和协作来解决问题。

很多时候无法理解某些技术在实际应用中的优缺点，以及如何解决实际问题。在这种情况下，需要通过实践和学习来积累经验，并且与开发人员保持合作，共同解决问题。 在实际工作中，设计师需要不断学习和掌握开发知识，以便更好地与开发人员协作，完成项目的开发和实现。同时，设计师也需要保持开放的心态和积极的态度，不断学习和探索，提高自己的专业素养和实践能力。

基础认知

常见的WEB端的基础开发分为HTML，CSS,以及JavaScript：

1. HTML：方便对便对网页的结构进行调整。这里具象化为车架还有底盘。
2. CSS：需要了解对网页样式，例如：字体大小，颜色等等。这里具象为车。
3. JavaScript基础：UI设计师需要了解JavaScript的基本语法和常用API，以便在设计过程中实现一些简单的交互效果和动画效果。这里比喻为发动机和传动系统。

车架+底盘

HTML是HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。HTML使用一系列标记（tag）来描述网页中的各种元素，例如文本、图像、链接、表格等等，通过浏览器解析这些标记，最终呈现出整个网页的样式和内容。 HTML标记通常由一对尖括号（< >）和一个标记名组成，名通常表示标记的类型，例如表示一个HTML文档的开始，表示文档的头部，表示文档的主体部分。 除了标记名之外，标记还可以包含一些属性，用于描述标记的一些特性和属性。例如，标记用于插入图像，可以包含src（图像的URL）、alt（图像的说明文字）等属性。 HTML标记语言非常强大和灵活，可以通过各种标记和属性来实现各种不同的功能和效果，例如创建表格、列表、链接、表单等等。同时，HTML也是一门相对容易学习的编程语言，可以为初学者提供一个良好的入门门槛，帮助他们了解网页开发的基础知识和技能。

车身

CSS是Cascading Style Sheets（层叠样式表）的缩写，是一种用于描述网页样式的语言。CSS可以为HTML文档中的各种元素（包括文本、图像、背景等）定义不同的样式和布局，从而改变它们在浏览器中的外观和行为。 CSS中的样式通常由一对花括号（{ }）和一些属性-值对组成，例如：

plaintextCopy code
h1 {     color: red;     font-size: 24px; }

这个样式表示将所有的h1标题颜色设为红色，字体大小为24像素。其中，color和font-size是样式属性，red和24px则是对应属性的值。这些属性和值的组合可以控制元素的字体、颜色、边框、内边距、外边距、定位等等方面的样式。 CSS还支持选择器的使用，可以根据元素的标签名、类名、ID等属性来选择特定的元素，并对其应用样式。例如：

plaintextCopy code
p {     color: blue; }

这个样式表示将所有的p段落文字颜色设为蓝色。而如果想仅对class为content的元素应用样式，可以这样写：

plaintextCopy code
.content {     font-size: 16px; }

CSS的强大和灵活性使得它成为现代网页设计中不可或缺的一部分。通过CSS，设计师和开发人员可以轻松地控制网页中各个元素的外观和行为，从而实现丰富多样的视觉效果和交互特性。

除了基础的样式，还有栅格系统和开发的布局方式

常规的网页布局

盒模型布局：

基于盒模型的布局方式，即将网页上的每个元素看作一个盒子，通过设置盒子的宽、高、内边距、外边距、边框等属性，来控制元素在网页上的布局。

浮动布局：

通过设置元素的浮动属性，使元素脱离文档流，从而实现多列布局等效果。

定位布局：

通过设置元素的定位属性，来控制元素在网页上的位置，常用的有相对定位、绝对定位和固定定位等。

弹性布局：

基于 CSS3 弹性盒子布局模型，通过设置元素的弹性属性，来实现网页的自适应布局。

网格布局：

基于 CSS3 网格布局模型，通过设置网格列数和行数，以及各个网格元素的位置和大小，来实现网页的复杂布局效果。

栅格栏

前端中的栅格布局可以通过使用CSS框架来实现，比如Bootstrap、Foundation等。这些框架都提供了栅格系统的封装，使得开发者可以通过简单的HTML和CSS代码，实现网页的栅格布局。 以Bootstrap为例，它的栅格系统基于一个12列的网格布局，可以通过在HTML中使用<div>元素和一些预定义的类来创建栅格布局。具体实现步骤如下：

1. 在HTML文件中引入Bootstrap的CSS和JS文件。
2. 在HTML文件中使用<div>元素创建需要的栅格布局，将每一行分成12列。

htmlCopy code
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

前端中的栅格布局可以通过使用CSS框架来实现，比如Bootstrap、Foundation等。这些框架都提供了栅格系统的封装，使得开发者可以通过简单的HTML和CSS代码，实现网页的栅格布局。 以Bootstrap为例，它的栅格系统基于一个12列的网格布局，可以通过在HTML中使用<div>元素和一些预定义的类来创建栅格布局。具体实现步骤如下：

1. 在HTML文件中引入Bootstrap的CSS和JS文件。
2. 在HTML文件中使用<div>元素创建需要的栅格布局，将每一行分成12列。
3. 根据需要，可以在<div>元素中嵌套其他元素，实现更复杂的布局。

htmlCopy code
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

htmlCopy code
<div class="container">   <div class="row">     <div class="col-6">1/2</div>     <div class="col-6">1/2</div>   </div>   <div class="row">     <div class="col-3">1/4</div>     <div class="col-3">1/4</div>     <div class="col-3">1/4</div>     <div class="col-3">1/4</div>   </div> </div>

在这个例子中，我们使用了.container来创建一个容器，.row来表示一行，.col-6和.col-3来表示每个列的宽度。.col-6表示该列占据6个网格，即栅格系统的1/2宽度，.col-3表示该列占据3个网格，即栅格系统的1/4宽度。

1. 根据需要，可以在<div>元素中嵌套其他元素，实现更复杂的布局。

htmlCopy code
<div class="container">   <div class="row">     <div class="col-6">       <div class="card">         <div class="card-body">           This is a card.         </div>       </div>     </div>     <div class="col-6">       <div class="alert alert-info" role="alert">         This is an alert.       </div>     </div>   </div> </div>

在这个例子中，我们在.col-6元素中嵌套了一个.card元素和一个.alert元素，实现了一个简单的栅格布局。 通过使用Bootstrap的栅格系统，开发者可以快速实现网页的栅格布局，提高开发效率。

发动机和传动系统

JavaScript是一种基于对象和事件驱动的脚本语言，用于在网页中添加动态和交互性。它是一种解释型语言，可以直接在浏览器中运行，而不需要编译成机器码。JavaScript可以用于处理网页中的各种事件和数据，例如鼠标点击、表单提交、页面加载等等，从而实现动态效果和交互特性。 JavaScript最初是由Netscape公司开发的，最初被称为LiveScript，后来改名为JavaScript。现在，JavaScript已经成为Web前端开发的核心语言之一，被广泛用于网页交互、动态效果、数据处理等方面。 JavaScript是一种灵活、易学、易用的语言，它支持面向对象的编程风格，同时也支持函数式编程风格。JavaScript可以与HTML和CSS无缝集成，通过DOM（文档对象模型）和BOM（浏览器对象模型）等API，可以访问和操作网页中的各种元素和属性。 JavaScript还有很多优秀的框架和库，例如jQuery、React、Vue.js等，可以帮助开发人员更加高效地完成各种任务。同时，JavaScript也在不断发展和改进，例如ES6和之后的版本，引入了许多新的语法和特性，使得JavaScript更加强大和易用。

其中动画是一个比较难实现的点

动画

动画实现方案有以下

1. 使用CSS3动画：CSS3提供了丰富的动画效果，通过设置animation属性和关键帧，可以实现复杂的动画效果。在JavaScript中，可以通过操作CSS样式来控制CSS3动画的播放。
2. 使用JavaScript定时器：JavaScript提供了setInterval()和setTimeout()两个定时器函数，可以通过这两个函数来控制动画的播放。例如，可以使用setInterval()函数来定时更新元素的位置从而实现动画效果。
3. 使用JavaScript动画库：JavaScript动画库如GreenSock、Velocity.js等提供了丰富的API和动画效果，可以帮助我们更方便地实现动画效果。

如何更好的交付

设计稿的规范性：设计稿需要规范，包括设计稿的尺寸、颜色规范、字体规范、间距规范等。这样可以确保开发人员能够准确地理解设计稿并按照设计要求实现。

设计稿的可读性：设计稿需要具有良好的可读性，包括标注清晰的页面布局、交互效果、按钮状态、输入框样式等。这样可以帮助开发人员更快地理解设计师的意图并快速地将设计稿转化成代码。

设计稿的标注：设计稿需要提供清晰的标注，包括注释、样式名称、字体大小、颜色等。这样可以帮助开发人员更好地理解设计师的意图，减少交流成本。

设计稿的规范格式：设计稿需要按照一定的规范格式进行交付，包括文件格式、图层命名规范、图片大小等。这样可以使开发人员更方便地进行开发，并减少因为格式问题产生的交流成本。

设计稿的版本控制：设计师需要对设计稿进行版本控制，确保开发人员使用的是最新的设计稿，以避免因为设计稿版本问题导致的开发延误。

总结

当设计师懂得开发知识时，他们可以更好地理解开发人员，更好地协调项目进度，从而提高项目的质量，降低项目的成本。写出来希望对同行有所帮助，如果有哪里的理解或者是代码写错了，请留言指正。

Powered by Froala Editor