新型商业网站的设计探索

李嘉伟，陈淑红，段　焰

(1. 湖南工程学院 计算机与通信学院，湘潭 411104; 2. 福州大学 物理与信息工程学院，福州 350116)



新型商业网站的设计探索

李嘉伟1，2，陈淑红1，段焰1

(1. 湖南工程学院 计算机与通信学院，湘潭 411104; 2. 福州大学 物理与信息工程学院，福州 350116)

随着网络发展，新型商业网站在满足用户功能需求的同时，还需提升用户体验.从前台交互式设计、后台功能设计两方面对现代新型商业网站的设计过程进行探索.本网站网页结构简单、运行稳定、体积小巧、功能齐全、成本低、应用灵活，成功展示给人们视觉冲击与品牌魅力.网站基于J2EE平台开发，后台采用Oracle数据库.

商业网站；用户体验；J2EE

随着智能手机等移动设备等普及，通过移动端网上购物、支付成为最方便的交易方式，网上购物方便快捷，成为年轻人购物的首选方式.网上购物的兴起对不少品牌的实体店经营造成一定冲击，也迫使很多品牌针对互联网大环境下的经营模式进行转型.不少国际大牌、奢侈品牌的门店装修靓丽、摆布奢华，其提供的奢华的购物体验也是消费成分的一部分.但是网络化的门店如何带给消费者同样的奢华体验并使消费者为之买单，这就对传统功能型网站提出了新的要求.新型商业网站不仅需要满足用户的功能需求，还要满足消费者的体验需求.提升用户体验是新型商业网站的核心目的.

要提升用户体验，需要做到两个方面，一是舒适人性化的交互设计，二是具有品牌感染力、商业冲击力的视觉设计.新型商业网站在交互设计上要做到适应不同设备的响应式设计，尤其是在移动设备上访问体验要舒适完美.视觉设计上要适应现代设计趋势，采用时尚简约的扁平化设计.本文以虚拟品牌VESPERA商业网站的设计过程为例对现代新型商业网站的设计进行探索.

1　系统方案

新型商业网站的设计是基于用户体验的开发过流程.用户体验设计是指在产品设计、开发、维护的过程中以用户体验为核心、强调以用户需求、体验为设计决策和开发目的的开发模式，而不是强制用户去适应产品[1].使用MindManager对网站进行需求分析总结与需求冻结，然后进行原型制作.使用AxureRP对网站进行交互设计与原型制作，并通过用户体验测试检验原型与修改[2].前台的美观是企业网站必不可少的，本项目充分重视视觉管理，使用AdobePhotoshop、Illustrator等进行logo和网站的视觉设计.为提升用户体验，网站前端采用响应式HTML5/CSS3代码实现.本项目基于J2EE平台开发，后台采用Oracle数据库.

2　前台交互设计

2.1扁平化设计

扁平化设计是指去掉设计元素的拟物化立体写实效果，而采用抽象、简单、符号化的设计风格，让“信息”本身作为核心被凸显出来[3].

传统导航栏都是以简单明了的文字为主体的，在导航栏子目录较多的情况下尤其直接明了.但复杂的目录结构会使用户厌烦，导航栏目录结构越简单越好.文字型导航栏一般只能使用一种语言，而将导航栏图标化后就不存在语种问题了，只需一个版本的网页便实现了网页的国际化.文字型导航栏不适合手指操作点击，还很容易误触其他链接.

本网站将导航栏结构简化，只有一级菜单，不设二级菜单，并且将长度缩短，简化为三个，同时将其图标化，使用a:hover的css样式代码，在鼠标悬停在图标上时，图标将发生变化.图标化、简化后的导航栏不仅美观大方，打破了语种限制，实现了页面的国际化，特别是在移动端访问页面时，将会更方便手指触碰.图1给出了传统文字型导航栏与图标化的导航栏的对比效果.

图1　传统文字型导航栏与图标化的导航栏对比

不但导航栏可以扁平化，其他例如收藏按钮、订阅按钮、分享按钮等众多功能都可以使用符号化的图标使其变得通俗易懂，例如用户一看到“爱心”、“信封”、“电话筒”形状就马上会联想到“收藏”、“邮件”、“电话”等信息，用户理解与获取信息更快更准.

2.2响应式设计

响应式设计是指网页的设计与开发制作根据设备环境显示屏幕尺寸与方向，对网页的显示布局进行相对应的响应和调整[4].HTML5/CSS3是实现响应式页面的基础语言.HTML5/CSS3增设了许多新的语句与功能，使以往需要使用图片或JavaScript代码实现的功能可以更简单的实现，减小项目文件体积和开发成本.而如今大部分电脑与手持设备的浏览器与操作系统都已经完全支持HTML5了，这也为响应式设计的普及奠定了基础.

