数字媒体交互设计(慕课版) 课件 13网页视觉设计规范及界面分割方法与优化.ppt

数字媒体交互设计(慕课版) 课件 13网页视觉设计规范及界面分割方法与优化.ppt

  1. 1、本文档共27页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页视觉设计规范 及页面切片方法与优化 天津电子信息职业技术学院 知识要点 01 Ps-网页设计分类和设计规范 02 掌握web界面在ps中的切片方法 03 根据交互需求进行页面切图 04 Ps-切图文件的命名 网页设计分类和设计规范 概念介绍-什么是网页设计 通常意义上的网站设计,即指的是网站中各个页面的设计。对于设计,最先用到的就是网页的布局。布局是否合理、美观; Ps-网页设计分类和设计规范 1. 综合资讯类 Ps-网页设计分类和设计规范 2. 企业品牌类 3. 交易类 设计分类 4. 社区类 Ps-网页设计分类和设计规范 5. 办公及政府机构类 6. 互动游戏类 设计分类 7. 有偿资讯类 Ps-网页设计分类和设计规范 8. 功能类 9. 综合类 设计分类 设计规范 1、网页尺寸 1920px 安全尺寸 1200px *800px Ps-网页设计分类和设计规范 设计规范 1、网页尺寸 1920px 安全尺寸 1200px *800px Ps-网页设计分类和设计规范 设计规范 2、文字选择 正文宋体居多、思源; 英文:Arial;Tacoma;Veranda; 消除锯齿的方式为:Windows LCD 行间距尽量保持在1.5-2倍的距离 字体颜色不要纯黑(#000000) Ps-网页设计分类和设计规范 文字颜色 #333333 #666666 #999999 #cccccc 标题文字 正文文字 次要文字 提示性文字(用于组件或提示框文字) 字号 16-18 12-14,14居多 12,英文10 行间距 16号文字,行间距24-32 14号文字,行间距21-28 12号文字,行间距18-24 设计规范 3、统一性配色 尽量保持色相一致 要有主色调 除图片外,尽量不要超过3种颜色 Ps-网页设计分类和设计规范 掌握web界面在ps中的切图方法 02 掌握web界面在ps中的分割方法 主要目的是减小文件容量,提高组件的复用性,让网页浏览更快。 为什么要切图 1、以这个图片为例,按住【Alt】键点住我们要切的图所在组,这样背景就直接隐藏了【如图所示】。 切图方法-PS手动切图 掌握web界面在ps中的分割方法 2、【选框工具】框选出我们需要的图片,鼠标【右键】点击图片所在组,选择【转换为智能对象】。 然后裁剪工具选中我们框选的地方,直接把图片切出来【如图所示】。 切图方法 切图方法-PS手动切图 掌握web界面在ps中的分割方法 3、【文件】存储为web所用格式,弹出对话框,图片格式修改为【PNG】格式,适当调整长宽比,然后点击【存储】,选择保存路径【如图所示】。 切图方法 切图方法-PS手动切图 掌握web界面在ps中的分割方法 1、右键“快速导出为png文件” 切图方法 切图方法-PS图层右键存储 掌握web界面在ps中的分割方法 1、我们使用“切片”工具,切出我们要存储的多个画面;打开【文件】存储为web所用格式,点击“存储”,选择“所有用户切片” 切图方法 切图方法-PS切图工具 掌握web界面在ps中的分割方法 1、Cutterman是一款运行在photoshop中的插件,能够自动将我们需要的图层进行输出, 以替代传统的手工 导出web所用格式 以及使用切片工具进行挨个切图的繁琐流程。 切图方法 切图方法-ps插件Cutterman 掌握web界面在ps中的分割方法 本节课主要讲解网页视觉设计规范及界面分割方法与优化 根据本课的内容 ,我们可以练习去分析一些网站 ,包括它的是属于哪种网站类型 ,它有哪些基础元素 ,然后有哪些设计合理的地方 ,大家在课程结束后可以去试着总结一下; * 我们这节课主要讲到的知识要点是网页设计的分类 ,包括它一些设计规范 ;还有掌握下web页面切图的方法,以及如果根据交互设计的需求进行分割,切图文件的如何命名等等; 因为很多同学是没有接触过网页设计的 ,并不了解它的一些基础知识 ,所以本节课在这里给大家做一些总结 ,同学们了解之后 ,在设计网页的时候 ,心里就会有一个大概的定位 , 就是我们做的是哪种类型的网站 ,然后我们用哪种版式 ,包括一些字体颜色的选择方面 ,基本上都有一个基础的了解 ; * * 什么是网页设计,其实就是一个网站的设计 ,也就是说我们的一个网站 ,包含各个页面 ,那么对于设计首先想到的是布局以及布局是否合理,将直接影响到用户的阅读体验及访问时间。 比如,我们通过一个链接在浏览器上打开一个页面 ,那么打开的任何页面都可以叫做是网页 ; 下面我们来了解网站的一些常见分类 ; * 网页设计的分类大概分以下几种,首先我们看 综合资讯类 以提供信息资讯为主,是目前最普遍的网站形式之一; 特点是信息量大,

您可能关注的文档

文档评论(0)

balala11 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档