《人机交互界面设计人机交互与界面设计212人机交互基本概念课件.ppt》由会员分享，可在线阅读，更多相关《人机交互界面设计人机交互与界面设计212人机交互基本概念课件.ppt（85页珍藏版）》请在三一办公上搜索。
1、,汪彩霞,人机交互界面设计,交互,设计,界面交互设计？,交互设计+视觉设计=界面设计,功能、流程、逻辑,形状、色彩、质感,好用,好看,1.2界面设计,1.2.3 Web界面设计原则,1.2.1 Web界面设计原则1.2.2 Web界面要素设计1.2.3 界面设计目的与策划,1.2.3 Web界面设计原则,以用户为中心一致性简洁与明确体现特色兼顾不同的浏览器良好的导航设计,1 以用户为中心的设计原则,把用户放在第一位，重点考虑用户的需求。既考虑用户的共性，又考虑用户之间的差异性；不同类型的Web网站，访问群体不同；同一类型的Web网站，用户群也存在年龄、行业差别。网站示例1 针对女性的网站尽量选
2、用柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面构成上，可选用大量清晰度高的图片做视觉冲击。网站示例2 针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成。,1 以用户为中心的设计原则,网站示例3针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象。网站示例4针对老年人的网站，应考虑采用较大的字体，直截了当的信息显示和简单的浏览方式。考虑目标用户的行为方式。行为方式是人们由于年龄、性别、地区、种族、生活习俗、职业、受教育程度等形成的动作习惯、办事方法。行为方式直接影响人们对网站的操作使用，是设计者需要加以考虑和利用的因素。,8,9,10,2 一致性原则,Web界面的
3、内容和形式应一致。内容包括：网站显示的信息，如数据、文字内容等。形式包括：Web界面设计的版式、构图、布局、色彩、风格等。网页的形式为内容服务，不同内容的网页用不同的设计形式。,2 一致性原则,Web界面自身的风格应一致。网站标识及页面设计标准确定后，应运用到每个页面上。每个页面都使用相同的页边距；文本、图形之间保持相同的间距；主要图形、标题或符号旁边留下相同的空白；若使用图标导航，则各个界面应当使用相同的图标；页面上的每个元素要与整个页面的设计风格一致；文字的颜色应和图像的颜色保持一致，并注意色彩搭配的和谐。,14,15,16,3 简洁与明确原则,保持简洁的常用做法是使用醒目的标题，通常标题
4、采用图形来表示；限制所用的字体和颜色的数目；界面上所有的元素都有明确的含义和用途；界面上每一个元素都能让浏览者看到；,3 简洁与明确原则,3次点击原则：通常情况下，访问者应该最多通过3次点击就能在网站上找到想要的信息。主页的访问率为100人次的情况下，下一页的访问率会降到30-50人次。有时需要打破3次点击原则。比如电子商务网站，用户可能需3次以上点击才能找到想要的商品。如果一定遵循3次点击原则，可能造成一个页面上必须面对大量的可选商品，这会使用户感到困惑，甚至索性什么都不买。,19,20,21,4 体现特色的原则,特色鲜明的网站更容易在一瞬间打动它的浏览者，留下令人心动的第一印象；应清楚We
5、b网站用户的基本情况，从而在网站设计时做到有的放矢，呈现关键信息；利用逻辑结构有序组织、开发页面设计原型，通过测试和逐步精炼，形成网站的明确特点。,23,24,25,5 兼顾不同浏览器的原则,网站的浏览者可能使用不同类型和版本的浏览器。opera浏览器，火狐浏览器（Firefox），Safari，谷歌浏览器（ Chrome ）等；IE浏览器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示。根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站。,6 明确的导航设计
6、的原则,导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站。Web导航应该帮助用户理解他们在哪里、他们能去哪里、他们怎样获得其他信息。好的导航系统可以使用户以一种满意的方式找到需要的信息。导航系统的设计应从使用者的角度出发，力争简便、清晰和完整一致。,28,29,30,1.2.4 Web界面要素设计,1.2.1 Web界面设计原则1.2.2 Web界面要素设计1.2.3 界面设计目的与策划,我们要设计怎样的界面，并以何种形式完成它？,要回答好这一问题，我们就必须明确：,网站建设的目的,网站信息的内容,我们还是以网站为例：,网站设计形式,1.2.4 Web界面要素设计,1.2.4 Web
7、界面要素设计,Web界面规划文化与语言内容设计Web界面布局Web界面色彩Web界面的文本设计Web界面的动画与多媒体Web界面上的导航,1 Web界面规划,明确网站的目标和用途；网页布局、元素设计应以网站的目标为中心，从各方面表现站点的目标；在制定建立站点的目标时，应将站点作为一种文化、一种艺术来看，力求在设计Web页面时追求艺术效果与美感；确定了Web页面设计目标后，需要确定Web网站的用户群体，进行以用户为中心的设计，既考虑用户的共性，又考虑用户的差异。,2 文化与语言,全球服务型的网站应考虑不同国家的不同类型的文化与语言环境。Google的中文网站、百度网站通过图片体现中国的传统节日。
8、外交部网站、Nvidia（英伟达）网站提供多种语言。当网站有多种语言版本时，应考虑不同的文化背景。阿拉伯语的书写方式为从右向左。,2 文化与语言,阿拉伯语的书写方式为从右向左。不同国家和地区适用的颜色可能不同，不同地区的网页内容应符合该地区的货币单位、时间格式等习惯。不同语言文字的结构不同，在设计页面布局时需要分别考虑。表达同样含义的语句，通常德语语句的长度大于英语语句，英语语句的长度大于汉语语句。,37,38,39,40,41,3 内容设计,Web界面的内容要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。面向消费者的网站应使用通俗的词汇、引人注目的广告方式、个性化并有趣味性的语言
9、。面向专业人员的网站应使用科学、严谨、准确的词语和表达方式，避免可能造成的任何误解。,4 Web界面布局,布局设计应做到布局合理、有序、整体化。常用Web页面布局的形式：“口”字形布局左右结构布局上下结构布局封面型布局自由式布局,4 Web界面布局,“口”字形布局页面顶部为网站的标题、横幅广告条以及网站的导航等；网页的左右分列两小条内容，中间是主要部分；网页的最下面是一些基本信息，如：联系方式、版权声明等；这种布局是使用最多的一种布局。,45,46,47,4 Web界面布局,左右结构布局Web页面的顶部有标题或者无标题，页面的主要部分分为左右两部分，一般左面是导航链接，右面是正文。论坛多采用这
10、种结构；企业网站也常采用这种结构。优点：结构清晰、一目了然。,4 Web界面布局,上下结构布局Web页面的最上面是标题，下面是正文。新闻发布系统、内容介绍页面或注册页面等多用这种类型。,4 Web界面布局,封面型布局多出现在网站的首页；通过精美的平面设计结合动画，给人带来赏心悦目的感觉；页面上通常仅包含简单的链接或没有任何提示；常出现在企业网站和个人主页中。,4 Web界面布局,自由式布局是上述几种类型的结合和变化,4 Web界面布局,使用什么样的布局没有固定的模式，需要具体情况具体分析；内容较多时，可以考虑“口”字形结构的布局；如果介绍的主题较单一时，可以考虑上下结构布局；如果想展示企业形象
11、或个人主页想要展示个人风采，可以考虑封面型布局。,5 Web界面色彩,网站给人的第一印象来自视觉的冲击，颜色元素在网站的感知和展示上扮演着重要的角色。企业或个人的风格、文化和态度可以通过网页中的色彩混合、调整或者对照的方式体现出来，因此确定网站的标准色彩很重要。不同的色彩搭配可以产生不同的效果，并可能影响到访问者的情绪。,5 Web界面色彩,色彩理论中红、绿、蓝为三原色；其它的色彩可以通过三原色调和而成；HTML语言中的色彩表达使用三原色的数值（RGB）来表示。颜色分为彩色和非彩色；非彩色指黑、白、灰；彩色是指除了非彩色以外的所有色彩。专业机构的研究表明：彩色的记忆效果是黑白的3.5倍。,5
12、Web界面色彩,网站的标准色彩一般不超过3种。标准色彩主要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉；其它色彩作为点缀和衬托，不能喧宾夺主。应避免使用可能有文化禁忌的颜色，以及会给色盲用户带来问题的颜色。在新加坡红、绿、蓝色很受欢迎，视紫色、黑色为不吉利，黑、白、黄为禁忌色；捷克、斯洛伐克： 红、蓝、白是积极的，黑色视为带有消极的含义。,5 Web界面色彩,网站的色彩搭配应考虑如下原则：色彩的鲜明性：网站的色彩要鲜明，容易引人注目色彩的独特性：与众不同的色彩，使得用户对网页的印象深刻色彩的适合性：色彩和网页要表达的内容气氛相适合色彩的联想性：不同色彩会产生不同的联想，选择色彩要
13、和网页的内涵相关联蓝色想到天空黑色想到黑夜红色想到喜事,6 Web界面的文本设计,文本不要太多，以免转移浏览者注意力。要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。选择的字体应和整个界面融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。,6 Web界面的文本设计,通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样
14、性，字形的变化修饰则更为丰富。,如：以方正字体为例，栏目标题是大黑体、文章标题是超粗黑体、正文是平黑体。,一般情况下，页面中的字体不要超过三种，如果希望有更多变化，应尽量采用字体相同的字族。,6 Web界面的文本设计,60,61,字体设计在商业美术设计领域，属于较难的课题，它是图形设计的一支。,在界面设计中，不需要设计者擅长字体设计，但是其应该掌握字体的使用原则。,信息之文字,标志及口号性标语,信息之文字,7 Web界面动画与多媒体,图形、图像、动画、音频和视频等多媒体元素可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更
15、生动，而且有吸引力。在设计动画和多媒体元素时需要考虑带宽以及浏览器的支持能力。丰富的多媒体展现形式可以增强Web界面的艺术性和趣味性，但是过多的使用多媒体元素会降低浏览速度，影响访问效果和质量。,初稿方案,定稿方案,http:/,8 Web界面上的导航,对于Web站点来说，需要包含导航条，用户利用导航的提示在信息的空间中移动。真实世界的导航观点在Web中常被采用。Web导航应该帮助用户理解他们在哪里、可以去哪里、怎样获得想要的东西。导航的设计应充分考虑可见性、标记和导航元素的布局。,8 Web界面上的导航,Web页上仅有五个基本区域可放置导航元素：顶部底部左侧右侧中央,讨论,找两个自己熟悉的商
16、业网站，总结其在设计上的5条优点，根据自己的使用习惯，提出该网站可以进一步改进的地方。,1.2.5 界面设计目的与策划,1.2.1 Web界面设计原则1.2.2 Web界面要素设计1.2.3 界面设计目的与策划,目的与策划,如果我们要对网站进行界面设计，就必须先明确建设网站的原因。如：,建立网站是为了销售产品，还是进行商业服务。,你的目标用户是谁，他们能从你的网站上得到什么。,你想从网站中获得怎样的回报。,即使目标相似，具体的设计方案也会根据客户的不同情况而有所差别，这些差别反映出网站的特殊性。,1.2.5 界面设计目的与策划,目的与策划,明确目标的过程，就是找出客户的优势、特色和行销方式的过
17、程。,如果客户并不知道提供什么资料比较好，设计师可以问以下几个问题来引导客户。,1.2.5 界面设计目的与策划,目的与策划,问题1：你要建设网站的目的是什么？,参考答案：,为业务、服务做广告。,电子商务、销售产品。,事业宣传，文化、观点传播。,为供求双方建立平台式网站。,提供公益服务。,这个问题能够确定网站媒体的属性，答案多为多选。,1.2.5 界面设计目的与策划,目的与策划,问题2：你设想中的网站规模是多大？,参考答案：,很小，现有的资料能放下就行，以后很少添加新内容。,从最小的规模开始，然后逐步扩大，最终网站内容是全面而丰富的。,相当复杂，栏目众多。,资源丰富，更新快，积累快。,不太好说将
18、来怎么发展，走着看的。,1.2.5 界面设计目的与策划,目的与策划,问题2：你设想中的网站规模是多大？,网站的规模将决定网站设计时选择怎样的框架结构。,如果网站更新快，积累快，框架设计就要针对未来加入的信息多做一些保留，结构要灵活一些。,如果网站内容多，就很容易想到使用竖分栏式结构。,1.2.5 界面设计目的与策划,目的与策划,问题3：目标用户的统一特征是什么？或者说，谁在看？,参考答案：,分销商或是终端用户。,15-20岁之间的青少年或是20-30岁的青年。,收入在5000元左右的灰领或是万元收入以上的白领。,艺术院校的学生或是艺术爱好者。,男性浏览者居多或是女性居多。,只是给我客户公司的负
19、责人看的，但都是外国人。,1.2.5 界面设计目的与策划,目的与策划,这个问题非常重要，它决定了网站的定位，也决定了是否能将正确的信息传递给正确的人。,1.2.5 界面设计目的与策划,目的与策划,问题4：网站的收入来源是哪几个部分？,参考答案：,我不靠网站本身赚钱，仅仅是给国外的客户看，他们需要的话就会下订单。,网站广告、在线游戏。,浏览者可直接在网站上购物，这就是主要来源。,我的网站卖的是信息，VIP会员可以看到更多的东西。,网站没有收入，求个存在感。,1.2.5 界面设计目的与策划,目的与策划,问题4：网站的收入来源是哪几个部分？,这个答案可以帮助设计师了解客户对于网站的期望值有多高。是否
20、需要在可以创收的环节上多下功夫。,1.2.5 界面设计目的与策划,目的与策划,问题5：关于网站实现的技术，你的想法是怎样的？,参考答案：,全FLASH实现的，我就要这个派头。,不需要程序，留言本都不需要，全HTML就够了。,先是FLASH欢迎界面，里面是静态的，或者小的动画点缀一下。,三维360度，展示产品，FLASH动画做产品导读。,局部用PHP、ASP或其它动态程序生成。,1.2.5 界面设计目的与策划,目的与策划,问题6： 网站的设计风格上，你有什么要求？,参考答案：,比较现代、有时代感，比较大气就行。,专业、严谨、内容丰富。,活泼的，颜色鲜艳的，像水果糖,我不喜欢蓝色，你不用蓝色就可以了,我希望“眼前一亮”,1.2.5 界面设计目的与策划,目的与策划,同样的词语，每个人的理解不一定相同。,“眼前一亮”究竟指的是什么？,1.2.5 界面设计目的与策划,目的与策划,小练习,针对给定的素材设计一个对应的手机版网页。要求：直接用div+css表达主要内容，包括色彩、文字、图片等布局，网页特效部分暂不考虑。大小： android 480* 800Iphone 640 * 960,目的与策划,提示,手机端网页在head里加入下面这条元标签，在手机的浏览器中页面将以原始大小显示，并不允许缩放。 ,
