基于淘宝网的网站界面设计研究
2022-06-09
【文章摘要】
随着互联网技术的飞速发展，网络购物已经是现代社会人们购物的主要方式之一，淘宝网是众多网购网的代表。本文以淘宝网为例，从网站的整体布局设计、视觉形象设计，以及源码设计方面来论述网站界面在设计时要注重的要点，阐明了网站界面的设计要符合社会技术的发展，符合以人为本的的设计思想，这样才能设计出更好的网站，使网站设计技术更长久地发展下去。
【关键词】
网站界面；整体布局；视觉形象；源码设计
互联网起源于国外，在中国的发展也不过数年，所以无论在理念还是技术上， 国外的网站界面设计相对成熟一些。由于在国内信息技术领域，网页界面设计技术也长期处于几乎被边缘化的状态，网页设计师也被称为“美工”，并没有得到实际的重视发展，所以到目前为止，国内的网站界面与欧美、日韩还有一定的差距。实际上，网站界面设计属于网络和设计的交叉学科，它以网络为载体，把各种信息以方便、快捷、美观的形式表达给网站的浏览者，网站的类型也有多种，有政府网、企业网、娱乐休闲网、购物网、门户类网等，各种成功的网站都有其自身的设计风格，设计理念，淘宝网是其中比较成功的购物网站，它的成功有其多方面因素，为其他网站设计起到了一定的推动作用。
1 以人为本的设计理念
淘宝网是典型的用户体验设计（UED）购物网，在淘宝网的首页，用户可以通过搜索直接找到所需购买的物品的商店，也可浏览左侧的商品服务分类，找到对应的商店，方便快捷。用户的身份是何类型的人， 有新客户，有老客户，不管是哪一类用户，都要倾注于用户应该如何执行任务，操作时要简单、易懂、易操作，而不是聚焦用户偏好如何执行。这充分体现了“用户化”特色，即以人为本的设计理念。
以用户为导向型的网站设计方法，是目前界面设计领域使用最普遍的的方法， 而且也是最主要的方面。以用户为中心的设计（UCD），是在进行界面设计时从用户的需求和用户的感受出发，围绕用户为中心进行设计，在设计时要考虑用户的使用习惯、交互方式和视觉感受。这是网站界面设计的必然前提，所以，个人在设计界面时，最重要的前提就是以人为本的基本原则。
2 合理布局
网站布局是美学感官和功能性的结合，是整个设计过程中内容与形式的体现，页面布局主要从版式布局和视觉效果两方面来进行考虑。
2.1 版式布局
以C2C 为发展模式的淘宝网站是一个以功能性为主的网站，将各类型产品、销量好、折扣低、适应季节的产品整合为首页，导航分类细致并且一目了然，为买家提供高效率、针对性强的信息。那么，这全在于淘宝网有自己合理、舒适的布局结构、版式设计，如何设计好网页版式，是我们要思考的问题。
在布局设计中，版式的设计的好坏关键是网页的分栏。网站的页面宽度是相对比较固定的，但是高度是不固定的，所以网站的分栏设计主要取决于栏的排版上。栏一般有两种：横栏打通和竖栏打通。整个页面上，最受注目的位置是上方偏左，其次是下方偏右，再者是左下方，所以重要的信息应在首要位置，但是为了避免排版内容的单一，可以保持风格一致的前提下，统一中求变，或变中求一。同时，在排版设计上，要注重版面率，即版面中文字与版面总面积之比。版面率高，会页面会显得杂乱拥挤，不好看也不好用；版面率低，会使页面的内容信息相对少，用户阅读不便。所以在设计时要根据不同性质的网站，以及网站的内容和功能，来确定适当的版面率，同时要对网页的空白处进行合理设计，可以添加文字和图片，使整个页面大方美观。
2.2 视觉效果
从美观上而言，淘宝网以它的版式、色彩和文字传递给人们的是一种亲切、温和而且友好的感觉。淘宝网所采取的基调相对比较简洁明快，以白色为背景，字体颜色以黑色为主，特殊类别的商品，以彩色显示，这样界面看上去非常清晰，消费者可以很快找到各种宝贝分类，购买所需商品；同时，页面版块比例适中，通过图片、图标表达产品信息，以其独特的网页特点吸引了无数的客户。所以，任何一个网站，能使浏览者愿意在页面多停留，愿意点击页面内容，那么就要从多方面来考虑视觉效果的设计。
（1）网站风格定位
要统一网站界面风格，要么简单，要么时尚，要么深沉，要么充满活力，每个类型的网站要定位自己的网站主题，这样才能更好地设计网页内容，寻找相应素材。
（2）尺寸要求
成功的网站，必然有一套成功的设计规范，包括网站的尺寸、色彩、文字等诸多视觉要素。在尺寸上，要适应社会发展需求，适应显示器的显示效果，现多采用大屏幕尺寸，且设计时页眉多采用铺满整屏。在分栏的宽度比例上，要根据具体情况而定，一般两栏与三栏较多，两栏简洁明了，三栏信息内容大，但是整体页面宽度不得超过1000 像素，太宽、太窄都不适应社会显示器发展趋势，不能被社会公众所认可。
随着互联网技术的飞速发展，网络购物已经是现代社会人们购物的主要方式之一，淘宝网是众多网购网的代表。本文以淘宝网为例，从网站的整体布局设计、视觉形象设计，以及源码设计方面来论述网站界面在设计时要注重的要点，阐明了网站界面的设计要符合社会技术的发展，符合以人为本的的设计思想，这样才能设计出更好的网站，使网站设计技术更长久地发展下去。
【关键词】
网站界面；整体布局；视觉形象；源码设计
互联网起源于国外，在中国的发展也不过数年，所以无论在理念还是技术上， 国外的网站界面设计相对成熟一些。由于在国内信息技术领域，网页界面设计技术也长期处于几乎被边缘化的状态，网页设计师也被称为“美工”，并没有得到实际的重视发展，所以到目前为止，国内的网站界面与欧美、日韩还有一定的差距。实际上，网站界面设计属于网络和设计的交叉学科，它以网络为载体，把各种信息以方便、快捷、美观的形式表达给网站的浏览者，网站的类型也有多种，有政府网、企业网、娱乐休闲网、购物网、门户类网等，各种成功的网站都有其自身的设计风格，设计理念，淘宝网是其中比较成功的购物网站，它的成功有其多方面因素，为其他网站设计起到了一定的推动作用。
1 以人为本的设计理念
淘宝网是典型的用户体验设计（UED）购物网，在淘宝网的首页，用户可以通过搜索直接找到所需购买的物品的商店，也可浏览左侧的商品服务分类，找到对应的商店，方便快捷。用户的身份是何类型的人， 有新客户，有老客户，不管是哪一类用户，都要倾注于用户应该如何执行任务，操作时要简单、易懂、易操作，而不是聚焦用户偏好如何执行。这充分体现了“用户化”特色，即以人为本的设计理念。
以用户为导向型的网站设计方法，是目前界面设计领域使用最普遍的的方法， 而且也是最主要的方面。以用户为中心的设计（UCD），是在进行界面设计时从用户的需求和用户的感受出发，围绕用户为中心进行设计，在设计时要考虑用户的使用习惯、交互方式和视觉感受。这是网站界面设计的必然前提，所以，个人在设计界面时，最重要的前提就是以人为本的基本原则。
2 合理布局
网站布局是美学感官和功能性的结合，是整个设计过程中内容与形式的体现，页面布局主要从版式布局和视觉效果两方面来进行考虑。
2.1 版式布局
以C2C 为发展模式的淘宝网站是一个以功能性为主的网站，将各类型产品、销量好、折扣低、适应季节的产品整合为首页，导航分类细致并且一目了然，为买家提供高效率、针对性强的信息。那么，这全在于淘宝网有自己合理、舒适的布局结构、版式设计，如何设计好网页版式，是我们要思考的问题。
在布局设计中，版式的设计的好坏关键是网页的分栏。网站的页面宽度是相对比较固定的，但是高度是不固定的，所以网站的分栏设计主要取决于栏的排版上。栏一般有两种：横栏打通和竖栏打通。整个页面上，最受注目的位置是上方偏左，其次是下方偏右，再者是左下方，所以重要的信息应在首要位置，但是为了避免排版内容的单一，可以保持风格一致的前提下，统一中求变，或变中求一。同时，在排版设计上，要注重版面率，即版面中文字与版面总面积之比。版面率高，会页面会显得杂乱拥挤，不好看也不好用；版面率低，会使页面的内容信息相对少，用户阅读不便。所以在设计时要根据不同性质的网站，以及网站的内容和功能，来确定适当的版面率，同时要对网页的空白处进行合理设计，可以添加文字和图片，使整个页面大方美观。
2.2 视觉效果
从美观上而言，淘宝网以它的版式、色彩和文字传递给人们的是一种亲切、温和而且友好的感觉。淘宝网所采取的基调相对比较简洁明快，以白色为背景，字体颜色以黑色为主，特殊类别的商品，以彩色显示，这样界面看上去非常清晰，消费者可以很快找到各种宝贝分类，购买所需商品；同时，页面版块比例适中，通过图片、图标表达产品信息，以其独特的网页特点吸引了无数的客户。所以，任何一个网站，能使浏览者愿意在页面多停留，愿意点击页面内容，那么就要从多方面来考虑视觉效果的设计。
（1）网站风格定位
要统一网站界面风格，要么简单，要么时尚，要么深沉，要么充满活力，每个类型的网站要定位自己的网站主题，这样才能更好地设计网页内容，寻找相应素材。
（2）尺寸要求
成功的网站，必然有一套成功的设计规范，包括网站的尺寸、色彩、文字等诸多视觉要素。在尺寸上，要适应社会发展需求，适应显示器的显示效果，现多采用大屏幕尺寸，且设计时页眉多采用铺满整屏。在分栏的宽度比例上，要根据具体情况而定，一般两栏与三栏较多，两栏简洁明了，三栏信息内容大，但是整体页面宽度不得超过1000 像素，太宽、太窄都不适应社会显示器发展趋势，不能被社会公众所认可。