基于用户体验的网页UI设计

…
…
…
…
…
…
…
…
…
…源自文库
一
竣 廑 一 一 －
基 于 用 户 体 验 的 网 页 ＵＩ 设 计
桂林 电子科技 大学职 业技 术学院
网页ｕ Ｉ 设计。
吴飞燕
【 摘要 】本 文基于用户体验剖析 网ｇｕ Ｉ ｉ ￣计 ，阐述 了网页界面视觉设计 和网页界面交互设计 重要性。结合 ３前人们 ＂ － 的生活方 式、行为 习惯及 心理体验 等方 面论述如何进 行
【 关键 词】网？ ｉ ｕ １ 设计 ；视觉设计；视觉吸 ｝ Ｉ ；交互设计 ；交互艺术
随着信 息化 的深入 ，网页 成 为人 们浏 览 信 息、获取信息 、放 眼世 界的主要 窗口之一。 在传统 网页的界面设 计中，人们认为 网页界面 设计就 是美工 ，而美 工就 是单纯对 网页 进行装 饰 。随着网络技术 的发展 与普及 ，网页 界面设 计 的技 术在 不 断 的进 步 ，设计 的 理念 也在 不 断 的更 新，网页界面 设计 不再是单纯 的视 觉设 计 ，而是 将视觉设计与人 的行为习惯 、生活方 式 、心理体验等结合在 一起的设计 ，基 于用户 体验的网页ｕ Ｉ 设 计 是 当 前 研 究 的热 点 。 网页…设计及用户体验 ＵＩ 即Ｕ Ｓ ｅ ｒ Ｉ ｎ ｔ ｅ ｒ ｆ ａ ｃ ｅ（ 用户 界 面）的简 称 ，指 对 软件 的人 机 交互 、操 作 逻辑 、界 面 美 观的整体 设计 。网页Ｕ Ｉ 设计 用户体 验 （ Ｕ ｓ ｅ ｒ Ｅ ｘ ｐ ｅ ｒ ｉ ｅ ｎ ｃ ｅ ，简称Ｕ Ｅ ） 则是 一种纯 主观在 用户 使用产 品过程 中建立 起来 的感受 。由于生活习 惯 、文化背景 、行 为方 式及心理体 验等 不同 ， 用户体 验产品时会有 不同的感受 ，一个 好的ｕ Ｉ 设计要 能充分满足大众 的需求 ，使用户 在体验 过程 中都 能心情愉悦 、操作流 畅、交 互高效。 就 网页ｕ Ｉ 设计而言 ，用户浏 览网页的需求 是什 么？抽象 出来可 以归纳为两点 ：一浏览信 息，二操作数据 。这 里的数据是指在数 据库中 躺着 的数据 ，用户在 单纯 浏览信息 时，不会对 页面背 后的 “ 数据 ”造成 任何操作 ，但 用户进 行 点击 链接 、跳转 页面和 处理信 息时，就要和 页面 背后的数据进行 交互。所 以，在做 网页ｕ Ｉ 设计 时候主要满足于 用户 的这两方面 的需求， 第 一是用户在浏览信 息时候 ，要有 一个 赏心悦 目的界面，即 网页界 面的视觉设计要美观 。第 二 是用 户在操作数据 时候 要高效 ，即网页界面 的交互设计灵活 。 二 、网页界面视 觉设计 爱美之心人皆有之 ，漂亮 的网页界面能吸 引浏览 者的眼球 、提 高网页的浏览量 。传 统网 页美工 设计，更注重 网页 的布局 以及 网页的颜 色搭配 ，换言之 ，就 是重 在设计 网页平 面效果 图和 以及对网页进行装饰 。随着人们生 活节奏 的加快 ，快餐文化 日渐丰 富，仅靠传统 网页美 工 已不 能适应 当今 网页发 展的需要 。那 么，如 何让你 的网站跟上时代 的步伐，满足 当今 用户 的需求呢 ？ 从用户体 验出发：什么东 西能让我 们从电 脑屏幕上 看到接近于现实 世界的东西 ？是视 觉 吸 引，视 觉吸引是非常有 效的提示工具 ，通 常 在用户第 一次打开某个应用 ，或进入某个 新的 界面时 出现。简单的视觉 吸引能扭转乾坤 ，把
一
、
令人 沮丧万分的第 一次使用经历变成 满意的产 人机之问信息交 互的有效性 主要取 决于 交 品使用体验 。 常见 的网页视觉吸 引的模式 ： 互技术 。好 的交互主要包括 两方面： １ ． 对话框 （ １ ） 时 效性 这是 最常见的视觉吸 引模式 ，它是网页 中 如今 生活 节 奏 的加 快 ，人们 更 注重 时 效 种 次要 窗 口，包含按钮 和各种选项 ，通 过它 性 ，在 人机交互过程 中，如果交互 不及时 ，浏 可 以完成特定命令或任务 。 览 者就会厌烦甚至放 弃浏览 该信 息，有 网络 调 ２ ． 提示 查研 究表明 ，用户打 开网页等待 的时间最长为 提示指 给予相应的提醒 、明示和解释 ，它 五秒 ，如果五秒之后 没有任何 的反 馈信息 ，用 可 以出现 在网页 中的任 何位置 ，比对话框 更能 户 一般 会放弃该 网页的操作 。所 以，在进行 网 页 界 面 设 计 时 ，要 考 虑 到 受 众 的 心 理 ， 在 提 高 融入到网页 的应用情景 。 ３ ． 使用 导航 交 互速 度 的 同时 ，也 要 为用 户在 等待 交 互过 导航 是网页布局 中最重要 的元 素之一 ，是 程 中提供相关 的信 息 ，减少用户 的疑惑 以及焦 网页 主要 内容的提炼 ，是网站 的框架 更是网站 虑 。比如在用户等 待操作时 的，提供操作成功 信 息的分 类 ，直观漂亮 的导航能吸 引用户的操 与否的信息或是提供 操作成 功的数据量和剩余 作。 所 需等待 的时间等。 ４ ． 视频演示 （ ２ ） 直观性 将视 频嵌入到网页 当中，通过 视频形象直 简单 直观 的 交互 能 帮助 用户 快 速完 成 任 观 的画面来吸 引浏 览者 。在进行视频 嵌入 设计 务 ，繁琐 的 交互 会增 加 用户 操作 和 思考 的 时 时 ，为了便于用户 的操 作，一般要提供 常见的 间，也会引起用户 心理上的厌倦 。在进行交互 视频控制选项 （ 停止 、暂停 、音量控制等） 。 设计时 ，反馈 回来 的信息要直接 明了 ，因为在 ５ ． 首次使用 引导 操 作过程中用户都 喜欢被告诉 怎么做，而不 喜 用户 首次使用网页或是 网页界 面中的某些 欢 去 思考 如何 做 。 同时 ，交 互设 计要 减 少干 操作 时候，提供适 当的引导 ，帮助用 户进入操 扰 ，让用户 的操 作能更顺畅。 作界 面，比如说利用 图像或是其他视 觉线 索来 ２ ． 交互 艺术 引导用户使用 。 交互 发生 取 决于 交互 技 术 ，交互 持 续取 ６ ． 持续视觉 吸引 一 决于 交互 艺术 。交互 艺术 ，是指 运用 一 定 的 持续视 觉吸引设计 ，主要是将 一些网页元 创 意，使用户在体验 交互的过程 中，能沉浸其 中，并保持愉悦 的心情。在交 互设 计中 ，运用 素进 行有 别于其 他网 页元素 的设计 （ 比如 说 ， 通过 字体 的大 小、颜 色区别 开来） ，并将这 些 艺术表 现形式 ，改变 传统媒体 的线 性秩序叙事 元素一直 保持在 网页 中，通过持续 的视觉 刺激 方 式，强调观众 的积 极性和能动性 ，引导用户 来吸 引用户 。 更好地 进行交互操 作，达到人机交 互的 自然 、 ７ ． 可发现 的视觉吸 引 和谐 。 可发现 的视 觉吸引是一种在保持 页面简洁 四、结语 的前提下 ，用户通过执 行特定交互操作 的方法 “ 以人为 本 ”的 创新 设计 是ｕ Ｉ 设计 的核 （ 如点击 和滑动等） ，就 能看到页面 中某些 隐藏 心 ，好 的设计既是美 的设计也是为 人的设计 ， 的元素 。如 比较常见 的视 觉吸引模式是鼓励 用 这 也是 未来ｕ Ｉ 设计 的趋势 。 所 以，在 网页ｕ Ｉ 户刷新数据 的提示 。 设 计中，我们要摒 弃 以往界面设计 就是美工 的 三 、网页界面 交互设计 观念 ，网页ｕ Ｉ 设计 不是给网页进行 简单的装饰 “ 交 互 ”是人 与机 器 之 间的相 互 作用 。 和美化 ，而是要赋 予其独 立 的思想和创 意，结 良好 的交 互能保持或是激 发用户使用 网站 的兴 合用户 的心理体验 、行为 习惯 、生 活方式等 因 趣 ，传统 的网页交互设计 重在技术上关注 人机 素 ，以人为本，基于用户体验进行网页ｕ Ｉ 设计。 之间 的交 互，忽视 了人机 之间 “ 情感 ”交 互。 发挥设计 中人的情感体验 作用 ，使设计更 具有 参考文献 １ ］ Ｔ ｂ ｅ ｒ ｅ ｓ ａ Ｎｅ ｉ ｌ 著． 王军锋， 郭偎， 武艳芳译 移动应用ｕ Ｉ 设 人性化 的 自由，满足审美 的追求，这不仅 需要 ［ Ｍ １ 人民邮 电出版社， ２ ０ １ ３ ， １ １ 交互技术 ，更需要交互 艺术。所 以，从用 户体 计模 式［ 【 ２ ］ 王晓丹 以人为本创新感受～ 浅谈 网页设计 中ｕ Ｉ 设计 验 出发，来进行 网页界面 的交互设计 。