《交互设计6L》

多窗口
多级帮助
1. 新手帮助 2. 内容提示 3. 输入提示 4. 帮助文档 5. 工具提示 6. 在线帮助
InteractionDesign
整理课件
20
By Caius Zhao
INFORMATION ARTCHITECTURE
推荐书籍：
• 《INFORMATION ARTCHITECTURE》（翻译版本《Web信 息架构》）
idelines.html
• / • /wiki/HomeHome
Moblie: • /mobile-patterns.php
InteractionDesign
InteractionDesign
整理课件
43
By Caius Zhao
See you next week
© MediaInteractive
整理课件
Co4n4tact Us
Lorem ipsum dolor, 03663, State, Country / P. 123 456 7890 / email@
整理课件
36
By Caius Zhao
ABOUT DESIGN PATTERN
相关书籍：
《Web界面设计》 《网站交互设计模式》 《Tap worth- Designing great iPhone Apps》
相关网站
Web:
• /ypatterns// • https:///content/api/design/enyo/guidelines.htmlgu
搜索浏览和特点内容展示
InteractionDesign
整理课件
13
By Caius Zhao
INFORMATION ARTCHITECTURE
新闻流
InteractionDesign
整理课件
14
By Caius Zhao
INFORMATION ARTCHITECTURE
图形化信息管理器
InteractionDesign
整理课件
37
By Caius Zhao
SKCETCH & PAPER PROTOTYPE
设计草图
InteractionDesign
整理课件
38
By Caius Zhao
SKCETCH & PAPER PROTOTYPE
原型PROTOTYPE
• 原型(prototypes)是把系统主要功能和接口通过快速开发制作为“模型”,以 可视化的形式展现给用户,用以征求意见,确定需求。同时也应用于开发团队内 部,作为讨论的对象和分析、设计的接口。
ASSINGMENT
本课作业： 小组产品的线框原型设计
大作业：产品的设计文档，按小组提交
文档内容包括： 1.需求背景 2.用户研究 3.产品愿景&产品需求列表 4.交互设计原型（可以是纸上原型，也可以是数字原型） 5.每位小组成员在项目产出中所负责的部分和贡献。 6.对《交互设计》这门课的意见和建议。
整理课件
31
By Caius Zhao
PAGE LAYOUT
视觉层级
突出重要的，弱化次要的方法：
• 密度：密度大的信息区域看起来要比其他区域要突出 • 背景色： 给总要内容加上高对比度的背景色也能使之突出 • 位置和大小：放在屏幕中心的面积比较大的信息区域会显得更重要 • 韵律：一些重复的信息模块会让阅读者产生韵律的感觉，韵律会让人不自觉的
整理课件
8
By Caius Zhao
INFORMATION ARTCHITECTURE
什么是信息架构？
功能操作 标签
搜索
类目 排序
InteractionDesign
By Caius Zhao
特色信息
整理课件
策略化隐藏
9
INFORMATION ARTCHITECTURE
标签
什么是信息架构？
策略化隐藏 类目
整理课件
15
By Caius Zhao
INFORMATION ARTCHITECTURE
DashBoard
InteractionDesign
整理课件
16
By Caius Zhao
INFORMATION ARTCHITECTURE
画布和画板
InteractionDesign
整理课件
17
By Caius Zhao
INTERACTIONDESIGN
第五课回顾
整理课件
Interaction1Design
By CaiusZhao
RETROSPECT
场景练习
使用场景
环境
场景名称1
场景名称2
场景名称3
…
信息
功能
期望
技术
InteractionDesign
整理课件
2
By Caius Zhao
RETROSPECT
从场景到需求
InteractionDesign
整理课件
40
By Caius Zhao
SKCETCH & PAPER PROTOTYPE
纸上原型
InteractionDesign
整理课件
41
By Caius Zhao
PRICTICE
设计草图&纸上原型的练习
InteractionDesign
整理课件
42
By Caius Zhao
被吸引。
InteractionDesign
整理课件
32
By Caius Zhao
PAGE LAYOUT
视觉流
用户浏览界面时的视觉轨迹。 • 界面元素的安排需要符合用户浏览界面时的轨迹顺序，越总要的内容让用户在
越开始的时候看到。
InteractionDesign
整理课件
33
By Caius Zhao
lesscostofnavigation导航成本是较低?界面变化导致的认知成本少?界面反应时间尽量少?导航路径尽量短interactiondesignbycaiuszhaognavigationsignpostwayfinding18导航的设计模式?演说模式?网状模式interactiondesignbycaiuszhaonavigationsignpostwayfinding19导航的设计模式?多级模式?步骤模式interactiondesignbycaiuszhaonavigationsignpostwayfinding20导航的设计模式?金字塔模式?移动与缩放interactiondesignbycaiuszhaonavigationsignpostwayfinding21导航的设计模式?模式弹出层?明确的入口interactiondesignbycaiuszhaonavigationsignpostwayfinding22导航的设计模式?逃生出口interactiondesignbycaiuszhaopagelayout23页面布局操纵使用者的注意力传达含义顺序交互两个关键词
PAGE LAYOUT
视觉流
InteractionDesign
整理课件
34
By Caius Zhao
PAGE LAYOUT
视觉流
视觉的格式塔原则： • 亲近 • 相似 • 连续 • 围合
InteractionDesign
整理课件
35
By Caius Zhao
PAGE LAYOUT
视觉层级
InteractionDesign
• 步骤模式
InteractionDesign
整理课件
26
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
导航的设计模式
• 金字塔模式
• 移动与缩放
InteractionDesign
整理课件
27
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
什么是导航？
InteractionDesign
整理课件
22
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
什么是导航？
• 告知用户现有位置 • 下一步可以去哪 • 怎么去？
InteractionDesign
整理课件
23
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
By Caius Zhao
INFORMATION ARTCHITECTURE
任何页面都大致都有如下任务：
1. 展示独占信息 （地图、书、视频或游戏等） • 多视图 • 多窗口
2. 展示一列信息 （信息列表） • 搜索浏览和特点内容展示 • 新闻流 • 图形化内容管理器 • 拇指图、分页器、双面板选择器
InteractionDesign
整理课件
6
By Caius Zhao
INTERACTIONDESIGN
交互第六课 | IA, Pattern & Paper Prototype
赵偲 2011.12.20
整理课件
Interaction7Design
By CaiusZhao
INFORMATION ARTCHITECTURE
• 原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定的方案。
InteractionDesign
整理课件
39
By Caius Zhao
SKCETCH & PAPER PROTOTYPE
纸上原型
• 原型设计的一种方法 • 优点： 速度快、成本低（文艺） • 弱点： 保真度低、交互效果表达不太直观 • 适用范围：设计初期流程框架、基本功能的设计决策
什么是信息架构？
信息架构是组织信息空间的艺术。
1. 分享信息的环境的结构设计 2. 在网站中或网站间的包括了信息组织、标定、搜索、导航的系统 3. 用来支持usability和findability信息产品体验设计的艺术和技术 4. 一种新兴的专注于将设计和结构的原则应用于数码领域的实践学科
InteractionDesign
导航的设计模式
• 模式弹出层
• 明确的入口
InteractionDesign
整理课件
28
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
导航的设计模式
• 逃生出口
InteractionDesign
整理课件
29
By Caius Zhao
PAGE LAYOUT
排序 浏览
InteractionDesign
By Caius Zhao
整理课件
搜索 功能操作
10
INFORMATION ARTCHITECTURE
组织信息的方法
• 展示 • 搜索 • 浏览 • 标签 • 类目化 • 排序 • 操作 • 策略性的隐藏信息
InteractionDesign
整理课件
11
设计模式
• 信息架构 • 导航 • 页面排版 • 信息列表 • 功能操作 • 复杂信息展示（图、表） • 信息输入表单 • 社交
InteractionDesign
整理课件
5
By Caius Zhao
ASSINGMENT
根据用户使用场景完善需求定义。 按照设计模式分类去了解设计模式。并且找到一些案例。每个分类找4个。
• 业务需求 • 数据需求 • 功能需求 • 技术需求 • 情感需求 • 品牌需求
InteractionDesign
整理课件
3
By Caius Zhao
RETROSPECT
• 什么是行为模型？ • 为何要了解行为模型？
InteractionDesign
整理课件
4
By Caius Zhao
RETROSPECT
页面布局
操纵使用者的注意力、传达含义、顺序、交互 两个关键词： • 视觉层级 • 视觉流
InteractionDesign
整理课件
30
By Caius Zhao
PAGE LAYOUT
视觉层级
突出重要的，弱化次要的 • 根据页面任务，按重要等级排序页面的元素 • 搞清楚元素之间的关系
InteractionDesign
整理课件
24
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
导航的设计模式
• 演说模式
• 网状模式
InteractionDesign
整理课件
25
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING
导航的设计模式
• 多级模式
感谢亲观看此幻灯片，此课件部分内容来源于网络， 如有侵权请及时联系我们删除，谢谢配合！
3. 提供工具用与创作信息 （文本、图片、视频的创作） • 画布+调色板 • 多窗口 • 多视图 • 输入&操作提示
4. 辅助完成一个Task （注册、登陆、认证、查找等）
• Wizard • 设置面板
InteractionDesign
整理课件
ቤተ መጻሕፍቲ ባይዱ
12
By Caius Zhao
INFORMATION ARTCHITECTURE
什么是好的导航？
• 能否顺利告知用户现有位置？（Staying Found） • 好的路标 • 环境线索 • 地图（sitemap）
• 导航成本是否比较低？（Less Cost of Navigation） • 界面变化导致的认知成本少 • 界面反应时间尽量少 • 导航路径尽量短
InteractionDesign
INFORMATION ARTCHITECTURE
设置面板
InteractionDesign
整理课件
18
By Caius Zhao
INFORMATION ARTCHITECTURE
多视图
InteractionDesign
整理课件
19
By Caius Zhao
INFORMATION ARTCHITECTURE
• 《Tagging: People-Powerd Metadata for the Social Web》 • 《Designing for the Social Web》
InteractionDesign
整理课件
21
By Caius Zhao
NAVIGATION, SIGNPOST & WAYFINDING