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

Slides:



Advertisements
Similar presentations
L/O/G/O 吃好每天三顿饭 主讲:吴建芬 学院:医学院. 三餐饭里的营养素 1. 热量 = 生命,不要命的人才不吃饭 2. 三大产热营养素 3. 矿物质,知多少 4. 维生素与维和部队 5. 不喝水一定会生病 6. 膳食纤维为什么被炒得这么热.
Advertisements

每周法治热点幻灯版:个人信息倒卖产业链悄然形成 小心,千万别让自己在网上“裸奔”
彰化縣永靖國小 504公益行動PPT.
日月光·伯爵居项目介绍.
香港故事之 三年零八個月的艱苦歲月 組員: 梁珮瑩 吳遠莉 李琪 李青儀 方松皓.
职业生涯规划.
我的故事 ————往事回首.
工程物业部6月安全检查报告 无锡红星商业管理有限公司.
网页色彩设计 (三)页面各要素颜色搭配 1、 背景与文字
女生成功靠什么? 09英本四班 傅柏双.
仰望星空与脚踏实地 深一模反思 龙城高级中学 高三年级 政治科组 邢晨钟.
国际投资环境罗氏评级法 美国.
“创业之星”创新创业大赛经验分享 ---盛弘电气,丑小鸭变天鹅的故事 罗涛 2009年“创业之星”创新创业大赛负责人 国际事业部总监
社会保障学 第5章 失业保险.
六. 布局.
主 题 班 会 团 结   协 作    力 量.
理想.
2015年第二学期“教研组长与教学常规”培训 静思笃行 持中秉正.
财会专业介绍 LOGO 澧县职业中专学校 2015年6月.
演讲:汤赛 PPT制作:叶雯、卫艳、谢薛伊 资料:叶雯、卫艳、谢薛伊
第3节 页面分析与设计.
厘清监管边界 畅通券商创新通道 吴晓灵 清华大学五道口金融学院院长 全国人大常委、财经委副主任委员
英语等级考试专题学习网站效果图的设计制作
固定与搬运技术 义乌市中心医院 陈红卫.
PRESENTED BY OfficePLUS
案例分析 胎记美容记 第6小组
课程中心 课程中心培训方案 上海泰泽信息技术有限公司
人生五色臉 年輕十歲必學的小動作,九個保持身體健康的的小訣竅 人們常在不經意間做些小動作,並認為這是身體的本能反應,
学籍异动学生选课辅导 学年第1学期.
UI 软件 设计 网页基本元素设计(二).
武汉纺织大学传媒学院 cm.wtu.edu.cn
点击此处添加幻灯片标题 点击添加幻灯片副标题 本模板来源于网络,由第一课件网整理发布,免费分享给大家使用。
第11章:一些著名开源软件介绍 第12章:服务安装和配置 本章教学目标: 了解当前一些应用最广泛的开源软件项目 搭建一个网站服务器
P hoto s hop 第一临床学院 08级临床八年 昌金星.
如何下载英飞凌单片机相关资料? 中英文用户手册、数据手册、应用笔记等.
POWERPOINT TEMPLATE HI.
嘉实多渠道积分兑换 专用平台 欢迎您 活动网站操作介绍 兑换时间( )
PRESENTED BY OfficePLUS
常见介词的使用与比较.
新PQDT论文全文库提交平台.
黑板手绘粉笔风格PPT模板【赠多款纹理+教程】
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
计算机及办公软件应用 ©2013 苏州工业园区职业技术学院
标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序. 标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序.
PRESENTED BY OfficePLUS
网页设计与制作 —— 学习情境二:网页模板设计
PRESENTED BY OfficePLUS
海南医学院附属医院 The Affiliated Hospital of Hainan Medical College 科研信息管理平台上线
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
毕业论文答辩 XXX学院XXX专业 《请在此位置添加你的论文名称》 学校名称:OfficePLUS大学 指导老师:John Doe
企业宣传推广 Loem ipsum dolor sameman tanam casectetur adipiscing elit tamam dalam qoue sampe. dolor sameman tanam casectetur adipiscing elit tamam dalam qoue.
Word中活用“艺▪图▪框” 信息技术必修(一).
指導老師:支紹慈 老師 組員: 4990C048張祺峻 4990C029劉俊睿 4990C043翁廷翰 4990C021陳亮瑜
品牌推广方案 汇报时间:2018年8月 汇报人:优品PPT
2019/5/10 网络学习空间实务操作.
2018年安徽工程大学大学生高分子材料创新创业大赛
Banner Online School 網 路 學 校 - 使 用 教 學 學員手冊.
典雅古香 LOGO Ppt宝藏_www.pptbz.com_提供下载.
MORE THAN TEMPLATE 工作总结 / 述职汇报 / 论文答辩 / 产品介绍.
武汉纺织大学传媒学院 cm.wtu.edu.cn
CLICK HERE TO ADD YOUR TITLE
機構督導: 范盛翔 督導 實習生: 佛光大學社會學系江佳穎 實習日期: 7/1(二)~8/29(五)
YOUR SUBTITLE GOES HERE
项目:交互式网页 义乌工商学院机电信息分院省级精品课程.
FVX1100介绍 法视特(上海)图像科技有限公司 施 俊.
LOGO HERE 单击此处添加 您的标题标题标题 PRESENTED BY JANE DOE
超星电子书 让更多的人读更多的书.
#从产品包装学PPT设计之二# 农夫山泉模版设计修改版 Bread PPT 2011 BREAD PPT
04 03 add your text. add your text. add your text. add your text add your text. add your text. add your text. add your text. add your text add your text.
Presentation transcript:

目录 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.2 需求分析 1.3 常见网页布局 1.4 网页配色 1.5 绘制设计图

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The End Thank you!