网页设计的流程及思路.ppt

Your company sloganYour company slogan网页设计的流程及思路网页设计的流程及思路Your company sloganYour company slogan问题问题：1、接到一个项目，你要去做什么？2、流程是怎样的？Your company sloganYour company slogan流程流程Your company sloganYour company slogan一、沟通了解（知己知彼，百战不殆）Your company sloganYour company slogan要了解的内容要了解的内容1、客户的需求及要求（收集客户资料）2、同行业此类网站的调查（网上查询、 搜集资料）3、总结此类网站的鲜明特点及最新动态Your company sloganYour company slogan二、确定网站的主题、内容及风格Your company sloganYour company slogan包含的内容包含的内容1、确定主题2、版块及栏目3、色彩，也就是主色调4、风格，以网站的类型为基础确定风格Your company sloganYour company slogan三、绘制草稿Your company sloganYour company slogan包含的内容包含的内容1、尺寸的选择2、版式3、将主要内容填充Your company sloganYour company slogan四、平面设计——制作、定稿Your company sloganYour company slogan包含的内容包含的内容1、制作的流程 先整体——后局部——再细节 （颜色版式）——（每个板块）——细节2、沟通——审稿——定稿Your company sloganYour company slogan五、网页制作（写成页面）Your company sloganYour company slogan六、调整出彩Your company sloganYour company slogan思路思路Your company sloganYour company slogan第一阶段 收集资料 ？如何收集资料 ？收集哪些资料Your company sloganYour company slogan资料来源：客户、素材库资料主要包括客户公司的图片、产品图片、广告图片、以及内容文字资料等等。

一般情况是,客户会提供部分资料,更多的,图片我会去素材网站找找Your company sloganYour company slogan第二阶段 构思，调用资料 草图 填充内容 内容的置入 Your company sloganYour company slogan 将资料内容结构化，包括首页、栏目页、内容页、功能页以及各个页面中的版块及栏目Your company sloganYour company slogan第三阶段 制作，套用规则 版式布局 配色 处理图片/动画 Your company sloganYour company slogan根据网站的版式分为两大类：形象网页：多用于网站的形象宣传页面，它的特点是页面的布局结构自由，页面中以图像或者是Flash为主，文字较少这种页面的主要针对于形象宣传性质的网站，偏重设计性 内容网页：多用于网站的内容页，大型的门户网站多采用这种类型的页面版式。

其特点是文字信息多，页面中的图像相对较少，整个页面按不同的布局划分为多个区域，主要的作用是为了传达文字信息 Your company sloganYour company slogan“内容页面”的版式一般可分为：1.水平分割水平分割，强调的是层次感和精确感，并有助于不同信息的分类；水平分割的同时还应当考虑到分割的面积，水平不均匀分割，如果上半部安置标题或导航，则面积较小；上半部安置主体内容，则面积应适当加大，2.垂直分割垂直分割和水平分割有很多相似点，把水平分割的页面旋转90°即为垂直分割效果Your company sloganYour company slogan3.水平垂直分割水平垂直分割是上面两种分割形式的综合运用，整个页面中既有水平分割的部分，又有垂直分割的部分，互相交织构成一种网状结构这样的页面给人一种非常稳定的感受4.变化分割变化分割是在水平分割和垂直分割的基础上，添加斜线和曲线的效果，这样的页面版式结构给人自由、运动和时尚的感觉Your company sloganYour company slogan在实际的创作之前，可以在网上参考相关的页面布局作为参考，网页设计最大的优势就是你所要设计的网页，在网络上都能找到参考的页面。

可能有些人喜欢完全的“原创”，人为过多的参考别人的设计就是“抄袭”但是对于大多数初学者来说，这种必要的“借鉴”是必不可少的，见多识广，积累到一定的程度，把别人的精华拿为己用，这是提高自己设计能力的一种最快的方法Your company sloganYour company slogan第四阶段 用户体验 细化 出彩 Your company sloganYour company slogan如果把网页设计简单的比作烹饪,这四个阶段也就是说这么几回事儿:1.顾客提出相关要求;2.店方去思考如何做出一道客户称道的佳肴3.店方准备好烹饪所需的材料;4.炒菜;Your company sloganYour company slogan 而最后的炒菜,需要解决问题就是:在分析结果的指导下,怎么样去把材料变成一道色、香、味俱全的美味? 推演到咱们网页设计上来说,就是这样一些工作:处理图片、细节、色彩、排版构成、用户体验等等。