Web界面设计实例
14界面设计-页面布局设计的基本理论及Web界面常见的版式设计类型(1)
栅格外边距，与屏宽保持一定的安全距离。
页面布局设计的基本理论
盒子/区域
建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度， 我们把这个区域理解为内容盒子，用于承载一个区域的内容。
页面布局设计的基本理论
如何搭建栅格系统
1、确定屏幕尺寸，确定安全范围 2、确定关键数据：列的数量、水槽的宽度
左右分割型
整个版面分割为左右两部分, 分别配置文字和图片。
其他版式设计类型
中轴型
垂直排列的版面,给人强烈 的动感。
曲线型
图片和文字,排列成曲线
其他版式设计类型
倾斜型
版面主体形象或多幅图像作 倾斜编排
对称型
对称一般以左右对称居多
其他版式设计类型
焦点型
版面产生视觉焦点,使其更 加突出。
自由型
无规律的、随意的编排构成
海报型布局 标题文本型布局 综合型布局
Web界面常见的版式设计类型
常见的web界面版式设计类型
国字型布局 匡字型布局 三字型布局 川字型布局
海报型布局 标题文本型布局 综合型布局
Web界面常见的版式设计类型
常见的web界面版式设计类型
国字型布局 匡字型布局 三字型布局 川字型布局
海报型布局 标题文本型布局 综合型布局
界面设计
页面布局设计的基本理论
及Web界面常见的版式设计类型
天津电子信息职业技术学院
知识要点 页面布局设计的基本理论 Web界面常见的版式设计类型 其他版式设计类型
第一部分
页面布局设计的基本理论
重点掌握
页面布局设计的基本理论
格式塔原理
格式塔心理学诞生于1912年，是 由德国心理学家组成的研究小组试 图解释人类视觉的工作原理。 其中最基础的发现是人类视觉是整 体的； “形状”和“图形”在德 语中是Gestalt，因此这些理论也 称做视觉感知的格式塔原理。
第8章Web界面设计
的信息内容来分类的。 对目标用户的行为方式来分析：按照人机工程学的
观点，行为方式受年龄、性别、地区、种族、职业、 生活习俗、受教育程度等因素影响。
人机交互技术编写组
34
8.6 Web界面概要设计
Web界面概要设计包括 Web界面框架设计 Web界面的内容与风格的设计 Web界面设计的语言与文化
人机交互技术编写组
16
8.4.1 站点架构和导航设计
站点结构
站点的结构可分为逻辑结构和物理结构:
逻辑结构描述文档间的关系，定义文档间的链接。 物理结构描述文档的实际位置及显示方式 。
超文本结构中最常用层次结构
层次型结构按信息的必要性来改变信息的显示方式。 根网页是站点的主页，层次以根网页开始。 用户深入站点时，选择趋向于越来越具体，直到找
人机交互技术编写组
21
8.5.1 Web界面设计基本原则
1．了解浏览者的心理状态
从心理学的角度分析浏览者的心理状态，有 助于网页页面的设计。
在单击“退回”按钮之前有三秒钟而且只有 三秒的等待。
必须迅速地把有趣和有吸引力的东西显示出 来。
人机交互技术编写组
22
8.5.1 Web界面设计基本原则
人机交互技术编写组
31
8.5.2 Web界面规划
确定Web界面设计的目标
企业Web网站：
企业建立这个Web网站的目的 这个网站的作用 该提供哪些吸引访问者的东西 用户访问这个Web网站后，能给他们带来什么？
个人Web网站 ：
主要是展现自我、演练技术 。 建立的Web网站要有个性和特色 。
人机交互技术编写组
9
前端开发实训案例构建响应式网页设计
前端开发实训案例构建响应式网页设计一. 案例介绍随着互联网的发展和用户需求的不断变化，响应式网页设计成为前端开发中的重要环节。
本文将通过一个前端开发实训案例，详细介绍如何构建一个响应式网页设计。
二. 实训需求分析1. 了解实训目标：明确实训的目的，是为了提高学生对响应式设计的理解和实践能力。
2. 分析用户需求：根据用户群体的特点和需求，确定实训案例的具体内容。
3. 设计网页结构：确定网页的布局和整体框架，包括导航栏、内容区域、底部等。
三. 网页设计与开发1. 响应式设计理念：介绍响应式设计的概念和原理，包括流动网格、弹性图片和媒体查询等。
2. HTML结构设计：使用语义化的HTML标签，按照网页结构要求进行标签的嵌套和布局。
3. CSS样式设计：通过CSS选择器和属性设置，对网页的样式进行定制化设计，包括颜色、字体、背景等。
4. 媒体查询技术：利用媒体查询技术，根据不同设备的屏幕尺寸和显示能力，调整网页布局和样式。
5. 图片和多媒体元素：优化图片和多媒体元素的加载和显示，提高网页的性能和用户体验。
四. 响应式网页实施与测试1. 响应式布局测试：使用不同尺寸的设备进行网页布局测试，包括桌面、平板和手机等。
2. 浏览器兼容性测试：在不同的浏览器和版本上进行兼容性测试，确保网页在各种环境下的正常显示。
3. 设备适配性测试：测试网页在各种设备上的适配性和用户体验，包括操作便捷性和页面加载速度等。
4. 调试与优化：根据测试结果进行网页的调试和优化，修复存在的Bug和提升网页的性能。
五. 实训心得与总结通过本次前端开发实训案例，我深刻理解了响应式网页设计的重要性和实践技巧。
在实践过程中，我学会了使用HTML和CSS创建网页结构和样式，并运用媒体查询和优化技巧实现网页的响应式设计。
通过测试和调试，我进一步提升了网页的兼容性和用户体验。
实训过程中遇到的问题和解决方法也使我得到了成长和进步。
六. 结束语通过这个实训案例，我深刻认识到前端开发中响应式网页设计的重要性，它能够为用户提供更好的访问体验，适用于不同的设备和屏幕尺寸。
动态web课程设计实例
动态web课程设计实例一、教学目标本课程的目标是让学生掌握动态web课程的基本知识和技能，能够运用所学知识设计和开发简单的动态网页。
具体来说，知识目标包括了解动态web的基本概念、掌握HTML、CSS和JavaScript的基本语法和用法；技能目标包括能够使用HTML、CSS和JavaScript设计和开发静态网页，掌握至少一种动态网页开发技术，如PHP或JavaScript；情感态度价值观目标包括培养学生的团队合作意识、创新精神和对计算机科学的热爱。
二、教学内容本课程的教学内容主要包括动态web的基本概念、HTML、CSS、JavaScript的基本语法和用法，以及动态网页开发技术。
具体来说，将教授HTML标签的使用、CSS样式的设置、JavaScript的基本语法和用法，以及动态网页开发技术的基本概念和用法。
教学内容将按照教材的章节进行安排，每个章节都会有相应的课堂讲解和实践操作。
三、教学方法为了激发学生的学习兴趣和主动性，本课程将采用多种教学方法。
包括讲授法、讨论法、案例分析法和实验法。
讲授法用于讲解基本概念和语法，讨论法用于讨论问题和研究解决方案，案例分析法用于分析实际案例，实验法用于实践操作。
通过多样化的教学方法，使学生能够更好地理解和掌握所学知识。
四、教学资源为了支持教学内容和教学方法的实施，丰富学生的学习体验，我们将选择和准备适当的教学资源。
包括教材、参考书、多媒体资料和实验设备。
教材将作为主要的学习资源，参考书用于拓展知识，多媒体资料用于辅助讲解和实践操作，实验设备用于实践操作和实验。
教学资源的选择和准备将根据教学目标和教学内容进行，确保与课本有关联性，符合教学实际。
五、教学评估本课程的评估方式包括平时表现、作业和考试。
平时表现主要评估学生的课堂参与和团队合作能力，作业评估学生的知识掌握和应用能力，考试评估学生的综合运用能力。
评估方式将客观、公正，全面反映学生的学习成果。
具体的评估标准和方式将在课堂上详细讲解。
web课程设计案例
web课程设计案例一、教学目标本课程的教学目标是使学生掌握Web开发的基本原理和技术，能够独立完成简单的Web应用设计与开发。
具体分为三个部分：1.知识目标：学生需要了解Web开发的基本概念、技术体系和开发工具，掌握HTML、CSS和JavaScript的基本语法和应用方法。
2.技能目标：学生能够熟练使用HTML、CSS和JavaScript编写简单的Web页面，掌握常用的Web开发工具和框架，如Visual Studio Code、Bootstrap等。
3.情感态度价值观目标：培养学生对Web开发的热情和兴趣，提高他们的创新意识和团队协作能力，使他们在实际项目中能够独立思考、解决问题。
二、教学内容根据课程目标，教学内容主要包括以下三个方面：1.Web开发基础知识：介绍Web开发的基本概念、技术体系和开发工具，使学生了解Web开发的整体框架。
2.HTML、CSS和JavaScript编程：详细讲解HTML、CSS和JavaScript的基本语法和应用方法，通过实例使学生掌握常用的Web页面布局和交互效果。
3.Web开发实战：结合实际项目，让学生动手实践，掌握常用的Web开发工具和框架，培养学生的实际操作能力。
三、教学方法为了达到课程目标，我们将采用以下教学方法：1.讲授法：讲解Web开发的基本概念、技术体系和开发工具，使学生了解Web开发的整体框架。
2.案例分析法：通过分析实际案例，使学生掌握HTML、CSS和JavaScript的应用方法，培养学生的实际操作能力。
3.实验法：让学生动手实践，实际操作Web开发工具和框架，提高他们的技能水平。
4.讨论法：学生进行团队协作，讨论实际项目中的问题和解决方案，培养学生的创新意识和团队协作能力。
四、教学资源为了支持课程内容和教学方法的实施，我们将准备以下教学资源：1.教材：选用权威、实用的Web开发教材，为学生提供系统的学习资料。
2.参考书：推荐学生阅读一些优秀的Web开发书籍，丰富他们的知识体系。
22个网页设计经典案例不容错过
22个网页设计经典案例不容错过22个网页设计经典案例不容错过！22个网页设计经典案例不容错过！2015-12-29 10:30:14 |阅读原文摘要：响应式页面设计与传统设计的技术和创意方面有着显著的不同，巧妙利用响应式设计在设计网站时就能得到惊人的效果。
Responsive web design【响应式网页设计】这个概念与开发网站设计有关，该设计用以帮助网页适应每个用户的计算机的分辨率，即根据每个用户使用的计算机的分辨率不同而改变网页的表现方式。
更确切地说，这个概念允许一个4列布局的1292px 宽度的网页可以在1025px的宽度屏幕中显示并自动简化成为两列。
此外，它还能适应智能手机和电脑平板电脑。
这种特殊的设计理念我们称之为“响应式设计”。
现在你可以测试一下你的网站使用的响应式设计工具。
相比较与传统的网页开发设计，响应式网页设计是一个完全不同的形式，并且开发人员【尤其是年轻的开发人员】要知道响应式网页设计的利与弊。
这篇博客就是一个能够说明响应式网页设计用途的一个很有用的例子。
用来开发一个响应式网站最基础直接的可能就是选择“media queries”【媒体查询，即根据条件给相应符合条件的媒体调用相应的样式表】。
然而唯一比较麻烦的是，新的查询可以在瞬间弹出，但每一次跳动，网页的外观和组织都会产生突然和急剧的变化。
专家建议这种情况可以使用CSS来缓解页面的跳动。
包含数据表的页面给响应式页面设计师带来了特殊挑战。
数据表在默认的情况下是非常宽的，当用户缩小页面去看整个列表时，列表就会变得太小以至于难以阅读。
但当你试着放大它以便可以阅读时，就只能通过水平或竖直的滚动页面来查看它。
好吧，其实是有多种方式来避免这个问题的。
转变数据表的形式为饼状图或者微型图形是已经被认可的一种解决方式。
这种迷你图形更适合狭小的屏幕。
图片在响应式页面设计中被称作情景感知。
这独有的技术服务存在真正意义是在响应式设计中可以作为图像服务于不同的分辨率，从大屏幕到小屏幕都可以完美适应。
flutter web 例子
一、介绍Flutter WebFlutter是由Google推出的一款跨评台的应用开发框架，它可以帮助开发者用一套代码构建出适配多个评台的应用。
除了移动评台，Flutter还可以应用于web和桌面应用的开发。
在本文中，我们将重点探讨Flutter在web开发中的实际应用，以及通过实例来展示其强大的功能和优势。
二、Flutter Web的优势1.一套代码，多端运行Flutter Web允许开发者使用同一套Dart代码来构建移动端和web端的应用，大大提高了开发效率。
开发者不再需要针对不同的评台编写不同的代码，减少了重复的工作量。
2.跨评台适配性Flutter Web可以很好地适配不同的浏览器和操作系统，保证了应用在不同评台上的一致性和稳定性。
3.丰富的组件库Flutter提供了丰富的组件库，可以轻松构建出漂亮、流畅的web界面，带来更好的用户体验。
Flutter还支持自定义的组件和动画效果，使开发者能够实现更加个性化和独特的界面设计。
4.优秀的性能表现Flutter Web使用了自身高效的渲染引擎，可以在web端实现出色的性能表现，包括页面加载速度、交互响应等方面都能达到较好的水平。
三、Flutter Web的实际运用接下来，我们将通过一个实例来展示Flutter Web在实际开发中的应用。
假设我们需要开发一个简单的在线购物全球信息湾，包括商品展示、购物车功能以及订单结算等。
我们将使用Flutter Web来完成整个全球信息湾的开发，并展示其在这个项目中的优势和特点。
1.创建项目我们需要创建一个新的Flutter Web项目。
在Flutter的官方文档中，提供了详细的项目创建和配置教程，开发者可以按照指引来完成项目的初始化工作。
2.构建界面在项目创建完成后，我们将使用Flutter提供的组件库来构建全球信息湾的界面。
这里我们可以利用Flutter丰富的布局组件、文本组件、图片组件等，快速、灵活地搭建出全球信息湾的各个页面和功能模块。
前端开发实训案例响应式网页设计与开发
前端开发实训案例响应式网页设计与开发响应式网页设计是指网页能够根据用户的设备和屏幕尺寸自动适应不同的布局和展示效果，以提供更好的用户体验。
在本篇文章中，将介绍一个前端开发的实训案例，重点讨论如何设计和开发一个响应式网页。
一、需求分析在开始开发之前，需要明确网页的需求和目标。
例如，一个响应式网页可能需要适应不同尺寸的屏幕，提供良好的用户界面，同时保持页面的美观和一致性。
为了实现这些目标，我们需要进行仔细的需求分析和规划。
二、网页设计1. 界面布局设计响应式网页设计的核心是适应不同屏幕尺寸和设备。
我们可以使用流式布局或者媒体查询等技术来实现这一目标。
根据需求和目标设定，在设计网页的布局时，应该考虑到不同设备的显示效果，并合理安排各个元素的位置和大小。
2. 图片和媒体设计在设计响应式网页时，需要特别关注图片和媒体的显示效果。
我们可以通过使用自适应图片和响应式媒体等技术，来确保在不同屏幕尺寸下，图片和媒体能够正常显示，并保持页面的美观性。
3. 色彩和字体设计色彩和字体的选择对网页的整体效果起着重要的影响。
在设计过程中，应该选择适合不同屏幕尺寸的主题色彩和字体，并遵循用户友好的原则。
三、网页开发1. HTML 结构开发根据设计稿，使用 HTML 语言创建网页的结构。
在这个过程中，应该合理使用标签和元素，保持文档结构的清晰和语义的准确。
2. CSS 样式添加使用 CSS 样式为网页添加样式和布局。
在这个过程中，可以使用媒体查询，为不同屏幕尺寸设置不同的样式规则，以适应响应式设计的需求。
3. JavaScript 交互开发根据网页的需求和目标，使用 JavaScript 为网页添加交互效果，提高用户的体验。
例如，添加导航菜单的下拉功能、图片轮播等交互效果。
四、测试和优化在开发完成后，需要对网页进行测试和优化。
测试的目的是确保网页在不同设备上的显示效果和性能表现。
根据测试结果，对代码进行优化，修复 bug 和提高网页的加载速度和性能。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
页内编辑：多字段行内编辑 (Backpackit)
1 邀请编辑
3 编辑
2 转换至编辑模式
4 完成
5
页内编辑：混合显示和编辑模式
图：Yahoo!360通过“Edit Blast”链接邀请编辑 图：Yahoo!360在实现“冲击波”由显示到编辑模式切换时，把视觉上的差异降到了最低
图：Yahoo!360能在编辑模式下实时显示新的“冲击波”样式
嵌入层列表 单击一篇文章会扩展显示包 含该内容的嵌入层。列表中 的其他标题仍然保留在视图 中。
图：在列表视图中，Google Reader以折叠列表形式显示所有文章——当前选择的文章除外。
原理三：足不出户 —— 交互式单页
图：Gap使用交互式单页实时显示每种颜色有货的尺码
原理三：足不出户 —— 交互式单页
太短 反馈实时给出。密码太短 了。
中等 在用户改变密码强弱时， 动态测量密码强度。
强 漫行的蓝色加上“strong” 表明密码很安全。
原理六：即时反应 —— 即时反馈
注册表单 开始时，表单中只显示简章的提 示和输入框。
检查是否可用 当在“Desired username”中输 入用户名后，会显示“Check Availability”按钮。单击可以检 查用户名。
8
利用拖放：拖放列表
图：Backpackit支持以直接拖放方式重排计划任务列表项
9
利用拖放：拖放对象
图：Cogmap支持以拖放方式动态重排组织结构图
10
拖动反馈：突出显示
图：会通过突出显示节点来表明被拖动的节点将成为哪个节点的子节点。
11
直接选择
图：Gmail让用户通过复选框选择并操作邮件
6
页内编辑：覆盖层编辑 (Yahoo!Trip Planner)
1
2
非编辑状态 3
邀请编辑 4
编辑
完成
7
注意事项
图：Yahoo!Trip Planner为旅行者调整在目的地的行程提供一个覆盖层编辑器
图：为选择每天的时间提供了更好的体验。 显然，在一个列表中选择时间（或输入时间）比打开多个下拉菜单更直接。
原理六：即时反应 —— 即时反馈
检查 正在检查用户名是否可用。
尝试另一个名字 如果用户名已经被别人注册， 按钮就会变成“Try another name”。
图：Google在创建帐户之前通过实时预览来显示密码强度
原理六：即时反应 —— 渐进展现
搜索启动 单击“Search”按钮触发第一 种进度指示，即把搜索按钮的 标签修改为“Searching…”
原理三：足不出户 —— 对话框覆盖层
图：Google Reader的较早版本中曾使用过Javascript警告框；但Windows和Macintosh的警告框表现方 式不同。 目前已经被轻量级覆盖层所取代。
原理三：足不出户 —— 详情覆盖层
图：AOL Finance在显示附加信息的同时没有妨碍导航；详细信息通过单击蓝色按钮激活。
原理三：足不出户 —— 嵌入层
自定义嵌入层 BBC主页的自定义控件直接 出现在页面的上下文中。
图：BBC主页将自定义工具放在了一个嵌入层中，一旦激活该嵌入层会向下滑出。
原理三：足不出户 —— 列表嵌入层
Google Reader的列表视图 在列表视图中，只以列表形 式显示每篇博客文章的标题。
原理三：足不出户 —— 列表嵌入层
12
原理二：简化交互
图：在Digg上单击每篇文章旁边的“Digg”按钮可以轻松地推举好文章
13
原理二：简化交互
图：在 Digg的第一版中，要推举一篇文章，需要打开新页面
14
原理二：简化交互
图：Digg现在通过“digg it”按钮可以在同一个页面中记录一次推荐
15
原理二：简化交互 实时可见工具
图：Amercian Express通过输入覆盖层引导用户填写注册信息。
退出 单击任何区域，覆盖层退出。 用户可以通过覆盖层单击被 遮挡的字段。
原理三：足不出户 —— 嵌入层
激活 点击”Customize homepage”按钮可以激活 自定义嵌入层。
原理三：足不出户 —— 嵌入层
自定义嵌入层(滑出） 嵌入层滑进视图。
原理三：足不出户 —— 输入覆盖层
输入表单 表单中的每个字段都有简单 的输入提示。此时没有其他 帮助信息。
输入覆盖层 切换进入或单击某个字段， 会在该字段周围显示一个覆 盖层。其中包含更详细的帮层
遮挡字段 覆盖层会遮挡下面的字段， 但不会遮挡左、右侧的字段。
选择数据 在第一栏中，日历显示可选日期。也可以从中选择入住和离店日期。 根据选定日期和入住的人数，会显示出可以预订的房间类型。
原理三：足不出户 —— 交互式单页
房间及付款 第二栏显示可以预订的房间。 选择房间后，右侧则会显示价格信息。 在第三栏填写信用卡及联系方式可以完成预定。 图：Broadmoor Hotel为预订房间提供了一个单页系统。
Web界面设计实例
Web界面设计
以六大 设计原理为依托，结合现代认知心理学的最新发展成果，展示流行Web应用程序的
界面设计实例。
直截了当 简化交互 足不出户 提供邀请 巧用变换 即时反应
2
原理一：直截了当
Web应用程序通常须要用户在新页面中编辑信息
在Flickr中，直接单击标题即可实现行内编辑
图：Gamil支持通过上下文工具为邮件加星标 单击一下星标就可以将邮件标记为重要。未加星的状态被处理成浅颜色和低对比度，从而 把列表的干扰降至最低。
原理二：简化交互
图：Google Reader管理订阅的页面为每个订阅都显示了很多操作，页面看起来比较拥挤
17
原理二：简化交互 悬停即现工具
图：Backpackit在鼠标悬停时显示可用的工具 提示：为了减少视觉干扰，可以将非主要操作先隐藏起来，而在需要时再显示。
原理六：即时反应
实时建议 用户输入”ajax”时，页面左手边会给出建议的关键词。
原理六：即时反应
实时搜索 此时，第一个匹配的关键词“ajax”会触发实时搜索，并在实时建议的上下文中显示搜索结果。
原理六：即时反应
切换其他搜索建议 实时建议区变成了实时搜索导航器。单击“ajax amsterdam”，右边的窗格中会显示搜索结果。 图：的LiveSearch是组合实时建议与实时搜索的尝试
转移 几秒钟后，搜索结果页显示出 来。不过，现在还没有结果。 但是，页面以三种方式给出了 进度指示：“显示结果”页面、 “动态票价”预算和进度指示 条。
原理六：即时反应 —— 渐进展现
分批显示结果 现在显示了第一组结果。票价预算 面板的动画结束。进度条也折叠为 位于结果上方的小条。
完成 显示全部结果。进度条消失。
原理六：即时反应 —— 微调搜索
左侧筛选，右侧显示结果 这是一个典型的微调搜索式布局。左侧筛选区包含复选框和滑动条。
原理六：即时反应 —— 微调搜索
实时微调 修改筛选条件，实时调整结果。 图：Kayak使用微调搜索模型为用户提供了实时调整行程的功能
原理六：即时反应 —— 即时反馈
图：Google在创建帐户之前通过实时预览来显示密码强度
原理五：巧用变换 —— 聚光灯效果
图：Backpackit通过聚光灯效果突显界面变化
修改前 选择“Edit”
修改中 原地出现编辑字段。按下 “Rename this list”按钮。
突显变化 修改后，新标题被迅速加亮。聚 光灯效果在1秒钟内淡出。。
聚光灯效果淡出 1秒钟到了，聚光灯效果淡出为 原先的白色背景。
原理二：简化交互
图：如果采用始终显示的上下文工具，Backpackit的界面会变成什么样。
原理二：简化交互
图：Yahoo!Buzz在突出显示行的同时显示了相关工具
原理三：足不出户 —— 对话框覆盖层
激活 单击“Buy”按钮启动购买 过程。
显示覆盖层 通过轻量级覆盖层显示确认 对话框。
图：Netflix使用轻量级的覆盖层来让用户确认是否要购买以前查看过的DVD；而且，这还是一个应用 了亮盒的模态覆盖层。
原理四：提供邀请 —— 静态邀请
图：Yahoo!Answer和Discover Card使用了明确的1-2-3步骤来提供引导操作邀请
原理四：提供邀请
图：文本邀请及引导操作按钮都是给出引导操作邀请的方式
原理四：提供邀请
图：Yahoo!登录区域给出了引导操作邀请，吸引用户添加登录封印：第一个方案（左） 使用褶角图像吸引用户注意；第二个方案（右）使用了带有不同背景颜色的矩形区域
3
原理一：直截了当
Cooper总结了一条简单的规则：在哪里输出，就要在哪里输入。从更一般的意义上来理解，就是 让界面能够直接响应用户的操作——直截了当。 为了说明这条规则，我们将探讨一些主要的交互模式，采用这些模式有助于界面更直接地响应用 户操作。 • 页内编辑：直接编辑内容 • 利用拖放：使用鼠标直接移动对象 • 直接选择：通过操作直接选择对象
图：Farecast利用了多种进度指示器让界面给人爽快灵敏之感。
Q&A