网站设计的流程.pptx

《网站设计的流程.pptx》由会员分享，可在线阅读，更多相关《网站设计的流程.pptx（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、会计学1网站设计网站设计(shj)的流程的流程第一页，共27页。网站网站网站网站网站网站(w(w(w n n n zhn)zhn)zhn)配色与布局课程地位配色与布局课程地位配色与布局课程地位配色与布局课程地位配色与布局课程地位配色与布局课程地位第1页/共27页第二页，共27页。本章本章本章本章本章本章(bn zhn(bn zhn(bn zhn )目标目标目标目标目标目标n n会明确网站主题n n会分析行业资料(zlio)n n会确定网站的用户目标群n n会使用5种达到“设计”的方法 教师讲解学习目标教师讲解学习目标教师讲解学习目标教师讲解学习目标 第2页/共27页第三页，共27页。相关相关相

2、关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论建设网站建设网站(wn zhn)的流程的流程通通过过未未通通过过(t(tnngggguu)通通过过 业务接洽业务接洽 项目签单项目签单继续开发继续开发网站整合网站整合网站测试网站测试网站发布网站发布提交方案提交方案开发和设计开发和设计写网站策划书写网站策划书沟通沟通参与人：业务员、项目经理、程序员、参与人：业务员、项目经理、程序员、策划人员、网页设计师策划人员、网页设计师参与人：业务员、客户参与人：业务员、客户明确网站主题、目标用户群、目的、明确网站主题、目标用户群、目的、设计风格、布局等；采用的架构、

3、设计风格、布局等；采用的架构、开发语言（开发语言（ASP/JSP/JAVA/等等)、数据库（数据库（SQL/MY SQL/Oracle)等。等。网站架构：架构师网站架构：架构师功能开发：开发工程师（程序员）功能开发：开发工程师（程序员）设计参与人：网页设计师设计参与人：网页设计师所用软件：所用软件：PS/FW参与人：策划人员（主）、参与人：策划人员（主）、项目经理、开发工程师（辅）、项目经理、开发工程师（辅）、网页设计师（辅）网页设计师（辅）开发参与人：开发工程师、架构师、项开发参与人：开发工程师、架构师、项目经理目经理设计参与人：网页设计师、设计参与人：网页设计师、业务员、客户业务员、客户开

4、发参与人：架构师、开发工程师开发参与人：架构师、开发工程师设计参与人：网站制作人员设计参与人：网站制作人员所用软件：所用软件：DW/FL/PS/FW参与人：开发工程师、制作人员参与人：开发工程师、制作人员参与人：测试工程师参与人：测试工程师参与人：项目经理参与人：项目经理未未通通过过第3页/共27页第四页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论n n网页(wn y)设计的原则n n统一、连贯、分割、对比、和谐。n n在原则指引下，建站前要做准备工作。创作前的准备工作创作前的准备工作 与客户有效的沟通与客户有效的沟通分析行

5、业资料分析行业资料寻访相关网站寻访相关网站汇总目标用户群的特征汇总目标用户群的特征新网站的优势和特色新网站的优势和特色网站导航（信息方面）网站导航（信息方面）形象口号（文化方面）形象口号（文化方面）构思进行创作构思进行创作确定主题（创作前的准备工作）确定主题（创作前的准备工作）第4页/共27页第五页，共27页。演示案例演示案例演示案例演示案例演示案例演示案例111分析分析分析分析分析分析(fnx)(fnx)(fnx)同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站n n案例分析n n通过4点对网站进行对比：n

6、n产品n n结构和功能n n消费人群n n设计(shj)风格n n涉及的知识点：n n如何明确网站主题 教师通过案例引入理论教师通过案例引入理论教师通过案例引入理论教师通过案例引入理论 网站网站(wn zhn)对比对比第5页/共27页第六页，共27页。n n首先，对比两个(lin)网站 箱包批发网箱包批发网LVLV网网演示案例演示案例演示案例演示案例演示案例演示案例111分析分析分析分析分析分析 同样产品不同表达同样产品不同表达同样产品不同表达同样产品不同表达同样产品不同表达同样产品不同表达(bi(bi(bi od)od)od)的网站的网站的网站的网站的网站的网站第6页/共27页第七页，共27

7、页。演示案例演示案例演示案例演示案例演示案例演示案例111讲解讲解讲解讲解讲解讲解(ji(ji(ji ngji)ngji)ngji)同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站n n操作步骤分析(fnx)：n n第一步：两个网站的产品分析(fnx)箱包批发网：品种箱包批发网：品种(pnzhng)(pnzhng)多、齐全。综合的大型电子商务网站。多、齐全。综合的大型电子商务网站。LVLV网：专营自身品牌产品的电子商务网站。网：专营自身品牌产品的电子商务网站。第7页/共27页第八页，共27页。箱包批发网：产品以

8、装饰品名称分类，左侧按各个产品的品牌分类。箱包批发网：产品以装饰品名称分类，左侧按各个产品的品牌分类。演示案例演示案例演示案例演示案例演示案例演示案例(n l)1(n l)1(n l)1讲解讲解讲解讲解讲解讲解 同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站同样产品不同表达的网站n n第二步：网站第二步：网站(w(w n n zhn)zhn)功能和结构分析功能和结构分析LVLV网：采用网：采用FlashFlash特效，精致而多变。右边多国语言选择，使用方便。特效，精致而多变。右边多国语言选择，使用方便。第8页/共27页第九页，共2

9、7页。演示案例演示案例演示案例演示案例演示案例演示案例111讲解讲解讲解讲解讲解讲解 同样产品不同表达同样产品不同表达同样产品不同表达同样产品不同表达同样产品不同表达同样产品不同表达(bi(bi(bi od)od)od)的网站的网站的网站的网站的网站的网站n n第三步：两个网站的商品针对的消费人群第三步：两个网站的商品针对的消费人群(rnqn)(rnqn)分析分析n n中低档消费人群中低档消费人群(rnqn)(rnqn)。n n第四步：两个网站的设计风格分析第四步：两个网站的设计风格分析n n传统风格传统风格 Flash Flash多媒体多媒体高端消费高端消费(xiofi)人群人群第9页/共2

10、7页第十页，共27页。案例案例案例案例案例案例(n l)(n l)(n l)中理论中理论中理论中理论中理论中理论n n目标(mbio)用户群不同和网站产品不同，设计风格也随之不同。第10页/共27页第十一页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论1 1 1n n讲解：理论知识（如何(rh)明确网站主题）n n对于题材选择的建议n n主题要小而精n n目标不要太滥或太高n n网页形式是为突出主题服务的n n交换箱包批发网和LV网的设计形式是不可取的。第11页/共27页第十二页，共27页。相关相关相关相关相关相关(xingg

11、un)(xinggun)(xinggun)理论理论理论理论理论理论2 2 2n n讲解：理论知识（如何分析行业资料）n n行业资料分析包括(boku)：n n宣传册：公司对外宣传的载体，VI的一部分。宣传册展示宣传册展示(zhnsh)(zhnsh)第12页/共27页第十三页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论2 2 2n n电视广告电视广告n nVIVI设计设计n n行业背景行业背景 n n行业资料分析是设计进行前行业资料分析是设计进行前的重要步骤。的重要步骤。n n行业知识积累行业知识积累(jli)(jli)不够，

12、不够，在网站分析时，就只能看见在网站分析时，就只能看见表面，流于形式。表面，流于形式。洗发水广告洗发水广告(gunggo)(gunggo)手机广告手机广告(gunggo)(gunggo)电脑广告电脑广告(gunggo)(gunggo)厨房用品广告厨房用品广告(gunggo)(gunggo)第13页/共27页第十四页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论2 2 2n nVIVI设计设计n nVIVI含义：视觉识别（含义：视觉识别（Visual Visual IdentityIdentity）:n n 以标志、标准字、标准

13、色为核心以标志、标准字、标准色为核心展开的完整的、系统的视觉表达展开的完整的、系统的视觉表达体系。将企业体系。将企业(qy)(qy)理念、企业理念、企业(qy)(qy)文化、服务内容、企业文化、服务内容、企业(qy)(qy)规范等抽象概念转换为具体规范等抽象概念转换为具体符号，塑造出独特的企业符号，塑造出独特的企业(qy)(qy)形形象。象。n nVIVI内容：基本要素系统和应用系内容：基本要素系统和应用系统统 VI设计设计(shj)第14页/共27页第十五页，共27页。小结小结小结小结小结小结(xi(xi(xi oji)oji)oji)n n通过上面的案例了解网页设计的主题，主题的不同导致网

14、页的设计风格不同。n n1）没有确定网站主题的作品容易出现什么问题？n n2）是不是明确了网站主题就能做好网页呢？n n答案是否定(fudng)的。下面通过实例给大家讲解目标用户群。第15页/共27页第十六页，共27页。演示案例演示案例演示案例演示案例演示案例演示案例(n l)2(n l)2(n l)2分析分析分析分析分析分析八面玲珑八面玲珑八面玲珑八面玲珑八面玲珑八面玲珑n n案例分析n n目标用户群的不同，导航和页面设计(shj)不同。n n涉及的知识点：n n3个网站的目标用户群网站网站(wn zhn)对比对比 教师通过案例引入理论教师通过案例引入理论教师通过案例引入理论教师通过案例引入

15、理论 第16页/共27页第十七页，共27页。案例案例案例案例案例案例(n l)(n l)(n l)中理论中理论中理论中理论中理论中理论n n讲解：目标用户群n n百业人才网导航按照不同行业分类，8类不同目标用户群；页面绿色清新(qngxn)、淡雅；布局功能模块明确。分类分类有针对有针对“营销营销”人员的，有针对人员的，有针对“五金五金”行业的行业的第17页/共27页第十八页，共27页。演示案例演示案例演示案例演示案例演示案例演示案例2 2 2讲解讲解讲解讲解讲解讲解(ji(ji(ji ngji)ngji)ngji)八面玲珑八面玲珑八面玲珑八面玲珑八面玲珑八面玲珑中华英才网导航按照内容、用户经验

16、值不同的目标用户群分类中华英才网导航按照内容、用户经验值不同的目标用户群分类(fn li)(fn li)；页面以蓝色为主；页面重点突出导航中的重点内容。；页面以蓝色为主；页面重点突出导航中的重点内容。按经验值不同的目标用户群分类。按经验值不同的目标用户群分类。比如：比如：“猎头服务猎头服务”是针对较大发展的人。是针对较大发展的人。“校园招聘校园招聘”是针对毕业学生是针对毕业学生第18页/共27页第十九页，共27页。演示案例演示案例演示案例演示案例演示案例演示案例2 2 2讲解讲解讲解讲解讲解讲解(ji(ji(ji ngji)ngji)ngji)八面玲珑八面玲珑八面玲珑八面玲珑八面玲珑八面玲珑智

17、联招聘网导航按照用户不同身份分类，智联招聘网导航按照用户不同身份分类，同时按照行业分类，针对多种目标用户群；页面同时按照行业分类，针对多种目标用户群；页面(y min)(y min)以蓝色为主；布局根据网站侧重点不同来分配内容。以蓝色为主；布局根据网站侧重点不同来分配内容。经验值分类经验值分类行业分类行业分类第19页/共27页第二十页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论3 3 3n n讲解：理论知识(目标用户群)n n目标用户群的概念n n是指接收并理解网站建设方通过网络媒介传递的信息个体。n n一般网站中目标用户群

18、分析(fnx)n n门户类网站：目标用户群多n n专题类网站：目标用户群单一、个性n n旅游类网站：年轻、时尚一族n n平台式网站：信息丰富，目标用户群多n n娱乐类网站：活泼的年轻人第20页/共27页第二十一页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论4 4 4n n达到“设计”目的5种方法n n书写策划书n n设计的“4”种切入点n n网页内容安排(npi)技巧n n广告的“口号”n n网站可信度第21页/共27页第二十二页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理

19、论理论理论理论理论4 4 4n n网站(wn zhn)策划书的内容：n n背景介绍n n市场分析n n建设目的及网站(wn zhn)定位n n技术解决方案n n内容规划n n页面设计n n流程及人工n n网站(wn zhn)维护n n发布与推广第22页/共27页第二十三页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论4 4 4n n广告的“口号(kuho)”n nVI不能代替口号(kuho)n n口号(kuho)出现在Banner里n n口号(kuho)出现在Title里n n口号(kuho)出现在插画里n n选择口号(kuh

20、o)时需注意：n n好的口号(kuho)要清楚、有真实的东西。第23页/共27页第二十四页，共27页。相关相关相关相关相关相关(xinggun)(xinggun)(xinggun)理论理论理论理论理论理论4 4 4n n不好的口号含混不清。不好的口号含混不清。n n好的口号长度适中。好的口号长度适中。n n不好的口号太笼统。不好的口号太笼统。n n好的口号应该好的口号应该(ynggi)(ynggi)有个性、生动，有时候还很俏皮。有个性、生动，有时候还很俏皮。n n有些网站已经很有名气，口号的功能被弱化。有些网站已经很有名气，口号的功能被弱化。第24页/共27页第二十五页，共27页。总结总结总结总结总结总结(z(z(z ngji)ngji)ngji)n n做网站之前(zhqin)要明确什么？n n确定设计方向的前提要明确什么？n n行业分析要通过哪几方面来完成？n n如何达到“设计”目的有5种方法都有什么？总结并布置作业总结并布置作业总结并布置作业总结并布置作业第25页/共27页第二十六页，共27页。第26页/共27页第二十七页，共27页。