网页设计之创意风格幻灯片.ppt

《网页设计之创意风格幻灯片.ppt》由会员分享，可在线阅读，更多相关《网页设计之创意风格幻灯片.ppt（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计之创意风格第1页，共30页，编辑于2022年，星期二网站类型第2页，共30页，编辑于2022年，星期二资讯类网站特点：1、页面信息量大，很高，屏数多2、重要信息放顶部3、内容以文字形式为主4、布局紧凑，中规中矩布局：以三栏或四栏竖排为主色彩：以红，黄，蓝为主，稳重要点：文字排版 内容层级展现第3页，共30页，编辑于2022年，星期二电子商务类网站特点：1、产品信息量大2、图文结合3、搜索、购物车等功能模块多布局：以两栏或三栏竖排为主色彩：搭配鲜亮 活泼 色彩丰富 自由度大要点：UI图标 以商业功能为导向 第4页，共30页，编辑于2022年，星期二互动游戏类网站特点：1、以图片为主 视觉

2、冲击力强2、内容少 功能比较固定布局：多以两栏为主色彩：以游戏环境色为主 强烈 刺激要点：UI特效 色彩第5页，共30页，编辑于2022年，星期二教育类网站特点：1、介绍性内容多2、首页一般突出文化气息布局：横向布局比较多 页面短色彩：以绿色、蓝色较多 同一网站色彩不宜杂乱 要点：规整 重功能第6页，共30页，编辑于2022年，星期二功能型网站特点：1、布局简单 学问多2、用户体验很重要3、精神感受和粘合度高布局：简单明了 强调功能色彩：平和、简约、养眼 要点：用户体验 简约 功能第一第7页，共30页，编辑于2022年，星期二企业型网站特点：1、突出企业文化2、展现企业产品3、提高客户的认知度

3、布局：横向布局多 色彩：以企业的VI色为主要点：体现企业特色 风格个性化第8页，共30页，编辑于2022年，星期二最新网页设计趋势第9页，共30页，编辑于2022年，星期二响应式网页设计响应式网页设计就是要让网站能够适应所有分辨率。不管你使用什么分辨率，网站的要素都能够重新组织以形成良好的视觉效果。同样的网站在大屏幕显示器上和在手机上都能很好地显示。CSS3几乎能将所有网页设计转变为“响应式”网页设计。http:/mediaqueri.es/这里推荐了一些比较优秀的响应式设计案例第10页，共30页，编辑于2022年，星期二固定的头部条目使用CSS position:fixed属性是使你的头部条

4、目固定在网站最好的方法。当用户往下滚动你网页的时候，此方法会提供一个静止不动的导航和一个回主页的路径。这个固定的条目提供了一个减小操作网站距离感的特别用户体验。人人小站 花瓣网 美丽说第11页，共30页，编辑于2022年，星期二大图片背景使用超大图片来作为背景的这种想法，是获取用户注意力极佳的方法。当大图赏心悦目的时候我就慢慢的喜欢上了它们，当你把这种大图做背景的想法融合进你的设计的时候，这样的设计技术，在市场上会使你的网站显得更专业。恒大海上威尼斯 About me QQ201312第12页，共30页，编辑于2022年，星期二更多空白给读者更多空白空间，这一趋势在2012年就开始了，响应式设

5、计以及现在推崇的干净式美学，这些白色空间看起来庄重高雅，而谁又不希望自 己的网站看起来而有内涵呢？Myspace 13第13页，共30页，编辑于2022年，星期二全屏排版随着我们的显示屏幕越来越大，全屏排版更具有视觉冲击力！大图大文字横向延伸加载，有一种看大片的全新视觉体验。Myspace 网易聚合阅读 14第14页，共30页，编辑于2022年，星期二圆圈元素设计这一圆圈设计趋势在网站布局是比较新的且已经被赋予了很多的关注。设计师喜欢圆圈设计，因为它们干净、整洁，一般适合任何块状布局。你可以构建你的圆形或者把你的页面元素更改为圆形设计（例如用户头像、分享按钮、发表日期等等）。Column Fi

6、ve QQ应用中心15第15页，共30页，编辑于2022年，星期二扁平化设计这一概念其实早在几年前就已经开始流行。在 iOS 7 发布之后，这股风潮估计暂时是不会退去了。当然，除了移动产品的界面设计之外，网站设计也是扁平化设计占领高地的一部分。一淘 QQ音乐 Outlook16第16页，共30页，编辑于2022年，星期二纹理背景纹理图案背景在网络上没有什么新鲜的。但是，最近几个月这种技术已经出现了有趣的变化。我指的是“微型纹理”，是微妙的，几乎不明显的背景纹理。这些小的细颗粒是让一个网站有质感的最好方法。花瓣 淘宝专题页(很多)新浪微访谈 360棋牌17第17页，共30页，编辑于2022年，星

