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