网页设计网站布局分析.docxVIP

课程名称：网页设计与制作 课题名称：网站页面布局分析学 院： 管理学院专业班级： 电子商务1301班 姓 名： 王敏 学 号： 130506123 任课教师： 白晨生 完成日期： 2016年1 月3 日 目录1.国内网站页面布局分析11.1京东商城网页布局分析12.2京东商城网页布局分析31.3沱沱工社网页面布局分析52.国外网站页面布局分析72.1 turliaw网站页面布局分析72.2 Zilliow网站页面布局分析82.3 Realestate网站页面布局分析101.国内网站页面布局分析1.1京东商城网页布局分析1.分析网站：京东商城?域名：?2.分析目标：首页的各个模块布局?3.分析整体：主体颜色以白色的背景，红色的主色调，一些价格优势，促销也是红色标给人醒目！细节在主体红色之外红的有色差而不是用一种红的色值?。页面总Width：1210p。4.Head区域：顶部以Height:31px；其中包括收藏本页、切换地区，方便物流第一时间锁定用户地址、登陆提示和注册、会员专区、手机版京东、售后服务、网站导航。下面以通栏形式广告W:1210px。主要位置给京东Logo(1-1):width270px * height60px。??图1-15.Search（图1-2）: 默认有哪些信誉好的足球投注网站里主要以近期主打产品为主，有哪些信誉好的足球投注网站模块可以让买家直接输入自己想买的东西的名称，快速查找，节约时间。并且有哪些信誉好的足球投注网站栏下面有热门有哪些信誉好的足球投注网站，这可以显示大家最近在关注的东西。??图1-26.导航（图1-3）：分为7个主导航,左边主Navigation:w210px*h450px。分为14个主要商品分类。中间活动Advertisement:分上下两个广告，上面为6个主要活动，下面为3个打折促销活动是定时切换的，既能推广活动又能促销新品和折扣商品右边公司快讯和零碎功能入口。图1-3图1-4这些商品都是近期有哪些信誉好的足球投注网站指数最高、打折优惠、推新品、预售商品，采用灰色的商品模块?接下来分出8楼阶梯介绍商品其中每层阶梯结构，每层都是分为3部分结构?Left:以每层主分类、下跟具体商品细节分类小结：第一屏中以三列式布局呈“F”状的视线习惯，网页的上方为用户提供服务、配送方式等，让用户了解商城的运作方式，为用户以后的购物提供方便。在网页的中间部分是大幅的商城的必威体育精装版信息，及商品的打折信息，让顾客能及时找到自己所需的商品，导航栏及所有商品分类为用户提供方便选择，网页中间展示了商品的必威体育精装版更新，让用户能更快知道商品信息。网站板块设计横向按照1：2：1的比例设计，大致分为总体分类，产品展示等。这样的设计非常符合用户阅读习惯，中间是关键点占得比重比较大。图1-47.网页底部（图1-5）分为两部分：上面主要给用户购物指引介绍京东商城的特点配送方式，付款方式，售后服务，特色服务，和京东物流实力；下面是在线咨询，查询等互动服务。图1-51.2京东商城网页布局分析1.分析网站：聚美优品?域名:/?2.分析目标：首页的各个模块布局??3.分析整体：主体颜色以浅色背景，搭配粉色和黑色为主，公司主打方向是：化妆品团购网，并且保证30天无条件退货，页面Width:960px。图1-64.顶部提示登录的用户Ctrl+D收藏本页提示，下面为左右两部分，左边主要为限时特卖、美妆商城、美妆口碑、手机聚美和正品保证；右边是用户登录和订单信息。接下来是Logo（图1-7）和Shopping???图1-7在下面（图1-8）是网页分为五个入口，极速免税店，母婴特卖，美妆商城，国际轻奢，服装运动，鞋包配饰。??图1-85.头部（图1-9）聚美大胆运用多种不同色彩元素但主色调还是以粉色为主，烘托出整个大卖场的热度，强刺激用户向下继续阅览。图1-96.主体部分（图1-10）大致以两个部分组成：第一部分是以同一模块分为8个特卖专场为主与导航呼应，其中每个专场以三部分组成，上面介绍本专场内容，中间各个特卖商品及价格，下面指引用户进入本专区的入口；第二部分主体以左右两部分组成左边是各个商品的展示及价格，在展示最下面放置的是已经抢空的商品有勾引用户关注右边以上下组成大致分为五个模块，从上到下是商品预告、今日爆款、名牌商品预告、互动模块和跟随页面的导航条。图1-107.底部（图1-11）大致两部分上部分是以服务保障、使用帮助、支付方式、配送方式、售后服务、二维码；给用户一个网站指引性的标志。图1-111.3沱沱工社网页面布局分析1.分析网站：沱沱工社网 域名:??/?2.分析目标：首页的各个模块布局?3.分析整体：主体颜色以白色背景，红色作为点缀，主打的口号：有机、天然、高品质。页面W:1180px，顶部是注册、配送地区、会员账户信息下面是通栏，广告承接的下面的是以左中右三部分，左边Logo（图1-12）?图1-12中间（图1-13）搜