交互设计课程L6.ppt

1、INTERACTIONDESIGN,Interaction Design By CaiusZhao,第五课 回顾,RETROSPECT,1,场景练习,RETROSPECT,2,从场景到需求 业务需求 数据需求 功能需求 技术需求 情感需求 品牌需求,RETROSPECT,3,什么是行为模型？ 为何要了解行为模型？,RETROSPECT,4,设计模式,信息架构 导航 页面排版 信息列表 功能操作 复杂信息展示（图、表） 信息输入表单 社交,5,InteractionDesign,By Caius Zhao,ASSINGMENT,根据用户使用场景完善需求定义。 按照设计模式分类去了解设计模式。并且

2、找到一些案例。每个分类找4个。,INTERACTIONDESIGN,赵偲 2011.12.20,Interaction Design By CaiusZhao,交互第六课 | IA, Pattern & Paper Prototype,INFORMATION ARTCHITECTURE,1,InteractionDesign,By Caius Zhao,什么是信息架构？,信息架构是组织信息空间的艺术。 1. 分享信息的环境的结构设计 2. 在网站中或网站间的包括了信息组织、标定、搜索、导航的系统 3. 用来支持usability和findability信息产品体验设计的艺术和技术 4. 一种新

3、兴的专注于将设计和结构的原则应用于数码领域的实践学科,INFORMATION ARTCHITECTURE,2,InteractionDesign,By Caius Zhao,什么是信息架构？,INFORMATION ARTCHITECTURE,3,InteractionDesign,By Caius Zhao,什么是信息架构？,INFORMATION ARTCHITECTURE,4,InteractionDesign,By Caius Zhao,展示 搜索 浏览 标签 类目化 排序 操作 策略性的隐藏信息,组织信息的方法,INFORMATION ARTCHITECTURE,5,Interact

4、ionDesign,By Caius Zhao,任何页面都大致都有如下任务： 展示独占信息 （地图、书、视频或游戏等） 多视图 多窗口 展示一列信息 （信息列表） 搜索浏览和特点内容展示 新闻流 图形化内容管理器 拇指图、分页器、双面板选择器 提供工具用与创作信息 （文本、图片、视频的创作） 画布+调色板 多窗口 多视图 输入&操作提示 辅助完成一个Task （注册、登陆、认证、查找等） Wizard 设置面板,INFORMATION ARTCHITECTURE,6,InteractionDesign,By Caius Zhao,搜索浏览和特点内容展示,INFORMATION ARTCHITE

5、CTURE,7,InteractionDesign,By Caius Zhao,新闻流,INFORMATION ARTCHITECTURE,8,InteractionDesign,By Caius Zhao,图形化信息管理器,INFORMATION ARTCHITECTURE,9,InteractionDesign,By Caius Zhao,DashBoard,INFORMATION ARTCHITECTURE,10,InteractionDesign,By Caius Zhao,画布和画板,INFORMATION ARTCHITECTURE,11,InteractionDesign,By

6、Caius Zhao,设置面板,INFORMATION ARTCHITECTURE,12,InteractionDesign,By Caius Zhao,多视图,INFORMATION ARTCHITECTURE,13,InteractionDesign,By Caius Zhao,多窗口,新手帮助 内容提示 输入提示 帮助文档 工具提示 在线帮助,多级帮助,INFORMATION ARTCHITECTURE,14,InteractionDesign,By Caius Zhao,推荐书籍： INFORMATION ARTCHITECTURE（翻译版本Web信息架构） Tagging: Peop

7、le-Powerd Metadata for the Social Web Designing for the Social Web,NAVIGATION, SIGNPOST & WAYFINDING,15,InteractionDesign,By Caius Zhao,什么是导航？,NAVIGATION, SIGNPOST & WAYFINDING,16,InteractionDesign,By Caius Zhao,什么是导航？,告知用户现有位置 下一步可以去哪 怎么去？,NAVIGATION, SIGNPOST & WAYFINDING,17,InteractionDesign,By C