7、期二色块方格设计这一设计方法主要是引入了方块的网格设计，这些方块要嘛是纯色块配上文字，要嘛是方形照片配上文字。简洁是吸引用户的一大原因，而不同的色块放在一起形成强烈的对比，容易引起用户的视觉兴趣，进而继续探索下去。淘宝双十二“不一样的淘”系列专题 MSN18第18页，共30页，编辑于2022年，星期二版式布局在以前，我们在控制展示内容的时候，仅仅限于少数可选择“网页安全字体“，现在我们有了更广泛的工具来丰富我们的排版。印刷样式的排版可作为设计元素重点，字体和排版是基于内容天生的，会比在图片和脚本方面下功夫更易获得回应。影视专题页 美空19第19页，共30页，编辑于2022年，星期二设计思路20

8、第20页，共30页，编辑于2022年，星期二目标清晰 定位准确设计的目的是为了什么？更好的表达信息功能决定设计方向看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。设计之前 我们需要做什么？深入了解项目背景与产品定位清楚本网站受众群体的基本情况学习同类网站第21页，共30页，编辑于2022年，星期二主题鲜明 富有特色在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站整体风格和特色作出定位，规划网站的组织结构。网页站点应针对所服务对象（机构或人）不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手

9、法，提供华丽的图像、闪烁的灯光。创意要点：主题鲜明突出，力求简洁从每一个小细节去突破 标签 按钮 甚至是阴影方向.一定要有那么个地方与众不同设计无对错 多想想把自己要表达的东西表达得更好就行第22页，共30页，编辑于2022年，星期二版式编排 布局合理网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。布局要点：运用好点 线 面整体布局合理化 有序化 简洁化由整体到局部 再回归到整体图文编排要有形式感 丰富多样而又简洁明了主次关系分明 第23页，共30页，编辑于2022年，星期二色彩和谐 重点突出色彩是艺术表现的要素之一，

10、它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。配色要点：色彩对人心理的影响不同人群对色彩的喜恶明确调性 运用好主色、相近色、对比色、饱和度、明度的关系 第24页，共30页，编辑于2022年，星期二其他小观点视觉设计一如既往地重要着美感因人而异 最重要还是要搞定你的目标用户视觉表现需要传达品牌化天下文章一大抄 抄的是道理、思想、局部精致的点缀精确到像素 边界清晰 不再模糊善用素材 提升效率善待PSD 从细节做起平时要善于收集有意思的设计亲近自然 提升眼界第25页，共30页，编辑于2022年，星期二设计相关

11、知识 26第26页，共30页，编辑于2022年，星期二网页设计基础一、网页：从功能上分：静态网页 和 动态网页二、网站建设流程其整个过程大体如下：发起（项目建设的提出）规划（通过与客户沟通和用户研究，明确站点目标和用户需求，并在此基础上进行站点整体设计和架构）设计:通过界面规划和视觉设计，将站点设计方案转变为可视的页面。制作：用页面标记语言制作具体的页面，并与后台程序组合成最终页面，生成可以运行的完整网站。测试：测试发生在网站设计的各个过程之中，以明确需求，确认方案。发布与维护：将经过测试的站点发布上线，通过维护更新，保持站点的正常运行和健康发展。第27页，共30页，编辑于2022年，星期二网

12、页设计基础1、图像格式 JPEG-联合图像专家组 GIF-图像交换格式PNG-可移植网络图像格式2 2、字体、字体 默认字体：默认字体：中文中文-宋体宋体 英文英文times new romatimes new roma 要求：字体大小适中 中文：12px 14px 英文 ：11px 12px 默认字库外字体使用规则是严格的3.关于尺寸关于尺寸屏幕尺寸屏幕尺寸浏览器尺寸浏览器尺寸网页实际尺寸网页实际尺寸 =浏览器窗口浏览器窗口 第28页，共30页，编辑于2022年，星期二网页设计基础1、图像格式 JPEG-联合图像专家组 GIF-图像交换格式PNG-可移植网络图像格式2 2、字体、字体 默认字

13、体：默认字体：中文中文-宋体宋体 英文英文times new romatimes new roma 要求：字体大小适中 中文：12px 14px 英文 ：11px 12px 默认字库外字体使用规则是严格的3.关于尺寸关于尺寸屏幕尺寸屏幕尺寸浏览器尺寸浏览器尺寸网页实际尺寸网页实际尺寸 =浏览器窗口浏览器窗口 第29页，共30页，编辑于2022年，星期二网页设计基础 屏幕尺寸屏幕尺寸 (显示器品牌，尺寸多样性，使网页尺寸标准越来越难以捉摸)16:919201080（21.523）1600900（20吋）16:10常见的分辨率有1280800（13.3、14.1、15.4吋笔记本）、1440900（17.1吋、19吋）、16801050（20吋、21.6吋、22吋）、19201200（22、24、25.5、27、27.5）4:3常见的分辨率有800600、1024768（17吋CRT、15吋LCD）、1280960、14001050（20吋）、16001200（20、21、22吋LCD）、19201440、20481536（高端CRT显示器）本本本本：1280800PC：1440900针对年轻人针对年轻人：19201440（22寸宽屏）或：1280*800（本本）第30页，共30页，编辑于2022年，星期二