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

网页用户界面设计与配色方案 用户浏览网页方式 用户浏览网页方式 浏览网页就像看报纸，你只会看你要找的、关注的东西，以及吸引你的内容 用户浏览网页方式 比如： 查找“十七大”相关内容 体育新闻吸引了你的兴趣 Don’t 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. 页面没有视觉差异 页面没