Lecture 5.原型设计PrototypeWireframe教学课件.ppt

* Copyright held by Jibo He @ PKU, UESEO, WSU. Example, show behavior What happens when user clicks “one-up” icon in upper right hand corner * * Copyright held by Jibo He @ PKU, UESEO, WSU. 制作线框图何用？ 设计沟通的媒介 获得潜在用户的反馈 与甲方进行产品设计沟通 细化产品设计的细节 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 线框图设计工具 OmniGraffle (for Mac) Microsoft Visio (for PC) Balsamiq Adobe InDesign Axure JustInMind * * Copyright held by Jibo He @ PKU, UESEO, WSU. How to build wireframes? Templates available for many basic shapes and UI objects Some parts of wireframe can be generic, others detailed Can add color, graphics, real fonts * * Copyright held by Jibo He @ PKU, UESEO, WSU. Hints and tips for wireframing Be able to create multiple design representations quickly Keep it modular—just as with any prototyping technique Not too many concepts or details “hard coded” in any one frame Build up using layers Use separate layer for each repeating set of widgets on screen * * Copyright held by Jibo He @ PKU, UESEO, WSU. Hints and tips for wireframing Example, container “window” of an application with its different controls Specify once as layer and reuse in subsequent screens Use stencils, templates, and libraries of widgets Avoid re-inventing widgets Find shared objects in tool libraries * * Copyright held by Jibo He @ PKU, UESEO, WSU. In-class exercise: Wireframe prototype Create a few wireframe mockups of “screens” for the interaction part of your SmartFridge design Keep your prototypes from this exercise to use later in UX evaluation * * Copyright held by Jibo He @ PKU, UESEO, WSU. 实体模型 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 实体模型 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 实体模型 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 课堂练习：制作您的产品的草图 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 故事板 一系列的帧 展示用户和预想系统之间的交互 将二维的草图设计形成一个交互式的视觉影像 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 故事板 演员 场景 交互 切换动画 * * Copyright held by Jibo He @ PKU, UESEO, WSU. 故事板示例 * * Copyrig