《网页美工设计》教案-第五章 网页主题按钮设计 教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第二部分技能提升篇第五章网页主题按钮设计标题第五章网页主题按钮设计课时2课时教学目标教学内容与过程如果说功能UI是指具有明确指代含义的图形，通过抽象化的视觉符号向用户传递信息。那么主题UI则多存在于电脑主屏幕界面，或者从网站下载时看到的图，通过点击它进入到某个网页或者某个应用。通俗地说：主题图标代表该网页的主要内容。一、网页主题图标分类网页主题图标从不同的角度可以分为三大类1、从知识产权上划分主题图标类似企业产品的品牌logo，具有唯一性、不可复制和抄袭的特点，任何人都不得擅自使用，下图中4个主题图标都使用了自身的品牌logo；主题图标类似公共指示标志，是通用的、大众认知和约定俗成的，任何人都可以使用，设计师还可以通过优化和改造设计成其他的变体。2、从视觉表现上划分主题图标是漂亮的、具有吸引力、表现形式多种多样的视觉图形，可以是简单的剪影图标，也可以是轻质感的扁平图标，还可以是重质感的拟物图标，甚至可以是华丽的插画图标；功能图标是表意明确的简单图形，通常是剪影图标，使用简单的色彩搭配，他们必须保持一致的设计风格，不可以同时出现面形或线形夹杂或是圆角大小不一致的情况。3、从造型结构上划分主题图标通常是面型图标，因为这是视觉表现力的最大化，可以在众多的网页标识中获得更大的关注度；功能图标通常是线形图标，因为在界面中视觉元素过多，需要弱化图标的视觉表现力。减轻用户的视觉负担，但这种划分并不是绝对的，也有许多应用图标采用线形风格。从设计师的角度，要着重需要掌握后面两种划分风格。通过上面的主题图标划分可知，主题图标的设计风格可以有多种形式。就目前的流行趋势看，扁平化和轻质感设计风格是当下非常流行的。二、主题图标的绘制技法主题图标的绘制技法分为5大类1、剪影图形通常是简洁的剪影突刺那个寸简单的背景，无需过多视觉元素。2、轻拟物通常在原来的拟物化图标基础上，减去厚重的质感，去除复杂的图层样式，纹理化转化为扁平化图标3、轻质感通常是在坚硬图标的基础上增添清亮的图层样式，通过色彩明暗关系表达丰富的立体层次感。4、拟物拟物化图标是将现实生活中既有的物品直接描绘出来的设计手法。5、文字主体文字主体是网页主题图标当中运用最为广泛的设计技法了。通常是字母或中文作为图形培寸的简单背景，这些文字经过设计变形后具有唯一的识别性。总之主题图标是一个用户对网页门户的第一印象，一个好的主题图标可以通过图标向用户传递网页门户的内涵，能让用户由外到内的都和谐统一。因此，我们在设计当中一定要注意主题图标的可识别性，优秀的图标设计，首要前提是表意准确，能够让用户一眼识别它所代表的含义。自从扁平化设计风格逐渐流行，拟物化风格逐渐消失，正如图上的两个主题图标，笔记本的样式从拟物化变成了扁平化，更加弱化了拟物化的质感。这就对设计提出了更高的要求，原来我们可以用很具像的图形来表现，现在则更多的通过抽象的图形来传递正确的信息。这就需要我们对现实世界中的真实物品进行抽象化的提取。例如相机、电脑、文件、日历、地图、时钟等等，设计师需要通过抽象化的手法将他们绘制成扁平化的图标。本节课我们以时钟为例，进行图标的扁平化、抽象化提取。整个步骤分为5部：观察现实参照物找一张时钟的实物图片观察它又哪些部分构成以本案为例，时钟主要由外框、表盘、刻度、数字和指针等重新描绘图形在实物的基础上重新描绘，并去除一切质感、渐变阴影高光等，图形最终呈现扁平化。绘制700X700PX的正圆，填充无色，描边黑色45PX，完成表盘绘制接着绘制刻度盘新建一个图层，用左侧“铅笔工具”按住“shift”绘制出一条位于画布中心的宽度为“3pt”的直线，复制粘贴新图层，对新粘贴出来的图层按“ctrl+T”进行自由变换，在上侧设置旋转角度为“3度”，执行操作，按照上一步中的方法，再做出一条旋转后的直线，这时候，按键盘上的“ctrl+shift+alt”键，再按“T”键进行步骤复制，绘制出表盘刻度的线条，接着，点击左侧的“椭圆选框工具”以中心点为圆心按住“shift+alt”键绘制出一个圆形选框，然后按“ctrl+enter+delete”键删除选框内的线条，按照上述同样的方法，绘制出表盘上较粗的刻度线，铅笔绘制5px旋转30°，刻度盘的制作就完成了，接下来绘制走针绘制20PX的正圆做中心绘制15X200PX的矩形，并调节形状去除多余元素保持简练的结构，将一些不必要的元素全部去掉，最后只剩下外框，表盘和指针，已逐渐出现图标的雏形将图形抽象化图标是对显示参照物的抽象化，重新刻画过于具象的指针，使用简洁的原型柱状形态替代指针，