用户界面设计与配色方案 [教程].ppt

1、网页用户界面设计与配色方案,张梦巧,用户浏览网页方式,用户浏览网页方式 浏览网页就像看报纸，你只会看你要找的、关注的东西，以及吸引你的内容,用户浏览网页方式,比如： 查找“十七大”相关内容 体育新闻吸引了你的兴趣,Dont Make Me Think.,用户界面设计基本原则： 简单 一目了然 关注细节 方便用户操作 遵循习惯用法 保持一致性 突出重点 友好的用户体验,信息查询类：以实用功能为主，注重视觉元素的均衡排布，较少装饰性的元素， 如Yahoo 大众媒体类：新浪网新闻中心 电子商务类：使浏览者在访问时进行愉快的交流是设计的重点，要求既要具备人们乐于接受的交互性，又要有吸引浏览者注意的页面

2、形式，如当当书店 交流平台类：以方便使用为主要特点，指示性强，易于理解，如BBS 网络社区类：由于网络社区通常不带有商业性质，因此它的界面设计可以根据社区内容充分发挥创造性，营造一个自由、舒适、愉快的氛围。 宣传窗口类：从企业特有形象入手，充分表现企业文化特征，如Adidas,网页分类,大型网站的特点,信息量大 涵盖面广 结构层次多 业务逻辑复杂 广告 有条理、有主次地将庞大的信息群整合到一起 层级菜单 导航 搜索 分栏 分区域 布局,网站主要布局,1、“同”字型： 是一些大型网站首页常用的类型，在网页最上面是网站的标题以及BANNER广告条，接下来就是网站的主要内容，左右分列一些两小条内容，

3、中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。 2、弯角型： 这种结构和“同”字型很相近，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。一般用于网站的内页。 3、上中下型： 上面是标题或广告条一类的内容，下面是正文，一些文章页面或注册页面等就是这种类型。,网站主要布局,4、左右框架型： 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网

4、站也喜欢采用。这种类型结构非常清晰，一目了然。 但是这种结构在使用框架时有个问题，即不容易被搜索引擎找到。如果考虑到这一点，尽量少用带框架的页面。 5、整幅效果型 这种类型常被企业网站作为首页，采用大幅图片或FLASH动画，在底部加一 进入按钮。作为展示企业形象来说，这种页面非常美观，但是服务型网站尽可能不用这种方式，因为上网速度慢，性格比较急的人往往受不了等待。,主页设计准备工作,网站定位 网页的用户，考虑潜在用户 网页的主要功能、任务 确定主要内容,主页的任务,站点的ID和使命 站点层次 搜索 导读 内容更新 友情链接 快捷方式 注册,让用户看到正在寻找的东西 吸引用户的精彩内容 告诉用户

5、开始的地方 建立可信度和信任感,主页设计,建立清楚的视觉层次 把页面划分为明确定义的区域 色块、分栏、标签页 另一个示例,主页的设计,混乱中，不能忘记 传达整体形象 主页应该具有的作用： 这是什么网站？ 网站上有什么？ 我能在这里做什么？ 为什么我应该在这里，而不是别的地方？,网页设计的主要元素,网站LOGO 简要的说明文字、口号 这是什么网站？ 网站上有什么？ 我能在这里做什么？ 为什么我应该在这里，而不是别的地方？,网页设计的主要元素,导航栏 帮助用户找到想要的东西 告诉用户当前位置 告诉用户如何使用网站,网页设计的主要元素,导航栏 持久导航 页面导航 持久导航应该包括5个必要元素： 站点

6、ID 返回首页 搜索栏 栏目 实用工具 让导航部分以一致或相似的外观出现在同样的位置： 让用户确定自己的位置，仍然在网站上 只需要了解一次即可 为用户提供方便 保持风格一致,网页设计的主要元素,搜索栏,网页设计的主要元素,图片、动画效果 图片要好 尤其宣传类网站、注重界面 主要内容 确定网站的主要内容，既能体现网站任务，风格，又不能没有更新 广告 做好用户体验,主页设计,主页设计 示例,阿里巴巴网站,不好的用户体验,1. 超长的页面下载时间 2. 无限制的使用flash及图片 3. 网站页面过长 4. 不友好的导航 不友好的导航是最影响用户操作的，不能让用记很方便的找到自己想到的内容，用户来到

