自学网页设计，需要了解的网站开发流程

搭建一个功用完善的网站，从构想到上线，离不开各职位成员的配合尽力。作为一个准网页设想师，提早领会网站开辟的流程，有助于在团队合作中更好的配合。凡是情况下，任何一网站的建立，城市经过“策划—交互—视觉—前端—后端—测试”六个环节，其中网页设想师的焦点使命则落在了“视觉设想”这个板块。接下来@酷coo豆 就简要的谈谈每个环节的大致工作内容。

1. 策划阶段

每一个网站的建立同时，都陪伴着诸多尚未处理的需求。为什么要做这个网站？是建造之处需要想到的题目，不管是为了宣传营业、提升业绩，还是表达概念、传递代价，一个网站城市承载着诸多的功用需求。那末，在策划阶段，就要围绕着需求及功用点，将其逐一剖析出来，并整理成册为：PRD产物需求文档。凡是这部分是由产物司理（PM）完成，需要在与客户具体扳谈过数次后，才能一并输出。假如项目中途忽然加个需求，法式和设想的心里一定会很难过的，所以一个新站的策划早期，最少要斟酌到未来2~3年，网站的功用增加的可拓展性。

2. 交互设想

这一阶段的工作凡是由专业的交互设想师来完成，固然也经常可由产物司理兼职。 交互设想师得按照剖析出的PDR需求文档，公道地构造网站框架，建立一级、二级导航栏目，计划网站内页的阅读途径，以及页面跳转关系。凡是会用到Sketch、或OminiGraffle、mindnote等软件来梳理页面逻辑及框架结构，以完成交互设想稿的绘制。以便网站受众在阅读进程中能高效、愉悦地获得到他们想要的信息。假如是页面不多，可在白板上或几张A4中完成这个环节的工作；页面巨多，则要将交互稿整理出图，打包为电子手册，方便下一工作环节的实施。

3. 视觉设想

现在该网页设想师正式进场了，这一环节中，设想师首要按照交互设想稿，肯定网站内页的具体设想标准，包括网站色彩VI的选用、字体字号巨细、以及素材的编排、拔取及处置、每一根线条、每一个像素，都是由作为准网页设想师的你来把控了。将一切页面设想稿终了后，标注好尺寸、色彩等数值信息，输出需要的图片、icon等资本，打包好后一并交给Web前端工程师。

4. 前端建造

这个环节的配角是Web前端工程师。其首要按照网页设想师出具的设想稿，应用HTML、CSS代码实现页面重构和页面逻辑跳转，应用JavaScript、JQuery等技术优化网站阅读体验，以及网站界面交互动效、功用实现的建造。相信你的法式员哥哥定能给你办得稳妥妥的，固然在这个进程中会碰到些许题目，作为网页设想师的你要实时与之相同，一路将界面的细节做到99%复原设想稿。那末 @酷coo豆 平常上班时，法式员哥哥就座在我的旁边，上班交换，开小差，那简直是亲热得很啊！！！哈哈哈...

5.后端建造

实现后端数据的逻辑处置，比如数据的提交存储、更新点窜、查询等。这个环节的配角是Web后端工程师，凡是要用到PHP、java、C说话或C++等编程技术。作为网页设想师的我，对于这一环节的工作是持瞻仰态度，没法展开来说了。

6. 测试上线

在网页重构及后端建造完成后，将代码模板套入CMS（即：内容治理系统）完本钱地测试，以检验其牢靠性。在解除bug题目后，便可预备上线了。买个域名和办事器，做些必备的办事器设置工作，完成DNS剖析，将域名和办事器毗连起来，最初再应用FTP工具上传材推测办事器。因而该网站便可以一般拜候了。

实操案例

@酷coo豆 在客岁的工作中，公司网站经过了一次大的改版。我地点公司是传统实业型，收集部分的技术职员不多，在合作进程中首要有：司理、设想师、法式员三个脚色。其中功用需求由司理提出，其负责策划、交互事件。以口头论述及Word线框图为首要相同方式。而我（设想）则首要负责视觉稿的输出与素材处置，与法式员间的相同以图片、标注文档、及口述为主；法式员则负责了前端建造今后的一切工作。在办公室里法式员在左、我在中心，右侧是司理，这样位置放置恰好合适工作流程，且有助于相同效力的提升。

由因而在小公司，在工作对接上没有太多的标准标准，不外大师在一路合作还是蛮高兴的。客岁在法式员哥哥的的技术陶冶下，@酷coo豆 重拾了曾学过的前端常识，尝试着做了「平面设想进修日志网」用作分享自学平面设想相关的经历及材料，也算是客岁单独完成的一个大工程吧。

第一次尝试着用代码去100%的复原自各儿做的设想稿，让我习得了更多团队合作需要留意的细节题目。在设想上虽然还有很多提升空间，但在做过以后，总能比光想不做学得更多。2022，新的一年起头了！希望今年的你我，都能在自学设想的路上获得更大的进步！

假如你正对网页设想感爱好，想要自学前端和设想，@酷coo豆 整理的网页设想自学教程也答应以给助你落井下石：http://www.xxriji.cn/career/7.html，赶紧get一下，自学的走起！

——

以上就是@酷coo豆 整理的有关“自学网页设想，需方法会的网站开辟流程”的全数内容，接待在留言区留下你的批评，一路交换进修。更多有关“自学设想”的话题，请延续关注「平面设想进修日志-知乎专栏」。

您所看到的，也许正是他人需要的，感激你将本文转发到微博、微信！

（完）

版权声明

作者：@酷coo豆 ，公众号：followdesign；

原文地址：https://zhuanlan.zhihu.com/p/25097044

本文由@酷coo豆 原创，首发于「知乎专栏」与「平面设想进修日志网」。非贸易转载请说明作者、原文地址，若需贸易转载或用于培训转载请联@酷coo豆 获得授权。