Web界面设计原则.pptVIP

Web界面设计原那么主讲教师：范艳芳Email：

Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面的外观是否友好直接关系到Web站点能否吸引用户。人性化的设计是Web界面设计的核心。如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。Web界面设计人机交互与界面设计课程2

以用户为中心一致性简洁与明确表达特色兼顾不同的浏览器良好的导航设计Web界面设计原那么人机交互与界面设计课程3

把用户放在第一位，重点考虑用户的需求。既考虑用户的共性，又考虑用户之间的差异性。不同类型的Web网站，访问群体不同；同一类型的Web网站，用户群也存在年龄、行业差异。针对女性的网站尽量选用柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面构成上，可选用大量清晰度高的图片做视觉冲击。针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成。针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象。针对老年人的网站，应考虑采用较大的字体，直截了当的信息显示和简单的浏览方式。考虑目标用户的行为方式。行为方式是人们由于年龄、性别、地区、种族、生活习俗、职业、受教育程度等形成的动作习惯、办事方法。以用户为中心的设计原那么人机交互与界面设计课程4

人机交互与界面设计课程5

6人机交互与界面设计课程

7人机交互与界面设计课程

8人机交互与界面设计课程

9人机交互与界面设计课程

10人机交互与界面设计课程

11人机交互与界面设计课程

12人机交互与界面设计课程

13人机交互与界面设计课程

14人机交互与界面设计课程

Web界面的内容和形式应一致。内容包括：网站显示的信息，如数据、文字内容等。形式包括：Web界面设计的版式、构图、布局、色彩、风格等。网页的形式为内容效劳，不同内容的网页用不同的设计形式。一致性原那么人机交互与界面设计课程15

Web网站标识及页面设计标准确定后，应运用到每个页面上。每个页面都使用相同的页边距；文本、图形之间保持相同的间距；主要图形、标题或符号旁边留下相同的空白；假设使用图标导航，那么各个界面应当使用相同的图标；页面上的每个元素要与整个页面的设计风格一致；文字的颜色应和图像的颜色保持一致，并注意色彩搭配的和谐。一致性原那么〔续〕人机交互与界面设计课程16

17人机交互与界面设计课程

18人机交互与界面设计课程

19人机交互与界面设计课程

保持简洁的常用做法是使用醒目的标题；限制所用的字体和颜色的数目；界面上所有的元素都有明确的含义和用途；三次点击原那么：通常情况下，访问者应该最多通过三次点击就能在网站上找到想要的信息。主页的访问率为100人次的情况下，下一页的访问率会降到30-50人次。简洁与明确原那么人机交互与界面设计课程20

21人机交互与界面设计课程

22人机交互与界面设计课程

23人机交互与界面设计课程

特色鲜明的网站更容易在一瞬间打动它的浏览者，留下令人心动的第一印象；应清楚Web网站用户的根本情况，从而在网站设计时做到有的放矢，呈现关键信息；利用逻辑结构有序组织、开发页面设计原型，通过测试和逐步精炼，形成网站的明确特点。表达特色的原那么人机交互与界面设计课程24

25人机交互与界面设计课程

26人机交互与界面设计课程

27人机交互与界面设计课程

28人机交互与界面设计课程

29人机交互与界面设计课程

30人机交互与界面设计课程

网站的浏览者可能使用不同类型和版本的浏览器。IE浏览器，opera浏览器，火狐浏览器〔Firefox〕，Google浏览器〔GoogleChrome〕，搜狗浏览器等；IE浏览器的版本：IE6，IE7，IE8，IE9，IE10。以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示。根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站。通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。兼顾不同浏览器的原那么人机交互与界面设计课程31

32人机交互与界面设计课程

33人机交互与界面设计课程

导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站。Web导航应该帮助用户理解他们在哪里、他们能去哪里、他们怎样获得其他信息。好的导航系统可以使用户以一种满意的方式找到需要的信息。导航系统的设计应从使用者的角度出发，力争简便、清晰和完整一致。明确的导航设计的原那么人机交互与界面设计课程34

35人机交互与界面设计课程

36人机交互与界面设计课程

37人机交互与界面设计课程

以用户为中心一致性简洁与明确表达特色兼顾不同的浏览器良好的导航设计We