企业官网建设流程全解析

年前我所在的团队发过一个招聘需求，岗位名称写了两种叫法：UI设计师、网页设计师。JD里有一句话我特意标了重点——“能独立完成交互原型，具备基础前端知识，可独立完成静态页面搭建”。投作品集的人不少，但真正能坐下来把“为什么这个按钮放这里”“收藏为空时怎么引导用户”“这个弹窗打断操作的成本是多少”讲清楚的人，十个里有两三个就不错了。这一类需要同时具备交互设计能力和编程能力的设计师岗位，这几年越来越常见。它既不是纯视觉设计，也不是纯前端开发，而是处在产品、设计、技术的交界处。如果你正准备入行设计，或者已经是做纯视觉的设计师想往上走一步，这篇文章就是为你准备的。我会把岗位能力模型、两条主要方向、学习路径、面试重点和我在带团队过程中踩过的坑，掰开揉碎讲一遍。

1. 岗位画像：一个既要审美又要逻辑的混合角色

设计的活我干了很多年，最早的时候我们团队有专门的人画图、专门的人写交互文档、专门的人做页面。现在的团队编制越来越精简，很多公司希望一个设计师能打完一套组合拳。这就催生出一种典型的混合型岗位：对外叫UI设计师或网页设计师，对内要求你既懂交互设计，又能用代码验证想法。

这类岗位和纯视觉岗位最大的区别在于，它要求你用“系统的方式”而不是“感觉的方式”做设计。一个页面为什么是三栏布局而不是两栏？用户第一次进来会先看哪里？流程走到一半断网了界面应该是什么样？这些问题靠审美解决不了，要靠交互设计的套路去解决。而编程能力，是为了让你能亲手把这些解决方案验证一遍。

1.1 这类设计师一天的工作内容

我随手列一个我曾经面试过的候选人简历上描述的工作日常，基本能代表这类岗位的常态：

• 早上花半小时看后台数据和用户反馈，看哪些模块有异常点击、哪些流程跳出率特别高；
• 上午参加需求评审，产品给了一堆模糊的设想，要用线框图快速把方案的可行边界理出来；
• 下午画流程图、画关键页面的线框稿，推演登录、空状态、错误提示这些角落；
• 接着打开设计工具做高保真视觉稿，同时留意栅格、间距、字号层级这些规范；
• 如果工作量允许，还会打开编辑器，把某个核心页面用HTML加CSS还原出来，跑一遍看看交互反馈是否和设计一致。

你注意这个描述里的动作：看数据、画框图、推演异常状态、做视觉、写代码。这就是“会交互设计（编程）的设计师”的日常。它不要求你像前端一样精通所有框架，但要求你具备从“模糊需求”走到“可运行原型”的完整闭环能力。

1.2 市场为什么需要这类岗位

这类岗位不是凭空出现的，背后有几个很现实的原因。

一是团队分工支撑不了过细的职能线。很多公司在创业阶段或者项目初期，只有三五个人的小组，产品、设计、开发都是叠加状态。如果交互设计、UI设计、前端开发三个人才能跑完一个页面，人力成本根本承受不住。一个能自己画原型、自己设计、自己还原静态页面的设计师，可以直接压缩依赖链条，让方案更快落地。

二是设计与开发之间的协作损耗确实存在。不懂代码的设计师容易做一些开发需要返工的视觉效果，比如大面积模糊、半透明叠加特别重的背景、无规律的边距系统。懂编程的设计师在设计阶段就能判断一个效果能不能用CSS实现，甚至能自己写Demo跟开发对参数。这个能力在项目紧急的时候尤其值钱。

三是设计系统化、组件化的浪潮。现在做界面基本都在设计工具里搭组件库，组件之间的状态切换本质上就是前端组件的行为定义。会写一点代码，对理解组件状态、理解响应式断点、理解父容器和子元素的层级关系，都有直接帮助。

2. 交互设计能力拆解：不是“会画图”而是“会定义问题”