如图2所示，本网站除了能在电脑上正常浏览外，在手机上浏览也同样便捷.对于宽屏的电脑， 网页可以显示大分辨率横屏效果，将屏幕铺满又不留空白，在手机上浏览时，网页显示小分辨率竖屏效果，为方便手指操作，在手机上浏览时，导航栏会缩小为一个“抽屉”图标，点开“抽屉”图标，导航栏的三个图标会以纵向列表的方式完整的展示在用户面前.

图2　在电脑和手机上网页的浏览效果

2.3界面创新与新媒体应用

Bing是微软新推出的搜索引擎，与谷歌百度相比是后起之秀，但却能在竞争激烈的搜索引擎领域取得一席之地，其原因很大程度得益于Bing美观的设计.Bing的搜索每天都会更新壁纸.现在大部分企业网站一打开就是老套的厂字形结构，千篇一律，毫无创新与亮点可言.

传统厂字形网页打开后映入眼帘的便是上方大大的导航栏，左边大大的菜单与目录，右边则是最新文章的列表.商业网站最新流行的布局方式为DIV+CSS楼层式布局[5].楼层式布局使得属于不同页面的内容分布在不同楼层，结构简单明了，对菜单与目录的要求降低了.所以不同于厂字形网页，菜单与目录的占用空间将大大缩小.各楼层内容分化，所以首页无需过于复杂的导航与菜单目录.可以将网页顶层楼层设计为一个漂亮简约的欢迎界面.如图3所示，本网站欢迎界面楼层铺满用户显示屏幕，背景图片是可以定期更换的墙纸，墙纸可以是漂亮的风景图片，也可以是节日、活动宣传画，或是企业最新产品的宣传海报.欢迎界面左上角是企业logo，右上角是图标化的导航栏，左下角是网页分享按钮，下方是新媒体(企业微博、微信)介绍与链接.欢迎界面布局清爽、简约、大方.这样欢迎界面宛如是用户电脑桌面，可以根据节日或活动等不同需求自定义墙纸与色调风格，给用户带来亲切感与视觉冲击力，既达到美观的用户体验又起到了企业宣传的作用，一举两得[6].

图3　可随意更换的首页墙纸

用户喜欢分享好的东西给朋友，从朋友圈到微博无处不在.如果用户喜欢企业的品牌、网页、产品等，不妨给用户一个更方便的分享途径，这样不仅提升了用户体验，更是为企业宣传做出了巨大贡献.所以欢迎界面的分享按钮是十分必要的.现在的分享按钮基本不需要开发者自己制作了，网络上已经有许多代理商提供分享按钮源代码，本课题使用百度提供的分享按钮.微博、微信这样的新媒体是企业的宣传利器，也是用户熟知、喜爱的元素，新媒体介绍与链接自然也必不可少.适当使用这样的新媒体可以更贴近用户的生活，增强互动性，扩大宣传效果.本网站的新媒体链接提供企业微博、微信与淘宝网店的介绍与链接.

3　后台功能设计

3.1商品上传与管理

商品数据由商品名称、价格、描述等数据组成，其中名称、价格、描述、上市时间、尺码、是否在售、图片等信息需要展示在商品展示介绍页面，名称、价格、图片则需要展示在商品列表和商品推荐栏.类别虽然没有显示，却是商品分类显示的重要依据.上市时间、价格还会被用于商品列表的商品排序功能.是否在售分为三个选项：在售、售罄、即将上市.商品分类分为五个类别：饰品&配件、服饰&内衣、化妆品&护肤品、生活用品&电子产品、其他.商品信息包括图片信息与文字信息两种，管理员在填写完商品信息并提交后，如果输入格式正确，文字信息会立即保存至数据库表，图片会上传至服务器，通过session传递参数生成html，并将图片地址保存至数据库.管理员可以将已经上传的商品信息进行删除.管理员选中需要删除的商品，后台做出action请求，并将数据封装到Pojo中，解析成json数据，jsp拿到数据反解析显示[7]，根据商品id发出删除请求，若商品存在则从数据库中删除.

图4　商品列表设计

3.2商品列表与详细介绍

如图4所示，在商品列表，用户可以通过单击列表中某一商品，进入该商品的详细介绍页面.当用户单击列表中某一商品时，浏览器通过该商品的id请求该商品的数据.若存在商品id，则将商品各类数据封装于类，通过session传递参数，jsp页面拿到服务器反馈的数据，在新的jsp页面刷新显示内容.用户可以分类别浏览商品，当用户单击某一类别时，商品列表便只会显示该类别的商品，与此同时，当商品数量较多时，一页无法全部显示时，商品列表可以自动分页.在分类的同时，用户可以根据商品“id”或“上市时间”或“价格”对该类别商品进行排序显示.当用户单击分类栏中某一类别时，浏览器通过该商品类别请求该类别商品的数据.首先服务器根据商品类别检查商品是否存在，若存在，则将商品各类数据封装于类，通过session传递参数，jsp页面拿到服务器反馈的数据，在原jsp页面局部刷新显示内容.

商品分类显示页面的代码实现;

