摘 要
随着网络时代的快速发展，各类电商网站的增加，竞争也更加激烈，各种类电商模式层出不穷，形式更加的丰富，设计更加的精美，一个好的网站设计可以使得主题表达更突出，视觉冲击力更强烈，加深用户访问网站的第一印象，注重用户的体验度。而简洁实用的网站风格会让网站更加直观，富有可欣赏性。如何能创建一个被大众认可和接受的网站？必不可少的就是首页的设计，也就是用户看到我们网站的第一印象。那么其中必不可少的就是设计风格一定要鲜明并具有自身的独特性。
电商网站的设计，最直接体现的就是企业的门面，清晰的导航是网站设计的重要组成部分，在浏览一个网站时，通常我们首先会看到导航栏，一个清晰的导航栏对网站的整体信息架构、用户的综合体验都有很大的影响。在用户浏览网站时导航栏会快速引导用户浏览感兴趣的内容，也能帮助搜索引擎快速理解网站中每一个网页所处的结构层次。这样的网站设计才会被大众认可，为企业的门面争光。
关键词：电商网站设计； 设计风格； 用户体验；
引言
电子商务从20世纪末期发展到现在，经历了十几年的发展，现在已经改变了传统的商业模式。根据互联网信息中心发布的报告显示，在2019我国的网络市场交易总额度已经超过了“万亿”，相比前年，已经实现成倍增长，说明网络市场在我国社会消费市场的地位不断提高。
大家都知道中国的购买力是非常强的，特别是在网购方面，随着这几年购物网站的发展，以及几家电商领军企业的竞争下，“网购”已经发展的相当成熟，基本上只有客户想不到的，没有客户买不到的，买蔬菜，买水果，买海鲜，这些在几年前不敢想的，如今一一实现，而且商家没有场地租金负担，价格透明，省钱实在。
购物平台为了进一步的明确“顾客至上的理念”，为了让购物者更快更便捷的选择到自己真正需要的商品。于是如何对购物平台的设计，将其打造成为吸引顾客，并具有个性的网站，成为了购物平台的迫切需要解决的难题。
本次毕业设计的主题为《品优购》网站设计，主要针对一些绝大多数购物平台的设计问题，进行重新的设计改善，例如商品的罗列复杂，首页设计不鲜明，没有个性，设计风格平庸等。本次说明主要从几个主要板块进行进行介绍，其中包括，登录页面，首页，商家的商铺页面，购物车，秒杀模块等。最后进行对《品优购》网站设计的设计过程进行总结和归纳。
1《品优购》网站设计创作综述
创作背景本次设计《品优购》是一个大型的电商购物平台，这个题目对于我这个初出茅庐的学生还是有非常大的挑战的，当初只是有一个初步的想法，想要做一个类似京东淘宝的那种线上购物平台的网站设计，可是当我真正对它进行设计的时候脑海里没有任何的思路，这么大工作的内容，真的不知道该从哪里着手。
于是我开始在网上找资料，一个完整的电商网站设计需要哪些东西，我发现这真的是一个庞大的体系，其中包括LOGO设计丶首页的设计丶导航栏丶购物车丶商家店铺设计丶首页的轮播图丶收藏栏丶支付页面丶用户的个人资料页面……等等等等，我将从以上几个大的点来具体介绍品优购的设计过程。
设计开始前，我参考了国内各大电商平台的官网，我发现他们的设计人员在接手不同的项目设计过程中，仅仅从过程来说基本上大同小异，但是至关重要的是每一次的网站设计会根据不同的业务需求而产生不同的设计目标，你有了这目标以后，你的设计无论多么完美，多么花哨或者简单，你都必须把业务需求完完整整的体现出来（如图1.1所示）。
图1.1 唯品会风格
唯品会在这一点上的体现还是非常明显的，将本次主要宣传的商品，以及一些隆重的活动以一个最直接的方式展现出来。最直接的优化了用户的体验，让用户更直观的看到你的宣传，减少用户的思考时，让其短时间的作出决定。
图1.2 商品风格
我认为唯品会在设计上属于简洁大气那种，（如图1.2所示）这种设计的优点在于实用性非常高，但是我认为相比其他的网站又显得比较平庸。在网站的主题颜色上，唯品会的主色调是粉色，然后微微偏向紫色，在这一点我认为拿捏得非常好，粉色给人一种甜蜜，温馨，纯真的，感觉，这种感觉偏女性一些。然后微微泛紫色，为其赋予了神秘，高贵的气质，在古代有些国家的国王年老以后会为自己系上紫色的围巾，除了掩饰自己的白发以外，他们更像是用紫色来告诉自己的臣民自己的成熟与威严，由此可见紫色也给人成熟，威严的男性特征。
作品阐述本次毕业设计《品优购》网站设计主要为了解决大众在电商平台购物的时候会遇到的一些问题，主要的思想就是用设计来方便用户，节省购物时间，然后优化购物的体验。优化的思想的从细节到整体，其中包括LOGO设计，导航栏的优化，搜索框，以及商品的罗列方式，购物车等。
我将从主题色调丶LOGO丶导航栏这三个方面介绍。品优购设计的主题色调是参考了淘宝的颜色，因为橙色的明度比较高，给人一种活力十足的感觉，会让人有兴奋的感觉。这样会加强用户购物的愉悦感。
LOGO设计，LOGO是一种标志，象征着精神文化，本次设计的LOGO采用的是文字形变，将“品”字形象话成一个购物车的形象，与电商平台相互呼应，也与本次设计主题呼应，这样画面看起来就非常和谐，然后也不缺失设计感。
在有了LOGO之后，导航栏就显得十分重要了，品优购的导航栏设计采用的自动伸缩的形式，这点参考的是京东的导航栏设计，这个设计非常的完美在不影响首页页面排版布局的情况下，为用户提供了快捷方便的搜索方式，极大的优化了用户的体验，这也体现了我之前说的你的设计无论多么完美，多么花哨或者简单，你都必须把业务需求完完整整的体现出来。
2《品优购》网站设计创作依据
2.1网站设计中的色彩元素
生活中我们面对五彩缤纷的世界，每时每刻，都会有不同的颜色映射进我们的瞳孔，然而每种颜色所带给我们的直观感受是不同的，按照色感分类，有轻色与重色。轻的颜色给人的感觉是轻快的感觉，低明度深重的浓色给人沉闷的感觉。京东的首页设计采用的是大面积的浅色，部分地方用重色进行点缀（如图2.1所示）在轻快的色调重也有一点重调使得画面不至于很轻浮。
图2.1 京东首页
每一种颜色都有自己的情感特征，其实它本身是没有灵魂的，它只是一种客观存在的物理现象，我们能感受到颜色带给我们的感受，是因为我们长期生活在五彩斑斓的世界中，我们积累许多视觉经验，一旦视觉经验与外来色刺激就会引发人们在心理上的情绪，所以我认为色彩带给我们的感受也不是固定的，在更多的情况下是通过，纯度,明度上的对比使得色彩的感受达到自己所预期的效果。
2.2网站设计中的文字与构图
文字在设计中笔画粗而有力,棱角分明的字体给人一种安全，踏实，牢固的感受，这种字体我们可以用在商品的一级分类中使用，笔画细会给人以苗条流畅的舒适感觉，多用于具体商品，而笔画圆润给人柔软舒适的感觉比如床上用品，香皂，等等，总之在设计中要根据商品的具体属性来定义使用的字体，而不应该用一个人的喜好用字，，要考虑到商品的具体属性。在构图方面我们可以参考淘宝的构图方式，淘宝采用了“F”的构图，即将重要的信息放在网站的左上角，网站的主要内容从左上角到右下角逐步递减。这样是符合中国人的浏览习惯的。
图2.2 淘宝构图
2.3 网站设计风格市场分析
图2.3 天猫的设计
从京东，淘宝，唯品会，天猫等市场上的各大电商平台来看，他们的设计风格都是简约的，没有什么花哨的东西，目的在于要把用户的目光锁定在要购买的物品上，进入到以上电商平台的首页用户映入眼帘的就是宣传海报，那么海报的设计就成为了各大平台的脸面，一般情况下他们都是用，轮播的方式对想要宣传的商品进行播放，所以当你设计的海报足够打动用户那么及时他没有买的心思她也会点进去看，这样就会增加平台的访问量了。
所以从各大平台的都使用的这种设计方式来看，将最显眼的位置给到轮播区域的设计方式是非常可取的。
图2.3 活动
其次（如图2.3所示）海报下面我们看到的是一些最近的活动宣传，每个活动一个独立的宣传区域，不同的配色让用户一目了然，这种排版也是市场上各大平台都会选取的方式。
图2.4 活动
总的来说设计的精髓并不是把图做的多么多么好看，而是要知道为什么而做，要解决什么问题，怎么样才是更好的方式。（如图2.4所示）如果只有美，缺失了实用性，那就绝对不是一个好的设计。没有什么是无形的，形式跟你要表达的内容，两者相互依赖，相互作用。所以好的设计一定是美和实用的结合。
3《品优购》网站设计创作过程
3.1创作思路
在真正的设计中，首先先要明确整个网站的主体色调，一般电商网站的主体颜色都会选用暖色。其次要让用户在高效率把网站搜索出来，所以在思路上要选择简洁无阻碍的网站设计方式。
图3.1 天猫国际的设计思路
（如图3.1所示）在简洁的设计方式下还要考虑到商品不断更新上下架。而在设计时就要考虑到，用户想看的不是浏览过的内容，而是当前所流行的有话题度的一些商品。不要有过多的花哨的元素，这样会让用户的注意力转移到其他地方。同时也要注意整体的网站风格要一致，让用户视觉上心理上连贯。总之一个好的电商网站设计更要便于用户的浏览。
3.2LOGO的设计
《品优购》在LOGO的设计颜色上采用的是暖色，并且纯度较高，搭配灰色拼音显得很沉稳，在LOGO的形状上采用的是字体的形变，将品优购的“品”字与购物车形状相结合，上面的口字形变成购物车的购物栏结构，下面的两个口字形变成购物车的两个轮子，这样的设计既结合了品优购的网站题目，又结合电商平台的主要特点。
在LOGO购物车形状的上半部分采用的一条旋转构成的线，那是购物清单的条状，与购物元素相互呼应（如图3.2所示）。
图3.2 品优购LOGO设计
3.3首页的设计
图3.3 品优购的首页设计
(如图3.3所示)首页的设计采用的是分类以及轮播的方式，整体的背景是白色，构图的方式为“F”的形式。参考的是淘宝的布局形式，这种方式的优势在于让页面整体化，既能将繁杂的商品展示在页面之上又可以使得页面有序沉稳，让用户一目了然。首页是一个网站访问量最多的页面，所以在首页的设计上，最引人注目的位置一定是我们的宣传海报的轮播区域，这里的商品就是整个设计的“中心点”，所有的设计都围绕着这个中心展开。
在轮播区域的下面就是活动的宣传区域，这片区域是整个页面的第二中心，因为中国人的浏览方式是从左到右，从上到下的，所以页面的层次节奏也应该是从上到下依次递减，从左到右依次递减。
3.4商品栏的设计
图3.4 商品栏的设计
（如图3.4所示）商品栏的设计是参考京东的设计形式，当鼠标移动到商品栏的一级分类的时候，右侧会自动生成更详细的二级分类，当鼠标离开的时候，又会回到原来的样子，原理是当鼠标放在菜单栏的时候我为他绑定了一个聚焦事件，使得鼠标在特定位置时会自动生成特定的内容。
图3.4.1 商品栏的设计
（图3.4.1所示）这种设计的是为了方便用户，用户只需要用鼠标点几下就可以买到自己想要的商品，用户可以根据自己的喜好进行浏览，不用再去搜索框内一个一个搜了，其精髓在于缩短了用户购物的时间，优化了用户的体验。在字体方面一级分类丶二级分类丶三级分类采用了不同的字体，考虑到有年龄大的人会访问我的网站，不同的字体会让分类更加清晰。
3.5登录页面的设计
图3.5 登录页面的设计
（如图3.5所示）登录页面大量的使用留白可以让登录框更加突出，最大程度减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不使用多余的设计元素，只靠空白去做视觉吸引力。
图3.6 TMALL登录页面的设计
布局的权衡及简化设计做的不到位的话很容易变的单调乏味。大的输入框设计让用户输入时心情舒畅。（如图3.6所示）在登录页面的设计中海报非常具有表现力，既能宣传商品，又可以使得登录页面丰富，让页面更加具有亲和力。背景颜色采用紫色，看起来可以让人在登录过程心情非常愉悦。在海报的字体配色上采用黄色，因为背景色是黄色的互补色，这样可以让整个海报页面看起来非常协调。
3.6 商家店铺的设计
图3.6 商家店铺的设计
每个店铺其实都有自己风格的定位，根据自己所卖商品的类目一个主题色调，比如像买绿植的店，主题色调为绿色，所以整个店铺都是春意盎然，补水面膜的主题色调为蔚蓝色，因为水大多数是蓝色的所以他们会用蓝色为 主题色。
（如图3.6所示）该商家的店铺主要是以买衣服为主，该商家对人群的定位是青年女性，所以我选择的是黄色来作为商家的主题颜色，因为黄色是太阳的颜色很有朝气。对于店铺的首页我将是商家主推的几款衣服，在右侧是在本店铺的宣传活动采用白色字体，这样可以让字体更明显。商家的店铺名字我使用的是红色，因为商家的主打人群是女性，所以红色更加女性化一些。
图3.7商家秒杀板块设计
对于店铺的首页，一般都是banner可以全屏滚动。然后再是产品海报或者是商家的秒杀活动。加下来就是给商品分类的导航栏。要么在宝贝的介绍页加一些优惠券，要么是插在海报下方。这是大部分店铺的排版风格。
结论
本次毕业设计《品优购》中我学习到很多的知识从最开始的网站设计选型，到最后完成设计，其中包括了很多我没有接触到的知识，这让我感受到了网站设计，不仅仅是画一个图，设计几个海报那么简单，一个成功的网站设计离不开的是设计背后含义，如果连你设计的意义都不清楚，那你的设计注定是没有灵魂的。
你要了解到不同颜色能给带来不同的感受，你要精准的把控色彩与人们的心理作用，同时还要与设计相互协调。一个页面中内容有很多其中包括框架、文本、图片、超链接、表格、表单、动画、视频、等等，你要把这些东西进行排版丶调色，并全部融合在自己的设计中，这是一件很难的事情。其中在排版方面要从分考虑到人的阅读习惯，以及不同年龄的人的阅读方式，这么多的东西在我设计以前完全没有考虑到。
在设计之前要考虑到用户的动机需要，并理解网站的业务流程，并且理解行业上的需求和技术上的限制。然后将这些东西转化为设计的规划，让网站变得能用丶有用丶并且在技术上可行，这也是网站设计的意义与基本要求所在。在品优购的设计过程中我学习到了，设计的本身就是创造，是人生命力的体现。设计师前瞻的构思就是设计的源泉，是人类都必须依赖的生命力与动力。创新其实就是人民描述未来远景的一种方式，设计师的任务就是借助本身的直觉能力去发掘与构建世界的新价值，并赋予视觉化，设计本身的意义就在于满足人们的需求，研究设计的根本也是研究人们的需求。
参考文献
(日)Works 社编辑部编著.日本平面创意设计年鉴 2005[M].北京：中国青年出版社，2006王受之.世界平面设计史[M].北京：中国青年出版社，2002.[3]何家讯.现代广告案例 理论与评析[M].上海：复旦大学出版社，1998.
[4]宋连威. 青岛城市老建筑 人文青岛丛书[M].青岛：青岛出版社，2005.
[5](英)赫利. 什么是品牌设计[M].北京：中国青年出版社，2000.
[6](日)佐藤可士和. 佐藤可士和的超整理术[M].江苏：江苏美术出版社，2007
[7]吴国欣.标志设计[M].上海：上海人民美术出版社，2002.
[8]威廉 阿伦斯著，丁俊杰，程坪，苑菲，张溪. 当代广告学[M].北京：华夏出版社，2001.
[9]孟秀民. 意象色彩艺术语言的探索和研究[J]. 湖北美术学院学报, 2009(02):117-120.
[10]卢菲菲. 色彩学中的心理效应[J]. 长春理工大学学报(社会科学版), 2007(02):71-73.
[11]占晓芳. 视觉传达设计中的文化传承[J]. 考试周刊, 2010(27):2-2.
[12]张小琴. 基于消费者网购行为的京东商城服务策略优化[J]. 中国优秀硕士学位论文全文数据库, 2016(04):53-53.
[13]知新文化.HTML完全手册与速查辞典[M].北京：科学出版社，2007.
[14]杨选辉.网页设计与制作教程[M].北京：清华大学出版社，2009.
[15]王诚君，刘振华，郭竑晖，高中山.Dreamweaver8网页设计应用教程[M].北京：清华大学出版社，2007.
[16]李光明，曹蕾，余辉.中文Dreamweaver8网页设计与实训教程[M].
[17]周德华，许铭霖.新编网页设计[M].北京：冶金工业，2006.
[18]赵铭建，赵慧，乔孟丽，康梅娟.网页设计与制作[M].东营：中国石油大学出版社，2007.
[19]赵祖荫，王云翔，胡耀芳.网页设计与制作教程[M].北京：清华大学出版社，2008.
[20]陈季.Flash基础与实例教程[M].北京：北京希望电子出版社，2005.
[21]丁海祥.计算机平面设计实训[M].北京：高等教育出版社，2005.
[22]刘兴。基于J2EE高校教师教育研究中心网站系统的设计与实现[D].湖北工业大学，2017.
[23]白杨。基于ASP的企业网站平台设计与实现[D].湖北工业大学，2017.
[24]田浩。基于SOA的高并发与高可用网站开发框架设计与实现[D].内蒙古大学，2017.
[25]黄婷婷。团购网站活动页面配置平台的设计与实现[D].山东大学，2017.
[26]白鑫。个性化电商网站系统的设计与实现[D].北京交通大学，2017.
[27]李力。基于PHP的校友云管理网站系统的设计与实现[D].北京交通大学，2017.
[28]张向楠。以互联网经济为主的园林景观网站设计[D].西北农林科技大学，2017.
[29]刘媛媛。基于ASP.NET的信息化人才网站的设计与实现[D].天津大学，2016.
[30]吴文静。留学生就业求职网站的设计研究[D].华中师范大学，2017.
1、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“文章版权申述”（推荐），也可以打举报电话：18735597641(电话支持时间：9:00-18:30)。
2、网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友投稿，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务。
原创文章，作者：1158，如若转载，请注明出处：https://www.447766.cn/chachong/146527.html,
