1 页面设计 1.1 设计流程 1.2 需求分析 1.3 常见网页布局 1.4 网页配色 1.5 绘制设计图.

Presentation on theme: "1 页面设计 1.1 设计流程 1.2 需求分析 1.3 常见网页布局 1.4 网页配色 1.5 绘制设计图."— Presentation transcript:

0 目录 CONTENTS 化学多媒体软件设计 页面设计及切片基础_入门篇 1. 页面设计 2013.11.04 2. 切片基础
PPT制作：前端设计组 尹海施 1. 页面设计 1.1 设计流程 1.2 需求分析 1.3 常见网页布局 1.4 网页配色 1.5 绘制设计图 2. 切片基础 2.1 切片简介 2.2 切片思路 2.3 切片步骤 2.4 切片技巧

1 1 页面设计 1.1 设计流程 1.2 需求分析 1.3 常见网页布局 1.4 网页配色 1.5 绘制设计图

2 1.1 设计流程 2. 确定布局和配色 3. Ps/Fw绘制效果图（先搭建整体框架，再雕琢细节）
1. 明确需求（网站整体结构与功能，设计风格，重构难度） 2. 确定布局和配色 3. Ps/Fw绘制效果图（先搭建整体框架，再雕琢细节）

3 1.2 需求分析 磨刀不误砍柴工，科学进行需求分析，是成功的网页设计不可缺少的步骤 如何分析？

4 Step 1: 确定主题、网站整体功能和风格 主题：学院网站 功能： 展示学院风采、新闻动态 风格： 较为严谨、正式

5 Step 1: 确定主题、网站整体功能和风格 主题：课程介绍 功能： 介绍课程、分享课程资源 风格： 与学院网站相比，更为开放、新颖

6 Step 1: 确定主题、网站整体功能和风格 主题：个人网站 功能： 展示个人风采 风格： 开放、自由，无固定版式

7 Step 2: 确定网站栏目结构 规划好网站的层次结构。清晰网站的导航，方便用户无障碍的使用网站，了解网站提供的功能。

8 Step 3: 确定页面的版式布局 根据网站类型、展示内容多少确定布局，画效果图之前，不妨先画一个页面布局示意图，这会让你思路更清晰，助你事半功倍。

9 Step 4: 确定网页配色 网页的色彩，是访问者登录页面时的第一印象，好的页面色彩能给用户留下深刻的印象，并且能产生很好的视觉效果和营造网站整体氛围的作用。 根据网站风格选择主色调、辅助色、特征色，形成一套配色方案。

10 1.3 常见网页布局 1 上下结构式（经典厚朴版式） 2 左右结构式 3 上左右结构式 4 水平条纹式布局 5 不规则布局

11 ① 上下结构式（经典厚朴版式） 上方为banner、导航条 下方为正文、内容部分 底部为版权部分
中间为slide，（动态的公司企业形象、广告区域） 下方为正文、内容部分 底部为版权部分

12 ② 左右结构式 左侧是导航条 右侧是正文、内容或公司企业形象展示

13 ③ 上左右结构式 上方为主要的菜单导航条 左侧为点击出现的细分栏目导航条 右侧为内容区域

14 ④ 水平条纹式布局 使用横向条纹式的网页布局，每条纹理区分不同内容。
水平方式布满屏幕，并使用不同的背景颜色或纹理，就像全屏的背景的网页设计一样，视觉效果很好。 排版多样化，网站内容表达也非常清晰。

15 ⑤不规则布局 　　此类页面的信息量少，通常一张形象、广告照片下来，重在渲染网站的气氛。类似封面类型，有点击进入下页的入口，适合于产品宣传或个人网站。

16 1.4 网页配色 色彩搭配的原则: 特色鲜明 搭配合理（避免采用纯度很高的单一色彩，这样容易造成视觉疲劳） 讲究艺术性
网页配色不宜超过三种。(三种是从色相上来说的)

17 1.4 网页配色 网页安全色 216网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，它一共有 6 * 6 * 6 = 216 种颜色（其中彩色为210种，非彩色为6种）。

18 1.4 网页配色 网页安全色 216网页安全色在不同硬件环境、操作系统、浏览器中都能正常显示，可避免原有的颜色失真问题。
　　216网页安全色在不同硬件环境、操作系统、浏览器中都能正常显示，可避免原有的颜色失真问题。 　　但随着显示屏质量提升，我们并不需要刻意地追求使用局限在216网页安全色范围内的颜色，而是应该更好地搭配使用安全色合非安全色。

19 1.4 网页配色 色彩的象征情感 红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐
　　红色代表热情、活泼、热闹、温暖、幸福、吉祥 　　橙色代表光明、华丽、兴奋、甜蜜、快乐 　　黄色代表明朗、愉快、高贵、希望 　　绿色代表新鲜、平静、和平、柔和、安逸、青春 　　蓝色代表深远、永恒、沉静、理智、诚实、寒冷 　　紫色代表优雅、高贵、魅力、自傲 　　白色代表纯洁、纯真、朴素、神圣、明快 　　灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 　　黑色代表崇高、坚实、严肃、刚健、粗莽

