Web界面设计原则.ppt

* 人机交互与界面设计课程 网站的浏览者可能使用不同类型和版本的浏览器。 IE浏览器，opera浏览器，火狐浏览器（Firefox），Google浏览器（Google Chrome ），搜狗浏览器等； IE浏览器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。 以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示。 根据用户浏览器分布情况来确定所面向的浏览器类别和版本，并在尽可能多的浏览器中测试网站。 通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。 兼顾不同浏览器的原则 人机交互与界面设计课程 * * 人机交互与界面设计课程 * 人机交互与界面设计课程 导航系统是网站的路径指示系统，用于指导浏览者有效地访问网站。 Web导航应该帮助用户理解他们在哪里、他们能去哪里、他们怎样获得其他信息。 好的导航系统可以使用户以一种满意的方式找到需要的信息。 导航系统的设计应从使用者的角度出发，力争简便、清晰和完整一致。 明确的导航设计的原则 人机交互与界面设计课程 * * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 以用户为中心 一致性 简洁与明确 体现特色 兼顾不同的浏览器 良好的导航设计 Web界面设计原则 人机交互与界面设计课程 * 人机交互与界面设计课程 * 前面介绍了Web相关内容，下面学习Web界面的设计原则 Internet的发展日新月异，已经逐渐成为强有力的传播媒体，全球各个企业和机构纷纷建立自己的Web网站。用户对网站的访问通过网站界面上的要素来进行。 人性化贯穿设计始终 希望同学们能掌握这些原则，并用于自己的实际开发中。不只是关注功能的实现，而且要提供好的web界面，好的用户体验。 * 指导原则在某种情况下可以打破 * 网站设计不同于软件界面设计，同类网站可以有很多。即用户有多种选择，如果网站的设计不能满足用户的需求，用户可能不会再访问这个网站。 用户上网的方式一般有两种：浏览或者搜索。通常不是i帧对某一项专门的任务，可能出于好奇心或求知欲，或者仅为了娱乐，而不是获取信息。 以用户为中心的思想贯穿始终，也称为以人为本。不再单独的追求功能，而是更多的考虑用户体验。 * 玫红色 * 玫紫色 * 皮克斯公司 《玩具总动员》 网站界面应保证在所有的页面之间保持一致。如果网站中某些网页的外观突然改变了，那么访问者就会感到迷茫，甚至误认为他们连接到了另一个完全不同的网站上。 * 打破三次点击原则：比如电子商务网站，用户可能需3次以上点击才能找到想要的商品。如果一定遵循三次点击原则，可能造成一个页面上必须面对大量的可选商品，这会使用户感到困惑，甚至索性什么都不买。 * 相同的程序在不同版本或类型的浏览器中显示可能会不同。 浏览器的前向兼容性 不同浏览器的新特性 * 左侧的导航栏对所有商品进行了分类，方便用户的选择，在其它位置则突出了一些推荐的产品，便于用户找到 * 指导原则在某种情况下可以打破 * Web界面设计原则 主讲教师：范艳芳 Email：plfyf@163.com Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面的外观是否友好直接关系到Web站点能否吸引用户。 人性化的设计是Web界面设计的核心。 如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 Web界面设计 人机交互与界面设计课程 * 以用户为中心 一致性 简洁与明确 体现特色 兼顾不同的浏览器 良好的导航设计 Web界面设计原则 人机交互与界面设计课程 * 把用户放在第一位，重点考虑用户的需求。 既考虑用户的共性，又考虑用户之间的差异性。 不同类型的Web网站，访问群体不同；同一类型的Web网站，用户群也存在年龄、行业差别。 针对女性的网站尽量选用柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面构成上，可选用大量清晰度高的图片做视觉冲击。 针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成。 针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象。 针对老年人的网站，应考虑采用较大的字体，直截了当的信息显示和简单的浏览方式。 考虑目标用户的行为方式。 行为方式是人们由于年龄、性别、地区、种族、生活习俗、职业、受教育程度等形成的动作习惯、办事方法。 以用户为中心的设计原则 人机交互与界面设计课程 * 人机交互与界面设计课程 * * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 * 人机交互与界面设计课程 *