互联网交互设计方法

www.012logo.com互联网交互设计方法臭鱼2008.10交互设计重要，但却不知要怎么做。？交互设计是什么？•交互设计是一个设计工作。•交互设计是一门技术。•交互设计在目前阶段的主要使命是提高产品可用性。•通过对界面和操作行为的设计提高产品可用性。互联网产品的特点•变化快。•质量低。•功能操作与信息传达并重。•高速创新从而带来的无标准。那么，互联网产品的交互设计应该怎么做？互联网产品交互设计方法：方法一.自然语言法方法二.结构图法方法三.任务走查法交互设计工作分为两部分：1.信息构架2.交互细节其实不是这样…交互设计工作分为两部分：1.信息构架2.交互细节互联网产品交互设计方法：方法一.自然语言法方法二.结构图法方法三.任务走查法自然语言法使用自然的语言来表达页面信息。面对面的传达信息-书面表达-界面语言页面表达原则1.更少的信息量更好。2.结构化更易于理解。3.信息的表达应该清楚、明确、直接。4.操作可识别。5.操作前，结果可预知。6.操作时，操作有反馈。7.操作后，操作可撤销。8.让用户知道身处何地。9.避免内容看上去象广告。10.不提供多余的功能。11.相同的功能，在不同的页面中应保持一致性。12.措辞统一。自然语言法常用的页面表达方式1.从左到右，从上到下。2.大字更突出。3.图形更吸引人。4.动画会被误认为是广告。5.内容逻辑：并列关系；从属关系。6.多项并列的信息：7.不同的排序方式VS筛选内容自然语言法具体操作第一步.概括待表达的信息第二步.将概括好的信息排序第三步.使用界面语言翻译自然语言法实例：中信银行卡活动自然语言法自然语言法实例：中信银行卡活动第一步.概括信息•您选择了回邮方式办卡，概括解释这个办卡方式。•接下来您应该下载申请表•回邮办卡的全过程是这样的...•一系列注意事项。自然语言法实例：中信银行卡活动第二步.排序1.您选择了回邮方式办卡，概括解释这个办卡方式。2.接下来您应该下载申请表3.回邮办卡的全过程是这样的...4.一系列注意事项。自然语言法实例：中信银行卡活动第三步.翻译为界面语言自然语言法自然语言法实例：中信银行卡活动另外一种表达：1.您选择了回邮方式办卡，概括解释这个办卡方式。2.第一步.下载、填写申请表并回邮给中信3.第二步……………………..4.第四步……………………..自然语言法练习：QQ空间黄钻催费页面自然语言法结构图法抛开页面细节只考虑信息的组织形式。信息构架的原则1.一个页面一个主要内容。2.个人信息与公共信息。3.网页基本内容有两种：列表和文档4.更少的信息更好5.一个用户自己生成内容的页面，有两个状态：浏览状态&编辑状态。6.信息树应该尽量窄而浅，并且尽量保持平衡。7.与现实生活经验相符页面在网站中需要有一个固定的位置。同等级的内容应表现成并列的样子。……结构图法信息构架的常见模型1.列表+详情页+列表聚合页2.Wizard模式。第一步-第二步-第三步…3.主页+若干个“临时”页面。例如：googleaccounts结构图法具体操作第一步.总结归纳全部待表达的信息。第二步.画树状图。第三步.画页面草图，演示。(其中包含：页面标题、导航、重要的链接和按钮。)结构图法实例：黄钻等级结构图法实例：黄钻等级结构图法实例：黄钻等级结构图法实例：黄钻等级第一步.概括信息1.用户个人的的黄钻等级信息2.等级介绍3.黄钻功能特权介绍4.黄钻贵族可免费领取的道具5.黄钻活动结构图法实例：黄钻等级第二步.画树状图结构图法实例：黄钻等级第二步.画树状图结构图法实例：黄钻等级第二步.画树状图结构图法实例：黄钻等级第三步.草图，演示结构图法练习：QQ空间日志结构图法练习：QQ空间日志新的需求：•添加私密记事本•添加QQ心情•原有的日志需保留结构图法任务走查法优化现有产品的方法。成本低，见效快。对产品整体上影响小。以用户任务为线索，以可用性准则为依据。可用性准则页面表达原则+信息构架原则+视觉表现规范任务走查法视觉表现规范•滚动条看上去应该象滚动条•表单的对齐方式•重要的内容显示在第一屏•导航应出现在第一屏上半部分•尽量避免使用装饰性的图标•避免内容看上去象广告•光标样式•Tab需要有三种状态而不是两种•红色表示警示，绿色表示ok，黄色表示提示•灰色通常表示“暂不可用”（disabled）任务走查法具体操作第一步.分析并总结所有任务第二步.根据任务进行走查评估中需要注意：1.不影响任务的问题不记录2.被记录的缺陷是有根据的,而不是根据自己的感觉。任务走查法实例：QQ秀快速换装任务走查法实例：QQ秀快速换装第一步.任务分析•换一套新形象•换表情•换心情•随便逛逛•换一个自己以前的形象任务走查法实例：QQ秀快速换装第二步.走查问题1副标题表意不明确描述这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法实例：QQ秀快速换装第二步.走查问题2“请输入心情秀”表意不明确描述“请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法www.012logo.com实例：QQ秀快速换装第二步.走查问题3拖动预览中的心情秀时的光标使用错误描述拖动预览图中的心情秀时，光标为应该使用十字箭头。依据视觉表现规范：光标样式修改建议任务走查法实例：QQ秀快速换装第二步.走查问题4“心情秀”概念不清描述“心情秀预览”暗示出，“心情秀”是指外框+文字内容。“换心情秀”功能只是换框，这意味着“心情秀”是指外框。措辞上的含混使得同一个概念出现两种不同的定义，不易于理解。最直接的反应是：“既然心情秀是指外框+文字内容，那么当我点击下一个后，其中的文字内容是不是也会变化？”依据页面表达原则：措辞统一修改建议任务走查法实例：QQ秀快速换装第二步.走查问题5换心情秀外框操作不便描述“上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。依据页面表达原则：操作结果不可预知修改建议任务走查法实例：QQ秀快速换装第二步.走查问题6“预览”按钮视觉效果不佳描述预览按钮视觉样式比较象disabled依据灰色通常表示“暂不可用”（disabled）修改建议任务走查法实例：QQ秀快速换装第二步.走查问题7“脱掉”按钮不易找到描述“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法练习：QQ秀照相馆任务走查法www.012logo.com练习：QQ空间心情任务走查法最后最后的总结交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。最后最后的总结“互联网产品的交互设计应该怎么做？”“互联网产品应该如何去表达?”Let’stalkLet’stalkLet’stalkLet’stalkLet’stalkLet’stalk谢谢~~臭鱼2008.10