【人机交互技术】Web界面设计

一、实验目的和要求

1）熟悉 Web 站点的信息交互模型和结构
2）熟悉 Web 界面设计的基本思想和原则
3）掌握 Web 界面设计的工具和技术

二、实验内容与步骤

1）实验内容:
要求根据 Web 界面设计的原则(简洁、一致性、对比度)，进行 Web 界面规划、
概要设计和设计要素的选择，利用一种界面设计工具(Axure/HTML5/Dreamweaver
/ Frontpage)完成网页设计。
2）实验步骤：
选择工具： AXURE8.0
**实现内容：**电商网站界面设计，包括首页、商品查询页、商品详情页、购物车、订单支付页的设计。

三、详细界面设计

1.设计原则
**以用户为中心：**在本电商网站页面中，界面元素设计符合用户的使用习惯，如二级菜单，点击商品图片跳转详情界面等；
**一致性：**在本电商网站页面中，网站的颜色以蓝色、红色、黄色为主基调、辅助以灰色和绿色；网站字体为黑体，根据标题、信息、按键等功能不同分为20、18、16、13号，界面中的矩形框均采用10像素的半径；
**简洁明确：**在本电商网站页面中，网站层次简介明确，实现一种功能点击次数少；
**体现特色：**在本电商网站页面中，商品信息为本网站的主要内容，可以使使用者清楚的了解网站的用途；
**兼顾不同的浏览器：**使用AXURE进行网站设计，暂时没有兼顾到这一点；
**明确的导航设计：**在主页、商品详情、查询、购物车、结算页面都涉及了导航菜单栏。 2.整体布局
采用“三”字形布局。
3.整体界面：
首页：
操作入口明确，搜索框只有一个：
登陆、退出只有一个入口：
用户可以根据自身情况选择合适的语言，设有顶部导航栏，悬浮显示子菜单：

多语言界面：

当页面运行时，点击轮播图可进行切换：

鼠标悬浮时出现切换按钮：

鼠标悬浮时显示分类信息：

分类信息悬浮时可以显示下划线、变色：

商品信息悬浮变色：

查询页：

满足可及原则：
视力障碍人士也可以使用：


用户输入信息不正确时可以进行提示：

突出重点，大图显示图片，字体较小：

鼠标悬停变色：

鼠标按下时按钮变色：

商品详情页：

导航标签明晰有效，用户可根据导航条定位自己所在位置：

可以进行店内搜索：

购物车页，简洁清晰，通俗易懂：

当商品数量较多时，可对购物车内物品进行查询：

购物车中有商品的详细信息，并可以加购商品：

支付页：

可以显示当前购物进度：

可以挑选配送地址和支付方式：

可以计算商品总额并且还可以进行加购：

最后生成一个简明的订单信息：