零基础学网站设计，先搞懂这几个基础概念

很多零基础想要学习网站设计的朋友，一开始很容易陷入一个误区，认为网站设计就是做好看的图片、做炫酷的动画。上海雍熙深耕高端网站建设十八年，服务 120 多家上市公司，落地宁德时代、宇通客车、科大讯飞、正泰电器等大量企业官网项目，在大量项目实践当中发现，不管是个人自学网站设计，还是企业市场人员了解建站知识，第一步不是学作图，而是把底层基础概念理解透彻。只有分清各个岗位、各个模块到底是什么，才不会被各类专业名词绕晕，也能避开很多认知陷阱。本文抛开复杂代码，用通俗的语言梳理网站设计入门必须掌握的核心概念，帮零基础的学习者搭建完整认知框架。

一、分清两个核心岗位概念：UI 设计、前端开发

很多新手会把 UI 和前端混为一谈，以为做网页效果图就等于完成网站设计，实际上二者分工完全不同，是网站从想法变成真实可访问页面最重要的两个环节。

1.1 UI 设计：产出网站的视觉图纸

UI 翻译过来就是用户界面设计，简单来说，UI 设计师负责画出网站全部页面的效果图。就好比装修房子，UI 设计师就是出装修效果图的画师，确定网站整体配色、字体大小、按钮样式、图片摆放位置、页面板块排布。我们看到的官网首页长什么样子，产品页图文怎么排布，导航菜单是什么样式，全部由 UI 设计师完成。

需要注意，UI 设计产出的只是静态效果图图片或者设计稿，这个文件只能看图，不能点击跳转，不能提交表单，无法放到浏览器当中打开。很多零基础初学者刚入门只钻研 UI 作图，以为做完效果图网站就完成，这是非常典型的认知误区。效果图只是图纸，并不是可以访问的真实网站。

1.2 前端开发：把图纸变成可操作网页

前端开发，就是将 UI 设计稿还原成浏览器可以正常打开的真实网页，相当于装修里面的施工团队。效果图上的每一个按钮、图片、文字，经过前端处理之后，用户才可以在电脑、手机上点击、滑动、跳转页面，使用留言表单、切换轮播图这些交互功能。

UI 关注好不好看，前端关注能不能用。同样一张设计稿，优秀的前端不仅做到视觉还原，还要处理多设备适配、浏览器兼容、动画交互效果。效果图里面炫酷的 3D、粒子动画，都需要前端工程师实现。零基础学习网站设计，要明白 UI 和前端是两个不同方向，如果想要做完整网页，不能只学视觉作图，也要理解前端能够实现的边界，不要设计现实技术很难落地的效果。

二、网站架构相关概念，看懂网站的骨架

学会看懂网站的骨架，是零基础学习网站设计的第二步。网站不只是一张张页面拼接，它拥有完整的信息架构，其中信息架构、响应式设计、CMS 内容管理系统，是三个最高频的基础名词。

2.1 信息架构：网站的内容组织逻辑

信息架构就是网站内容的组织方式，简单理解就是网站栏目怎么划分，页面之间如何跳转。比如企业官网常见的导航，关于我们、产品中心、新闻资讯、案例展示、联系我们，这些栏目层级关系，页面之间如何互相跳转，就属于信息架构的范畴。

很多新手做网站，上来就纠结页面颜色、图片，忽略信息架构。如果架构混乱，栏目层级太深，访客点三四次还找不到产品，页面再好看也没有价值。B 端企业官网设计尤其看重信息架构，要让客户可以快速找到需要的产品资料、联系方式。学习网站设计，在画页面之前，要先梳理清楚信息架构，确定有哪些页面，页面之间是什么关系。

2.2 响应式设计：一套页面适配多类设备

响应式设计是现代网站设计绕不开的概念。简单讲就是同一个网站，能够根据设备屏幕尺寸，自动调整排版布局，在电脑、平板、手机上面都能正常浏览。

这里要区分一个误区，响应式不等于把电脑页面整体缩小放到手机上。很多低价模板站就是简单缩小页面，手机上文字很小，按钮很难点击，并不是真正的响应式。真正的响应式，PC 端多栏并排的产品卡片，到手机端自动变成单栏纵向排列；电脑横向的导航，手机端收起成折叠汉堡菜单，字号、间距、按钮尺寸全部重新适配，适配手指触屏操作。现在绝大多数访问流量来自移动端，响应式已经是网站设计的硬性基础要求。