很多人以为交互设计就是画线框图。实际上，线框图只是最后呈现的产物，真正值钱的是它背后的思考过程。我一般把交互设计基本功拆成四个部分：需求分析与用户理解、信息架构与流程设计、原型与规范交付、设计验证。

2.1 需求分析与用户理解

这部分的核心是搞清楚“谁在用、在什么场景下用、想要完成什么任务”。比如做一个二手书交换的微信小程序，目标用户可能是大学生，场景可能是宿舍里想换专业课教材、想省下买教辅的钱。这时候首页就应该把“换书入口”和“热门教材分类”放在最显眼的位置，而不是把社区发帖放在第一位。

我常跟设计师说的一句话是：设计之前先把一句话说清楚——“这个页面帮用户在什么场景下完成什么目标”。这句话写不明白，后面画什么都容易跑偏。需求分析不是产品经理的专属，设计师拿到需求后也要做这一步：读需求文档、问清楚优先级、翻之前的数据报告、或者自己找两三个目标用户聊十分钟。

2.2 信息架构与流程设计

这是交互设计里最容易被低估的部分。信息架构决定“信息放在哪一层”，流程设计决定“用户经历什么样的路径完成任务”。

一个典型的例子是设置页面的层级。很多新手设计师喜欢把所有设置项放在一个长列表里，看起来简单，但用户找不到具体功能，信息量完全超出短时记忆负荷。合理的做法是分组：账号安全一类、通知偏好一类、隐私权限一类、关于与反馈一类，再按使用频率排序。

另一个不能漏掉的是异常流程。“流程顺利时”是最好画的状态，真正考验水平的是空状态、加载状态、错误状态、超时状态。比如商品列表为空时，是显示“暂时没有相关商品”还是给一个引导按钮去提交需求？断网刷新失败后，按钮文案是“重试”还是“检查网络设置”？这些细节看似琐碎，但直接决定用户体验是否完整。

我的经验是：画原型之前，先列一个状态清单——正常态、悬停态、点击反馈、加载态、空态、错误态、边缘输入（比如昵称超过20个字）。把这些都过一遍，再开始画线框，效率会高很多。

2.3 原型工具与交付规范

工具方面，当前团队协作基本默认用在线设计工具（比如Figma）。它在线协同、组件化、标注交付都很成熟。Axure也有老项目在用，但更偏重传统文档式交付，实时协作体验不如新兴工具。

原型有不同保真度。前期讨论可以用手绘或灰度线框，快速试错；需求稳定后建议做高保真可点击原型，这样开发对视觉和交互有直观参照。高保真原型还有一个作用：约同事进行快速可用性测试。

交付规范是另一个重点。给开发交付时，至少需要包含这些要素：

• 栅格和布局规则：页面栅格列数、页边距、组件间距；
• 字体层级：标题、正文、辅助文字的字号、行高、字重；
• 色板和状态：主按钮色、危险色、禁用色、信息来源色；
• 组件清单：按钮、输入框、弹窗、Tabs等各自的状态；
• 交互说明：哪些区域可点击、点击后跳哪里、动画时长和缓动曲线（如果不确定就写“默认300ms ease”）。

2.4 低成本的设计验证

很多设计师把设计验证想得很复杂，以为一定要搭建正式的可用性测试。团队里没有用户研究员的情况下，一个成本很低的办法是：找一个不太了解这个项目的同事，把原型发给他，让他完成核心任务，比如“帮妈妈预约一个周一早上的号”，你只看他的操作路径，记下他在哪里犹豫、在哪里点错。

我之前带过一个应届生，她设计了一个支付页，页面很美，但同事试操作时三次都找不到“提交订单”按钮在哪，因为按钮被设计成了低对比度的描边样式，藏在页面底部图片下面。这种问题如果等到开发完再发现，返工成本会高很多。用完型测试后加点小修改，成本几乎为零。

3. 编程能力要求：设计师该学什么、学到什么程度

这一节我讲讲编程这块，这是很多设计师一听就头疼的部分。先说结论：设计师学编程，目标不是成为高级前端，而是具备“能验证设计、能和开发沟通、能独立交付简单页面”的能力。学多少取决于你的岗位方向，但基础三件套绕不开。

