交互设计6L

INTERACTIONDESIGNInteractionDesignByCaiusZhao第五课回顾RETROSPECTInteractionDesignByCaiusZhao1场景练习使用场景环境信息功能期望技术场景名称1场景名称2场景名称3…RETROSPECTInteractionDesignByCaiusZhao2从场景到需求•业务需求•数据需求•功能需求•技术需求•情感需求•品牌需求RETROSPECTInteractionDesignByCaiusZhao3•什么是行为模型？•为何要了解行为模型？RETROSPECTInteractionDesignByCaiusZhao4设计模式•信息架构•导航•页面排版•信息列表•功能操作•复杂信息展示（图、表）•信息输入表单•社交5InteractionDesignByCaiusZhaoASSINGMENT根据用户使用场景完善需求定义。按照设计模式分类去了解设计模式。并且找到一些案例。每个分类找4个。INTERACTIONDESIGN赵偲2011.12.20InteractionDesignByCaiusZhao交互第六课|IA,Pattern&PaperPrototypeINFORMATIONARTCHITECTURE1InteractionDesignByCaiusZhao什么是信息架构？信息架构是组织信息空间的艺术。1.分享信息的环境的结构设计2.在网站中或网站间的包括了信息组织、标定、搜索、导航的系统3.用来支持usability和findability信息产品体验设计的艺术和技术4.一种新兴的专注于将设计和结构的原则应用于数码领域的实践学科INFORMATIONARTCHITECTURE2InteractionDesignByCaiusZhao什么是信息架构？搜索类目特色信息策略化隐藏排序标签功能操作INFORMATIONARTCHITECTURE3InteractionDesignByCaiusZhao什么是信息架构？搜索类目浏览策略化隐藏排序标签功能操作INFORMATIONARTCHITECTURE4InteractionDesignByCaiusZhao•展示•搜索•浏览•标签•类目化•排序•操作•策略性的隐藏信息组织信息的方法INFORMATIONARTCHITECTURE5InteractionDesignByCaiusZhao任何页面都大致都有如下任务：1.展示独占信息（地图、书、视频或游戏等）•多视图•多窗口2.展示一列信息（信息列表）•搜索浏览和特点内容展示•新闻流•图形化内容管理器•拇指图、分页器、双面板选择器3.提供工具用与创作信息（文本、图片、视频的创作）•画布+调色板•多窗口•多视图•输入&操作提示4.辅助完成一个Task（注册、登陆、认证、查找等）•Wizard•设置面板INFORMATIONARTCHITECTURE6InteractionDesignByCaiusZhao搜索浏览和特点内容展示INFORMATIONARTCHITECTURE7InteractionDesignByCaiusZhao新闻流INFORMATIONARTCHITECTURE8InteractionDesignByCaiusZhao图形化信息管理器INFORMATIONARTCHITECTURE9InteractionDesignByCaiusZhaoDashBoardINFORMATIONARTCHITECTURE10InteractionDesignByCaiusZhao画布和画板INFORMATIONARTCHITECTURE11InteractionDesignByCaiusZhao设置面板INFORMATIONARTCHITECTURE12InteractionDesignByCaiusZhao多视图INFORMATIONARTCHITECTURE13InteractionDesignByCaiusZhao多窗口1.新手帮助2.内容提示3.输入提示4.帮助文档5.工具提示6.在线帮助多级帮助INFORMATIONARTCHITECTURE14InteractionDesignByCaiusZhao推荐书籍：•《INFORMATIONARTCHITECTURE》（翻译版本《Web信息架构》）•《Tagging:People-PowerdMetadatafortheSocialWeb》•《DesigningfortheSocialWeb》NAVIGATION,SIGNPOST&WAYFINDING15InteractionDesignByCaiusZhao什么是导航？NAVIGATION,SIGNPOST&WAYFINDING16InteractionDesignByCaiusZhao什么是导航？•告知用户现有位置•下一步可以去哪•怎么去？NAVIGATION,SIGNPOST&WAYFINDING17InteractionDesignByCaiusZhao什么是好的导航？•能否顺利告知用户现有位置？（StayingFound）•好的路标•环境线索•地图（sitemap）•导航成本是否比较低？（LessCostofNavigation）•界面变化导致的认知成本少•界面反应时间尽量少•导航路径尽量短NAVIGATION,SIGNPOST&WAYFINDING18InteractionDesignByCaiusZhao导航的设计模式•演说模式•网状模式NAVIGATION,SIGNPOST&WAYFINDING19InteractionDesignByCaiusZhao导航的设计模式•多级模式•步骤模式NAVIGATION,SIGNPOST&WAYFINDING20InteractionDesignByCaiusZhao导航的设计模式•金字塔模式•移动与缩放NAVIGATION,SIGNPOST&WAYFINDING21InteractionDesignByCaiusZhao导航的设计模式•模式弹出层•明确的入口NAVIGATION,SIGNPOST&WAYFINDING22InteractionDesignByCaiusZhao导航的设计模式•逃生出口PAGELAYOUT23InteractionDesignByCaiusZhao页面布局操纵使用者的注意力、传达含义、顺序、交互两个关键词：•视觉层级•视觉流PAGELAYOUT24InteractionDesignByCaiusZhao视觉层级突出重要的，弱化次要的•根据页面任务，按重要等级排序页面的元素•搞清楚元素之间的关系PAGELAYOUT25InteractionDesignByCaiusZhao视觉层级突出重要的，弱化次要的方法：•密度：密度大的信息区域看起来要比其他区域要突出•背景色：给总要内容加上高对比度的背景色也能使之突出•位置和大小：放在屏幕中心的面积比较大的信息区域会显得更重要•韵律：一些重复的信息模块会让阅读者产生韵律的感觉，韵律会让人不自觉的被吸引。PAGELAYOUT26InteractionDesignByCaiusZhao视觉流用户浏览界面时的视觉轨迹。•界面元素的安排需要符合用户浏览界面时的轨迹顺序，越总要的内容让用户在越开始的时候看到。PAGELAYOUT27InteractionDesignByCaiusZhao视觉流PAGELAYOUT27InteractionDesignByCaiusZhao视觉流视觉的格式塔原则：•亲近•相似•连续•围合PAGELAYOUT28InteractionDesignByCaiusZhao视觉层级ABOUTDESIGNPATTERN29InteractionDesignByCaiusZhao相关书籍：《Web界面设计》《网站交互设计模式》《Tapworth-DesigninggreatiPhoneApps》相关网站Web:••••:•设计草图SKCETCH&PAPERPROTOTYPE31InteractionDesignByCaiusZhao•原型(prototypes)是把系统主要功能和接口通过快速开发制作为“模型”,以可视化的形式展现给用户,用以征求意见,确定需求。同时也应用于开发团队内部,作为讨论的对象和分析、设计的接口。•原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定的方案。原型PROTOTYPESKCETCH&PAPERPROTOTYPE32InteractionDesignByCaiusZhao•原型设计的一种方法•优点：速度快、成本低（文艺）•弱点：保真度低、交互效果表达不太直观•适用范围：设计初期流程框架、基本功能的设计决策纸上原型材料准备页面元素的绘制交互效果的模拟SKCETCH&PAPERPROTOTYPE33InteractionDesignByCaiusZhao纸上原型PRICTICE34InteractionDesignByCaiusZhao设计草图&纸上原型的练习35InteractionDesignByCaiusZhao本课作业：小组产品的线框原型设计大作业：产品的设计文档，按小组提交文档内容包括：1.需求背景2.用户研究3.产品愿景&产品需求列表4.交互设计原型（可以是纸上原型，也可以是数字原型）5.每位小组成员在项目产出中所负责的部分和贡献。6.对《交互设计》这门课的意见和建议。ASSINGMENT©MediaInteractiveContactUsLoremipsumdolor,03663,State,Country/P.1234567890/[e-mail]