publicStringfenleiShangpin(){

if(this.ztshangpin.getShangpinliebie()!=null){

Stringname=null;

try{name=newString(this.ztshangpin.getShangpinliebie().getBytes("iso-8859-1"),"utf-8");}

catch(UnsupportedEncodingExceptione){

e.printStackTrace();}

System.out.println(name);

this.ztshangpin.setShangpinliebie(name);

this.listShangpin=this.tShangpinDao.getAllXfIantaiSHangpinLiebiao(ztshangpin);

ActionContext.getContext().getSession().put("listShangpin",listShangpin);

return"successGetShangpin";

}

return"failGetShangpin";

}

图5　电脑与手机上的商品详细介绍页面显示效果

3.3焦点图与墙纸

焦点图数据由背景图片、新品名称、新品价格、链接四个部分组成.墙纸只有图片，但是为方便开发和节省开发成本，将焦点图与墙纸数据库表融合.墙纸除了图片也拥有焦点图的其他三个部分的数据，只是不显示.焦点图有三块，每一块的的背景图片大小略有差异，排序也不同，所以用position字段标注焦点图位置，0表示墙纸，1表示第一张焦点图，2表示第二张焦点图，3表示第三张焦点图.链接为焦点图正中央按钮的响应跳转链接，link字段接受任何文本，不限于网内或网外地址.链接可以指向商品，也可以指向特定的活动页面，例如双十一特惠活动页面等.普通网站常采用旋转木马式焦点图，用户往往只看到该焦点图中首先显示的前几页内容，排在后面的被看到机率很小.一般用户希望可以一次性浏览完焦点图所有页面的内容，所以本网站焦点图采用楼层式平铺设计.传统焦点图的JavaScript代码十分影响网络传输速度，浏览器兼容性也不好.

图6　焦点图设计

如图6所示，本网站的三张焦点图以平铺楼层式的布局方式从上而下展示于首页，同时焦点图的背景图片使用background-attachment:fixed的css语句，将背景图片固定住，不随鼠标滚轮滑动而滑动，使浏览体验更佳.

4　结束语

随着时代的发展，人们的审美观日益提升，对商业网站等网络产品的功能要求与体验需求越来越高.新型商业网站不仅需要功能齐全，更需要带给用户完美的浏览、购物体验，达到和实体店消费相同的服务效果.通过优良的用户体验设计，使企业网站把企业与品牌的宣传效果达到最大化，是新型商业网站设计的最终目的.本文以用户体验设计为核心，交互设计与视觉设计在实际应用中取得了良好的效果，提升了用户体验，而且网页结构简单、工作稳定、可靠，体积小巧、功能齐全、成本低、应用灵活、具有响应式设计、扁平化设计，成功带给人视觉冲击力与品牌魅力.

[1]黄小牧.谈智能便携设备的“亲和力”——从三大移动平台谈自然用户界面交互设计[J].中国新通信，2015(7)：3-5.

[2]许鲁彦.基于交互设计的高校门户网站设计[J].软件导刊，2014，13(11)：87-89.

[3]余娜，张珂.扁平化在现代包装设计中的应用[J].包装工程，2015，36(18)：41-44.

[4]蒋凌燕，查英华.基于HTML5的响应式Web页面重组适配技术研究[J].计算机与现代化，2015(2)：7-10.

[5]王聪，杨韶华.基于DIV+CSS技术网页布局应用与实践[J].电脑知识与技术，2014，10(34)：8128-8132.

[6]李媛，李纶.浅析移动端产品的交互设计[J].科教文汇，2013(6)：99-100.

[7]刘冰.基于J2EE和MVC的SSH研究与应用[J].计算机与信息技术，2012(3)：32-33.

DesignandExplorationofNewCommercialWebsite

LIJia-wei1，2,CHENShu-hong1,DUANYan1

(1.CollegeofComputerandCommunication,HunanInstituteofEngineering,Xiangtan411104,China;2.CollegeofPhysicsandInformationEngineering,FuzhouUniversity,Fuzhou350116,China)

WiththedevelopmentoftheInternet,thenewtypecommercialwebsitenotonlyshouldmeetthefunctionneedsofusers,butalsoneedtoenhancetheuserexperience.Thispaperexploresthedesignprocessofanewtypecommercialwebsitefromtwoparts:interactionandvisualdesignofforegroundandfunctiondesignofbackground.Thiswebsitehastheadvantagesofsimplestructure,stablerunning,smallsize,full-featured,lowcostandflexibleapplication.Allthesebringpeoplevisualimpactandthecharmofthebrand.ThewebsitehasbeendevelopedbasedonJ2EEplatformandOracledatabase.

CommercialWebsite;userexperience;J2EE

2015-07-08

湖南省教育厅科学研究项目(14C0286)；湖南省教育厅科学研究项目(13c180).

李嘉伟(1993-)，男，研究方向：计算机网络、人机交互.

陈淑红(1975-)，女，博士，讲师，研究方向：社会网络分析、算法优化.

TP393.0

A

1671-119X(2016)01-0041-04