《网页设计之创意风格剖析.》由会员分享，可在线阅读，更多相关《网页设计之创意风格剖析.（32页珍藏版）》请在金锄头文库上搜索。
1、网页设计之创意风格,网站类型,资讯类网站,特点： 1、页面信息量大，很高，屏数多 2、重要信息放顶部 3、内容以文字形式为主 4、布局紧凑，中规中矩 布局： 以三栏或四栏竖排为主 色彩： 以红，黄，蓝为主，稳重 要点： 文字排版 内容层级展现,电子商务类网站,特点： 1、产品信息量大 2、图文结合 3、搜索、购物车等功能模块多 布局： 以两栏或三栏竖排为主 色彩： 搭配鲜亮 活泼 色彩丰富 自由度大 要点： UI图标 以商业功能为导向,互动游戏类网站,特点： 1、以图片为主 视觉冲击力强 2、内容少 功能比较固定 布局： 多以两栏为主 色彩： 以游戏环境色为主 强烈 刺激 要点： UI特效 色
2、彩,教育类网站,特点： 1、介绍性内容多 2、首页一般突出文化气息 布局： 横向布局比较多 页面短 色彩： 以绿色、蓝色较多 同一网站色彩不宜杂乱 要点： 规整 重功能,功能型网站,特点： 1、布局简单 学问多 2、用户体验很重要 3、精神感受和粘合度高 布局： 简单明了 强调功能 色彩： 平和、简约、养眼 要点： 用户体验 简约 功能第一,企业型网站,特点： 1、突出企业文化 2、展现企业产品 3、提高客户的认知度 布局： 横向布局多 色彩： 以企业的VI色为主 要点： 体现企业特色 风格个性化,最新网页设计趋势,响应式网页设计,响应式网页设计就是要让网站能够适应所有分辨率。不管你使用什么分
3、 辨率，网站的要素都能够重新组织以形成良好的视觉效果。同样的网站 在大屏幕显示器上和在手机上都能很好地显示。 CSS3几乎能将所有网页设计转变为“响应式”网页设计。 http:/mediaqueri.es/这里推荐了一些比较优秀的响应式设计案例,固定的头部条目,使用CSS position:fixed属性是使你的头部条目固定在网站最好的方法。 当用户往下滚动你网页的时候，此方法会提供一个静止不动的导航和一 个回主页的路径。 这个固定的条目提供了一个减小操作网站距离感的特别用户体验。 人人小站 花瓣网 美丽说,12,大图片背景,使用超大图片来作为背景的这种想法，是获取用户注意力极佳的方法。 当大
4、图赏心悦目的时候我就慢慢的喜欢上了它们，当你把这种大图做背 景的想法融合进你的设计的时候，这样的设计技术，在市场上会使你的 网站显得更专业。 恒大海上威尼斯 About me QQ2013,13,更多空白,给读者更多空白空间，这一趋势在2012年就开始了，响应式设计以及现 在推崇的干净式美学，这些白色空间看起来庄重高雅，而谁又不希望自 己的网站看起来而有内涵呢？ Myspace ,14,全屏排版,随着我们的显示屏幕越来越大，全屏排版更具有视觉冲击力！大图大文 字横向延伸加载，有一种看大片的全新视觉体验。 Myspace 网易聚合阅读,15,圆圈元素设计,这一圆圈设计趋势在网站布局是比较新的且已
5、经被赋予了很多的关注。 设计师喜欢圆圈设计，因为它们干净、整洁，一般适合任何块状布局。 你可以构建你的圆形或者把你的页面元素更改为圆形设计（例如用户头 像、分享按钮、发表日期等等）。 Column Five QQ应用中心,16,扁平化设计,这一概念其实早在几年前就已经开始流行。在 iOS 7 发布之后，这股风 潮估计暂时是不会退去了。当然，除了移动产品的界面设计之外，网站 设计也是扁平化设计占领高地的一部分。 一淘 QQ音乐 Outlook,17,纹理背景,纹理图案背景在网络上没有什么新鲜的。但是，最近几个月这种技术已 经出现了有趣的变化。我指的是“微型纹理”， 是微妙的，几乎不明显 的背景纹
6、理。这些小的细颗粒是让一个网站有质感的最好方法。 花瓣 淘宝专题页(很多) 新浪微访谈 360棋牌,18,色块方格设计,这一设计方法主要是引入了方块的网格设计，这些方块要嘛是纯色块配 上文字，要嘛是方形照片配上文字。 简洁是吸引用户的一大原因，而不同的色块放在一起形成强烈的对 比，容易引起用户的视觉兴趣，进而继续探索下去。 淘宝双十二“不一样的淘”系列专题 MSN,19,版式布局,在以前，我们在控制展示内容的时候，仅仅限于少数可选择“网页安全 字体“，现在我们有了更广泛的工具来丰富我们的排版。 印刷样式的排版可作为设计元素重点，字体和排版是基于内容天生的， 会比在图片和脚本方面下功夫更易获得回
7、应。 影视专题页 美空,20,设计思路,目标清晰 定位准确,设计的目的是为了什么？ 更好的表达信息 功能决定设计方向 看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就 要突出形象和权威性的文章；教育性的，就要突出师资和课程。 设计之前 我们需要做什么？ 深入了解项目背景与产品定位 清楚本网站受众群体的基本情况 学习同类网站,主题鲜明 富有特色,在目标明确的基础上，完成网站的构思创意即总体设计方案。 对网站整体风格和特色作出定位，规划网站的组织结构。 网页站点应针对所服务对象（机构或人）不同而具有不同的形式。有些 站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图 像
8、、闪烁的灯光。 创意要点： 主题鲜明突出，力求简洁 从每一个小细节去突破 标签 按钮 甚至是阴影方向. 一定要有那么个地方与众不同 设计无对错 多想想把自己要表达的东西表达得更好就行,版式编排 布局合理,网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计 不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。 布局要点： 运用好点 线 面 整体布局合理化 有序化 简洁化 由整体到局部 再回归到整体 图文编排要有形式感 丰富多样而又简洁明了 主次关系分明,色彩和谐 重点突出,色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生 的一种感觉。在网页设计中，根据和谐、均
9、衡和重点突出的原则，将不 同的色彩进行组合、搭配来构成美丽的页面。 配色要点： 色彩对人心理的影响 不同人群对色彩的喜恶 明确调性 运用好主色、相近色、对比色、饱和度、明度的关系,其他小观点,视觉设计一如既往地重要着,美感因人而异 最重要还是要搞定你的目标用户 视觉表现需要传达品牌化 天下文章一大抄 抄的是道理、思想、局部精致的点缀 精确到像素 边界清晰 不再模糊 善用素材 提升效率 善待PSD 从细节做起 平时要善于收集有意思的设计 亲近自然 提升眼界,26,设计相关知识,网页设计基础,一、网页： 从功能上分： 静态网页 和 动态网页 二、网站建设流程 其整个过程大体如下： 发起（项目建设的
10、提出） 规划（通过与客户沟通和用户研究，明确站点目标和用户需求，并在此基础上进行站点整体设计和架构） 设计: 通过界面规划和视觉设计，将站点设计方案转变为可视的页面。 制作：用页面标记语言制作具体的页面，并与后台程序组合成最终页面，生成可以运行的完整网站。 测试：测试发生在网站设计的各个过程之中，以明确需求，确认方案。 发布与维护：将经过测试的站点发布上线，通过维护更新，保持站点的正常运行和健康发展。,网页设计基础,1、图像格式 JPEG -联合图像专家组 GIF- 图像交换格式 PNG-可移植网络图像格式 2、字体 默认字体： 中文-宋体 英文times new roma 要求：字体大小适中
11、 中文：12px 14px 英文 ：11px 12px 默认字库外字体使用规则是严格的 3. 关于尺寸 屏幕尺寸 浏览器尺寸 网页实际尺寸 = 浏览器窗口,网页设计基础,1、图像格式 JPEG -联合图像专家组 GIF- 图像交换格式 PNG-可移植网络图像格式 2、字体 默认字体： 中文-宋体 英文times new roma 要求：字体大小适中 中文：12px 14px 英文 ：11px 12px 默认字库外字体使用规则是严格的 3. 关于尺寸 屏幕尺寸 浏览器尺寸 网页实际尺寸 = 浏览器窗口,网页设计基础,屏幕尺寸 (显示器品牌 ，尺寸多样性，使网页尺寸标准越来越难以捉摸) 16:9
12、19201080（21.5 23） 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显示器） 本本：1280800 PC：1440900 针对年轻人 ：19201440（22寸 宽屏） 或：1280*800（本本）,网页设计基础,浏览器尺寸 以22英寸 宽屏显示器 firefox 和 ie 9.0 为例 1920px1440px 网页实际尺寸 = 浏览器窗口 1905px907px,2019/10/18,谢谢！,