8、aius Zhao,什么是好的导航？,能否顺利告知用户现有位置？（Staying Found） 好的路标 环境线索 地图（sitemap） 导航成本是否比较低？（Less Cost of Navigation） 界面变化导致的认知成本少 界面反应时间尽量少 导航路径尽量短,NAVIGATION, SIGNPOST & WAYFINDING,18,InteractionDesign,By Caius Zhao,导航的设计模式,演说模式,网状模式,NAVIGATION, SIGNPOST & WAYFINDING,19,InteractionDesign,By Caius Zhao,导航的设计模式

9、,多级模式,步骤模式,NAVIGATION, SIGNPOST & WAYFINDING,20,InteractionDesign,By Caius Zhao,导航的设计模式,金字塔模式,移动与缩放,NAVIGATION, SIGNPOST & WAYFINDING,21,InteractionDesign,By Caius Zhao,导航的设计模式,模式弹出层,明确的入口,NAVIGATION, SIGNPOST & WAYFINDING,22,InteractionDesign,By Caius Zhao,导航的设计模式,逃生出口,PAGE LAYOUT,23,InteractionDes

10、ign,By Caius Zhao,页面布局,操纵使用者的注意力、传达含义、顺序、交互 两个关键词： 视觉层级 视觉流,PAGE LAYOUT,24,InteractionDesign,By Caius Zhao,视觉层级,突出重要的，弱化次要的 根据页面任务，按重要等级排序页面的元素 搞清楚元素之间的关系,PAGE LAYOUT,25,InteractionDesign,By Caius Zhao,视觉层级,突出重要的，弱化次要的方法： 密度：密度大的信息区域看起来要比其他区域要突出 背景色： 给总要内容加上高对比度的背景色也能使之突出 位置和大小：放在屏幕中心的面积比较大的信息区域会显得更

11、重要 韵律：一些重复的信息模块会让阅读者产生韵律的感觉，韵律会让人不自觉的被吸引。,PAGE LAYOUT,26,InteractionDesign,By Caius Zhao,视觉流,用户浏览界面时的视觉轨迹。 界面元素的安排需要符合用户浏览界面时的轨迹顺序，越总要的内容让用户在越开始的时候看到。,PAGE LAYOUT,27,InteractionDesign,By Caius Zhao,视觉流,PAGE LAYOUT,27,InteractionDesign,By Caius Zhao,视觉流,视觉的格式塔原则： 亲近 相似 连续 围合,PAGE LAYOUT,28,Interactio

12、nDesign,By Caius Zhao,视觉层级,ABOUT DESIGN PATTERN,29,InteractionDesign,By Caius Zhao,相关书籍： Web界面设计 网站交互设计模式 Tap worth- Designing great iPhone Apps 相关网站 Web: Moblie: ,SKCETCH & PAPER PROTOTYPE,30,InteractionDesign,By Caius Zhao,设计草图,SKCETCH & PAPER PROTOTYPE,31,InteractionDesign,By Caius Zhao,原型(protot

13、ypes)是把系统主要功能和接口通过快速开发制作为“模型”,以可视化的形式展现给用户,用以征求意见,确定需求。同时也应用于开发团队内部,作为讨论的对象和分析、设计的接口。 原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定的方案。,原型PROTOTYPE,SKCETCH & PAPER PROTOTYPE,32,InteractionDesign,By Caius Zhao,原型设计的一种方法 优点： 速度快、成本低（文艺） 弱点： 保真度低、交互效果表达不太直观 适用范围：设计初期流程框架、基本功能的设计决策,纸上原型,SKCETCH & PAPER PROTOTYPE,33,InteractionDesign,By Caius Zhao,纸上原型,PRICTICE,34,InteractionDesign,By Caius Zhao,设计草图&纸上原型的练习,35,InteractionDesign,By Caius Zhao,本课作业： 小组产品的线框原型设计 大作业：产品的设计文档，按小组提交 文档内容包括： 1.需