概述

HTML 和 CSS 是网页前端页面布局和样式定义所使用的编程语言，也是 UI 设计师要尽可能学习和掌握的基础知识之一。

理论上来说，术业有专攻，现代团队只有分工明确才有生产效率。但为什么要求设计师也要懂 “编程” 呢？

简单概括就是代码的实现逻辑是制约 UI 设计的重要因素，掌握得越多，对于设计可用性的理解也就越深。就像建筑设计必须需要了解工程力学、产品设计必须了解材料学和生产工艺。

设计是建立在一系列限制下的视觉解决方案，如果不了解这些限制条件，那么设计就只能停留在方案阶段而无法最终实施，或者最终的实施结果和预期南辕北辙。

尤其是 UI 设计到产品落地的真实项目中，如果缺乏必要的知识，就无法和前端有效的沟通和协作，导致最终还原度崩塌，或严重拖累项目开发进度。

而前端语言总类很多，除了网页还有 iOS、Android 端，以及桌面的 Windows、MacOS 等，学习并掌握所有前端语言并不现实，但它们搭建页面、制定样式的编程逻辑是相通的，就像学习 UI 设计软件掌握其中一个再理解其它软件是没有门槛的。

所以 HTML CSS 就成为设计师了解前端页面编程流程、思路的最佳对象。它包含的优势有：

• 逻辑简单，只是脚本和记事语言没有复杂的逻辑，可以快速上手
• 上手容易，不用安装复杂的编译环境和软件用任何轻量化编辑器都可以编写并预览
• 便于参考，可以随时从线上网站参考它们的相关代码是如何编写的

学习 HTML CSS 并不是让大家在真实项目中编写网页页面样式，仅仅是了解它们的编写逻辑，并自己动手做一些练习即可，一周以内就能完成。

对于投入的时间和成本，可以在未来获得远超预期的收获。包括：

• 了解前端开发思路，更好的和前端沟通和高效协作
• 能判断设计的可用性，提前优化方案的可行性不用反复改稿
• 为建立专业设计规范做好准备，加速项目的整体开发效率和质量

下面，我们就更具体的介绍一下 HTML 和 CSS 的基础概念。

UX百科内部交流群已开启，有任何体验问题或者学习问题可以加群交流：