基于淘宝网的网站界面设计研究

基于淘宝网的网站界面设计研究中国论文网]5w!IfmTKp

卫培培 李茂林 运城职业技术学院 044000

【文章摘要】 中国论文网Dq4Zygy9gX-q A5t'a

随着互联网技术的飞速发展，网络购物已经是现代社会人们购物的主要方式之一，淘宝网是众多网购网的代表。本文以淘宝网为例，从网站的整体布局设计、视觉形象设计，以及源码设计方面来论述网站界面在设计时要注重的要点，阐明了网站界面的设计要符合社会技术的发展，符合以人为本的的设计思想，这样才能设计出更好的网站，使网站设计技术更长久地发展下去。

【关键词】中国论文网 QA1h!w7U*Y'A

网站界面；整体布局；视觉形象；源码设计中国论文网zWKqeIo+w

互联网起源于国外，在中国的发展也不过数年，所以无论在理念还是技术上， 国外的网站界面设计相对成熟一些。由于在国内信息技术领域，网页界面设计技术也长期处于几乎被边缘化的状态，网页设计师也被称为“美工”，并没有得到实际的重视发展，所以到目前为止，国内的网站界面与欧美、日韩还有一定的差距。实际上，网站界面设计属于网络和设计的交叉学科，它以网络为载体，把各种信息以方便、快捷、美观的形式表达给网站的浏览者，网站的类型也有多种，有政府网、企业网、娱乐休闲网、购物网、门户类网等，各种成功的网站都有其自身的设计风格，设计理念，淘宝网是其中比较成功的购物网站，它的成功有其多方面因素，为其他网站设计起到了一定的推动作用。中国论文网}'vCB+Jl4D]:u

1 以人为本的设计理念中国论文网A){H |+l'dY2h

淘宝网是典型的用户体验设计（UED） 购物网，在淘宝网的首页，用户可以通过搜索直接找到所需购买的物品的商店，也可浏览左侧的商品服务分类，找到对应的商店，方便快捷。用户的身份是何类型的人， 有新客户，有老客户，不管是哪一类用户， 都要倾注于用户应该如何执行任务，操作时要简单、易懂、易操作，而不是聚焦用户偏好如何执行。这充分体现了“用户化”特色，即以人为本的设计理念。

以用户为导向型的网站设计方法，是目前界面设计领域使用最普遍的的方法， 而且也是最主要的方面。以用户为中心的设计（UCD），是在进行界面设计时从用户的需求和用户的感受出发，围绕用户为中心进行设计，在设计时要考虑用户的使用习惯、交互方式和视觉感受。这是网站界面设计的必然前提，所以，个人在设计界面时，最重要的前提就是以人为本的基本原则。

2 合理布局

网站布局是美学感官和功能性的结合，是整个设计过程中内容与形式的体现，页面布局主要从版式布局和视觉效果两方面来进行考虑。

2.1 版式布局中国论文网 d/X:M-l]\k&N)i

以C2C 为发展模式的淘宝网站是一个以功能性为主的网站，将各类型产品、销量好、折扣低、适应季节的产品整合为首页，导航分类细致并且一目了然，为买家提供高效率、针对性强的信息。那么，这全在于淘宝网有自己合理、舒适的布局结构、版式设计，如何设计好网页版式，是我们要思考的问题。

在布局设计中，版式的设计的好坏关键是网页的分栏。网站的页面宽度是相对比较固定的，但是高度是不固定的，所以网站的分栏设计主要取决于栏的排版上。栏一般有两种：横栏打通和竖栏打通。整个页面上，最受注目的位置是上方偏左， 其次是下方偏右，再者是左下方，所以重要的信息应在首要位置，但是为了避免排版内容的单一，可以保持风格一致的前提下，统一中求变，或变中求一。同时，在排版设计上，要注重版面率，即版面中文字与版面总面积之比。版面率高，会页面会显得杂乱拥挤，不好看也不好用；版面率低，会使页面的内容信息相对少，用户阅读不便。所以在设计时要根据不同性质的网站，以及网站的内容和功能，来确定适当的版面率，同时要对网页的空白处进行合理设计，可以添加文字和图片，使整个页面大方美观。中国论文网 x;zUO*@!J }

2.2 视觉效果

