CN104461580A - 一种Web用户界面实现方法 - Google Patents

Abstract

本发明公开了一种Web用户界面实现方法，包括以下几步：采用AJAX选择页面框架并利用图片编辑工具制作产品用户界面背景图片；制作网页，并将所述背景图片插入至网页中；采用CSS语言为所述页面框架设计至少3套皮肤；采用JavaScript语言获取所述用户界面的源代码和所选择的皮肤文件；将所述页面框架、所述用户界面的源代码和所述皮肤文件上传至服务器端，生成Web前端交互页面。本发明的有益效果为：利用网页设计用户界面，实现用户界面与用户的交互性，提高了用户界面的友好性；通过CSS语言为用户界面提供多套皮肤，增加了美观性及多样性；同时为每套皮肤设计了相应的效果图，使得用户易于辨识，易于实现用户界面的换肤。

Description

一种Web用户界面实现方法

技术领域

本发明涉及计算机应用技术领域，具体而言，涉及一种Web用户界面实现方法。

背景技术

UI的本意是用户界面，是英文User和Interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也常被称为“美工”，这也不是贬义词汇，只不过是传统称呼而已。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。

而Web前端交互页面的制作不同于普通前端页面，不仅需要HTML文件，还需要相关的JS与CSS文件，只有将这三种文件结合使用才能完成完整的前端交互页面。

因此，如何采用简单的技术手段实现丰富的用户界面设计，提高产品与用户的交互性，是目前用户界面设计需要解决的问题。

发明内容

为解决上述问题，本发明的目的在于提供一种设计简单、易于实现、交互性好、美观性强的Web用户界面实现方法。

本发明提供了一种Web用户界面实现方法，其特征在于，包括以下步骤：

步骤1，采用AJAX选择页面框架并利用图片编辑工具制作产品用户界面背景图片；

步骤2，制作网页，并将步骤1中制作好的背景图片插入至所述网页中；

步骤3，采用CSS语言为所述页面框架设计至少3套皮肤，并选择皮肤；

步骤4，采用JavaScript语言获取所述用户界面的源代码和所选择的皮肤文件；

步骤5，将所述页面框架、所述用户界面的源代码和所述皮肤文件上传至服务器端，生成Web前端交互页面。

作为本发明进一步的改进，所述用户界面还包括文字，所述文字在制作背景图片时加入或在制作网页时加入。

作为本发明进一步的改进，每套所述皮肤均包含一个效果图供用户辨识，选择不同的所述效果图进行换肤。

优选的，所述页面框架采用HTML、CSS和JavaScript语言封装。

优选的，所述图片编辑工具为Photoshop。

优选的，所述网页的数据处理采用JavaScript语言实现。

优选的，所述的服务器端采用PHP或Java程序语言。

优选的，所述产品用户界面的浏览器为IE或Firefox或360。

本发明的有益效果为：

1、利用网页设计用户界面，实现用户界面与用户的交互性，提高了用户界面的友好性。

2、通过CSS语言为用户界面提供多套皮肤，增加了美观性及多样性；同时为每套皮肤设计了相应的效果图，使得用户易于辨识，易于实现用户界面的换肤。

附图说明

图1为本发明实施例所述的一种Web用户界面实现方法的流程图；

具体实施方式

下面通过具体的实施例并结合附图对本发明做进一步的详细描述。

如图1所示，本发明实施例所述的一种Web用户界面实现方法，包括以下几个步骤：

步骤1，采用AJAX选择页面框架并利用Photoshop制作产品用户界面背景图片。

步骤2，制作网页，并将步骤1中制作好的背景图片插入至所述网页中。

所述用户界面除了包括上述背景图片外，还包括文字，所述文字在制作背景图片时加入或在制作网页时加入。

在网页制作过程中，插入动画效果。

网页中的数据处理采用JavaScript语言实现。

步骤3，采用CSS语言为所述页面框架设计至少3套皮肤，并选择皮肤。

每套所述皮肤均包含一个效果图供用户辨识，选择其中一个效果图后，即调用对应的皮肤文件，实现换肤。

步骤4，采用JavaScript语言获取所述用户界面的源代码和所使用的皮肤文件。

使用自定义过滤函数将所述用户界面的源代码过滤为符合规则的可用代码并使用JavaScript判断用户当前使用的皮肤文件。

步骤5，将所述页面框架、所述用户界面的源代码和所述皮肤文件上传至服务器端，服务器端使用程序语言PHP或Java在服务器上生成这些文件，最终生成Web前端交互页面。

所述产品用户界面的浏览器为IE或Firefox或360。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种Web用户界面实现方法，其特征在于，包括以下步骤：

步骤1，采用AJAX选择页面框架并利用图片编辑工具制作产品用户界面背景图片；

步骤2，制作网页，并将步骤1中制作好的背景图片插入至所述网页中；

步骤3，采用CSS语言为所述页面框架设计至少3套皮肤，并选择皮肤；

步骤4，采用JavaScript语言获取所述用户界面的源代码和所选择的皮肤文件；

步骤5，将所述页面框架、所述用户界面的源代码和所述皮肤文件上传至服务器端，生成Web前端交互页面。

2.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，所述用户界面还包括文字，所述文字在步骤1中制作背景图片时加入或在步骤2制作网页时加入。

3.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，每套所述皮肤均包含一个效果图供用户辨识，选择不同的所述效果图进行换肤。

4.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，所述页面框架采用HTML、CSS和JavaScript语言封装。

5.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，所述图片编辑工具为Photoshop。

6.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，所述网页的数据处理采用JavaScript语言实现。

7.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，所述的服务器端采用PHP或Java语言。

8.根据权利要求1所述的一种Web用户界面实现方法，其特征在于，所述产品用户界面的浏览器为IE或Firefox或360。