网页设计之创意风格

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