交互設計課程L6.ppt

1、INTERACTIONDESIGN,Interaction Design By CaiusZhao,第五課 回顧,RETROSPECT,1,場景練習,RETROSPECT,2,從場景到需求 業(yè)務需求 數據需求 功能需求 技術需求 情感需求 品牌需求,RETROSPECT,3,什么是行為模型？ 為何要了解行為模型？,RETROSPECT,4,設計模式,信息架構 導航 頁面排版 信息列表 功能操作 復雜信息展示（圖、表） 信息輸入表單 社交,5,InteractionDesign,By Caius Zhao,ASSINGMENT,根據用戶使用場景完善需求定義。 按照設計模式分類去了解設計模式。并且

2、找到一些案例。每個分類找4個。,INTERACTIONDESIGN,趙偲 2011.12.20,Interaction Design By CaiusZhao,交互第六課 | IA, Pattern & Paper Prototype,INFORMATION ARTCHITECTURE,1,InteractionDesign,By Caius Zhao,什么是信息架構？,信息架構是組織信息空間的藝術。 1. 分享信息的環(huán)境的結構設計 2. 在網站中或網站間的包括了信息組織、標定、搜索、導航的系統 3. 用來支持usability和findability信息產品體驗設計的藝術和技術 4. 一種新

3、興的專注于將設計和結構的原則應用于數碼領域的實踐學科,INFORMATION ARTCHITECTURE,2,InteractionDesign,By Caius Zhao,什么是信息架構？,INFORMATION ARTCHITECTURE,3,InteractionDesign,By Caius Zhao,什么是信息架構？,INFORMATION ARTCHITECTURE,4,InteractionDesign,By Caius Zhao,展示 搜索 瀏覽 標簽 類目化 排序 操作 策略性的隱藏信息,組織信息的方法,INFORMATION ARTCHITECTURE,5,Interact

4、ionDesign,By Caius Zhao,任何頁面都大致都有如下任務： 展示獨占信息 （地圖、書、視頻或游戲等） 多視圖 多窗口 展示一列信息 （信息列表） 搜索瀏覽和特點內容展示 新聞流 圖形化內容管理器 拇指圖、分頁器、雙面板選擇器 提供工具用與創(chuàng)作信息 （文本、圖片、視頻的創(chuàng)作） 畫布+調色板 多窗口 多視圖 輸入&操作提示 輔助完成一個Task （注冊、登陸、認證、查找等） Wizard 設置面板,INFORMATION ARTCHITECTURE,6,InteractionDesign,By Caius Zhao,搜索瀏覽和特點內容展示,INFORMATION ARTCHITE

5、CTURE,7,InteractionDesign,By Caius Zhao,新聞流,INFORMATION ARTCHITECTURE,8,InteractionDesign,By Caius Zhao,圖形化信息管理器,INFORMATION ARTCHITECTURE,9,InteractionDesign,By Caius Zhao,DashBoard,INFORMATION ARTCHITECTURE,10,InteractionDesign,By Caius Zhao,畫布和畫板,INFORMATION ARTCHITECTURE,11,InteractionDesign,By

6、Caius Zhao,設置面板,INFORMATION ARTCHITECTURE,12,InteractionDesign,By Caius Zhao,多視圖,INFORMATION ARTCHITECTURE,13,InteractionDesign,By Caius Zhao,多窗口,新手幫助 內容提示 輸入提示 幫助文檔 工具提示 在線幫助,多級幫助,INFORMATION ARTCHITECTURE,14,InteractionDesign,By Caius Zhao,推薦書籍： INFORMATION ARTCHITECTURE（翻譯版本Web信息架構） Tagging: Peop

7、le-Powerd Metadata for the Social Web Designing for the Social Web,NAVIGATION, SIGNPOST & WAYFINDING,15,InteractionDesign,By Caius Zhao,什么是導航？,NAVIGATION, SIGNPOST & WAYFINDING,16,InteractionDesign,By Caius Zhao,什么是導航？,告知用戶現有位置 下一步可以去哪 怎么去？,NAVIGATION, SIGNPOST & WAYFINDING,17,InteractionDesign,By C

