人机交互实验报告
课题 Web界面设计 姓名 邵周灿
班级 软件1303 学号 131407310
指导老师 陈斌
一 、实验目的和要求
1) 熟悉Web站点的信息交互模型和结构
2)熟悉Web界面设计的基本思想和原则
3)掌握Web界面设计的工具和技术
二、实验内容
要求根据Web界面设计的原则(简洁、一致性、对比度)，进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。
三、实验环境
Windows7操作系统
FrontPage网页设计工具
四、预习准备
(1) Web信息交互模型
用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。
模型涉及到信息的三种类型
1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。
2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。
3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。
模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性；
2)一致性：信息元素的组织方式具有一致性
(2)Web信息设计模型
是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面：1)第一是应该呈现或略去什么信息。
2)第二个方面指的是信息该如何被表现。
(3)Web界面设计基本原则
1) 了解浏览者的心理状态
2) 内容与形式的统一
3) 减少浏览层次
4) 特点明确
5) 统一整体的形象
6) Web界面设计的3C原则
(4)Web界面概要设计
1)Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实施
2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格
3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究
(5)Web界面设计要素
???Web界面布局
???Web界面的色彩
???Web界面的字体
???Web界面的动画与多媒体
???Web界面的导航
五、实验步骤
1)选择一种界面设计工具，并熟悉它；
2）针对一个具体的网站（学校、个人、公司）设计应用，如个人博客或学校、部门网页，进行Web界面规划和概要设计；
3）选择WEB界面设计要素，设计出网页
六、实验结果
建立超链接
登录注册
首页
第二篇：Web UI 网站用户界面设计命名规范
Web UI 网站用户界面设计命名规范 WEB UI设计命名规范，也就是网站用户界面设计(网页设计)命名规范。 这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。
许多美工设计效果图源文件没有对图层命名的习惯，而网上大多命名规范都是关于css、html、js和一些服务器端语言的，设计方面的命名规范很 少。设计师也是技术团队的成员，而前端开发工程师需要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。 WEB UI设计命名规范
一.网站设计及基本框架结构:
1. Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2. Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5. Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:
第二级结构图例(医院网站
):
第三级结构图例及效果图对比(医院新闻栏目)：
效果图
图层命名结构
四．常用命名汇总: 页头:header 登录条:loginbar 标志
:logo
侧栏:sidebar 广告条:banner 导航:nav
子导航:subNav 菜单:menu
子菜单:subMenu 下拉菜单:dropMenu 工具条: toolbar 表单:form 栏目:column 箭头:arrow 搜索:search
搜索按钮:btn-search 滚动条:scroll 内容:content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 链接:links 页脚:footer 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote
合作伙伴:partner 版权:copyright 网站地图: sitemap