用户界面设计与配色方案复习课程.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页用户界面设计与配色方案,张梦巧,用户浏览网页方式,用户浏览网页方式,浏览网页就像看报纸，你只会看你要找的、关注的东西，以及吸引你的内容,用户浏览网页方式,比如：,查找“,十七大,”相关内容,体育新闻,吸引了你的兴趣,Dont Make Me Think.,用户界面设计基本原则：,简单,一目了然,关注细节,方便用户操作,遵循习惯用法,保持一致性,突出重点,友好的用户体验,信息查询类：,以实用功能为主，注重视觉元素的均衡排布，较少装饰性的元素，如,Yahoo,大众媒体类：,新浪网新闻中心,电子商务类：,使浏览者在访问时进行愉快的交流是设计的重点，要求既要具备人们乐于接受的交互性，又要有吸引浏览者注意的页面形式，如,当当书店,交流平台类：,以方便使用为主要特点，指示性强，易于理解，如,BBS,网络社区类：,由于网络社区通常不带有商业性质，因此它的界面设计可以根据社区内容充分发挥创造性，营造一个自由、舒适、愉快的氛围。,宣传窗口类：,从企业特有形象入手，充分表现企业文化特征，如,Adidas,网页分类,大型网站的特点,信息量大,涵盖面广,结构层次多,业务逻辑复杂,广告,有条理、有主次地将庞大的信息群整合到一起,层级菜单 导航 搜索 分栏 分区域,布局,网站主要布局,1,、,“同”字型：,是一些大型网站,首页常用的类型,，在网页,最上面是网站的标题以及,BANNER,广告条,，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。,2,、,弯角型：,这种结构和“同”字型很相近，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。一般,用于网站的内页,。,3,、,上中下型：,上面是标题或广告条一类的内容，下面是正文，一些,文章页面或注册页面,等就是这种类型。,网站主要布局,4,、,左右框架型：,这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的,大型论坛,都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。但是这种结构在,使用框架时有个问题，即不容易被搜索引擎找到,。如果考虑到这一点，尽量少用带框架的页面。,5,、,整幅效果型,这种类型常被,企业网站作为首页,，采用,大幅图片或,FLASH,动画,，在底部加一,进入,按钮。作为展示企业形象来说，这种页面非常美观，但是,服务型网站尽可能不用这种方式,，因为上网速度慢，性格比较急的人往往受不了等待。,主页设计,准备工作,网站定位,网页的用户，考虑潜在用户,网页的主要功能、任务,确定主要内容,主页的任务,站点的,ID,和使命,站点层次,搜索,导读,内容更新,友情链接,快捷方式,注册,让用户看到正在寻找的东西,吸引用户的精彩内容,告诉用户开始的地方,建立可信度和信任感,主页设计,建立清楚的视觉层次,把页面划分为明确定义的区域,色块、分栏、标签页,另一个示例,主页的设计,混乱中，不能忘记,传达整体形象,主页应该具有的作用：,这是什么网站？,网站上有什么？,我能在这里做什么？,为什么我应该在这里，而不是别的地方？,网页设计的主要元素,网站LOGO,简要的说明文字、口号,这是什么网站？,网站上有什么？,我能在这里做什么？,为什么我应该在这里，而不是别的地方？,网页设计的主要元素,导航栏,帮助用户找到想要的东西,告诉用户当前位置,告诉用户如何使用网站,网页设计的主要元素,导航栏,持久导航 页面导航,持久导航应该包括,5,个必要元素：,站点,ID,返回首页 搜索栏 栏目 实用工具,让导航部分以一致或相似的外观出现在同样的位置：,让用户确定自己的位置，仍然在网站上,只需要了解一次即可,为用户提供方便,保持风格一致,网页设计的主要元素,搜索栏,网页设计的主要元素,图片、动画效果,图片要好 尤其宣传类网站、注重界面,主要内容,确定网站的主要内容，既能体现网站任务，风格，又不能没有更新,广告,做好用户体验,主页设计,主页设计 示例,阿里巴巴网站,不好的用户体验,1.,超长的页面下载时间,2.,无限制的使用,flash,及图片,3.,网站页面过长,4.,不友好的导航,不友好的导航是最影响用户操作的，,不能让用记很方便的找到自己想到的内容,，用户来到一个页面,不知如何返回上一页,，,不知道当前页面是在哪个栏目下的,，这样的网站很,可能用户来了一次就不会再来了。,5.,过期的信息,不好的用户体验,6.,死连接或连接错误,7.,孤立的页面,8.,页面没有视觉差异,页面没有视觉差异，页面,设计很,“,平,”,缺少,“,层次感,”,，,缺少视觉冲击力和亮点,，或者视觉冲击力,突出的并不是网站的主体内容,把一大堆信息铺天盖地的展示到浏览者的眼前，你认为他会记住多少？页面设计要吸引并引导浏览者来观看想推广的内容或产品，当然对网页,“,层次感,”,的设计平不是简单的。用一些,纯度高的颜色来实现,，要根据页面的环境及周边元素综合考虑,不好的用户体验,9.,链连没有标准的表现形式,如果是图片加的连接要在图片下标出,“,点击图片见大图“,更多,10.,恶意插件，恶意弹出窗口,11.,浮动窗口广告不能关闭,12.,欺骗用户,13.,太深的链接路径,配色方案,红色系,红色的,色感温暖,，,性格刚烈而外向,，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人,兴奋、激动、紧张、冲动,、还是一种容易造成人视觉疲劳的颜色。在众多颜色里，红色是,最鲜明生动的、最热烈,的颜色。因此红色也是,代表热情的情感之色,。鲜明红色极容易吸引人们的目光。,配色方案,紫色系,象征着,女性化,，代表着,高贵和奢华、优雅与魅力,，也象征着,神秘与庄重、神圣和浪漫,。另一方面又有孤独等意味。紫色的明度在有彩色的色度中是最低的。紫色的低明度给人一种,沉闷、神秘,的感觉。在紫色中,红的成份较多时，显得华丽和谐,。紫色中,加入少量的黑，沉重、伤感、恐怖、庄严的感觉,。紫色中,加入白，变得优雅、娇气，并充满女性的魅力,。紫色通常用于,以女性为对象或以艺术作品介绍,为主的站点，但很多大公司的站点中也喜欢使用包含神秘色彩的紫色，但都,很少做大面积使用,。,配色方案,橙色系,轻快、欢欣、收获、温馨、时尚,的效果，是快乐、喜悦、能量的色彩。在整个色谱里，橙色具有兴奋度，是最耀眼的色彩。给人以,华贵而温暖，兴奋而热烈,的感觉，也是,令人振奋,的颜色。,具有健康、富有活力、勇敢自由,等象征意义，能给人有庄严、尊贵、神秘等感觉。,在网页颜色里，橙色适用于视觉要求较高的,时尚网站,，属于注目、芳香的颜色，也常被用于,味觉较高的食品网站,，是,容易引起食欲的颜色,。,配色方案,黑色系：,纯度、色相、明度最低的非彩色。象征着,力量、沉默、虚空，庄严肃穆,，有时又意味着,不吉祥和罪恶,。黑色代表,死亡、悲哀，别有一种变幻无常的感觉,。,黑色能和许多色彩,构成良好的对比调和关系，运用范围很广,。,黑色是最有力的搭配色。,黑色也常用来表示,英俊的男人,。,黑白两种颜色的搭配使用通常可以表现出,都市化的感觉，常用于现代派页面设计中,配色方案,绿色系,冷暖色之间，属于较中庸的颜色，这样使得绿色的性格,最为平和、安稳、大度、宽容,。是一种,柔顺、恬静、满足、优美、受欢迎之色,。也是网页中使用最为广泛的颜色之一。是自然之色，象征,生命与希望、和平与安全、发展与生机、舒适与安宁、松弛与休息、自然与健康,，有缓解眼部疲劳的作用。经常用于,与自然、健康相关的站点,。绿色还经常用于一些,公司的公关站点或教育站点,。,配色方案,常用的颜色系列：,蓝色系列,中性灰系列,粉色系列,黑色系列,橙色系列,绿色系列,威软俱乐部网站界面设计分析,网站定位：,威软俱乐部属于学院直属的一个学生组织机构,建站目的：,主要用于对外宣传，展示学院俱乐部风采，让外界了解,学生交流的平台,网站传达的整体形象：,俱乐部的精神,威软俱乐部网站界面设计分析,网站用户定位：,俱乐部成员,学院及学校学生,领导和老师,家长,公司人员,以及任何相关的对俱乐部感兴趣的人,访问途经：,学院主页链接、搜索引擎,调和众口，又不乏创新风格,威软俱乐部网站界面设计分析,网站主要功能模块：,简介章程,历届成员,项目展示,交流平台,公 告,个人博客,课余活动,合作单位,留 言 簿,纳 新,友情链接,特点：,信息量小,更新内容少、更新速度慢,访问量小,结论：,属于,宣传网站类型,，设计灵活,突出俱乐部形象、精神,有更新内容,威软俱乐部网站界面设计分析,LOGO,口号,俱乐部精神：,The spirit of the club,namely,pragmatism,cooperation and innovation,fully manifests the development goals of SOS,which are internationalization,industrialization,high-quality and high-speed.,主要内容,项目展示 简介章程 公 告,最后的话,刚开始学习，有疏忽遗漏不对之处，欢迎指出共同探讨,参考资料：,Dont Make Me Think,谢谢！,Elements,题外话,谁是最幸福的人？,李拓、王磊,