3.1 三件套：HTML、CSS、JavaScript各自解决什么问题

简单类比一下。一个网页页面的搭建，很像装修一套房子：

• HTML是结构。砌墙、隔房间、定承重墙的位置，决定哪里是导航、哪里是正文、哪里是脚注；
• CSS是装修。选什么色号的墙漆、铺什么地板、客厅茶几放多大的，决定视觉观感；
• JavaScript是家电和智能系统。开关灯、调节空调、门禁控制，决定交互行为。

明白了这个分工，你就知道该怎么学。我给初学者的建议是：先不要啃大部头文档，直接找一个你觉得好看的页面或者自己设计的一个UI稿，尝试用HTML和CSS还原出来。目标是视觉还原度达到90%以上，也就是说，切图还原后跟设计稿并排放在一起，不仔细看看不出差别。这一步能反复练，直到你熟悉盒模型、flex布局、栅格这些核心概念。

然后是JavaScript。不需要一上来就搞懂所有语法，先学会三件事：点击事件（用户点按钮触发反馈）、条件判断（满足什么条件显示什么内容）、数据操作（数组和对象的基本读写）。学会这三样，你就能自己写tab切换、弹窗开合、表单必填提示这一类最常见的界面交互。我见过不止一个设计师在学到这里之后信心大涨，因为设计稿“活过来”了。举一个tab切换的例子，代码大概长这样：

document.querySelectorAll('.tab').forEach(function(tab) { tab.addEventListener('click', function() { document.querySelector('.tab.active').classList.remove('active'); this.classList.add('active'); }); });

设计师不一定要自己写出这样的代码，但看得懂它做了什么，你的设计判断就会完全不同。

3.2 响应式布局与浏览器差异

现在的用户设备实在太杂，同样一个页面可能在25寸显示器上看，也可能在折叠屏手机上看。所以设计师必须理解响应式布局的几个基础手段，至少懂得它们为什么存在：

• 媒体查询：针对不同屏幕宽度设定不同的样式，比如移动端显示两列，桌面端显示四列；
• flex布局：让容器内的元素自动伸缩排布，常用于弹性列表和顶部导航；
• Grid布局：适合成块的网格状内容区域，比如商品卡片墙；
• 单位选择：px、rem、vw/vh这些单位的差别，直接影响字体和尺寸在不同屏幕下的表现。

对这些概念有直观理解后，你在设计稿里才会主动考虑：这个模块在小屏幕下是堆叠还是收缩？断点设在多少像素合适？导航在小屏下要不要折叠成汉堡菜单？这些如果不看代码，光靠想象很容易漏掉。

3.3 用代码能力反哺设计的几个场景

编程能力真正发挥价值的地方，不止是“自己写页面”。

场景一：估算开发工时。我常要评估一个页面改动要花多少开发量。懂一点代码之后，你能区分开“改一个文字”和“改一个交互逻辑”完全不是一个量级，在跟开发排期时也不会问出外行问题。

场景二：用浏览器的开发者工具检查线上问题。打开开发者工具，你可以看某个元素在真实页面里的盒模型、间距和字体渲染，也能模拟不同手机型号看效果。很多线上问题，视觉走查时你用这种方式就能直接告诉开发，“这个按钮上下间距差了4像素”。

场景三：用代码搭可交互Demo给需求方确认。高保真原型有时候还是不够“真”，需求方看着总觉得差点意思。你可以把核心页面渲染成真实浏览器里的可点击Demo，这种展示的说服力比静态图强得多。

4. UI设计师和网页设计师：两条方向怎么选

虽然标题把两个岗位并在一起，但认真拆开看，它们的工作重心并不完全相同。我在团队里同时带过这两类设计，可以分享一个比较真实的画像对比。

4.1 UI设计师的侧重点：系统化与状态

UI设计师的界面通常出现在APP、后台系统、企业级应用、大屏等“用户反复使用”的场景里。这类界面的核心诉求不是第一眼惊艳，而是效率高、可预测、不出错。

