168-第8章 艺术设计网站.pptVIP

第8章 艺术设计网站 8.1 背景概述 成功的艺术设计网站，是技术，艺术，创意的有机组合，以先进的网页技术为施展手段，以合理的结构层次和准确的连接关系表达网站的制作技巧，网站无门面，串串目录开头，层层文字说明，如同当街摆摊的小贩，难以提起人们的欣赏兴趣；而太复杂的页面设计，以技术逞强的站点虽然能领先一时，但不可能受宠一世。因此，创意网站的设计，应充当利用网站的分帧，分层，即连续又间接的特点，在明确网站运行主题的基础上，将风格的定位，结构布局，技术应用等以一种前后呼应，但又层层渗透的表现手法，将形象主题“润物细无声”地体现在各个层面上，用艺术设计的特点，体现网站魅力，与明确的设计理念融为一体。 根据众多艺术设计网站的表现形式，可以大致划分为3种类型。分别是平面设计网站，多媒体设计网站，综合设计网站 1.平面设计网站 平面设计网站是根据市场的需求，针对某些企业或个人而做出展现个人能力和推广业务的一种网络平台。因此，它有鲜明的设计风格 2.多媒体设计网站 多媒体设计网站已经成为一种全新的大众传媒，由于其交互性好，传播面广的特点，为视觉传达设计的传播提供了良好的条件。多媒 体设计网站不仅代表着崭新的信息交流方式，而且它使信息的传播突破了传统的地域文化的阻隔，使信息传递的范围，速度以及效率都产生了质的飞跃。多媒体设计网站一般包括 Flash网站，360°全景网站效果，在线视频，在线教育等 3.综合设计网站 综合设计网站是以多样性设计风格为特点，根据网站的特性而创造出来的视觉效果，但网页设计一般离不开这几个要求：网站信息架构，市场形象定位，导航系统设计，视觉传达设计，动画效果设计等。 8.2实例分析 艺术设计网站主要是以展现设计公司，工作室，或个人的作品与服务为主。该网站属于平面设计网站类型，是作者自己工作室的网站，主要涉及与制作UI（User interface,用户假面）类产品为主。网站界面设计非常精致，就页面本身而言就是一个非常不错的UI设计产品。 UI最初设计是指对软件的人机交互，操作逻辑，界面美观的整体设计。好的UI设计不仅让软件变得有个性，有 品味，还让软件操作的更舒适，简单自由，充分的体现了软件 的定位和特点。在制作网站时也要特别注意这些要点。 8.2.1 色彩分析 本章实例在设计技法上大量的运用了光的效果，在第一章中就介绍过色彩与光的关系，在图形设计上适当的运用发光效果，会使页面整体感觉更精致，更具有艺术性。 页面整体使用神色配色方案，给人一种神秘，期待，科技的感觉。页面中的主体深色（除黑色外）均是使用不同的蓝色（即通过调整蓝色的饱和度，明度来生成灰蓝，淡蓝，紫蓝，湖蓝等色彩）来调配的，也就是说配色方案使用的是同一色相中的不同饱和度，明度来对比搭配的。 各个区域的背景均是使用饱和度较底，明度较暗的颜色，而文字则使用饱和度较高，明度较亮的颜色，从而形成 视觉对比。标题和重要信息则使用绿色和黄色这对互补色来突出显示。 8.2.2 布局分析 该网站属于顶部导航和左侧导航与页面分割的复合结构，多数人都比较喜欢浏览器顶部导航固定且具有层次体系的网页。也就是说，这种网站导航（第一层菜单）位于网页顶部。第二层菜单位于网页左侧的网页布局很受使用者和客户的青睐。 网页整体均使用矩形样式布局，显得结构很清晰。头部区域与尾部区域的大小范围也搭配的很合理，一般比较优秀的网页在结构上有头有尾，首尾呼应。 网页中的各个元素在细节处理上也显得别有心思，这也 正是UI设计师必须具备的基本设计素质。 8.3 使用Photoshop 软件设计版面效果 平面设计网站的重点在于页面效果的设计，这就需要使用Photoshop软件来进行细致的设计与制作。该实例在设计技法上运用最多的就是渐变色的填充，以实现局部的发光与立体效果，在制作的过程中也需要特别注意这一点。下面将来介绍具体的操作步骤。 8.3.1 规划整体版面 首先依然是使用参考线进行版面的规划，然后在进行背景设计，为后面的操作打下基础。具体操作步骤介绍如下。 （1）规划版面，新建一个1000×884像素的文档，设置好参考线，并依照参考线规划处头部区域，Banner区域，左边区域，内容区域，尾部区域。 （2）填充渐变色背景。使用【渐变工具】填充饱和度较低的渐变色。 8.3.2 设计Logo 因为该网站