Web界面设计原则

《Web界面设计原则》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Web界面设计原则主讲教师：范艳芳Email：plfyf@163.comWeb界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面的外观是否友好直接关系到Web站点能否吸引用户。人性化的设计是Web界面设计的核心。如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。Web界面设计人机交互与界面设计课程2以用户为中心一致性简洁与明确体现特色兼顾不同的浏览器良好的导航设计Web界面设计原则人机交互与界面设计课程3把用户放在第一位，重点考虑用户的需求。既

2、考虑用户的共性，又考虑用户之间的差异性。不同类型的Web网站，访问群体不同；同一类型的Web网站，用户群也存在年龄、行业差别。针对女性的网站尽量选用柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面构成上，可选用大量清晰度高的图片做视觉冲击。针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成。针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象。针对老年人的网站，应考虑采用较大的字体，直截了当的信息显示和简单的浏览方式。考虑目标用户的行为方式。行为方式是人们由于年龄、性别、地区、

3、种族、生活习俗、职业、受教育程度等形成的动作习惯、办事方法。以用户为中心的设计原则人机交互与界面设计课程4人机交互与界面设计课程56人机交互与界面设计课程7人机交互与界面设计课程8人机交互与界面设计课程9人机交互与界面设计课程10人机交互与界面设计课程11人机交互与界面设计课程12人机交互与界面设计课程13人机交互与界面设计课程14人机交互与界面设计课程Web界面的内容和形式应一致。内容包括：网站显示的信息，如数据、文字内容等。形式包括：Web界面设计的版式、构图、布局、色彩、风格等。网页的形式为内容服

4、务，不同内容的网页用不同的设计形式。一致性原则人机交互与界面设计课程15Web网站标识及页面设计标准确定后，应运用到每个页面上。每个页面都使用相同的页边距；文本、图形之间保持相同的间距；主要图形、标题或符号旁边留下相同的空白；若使用图标导航，则各个界面应当使用相同的图标；页面上的每个元素要与整个页面的设计风格一致；文字的颜色应和图像的颜色保持一致，并注意色彩搭配的和谐。一致性原则（续）人机交互与界面设计课程1617人机交互与界面设计课程18人机交互与界面设计课程19人机交互与界面设计课程保持简洁的常用做

5、法是使用醒目的标题；限制所用的字体和颜色的数目；界面上所有的元素都有明确的含义和用途；三次点击原则：通常情况下，访问者应该最多通过三次点击就能在网站上找到想要的信息。主页的访问率为100人次的情况下，下一页的访问率会降到30-50人次。简洁与明确原则人机交互与界面设计课程2021人机交互与界面设计课程22人机交互与界面设计课程23人机交互与界面设计课程特色鲜明的网站更容易在一瞬间打动它的浏览者，留下令人心动的第一印象；应清楚Web网站用户的基本情况，从而在网站设计时做到有的放矢，呈现关键信息；利用逻辑结

6、构有序组织、开发页面设计原型，通过测试和逐步精炼，形成网站的明确特点。体现特色的原则人机交互与界面设计课程2425人机交互与界面设计课程26人机交互与界面设计课程27人机交互与界面设计课程28人机交互与界面设计课程29人机交互与界面设计课程30人机交互与界面设计课程网站的浏览者可能使用不同类型和版本的浏览器。IE浏览器，opera浏览器，火狐浏览器（Firefox），Google浏览器（GoogleChrome），搜狗浏览器等；IE浏览器的版本：IE6，IE7，IE8，IE9，IE10。以某一个浏览器的

7、某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示。根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站。通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。兼顾不同浏览器的原则人机交互与界面设计课程3132人机交互与界面设计课程33人机交互与界面设计课程导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站。Web导航应该帮助用户理解他们在哪里

8、、他们能去哪里、他们怎样获得其他信息。好的导航系统可以使用户以一种满意的方式找到需要的信息。导航系统的设计应从使用者的角度出发，力争简便、清晰和完整一致。明确的导航设计的原则人机交互与界面设计课程3435人机交互与界面设计课程36人机交互与界面设计课程37人机交互与界面设计课程以用户为中心一致性简洁与明确体现特色兼顾不同的浏览器良好的导航设计Web界面设计原则人机交互与界面设计课程38人机交互与界面设计课程39谢谢！！谢谢！放映结束感谢各位