因此UI设计师更强调设计系统的能力。一个按钮组件要有多少种状态？主按钮、次按钮、危险按钮、只读状态分别怎么呈现？输入框的校验错误提示出现在什么位置？弹窗最小宽度和最大宽度是多少？这些都需要用系统化思维定义好。

编程能力对UI设计师的意义在于状态设计和组件理解。比如组件状态（hover、active、disabled）在代码里实际上是CSS在不同状态下的切换，理解了这一点，你在设计组件时就会自然考虑到所有状态，而不是只画一个“标准态”。

4.2 网页设计师的侧重点：视觉表现与转化

网页设计师服务于企业官网、活动专题页、营销H5、落地页这类“用户第一次访问”的场景。这类页面要在几秒钟内建立信任、讲清楚价值、引导用户行动，所以视觉冲击力、品牌气质、信息层级和动效的优先级非常高。

网页设计师和开发的关系也更近。现在很多网页开发工具链已经相当成熟，一个网页设计师从设计稿到用HTML、CSS、JavaScript搭建出可部署的静态页面，尤其是无复杂后端的营销页，完全可以一个人完成。所以编程能力对网页设计师来说，往往就是“独立交付能力”本身。

4.3 选方向的实际建议

选择时可以从三个问题出发。

第一，你更享受哪个环节？如果改一个按钮的配色和字体你能琢磨两小时不烦，可能更适合网页方向；如果梳理一个复杂业务流程、把混乱逻辑整理清楚让你有成就感，可能UI方向更适合。

第二，你更适应什么节奏？UI设计往往随产品迭代长期打磨，需要耐得住反复修改和规范维护；网页设计有很多一次性项目，节奏快、视觉新鲜感强，但也更吃创意和产出速度。

第三，你对编程的兴趣是工具还是目标？如果你觉得代码是手段，那UI方向的“够用”程度比较合适；如果你享受从设计到页面的完整交付，网页方向可以让你走得更深。

再说一句：选方向不是非此即彼。我见过最理想的状态是，两个方向都能做，但有一个明显的主攻。对职业生涯早期的人来说，深耕一个方向建立核心竞争力，再向另一方向扩展，比两头都浅尝要实在得多。

5. 新手入行：四个月的实操学习路线

很多读者关心的核心问题其实就一个：我现在是零基础，想奔着这类岗位去，应该按什么顺序学？我结合带新人的经验，给一条比较扎实的四个月路线。前提是你每天能保证两到三小时的投入。

5.1 第一个月：工具与视觉基础

这个阶段的目标是熟练使用设计工具，建立视觉的基本判断力。

从Figma学起就行，重点把画板、图层、约束、自动布局、组件和变体这几个功能学透。很多新人一上来就想学复杂的拟物效果，其实工作中90%的设计稿依赖的都是规范排布、间距对齐和层级清晰。

练习方式是每天临摹一个真实界面，从常见的登录页、列表页、详情页里挑，尽量还原像素级。临摹的意义不是抄，而是让你有意识地去观察原设计里为什么会这样排间距、为什么要用这个字号。临摹完写50到100字的分析笔记，这个习惯比画图本身更重要。

5.2 第二个月：交互设计基本功

这个月开始不要只做视觉临摹了，要开始练交互思维。

找一到两个高频使用的APP（比如电商、社交、出行类），做一次完整的拆解：画出主要任务的信息架构、画出核心流程（比如下单、退款、修改地址）、补齐每个关键页面的状态（加载态、空态、错误态）。

然后再设计：自己选一个主题，比如“宠物寄养预约小程序”，用一两天定义目标用户和场景，画出流程图和线框图，再用Figma做一个高保真原型。不用追求原创，重点是走完一遍完整的交互设计流程。

5.3 第三个月：编程入门与设计还原

这个月开始接触代码，目标是能把自己设计的高保真稿用网页还原出来。

推荐的学习顺序是HTML的基础标签和语义、CSS盒模型和flex布局、JavaScript基础语法和DOM操作。每天写一点，不要贪多。跟着教程做三到五个静态页面，再做两个带交互的小案例（tab切换、弹窗开关、表单校验）。

