网页设计【综合案例篇】 -2
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在确定了网站信息框架后，我们选取了首页、2个列表页、1个详 细页三类页面中的页面各一张制作成交互原型，便于团队内部和与客 户讨论
10.2 网页界面设计
10.2.1整体视觉风格定位及首页设计
前期策划阶段就拟定了将后厨环境引进网页的想法，而在与客户 进一步的沟通中也得到了肯定。于是此时开始画草图逐步落实界面中 的各个视觉元素以便营造后厨的气氛，同时还要将网页导航和功能菜 单转换成元素，合理地融入到画面中。于是在草图中我们不仅有橱柜、 厨师还插入了保温灯、插单器等元素，让这种后厨的氛围更加逼真。
10.1.3确定网站信息框架
完成前期调研与策划后，在围绕“牛扒工厂”的品牌定位和服 务范围的基础上，我们对网站的信息结构进行了初步梳理，将网站 功能划分为：首页、我们、环境、菜品、服务、工作、推荐六个板 块。接着又向下细分了六个版块的栏目内容，确定了网站的信息框 架。
10.1.3确定网站信息框架
网站 截图
我家 牛排
西提牛扒
王品牛排
品牌 定位
功能 框架
界面 布局 视觉 表现
定位于平民化牛排餐厅，适宜情 定位都市时尚牛排餐厅，目标 定位于高档牛排餐厅，适合公
侣约 会、商 务宴请
人群是 20-35 岁中收入白领
务宴请商务宴请
活动信息、关于我家、我家菜单、 寻找 Tasty、非尝不可、哈烧 关于王品、王品版图、珍藏美
10.2.3 详细页面设计
详细页面是列表的深入，因此细节在延续列表布局的基础上，需要不 受打扰的有序展示。以菜单版块的详细页来看，就是让某个具体的菜品在 菜单之上完美展示。
10.3 网站布局（html+css）
10.2.1 首页制作
我们精心制作出的一张psd效果图，并不能直接变成网页。要 先分析设计图的布局特征，再转换为html、css代码，才能在网页 中显示。除了之前讲过的切图格式技巧外，在编写html、css代码 的过程中，还需要注意两个概念：一是上下概念、二是层次概念。 上下概念是指：编写html、css代码的时候从网页布局的顶部写到 底部。层次概念是先写内层的html、css，再写外层的html、css， 如背景就在最内层，而一般文字会放在最外层 。
10.1 前期准备
10.1.1项目背景
本案现例目的前服西务式对餐象厅是种“类牛繁扒多工，厂官S网te对ak于F实ac体to餐ry厅”的—意—义原在创于品一牌是餐 厅展。示此品餐牌厅形是象主，要把以餐扒厅类背为后主所题沉的淀高ห้องสมุดไป่ตู้档文新化式气西质餐、，菜针品对服的务客、源品为牌高口 薪碑白通领过和官时网尚展的示顾出客来。，在二与是客抓户潜多营次销交、流拓后展，销他售们渠希道望，建把立菜一品个或有服 别务于传市播场出上去任，何让同更类多餐有厅需官求网的的用网户站可，以尽通力过突官出网电查影询色到彩餐感厅效的果地的点、 网联站系，方并式能，借或助者官留网下的他建的立需提求升信品息牌，知从名而度产，生从销而售制机造会新。的销售机 会。于是我们拟定了网站的设计实施方案。对于前端设计的方案流
接下来根据草图创意中的各个界面元素进行资料的收集与整理。在本案 例中，除了一些菜品的素材是客户提供，其他大多素材都是自己拍摄，再 经过后期处理，统一成同样的复古色调，使其拥有一种看电影的既视感。 如插单器中的收据单自行找的打印单拍摄而成。
首先是首页背景的设计制作，橱柜与厨师的景象一次性拍摄成果 几乎不现实，因此干净的后厨与厨师们忙碌的背影都是分开拍摄后， 再统一色调，合成到一个场景中。注意光感的把握，既不能过于沉 闷也不能太跳跃而抢镜。
简约风格，简洁的文字、大面 积的黑色突出品牌的高档品质 感。
图 10.1 竞品分析
调查结果表明三家网站依据其品牌定位及服务特点，在页 面功能上虽略有差异，但基本功能一致，包括：关于品牌、菜 品菜单、门市地点、会员活动、联系我们这四个方面。布局上 基本都使用了固定布局，只有西提牛扒选择了固定布局+流动 布局。要想与众不同，我们决定从“牛扒工厂”西餐厅的一些 具象入手，如神秘的后厨。有了这个灵感后我们参观了餐厅及 后厨的整体环境，策划将神秘又神圣的后厨环境搬上网页，突 出其品牌的年轻、潮流和美食的新概念，吸引更多潜在用户。
程大概可以归纳成前期策划——制定网站框架——交互原型设计—
—网站界面设计——网站布局——动效与表现这六个步骤。
10.1.2前期策划
在项目开发之初，我们做了详尽的市场调研与竞品分析，从品牌 定位、功能框架、界面布局、视觉风格多维度调查分析了国内三家 同类牛排西餐厅：我家牛排、西提牛扒、王品牛排
品牌
10.2.2 列表页面设计
由于首页效果表现的十分丰富，所以列表页面的风格既要统一在视 觉风格中，还要简化其视觉元素让界面布局更加轻盈。于是，导航菜单 被固定到界面上方，突出了各列表选项。最终列表页面在定稿时候，为 了视觉效果既统一又有变化，各个列表页面视觉元素均来自首页，且每 个页面的元素各不一样。
下载区、门市据点、客服 and 合 活动、热血公益、Tasty club、 食、菁选活动、菁英礼赞、会
作提 案
美味絮絮谈
员专区、美食漫谈、联系我们。
有多种语言切换功能
固定 布局
固定布局+流动布局
固定 布局
手绘 风格， 卡通插 画加上 鲜艳的 色彩 显得网 站轻松 有活力
手绘风格，flash 动画及内页 的电子杂志显得页面活泼、亲 和力
接着是前景的设计与制作。虽然大多素材都能找到近似的同类物品来代 替，但对于金属质感超高的钢化桌面和模拟点餐时的笔画来说，最好的方 法就是自己用软件绘制了。
最后继续完善了首页的其他视觉效果，同时还对之前的遗漏的社交功 能（如微信、微博二维码分享）、热点菜品推广功能、新闻功能进行了梳 理与补充。最终的完整稿获得了客户的高度认可。
网页设计：从界面布局到视觉表现
基础篇 界面交互篇 视觉表现篇 综合案例篇
余兰亭
综合案例篇
网站静态页面前端开发基础 餐饮类网站静态页面设计
10. 第十章餐饮类网站静态页面设计
10.1 前期准备 10.2 网页界面设计 10.3 网站部分布局 10.4 网站动效表现
10.餐厅网站静态页面设计
本章案例来自优艺客创始人、知名设计师韩雪冬“牛扒工厂” 西式餐厅的官网设计作品，在此将全面详解网站静态页面从无到 有，集策划、设计与制作于一体的诞生全过程。
10.2 网页界面设计
10.2.1整体视觉风格定位及首页设计
前期策划阶段就拟定了将后厨环境引进网页的想法，而在与客户 进一步的沟通中也得到了肯定。于是此时开始画草图逐步落实界面中 的各个视觉元素以便营造后厨的气氛，同时还要将网页导航和功能菜 单转换成元素，合理地融入到画面中。于是在草图中我们不仅有橱柜、 厨师还插入了保温灯、插单器等元素，让这种后厨的氛围更加逼真。
10.1.3确定网站信息框架
完成前期调研与策划后，在围绕“牛扒工厂”的品牌定位和服 务范围的基础上，我们对网站的信息结构进行了初步梳理，将网站 功能划分为：首页、我们、环境、菜品、服务、工作、推荐六个板 块。接着又向下细分了六个版块的栏目内容，确定了网站的信息框 架。
10.1.3确定网站信息框架
网站 截图
我家 牛排
西提牛扒
王品牛排
品牌 定位
功能 框架
界面 布局 视觉 表现
定位于平民化牛排餐厅，适宜情 定位都市时尚牛排餐厅，目标 定位于高档牛排餐厅，适合公
侣约 会、商 务宴请
人群是 20-35 岁中收入白领
务宴请商务宴请
活动信息、关于我家、我家菜单、 寻找 Tasty、非尝不可、哈烧 关于王品、王品版图、珍藏美
10.2.3 详细页面设计
详细页面是列表的深入，因此细节在延续列表布局的基础上，需要不 受打扰的有序展示。以菜单版块的详细页来看，就是让某个具体的菜品在 菜单之上完美展示。
10.3 网站布局（html+css）
10.2.1 首页制作
我们精心制作出的一张psd效果图，并不能直接变成网页。要 先分析设计图的布局特征，再转换为html、css代码，才能在网页 中显示。除了之前讲过的切图格式技巧外，在编写html、css代码 的过程中，还需要注意两个概念：一是上下概念、二是层次概念。 上下概念是指：编写html、css代码的时候从网页布局的顶部写到 底部。层次概念是先写内层的html、css，再写外层的html、css， 如背景就在最内层，而一般文字会放在最外层 。
10.1 前期准备
10.1.1项目背景
本案现例目的前服西务式对餐象厅是种“类牛繁扒多工，厂官S网te对ak于F实ac体to餐ry厅”的—意—义原在创于品一牌是餐 厅展。示此品餐牌厅形是象主，要把以餐扒厅类背为后主所题沉的淀高ห้องสมุดไป่ตู้档文新化式气西质餐、，菜针品对服的务客、源品为牌高口 薪碑白通领过和官时网尚展的示顾出客来。，在二与是客抓户潜多营次销交、流拓后展，销他售们渠希道望，建把立菜一品个或有服 别务于传市播场出上去任，何让同更类多餐有厅需官求网的的用网户站可，以尽通力过突官出网电查影询色到彩餐感厅效的果地的点、 网联站系，方并式能，借或助者官留网下的他建的立需提求升信品息牌，知从名而度产，生从销而售制机造会新。的销售机 会。于是我们拟定了网站的设计实施方案。对于前端设计的方案流
接下来根据草图创意中的各个界面元素进行资料的收集与整理。在本案 例中，除了一些菜品的素材是客户提供，其他大多素材都是自己拍摄，再 经过后期处理，统一成同样的复古色调，使其拥有一种看电影的既视感。 如插单器中的收据单自行找的打印单拍摄而成。
首先是首页背景的设计制作，橱柜与厨师的景象一次性拍摄成果 几乎不现实，因此干净的后厨与厨师们忙碌的背影都是分开拍摄后， 再统一色调，合成到一个场景中。注意光感的把握，既不能过于沉 闷也不能太跳跃而抢镜。
简约风格，简洁的文字、大面 积的黑色突出品牌的高档品质 感。
图 10.1 竞品分析
调查结果表明三家网站依据其品牌定位及服务特点，在页 面功能上虽略有差异，但基本功能一致，包括：关于品牌、菜 品菜单、门市地点、会员活动、联系我们这四个方面。布局上 基本都使用了固定布局，只有西提牛扒选择了固定布局+流动 布局。要想与众不同，我们决定从“牛扒工厂”西餐厅的一些 具象入手，如神秘的后厨。有了这个灵感后我们参观了餐厅及 后厨的整体环境，策划将神秘又神圣的后厨环境搬上网页，突 出其品牌的年轻、潮流和美食的新概念，吸引更多潜在用户。
程大概可以归纳成前期策划——制定网站框架——交互原型设计—
—网站界面设计——网站布局——动效与表现这六个步骤。
10.1.2前期策划
在项目开发之初，我们做了详尽的市场调研与竞品分析，从品牌 定位、功能框架、界面布局、视觉风格多维度调查分析了国内三家 同类牛排西餐厅：我家牛排、西提牛扒、王品牛排
品牌
10.2.2 列表页面设计
由于首页效果表现的十分丰富，所以列表页面的风格既要统一在视 觉风格中，还要简化其视觉元素让界面布局更加轻盈。于是，导航菜单 被固定到界面上方，突出了各列表选项。最终列表页面在定稿时候，为 了视觉效果既统一又有变化，各个列表页面视觉元素均来自首页，且每 个页面的元素各不一样。
下载区、门市据点、客服 and 合 活动、热血公益、Tasty club、 食、菁选活动、菁英礼赞、会
作提 案
美味絮絮谈
员专区、美食漫谈、联系我们。
有多种语言切换功能
固定 布局
固定布局+流动布局
固定 布局
手绘 风格， 卡通插 画加上 鲜艳的 色彩 显得网 站轻松 有活力
手绘风格，flash 动画及内页 的电子杂志显得页面活泼、亲 和力
接着是前景的设计与制作。虽然大多素材都能找到近似的同类物品来代 替，但对于金属质感超高的钢化桌面和模拟点餐时的笔画来说，最好的方 法就是自己用软件绘制了。
最后继续完善了首页的其他视觉效果，同时还对之前的遗漏的社交功 能（如微信、微博二维码分享）、热点菜品推广功能、新闻功能进行了梳 理与补充。最终的完整稿获得了客户的高度认可。
网页设计：从界面布局到视觉表现
基础篇 界面交互篇 视觉表现篇 综合案例篇
余兰亭
综合案例篇
网站静态页面前端开发基础 餐饮类网站静态页面设计
10. 第十章餐饮类网站静态页面设计
10.1 前期准备 10.2 网页界面设计 10.3 网站部分布局 10.4 网站动效表现
10.餐厅网站静态页面设计
本章案例来自优艺客创始人、知名设计师韩雪冬“牛扒工厂” 西式餐厅的官网设计作品，在此将全面详解网站静态页面从无到 有，集策划、设计与制作于一体的诞生全过程。