**********************************
4.2 系统前端设计与实现
首页：网站首页是一个网站的入口网页，作用是引导互联网用户浏览网站以及其他部分的内容。这部分内容一般被认为是一个目录性质的内容。
图4-1 网站首页图
17
**********************************
整体个网站首页遵循扁平化设计，简洁大气，在色彩搭配上，根据企业LOGO色彩、行业特性进行设计，主次分明，冲击力强。首页为多屏，鼠标下拉或滚轮滚动展示，包含有导航栏，banner图区，站内搜索框，艺术资讯，艺术名家，精品展览，合作机构的部分展示，这样设计的目的是让访客浏览更轻松便捷，突出公司的服务和特色。另外，这样的设计更适合移动终端的上滑、下滑显示，首页内容更丰富直观，浏览更轻松便捷。如图4-1.
导航栏：网站导航栏位于网站最上面，通常网站的主导航主要包括网站的首页和产品栏目及各个单页面的导入链接，是网站中最主要的、必不可少的内容。方便用户以最快，最简单的到达不同的网页。同时也方便用户一目了然的发现网站的主要信息，而不用费力的寻找。
图4-2 导航栏
导航栏功能划分包括：首页，艺术品，展览，资讯，艺术名家，会员中心，关于我们，常见问题；功能根据行业需求和客户体验来划分，精简全面便捷的展示企业信息和服务。其中鼠标经过不同栏目时，当鼠标悬停在栏目上方，栏目背景色变为红色，并展开二级导航栏目。此处用的是CSS3中的:hover 伪类实现的，:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。如图4-2.
艺术品：艺术品栏的设计目的是为了让访客更细致的了解公司艺术品相关的服务和流程，是网站内容更丰富全面。
如图4-3 艺术品和二级导航
18
**********************************
艺术品下面二级导航栏目包含鉴证备案，资产管理，修复保养，个性定制。鉴证备案中包含有鉴证的意义以及具体流程和信息，资产管理中包含有基金、信托、按揭和鉴赏管理，修复保养中包含有保养的意义和具体流程，个性定制中包含有服务项目及优势。如图4-3.
展览：设计展览栏主要是对公司的产品进行一个集中展示。
图4-4 展览和二级导航
展览栏主要分为中国绘画，书法篆刻，西画雕塑，古瓷杂项，当代工艺五个板块。可以选择直接点击展览进入展览大厅，也可以选择直接点击不同二级栏目进入细分板块。如图4-4.
图4-5 展览页布局
展览大厅可以看到五个板块分类，不同价格区间，以及通过对展品的人气高低、价格高低、录入时间来进行排序，更方便访客对展品进行定位和选择。展品以通栏的形式布局，平面感强，是产品更清晰突出。鼠标悬停在图片上，会有图
19
**********************************
片的信息介绍弹出，鼠标离开消失，互动性和体验度很高。这个用到的是jQuery中的mouseover和mouseout事件，鼠标经过悬停时mouseover触发显示信息，鼠标离开mouseout触发信息消失。如图4-5.
图4-6 商品图片的放大镜功能
点击图片信息上的查看详情，就可以看到该展品的详细信息，此时鼠标经过悬停图片，会有一个一个放大镜效果，这样设计的初衷是为了让访客看到更多的展品细节，获取更多信息，提高体验度。如图4-6.
资讯：资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性，它必须被消费者利用。资讯是一种信息，涵盖的不只是新闻，还可以包括其他媒介。
图4-7 资讯和二级导航
资讯栏的设计主要是发布即时的行业新闻动态，活动宣传，文化展示。其中包含有行业动态，艺术活动，艺术展讯，艺术视频四个二级导航。如图4-7.
20
**********************************
艺术名家：艺术名家栏主要是向访客展示介绍一些有所成的艺术家，要知道所有艺术品都离不开创造它的艺术家。
图4-8 艺术名家
选择一些优秀的艺术家进行介绍展示，首先可以提升艺术家知名度，提高展品热度，其次访客也可以了解到各个优秀艺术家，了解更多行业知识，当然优秀艺术家入驻，也可以很好的提升企业形象和实力。如图4-8.
会员中心：会员制是一种人与人或组织与组织之间进行沟通的媒介，它是由某个组织发起并在该组织的管理运作下，吸引客户自愿加入，目的是定期与会员联系，为他们提供具有较高感知价值的利益包。
图4-9 会员中心和二级导航
图4-10 会员注册、登录
21