网页元素设计(中)

第5章网页元素设计（中）情景模拟这天，与小张学校合作的企业找到小张的创业团队，请他们帮助设计几个网站的页面。小张的创业团队对这些网站做了分析，明确了网站的定位、功能、内容和风格，并规划好了网页的用色和布局，然后准备开始设计网站的Logo和导航栏等元素。了解网页Logo的设计类型，掌握网页Logo的设计方法了解导航栏的设计类型，掌握导航栏的设计方法了解网页页尾的设计原则和形式，掌握网页页尾的设计方法能够根据需要设计网页Logo、导航栏和页尾学习目标5.1网页Logo设计Logo是网站最重要的组成元素，其作用与企业商标类似，每一个Logo都是独一无二的，用于展示网站形象，提高网站辨识度。网站Logo一般通过图形、文字组合而成，其设计既要具有象征意义，充分体现网站的理念、特色和内容，又要简约、美观、大气、独特，容易识别并让人印象深刻。网站Logo分为图形型、文字型和图文型3种类型，下面分别介绍。5.1.1Logo设计类型56图形型Logo用图形表达特定的含义和信息，又分为具象型和抽象型2种类型。1．图形型图5-1具象型Logo（1）具象型具象型Logo是在具体现实图像的基础上，经过各种修饰，如简化、概括、突出和夸张等设计而成的，如图5-1所示。具象型Logo源于现实又高于现实，具有高度的辨识性，能够以清晰、明快的视觉形象传达出网站的精神和理念。抽象型Logo是用点、线、面、体等造型要素设计而成的标志。它突破了具象的束缚，在造型效果上有较大的发挥余地，可以产生强烈的视觉刺激，但在理解上易于产生不确定性，如图5-2所示。图5-2抽象型Logo7（2）抽象型82．文字型图5-3文字型Logo文字型Logo以文字为表现主体，题材一般是企业相关文字，如名称、简称、首字、缩略词等，如图5-3所示。文字型Logo更具实效性，它能在短时间内准确、清晰地传达企业品牌，树立企业形象。文字型Logo不但要有美观的外形，更要注重其内在含义。以小米公司的Logo为例，该公司的核心理念是“为顾客省点心”，所以Logo是以中文“心”为基础，将文字垂直翻转，再去掉了一个点，将字形和MI相结合，是非常妙的文字型Logo；类似的还有亚马逊公司的Logo，该Logo中箭头的始末表明Amazon的产品销售范围从A到Z，同时箭头的形状如同嘴角上扬的微笑，代表Amazon的优质服务。9提示制作文字型Logo的方法：思考Logo的意义与客户需求、企业、产品等因素的关联，然后分析文字中笔画、字母之间的联系，再对整体文字进行组合、变形，制作Logo草图。例如，可以针对汉字中笔画的“点”或英文中“o”“i”“l”等字母进行变形，因为这些笔画或字母很容易让人联想到生活中的太阳、电灯、树木等事物。图5-4图形为主的Logo103．图文型图文型Logo是由图形与文字组合而成的。这种Logo歧义性低，视觉效果好。但Logo中元素丰富，容易复杂化，因此图形或文字通常只侧重一方。以图形为主的Logo中，文字通常只起到说明作用，但字形会与图形呼应，文字的平滑或锐利都与图形形象相关，如图5-4所示。（1）图形为主11以文字为主的Logo中，文字面积较大，图形作为辅助，二者相互结合传达企业形象和理念，如图5-5所示。（2）文字为主图5-5文字为主的Logo课堂互动根据所学知识，以自己的名字为基础，在纸上设计出5个不同类型的文字变形图形。以下是Logo设计中的常见误区，了解这些误区，能在Logo设计中避免错误。5.1.2Logo设计误区13141．敏感符号图5-6敏感符号的使用对比除特殊需求外，Logo设计中使用的符号和图案最好不要直接涉及国家、宗教或习俗，以免引起误会。如果在Logo中需要体现某个国家，应尽量提取该国家的气质特征和代表元素，而不是直接使用旗帜，如图5-6所示。152．复杂图5-7简洁与复杂的对比复杂的Logo辨识度低，不利于企业形象树立。Logo的寓意应做到简洁深刻，使Logo无论从形象还是意义方面都能给浏览者留下深刻印象，图5-7所示。163．无规律的颜色变化图5-8颜色变化的对比颜色搭配是制作Logo的核心要点之一，优秀的配色方案会使Logo效果锦上添花，反之则会使Logo效果降低。通常，Logo色彩的变化不宜过多，如果必须使用多种颜色，则要求颜色鲜活明丽，有章可循，如图5-8所示。174．实用性差图5-9实用性对比追求细节可以使Logo更加完善，但过于烦琐则会导致Logo不利于实际应用。Logo不仅用于网络，还会以实体形式印刷或喷绘出来，如果Logo在缩小或放大后的表现效果不同，或颜色无法在印刷中表现，将不利于在实际中应用，如图5-9所示。提示在设计阶段，可以将Logo缩小到一元硬币大小，看看能否看清Logo的主体内容和细节，无法看清的部分需要删除或调整。小张的创业团队接到一个设计房地产公司Logo的项目。在与该项目负责人沟通时，对方是这样描述需求的：“作为富奥的企业形象，我希望Logo是中英文结合的文字型Logo，并且Logo需要符合时代美感，外形俊朗、张弛有度，能够体现我公司坚实稳健、积极向上的形象。”5.1.3课堂案例——设计房地产公司网站Logo18视频讲解19图5-10富奥Logo作品展示根据需求分析设计的Logo如图5-10所示。该Logo以富奥的拼音“FUAO”作为创意基础，Logo外形呈矩形，坚实稳固、极致俊朗，彰显富奥品质与信赖之感。以红色和蓝色作为标准色，字母“F”中的红色形状如同建筑的顶层，寓意方正公平；字母“A”中的红色三角形如同建筑基础，寓意坚实稳固。Logo字母刚柔并济、富有韧性，给人张弛有度、诚实稳健的视觉感受，能够展现富奥以诚相待、和谐共赢的商道理念。设计思路①客户属于地产行业，为突出Logo俊朗的感觉，将Logo外形设计为矩形，提取字母中矩形与三角形元素，使Logo更富有设计感。②当前的流行趋势是“扁平化”，因此不对Logo进行三维处理。③Logo使用红、蓝配色，红色象征向上、进取，蓝色象征成熟稳重，体现地产行业的特点。21在Photoshop中新建文档，设置文档尺寸为1000×200像素，分辨率为300像素/英寸，颜色模式为RGB，背景为白色。步骤1案例步骤选择“横排文字工具”，在“字符”面板中设置字符参数，然后在文档窗口中单击，输入“FUAO”文字，如图5-11所示。步骤2图5-11输入文字#273d6f22在“图层”面板中右击“fuao”图层，从弹出的快捷菜单中选择“转换为形状”，将文字转换为形状，然后按【Ctrl+R】组合键打开标尺工具，为“F”边缘添加辅助线，如图5-12所示。步骤3图5-12将文字转换为形状并添加辅助线23选择“添加锚点工具”，在“F”中单击添加4个锚点（左侧3个，右侧1个），然后使用“直接选择工具”框选中间的2个锚点，按【Delete】键删除，将“F”分为上下两部分，如图5-13所示。步骤4图5-13添加并编辑锚点24使用“直接选择工具”框选“F”下部分形状右侧的两个锚点，水平向右移动，使其与辅助线对齐，然后使用“直接选择工具”框选“F”上部分形状，按【Ctrl+J】组合键复制矩形，再将复制后的矩形颜色调整为红色，如图5-14所示。步骤5图5-14复制并更改矩形颜色#cb2d2b25为字母“A”添加辅助线，框选字母内部白色三角形的锚点，按【Delete】键删除，然后选择内部左侧锚点，将其拖动至顶部辅助线交叉处，如图5-15所示。步骤6图5-15编辑形状26新建图层，选择“钢笔工具”，将绘图模式调整为“形状”模式，填充设为红色，并取消轮廓填充，然后依次单击绘制等腰三角形，如图5-16所示。步骤7图5-16绘制三角形27使用“横排文字工具”输入“富奥地产”文字，调整文字大小和位置，并将其转换为形状。步骤8使用“直接选择工具”分别调整“奥地产”底部形状，使文字连接成一体，如图5-17所示。步骤9图5-17输入并调整文字28使用“移动工具”选中Logo字母部分，按【Ctrl+G】组合键编组，然后选中所有图层，单击工具属性栏中的“垂直居中对齐”按钮，使文字水平居中对齐，最后调整图形位置与大小，完成Logo制作，效果如图5-18所示。步骤10图5-18调整Logo小张的创业团队接到一个制作传媒公司Logo的项目，该客户正计划组建一个影视传媒公司，希望以VIDEOARTIST（视频艺术家）文字为基础制作Logo，以此展现视频艺术的魅力，要求Logo大气，识别度高。5.1.4课堂案例——设计传媒公司网站Logo29视频讲解30图5-19视频艺术家Logo作品展示根据需求分析设计的Logo如图5-19所示。该Logo以“VIDEOARTIST”文字作为创意基础，提取单词首字母“V”与“A”巧妙结合制作而成。该Logo形如纽带，蕴含三个“一”形于其中，寓意三三不尽、生生不息的驱动力，体现企业聚沙成塔、积水成渊的战略构想；配色以渐变的红色和蓝色为主，给人勇往直前、诚实稳健的视觉感受，并展现出企业大气磅礴、气贯长虹的气势。设计思路①提取英文首字母，明确叠压关系，制作Logo主体；②客户属于传媒行业，该行业的特点是时尚，艺术气息浓厚，因此调整Logo形状，使其更富有动感；③动感的形状搭配渐变色，能让Logo更有魅力。32在Photoshop中新建文档，设置尺寸为1000×700像素，分辨率为300像素/英寸，颜色模式为RGB，背景色为白色。步骤1案例步骤从工具箱中设置前景色为黑色，选择“圆角矩形工具”，从工具属性栏中取消描边，单击文档窗口中的空白处，创建圆角矩形，如图5-20所示。步骤2图5-20绘制圆角矩形前景色背景色33使用“直接选择工具”框选圆角矩形上方的锚点，按【Shift+→】组合键向右平移180像素（每按一次按键平移10像素），如图5-21所示。步骤3图5-21调整圆角矩形锚点34选择圆角矩形顶部右侧的锚点，按【Shift+→】组合键向右平移30像素，并拖动锚点两侧的控制柄调整上方圆角弧度，再按此方法对圆角矩形下方锚点做反方向变形处理，如图5-22所示。步骤4图5-22调整圆角弧度与下方锚点35双击“圆角矩形1”图层，然后参考图5-23为其添加渐变叠加样式。步骤5图5-23添加渐变叠加样式#b91e2f#5c0f26#d11a6436按【Ctrl+J】组合键复制图层，然后使用“移动工具”选择“圆角矩形1”图层；按【Ctrl+T】组合键，利用出现的自由变形框水平翻转图形（向右拖动变形框左侧中间的控制点），按【Enter】键确认（也可选择“编辑”“变换”“水平翻转”菜单）；调整复制后的图形位置，然后双击“圆角矩形1”图层中的图标，从弹出的对话框中更改渐变角度为“90”，如图5-24所示。步骤6图5-24复制并调整圆角矩形37图5-25复制并更改圆角矩形渐变样式#0f3675#0b66a9#1d2a58按住【Alt+Shift】组合键，使用“移动工具”水平向右拖动左侧的图形，复制出一个副本，组成字母“A”的右侧，再双击复制的图层，从弹出的对话框中参考图5-25更改渐变叠加的颜色。步骤738使用“添加锚点工具”在“圆角矩形1拷贝2”图形中添加4个锚点，然后使用“直接选择工具”调整中间的2个锚点，形成字母“A”的中间部分，如图5-26所示。步骤8图5-26绘制形状39选择“横排文字工具”，在“字符”面板中设置参数，输入“VIDEOARTIST”文字，置于图形下方，如图5-27所示。到此，便完成了Logo的制作。步骤9图5-27输入文字#434445举一反三选择自己喜欢的动物形象，设计并制作图形Logo。要求如下：①规格：尺寸大小控制在800×800像素，分辨率72像素/英寸，RGB模式，以PSD格式进行储存。②图形表达准确，具有一定的设计感。③图形结构协调，富有美感。④色彩运用恰当，与内容相符。5.2网页导航栏设计导航栏在网站设计中的地位举足轻重。清晰的导航栏能帮助用户更快、更准确地找到想要浏览的内容，提高用户在网站的停留时间，减少跳出率。根据导航栏在网页中的位置，常见的网页导航栏有以下几种类型。5.2.1导航栏设计类