互联网产品的交互设计方法

1、会计学1互联网产品的交互设计方法互联网产品的交互设计方法第1页/共61页第1页/共61页第2页/共61页第2页/共61页第3页/共61页第3页/共61页第4页/共61页第4页/共61页第5页/共61页第5页/共61页第6页/共61页其实不是这样交互设计工作分为两部分：1.信息构架2.交互细节第6页/共61页第7页/共61页第7页/共61页第8页/共61页面对面的传达信息-书面表达-界面语言第8页/共61页第9页/共61页自然语言法第9页/共61页第10页/共61页自然语言法第10页/共61页第11页/共61页自然语言法第11页/共61页第12页/共61页自然语言法第12页/共61页第13页/共

2、61页自然语言法第13页/共61页第14页/共61页自然语言法第14页/共61页第15页/共61页自然语言法第15页/共61页第16页/共61页自然语言法第16页/共61页第17页/共61页自然语言法第17页/共61页第18页/共61页自然语言法第18页/共61页第19页/共61页自然语言法第19页/共61页第20页/共61页第20页/共61页第21页/共61页结构图法第21页/共61页第22页/共61页结构图法第22页/共61页第23页/共61页结构图法第23页/共61页第24页/共61页结构图法第24页/共61页第25页/共61页结构图法第25页/共61页第26页/共61页结构图法第26页

3、/共61页第27页/共61页5.黄钻活动结构图法第27页/共61页第28页/共61页结构图法第28页/共61页第29页/共61页结构图法第29页/共61页第30页/共61页结构图法第30页/共61页第31页/共61页结构图法第31页/共61页第32页/共61页结构图法第32页/共61页第33页/共61页结构图法第33页/共61页第34页/共61页以用户任务为线索，以可用性准则为依据。第34页/共61页第35页/共61页任务走查法第35页/共61页第36页/共61页任务走查法第36页/共61页第37页/共61页任务走查法第37页/共61页第38页/共61页任务走查法第38页/共61页第39页/共

4、61页第一步. 任务分析换一套新形象换表情换心情随便逛逛换一个自己以前的形象任务走查法第39页/共61页第40页/共61页第二步. 走查问题1副标题表意不明确副标题表意不明确描述这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法第40页/共61页第41页/共61页第二步. 走查问题2“请输入心情秀请输入心情秀”表意不明确表意不明确描述 “请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：

5、“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法第41页/共61页第42页/共61页第二步. 走查问题3拖动预览中的心情秀时的光标使用错误拖动预览中的心情秀时的光标使用错误描述 拖动预览图中的心情秀时，光标为 应该使用十字箭头。依据视觉表现规范：光标样式修改建议任务走查法第42页/共61页第43页/共61页第二步. 走查问题4“心情秀心情秀”概念不清概念不清描述“心情秀预览”暗示出，“心情秀”是指外框+文字内容。“换心情秀”功能只是换框，这

6、意味着“心情秀”是指外框。措辞上的含混使得同一个概念出现两种不同的定义，不易于理解。最直接的反应是：“既然心情秀是指外框+文字内容，那么当我点击 下一个 后，其中的文字内容是不是也会变化？”依据页面表达原则：措辞统一修改建议任务走查法第43页/共61页第44页/共61页第二步. 走查问题5换心情秀外框操作不便换心情秀外框操作不便描述 “上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。依据页面表达原则：操作结果不可预知修改建议任务走查法第44页/共61页第45页/共61页第二步. 走查问题6“预览预览”按钮视觉效果不佳按钮视觉效果不佳描述 预览按钮视觉样式

7、比较象disabled 依据灰色通常表示“暂不可用”（disabled）修改建议任务走查法第45页/共61页第46页/共61页第二步. 走查问题7“脱掉脱掉”按钮不易找到按钮不易找到描述“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。依据页面表达原则：信息的表达应该清楚、明确、直接。修改建议任务走查法第46页/共61页第47页/共61页任务走查法第47页/共61页第48页/共61页任务走查法第48页/共61页第49页/共61页交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。第49页/共61页第50页/共61页“互联网产品的交互设计应该怎么做？” “互联网产品应该如何去表达?”第50页/共61页第51页/共61页Lets talk Lets talk Lets talk Lets talkLets talkLets talk第51页/共61页第52页/共61页谢谢臭鱼2008.10第52页/共61页第53页/共61页其实不是这样交互设计工作分为两部分：1.信息构架2.交互细节第53页/共61页第54页/共61页自然语言法第54页/共61页第55页/共61页结构图法第55页/共61页第56页/共61页任务走查法第56页/共61页第57页/共61页任务走查法第