2.3 CMS 内容管理系统：网站的后台操作台

CMS 也就是内容管理系统，很多零基础初学者很少接触，但它是网站可以持续更新的核心。我们在浏览器看到的页面叫做网站前台；CMS 就是网站后台管理系统，类似网页版 Word 文档编辑器。

没有 CMS 的情况下，网站想要修改一行文字、更换一张产品图片，就必须找懂技术的人员修改文件。而 CMS 后台可以让不懂技术的运营人员，直接上传图片、发布新闻、新增产品，保存之后前台网站就自动更新。学习网站设计要明白，前台负责给访客看，CMS 后台负责维护内容，两者相互配合。做企业官网，CMS 是必不可少的组成部分。

三、容易被忽视的基础概念：兼容性、用户体验

很多零基础学习者把全部注意力放在视觉效果，却忽略兼容性和用户体验，这两个概念直接决定网站实际使用效果，也是雍熙在众多上市公司项目当中重点把控的环节。

3.1 网站兼容性：保证不同环境正常访问

网站兼容性，指网站在不同浏览器、不同设备、不同操作系统下，页面展示正常，功能可以正常使用。同样一个网页，在 Chrome 浏览器打开正常，换到 Safari 浏览器，或者国产浏览器，会不会出现排版错乱，表单按钮能不能正常点击，都属于兼容性范畴。

兼容性不是只做手机适配，还包含图片视频素材兼容、不同操作系统字体渲染兼容。很多设计稿在设计师自己电脑完美，但是普通客户打开就出现各种问题，就是兼容性没有处理到位。做网站设计的时候，不能只看自己设备的效果，要建立兼容性意识，部分过于新潮的特效，要考虑老旧设备是否支持，必要的时候可以做效果降级，优先保障核心阅读和操作功能。

3.2 用户体验：跳出审美看网站好用程度

用户体验，简称 UX，指访客访问网站全过程当中的整体感受。很多人误以为用户体验就是页面好看，实际上美观只是其中很小一部分。用户体验包含打开速度、找信息是否便捷，按钮好不好点击，表单填写是否简单，动画会不会干扰阅读，页面加载会不会长时间空白等很多维度。

同样的品牌官网，一个页面动画堆砌，访客三秒找不到主营业务；另一个页面简洁清晰，客户快速找到产品和咨询入口，后者的用户体验更好。学习网站设计，不能单纯追求视觉炫酷，要站在访问者角度思考，访客来到网站想获取什么信息，能不能快速拿到，这就是用户体验思维。

四、区分建站模式：模板建站与定制化网站

零基础接触网站设计，一定会听到模板建站和定制建站，分清二者差异，能够避免很多踩坑。

模板建站，就是已经提前做好成套现成网站，用户只需要替换里面的文字和图片，就可以快速上线。优点是价格低、上线速度快，缺点是布局、交互、架构已经固定，很难做大幅度修改，兼容性、性能上限有限，大量网站共用同一套模板，很难做出品牌差异化。

定制化网站，从信息架构、UI 视觉、前端还原全部从零开始，根据品牌需求专门设计开发，雍熙服务的宁德时代、京东方等企业都属于定制官网。定制网站可以完全匹配业务需求，栏目、交互、动画都可以按需调整，兼容性、性能都可以深度打磨，适合对品牌形象有高要求的企业，学习网站设计做实战练习，定制项目可以完整锻炼整套设计思维。

结语

零基础学习网站设计，切忌一上来就埋头练习作图软件。网站设计不是单纯的美工画图，它是视觉设计、信息架构、技术落地、用户体验结合的综合学科。先搞懂 UI、前端、信息架构、响应式、CMS、兼容性这些基础概念，理清网站从图纸到上线完整链路，建立全局思维，后续再学习视觉排版、页面创作，学习路径才会更加顺畅。不管是个人自学网站设计，还是企业想要了解建站逻辑，把这些基础概念吃透，才能看懂网站设计背后的底层逻辑，而不是只停留在 “好不好看” 的表层判断。