互联网产品的交互式设计

《互联网产品的交互式设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、互联网交互设计方法臭鱼2008.10交互设计重要，但却不知要怎么做。？交互设计是什么？交互设计是一个设计工作。交互设计是一门技术。交互设计在目前阶段的主要使命是提高产品可用性。通过对界面和操作行为的设计提高产品可用性。互联网产品的特点变化快。质量低。功能操作与信息传达并重。高速创新从而带来的无标准。那么，互联网产品的交互设计应该怎么做？互联网产品交互设计方法：方法一.自然语言法方法二.结构图法方法三.任务走查法交互设计工作分为两部分：信息构架交互细节其实不是这样…交互设计工作分为两部分：信息构架交互细节互联网产品交互设计

2、方法：方法一.自然语言法方法二.结构图法方法三.任务走查法自然语言法使用自然的语言来表达页面信息。面对面的传达信息->书面表达->界面语言页面表达原则1.更少的信息量更好。2.结构化更易于理解。3.信息的表达应该清楚、明确、直接。4.操作可识别。5.操作前，结果可预知。6.操作时，操作有反馈。7.操作后，操作可撤销。8.让用户知道身处何地。9.避免内容看上去象广告。10.不提供多余的功能。11.相同的功能，在不同的页面中应保持一致性。12.措辞统一。自然语言法常用的页面表达方式1.从左到右，从上到下。2.大字更突出。3.

3、图形更吸引人。4.动画会被误认为是广告。5.内容逻辑：并列关系；从属关系。6.多项并列的信息：7.不同的排序方式VS筛选内容自然语言法具体操作第一步.概括待表达的信息第二步.将概括好的信息排序第三步.使用界面语言翻译自然语言法实例：中信银行卡活动自然语言法自然语言法实例：中信银行卡活动第一步.概括信息您选择了回邮方式办卡，概括解释这个办卡方式。接下来您应该下载申请表回邮办卡的全过程是这样的...一系列注意事项。自然语言法实例：中信银行卡活动第二步.排序1.您选择了回邮方式办卡，概括解释这个办卡方式。2.接下来您应该下载申

4、请表3.回邮办卡的全过程是这样的...4.一系列注意事项。自然语言法实例：中信银行卡活动第三步.翻译为界面语言自然语言法自然语言法实例：中信银行卡活动另外一种表达：1.您选择了回邮方式办卡，概括解释这个办卡方式。2.第一步.下载、填写申请表并回邮给中信3.第二步……………………..4.第四步……………………..自然语言法练习：QQ空间黄钻催费页面自然语言法结构图法抛开页面细节只考虑信息的组织形式。信息构架的原则1.一个页面一个主要内容。2.个人信息与公共信息。3.网页基本内容有两种：列表和文档4.更少的信息更好5.一个用

5、户自己生成内容的页面，有两个状态：浏览状态&编辑状态。6.信息树应该尽量窄而浅，并且尽量保持平衡。7.与现实生活经验相符页面在网站中需要有一个固定的位置。同等级的内容应表现成并列的样子。……结构图法信息构架的常见模型列表+详情页+列表聚合页Wizard模式。第一步->第二步->第三步…主页+若干个“临时”页面。例如：googleaccounts结构图法具体操作第一步.总结归纳全部待表达的信息。第二步.画树状图。第三步.画页面草图，演示。(其中包含：页面标题、导航、重要的链接和按钮。)结构图法实例：黄钻等级结构图法实例：黄

6、钻等级结构图法实例：黄钻等级结构图法实例：黄钻等级第一步.概括信息用户个人的的黄钻等级信息等级介绍3.黄钻功能特权介绍4.黄钻贵族可免费领取的道具5.黄钻活动结构图法实例：黄钻等级第二步.画树状图结构图法实例：黄钻等级第二步.画树状图结构图法实例：黄钻等级第二步.画树状图结构图法实例：黄钻等级第三步.草图，演示结构图法练习：QQ空间日志结构图法练习：QQ空间日志新的需求：添加私密记事本添加QQ心情原有的日志需保留结构图法任务走查法优化现有产品的方法。成本低，见效快。对产品整体上影响小。以用户任务为线索，以可用性准则为依据

7、。可用性准则页面表达原则+信息构架原则+视觉表现规范任务走查法视觉表现规范滚动条看上去应该象滚动条表单的对齐方式重要的内容显示在第一屏导航应出现在第一屏上半部分尽量避免使用装饰性的图标避免内容看上去象广告光标样式Tab需要有三种状态而不是两种红色表示警示，绿色表示ok，黄色表示提示灰色通常表示“暂不可用”（disabled）任务走查法具体操作第一步.分析并总结所有任务第二步.根据任务进行走查评估中需要注意：1.不影响任务的问题不记录2.被记录的缺陷是有根据的,而不是根据自己的感觉。任务走查法实例：QQ秀快速换装任务走查法

8、实例：QQ秀快速换装第一步.任务分析换一套新形象换表情换心情随便逛逛换一个自己以前的形象任务走查法实例：QQ秀快速换装第二步.走查问题1副标题表意不明确描述这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的