网页设计的流程,规范和要求?

网页设计的流程,规范和要求?,第1张

先用ps把网页设计好。

再把内容按不同的链接切割好。

用dw或者其他网页设计软件把网页拼接。

规范:一般网页的宽度大小是应该符合大部分浏览器和分辨率的,大部分的宽度有1200px,1024px和950px,最小的有800px。

策划阶段

每一个网站的建立同时,都伴随着诸多尚未解决的需求。为什么要做这个网站?是制作之处需要想到的问题,无论是为了宣传业务、提升业绩,还是表达观点、传递价值,一个网站都会承载着诸多的功能需求。那么,在策划阶段,就要围绕着需求及功能点,将其一一解析出来,并整理成册为:PRD产品需求文档。通常这部分是由产品经理(PM)完成,需要在与客户详细交谈过数次后,才能一并输出。如果项目中途突然加个需求,程序和设计的心里一定会很难过的,所以一个新站的策划初期,至少要考虑到未来2~3年,网站的功能添加的可拓展性。

2交互设计

这一阶段的工作通常由专业的交互设计师来完成,当然也时常可由产品经理兼职。交互设计师得根据解析出的PDR需求文档,合理地组织网站框架,建立一级、二级导航栏目,规划网站内页的浏览路径,以及页面跳转关系。通常会用到Sketch、或OminiGraffle、mindnote等软件来梳理页面逻辑及框架结构,以完成交互设计稿的绘制。以便网站受众在浏览过程中能高效、愉悦地获取到他们想要的信息。如果是页面不多,可在白板上或几张A4中完成这个环节的工作;页面巨多,则要将交互稿整理出图,打包为电子手册,方便下一工作环节的实施。

3视觉设计

现在该网页设计师正式出场了,这一环节中,设计师主要根据交互设计稿,确定网站内页的具体设计规范,包括网站颜色VI的选用、字体字号大小、以及素材的编排、选取及处理、每一根线条、每一个像素,都是由作为准网页设计师的你来把控了。将所有页面设计稿完毕后,标注好尺寸、颜色等数值信息,输出必要的、icon等资源,打包好后一并交给Web前端工程师。

4前端制作

这个环节的主角是Web前端工程师。其主要根据网页设计师出具的设计稿,运用HTML、CSS代码实现页面重构和页面逻辑跳转,运用JavaScript、JQuery等技术优化网站浏览体验,以及网站界面交互动效、功能实现的制作。相信你的程序员哥哥定能给你办得稳妥妥的,当然在这个过程中会遇到些许问题,作为网页设计师的你要及时与之沟通,一起将界面的细节做到99%还原设计稿。

5后端制作

实现后端数据的逻辑处理,比如数据的提交存储、更新修改、查询等。这个环节的主角是Web后端工程师,通常要用到PHP、java、C语言或C++等编程技术。作为网页设计师的我,对于这一环节的工作是持仰望态度,无法展开来讲了。

6测试上线

在网页重构及后端制作完成后,将代码模板套入CMS(即:内容管理系统)完成本地测试,以检验其可靠性。在排除bug问题后,就可准备上线了。买个域名和服务器,做些必备的服务器配置工作,完成DNS解析,将域名和服务器连接起来,最后再运用FTP工具上传资料到服务器。于是该网站就可以正常访问了。

