《网页美工设计》教案-第1讲 餐饮类网页设计制作

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 PAGE1第三部分综合实训篇第一章综合案例——餐饮类网页设计制作标题第一节餐饮类网页设计制作案例1第一讲餐饮类网页设计制作1（上）课时2课时教学目标教学内容与过程随着人们生活水平的提高，人们对于美食的需求也越来越旺盛，各种餐饮企业也如雨后春笋一般不断涌现，蓬勃发展。这也加剧了餐饮业的市场竞争，很多餐饮企业不仅加大了线下的推销和宣传，同时也越来越重视线上的展示与市场开发。那么，一个优秀的餐饮网站对企业的发展就显得尤为重要，拥有专属的餐饮网站，似乎就拥有了进入线上赛场的入场券。通过对产品的宣传，能更好的吸引顾客，同时，更大范围的拓展市场，助力企业发展。由此可见，设计好餐饮类网站对饮食行业的发展是非常有必要和有意义的。那么今天这节课我们就一起来学习餐饮网页设计第一部分。本次课程我们将分别从设计网站Logo、确定网站设计风格、确定网站整体颜色基调、版块划分和网页布局、网页导航设计、网页装饰设计六个方面一一为大家进行讲解。首先我们来讲如何设计网页标志。随着社会信息技术的迅速发展，网络作为一种新的沟通渠道和宣传手段成为人们新的生活方式。企业通过网络发布信息、获取知识、展示宣传等，网页已经成为企业在网络空间的形象和存在。logo作为网站的重要视觉要素，显得尤为重要。对于一个网站来说，logo既是网站的名片，更是通向网站的一扇窗口。一个造型精美，意思表达准确的标志是网页的点睛之笔和灵魂所在。餐饮类网页的标志设计，首先要反映餐饮的行业特征。其创作素材可以选用与餐饮相关的各类事物。如：餐具、食材、品质、工艺、地域、特色、环境、人物形象、经营内容等。具体创作可从以下方面入手。标志设计反映经营内容中餐或西餐标志设计前先确定其经营的是中餐还是西餐。如果是中餐，可以选用中式的风格、元素、表现方法进行创意设计。如果为西餐，则可以选用西式的风格、元素、表现方法进行创意设计。饮食品类不同餐饮企业具体经营的品类不同，标志设计可以从品类入手进行设计。如：经营的是面条还是水饺？烧烤还是火锅，亦或是小龙虾。了解了其具体经营的品类后，从品类出发进行设计，直观的展现经营的品类，便于消费者识别和选购。（二）反映地域特征有很多产品都具有浓浓的地域特色，为当地的特产或特色美食。只有特定的地方才能吃到或者才最正宗。这时候，标志设计就要反映出该地域特定的文化元素或名称，让消费者便于鉴别和选用。如：苗家频道标志设计，选用苗族少女的形象进行设计，鄂温克媳妇标志设计选用鄂温克妇女的形象进行设计，牧野自然则选用伊斯兰教建筑清真寺进行设计，这些创作方法都是为了突出少数民族特色美食的民族特性。而老北京涮锅、襄阳牛肉面则是通过地名明确告知消费者美食的原产地。(三)反映经营主体经营主体即经营者和经销商，很多饮食行业的经营者经营时间久远，经验丰富，在一定的地域范围内小有名气，消费者往往奔着这些经营者的名号而来。所以采用具体的经营者名称或肖像进行标志设计，有助于消费者辨识。如：张爷爷空心面、青婆婆锅巴饭、陈记牛肉面标志设计都属于这一类型。(四)反映品质和特色食品的品质通常表现为“色、香、味”等感官刺激或客户夸赞及食品的分量感和性价比等等。通过对品质和特色的描述让消费者产生食欲和认同，从而促进购买的欲望。如：好味道吐司、绝味鸭脖、香飘飘奶茶等展现的是香和味，大碗鱼表现出分量足，而秘制烤鱼则强调的是特色工艺。(五)反映情感回忆现代社会发展变化加快，随着年龄的增长和时代的变迁，很多的事物离我们越来越远，美好的童年回忆一去不复返，人们常常在思绪中回忆过往。饮食是勾起回忆的最有效方式之一，因此利用熟悉的味道、熟悉的场景、熟悉的制作工艺通常更容易勾起人们的回忆，吸引消费者的注意，从而引起人们的共鸣。如:妈妈的味道、爷爷的湘钵菜、乡间味道、柴火记忆品牌标志设计就特别具有时代标签和情感记忆，给人以无比的亲近感。二、确定网站设计风格（一）明确整体要求餐饮类网站因其特殊的行业属性，人们对其卫生状况及食材的新鲜度十分关注。因此网页设计要保持干净整洁、鲜艳明亮、色彩对比鲜明、行业特征明显，从而给浏览者留下良好的印象和深刻的记忆。（二）确定设计风格1、根据经营对象的整体面向确定风格餐饮经营的面向不同其网页设计的风格也有所不同，设计网页之前先要明确其整体面向的是中餐或是西餐。如：中餐采用中式设计风格，西餐采用西式设计风格，也可采用折中的现代简约设计风格。这样的页面风格与内容统一，让浏览者有很强的代入感。2、根据对象的经营内容和特点确定风格如：经营对象为中式传统风味的食品或企业有着悠久的历史，网页设计可采用中式风格；如果经营的食品为原生态食材类的企业，网站设计则可以采用乡村风格；而经营中西式简餐或日韩料理可采用简约和日韩风格；经营进口肉食、海鲜类食品可采用美式风格；而如果经营正宗的西餐则可以采用欧式风格进行设计等。三、确定网站整体颜色基调网站的颜色基调通常根据企业发展理念、经营内容、客户对象、产品特性等因素确定。不同的颜色基调给人的感觉是不一样的。（一）依据行业性格基调确定颜色颜色具有联想和想象的艺术属性，饮食行业的服务对象和性格基调不一样，使用的颜色也有所不同。如：蓝色、绿色给人鲜嫩可爱的感觉；清淡、高亮色调给人悠闲、舒适的感觉；黄色和红色给人热闹、喜庆的感觉；黄色、绿色则让人感觉健康、清新；紫色、金色让人感觉高雅、时尚等。（二）依据食品特性或制作工艺确定颜色不同的食物或食材都有其固有色，另外，成品的食物都有一定的品相。食品网站的整体颜色基调可以依据食品特性或品相确定颜色。这样让浏览者能立即联想到相关食品，产生食欲。如：火锅、烧烤可以采用红色、黑色为主体色调；烤面包、蛋糕可以采用橙色、黄色为主体色调；炒菜可以采用绿色、黄色为主体色调；沙拉、冷饮可以采用蓝色、绿色、白色为主体色调；油炸食品则可以采用黄色、橙色、红色为主体色调等。（三）依据企业经营理念和目标确定颜色企业的经营理念和目标是企业的追求和价值取向，可以根据企业的发展理念设置网页主题色调搭配方案。如：企业注重绿色、生态的发展理念可以采用蓝色、绿色、白色进行搭配；如果强调团结、奋进的企业精神可以采用红色、黄色进行搭配；如企业以追求卓越、开拓创新为发展理念则可以使用蓝色为主体色调。教学反思第一章综合案例——餐饮类网页设计制作标题第一节餐饮类网页设计制作案例1第二讲餐饮类网页设计制作1（下）课时2课时教学目标教学内容与过程四、版块划分和网页布局（一）餐饮网站的版块划分网站合理的版块划分和页面布局能有效提高用户的视觉感知，提升网页的用户体验度，同时也有利于网站的后期建设和优化。网页版块划分应优先考虑用户体验。避免频繁地在网页首页设置企业广告、介绍、联系方式等推广信息，这样既浪费网页资源又不利于网页的转化率。网页首页要突出一些用户想要看到的，能吸引用户的有价值的信息。如：“美食天下”网页选择在网站布局上优先呈现食谱、食材和饮食健康等图文内容，让客户先看到关于健康饮食和美味饮食方面的资讯，将商业信息排在次要的位置，以提升用户粘度，优化用户体验。2、信息内容分类布局五花八门的信息堆砌只会让用户头昏眼花，难以寻找到目标信息，采用分类布局对内容进行井然有序的排列，既方便用户体验又便于企业网站推广。“美食天下”网站有着口味丰富的菜谱，如果只是依次呈现，不利于访客搜寻自己感兴趣的内容，用户体验不佳。对此，“美食天下”网页分别设置了“新秀菜谱”、“今日热门”和“经典家常菜”三个类别，方便访客根据自己的兴趣爱好准确查找目标信息。3、预设用户交流板块网站为确保一定的用户活跃度并实现与用户通畅的信息沟通，应设置与用户交流沟通的栏目和企业、行业资讯，以维护网站的用户活跃度，强化与用户的双向互动，给用户带来良好的互动体验。优质的用户体验会给企业带来意想不到的宣传效果和良好收益，相反，信息沟通不畅，企业不了解客户需求和感受会使企业运营受损。4、简洁定制站点地图站点地图，是一个列出网站上所有页面地址的清单文件，目的是帮助用户更好的了解网站整体结构、更快的找到他们想要搜寻的内容。站点地图要确保简洁明了，精准有效。如果站点地图内容太多，要挑选重要信息放到地图中，避免简单使用图片来做网站链接，这样不利于搜索引擎蜘蛛的抓取。链接要使用标准的HTML文本，且链接中要尽量包含一些目标关键词，同时确保地图链接准确、有效。（二）餐饮网站的页面布局合理布局的核心就是内容编排要充分符合用户需求，让用户看到差异化的同时感受页面布局的细节魅力。带给用户不一样的浏览体验。餐饮网站的常见布局版式有“F”式和“Z”式布局。1、“F”式布局“F”式布局是指网页版面内容排列呈现出“F”形态。这种布局往往用于表现更多的板块和内容。常常通过对板块更为细致的划分展示更多小的元素。这种布局方式往往除顶部展示区域外，其它区域内容的关注度会相对低一些，如果想增加其它区域的吸引力，通常可以通过加入一些大图标或卡片式的内容组件等，让内容更有趣、更吸引人。2、“Z”式布局“Z”式布局是将视觉元素按“Z”字形进行排列，这种排列方式优点是较为简单，几乎可以适应任何类型的网页界面设计。但是，如果网站内容较多或较复杂，采用这种布局形式，效果不会太好。“Z”式布局常用于以图片为主，风格简洁的网页，其浏览转化率较高。浏览者首先关注到页面水平方向最上端的内容，然后按从左到右，从上到下往返浏览至页面底端。五、网页导航设计网页导航栏的作用是将各子页面的内容清晰的呈现在用户的眼前，用户通过导航可以准确访问网站中相应栏目。（一）导航的类型结构网页导航栏根据性质分为框架导航栏、文本导航栏和图片导航栏。根据摆放的位置又可以分为横排导航栏和竖排导航栏。不同导航栏给人的视觉效果和心理感受是不一样的。（二）导航的设计要点导航的作用是方便浏览者快速清晰的找到相应的内容，因此导航设计看起来要醒目、标识内容要清晰，且要与网站整体的设计风格相统一。导航设计的第一要点是标示要醒目。导航设计的内容要按一定的条理依次排列。同时要采用不同的设计方式清晰展现当前已选的标签。如通过颜色对比、大小对比、指示引导、辅助图形等方式明确当前所选标签和板块。导航设计的第二要点是内容要明晰不同板块的导航标识要内容清晰，便于浏览者在浏览网页时快速识别和区分。导航在具体设计的过程中可使用文字、符号和图片或文字加符号、符号加图片等方式加以区分。符号设计要简洁明了，图片选择要清晰且具有代表性，以便于浏览者识别和判断。网页装饰设计网页是网站和企业的脸面，是企业向客户展示信息最直接的视觉平台。网页装饰设计是否合理美观直接影响消费者的选择和消费欲望。因此，网页装饰设计首先要符合行业特性。餐饮类网站的所有装饰均要围绕餐饮的行业特点进行。装饰总体要色彩鲜明、对比强烈、充满食欲。图形可以选用食材、餐具、食物展示、食材生长环境、食物加工场景等作为装饰元素以反映产品特点或行业属性。其次，网页装饰设计要满足风格定位。企业文化不同，经营理念和经营内容不同，其展现给客户的感觉和印象是不同的，因此网页的装饰风格也应有所不同。简单举个例子，一个素食餐厅，如果在网页设计采用那种“油腻”、“肉感”的画风，这样只会让消费者感觉经营者不够专业，没有把握好美食的精髓。所以，餐饮网站设计必须是要匹配美食气质的。例如，日式料理讲求食材新鲜、清淡、精致、健康，那么在网也设计上，可以走淡雅极简的路线，或者带点小清新，展示食材的加工过程，突出自然新鲜的感觉。西餐则注重对各类酱汁调料的使用，形成丰富多彩的感观，所以在网页设计上可以着重突出色彩感，强对比的多色搭配，适当加点夸张的字体，使画面呈现一种视觉冲击力。至于甜品，华丽柔软，则更受女性欢迎，所以一般会营造出一种梦幻浪漫的氛围，注重细节的点缀装饰。如以下案例，BANNER添加了奶油状的画框，使整个画面增色不少，契合蛋糕的主题，显得Q萌甜美。（三）讲究设计技巧餐饮网站装饰设计中，图像意味着一切！虽然略有夸张，但好的图像设计确实有助于信息的传达，更好地展现食品的“色、香、味”；利于对食品和企业自身的宣传推广。在具体设计的过程中可以采用以下的方式进行设计，提升页面装饰效果。1、组合摆设每一道主食都有专属的食材，为主食拍摄的时候不妨也把食材也辅以其中，将食品与食材组合摆设，会组合出不一样的视觉新意。2、放大纹理采用特写的镜头把食材表面的肌理放大，以此作为创作元素，清晰还原食品的细节或品相，突出食物的质感和品质。3、展示局部俗语说：“月盈则亏”，过于饱满或无