20 1.4 网页配色 Color Scheme Designer Adobe Kuler 配色工具推荐

21 1.4 网页配色 浅析网页配色实例 产品类：主要目的需求展示产品的特性，促进浏览者消费欲望，页面色彩可根据具体产品定位做多样化设计。
简洁灰白色调给网站带来科技感和现代感。

22 1.4 网页配色 浅析网页配色实例 2) 公司、企业类：展示企业形象，加深提高品牌印象，可应用logo的主色系设计，达到品牌统一。

23 1.4 网页配色 浅析网页配色实例 3) 学院网站：主要以介绍学院动态、交流信息为主，首页内容较多，所以配色上需要更为简洁、清爽，否则页面会显得杂乱。 采用与校徽一致的色相，绿色为主色调，显得统一；蓝绿色的配色简洁清爽，而且排版规范，因此虽然内容较多，但看起来仍然非常舒适。

24 1.5 绘制设计图 1. 新建画布，拉辅助线，搭建框架 2. 具体（示意）内容录入 3. 风格与细节调整

25 1.5 绘制设计图 搭建基本框架 新建画布，拉辅助线 具体（示意）内容录入 添加细节

26 1.5 绘制设计图 注意：先打出整体框架再雕琢细节！ 切忌：没有出整体架构就琢磨细节， 元素缺乏对齐； 元素大小与间距控制不当，
　　　元素大小与间距控制不当， 　　　配色冲突与使用某些不合适的颜色。

27 切片基础 2 2.1 切片简介 2.2 切片思路 2.3 切片步骤 2.4 切片技巧

28 顾名思义，把图像切成几部分，再重新组合在一起。 常用的切片软件 Fireworks、Photoshop 切片目的
2.1 切片简介 何为切片 顾名思义，把图像切成几部分，再重新组合在一起。 常用的切片软件 Fireworks、Photoshop 切片目的 为了为网页下载提速，节约系统资源。 实现程序代码所无法达到的美工效果。

29 2.1 切片简介 这是在PS下的切片

30 2.1 切片简介 这是在Fw下的切片 见图中浅绿色框

31 2.2 切片思路 参考思路： 分析网页布局，分解出基本的结构，获得网页所需的主要图片。 切出所需要的图片即可。
将效果图化整为零，精确选择页面框架必须的区域切片。 切片数量不在多，适可而止，结构较简单的网页切片数一般在20片以内。 表格、边框等细节交由css实现。

32 2.3 切片步骤 参考步骤： 1.放大图片，观察细节部分，可利用辅助线和网格提高切片准确度。 2.切片隐藏文字内容，DW中重新插入
3.围绕布局，保持图片区域完整 4.规范命名切片 5.图片全部归入images子目录

33 2.3 切片步骤>>切片 切片前先分析页面结构 隐藏文字内容
边框和单色背景用css定义，不必切出。重复背景也不必全部切出，切出一像素再用css的background:repeat属性控制。 放大图片观察页面的细节部分，看看哪些是可以直接用css控制的 切出所需切片 Tips:①可放大源图， 利用辅助线和网格 提高切片准确度； ②边框无需切出， 由css实现 隐藏文字内容 分析：页面主要由5块组成：banner、navigation、中间大图模块、文章列表以及copyright 切片前先分析页面结构

34 2.3 切片步骤>>导出 【文件】【图像预览】 ，格式选JPEG，品质80, 【导出】
勾选1、4项，切片放在images文件夹下， 【导出】。 按住Shift键可选择多个要导出的切片

35 2.4 切片技巧 ① 切片命名语义化 中文名 建议命名 导航 nav 栏目 column 页头 banner/header 侧栏
sidebar 版权栏 copyright/footer 搜索栏 search/searchbar 内容 content/text 背景 background/bg 滑动图 slide 新闻 news

36 2.4 切片技巧 ② 切片命名语义化

37 2.4 切片技巧 ③ 重构对切片的要求——切我所选 以清洁生产首页实例，譬如我只想切好了banner和slider，只要按住shift，然后鼠标左键选中想要的切片，按刚才的方法导出即可。

38 2.4 切片技巧 ④ 其他需要注意之处： 输出切片页面用英文名！ 原则：尽量对齐切，避免出现跨行跨列的切法。
页面边框无需切出，由css实现即可。 Fw导出切片前，可隐藏网页整体边框不导出，Dw中用css实现。 纯色区域不用切，如前面的文章列表背景，可直接用css实现；渐变色区域切一像素即可 ，如前面提到的导航条、copyright。

39 2.4 切片技巧 ④ 其他需要注意之处： 若用Ps切片，选择“存储为web使用格式”，保存类型“图像和html”，文件名一般为“index.html”。 圆角矩形可切首尾圆角部分 ，中间再切一像素平铺；若无需兼容旧版本浏览器，可只在中间切一像素，再用border- radius实现（中级篇将进一步介绍）。 logo完整切、Banner切1-3刀。

40 The End Thank you!