7、一个页面不知如何返回上一页，不知道当前页面是在哪个栏目下的，这样的网站很可能用户来了一次就不会再来了。 5. 过期的信息,不好的用户体验,6. 死连接或连接错误 7. 孤立的页面 8. 页面没有视觉差异 页面没有视觉差异，页面设计很“平”缺少“层次感”，缺少视觉冲击力和亮点，或者视觉冲击力突出的并不是网站的主体内容 把一大堆信息铺天盖地的展示到浏览者的眼前，你认为他会记住多少？页面设计要吸引并引导浏览者来观看想推广的内容或产品，当然对网页“层次感”的设计平不是简单的。用一些纯度高的颜色来实现，要根据页面的环境及周边元素综合考虑,不好的用户体验,9. 链连没有标准的表现形式 如果是图片加的连接要

8、在图片下标出“点击图片见大图“ 更多 10. 恶意插件，恶意弹出窗口 11. 浮动窗口广告不能关闭 12. 欺骗用户 13. 太深的链接路径,配色方案,红色系 红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。 在众多颜色里，红色是最鲜明生动的、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。,配色方案,紫色系 象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。另一方面又有孤独等意味。紫色的明度在有彩色的色度中是最低的。紫色的低明度给人一种沉

9、闷、神秘的感觉。在紫色中红的成份较多时，显得华丽和谐。紫色中加入少量的黑，沉重、伤感、恐怖、庄严的感觉。紫色中加入白，变得优雅、娇气，并充满女性的魅力。紫色通常用于以女性为对象或以艺术作品介绍为主的站点，但很多大公司的站点中也喜欢使用包含神秘色彩的紫色，但都很少做大面积使用。,配色方案,橙色系 轻快、欢欣、收获、温馨、时尚的效果，是快乐、喜悦、能量的色彩。在整个色谱里，橙色具有兴奋度，是最耀眼的色彩。给人以华贵而温暖，兴奋而热烈的感觉，也是令人振奋的颜色。具有健康、富有活力、勇敢自由等象征意义，能给人有庄严、尊贵、神秘等感觉。 在网页颜色里，橙色适用于视觉要求较高的时尚网站，属于注目、芳香的颜

10、色，也常被用于味觉较高的食品网站，是容易引起食欲的颜色。,配色方案,黑色系： 纯度、色相、明度最低的非彩色。象征着力量、沉默、虚空，庄严肃穆，有时又意味着不吉祥和罪恶。黑色代表死亡、悲哀，别有一种变幻无常的感觉。 黑色能和许多色彩构成良好的对比调和关系，运用范围很广。 黑色是最有力的搭配色。 黑色也常用来表示英俊的男人。 黑白两种颜色的搭配使用通常可以表现出都市化的感觉，常用于现代派页面设计中,配色方案,绿色系 冷暖色之间，属于较中庸的颜色，这样使得绿色的性格最为平和、安稳、大度、宽容。是一种柔顺、恬静、满足、优美、受欢迎之色。也是网页中使用最为广泛的颜色之一。 是自然之色，象征生命与希望、和

11、平与安全、发展与生机、舒适与安宁、松弛与休息、自然与健康，有缓解眼部疲劳的作用。 经常用于与自然、健康相关的站点。绿色还经常用于一些公司的公关站点或教育站点。,配色方案,常用的颜色系列： 蓝色系列 中性灰系列 粉色系列 黑色系列 橙色系列 绿色系列,威软俱乐部网站界面设计分析,网站定位： 威软俱乐部属于学院直属的一个学生组织机构 建站目的： 主要用于对外宣传，展示学院俱乐部风采，让外界了解 学生交流的平台 网站传达的整体形象： 俱乐部的精神,威软俱乐部网站界面设计分析,网站用户定位： 俱乐部成员 学院及学校学生 领导和老师 家长 公司人员 以及任何相关的对俱乐部感兴趣的人 访问途经： 学院主页

12、链接、搜索引擎 调和众口，又不乏创新风格,威软俱乐部网站界面设计分析,网站主要功能模块： 简介章程 历届成员 项目展示 交流平台 公 告 个人博客 课余活动 合作单位 留 言 簿 纳 新 友情链接,特点： 信息量小 更新内容少、更新速度慢 访问量小 结论： 属于宣传网站类型，设计灵活 突出俱乐部形象、精神 有更新内容,威软俱乐部网站界面设计分析,LOGO 口号 俱乐部精神： The spirit of the club, namely pragmatism, cooperation and innovation, fully manifests the development goals of S