用户界面设计与配色方案ppt课件

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