人机交互技术.docx
- 文档编号:18128186
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:16
- 大小:466.89KB
人机交互技术.docx
《人机交互技术.docx》由会员分享,可在线阅读,更多相关《人机交互技术.docx(16页珍藏版)》请在冰点文库上搜索。
人机交互技术
前言
Web界面设计是人机交互界面设计的一个延伸,是人与计算机交互的演变。
Web界面设计与站点外观直接相关,站点的界面外观是否友好直接关系到是否能吸引人的关注。
人性化的设计是Web界面设计的核心,如何根据人的心理、生理特征,运用技术手段,创造简单、友好的界面,是Web界面设计的重点.用来解释Web的人机界面性质的一个模型,它提出网页是用户和知识之间的界面。
对于信息提供者来说包括信息的表达,对于使用者来说则是信息的获取。
信息的表达与获取分别受到两者认知结构的制约。
1、设计题目
《贴吧界面设计》
2、设计结构
本贴吧设计主要是采用HTML设计的静态网页。
界面设计主要设计有三部分:
1)、主体界面。
2)、注册界面。
3)、登录界面。
3、设计内容
1)、主界面主要分为三部分:
a、导航部分:
图3-1导航
该部分主要是向用户介绍,这是属于软件工程的专属贴吧,对用户提供了登录与注册功能,还可对用于进行导航提示功能,其中有的导航模块包含下拉类表部分。
使得用户有更多的选择。
使得用户能够方便的找到所想找的模块。
b、正文部分:
图3-2帖子
该部分用于将本贴吧中所含有的帖子,以及相对应的该贴的回复数目、帖子的标题以及发帖人及发帖时间提示给用户看。
还提供分页按钮,对于用户提供翻页帮助。
c、发帖部分
图3-3发帖
用于贴吧中的用户发帖,在发帖时还可以选择其相对应的主题。
在标题框中输入标题,在文本框中输入主要内容,点击提交即可。
2)
、注册界面
图3-4注册界面
在贴吧的导航部分点击注册,即可跳转到注册界面,对于要入住本贴吧的新用户,进行信息注册。
3)、登录界面
图3-5登录界面
在贴吧的导航部分点击登录,即可跳转到登录界面,进行填写用户名和密码。
进行验证,进而登录本贴吧。
附录网页原代码
1)主界面:
body{margin:
0000;padding:
0000;background-image:
url(back.jpg);
}
#f{margin:
0auto;margin-left:
20px;padding:
0;}
.red{font-size:
18px;font-style:
inherit;color:
#F00;}
.blue{font-size:
16px;font-style:
inherit;color:
#00F;}
.zi{font-size:
16px;font-style:
italic;color:
#C09;}
#aliginput:
focus{background-color:
#99FF33;}
.backcolor{background-color:
#6CF}
#a{background-image:
url(header.jpg)}
#b{margin-top:
20px;margin-left:
20px;}
#head{margin-left:
20px;}
#headul{padding:
0;list-style-type:
none;}
#headli{display:
inline;line-height:
2;}
#headlia{text-decoration:
none;padding:
6px10px;color:
#333;}
.right{float:
right;margin-right:
20px;}
设为首页 收藏本站 关注本站官方微博 手机客户端
精品
#FFF"> center">回复数 center">2 center">158 center">1000 center">50 center">20 还需要参加培训课吗? center">10 center">5 center">40 center">200 center">320 center">150 求把这个改成能在dev 标题 发帖人
! "> ! ">