首页 众妙之门——网站UI设计之道01

众妙之门——网站UI设计之道01

举报
开通vip

众妙之门——网站UI设计之道01 第一章 现代网络应用程序中的 用户界面设计 Dmitry Fadeyev � 众妙之门 — 网站 UI 设计之道 什么是用户界面(UI)设计 ?什么是有效的用户界面设计 ?你打算如何把用户界面设计得更好 ?这一章,我们就来了 解一下现代互联网应用程序中可视用户界面设计的理论演化和 技术更新。 什么是用户界面 ? “在你使用工具完成任务的过程中,你所做的操作以及工具的响应, 这些结合起来构成了界面。”—Jef Raskin 用户界面设计并不仅仅是考虑如何摆放按钮和菜单,更为 重要的是考虑应用...

众妙之门——网站UI设计之道01
第一章 现代网络应用程序中的 用户界面设计 Dmitry Fadeyev � 众妙之门 — 网站 UI 设计之道 什么是用户界面(UI)设计 ?什么是有效的用户界面设计 ?你打算如何把用户界面设计得更好 ?这一章,我们就来了 解一下现代互联网应用程序中可视用户界面设计的理论演化和 技术更新。 什么是用户界面 ? “在你使用工具完成任务的过程中,你所做的操作以及工具的响应, 这些结合起来构成了界面。”—Jef Raskin 用户界面设计并不仅仅是考虑如何摆放按钮和菜单,更为 重要的是考虑应用程序或设备如何与用户互动;更多时候,还 要考虑产品与多个用户之间的互动。这就意味着,用户界面设 计不仅要做出好看的产品外观, 还要做出好用的产品。这不仅仅 是调整一下按钮的位置、给他们 选选颜色,而是要为完成一项任 务而选择正确的工具。一个特殊的界面,是否需要使用按钮 ? 如果确实需要,那么这些按钮将完成什么样的工作 ?这个按钮 需要如何设计,才能让用户了解这个应用程序的工作方式,并 且轻松达到用户的目的。 在产品的开发周期中,尽早开始用户界面设计至关重要, 正如 Jef Raskin 所说:“对消费者而言,界面就是产品 1 ”。 用户一直看到和使用的都是用户界面,而不是深藏在应用程 序背后的技术体系结构。把界面做好,这将极大地提高用户 使用产品的愉悦感,用户也能很容易就掌握产品的使用。所 以先从界面设计开始,然后再开始应用程序后台引擎的编码, 要好于先开始编码,再给他包裹一层界面。 什么因素能成就一个伟大的用户界面? 1 Raskin,J. 2000 The Humane Interface Addison Wesley。 用户在第一次使用一个界面时, 仍然能发现某些元素是他们所熟 知的。 第一章 现代网络应用程序中的用户界面设计 � 在我们开始着手设计用户界面之前,首先应该理解什么样 的用户界面才是出色的用户界面,我们的设计要具备哪些品质 才够得上是出色的界面设计。所有伟大的用户界面大都具有下 面这八个品质或特点。 1. 清晰。通过使用文字、流程图、层级图、图标等元素, 避免用户对界面的模糊认识。清晰的界面不需要手册,同时还 能确保用户在使用的过程中减少犯错。 2. 简洁。为了让界面清晰,可以通过在所有元素上添加浮 动框的说明或者标签这种简单的方法来实现,但这样做会导致界 面膨胀臃肿。如果电脑屏幕上同时充斥了太多的东西。找到你想 要的东西是非常困难的,用户使用起来就觉得困难乏味。如何让 界面同时保持简洁和清晰,这正是设计伟大界面的挑战所在。 3. 熟悉。人们总是对之前见过的东西有一种熟悉的感觉, 有的界面即使是第一次使用,其中的有些元素我们还是会感觉 很熟悉。在设计过程中,使用一些现实生活中公认的意象能够 更好地帮助用户理解。例如,文件夹样式的选项卡通常在网站 和应用程序中起导航作用,人们很快就能认识到它的导航作用, 因为现实生活中,我们也是通过文件夹来分类 资料 新概念英语资料下载李居明饿命改运学pdf成本会计期末资料社会工作导论资料工程结算所需资料清单 的。 4. 响应性。这意味着两件事情。首先,响应必须迅速,一 个良好的界面不应该让人感觉反映迟缓。其次,界面应该提醒用 户发生了什么事,用户的输入是否被成功地处理,让用户了解这 些信息反馈。并且明确告诉用户,您的请求已经被成功受理。 5. 一致性。在整个应用程序中保持界面一致是非常重要的, 这能够让用户识别出使用的模式。一旦用户学会了界面中某个 部分的操作,他很快就能知道如何在其他地方或其他特性上进 行操作,就好像他们早就知道似的。 6. 美学性。尽管你不需要把一个界面做的非常有吸引力, � 众妙之门 — 网站 UI 设计之道 但是有一个好看的界面会让用户工作起来更开心。况且,让用 户开心绝对是一件好事。 7. 高效性。时间就是金钱,一个伟大的界面应当通过快捷 菜单或者良好的设计来帮助用户提高工作效率。毕竟这是科技 带给我们的一个最大好处,它允许我们用更少的时间和努力来 做完成更多的工作。 8. 容错性。每个人都会犯错,你的应用程序会如何处理用户 所犯的错误是对它的总体质量一个最好测试。它是否容易撤消操 作 ?是否容易恢复删除的文件 ?一个好的用户界面不应当因为用户 的错误而惩罚他们,而应该总是为他们提供犯错之后补救的方法。 想要设计一个包含所有特性的用户界面非常困难,因为各个 特性之间总是相互影响。你在界面中增加的元素越多,用户在使 用上所花的努力就越大。当然,反过来亦是如此。没有足够的帮 助和支持,用户会茫然不知所措。如何设计既简洁、优雅,又清 晰、一致的用户界面,是摆在用户界面设计师之前的最大难题。 可视界面设计的工具箱 可视界面设计就是设计让用户能够在他们的电子设备的屏 幕上看到你的界面的物理 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 现的过程。可视界面设计的主要目 的是通过精心制作合适的可视界面,让用户理解应用程序的用 途以及如何操作应用程序。 可视界面设计中由一系列过程组成。选择合适的类型、对 齐每个元素、将不同元素以一种有意义的方式组合起来,用户 界面中不同的功能和特性借此传递给了用户。 下面就是可视界面设计中的一些主要元素 布局和定位 布局规定了界面中所有可视元素的结构。通过元素之间的 第一章 现代网络应用程序中的用户界面设计 � 距离,还确定了元素之间的层级和相互关系。元素距离比较近 表明它们之间存在相互关联,例如图标下面的标签。定位也能 改变整个界面的流畅性。例如将标签放在文本输入框的上面, 而不是左边,这样我们就可以方便地从上往下扫描所有元素, 而不需要看看左边,然后再找右边哪个输入框与它对应。 形状和尺寸 形状通常用来区分元素,例如,通过改变图标的外形,能够 让它们更快、更容得被辨认出来。尺寸经常用来表示重要性, 越大的元素就越重要。尺寸也可以改变可点击控件的可用性。 Fitt’s 规则告诉我们,一个可点击区域越大,用户将鼠标移动 到该区域就更快。把经常使用的按钮做大,不仅用户点击的时候 变得更容易,同时提升了界面的效率。 颜色 颜色被应用于很多地方。一种颜色在与它反差强烈的背 景色下能够吸引人的注意 (比如,在白色背景中的一 个亮黄色警示箱)。不同的 颜色可以表示不同的意义。 例如,红色经常被用来表 示危险或停止(交通灯里 的红灯),所以最好用红色来表示错误信息。而绿色一般用来 表示成功或者继续进行的信号,所以应当用在表示这类信息的 内容上。颜色也可以用来突出显示一些关系,例如在编辑的时 候,将相关的按钮用不同颜色高亮显示,来帮助用户识别。 在使用颜色的时候要记住两件事。首先,不同文化中颜色 代表的含义有所不同,所以确保你的目标用户能够识解你所选 颜色的含义。其次,不要忘记色盲用户,在区分不同元素时, 多花一些心思,使用一些颜色以外的技巧,例如一个图表中的 创造一个产品的外观和感觉并不是可 视界面设计的主要目的,而仅仅是一个 部分。最主要的目的还是沟通:通过沟 通的行为帮助用户理解应用程序。 � 众妙之门 — 网站 UI 设计之道 长条。如果用户是色盲,他们就不能区分特定的颜色,多数色 盲患者都是红绿色盲,所以你需要使用其他的方法,例如形状、 材质等。 对比 一个元素周围的黑暗或者明亮将会对元素在界面上的可用 性产生影响。这其实就是对比度在起作用。白色背景中的黑色 文本具有高对比度,比起白色背景中的灰色文字,更容易辨认 和阅读。调低一些元素的对比度,将它们融入到背景当中,用 户就能够区分出重要元素和次要元素。 材质 在交互设计中有一个概念叫做 Affordance。Affordance 是 一种能够让用户明白如何使用一种东西的特质。以把手为例。 做一个单向门的最好办法就是在拉的这一面安装一个把手,在 推的那一面装一个平坦的手柄导板。看到门,人们自然就知道 什么时候拉、什么时候推,因为门把手已经告诉了人们如何去 使用。也就是说,提供了最好的互动方式,来让用户集中精力 与正确的一个上面。 我们可以把这个主意应用到用户界面设计中,在屏幕 上使用材质。例如,在可视界面中一些元素是可以拖拽的, 就像在一个窗口的四角,我们可以对这个窗口进行缩放。 为了让用户知道可以点击、拖拽它,通常会使用一些粗糙 介质的突起。现实生活中,那些可以用手拉的物品通常会 具有比较粗糙的材质。这个主意被转移到了屏幕上,不同 的是我们不再用手指,而是用鼠标来进行拖拽。 制作有效用户界面的实用技术 我们已经讨论过了什么是用户界面,用户界面应该具备什 第一章 现代网络应用程序中的用户界面设计 � 么样的特点,以及我们可以使用的构建用户界面的工具,现在 让我们看一些可以应用在你的网络应用或网站上的实用技术。 使用空白来构建联系 空白指在各种内容元素之间的空白区域,比如标题、正文 和按钮。当在不同元素见建立联系时,空白是一个非常重要的 工具。通过收紧元素之间的空白,能够把一些相关的项目组成 一组。增加这些分组之间的空白能够更加强调这些分组与其他 内容之间的联系。使用空白,我们可以分组相关的控件,也可 以构建页面中的元素之间的层级关系。 Gmail 的工具栏通过空白的分割突出了三个分组。每个分组中的按钮都对应着 不同的功能。 使用圆角来定义边界 圆角通常用来改善图片元素的观感。它们看起来非常舒服, 并且能够为你的界面带来额外的平滑感,但这并不是圆角的全 部功能。圆角通常定义一个对象的边界。当看到圆角时,你就 知道已经到了容器的边界了。如果是一个直角,后面再跟另一 个直角的容器,它们之间的界限会不太明显。而圆角,或其他 任何类似的视觉上的处理,都能够让分界线变得更为明显。 注意在 Ballpark 的客户列表中,圆角是如何来突出每条记录的界限的。在每个 记录的中间也有两个直角,但是它们是用作相关数据之间的分割线,而不是一 个条目的边缘。 � 众妙之门 — 网站 UI 设计之道 用颜色来表达含义 颜色是一个重要的沟通工具,例如,定义不同的元素。你 可以在应用程序中使用不同的颜色来区分不同功能的按钮。红 色常被用在一些表示破坏性的按钮上,诸如删除或移动;蓝色 一般用在标准按钮上,绿色则用在保存和更新操作按钮上。使 用代码着色,我们可以分辨出屏幕中用户创建的各种各样的数 据,让它们变得更容易阅读。 引导用户的注意力 使用动画来提醒用户关注。有时候,单独使用颜色和对比 度还不足以吸引用户的注意。如果一件很重要的事情发生了, 你也确实需要确保用户能够注意到,那么就使用动画。人类的 眼睛非常适合捕捉移动的事物,特别是在固定背景中运动的时 候。如果用户在他的辅助工作的应用程序中添加一条待办事项, 或者向购物车中加入一件商品,这个时候使用动画来突出正在 发生的事情。例如,当在屏幕中 创建一个项目的时候,可以使用 高亮的效果。对于那种使用很多 Ajax技术的应用来说,这一点 特别有用。在这些情况下,页面 中的操作并不会导致页面的刷 新,高亮的部分弹出来告诉用户 发生了什么事情。 Goplan 通过在面板左侧放置不同颜色的标签,来帮助用户快速区分不同的项 目,比如任务、笔记或者博客文章。 当你在 Yammer 上发布一条信息的时 候,信息就会滑出并且高亮显示。 第一章 现代网络应用程序中的用户界面设计 � 使用阴影或深背景聚焦 另外一个将用户注意力集中到某一区域的方法是使用阴影和加 深背景。阴影通常被设置在弹出菜单或者模式窗口四周,像一张毯 子一样遮住了窗口四周的干扰元素。阴影降低了窗口下方其他元素 的对比度,反过来就增强了用户使用区域的对比度。模态窗口同样 可以在其底部使用一个黑色(或亮一点)的半透明层,减少它所覆 盖内容部分的视觉干扰,从而让用户的注意力集中在窗口上。 强调核心的动作 应用程序大多有自己特别的主要和次要界面。例如,当你 在一个项目管理应用程序中创建项目时,主表单通常包含项目 名称、项目截止日期、优先级,等等。在表单底部,你会看到 一个“创建”按钮。经常,你还会看到一个“取消”按钮或者 文本的链接。因为用户不经常使用,所以“取消”按钮并不是 很重要,因此,你就可以减少这个按钮的视觉“分量”。例如, 可以把“创建”做成一个按钮,而“取消”只做一个没有任何 视觉效果的超链接。这样中心就放在了主要的操作上,用户完 成表单的时候就能很快地定位到操作按钮。 MobileMe 在模态窗口底部使用了黑色的遮罩层,同时在窗口四周使用了阴影。借 此消除窗口以外元素的干扰,把用户注意力转移到窗口中来。 10 众妙之门 — 网站 UI 设计之道 使用块状链接提高效率 使用带填充的块状链接可以用来方便地将鼠标定位到链 接。网络应用程序构建在 HTML元素的基础上,也就意味会 使用很多的锚(通常称为 链接)标签。锚标签默认 是“内联 (inline)”元素, 意味着它的宽度和高度只 是在文本的内部。反过来 就是说,可以点击的区域 和文本的范围一样,在很 多情况下显得太小,用户 不能够很精准、舒服地进 行点击。而你可以对锚链 接使用内边距来使它变大。 对于列表中的链接,就像 侧边栏,将锚链接转化为 “块元素”是个更好的办法。 通过使用 CSS的“display” 属性,我们可以转换一个 元素的类型,所以给锚链 接增加一个“block”属性 , 就能将其转化为一个块元 素,块元素的宽度和高度 就不在局限于文本的尺寸,而默认会扩展到包含它的容器的宽 度。这种方法非常适合侧边栏中的链接。 用动词作标签 用户在使用应用程序的时候,总是准备去做一些事情,他们 总是在想动词。“我想保存这个文件”或者“我想更新这篇文章”。 这是 Ballpart 客户创建的一个表单,注意 看“Create Client” 按 钮 与“Cancel” 的 区别是多么显著。 MobileMe 侧边的导航面板,使用了带内 边距的块状链接增大了可点击区域,用户 能够快速地移动鼠标到这些区域,提升了 可用性。 第一章 现代网络应用程序中的用户界面设计 11 在创建对话框或者其他需要用户处理的应用时,使用动词而不 要使用像“是的”、“不是”、“好的”这样的表述。当用户看到 像“好的”或者“取消”这样的选项时,他们需要去阅读额外 的信息来搞明白他们要做什么。如果你使用动词,例如“保存”、 “不保存”和“取消”,用户就不需要再看其他的消息,他们马 上就知道这个对话框或选项是做什么的。 Backpack 在按钮或链接中很好地运用 了动词,确保每个选择对用户都是明 白无误的。 输入时自动 /重新聚焦 在网页文件加载完成后自动激活主表单中的输入框会给 基于表单的应用带来很大的好处。例如,搜索引擎 Google的 页面自动将焦点定位在页面的输入框中,因为几乎所有到达 Google首页的人都想在输入框中键入需要查找的内容。在其他 的应用环境中自动激活输入框也非常有用,例如,在那种需要 连续输入的应用,就像创建购物清单。在输入第一个物品之后, 用户想接着输入下一个,所以可以重新激活输入框,让用户快 速、持续地进行输入。 Tadalist 允许你快速、不断地输入待办 事项。当输入一个任务并且单击回车 后,程序会增加一个新条目,然后把 焦点重新设置在输入框中,等待用户 的下一次输入。 1� 众妙之门 — 网站 UI 设计之道 使用浮动控件进行简化和解构 很多应用程序都有一套与内容紧密相关的控件,例如一个 列表中的删除按钮和记录的编辑按钮。为了方便定位,通常这 些控件放在了每条记录的后面,但是这种情况下就造成了大量 的重复。多数的时间里,用户并不需要这些控件,需要时,也 仅仅需要其中一个特定条目的空间。 使用浮动空间,在用户移动到一个特定区域后才显示的方式, 可以简化界面。例如,当鼠标停在你想编辑的记录上时,一个编 辑按钮就会显现出来,但是其他记录的编辑按钮仍然保持隐藏。 悬浮控件是一个很棒的解构和简化界面的方法,但是在使 用这个方法之前,你 还需要考虑两件事 情。首先考虑控件是 否能被找到。用户在 使用之前,往往需要 先找到这个界面中的 元素。你的控件是否 做得足够显著以吸引 用户注意?用户经常 很自然地移动鼠标, 停留在他们正在浏览 的项目上,所以这也 许并不是一个大问 题,但是仍然值得去 思考。其次,移动设 备上的网页浏览器也 许不能模拟鼠标的动 作,那么这些控件将无法使用。 Basecamp 运行用户上传多个文件,但是每次 只显示一个文件上传按钮。 Twitter 只有在鼠标停留在一个条目上的时候才 显示“回复”和“收藏”按钮。 第一章 现代网络应用程序中的用户界面设计 1� 动态扩展表单 如果表单中的一个输入框中需要输入多个数据记录,例如, 在一段文本之后附加多个文件,或者向数据库中的公司记录里 添加多个人员信息。这种情况下,可以使用动态扩展表单,以 一种优雅的方式来实现需求。因为用户每次只能在一个输入框 中进行操作,所以每次也只需要显示一个输入框。当用户填完 并且增加了一条记录后,程序会在新记录后再创建一个额外的 输入框,允许用户键入更多的信息。这种方法替代了同时显示 多个空输入框的形式,每次你只需要显示一个空的输入框,但 是允许用户输入需要的内容。 输入框中的标签 界面的简化需要不断地思考总结。你想要砍掉一些不必要 的元素,并且为剩余的元素更好地利用空间。将标签放到输入 框内部是一个巧妙的办法。这不仅节省了空间,也清楚地表明 了与输入框对应的标签。 MobileMe 将标签放到输入内部,使它的登录界面紧凑有致。 上下文敏感的界面元素 有时,你希望为高级用户整合一些额外的功能,但是又不 想让页面臃肿。可以通过提供按需增加的上下文元素来实现。 1� 众妙之门 — 网站 UI 设计之道 例如,你的应用程序中有一个带高级搜索的搜索条,在没有使用 的时候只显示搜索条,当用户单击时再显示一些额外的控件。这 样,界面仍然保持了简洁,实现高级的功能也只需要一次点击。 用户将鼠标移动到搜索条上时, Vimeo 显示一个扩展的搜索条件, 为高级用户提供一些额外的功能。 图标 使用图标能够简化界面、让界面看起来更有吸引力,但是 在使用之前也有一些因素需要好好考虑。语言几乎总是比图标 表达得更清楚。写一个标签非常容易,只要表明这个按钮的作 用就行。然而在设计图标的时候,则需要用有效的意象来描述 操作。如果图标是一些很本土化的东西,你选择的意象在不同 的国家可能会有不同的理解(甚至连垃圾桶的形状在世界各地 都是不同的)。 屏幕中同时没有太多的图标,每个图标都能够同其他图标明 显地区分开,这种情况下图标才能发挥出最好的作用。这意味着 形状和颜色是创建一套成功图标的重要因素。使用正确的图标, 能够让界面表的容易使用。因为一旦用户熟悉了这些图标的含 义,通过形状和颜色的区别,用户就能很快找到他们想要的图标。 使用加载指示器 没有人喜欢等待。等待意味着本来可以做一些价值的事情的 时间里,你却什么都没有做。但是很不幸,每个程序都有需要花 费一些时间才能完成的特性,比如导出一个大文档或者通过查询 返回结果,用户不得不等待。但是,可以通过使用加载指示器来 让用户觉得等待的时间变短了 1 。在加载过程中,增加一个指示器, 1 http://www.usabilitypost.com/2009/01/23/maing-wait-times-feel-shorter/。 第一章 现代网络应用程序中的用户界面设计 1� 比如旋转的动画或者进度条。研究表明,在指示器存在的情况下, 用户感觉时间变短了 。加载指示器对短时的等待非常适用,但 是如果一个操作需要一分钟甚至更多来完成的情况呢?如果你 在加载的这段时间里什么都不能做(假设你已经为减少加载时 间做了最大的努力),你还是可以做一些事情来改善用户的等 待体验。利用这段时间提供娱乐或者信息。例如,很多应用程 序在长时间的等待过程中会显示一些有趣的提示或技巧。如果 用户确实做不了任何工作,起码他们可以学到一些新东西。 当用户通过 Web 界面上传文件时,Dropbox 显示一个进度条。对于类似的等 待时间不定的事件,进度条是必不可少的,这样用户就不必猜测他们究竟还 要等多长时间。 使用按钮状态提高响应性 应用程序的响应性并不仅仅依赖于后台代码结构的优化。 用户界面同样也扮演了非常重要的角色。在可视界面中被使用 得最多一个元素就是按钮。在桌面应用程序中,按钮具有多种 状态,最常见的是按钮默认状态和鼠标单击后的状态。 OtherInbox 在主导航中有一系列图标,图标底部都有相应的文字进行说明。 1� 众妙之门 — 网站 UI 设计之道 WordPress 中按钮的默认状态和按 下的状态。 Campaign Monitor 在初次登录的 时候提供了详细的帮助信息,同 时有一个很大的按钮将你带到活 动的创建页面。 按钮按下的状态看起来就像真的被按下去那样。这个状态 提示用户,他们的单击已经成功地执行了。像在桌面应用程序 一样,按钮的按下状态同样可以使用在网络应用程序中,为用 户提供一些额外的反馈和响应。 帮助性的空白状态 当用户第一次加载应用程序的时候,屏幕上不会显示过多 的内容;用户也还没有输入数据,也没有什么好显示的。在这 个空白状态中添加简短的帮助信息,来引导用户如何开始。为 了让事情更加简单,你甚至可以在信息中加入一个链接,将用 户带到推荐的操作。例如,一个管理电子邮件广告的程序,用 户创建了一个新账户后登录,应该提供给用户一段帮助信息, 其中包含一个链接到新广告的创建界面。 宣传应用程序的特点 用户对你的应用并不是十分了解,所以一些情况下在应用 程序中合理使用广告是一个很好的办法。同时,由于互联网产 品经常会进行一些细微的更新或者时不时推出一些新功能,所 第一章 现代网络应用程序中的用户界面设计 1� 以通过广告的方式让你的用户知道这些变更就变得更有意义。 一般情况下,可以通过在屏幕中的显著位置放置一个小块通 知的方式来实现。通知区域应当吸引眼球但又不至于让用户分 心,影响用户的正常工作。用户读了这个通知以后,应该可以 关掉它。 Gmail 中每次删除一封邮件的时候,都会出现撤消操作的按钮,允许我们马上 撤销删除操作。 取消操作 桌面应用程序最常用的特性之一是,值得信赖的取消快捷 键。不小心改变了正在编辑的文档图表格式?没问题,按 Ctrl/ Cmd+Z组合键,应用程序会采取撤消操作,把你的文档恢复到 最后一个动作之前的状态。取消操作是容错界面的一个重要工 具,它也可以应用在页面应用程序中。例如,你可以在网页应 用程序中加入这些熟悉的快捷键或者显示一些带有撤消链接的 临时通知信息。 在 follow 特性的主要输入区下面,Yammer 提供了一个非常有帮助的提示。用 户读完以后,可以选择点击右边的关闭框关闭。 1� 众妙之门 — 网站 UI 设计之道 Writeboard 允许用户恢复两个月内被删除的文档。 还原操作 人们在删除一些东西之后,通常会改变他们的想法,所以 在你的应用程序里增加额外的保护措施来处理一些比较重要的 数据是一个明智的做法。例如,项目管理中的项目文件。用户 删除一个项目时,将其进行存档而不是立即删除。如果用户改 变主意,希望把他们需要的项目文件取回时,程序可以轻松地 将它们还原。当用户发现所有的东西并没有丢失而感到非常高 兴时,消耗一点用户的磁盘空间是值得的。 确认对话框 当应用程序中进行诸如删除记录这样的破坏性操作时,提 供一个确认对话框,提醒用户是否确实要进行接下来的操作是 非常必要的。特别是当删除按钮的位置和其他控件非常近的时 候。如果用户不小心点击了删除,在生效之前用户可以取消操 作。但是,不要过度使用这个特性,因为不必要对话框拉长了 操作过程并让人生厌。 Freckle 使 用 确 认 对 话框来确保用户的误 操作不会造成更大的 损失。 第一章 现代网络应用程序中的用户界面设计 1� 结论 日本哲学家 kaizen 强调,通过微小、逐渐的过程来获得持 续的改进和提高。用户界面设计,特别是现代网络应用程序的 用户界面设计,并不需要一个完成的状态,因为我们总是不断 地进行改善和升级。记住,像 Kaizen 一样思考。 传统的 CD的分发模式有一个很大的缺点,一旦产品烧录 完成并寄送出去后,你就无法改变它⋯⋯或者,不是那么容易 改变 。你可以发布一个补丁,但是用户必须下载安装它才能生 效,你无法确保每个人都会进行更新。另外,为每一个细微的 改变发布补丁是不可行的,所以你必须在第一次发布的时候尽 量做到完美,而这就需要在发布之前进行大量的测试。SAAS (软件即服务)的模式改变了一切。通过网络运行你的网络应用 程序的好处是,你可以随时部署微小的更改,而用户马上就能 够访问它们。 这就意味着,现在不必在第一次发布之前将界面做到 100%正确。如果一些东西不合适,你可以修改它。通过观察 用户与界面之间的互动,你就能找到让界面工作有更好的感觉, 也能发现使用时的冲突。不管是哪一部分的用户界面需要改进, 你可以很容易地为所有用户进行更新。这就是 Kaizen 的界面 设计方法:微小的、逐渐的、常规的改进。你不再需要担心必 须在第一次就将界面做到完美。取而代之,通过不断地改进, 你将很快获得从实际使用中进化而来的伟大界面。
本文档为【众妙之门——网站UI设计之道01】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_813310
暂无简介~
格式:pdf
大小:1MB
软件:PDF阅读器
页数:19
分类:互联网
上传时间:2011-08-31
浏览量:41