需求分析
项目立项
我们接到客户的业务咨询,经过双方不断的接洽和了解,并通过基本的可行性讨论够,初步达成制作协议,这时就需要将项目立项。较好的做法是成立一个专门的项目小组,小组成员包括:项目经理,网页设计,程序员,测试员,编辑/文档等必须人员。项目实行项目经理制。
客户的需求说明书
第一步是需要客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚,需要您不断引导和帮助分析。曾经有一次,我问客户:“您做网站的目的是什么?”他回答:“没有目的,只是因为别人都有,我没有!”。这样的客户就需要耐心说明,仔细分析,挖掘出他潜在的,真正的需求。 配合客户写一份详细的,完整的需求说明会花很多时间,但这样做是值得的,而且一定要让客户满意,签字认可。把好这一关,可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。那么需求说明书要达到怎样的标准呢?简单说,包含下面几点:
1正确性:每个功能必须清楚描写交付的功能;
2可行性:确保在当前的开发能力和系统环境下可以实现每个需求;
3必要性:功能是否必须交付,是否可以推迟实现,是否可以在削减开支情况发生时"砍"掉;
4简明性:不要使用专业的网络术语;
5检测性:如果开发完毕,客户可以根据需求检测。
三系统分析
网站总体设计
在拿到客户的需求说明后,并不是直接开始制作,而是需要对项目进行总体设计,详细设计,出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定:
1网站需要实现哪些功能;
2网站开发使用什么软件,在什么样的硬件环境;
3需要多少人,多少时间;
4需要遵循的规则和标准有哪些。
同时需要写一份总体规划说明书,包括:
1网站的栏目和版块;
2网站的功能和相应的程序;
3网站的链接结构;
4如果有数据库,进行数据库的概念设计;
5网站的交互性和用户友好设计。
网站建设方案
在总体设计出来后,一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统,而且在客户需求不是十分明确的情况下提交方案,往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解,在明确需求并总体设计后提交方案,这样对双方都有益处。网站建设方案的包括以下几个部分:
1客户情况分析;
2网站需要实现的目的和目标;
3网站形象说明;
4网站的栏目版块和结构;
5网站内容的安排,相互链接关系;
6使用软件,硬件和技术分析说明;
7开发时间进度表;
8宣传推广方案;
9维护方案;
10制作费用;
11本公司简介:成功作品,技术,人才说明等。
当您的方案通过客户的认可,那么恭喜你!您可以开始动手制作网站了。但还不是真正意义上的制作,你需要进行详细设计:
网站详细设计
总体设计阶段以比较抽象概括的方式提出了解决问题的办法。详细设计阶段的任务就是把解法具体化。详细设计主要是针对程序开发部分来说的。但这个阶段的不是真正编写程序,而是设计出程序的详细规格说明。这种规格说明的作用很类似于其他工程领域中工程师经常使用的工程蓝图,它们应该 包含必要的细节,例如:程序界面,表单,需要的数据等。程序员可以根据它们写出实际的程序代码。
四 项目实施
整体形象设计
在程序员进行详细设计的同时,网页设计师开始设计网站的整体形象和首页。
整体形象设计包括标准字,Logo,标准色彩,广告语等。 首页设计包括版面,色彩,图像,动态效果,图标等风格设计,也包括banner,菜单,标题,版权等模块设计。首页一般设计1-3个不同风格,完成后,供客户选择。
记住:在客户确定首页风格之后,请客户签字认可。以后不得再对版面风格有大的变动,否则视为第二次设计。
开发制作
到这里,程序员和网页设计师同时进入全力开发阶段,需要提醒的是,测试人员需要随时测试网页与程序,发现Bug立刻记录并反馈修改。不要等到完全制作完毕再测试,这样会浪费大量的时间和精力。项目经理需要经常了解项目进度,协调和沟通程序员与网页设计师的工作。
调试完善
在网站初步完成后,上传到服务器,对网站进行全范围的测试。包括速度,兼容性,交互性,链接正确性,程序健壮性,超流量测试等,发现问题及时解决并记录下来。
为什么要记录文档呢?其实本软件工程本身就是一个文档,是一个不断充实和完善的标准。通过不断的发现问题,解决问题,修改,补充文档,使这个标准越来越规范,越来越工业化。进而使得网站开发趋向规范,趋向合理。
宣传推广
宣传推广的基本方法有:
1网页里设置适当的META标签;
2各搜索引擎登录;
3准备新闻稿件在各新闻公告板发表;
4合理使用Email邮件列表;
5广告条交换;
6付费广告。
至此,网站项目建设完毕,将有关网址,使用 *** 作说明文档等提交客户验收。如果需要维护,另行签定维护项目。
维护
网站成功推出后,长期的维护工作才刚刚开始,我们需要做到的是
1及时响应客户反馈;例如可以采取Email自动回复功能,然后在1-3个工作日里解决问题,再次回复;
2网站流量统计分析和相应对策;
3尽量推广和使用您的网址;
4网站内容的及时更新和维护。
五遵循的规范
1网站建设目录规范
2网站文件命名规范
3网站建设尺寸规范
4网站首页head区代码规范
5网站连接结构规范

第一步:客户提出需求

客户通过电话、电子邮件或在线QQ等提出自己网站建设方面的“基本需求”。

涉及内容包括:1、公司介绍;2、栏目描述;3、网站基本功能需求;4、基本设计要求

第二步:做出建站方案

首先,根据企业的要求和实际状况,量身定制出适合企业的网站方案;

其次,网站是发布公司产品与服务信息的平台,所以网站内容非常重要,一个好的网站,不仅仅是一本网络版的企业全貌和产品目录,它还必须给网站浏览者,即企业的潜在客户提供方便的浏览导航,合理的动态结构设计,适合企业商务发展的功能构件,如信息发布系统、产品展示系统等,丰富实用的资讯和互动空间,我们将根据客户的简单材料,精心进行策划,提交出一份网站建设方案书。

第三步:查询申办域名

根据企业的需要,决定是国际域名还是国内域名。域名就是企业在网络上的招牌,就是企业网站的网址。

第四步:确定合作

双方以面谈、电话或电子邮件等方式,针对项目内容和具体需求进行协商,双方认可后,签署《网站建设合同书》并支付预付款。

第五步:网站内容整理

根据网站建设方案书,由客户组织出一份与企业网站栏目相关的内容材料(电子文档文字和等),我们将对相关文字和进行详细的处理、设计、排版、扫描、制作,这一过程需要客户给予积极的配合。

第六步:网页设计、制作、修改

一旦网站的内容与结构确定了,下一步的工作就是进行网页的设计和程序的开发。网页设计关乎企业的形象,一个好的网页设计,能够在信息发布的同时对公司的意念以及宗旨作出准确的诠释。很多国际大型公司都不惜花费巨大的投入在网页的设计上。我们拥有专业的技术人员,将给您提供最专业的网页设计,使您的网站表现不凡,脱颖而出。

