论坛首页   WEB网页设计  网页界面设计艺术教程精髓

[公告]快到[搜艺招聘网]发布招聘信息 注册简历、发布自己作品！ ：）
网页界面设计艺术教程精髓
yoguz 查看yoguz的博客 金钱 : 18255 Level : 0 发帖数 : 1564 最后登陆 : 2019/10/24 注册时间 : 2004/12/13	信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除 第一章 网页界面设计的基础理论 一、网页界面的构成要素 文字：包括标题、文字信息、文字链接 图形：包括标题、背景、主图、链接按钮 页面版式：也叫页面构图。 色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用； 多媒体：主要是音频、视频和动画等。 音频：包括操作提示音、背景音乐、音频下载和在线欣赏等。 技术：包括浏览器、传输速度、屏幕分辨率、颜色显示。 二、网页界面的主要形式 信息查询类:具代表性的是各种搜索引擎，这类界面设计以使用功能为主，注重视觉元素的均衡排布， 较少装饰性的元素，以 简洁、清晰为主要特点。 大众媒体类:最具代表性的是各大门户网站的新闻版块，以及传统媒体报刊杂志的电子版。这类界面设计各具特色，不一而足，根据各自内容而定。 宣传窗口类:比如企业的网页界面，可以看作CI设计的延伸。 电子商务类:要求既要具备人们乐于接受的交互性，又要有吸引浏览者注意力的页面形式。 交流平台类:比如论坛。界面一般以方便实用为主，指示性强，易于理解。 网络社区类:比如各种个人主页。界面设计可以充分发挥创造性，具有较大的设计自由度。 第二章 网页界面与视觉传达设计 一、视觉传达设计的构成要素 　　文字、图形符号、图像。 二、形式美的创造法则 秩序产生的美感：包括对称、比例、连续、渐变、重复、放射、回旋等。特别在门户型网站和大型公司、政府、事业性单位 的网站界面中，秩序能够产生理性、逻辑、信任、完善的视觉心理反应。 和谐产生的美感 变化产生的美感：网页界面中内容的主次与轻重、结构的虚实、聚散、繁简、形体的大小、形体视觉效果的强弱、 色彩的明暗、冷暖。 三、界面设计创意方法 综合创意方法：追求和谐的美感。 趣味型创意方法：以夸张、幽默的表现方式表现较强的视觉冲击力。 联想型创意方法：使用富于联想性的图形和色彩，使浏览者将形象和主题之间建立必然的联系。 比喻型创意方法：联想选用与主题直接关联的形象，而比喻则选用与主题在某些方面有些许相近的形象， 在某一特点上与主题相同甚至比主题更加美好，从而加强主题的特点。 矛盾型创意方法：故意加入不和谐元素，造成冲突、矛盾的视觉效果。给浏览者以巨大的视觉震撼。 古朴型创意方法：往往受到主题的制约，在宣传传统艺术和文化的场合较为适用。 流行型创意方法：通过鲜明的色彩、单纯的形象以及编排上的节奏感，体现出流行的形式特征，动画效果 的加入更加丰富了它的构成形式。 奇异型创意方法：以含义指代不明的图形为主要表现原素，配合变幻的色彩和简短的文字，吸引浏览者 作进一步的探求。 第三章 网页界面中的图形图像设计 一、图形图像设计的造型元素 基本造型元素 点 线:垂直线、水平线、斜线、几何曲线、自由曲线 面:几何形（矩形、圆形、三角形等）和自由型。 扩展造型元素 空间 运动采用叠合的片断形态、表现形态的运动轨迹、采用运动过程中的形态或不稳定的形态来表现。?/LI> 质感:几何形（矩形、圆形、三角形等）和自由型。 二、图形图像创意的出发点 想象 联想 情感的魅力：让情感贯穿于视觉形式的表现，以增加图形图像的感染力。 夸张与幽默 改变视觉惯性：包括改变形象的大小、形状、所在方位、色彩等。 借鉴传统文化 文字的变化： 文字的变形 文字的组合 文字的图形化 直接表达 三、图像设计的表现技巧 面积与方向:面积大容易吸引观众注意。图像的方向与运动有很大关系，图像的方向性可以通过人、物 的动态、不稳定状态和视线的方向感来获得。 退底与轮廓 虚实与影调 合成与组合 局部与特写 四、图形设计的造型手法 概括 具象 抽象 漫画 装饰 符号化 第四章 网页界面中的色彩设计 一、色彩对比 同时对比与连续对比 色相对比 明度对比 纯度对比 面积对比 二、色彩调和方法 　　同一调和法和秩序调和法。 三、色彩设计的心理效应 色彩的物质性心理效应 色的冷暖感 色的轻重感 色彩的强弱感 色彩的表情与联想 色彩的好恶 色彩的表情：红色——强有力；橙色——富有光泽、最活泼的色彩；黄色——明度最高，极富注目性； 绿色——视觉最乐于接受的颜色；蓝色——广大而内在的色彩；紫色——色彩中最暗的色，视觉知觉度最低。 无彩色——抽象表现力和神秘感。 色彩的联想：与声音和味觉的联想。 色彩设计与视觉心理平衡 第五章 网页界面中文字的编排设计 一、文字编排的规律 对比：大小对比、粗细对比、明暗对比、疏密对比、主从对比、综合对比； 统一与协调 平衡 节奏与韵律 视觉诱导：线的引导、图形的引导。 二、文字编排设计的手法 控制界面四角与对角线 将文字以线或面的形式加以构成 文字造型参差错落 文字中加入杂音 图形与文字的叠加； 文字与文字的叠加； 文字边缘的处理； 文字的缺损与破裂； 分离排列 第六章 网页界面中版式的构成与设计 一、版式设计的造型元素 　　点、线、面、空白。 二、版式设计的形式原理 比例 重复与渐变 对称与均衡 节奏与韵律 对比与统一 三、版式设计中视觉传达率的提高 符合人的视觉习惯:从左至右、从上倒下； 避免产生疲劳感:页面不宜过长，一般控制在1-3屏； 强化页面的主从关系 加强主从对象的大小对比 加大主体形象周围的空白 加强主从对象之间的色彩对比 重复主体形象 加强主从对象在形态上“势”的对比 安排合理的视觉流程 单向视觉流程 横向视觉流程 竖向视觉流程 斜向视觉流程 曲线视觉流程 导向视觉流程 线形导向 形象导向 指示导向 中心视觉流程 反复视觉流程 散点视觉流程 注重清晰的导航:可以把导航信息以相同的形式固定在不同页面的相同位置；可以通过色彩区分、字号加大、多级子栏目 显示、加页面标题等多种方法让观众明晰当前页面所处的位置；对于栏目设置比较复杂的网站，最好的办法是将此页面做成弹出窗口， 不影响原有页面的导航信息，同时只设置与该页面关系最近的导航链接和首页链接。 四、版式构成的类型 水平分割 水平均匀分割 水平不均匀分割 水平多次分割 水平变化分割 垂直分割 垂直均匀分割 垂直不均匀分割 垂直多次分割 垂直变化分割 水平-垂直分割 第七章 网页界面中的动画设计 一、常见的动画设计效果 色彩循环动画 文字与图形图像动画 滚动 跳动 淡进和淡出 飞行 旋转 爆炸组合 闪烁和灯光效果 过渡与变形 排卵期计算器 橙创意
2005/10/29	信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除