05.1-软件观念-从电子商务看交互设计与用户体验.pptVIP

原型设计：故事板 ??? * 纸板——用于屏幕；??? * 邮票式张贴——用于菜单、对话框和其他的屏幕元素；??? * 透明的幻灯片——用于临时项目或用户输入；??? * 隐藏的带子或者其它用于用户输入的带子；??? * 笔和标记（可擦写标记用户输入或临时信息）；??? * 用来擦除输入的水；??? * … … 原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等 ，它更多的向产品设计团队的每一位成员传递着产品的设计理念、核心功能、网站结构、基本布局等，但经常不包括视觉设计。原型设计主要形式：纸质、交互式卡片、线框图、图形、html、flash等，主要工具有word、visio、DW、photoshop、Axure RP等…… 纸质原型 优势 * 技术壁垒消失* 更少的辩论时间* 传达产品感觉不错* 比Visual Basic 或者HTML原型制作快速* 廉价* 人人都可以参加设计纸质原型?? 用户可以协同设计原型或参加之后的测试部分 缺点 *有限的交互——不是所有的交互问题可以被充分的测试（例如，某些功能，例如鼠标划过事件给用户一个反馈无法模拟） *不能评价的响应时间* 不得在实际系统中制造模拟数据* 不能评估视觉* 需要摆弄大量的纸* 超过3个人的演示是不合适的 图形原型设计 VISIO制作的图形原型（visio、photoshop、illustrator） 优点： 效果美观、清晰 适合做电子归档 。。。 缺点： 制作时间长 不适合现场互动研讨 。。。 线框图设计 线框图(Wireframes)是信息架构和交互设计最重要的交付物之一 ，往往模型设计要依据于线框图。 HTML原型 低保真原型容易制作，用来展示基本交互作用，例如静态的html 。它可以用来与用户“彩排”。 HTML的原型比纸原型更适合检查设计的动态过程；这里的”高保真”的html样机已经包含视觉设计的元素 线框图(Wireframes)是信息架构和交互设计最重要的交付物之一 产品设计过程的工具使用举例 产品从设计到发布的六个阶段 概念阶段 concept discover definition refinement development launch 探索阶段 定义阶段 细化阶段 开发阶段 发布阶段 交互设计：Axure rp Axure是一款特别好用的产品模型设计软件，可视化操作，ajxa能直接生成页面需求，更独特的它可以实现：div onmouse onclick等很多交互事件，UI和工程师看到页面能直接看到你要设计的效果 思维导图：Mind manager mind manager是一款可视化思维导图软件，它可以智能的建立各个模块，各个主、次、平级目录。同时也当便做调整、做对外的功能结构的报告演示 流程设计：Visio 作业 请选择一个网购平台，用流程图的形式，画出从注册，到完成购物，然后退货的流程。 比如，淘宝，京东，amazon，jumei，凡客，等等。 END 用户体验不仅可以用于系统正式研发之前，使用原型等方式进行用户体验。也可以在系统正式上线之后进行，推进产品的迭代。 狭义的用户体验本身是一组研究的活动，由专门的人员负责进行。广义的用户体验指的是将用户研究的活动以及将相关研究成果和知识运用到产品设计中的一个过程。最常见的例如客服反馈用户咨询、BUG、建议的过程帮助改进产品设计。 在一个产品的不同阶段，另外针对不同的产品和不同的公司环境，用户体验的应用范围和应用策略都会有所不同。 * 土木工程师关心工程的实现。 装修设计师则考虑的是在现有空间中如何美化。 建筑工程师则关心的是房屋居住者的感受。 * * 信息的不同类别、来源、格式。用户对于信息的不同需求。 * * * * * * * * * * * * 界面设计—页面表达原则 更少的信息量更好。 结构化更易于理解。 信息的表达应该清楚、明确、直接。 操作可识别。 操作前，结果可预知。 操作时，操作有反馈。 操作后，操作可撤销。 让用户知道身处何地。 避免内容看上去象广告。 不提供多余的功能。 相同的功能，在不同的页面中应保持一致性。 措辞统一。 界面设计—自然语言法 具体操作： 第一步. 概括待表达的信息 第二步. 将概括好的信息排序 第三步. 使用界面语言翻译 适用于较明确的线性流程设计。 界面设计—结构图法 具体操作： 第一步. 总结归纳全部待表达的信息。 第二步. 画树状图。 第三步. 画页面草图，演示。(其中包含：页面标题、导航、重要的链接和按钮。) 界面设计—结构图法 交互细节设计 重点在于文档化。 网站设计中应当遵循的基本原则。 交互设计的主要任务 通过清晰、准