网页界面的用户体验

南京工业大学 周 波 工业设计史 网页界面的用户体验 南京工业大学 周 波 工业设计史 用户体验 界面与交互 体验的产生 优秀体验的一些细节 南京工业大学 周 波 工业设计史 网页界面 网站界面研究起源 恩格尔巴特提出了图形用户界面（ 人机交互（ 产生 南京工业大学 周 波 工业设计史 引子 像产品设计一样，网站界面设计是从功能到快乐性的一个过程 功能 易用性 快乐 图片来源：黄厚石，孙海燕 设计原理 78页 南京工业大学 周 波 工业设计史 网页界面主流观点 以 南京工业大学 周 波 工业设计史 在体验理论的指导下，使用符合视觉审美的图形化界面 南京工业大学 周 波 工业设计史 在可用性（功能）、易用性、快乐性之间寻求平衡点是现在的主流观点 南京工业大学 周 波 工业设计史 网页设计与传统的程序设计的区别 滚动条（鼠标中键） 考虑到使用者的习惯以及鼠标中键的上下拖动的便捷性，一般都才用纵向滚动的形式。 字体 常规字体 字号的选用应当针对目标人群，以及主流显示器 尺寸 800*600 1024*768 南京工业大学 周 波 工业设计史 网站界面与传统软件界面比较情况表 网站界面 软件界面 整体设计概念 用户穿梭于各网站之间，将所有网站当作一个整体概念，网站界面符合大众性 用户往往较长时间专注于某一软件，将软件界面看作一个独立的用户界面 使用用户 初级用户 中高级用户 更新速度 相对较快 相对较慢 用户每次使用所用时间 较短 较长 页面特性 存在大量的内容以及超链接，非常注重页面的可浏览性 注重用户实现软件功能 使用难易程度 较容易，用户不需专门培训 功能复杂，用户需要经过培训 南京工业大学 周 波 工业设计史 归纳 重要要求： “ 零 ” 学习原则 南京工业大学 周 波 工业设计史 交互 交互是界面设计的核心内容 广义的交互设计是建立在用户体验的基础上的，它超越了视觉设计的范畴。用户期望自己能够成为网站主动体验者、参与者，而不仅仅是被动的 “ 看客 ” 。 视觉设计网站架构内容技术交互南京工业大学 周 波 工业设计史 用户体验 体验来自哪里？ 体验最初被界定是在哲学领域，随后被推广到心理学、美学、经济学、管理学等领域中去。 1998年 哈弗商业评论 “ 迎接体验经济 ” 开始，体验走入了人们的视野。 南京工业大学 周 波 工业设计史 体验是什么？ 很多人在做体验，很多人在体验，但是也有很多做体验、在体验的人不知道体验是什么。 体验是使用者的（传播学中是受众的） 体验包括下面几个部分 使用中的用户感受 使用后的用户感受 使用中的界面表现 使用后的效果与预期 南京工业大学 周 波 工业设计史 资料来源：马月 网站界面设计 。北京理工大学出版社出版 南京工业大学 周 波 工业设计史 境佑司（日）在网页制作流程中将用户体验作为网页设计策划的最高形式 资料来源：境佑司 网页设计基础 。电子工业出版社 。 南京工业大学 周 波 工业设计史 网站界面用户体验评定元素表 研究学者 研究结果 (1998) 网页界面之视觉设计要素有： 文 字风格 （ 图像 ( 排版 ( 背景 （ 标志 （ 、 标题 （ 导航 (管 伟生、林彦呈 (2000) 网页界面构成要素分为： 图 文比例 、 留白量 、 版面编排 、 颜色量 、 背景色彩等 。 研究结果显示以图文比例以及版面编排两个视觉设计要素对使用者在认知上的影响最大 ， 而背景色彩影响最小 。 张悟非 （ 1992）林政阳、洪嘉永（ 1995） 视觉讯息的传达表现形式区分为： 文字 ( 图像 （ 与符号 (种 。 林盈达 （ 1997） 将网页的主要视觉构成要素分为： 文字 、 图形 、 呈现效果 、 超链接 。 莊锦 昌（ 2001） 影响界面使用行的视觉元素有： 主题种类 、 超链接种类 、 超链接位置配置点 、 背景 、 背景明暗 、 背景色彩 、 版面留白量及内文编排等八种构成元素 。 冯淑 萍（ 2000） 网页设计必须考量以下七个视觉要素： 文字 、 图像 、 符号 、 色彩 、 界面编排设计 、 操作性以及企业形象 。 资料来源：修改自林锦全，视觉设计要素在洗衣机操作界面上之运用研究 南京工业大学 周 波 工业设计史 用户体验 包括用户心里和产品反馈两个部分（非官方） 用户体验的量化指标 品牌 可用性 功能性 内容 （来源： to J/ 2008 ） 南京工业大学 周 波 工业设计史 界面体验的衡量方法 学术上：眼动仪、用户反馈、有限状态机分析等等 现实中：用户反馈、学术上认可的设计原则 南京工业大学 周 波 工业设计史 优秀体验的一些细节 动态的元素要少而精致 南京工业大学 周 波 工业设计史 页面的最优位置是图中位置 右图中的广告位置 南京工业大学 周 波 工业设计史 引申 在搜索引擎首页 侧的广告与首页排名 5名 10以后的则关注者很少，很多用户会选择下一页，然后看排在最上面的内容。 现在搜索引擎也针对此做了界面的修改，网页长度控制在一版半左右 南京工业大学 周 波 工业设计史 网站设计是企业文化的一部分，要慎重考虑其与 南京工业大学 周 波 工业设计史 当字体失去了可读性的时候，它已经不再是文字了 页面文字尺寸不应小于 10使是你的免责声明 南京工业大学 周 波 工业设计史 菜单设计规则 1，上 左 ( 第一层的导览在网页上方，次要导览和第 三层在左侧 2，左 左 ( 第一层导览、次要导览、第 三层导览依序从左侧连结 请参阅 边角的内容 其实这属于内容排布的问题，网站的边角区域往往会被放置比较吸引读者眼球的东西，特别是多版页面。 左下角的大片部分 南京工业大学 周 波 工业设计史 交互 对应原则 南京工业大学 周 波 工业设计史 容错性原则 尽量不要出现这样的提示 南京工业大学 周 波 工业设计史 给予充足提示与反馈 进度条 提示栏 南京工业大学 周 波 工业设计史 推荐大家去读 交互设计精髓 （电子工业出版社） 内容很容易懂，也值得去学习，有些内容写的很不错。 实用性强 如果你想了解更多的理论，可以阅读东南大学的 设计原理 理论丰富 适用于各种设计 关于可用性、易用性、用户反馈