从美观上而言，淘宝网以它的版式、色彩和文字传递给人们的是一种亲切、温和而且友好的感觉。淘宝网所采取的基调相对比较简洁明快，以白色为背景，字体颜色以黑色为主，特殊类别的商品，以彩色显示，这样界面看上去非常清晰，消费者可以很快找到各种宝贝分类，购买所需商品；同时，页面版块比例适中，通过图片、图标表达产品信息，以其独特的网页特点吸引了无数的客户。所以，任何一个网站，能使浏览者愿意在页面多停留，愿意点击页面内容，那么就要从多方面来考虑视觉效果的设计。

（1）网站风格定位

要统一网站界面风格，要么简单，要么时尚，要么深沉，要么充满活力，每个类型的网站要定位自己的网站主题，这样才能更好地设计网页内容，寻找相应素材。

（2）尺寸要求中国论文网5axfD}3E

成功的网站，必然有一套成功的设计规范，包括网站的尺寸、色彩、文字等诸多视觉要素。在尺寸上，要适应社会发展需求，适应显示器的显示效果，现多采用大屏幕尺寸，且设计时页眉多采用铺满整屏。在分栏的宽度比例上，要根据具体情况而定，一般两栏与三栏较多，两栏简洁明了，三栏信息内容大，但是整体页面宽度不得超过1000 像素，太宽、太窄都不适应社会显示器发展趋势，不能被社会公众所认可。

（3）色彩设计

在整个页面设计中，最关键最困难的是色彩的选取与搭配，整个网站的色彩要表达，要体现网站形象和风格，这需要设计人员在设计过程中不断学习的内容。据研究机构研究表明，彩色网页更吸引人的注意，通常是黑白网页的3.5 倍。通常在设计网页时，文字内容采用非彩色显示，其他元素使用彩色，这样浏览者在浏览网页时可以快速找到信息，而网页也显得相对丰富。中国论文网,c
Y%PmCN&d%@

（4）图标设计

图标在网页中可以清晰地表达现信息，在生活中也很常见并且常用，可以帮助浏览者快速识别并记忆。也可采用图片来做图标，网页中多采用gif 和jpeg 格式图片，现也有很多使用png 格式的，但图标不可过多使用，且图标之间的风格要保持一致，不可乱用。

（5）文字设计中国论文网4} h0d|:S
mb

文字是整个页面中的主要内容，文字的可读性要好，这样才能具有使用性。中文网的文字大小一般采用12 或者14 像素，黑色，宋体，这样表达出来简洁，易于读者获取信息，为了强调区别性，要以采用个别文字为加粗或彩色。文字的多少有网站的特性决定。例如淘宝网以销售为主，为了更多显示销售内容，则文字不宜太大，且易读。中国论文网9E#h9Wi M/R

视觉效果还包括导航、LOGO、链接等，不同网站视觉效果设计可根据具体需求而定。中国论文网BS{I*Dl

3 网站源码设计

现在流行的网站标准布局常用的是DIV+CSS 技术，区别于网页设计中的表格布局定位方式，真正达到了w3c（World Wide Web Consortium）技术，即内容与表现相分离。淘宝网采用的就是这样的开源结构，可以自由更新内容，包括样式的改变， 页面语言采用XHTML 标准化语言，符合社会技术潮流。

使用DIV+CSS 标准布局页面，应遵循规则是符合国际标准W3C。采用这种标准的好处是：

（1）微软公司均是W3C 的支持者，而我们基本都采用微软系统，用这种布局方式不会因为软件系统的升级而被淘汰。

（2）支持浏览器向后兼容，浏览器不管如何发展，都能很好地兼容。中国论文网e7pE'jX:OS:{F

（3）可以方便地调整样式。内容和样式相对分离，页面和样式调整则方便很多。

（4）CSS 代码相对简洁，图片设计采用固定标准，对大型网站可以节省带宽， 浏览更快。

（5）表现和结构分离，易于团队分工， 减少相互关联性，团队间可以方便合作。中国论文网iU!JqMrd/B

4 结束语中国论文网0}WO"Ymn

特色鲜明的web 网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者。网页设计者要清楚的了解网站的背景，体现主题和服务对象的基本情况，选择适当的表现手法，展示关键信息和特色内容，形成了鲜明独特的风格，这样才能设计出优秀的网站，吸引浏览者。中国论文网KUq}z AU)Qy5q

【参考文献】

[1] 陈炜. 静态网页界面设计[J]. 浙江经贸职业技术学院.2011

[2] 李艳. 网站界面的版式设计与美化[J]. 漳州职业技术学院学报.2009. 中国论文网QwQh|-t'S*ee+E2S

[3]http://wenku.baidu.com 中国论文网)Na0Yk4F5E'oV