8、aius Zhao,什么是好的導航？,能否順利告知用戶現有位置？（Staying Found） 好的路標 環(huán)境線索 地圖（sitemap） 導航成本是否比較低？（Less Cost of Navigation） 界面變化導致的認知成本少 界面反應時間盡量少 導航路徑盡量短,NAVIGATION, SIGNPOST & WAYFINDING,18,InteractionDesign,By Caius Zhao,導航的設計模式,演說模式,網狀模式,NAVIGATION, SIGNPOST & WAYFINDING,19,InteractionDesign,By Caius Zhao,導航的設計模式

9、,多級模式,步驟模式,NAVIGATION, SIGNPOST & WAYFINDING,20,InteractionDesign,By Caius Zhao,導航的設計模式,金字塔模式,移動與縮放,NAVIGATION, SIGNPOST & WAYFINDING,21,InteractionDesign,By Caius Zhao,導航的設計模式,模式彈出層,明確的入口,NAVIGATION, SIGNPOST & WAYFINDING,22,InteractionDesign,By Caius Zhao,導航的設計模式,逃生出口,PAGE LAYOUT,23,InteractionDes

10、ign,By Caius Zhao,頁面布局,操縱使用者的注意力、傳達含義、順序、交互 兩個關鍵詞： 視覺層級 視覺流,PAGE LAYOUT,24,InteractionDesign,By Caius Zhao,視覺層級,突出重要的，弱化次要的 根據頁面任務，按重要等級排序頁面的元素 搞清楚元素之間的關系,PAGE LAYOUT,25,InteractionDesign,By Caius Zhao,視覺層級,突出重要的，弱化次要的方法： 密度：密度大的信息區(qū)域看起來要比其他區(qū)域要突出 背景色： 給總要內容加上高對比度的背景色也能使之突出 位置和大小：放在屏幕中心的面積比較大的信息區(qū)域會顯得更

11、重要 韻律：一些重復的信息模塊會讓閱讀者產生韻律的感覺，韻律會讓人不自覺的被吸引。,PAGE LAYOUT,26,InteractionDesign,By Caius Zhao,視覺流,用戶瀏覽界面時的視覺軌跡。 界面元素的安排需要符合用戶瀏覽界面時的軌跡順序，越總要的內容讓用戶在越開始的時候看到。,PAGE LAYOUT,27,InteractionDesign,By Caius Zhao,視覺流,PAGE LAYOUT,27,InteractionDesign,By Caius Zhao,視覺流,視覺的格式塔原則： 親近 相似 連續(xù) 圍合,PAGE LAYOUT,28,Interactio

12、nDesign,By Caius Zhao,視覺層級,ABOUT DESIGN PATTERN,29,InteractionDesign,By Caius Zhao,相關書籍： Web界面設計 網站交互設計模式 Tap worth- Designing great iPhone Apps 相關網站 Web: Moblie: ,SKCETCH & PAPER PROTOTYPE,30,InteractionDesign,By Caius Zhao,設計草圖,SKCETCH & PAPER PROTOTYPE,31,InteractionDesign,By Caius Zhao,原型(protot

13、ypes)是把系統主要功能和接口通過快速開發(fā)制作為“模型”,以可視化的形式展現給用戶,用以征求意見,確定需求。同時也應用于開發(fā)團隊內部,作為討論的對象和分析、設計的接口。 原型的根本目的不是為了交付，而是溝通、測試、修改，解決不確定的方案。,原型PROTOTYPE,SKCETCH & PAPER PROTOTYPE,32,InteractionDesign,By Caius Zhao,原型設計的一種方法 優(yōu)點： 速度快、成本低（文藝） 弱點： 保真度低、交互效果表達不太直觀 適用范圍：設計初期流程框架、基本功能的設計決策,紙上原型,SKCETCH & PAPER PROTOTYPE,33,InteractionDesign,By Caius Zhao,紙上原型,PRICTICE,34,InteractionDesign,By Caius Zhao,設計草圖&紙上原型的練習,35,InteractionDesign,By Caius Zhao,本課作業(yè)： 小組產品的線框原型設計 大作業(yè)：產品的設計文檔，按小組提交 文檔內容包括： 1.需