网页设计【视觉篇】1.ppt

绿色自然中最多的颜色，绿色能够唤起一种人类对于自然的本能意识。绿色代表着通行、准许通过的意思，因此很多常用于开始按钮和下载按钮，还有成功提示页面。 紫色是由温暖的红色和冷静的蓝色化合而成，被认为是一种优雅高档的色彩，常用于表现商品的奢华和高贵。紫色同时也是很多艺术家都喜欢的色彩。紫色智慧想象神秘高雅。 6.3.3 色彩组合 非彩色的搭配 单色配色 2-3色配色 多种色彩配色 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。 velvet网无色系这个作品展示页是一个典型的单色设计，抽象的图形使得它看起来不那么接地气，而这种独特的设计美学可能更容易被那些经过专业训练的用户所欣赏。这个网站是相当值得探索也研究的。 非彩色的搭配 单色配色 2-3色配色 多种色彩配色 非彩色的搭配 单色配色 2-3色配色 多种色彩配色 非彩色的搭配 单色配色 2-3色配色 多种色彩配色 而Softwaremill官网同样用了多个明快的色彩，但在色彩所占的比例却十分讲究，而且最终统一在了一个白色的大背景下，时尚清新。 6.4.1 视频 由于视频是最强大的可视化工具，能刺激人类的视觉听觉多个感官，因此将网页背景设置为视频动画的网站也是相当受用户亲睐。 6.4 多媒体 6.4.2 音频 音频在网页中常与视频、动效搭配使用，虽不是必不可少，却是一种有效的提示功能，有时它能让网站变得更有趣、更讨巧的方式 如在线新华字典网，用户查询完一个汉字后，可以通过点击音频按钮学习标准的汉字发音。 再如某些个人博客，插入音乐彰显出自己的个性，但是此时的音乐需要注意其播放的灵活性，及音效本身的风格是否会打扰到用户阅读网页的内容信息，若使用不当就会变得画蛇添足 人的眼睛善于捕捉动态的图形，因此动效在网页的信息展示及交互中往往是点睛之笔。从技术的角度分类可分为gif,flash与程序实现的动画。 6.5 动效 6.5.1 gif动图 gif动图在网页中不简单的小动画，如动态图标、动态表情等。大多数网站可以通过单击右键“另存为”而保存其gif动图。如moosend网中多个图表信息就是采用的gif动画，所占空间小，还可以直接保存在本地电脑上。 6.5.2 flash动画 Flash动画由于体积小，动态交互效果丰富也常用于网页中，它可以是视频也可以是游戏，但不易直接保存，且需要安装Adobe Flash Player ActiveX插件才能正常观看。 6.5.3 程序实现的动画 程序实现动画即是利用脚本语言编辑实现的绚丽的动画效果，它不能存在本地电脑上，只有高级浏览器才支持。程序实现动画包括js实现菜单、h5动画、css动画等，这是目前最流行的网页动画表现形式。 如加拿大的法语机构Leeroy，其官网使用了大量的js动画，鼠标悬停在 哪，细砂就会散开。感觉玩上一天也不觉得累。H5动画都可以实现 6.6 案例——天猫商城店铺设计 标题: 字体: 微软雅黑粗体 字号: 32-36pt 颜色: 主题蓝色 副标题: 字体: 微软雅黑 字号: 24pt 颜色: 主题灰色 网页设计从界面布局到视觉表现 视觉表现篇 视听元素 网页视觉设计要点 网页视觉风格 6. 视听元素 6.1 文字 6.2 图像 6.3 色彩 6.4 多媒体 6.5 动效 6.6 案例——天猫商城店铺界面 设计 同操作系统都有不同的字体系统，而浏览器是用本地系统字库显示页面内容的，大多数浏览者的系统里只装有几种常的字体类型，因此设计的特殊字体在浏览者的系统里并不一定能看到预期设计效果。。 视觉篇 6.1.1 字体的选择 6.1 文字 在平面设计中常以字体被修饰与是否将字体分为衬线字体与非无衬线字体，衬线字体就是中文里的宋体，英文的Times New Roma，其特点是在字体边角会多出一些修饰，可以清晰的分辨出字母和文字，分辨笔划的起始和终止，适合大段文字正文的阅读。无衬线字体则是中文里的黑体、英文的Aril，这种文字看起来很干净整齐，同等字号的字体，无衬线体视觉感受更大，因此适合大标题显示 衬线字体（左）与非无衬线字体（右） 6.1.2 文字的可读性 浏览器有默认的字体设置对字体的显示进行了规范， 但这并不意味着字体就拥有较佳的可读性。影响文字可读性有字体样式、间距这两大因素。 字体样式 间距包括文 字的字距、 行距等。 字体样式包括字体的大小，颜色，字体是常