在这个阶段最重要的一个练习是：把第二个月设计的某个高保真页面，自己动手还原成真实网页。这个练习能让你真切感受到设计稿和实现之间的差距，也会让你明白，为什么开发经常说“设计稿很多效果实现成本高”。

5.4 第四个月：作品集与实战项目

第四个月开始做作品集，整个作品集不必贪多，放一到两个完整项目就够了，但每个项目必须讲清楚完整链路：背景与目标、用户与场景分析、信息架构与流程图、高保真设计、关键状态说明、可交互原型地址、静态页面代码仓库链接。

我强烈建议把作品集托管到线上，而不是发一个需要下载的压缩包。你可以用GitHub Pages、静态托管平台甚至个人网站部署，面试官点开链接就能看到可交互作品和代码效果，这种直观感是静态PDF给不了的。

6. 面试准备和避坑经验：真实考题与长期建议

最后这一部分，分享一些真实的面试问题、准备思路和我在带人过程中反复提醒的坑。

6.1 面试常见问题与应对思路

• “讲一个你最满意的项目。” 准备这个问题的关键是按“背景—目标—方案—结果”四段式来讲。不要只讲画面，重点讲你的决策过程：为什么用户需要这个功能？为什么按钮放在这里？如何在可用性和商业目标之间取舍？
• “现场给你一个需求，画出核心流程和线框。” 这个是这类岗位的高频考题。建议提前练熟一个完整案例，练到不需要思考就能画出搜索流程、退款流程这类常见业务的主线流程。答题时不急着动手，先问清楚目标用户、核心任务、边界条件，再动笔。
• “如果你发现开发的实现效果和设计稿有明显偏差，怎么处理？” 好的回答是分情况处理：偏差影响用户理解或品牌感受的部分要坚决修正，纯粹的像素级偏差如果实现成本高可以结合实际妥协。重点是体现沟通和优先级判断能力。
• “你了解开发这边的实现逻辑吗？” 这一题是考察编程意识的。不用讲得多深，但你要能说出来自己懂响应式、懂组件状态、知道如何用开发者工具检查线上样式。可以举一个自己还原页面时的实际案例。

6.2 工作后容易踩的几个坑

第一，只画正常态，不画异常态。很多设计师的稿子永远画的是“一切顺利”的样子，开发拿着稿子反而迷茫。正确的做法是把异常态当作设计稿的组成部分。

第二，交付时不写交互说明，指望开发看颜色就要能复现。看起来只是一个“悬停时加深10%”，开发不知道加深到什么程度。重要的交互细节必须写成文字标注，或者做成可交互原型。

第三，视觉走查时只看效果不看原因。我见过有人跑到开发面前说“这个看起来不对，你再调调”，开发一脸问号。带上具体的坐标和期望值：“这个按钮下边距设计稿是24像素，线上只有16像素，请改一下”，这才能高效推进。

第四，把自己的定位完全让代码定义。设计师学编程是加分项，但设计判断力其实是核心竞争力。会写代码但思路混乱、视觉品味差的设计师，并不会比不会写代码但逻辑清楚的设计师更受团队欢迎。

6.3 一个长期主义的观点

这类岗位的价值会随着经验积累不断递增，因为你会逐渐形成两个维度的判断力：懂用户体验，也懂技术实现。这两种能力叠加，让你在评审会上能同时回答“用户会不会觉得奇怪”和“开发做不做得出来”这两个问题。

长期来看，这类设计师的成长路线可以是：从初学者到能独立完成小项目的混合型设计师，再到能带项目、定义设计系统的资深设计师，甚至可以往产品方向转型，因为你对用户和技术两端的理解都比单职能的人更完整。

我自己带团队这些年最大的感触是，当设计师从“画图的人”变成“定义问题并推动落地的人”，职业空间会打开很多。如果你现在正好在犹豫要不要补交互设计和编程，我的建议是先动手试一个月。用一个月的时间，做一个完整的、从需求到可运行原型的作品，能做完，你会发现自己已经站在了一条和大多数纯视觉设计师完全不同的起跑线上。