网页设计网站布局分析

课程名称：网页设计与制作课题名称：网站页面布局分析学院：管理学院专业班级：电子商务1301班姓名：王敏学号：130506123任课教师：白晨生完成日期：2016年1月3日目录1.国内网站页面布局分析...............................................................................................................11.1京东商城网页布局分析............................................................................................................12.2京东商城网页布局分析....................................................................................................31.3沱沱工社网页面布局分析................................................................................................52.国外网站页面布局分析...............................................................................................................72.1turliaw网站页面布局分析............................................................................................72.2Zilliow网站页面布局分析............................................................................................82.3Realestate网站页面布局分析.........................................................................................1011.国内网站页面布局分析1.1京东商城网页布局分析1.分析网站：京东商城域名：分析目标：首页的各个模块布局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-32图1-4这些商品都是近期搜索指数最高、打折优惠、推新品、预售商品，采用灰色的商品模块接下来分出8楼阶梯介绍商品其中每层阶梯结构，每层都是分为3部分结构Left:以每层主分类、下跟具体商品细节分类小结：第一屏中以三列式布局呈“F”状的视线习惯，网页的上方为用户提供服务、配送方式等，让用户了解商城的运作方式，为用户以后的购物提供方便。在网页的中间部分是大幅的商城的最新信息，及商品的打折信息，让顾客能及时找到自己所需的商品，导航栏及所有商品分类为用户提供方便选择，网页中间展示了商品的最新更新，让用户能更快知道商品信息。网站板块设计横向按照1：2：1的比例设计，大致分为总体分类，产品展示等。这样的设计非常符合用户阅读习惯，中间是关键点占得比重比较大。图1-47.网页底部（图1-5）分为两部分：上面主要给用户购物指引介绍京东商城的特点配送方式，付款方式，售后服务，特色服务，和京东物流实力；下面是在线咨询，查询等互动服务。图1-531.2京东商城网页布局分析1.分析网站：聚美优品域名:分析目标：首页的各个模块布局3.分析整体：主体颜色以浅色背景，搭配粉色和黑色为主，公司主打方向是：化妆品团购网，并且保证30天无条件退货，页面Width:960px。图1-64.顶部提示登录的用户Ctrl+D收藏本页提示，下面为左右两部分，左边主要为限时特卖、美妆商城、美妆口碑、手机聚美和正品保证；右边是用户登录和订单信息。接下来是Logo（图1-7）和Shopping图1-7在下面（图1-8）是网页分为五个入口，极速免税店，母婴特卖，美妆商城，国际轻奢，服装运动，鞋包配饰。图1-85.头部（图1-9）聚美大胆运用多种不同色彩元素但主色调还是以粉色为主，烘托出整个大卖场的热度，强刺激用户向下继续阅览。4图1-96.主体部分（图1-10）大致以两个部分组成：第一部分是以同一模块分为8个特卖专场为主与导航呼应，其中每个专场以三部分组成，上面介绍本专场内容，中间各个特卖商品及价格，下面指引用户进入本专区的入口；第二部分主体以左右两部分组成左边是各个商品的展示及价格，在展示最下面放置的是已经抢空的商品有勾引用户关注右边以上下组成大致分为五个模块，从上到下是商品预告、今日爆款、名牌商品预告、互动模块和跟随页面的导航条。图1-107.底部（图1-11）大致两部分上部分是以服务保障、使用帮助、支付方式、配送方式、售后服务、二维码；给用户一个网站指引性的标志。5图1-111.3沱沱工社网页面布局分析1.分析网站：沱沱工社网域名:分析目标：首页的各个模块布局3.分析整体：主体颜色以白色背景，红色作为点缀，主打的口号：有机、天然、高品质。页面W:1180px，顶部是注册、配送地区、会员账户信息下面是通栏，广告承接的下面的是以左中右三部分，左边Logo（图1-12）图1-12中间（图1-13）搜索有默认搜索和推荐的商品信息图1-134.第一屏（图1-14）最后是以主导航和最新资讯组成。其中主导航是分为左侧+通栏；分上下主次布局，主要分为七个展现，右侧资讯分上下两部分，其中下面是单商品及价格。能看出商家非常会利用网页有限空间分众多小模块去划分并填充模块，可能是设计输出问题也可能是布局安排高度原因，文字过多会造成一定的视觉疲劳感。6图1-145.底部分为两部分：第一部分（图1-15）分为左中右三个区域左边区域是食谱推荐，中间区域是用户评价展示，右边是二维码。第二部分（图1-16）上下两层第一层是食品安全、新手教程、配送方式、支付方式、售后服务和帮助信息；给用户一个网站指引性。图1-157图1-162.国外网站页面布局分析2.1turliaw网站页面布局分析1.网站:turlia域名：的首页分为三大区域:1.搜索栏。2.最新房源信息。3.turlia网页的推荐重要模块。3.Turlia首页（图2-1）颜色：主色白色，蓝色，浅蓝色。搭配起来给人一种亲近自然的感觉。白色占页面的70%会显得整个页面干净整洁。为了强调搜索栏的重要性，搜索栏的背景颜色选蓝色，使用户进入网站，视线直接被牵引过来。图2-14.Trulia首页布局（2-2）：用按钮切换的形式分类买房，租房，最近销售房源。而且除了地点搜索外，还提供了价位，房屋类型，卧房数量，浴室数量，占据面8积的细节搜索，让用户以最快的时间选出自己要的房源。Trulia的首页首要分为十四个区域：对周边的评价，房屋价格趋势，地图展示，周边学校列表，发邮件给经理人，按兴趣的其他房源，在线提问。图2-25.Turlia买方列表（图2-3）布局：简洁，明确。用左右分类。最普遍三分之二，全面的介绍房屋信息和周边信息，有三分之二用户与经理人交互，在线提问。页面下方是干净的白色和淡蓝色，清晰衬托出页面信息，效果干净清爽。图2-32.2Zilliow网站页面布局分析91.网站：zillio域名：首页(图2-4)主要特色：a)一屏页面，把首要功能区域放在一个页面中,清晰明了。b)蓝紫色为主色系，显示出沉稳内敛的感觉，沉稳可靠符合企业形象。c)用绿草色和天蓝色作点缀增添网页的活力。d)用矩形模块分布主要功能，清晰明了。图2-43.Zillow买房房源（图2-5）页面：a)房源的基本内容，首推模块。b)以矩形清晰明了展示房源情况c)简单的色彩，温馨的环境，吸引眼球。图2-54.搜索（图2-6）按钮为蓝色，刺激浏览者按下搜索键，房源分类明确。下部分为搜索栏，上部分为网页首推。显示房源清晰明了。用户浏览时方便获10取信息。图2-62.3Realestate网站页面布局分析1.网站：Realestate域名：首页(图2-7)主要特色：a)搜栏，不同的类别，滑动鼠标时，出现不同的颜色。b)红为主色系，整个页面视觉冲击力强。c)3.整个页面分为上下两部分，上部分搜索栏，下部分网页首推，清晰明了图2-73.Realestate首页-搜索栏a)鼠标滑动显示彩色切换按钮。划分为买房，租房，新房，分享，销售价格11几部分。b)搜索栏（图2-8）每类都有左右两部分，左边MAP区域搜索，右边文字搜索。c)搜索栏在屏幕三分之二视觉集中位置。且搜索栏宽度与页面宽度一致。从位置和面积上凸显重要性。d)搜索栏按钮，地图制作风格是立体水晶效果，凸显品质与个性。e)布局与turlia和zillow一致，左边为高级搜索栏，中间源列表，右边为地图搜索。亮点是房源搜索列表展示形式可转换，类别包括列表，地图，图片画廊。图2-84.房源列表主要以画廊形式每个图片向左向右可浏览更多图片。