




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
湖南商务职业技术学院毕业设计
目录
1网店视觉设计需求分析............................................................................................1
1.1项目背景......................................................................................................1
1.2项目需求分析..............................................................................................1
1.3色彩设计......................................................................................................2
1.4字体规范......................................................................................................3
2网店页面原型图分析与设计方案............................................................................3
2.1首页..............................................................................................................3
2.2搜索结果页..................................................................................................6
2.3商品详情页..................................................................................................7
2.4登录注册页................................................................................................13
2.5购物车........................................................................................................13
2.6订单结算页................................................................................................14
2.7个人中心....................................................................................................15
3网店页面视觉效果设计与制作..............................................................................17
3.1首页视觉设计与制作................................................................................17
3.1.1设计思路.............................................................................................17
3.1.2设计效果.............................................................................................20
3.2搜索结果页视觉设计与制作....................................................................21
3.2.1设计思路.............................................................................................21
3.2.2设计效果.............................................................................................22
3.3产品详情页视觉设计与制作....................................................................22
3.3.1自信宝宝润肤乳设计思路.................................................................23
3.3.2自信宝宝润肤乳设计效果.................................................................25
3.4登录注册页视觉设计与制作....................................................................29
3.4.1设计思路.............................................................................................29
3.4.2设计效果.............................................................................................29
I
湖南商务职业技术学院毕业设计
3.5购物车视觉设计与制作............................................................................30
3.5.1设计思路.............................................................................................30
3.5.2设计效果.............................................................................................32
3.6订单结算页视觉设计与制作....................................................................32
3.6.1设计思路.............................................................................................32
3.6.2设计效果.............................................................................................34
3.7个人中心视觉设计与制作........................................................................34
3.7.1设计思路.............................................................................................34
3.7.2设计效果.............................................................................................36
4总结..........................................................................................................................37
参考资料.........................................................................................................................38
II
湖南商务职业技术学院毕业设计
启初品牌网店视觉方案设计
1网店视觉设计需求分析
1.1项目背景
随着电商行业的不断壮大,网络把人与人之间的距离拉得越来越近。多数
品牌逐渐将自己的眼光放眼线上各大购物平台,建立自己的独立品牌形象网店,
用电商视觉去传播品牌影响力,树立品牌形象。通过极具吸引力的视觉效果引
起消费者关注。
启初网店与上海家化同属一个网店,并没有分离出来。
其网店设计较为简单,在整个页面的栏目中,只有Banner、品牌介绍、品
牌资讯、产品简介、宣传视频。并没有涉及很多的详细信息,且无导航栏用以
帮助用户找寻相关信息。但是启初品牌的理念是值得认同的,它始终坚持探索
天然植物成分和护肤科技的创新融合,为消费者提供更专业、安全、细致的母
婴护理解决方案。所以在其品牌网店设计方面也应大力宣传,塑造企业文化,
向消费者传达启初的品牌理念。同时在产品这一方面,应该把握品牌产品的重
要性,详细介绍产品,增加购买功能。
1.2项目需求分析
①品牌研究调研
启初品牌产品很核心地利用品牌理念去塑造自身,其推出的产品都是针对
宝宝们的肌肤问题设计产品方案。特别是有推出针对女宝与男宝系列的产品。
抓住了消费者的痛点,这是用产品自身优势去吸引消费者。在今年的618大促
活动中,据统计,宝宝护肤类目的销量在婴童用品中排到了第四位。其中,与
启初品牌相似的品牌,贝亲、艾惟诺、红色小象等都在这次活动中很好地宣传
了自己。面对各大竞争者,启初的品牌优势需要逐步提升。
在网店视觉形象这一块,启初企业文化的提及一定程度上让消费者对启初
有了一定了解。但其品牌资讯与宣传视频两个模块的设置占据首页太多空间,
且位置布局不合理。同时Banner设计太单一,并不是轮播的形式,不能很好地
利用图片海报地形式去抓住消费者地眼球。
②消费者研究调研
1
湖南商务职业技术学院毕业设计
宝宝护肤类产品所针对的消费者并不是直接的,而是间接的。虽然产品针
对的使用者是宝宝,但是面向的购买者是25~30岁左右的女性,大多为宝宝母
亲,启初产品也有母婴类但较少,大多都是针对宝宝的产品。所以在这方面,
网店形象方面,没有注意到宝宝可爱、天真的特征。在视觉设计上没有向用户
传达这种美感,其品牌形象网店基本没有关与宝宝特征的元素设计,与用户之
间的距离会加大,影响网店商品的转化率。
③产品研究调研
启初品牌网产品为植物之初、牛奶谷胚、水活育润、新生特安等系列,其
下是洗发水、防晒乳、沐浴露、润肤乳、驱蚊花露水、面霜等多种产品的集合。
在其网店中,对产品的宣传微乎其微,仅仅只有对系列产品的文案介绍且无购
买渠道。并没有单独介绍某一产品的模块。没有意识到产品宣传的重要性。这
让消费者了解不到品牌产品的详细信息,商品的转化率也就较低。
1.3色彩设计
色彩设计灵感来源于启初品牌产品自身。启初涉及的多是婴幼儿个人护理
产品。产品包装设计上大多都是以蓝色为主调。并且启初的产品中特别设计了
男宝与女宝的护肤系列,于是我用蓝色代表男宝,粉色代表女宝。使标准色与
品牌产品相呼应。我在设计时便使用蓝色为主色,粉色为辅助色。其中蓝色代
表了婴幼儿的天真与纯真,干净纯洁的蓝色寓示着启初品牌的初心真诚,启初
始终坚持探索天然植物成分和护肤科技的创新融合,为消费者提供更专业、安
全、细致的母婴护理解决方案;且始终秉持着一颗取自然之初,育生命之初的
心去塑造品牌形象,增强品牌核心竞争力。蓝色同时在一定程度上有活泼开朗
之意,婴幼儿的生命都是可期的且是不断生长的,用蓝色象征着宝宝的顽强生
命力与启初品牌的核心力量。粉色又是一种稚嫩、温柔的颜色,代表着女宝的
稚气与乖巧。其散发出的孩童的幼稚正与启初品牌符合,因为启初产品针对的
用户多是婴幼儿,无论是产品包装还是产品宣传上都带有可爱的意味,从视觉
上抓住消费者的购买欲望。蓝色与粉色的交替使用增强设计页面的跳跃性与灵
活性。同时我也采用了蓝色与粉色的相近色,保证颜色的采用不是单调的。(如
图1所示)
2
湖南商务职业技术学院毕业设计
图1标准色
1.4字体规范
设计采用了以下四种主要字体:微软雅黑、Adobe黑体Std、华文细黑、等
线(如图2所示)
图2标准字体
2网店页面原型图分析与设计方案
2.1首页
首页页面我设计了新品特惠、热销推荐、折扣专区、关于启初四大版块。
四个版块循序渐进,主要是产品的推广宣传与品牌文化的传递。我逐步设置新
品、爆品、低价品,先利用新品的新颖性吸引消费者的兴趣,再用热销的爆品
3
湖南商务职业技术学院毕业设计
进一步提升气氛,最后利用低价折扣的字眼刺激消费者下单。末尾的关于启初
版块主要是缓和消费者的情绪,直接以图文的形式传递启初的品牌文化,在消
费者心中树立良好形象。
在新品特惠版块,对三种新品进行了横向的展示,但并不是直接平铺摆放,
而是错落摆放,中间的产品相较位置较低,显得画面不会过于单调。三种新品
都是以矩形的形式对产品及产品名称、价格进行展示。
在热销推荐版块,采用文本与图片穿插的方式使画面富灵活性,减少单调
感。热销推荐的产品多是系列产品的展示。左文本右图片及左图片右文本的排
版。文本方面将产品名称、价格及购买信息清晰直观表现出来,让消费者一目
了然。
在折扣专区,仅仅是单独放置了产品的图片,采用纯图片的左右排版方式。
并未像之前两个版块设置产品名称、价格等信息,主要是缓减消费者的视觉疲
劳。并且折扣产品都是价格较低的产品,在图片展示上面吸引消费者就已足够。
我设置了“更多宝贝”按钮,消费者想要了解更多详细信息可以点此了解。
在以上三个版块中,产品放置数量是“3、2、2”,并没有过多摆放产品,
让消费者产生厌烦心理。适当的文本与图片的组合可进一步拉进与消费者的距
离,让消费者更加清晰了解启初品牌的产品。(如图3所示)
4
湖南商务职业技术学院毕业设计
图3首页原型图
5
湖南商务职业技术学院毕业设计
2.2搜索结果页
搜索结果页主要分成三部分,搜索、搜索热词、搜索产品展示。采用中间
对齐模式的页面布局,每个模块均水平对齐排列,从视觉上给人一种整齐有序
的感觉,无繁杂冗乱之感。
搜索处直接横排设置了搜索框、收藏图标、购物车图标。搜索框部分支持
文本与图片搜索,方便消费者在海量的产品中找寻自己心仪的那款产品。同时
右边的收藏图标可查看已收藏的商品,购物车图标可以直接查看自己的购物车
宝贝。方便消费者对宝贝进行整理。
搜索热词部分采用列表式的排版方式,产品导航结构简单清晰、易于理解、
冷静高效,帮助消费者快速定位到对应内容,减少查找时间。类目根据宝宝洗
护、驱蚊防晒、日常护理、产品系列进行分类,并可通过综合、最新、热销、
价格进行进一步地筛选,方便消费者根据自己的想法搜寻产品,提高查找效率,
同时避免消费者的盲目选择,引起不好的购物体验感。
产品展示部分采用上图下文与列表式结合的方式,用两行三列对部分产品
名称、价格进行介绍。这里我没有摆放过多产品,以防引起消费者的厌倦。6个
产品的展示可以帮助消费者将搜索结果与预期结果进行有效对比,找到期望产
品,提高搜索正确率。在每个产品大图展示上我又设置了收藏按钮,方便消费
者将感兴趣的商品移入收藏,同时又不占据购物车空间。(如图4所示)
6
湖南商务职业技术学院毕业设计
图4搜索结果页原型图
2.3商品详情页
商品详情页主要包含商品信息概括预览、侧导航栏、新品上市快速通道、
及商品详情展示四大模块。详细介绍产品信息,使消费者对产品有更深刻的了
解,获得信任。增加消费者的停留时间产生购买欲望,同时利用新品上市快速
通道达到关联营销的效果,引导消费者对其店铺中其它商品产生兴趣,进一步
强化消费者购物体验。
商品信息概括预览模块,设置了商品主图展示,同时标注产品名称、价格、
月销、加购数量信息,设置加入购物车、立即购买按钮。我将优惠、活动、保
障、参数做成一栏,便于消费者点击详细查看,获取信息。
侧导航栏分别为所有商品分类及商品详情栏目导航。所有商品分类为清凉
7
湖南商务职业技术学院毕业设计
纯露、面霜、润肤乳、防晒霜、驱蚊液、洗发沐浴泡泡6大类,方便消费者查
看想要的商品,并在分类下方设置了收藏按钮,便于将商品移入收藏。商品详
情栏目导航包含自信启蒙世界、自信源头活水、自信贴心守护、萌宝成长大本
营四部分,可以快速定位到商品详情的这四大标题位置,促进商品详情信息的
快速传递,增强体验感。
新品上市快速导航通道我设置了三个区域,以竖式进行排列,商品以轮播
的方式进行展示。同时有“点击更多”查看更多商品,给与消费者更多的选择。
8
湖南商务职业技术学院毕业设计
商品详情展示包含焦点图、展示产品部分细节图(展示消费者热切关注的
9
湖南商务职业技术学院毕业设计
地方,获得间接信任)、场景图、产品相关问题解答、物流及商品服务信息。图
10
湖南商务职业技术学院毕业设计
文结合的方式从视觉上给予消费者美学的感受,以一种轻松愉快的方式与消费
者交流产品的相关信息,易于接受与理解。(如图5所示)
11
湖南商务职业技术学院毕业设计
12
湖南商务职业技术学院毕业设计
图5商品详情页原型图
13
湖南商务职业技术学院毕业设计
2.4登录注册页
登录注册页采用左右结构布局,简单直观清晰。左边为小型的产品宣传海
报,以图片的形式增强设计页面的生动感,不仅仅局限于登录注册功能,同时
利用有限区域对启初产品进行宣传,引起用户的注意,树立品牌形象。右边为
登录注册版块,将登录注册合为一体,包含输入账号与密码信息、忘记密码等
操作,便于用户精准进行登录或是注册,节省登录注册时间。(如图6所示)
图6登录注册页原型图
2.5购物车
购物车包含我的个人中心、逛一逛、全部、降价、筛选、产品、猜你喜欢7
个模块。其中我的个人中心、全部、降价、筛选为纯文本的显示,逛一逛为小
图标,点击可以看看别人买了啥,达到互动的效果,类似于朋友圈的状态,增
加乐趣。购物车内的产品包含产品图、名称、价格、加购数量、删除、移入收
藏等信息。消费者可以将产品从购物车删除也可以移入收藏,方便产品的整理。
在猜你喜欢处为产品的轮播展示。为用户推荐更多相关产品,提升商品的转化
14
湖南商务职业技术学院毕业设计
率。(如图7所示)
图7购物车原型图
2.6订单结算页
订单结算页包含回到上一页、收货信息管理、我的宝贝三个版块。收获信
息管理处为收货人、电话、配送地址的信息展示,同时设有设为默认地址与添
加地址的图标,方便用户对收货信息进行设置,让商家按用户确认的地址配送
商品,保证消费者及时收到产品。
我的宝贝处包含产品的单价、数量、小计及名称展示,为横向排版。其下
15
湖南商务职业技术学院毕业设计
方还有运费险服务及开具发票勾选,顾客可以根据自己的需求选择,提供顾客
必要的购物保障,建立顾客信任感。订单页勾选所需下单的宝贝后会自动计算
价格,有提交订单按钮可点击进一步完成订单。(如图8所示)
图8订单结算页原型图
2.7个人中心
个人中心页面包含左侧导航、新人见面礼、启初成长记、生日狂欢礼、积
分兑你想5个模块。采用垂直对齐的布局,给予视觉上的经典、庄重感。左侧
导航为个人信息展示,包含查看头像、昵称、账号、我的资料、我的订单、我
的会员、我的积分、我的卡包、我的收藏、我的售后的功能,使个人中心功能
齐全,从多个方面关注启初会员,增强品牌信赖。
16
湖南商务职业技术学院毕业设计
新人见面礼部分为小型的宣传海报,展示启初的部分产品。启初成长记部
分为3个等级的会员卡片展示,从低到高为启小小、启星星、启霸霸,并介绍
达到各个等级的任务,以养成的形式激励用户不断提升会员等级,稳定店铺客
源。生日狂欢礼注重用户的生日,惊喜礼包与双倍积分仅限用户生日当天领取,
积累用户好感。积分兑你想部分为产品的轮播展示,为用户推荐其他产品,吸
引用户兴趣,刺激消费欲望。(如图9所示)
图9个人中心原型图
17
湖南商务职业技术学院毕业设计
3网店页面视觉效果设计与制作
3.1首页视觉设计与制作
3.1.1设计思路
首页页面背景为蓝绿色背景的填充,辅以粉色花瓣及树枝点缀,树枝我用
的是带有果实的,累累果实表明启初品牌的收获是丰盈的,不仅是在产品销售
方面还是品牌宣传方面都将是向着好的方向发展的;并在右上方添加了窗户似
的投影。表明启初品牌如窗户玻璃一样明净透亮,寓意着启初的初心是未掺任
何杂质的,以获得顾客的信任。
Banner区域为两张宣传海报,分别为品牌节日活动banner、品牌爆品促销
banner。其两张banner的效果阐述如下:
①品牌节日活动banner:
海报主题为宣传启初十周年庆典活动。采用左文本右图的形式。背景为蓝
色背景墙及灰白色的装饰台,增强立体感。用绿色棕榈叶在左上角及右下角进
行装饰。右上角设置了滤镜中的镜头光晕效果,增加海报光泽。
海报主标题为“启初十周年庆典”,对字体大小及效果进行了设计,为强调
“十周年”,其字体字号设置相对较大,“周年”二字添加了光泽的效果并为醒
目的红色,吸引消费者眼球。“启初”与“庆典”二字字号相对较小,并用黄色
圆形打底及小型烟花点缀,减少单调。副标题为“全场五折起”,用蓝色的礼带
作为辅助图形,呼应庆典活动。“纯净、天然、有机之初能量”放置在主副标题
中间,为品牌口号,树立品牌形象,以口号的形式间接在消费者心目中留下印
象,宣传品牌。英文“NATURE”起点缀作用。主副标题与品牌口号在排版上靠
拢,以蓝色的矩形框予以装饰。副文“立即购买”在其下方,用红色圆角矩形
打底,刺激消费者眼球,吸引下单。
产品图简单增加了倒影的效果,扩展视觉空间感,使产品更为立体,而且
更能体现右上角镜头光晕的作用,使产品更加有质感。产品图左下方我添加了
黄色圆形图标,有内发光、外发光、光泽三种效果。文本为“10th”,代表十周
年。图标与文本整体又添加了投影的效果。让图标带有熠熠生辉的感觉,增加
海报生动感。(如图10所示)
18
湖南商务职业技术学院毕业设计
图10品牌节日活动banner
②品牌爆品促销banner:
海报背景颜色为蓝色,采用左图右文本的形式。在左上角有启初品牌logo,
海报整体有稻穗、绿叶、花朵的装饰。其中稻穗表示产品洗发沐浴泡泡的原料
谷胚。左边的产品图我错落放置了两个一样的产品,并在产品图后用绿叶、及
清澈的水波纹营造场景,产品功能集洗发、沐浴为一体,水波正是孩童进行洗
澡沐浴时的一类要素,且水波的清澈与透亮表明产品的天然与洁净。产品上方
添加了白色的弧形,增加动态的摇晃感。产品与文本中间有辅助图形——泡泡,
表示产品是洗浴产品。
右边文本部分,主标题为“洗发沐浴泡泡”,副标题为“干净补水保湿,肌
肤水润弹亮”讲述了产品的功能,文字外围有蓝色圆角矩形装饰,圆角矩形上
方有微笑的表情,传达出孩童在使用该产品时的轻松愉悦心情,间接塑造产品
的口碑。轻柔/洁净/易冲洗又进一步概述了产品功能。品牌口号为“启初,替
你呵护每一位宝宝”,表述启初品牌的为消费者服务的衷心。副文部分包含新品
限量赠送、买一送一信息。买一送一处设计了一个绿色渐变圆形打底,并标注
了产品价格。激励消费者下单。(如图11所示)
图11品牌爆品促销banner
在新品特惠、热销推荐、折扣专区、关于启初四个标题处都进行了统一设
19
湖南商务职业技术学院毕业设计
计,白色圆形与蓝色直线组合以对称的形式分布在标题左右两边,并用一个英
文单词概括标题的主要内容,分别为New、Hot、Low、Brand。
新品特惠区域,以相框的形式对三种产品进行了展示,利用蓝色矩形,并
在产品后方添加了淡蓝色及白色的发光背景,对产品进行了倒影效果的制作,
增加立体感,根据产品的特性,添加了与产品相关的植物予以装饰。可让消费
者对产品有一定初步了解。整体进行了外发光效果的制作,让产品展示看起来
更有光泽。
热销推荐区域,也是用相框的形式展示了感官启蒙系列及植物之初系列的
产品。文本处统一将产品名称以黄色矩形打底并添加了相关英文的解释。下方
为产品的相关介绍,以白色圆角矩形打底。价格表示处特意将先前价格与现在
价格进行了字号上的对比,突出产品价格的优惠。购买按钮为红色圆角矩形,
为BUY>。产品图的外框与新品特惠处一样,但产品背景底色为白色,并且没有
对产品进行效果处理。
折扣专区区域,对牛奶谷胚宝宝润肤露及驱蚊花露水两款产品进行展示,
背景为蓝色描边白色填充的不规则圆角矩形,第一款产品增加了牛奶的装饰,
与产品名称中的“牛奶”二字相呼应,第二款产品增加了水波的装饰,表示产
品的清凉特性。两款产品中间有G形黄色图标,灵感来源于启初logo中的
Giving单词。产品右边以直排文本展示了更多折扣,等你来抢及蓝色填充白色
描边的Giving单词,再次与G形黄色图标呼应,保证一致性。下方有更多宝贝
的蓝色圆角矩形按钮,可以方便消费者查看更多产品,增加购物选择。
关于启初区域,设置了一个长方的白色透明矩形,将启初荣誉证书及品牌
文化进行左右的简单排版,品牌文化下方还有点此更多的蓝色圆角矩形按钮,
方便消费者对启初文化作更进一步的了解。(如图12所示)
20
湖南商务职业技术学院毕业设计
3.1.2设计效果
图12首页效果图
21
湖南商务职业技术学院毕业设计
3.2搜索结果页视觉设计与制作
3.2.1设计思路
搜索结果页页面背景为蓝绿色背景的填充,辅以树枝点缀。在右上方添加
了窗户似的投影。表明启初品牌如窗户玻璃一样明净透亮,寓意着启初的初心
是未掺任何杂质的,以获得顾客的信任。
搜索框处为两个不规则的圆角矩形合并而成。搜索二字处的颜色较深,搜
索内容处较淡,形成对比。在搜索框内还有照相机的图标,支持拍照搜索。搜
索框旁处为取消。与其并齐显示的还有蓝色的收藏于购物车图标。二者下方为
灰色的直线与矩形合并而成的过渡图形。起一定的过渡作用,承接下方的搜索
热词区域。
搜索热词区域,在所有分类一栏,所有分类标题文字为较深的蓝色矩形打
底,下方的热词为浅蓝色打底,并在下方添加了阴影。在右边的综合、最新、
热销、价格区域为白色矩形打底,并在每一排的热词下方添加了虚线或直线进
行装饰。
搜索产品展示区域,所有产品都是统一的设计,以蓝色描边的圆角矩形进
行打底,填充部分为各产品的场景图,每个产品右上角都有白色填充红色描边
的爱心按钮,可以进行收藏。(如图13所示)
22
湖南商务职业技术学院毕业设计
3.2.2设计效果
图13搜索结果页效果图
3.3产品详情页视觉设计与制作
产品详情页是促进消费者下单,提升商品转化率的重要页面。在分析介绍
启初品牌过程中,根据品牌产品的种类、特性、效用及产品反响我特别挑选出
了“自信宝宝润肤乳”这款产品进行详情页设计。启初的六大产品系列中,感
官启蒙系列在消费者群体的口碑都是蛮不错的,自信宝宝润肤乳便是其中的一
款女宝产品。详情页我共设计了商品信息概括预览、侧导航栏、新品上市快速
通道、及商品详情展示四大模块。
页面背景为蓝绿色背景的填充,辅以粉色花瓣及树枝点缀,树枝我用的是
带有果实的,累累果实表明启初品牌的收获是丰盈的,不仅是在产品销售方面
23
湖南商务职业技术学院毕业设计
还是品牌宣传方面都将是向着好的方向发展的;并在右上方添加了窗户似的投
影。表明启初品牌如窗户玻璃一样明净透亮,寓意着启初的初心是未掺任何杂
质的,以获得顾客的信任。以下是我设计的自信宝宝润肤乳详情页的设计思路。
3.3.1自信宝宝润肤乳设计思路
因为产品是针对女宝使用的,所以主色调我利用了粉色。表现女宝的稚嫩
温柔、可爱、甜美的形象。
商品信息概括预览区域,商品主图我设计粉色描边粉白渐变填充的圆角矩
形打底。旁边的产品名称直接为简单文本展示,下方的优惠、活动、保障、参
数为灰色描边的圆角矩形装饰,四个要素中间添加了灰色直线作为间隔,界明
区域。价格我设置了先前价格及现在价格,在字号大小上进行了区分,表明现
在价格为显眼的红色,在消费者心中留下印象。产品加购数量处,我设计了粉
色描边的不规则形状,并设计了表明加减数量的粉色箭头。右边为加入购物车
和立即购买的按钮,按钮设计为白色描边及粉色填充的圆角矩形,两文本中间
用白色直线进行间隔。按钮旁边有红色的购物车图标设计,用户可以点击查看
自己购物车的宝贝并管理购物车宝贝,形成一个快速通道。
侧导航栏区域,左侧包含两个导航栏,所有产品导航处,所有产品为大标
题,用粉色描边的八边形进行打底,其中填充图片为一株花束,无特殊含义,
仅起点缀作用。下方的所有分类为长方的灰色描边粉色填充的圆角矩形。所有
分类标题处设计了圆形与直线组合而成的图形进行装饰,分别对称放在标题左
右。分类词目下方有点击收藏的图标设计。为红色填充圆形及白色爱心。详情
页导航部分,也是长方的灰色描边粉色填充的圆角矩形作为底图,四大栏目的
左边有黑色直线及圆形装饰,圆形数量及位置对应四大栏目。
新品上市快速通道区域,新品上市标题为粉色填充灰色描边的矩形打底,
标题文本为红色,吸引消费者的注意,在浏览详情页的时候关注到此部分,起
到关联营销的效果。这里有三种产品展示,产品都是单独放置在白色填充灰色
描边的矩形背景图上,矩形低端上方设计了粉色透明的小矩形块用来放置产品
名称。三种产品图下方有三个白色圆形表轮播效果,且有红色文本“点击更
多》”,为那些想要挑选更多商品的消费者提供便利。
商品详情展示区域,最上方有粉色矩形条承载详情与评价二词。下方是关
于自信宝宝润肤乳的详细图文介绍。焦点图模块背景颜色为深浅粉色的部分填
充,左下方放置了荷叶进行点缀,无特殊意义,增添画面元素。我将产品放置
图片中间核心区域,并设计粉色的立方体,使产品倒影显现在立方体上,增强
24
湖南商务职业技术学院毕业设计
立体感。其主标题为植物天然“保护衣”,下方的副标题“48h呵护每一个自信
宝宝”,侧面反映产品的长效保湿功能及产品系列。右侧为三个暗粉色的圆形图
标设计,分别为温和弱酸、有机认证、10大无添加。从三个方面又进一步概述
了产品的特性。先在消费者心目中初步建立产品认识。
接下来我便从四个部分对该产品进行详细讲解,包含产品功能、特性、规
格、成分、服务等方面一一展开描述。四个部分的标题我统一进行了设计,我
用三个元素对标题进行装饰,分别为粉色花边形状、单瓣粉色花瓣及不规则圆
角粉色描边矩形。
自信启蒙世界区域,先以3大感觉器官,扣好第一粒扣子开头。文本以粉
色圆角矩形作载体。我特别对数字“3”进行了斜面浮雕及描边的效果设计,强
调三大感觉器官。首先是[视觉纽扣],有呆萌、wink、专注、思考四大精灵,
每一个都是用圆形进行图片的剪切设计与蓝色描边圆角矩形结合,四大精灵右
上方设有粉色的箭头及转一转的文本,提醒消费者该产品的小设计如何使用。
其次是[嗅觉纽扣],这里用翻开的书本作辅助图形,为蓝色、白色、粉色设计
感护精华名词进行了详细解释,最后|而成的书籍。对Livings微萃技术及BSE٠
是[触觉纽扣],这里仅一笔带过了柔珠泡沫+无泪配方,并放置了产品的小型图。
自信源头活水区域,分别从三个小方面对产品进行了讲解,三部分的标题
为数字加文本,并用灰色直线进行了简单的装饰。第一部分为天然有机,温和
不添加。以图标及文字的形式讲述了产品的部分无添加成分。先以较大的分割
的数字零表示4000+风险成分无添加,在其旁边放置了布偶小熊的图形,小熊是
小孩喜欢玩弄的,玩具元素的添加又在表现产品针对的消费群是小孩。其下方
列举了五大未添加的成分,并结合产品图片以两个白色箭头指向,暗示产品敏
感肌肤也使用,消除消费者顾虑。第二部分为舒敏养护,直入肌肤深处。这部
分以细节图为主,将产品的质地放大,以粉色的五边蛛网形状为载体分别散发
出产品的五个特性,润肤乳放其中央。下方又延伸出三力。保湿力、滋润力、
修护力。三个文本下方有粉色的圆角矩形当作进度条,同时又有象征着向上的
箭头,表示“up”。第三部分为天然亲肤,近距离接触宝宝。背景为白色圆角矩
形,用透明绿叶点缀。以“S”形对产品的相关成分进行了介绍。通过左图右文
本、右图左文本穿插展示。图片都以圆形进行了统一剪切,外围以灰色描边圆
形装饰,并添加了投影的效果。每个部分过渡的区域有圆弧状的虚线进行引导。
自信贴心守护区域,利用产品裸图进行细节上的说明,以蓝色圆形及直线
的形式分别指出产品设计上的三大优良特性。每个特性的文本都有粉色虚线描
边状的圆角矩形作为外框。接下来是产品信息的介绍,以ID卡片的形式进行讲
25
湖南商务职业技术学院毕业设计
解,增加趣味性。卡片为白色圆角矩形打底,内侧添加粉色虚线描边状的圆角
矩形,并在正上方设有小女孩头像,表示产品时针对女宝的。产品系列、产品
规格等文本都是用粉色圆角矩形进行打底。接着穿插问答式的文本,设置了三
个热点问题并作出解答,每个问题都是白色矩形为底图,并设计了Q与A字母
装饰矩形。
萌宝成长大本营区域,以循序渐进的方式依次将与萌宝成长有关的产品进
行罗列,每款产品下方都有点击查看按钮,按钮为粉色圆角矩形状。最后区域
为关于配送及物流方面的服务,以纯文本的形式展示。(如图14所示)
3.3.2自信宝宝润肤乳设计效果
26
湖南商务职业技术学院毕业设计
27
湖南商务职业技术学院毕业设计
28
湖南商务职业技术学院毕业设计
图14自信宝宝润肤乳详情页效果图
29
湖南商务职业技术学院毕业设计
3.4登录注册页视觉设计与制作
3.4.1设计思路
登录注册页面考虑到登录注册的便利性与简约性。我在设计上以左右对称
排版的方式进行设计。页面背景为灰蓝色的渐变,添加城堡元素,动漫风格的
城堡图表现出孩子的天真与简单的乐趣。
页面左边以产品图及一些儿童玩具组合营造宝宝成长乐园,背景为透明的
田字格,一方面为“宝宝成长乐园”的载体,规范文本,一方面又表示小孩成
长过程中须经历受教育的阶段,其中田字格便是其在成长过程中会接触到的。
玩具也是益智类型的玩具,与宝宝成长相联系。而启初产品正是传达出宝宝健
康成长与其密不可分,启初呵护每一位宝宝的成长,为每一位宝宝打造独特的
成长乐园,传递核心品牌理念。
右边为登录注册区域,所设计的图形皆是圆角矩形。这里为淡蓝色的圆角
矩形,下方重叠有白色圆角矩形稍加装饰。登录与注册标题在字号上进行了区
分,登录字号稍大,且其下方有圆角的直线装饰。输入账号及密码信息处为竖
列的两个蓝色圆角矩形,圆角矩形内左侧有账号及密码的图标,密码输入框右
侧还有显示隐藏功能的眼睛图标。右下方有纯文本忘记密码,在用户忘记自己
密码时可以点击进项相应操作。最后有登录的蓝色圆角矩形按钮。(如图15所
示)
3.4.2设计效果
30
湖南商务职业技术学院毕业设计
图15登录注册页效果图
3.5购物车视觉设计与制作
3.5.1设计思路
购物车页面背景为蓝绿色背景的填充,在右上方添加了窗户似的投影。表
明启初品牌如窗户玻璃一样明净透亮,寓意着启初的初心是未掺任何杂质的,
以获得顾客的信任。
我的个人中心区域,有蓝色向右的箭头予以点缀,用户可点击快速跳转到
个人中心页面,建立快速入口。逛一逛区域为“逛”的小图标及圆角矩形合成
的设计,点击可以看看别人买了啥。
全部、降价、筛选文本水平展示,文本旁的数字根据购物车内的宝贝而定,
且筛选旁有筛选的图标,明确筛选功能。
产品区域,每款产品都使用了统一设计,右横向的灰色描边白色填充的圆
角矩形作为底图。左侧有勾选图标,由圆形与对号组合而成。右侧的产品为蓝
色圆角矩形打底再添加单一的产品裸图。加购数量处使用了灰色描边圆角矩形
31
湖南商务职业技术学院毕业设计
及直线合成的不规则图形,方便加减宝贝数量。最右侧有删除与移入收藏的小
按钮,为蓝色矩形。结算处为白色矩形设置了投影的效果。优惠明细与去结算
处都是圆角矩形的按钮设计。
猜你喜欢区域,猜你喜欢标题处文本下方底图为白色圆角矩形,标题两侧
有蓝色圆形及直线进行装饰。下方产品展示为5款产品的轮播展示,轮播按钮
为白色圆角矩形及向左向右的箭头。产品为蓝色描边白色填充的底图,产品图
片为场景图放置其上方。并在中间位置添加了蓝色透明矩形用以标注产品名称。
(如图16所示)
32
湖南商务职业技术学院毕业设计
3.5.2设计效果
图16购物车效果图
3.6订单结算页视觉设计与制作
3.6.1设计思路
订单结算页页面背景为蓝绿色背景的填充,在右上方添加了窗户似的投影。
表明启初品牌如窗户玻璃一样明净透亮,寓意着启初的初心是未掺任何杂质的,
以获得顾客的信任。
33
湖南商务职业技术学院毕业设计
回到上一页区域与购物车页面的回到我的个人中心设计一致,具有同步性。
收货信息管理区域,由白色矩形打底,添加投影效果,矩形上方有蓝色的
细长矩形,同样有投影效果。底图上方的文本旁有蓝色的位置图标,暗示收货
地址信息。最右下角有默认地址及添加地址的蓝色圆角矩形按钮设计,添加投
影效果。
我的宝贝区域,标题设计与回到上一页一样。宝贝展示与订单计算页类似,
除勾选图标及产品图、产品名称一样,不同之处在于添加了单价、数量、小计
元素,为纯文本显示。所有宝贝左下方有运费险服务及开具发票的勾选按钮,
为蓝色矩形,白色对号的设计。提交订单处为蓝色圆角矩形按钮。(如图17所
示)
34
湖南商务职业技术学院毕业设计
3.6.2设计效果
图17订单结算页效果图
3.7个人中心视觉设计与制作
3.7.1设计思路
个人中心页面是个人信息和功能的集合入口,只有用户自己能看到。所以
需要赋予用户极大的主动权,意识到品牌为自己的服务是独特的,从心理上抓
住用户的品牌倾向思维。我设计的个人中心主要由个人信息区和功能模块组成,
个人中心的流量是仅次于首页的,我从这一点抓住个人中心的重点,主要设计
思路如下:
35
湖南商务职业技术学院毕业设计
页面背景为蓝绿色背景的填充,在右上方添加了窗户似的投影。表明启初
品牌如窗户玻璃一样明净透亮,寓意着启初的初心是未掺任何杂质的,以获得
顾客的信任。在页面下方添加了两个儿童玩具图形,增添页面的趣味性。
左侧导航区域,用户首先最能关注到此块区域,它包含了个人信息的展示。
底图为粉色矩形,并利用剪切蒙版依据矩形的轮廓添加了山脉的简笔图形。山
峰众多意味着个人中心为用户提供的功能也很多,从不同角度出发考虑用户需
求。头像处为圆形轮廓,头像右下角添加了用户的等级形象,帮助用户了解自
己的会员等级并积极向更高的等级发展,培养用户。我的会员处有明显的显示,
便于用户意识到自己所处页面,显示条为添加了投影效果的白色矩形。
新人见面礼、启初成长记、生日狂欢礼、积分兑你想标题处都作了统一的
设计,为蓝绿渐变的大括号形状。
新人见面礼区域,为小型的banner展示,底图为带有褶皱的灰白页,用叶
子进行点缀,产品图放置在右边。
启初成长记区域,设计了三种会员卡片,卡片都采用了对称渐变的填充,
且卡片后有绿叶装饰,三个会员形象都是根据品牌名称中的“启”来进行相应
的命名。会员形象都是带卡通性质的,符合启初品牌针对消费者的萌趣特征。
卡片统一放置在白色的圆角矩形上。
生日狂欢礼区域,包含惊喜礼包与双倍积分的卡片设计,卡片为统一的蓝
色圆角矩形状,惊喜礼包为黑色描边的礼盒图形,其上方有白色对话框状承载
“快来拆盲盒吧”文本,右侧有启初小程序虚拟二维码设
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 口腔科技能培训课件
- 小学生科学故事课件
- 2025年初中科学课程标准考试测试卷及参考答案
- 针对2025年盐湖提锂的成本优化与产能扩张技术创新报告
- 2025年基因检测在遗传性遗传性骨骼发育不良诊断中的准确性研究报告
- 井下用电安全管理办法
- 企业员工理发管理办法
- 乡镇税收分层管理办法
- 住户登记制度管理办法
- 乌海宠物配偶管理办法
- 煤炭工业矿井建设岩土工程勘察规范
- 2024慢性、重大疾病、肢体伤残疾病中医康复方案
- 微生物检验潜在风险试题及答案讨论
- 法务外包服务协议书
- 中学生零食消费情况调查与分析
- DB63T 2399.2-2025 公路工程施工危险源辨识指南 第2部分:路基工程
- 吉林省吉勤服务集团有限责任公司社会化招聘笔试真题2024
- GB 45189-2025氰化物安全生产管理规范
- TWAA 011-2024 WLAN工业终端性能技术要求
- 新科粤版九年级上册初中化学全册课前预习单
- 2025-2030年中国船员服务行业运营现状及投资前景规划研究报告
评论
0/150
提交评论