第七步:网站提交客户审核并发布

网站设计、制作、修改、程序开发完成后,提交给客户审核,客户确认后,支付网站建设余款。同时,网站程序及相关文件上传到网站运行的服务器,至此网上正式开通并对外发布。

第八步:网站网站推广及后期维护

网页设计流程

一、策划。

这两个字看似没有什么意义,表面上来看,的确是如此的。但是,你想拥有一个什么样的网站?你的主色调,你的内容,等等等等,都需要一个策划,否则你打开制作工具,你根本不知道要做什么。就象你或者你的GF要做饭,材料什么都有,菜买回来了,可你不知道要吃什么,还为吃白菜或者吃芹菜而闹不明白。你会很为难。对于新手来说,可以参考借鉴别人的作品,多看看一些你喜欢的网页,然后去模仿,慢慢的就能做出自己的东西了。一个策划做好了,就什么都好说了。

二、设计图纸

你可以先在草稿上先画一画,但那样的话,这个步骤应该归结于第一步。这里说的设计图纸是在PS或者FW中把你想做的网站用的形式画出来。我不清楚是否在各位看观中是否有准备去应聘网页美工等工作的。但就我自己的公司在我们附近的一所大学里招聘的情况来看。实在是不怎么理想。因为这些应聘网页美工的同学居然不知道不明白网页是先用PS或者FW画出来的。最后我录用了附近中专的一个学生。倒不是他在学校里学到了什么,是自学的,做得还不错。由此可见,学生在学校里学到的东西实在是太皮毛了~~~~(跑题了是吧~~~~~)~~~~~这一个步骤呢就是说~~~~~先把自己的想要的网页用PS画出来。PS的灵活多变以及超级强大的功能,完全可以画出绚烂的网页出来。

现在来说呢,我给大家提供几个数字,就是网页设计图纸的宽度。如果你的网页是准备留有对联广告的位置,也就是像稀饭主站的那种样式来说呢,你的网页的宽度一般为768像素。也有760像素770像素780像素。这看个人的设计习惯来的。但一般来说呢,768像素是最符合规范的,因为768正好是屏幕的高度。如果你是想设计满屏的网页,就像这个论坛吧。宽度一般为1000左右。有人说是1007,的确,在WINDOWS标准界面下这个宽度能全部显示而不必在下面拉啊拉的。但是如果是XP风格的话,就要左右拉了因此宽度设置为1000差不多。也有设计为998了。这根据个人经验而来,大家可以根据自己的实际判断来说。总之就这左右。告诉嘛~~~~~你想设置多高就多高吧。如果是首页的话呢,最好是能全部显示出来。由于各个浏览器的不同——像多窗口浏览器有一个标签栏,就算是IE,常用图标也有大小之分。因此告诉是多少,你就自己掌握吧。

三、切割网页

切割网页这工作还是交给PS或者FW来制作。也就是使用他们的切片工具。个人认为FW更适合用来切割。太专业了。而且很容易上手。PS当然也有这个功能。不过说来寒酸,我到现在也没搞明白那是怎么切割的~~~~~就看别人切割了,自己就是不会~~~~~(没办法,本人电脑知识全部自学,PS、FW、DMX等等等等,因此有些问题搞不明白还是情有可原的吧~~~~)

切割网页就是把切割成若干个小,其中宽度高度什么的都得自己去掌握去学习,我考虑写一个教程。不过时间不是很充裕,看情况。

四、DMX制作网页

终于到这一步了,大家是不是很明白啊?不会用DMX就不能说是会制作网页知道不?现在一般的大学生和职业学校的学生都应该掌握了这个吧。顺便说一下,网页就是表格加加FLASH。自己慢慢体会吧。

希望对您有帮助。

一PC网页设计规范 固定的内容: 1PS中设计分辨率为:72像素/英尺(质量的像素点) 2 颜色模式RGB 8位(显示器的三原色红,绿,蓝为RGB)
不固定的内容: 1网页背景 a纯色背景平铺(自适应浏览器) b渐变色或底纹平铺背景(自适应浏览器) 目前网页设计中都会做通栏大图,以方便吸引客户,增加网站整体美观 c通栏大图
二屏幕分辨率 1标准分辨率:1024px768px(目前10%-20%的用户在用) 主体设计内容宽度:1000px(常用宽度:960px,1170px,980px,1100px,1200px) 首屏高度大约在700px
2常用分辨率:1280px768px 主体设计内容宽度:1200px(常用宽度:1190px,1170px,1100px,1200px) 首屏高约:750px
三设计文档大小 1PS中新建文档宽要大于主体设计内容的宽度(目的为了表现设计意图,展示背景效果,左右宽度最少200px) 2设计到通栏大新建文档的宽度:1920px,所有的设计文档宽1920px主体内容根据具体情况而定(主体内容要是想要适应所有用户必须低于1000px)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/13162673.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-06-14
下一篇 2023-06-14

发表评论

登录后才能评论

评论列表(0条)

保存