交互設(shè)計(jì)課程L6.ppt

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

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

3、興的專注于將設(shè)計(jì)和結(jié)構(gòu)的原則應(yīng)用于數(shù)碼領(lǐng)域的實(shí)踐學(xué)科,INFORMATION ARTCHITECTURE,2,InteractionDesign,By Caius Zhao,什么是信息架構(gòu)？,INFORMATION ARTCHITECTURE,3,InteractionDesign,By Caius Zhao,什么是信息架構(gòu)？,INFORMATION ARTCHITECTURE,4,InteractionDesign,By Caius Zhao,展示 搜索 瀏覽 標(biāo)簽 類目化 排序 操作 策略性的隱藏信息,組織信息的方法,INFORMATION ARTCHITECTURE,5,Interact

4、ionDesign,By Caius Zhao,任何頁面都大致都有如下任務(wù)： 展示獨(dú)占信息 （地圖、書、視頻或游戲等） 多視圖 多窗口 展示一列信息 （信息列表） 搜索瀏覽和特點(diǎn)內(nèi)容展示 新聞流 圖形化內(nèi)容管理器 拇指圖、分頁器、雙面板選擇器 提供工具用與創(chuàng)作信息 （文本、圖片、視頻的創(chuàng)作） 畫布+調(diào)色板 多窗口 多視圖 輸入&操作提示 輔助完成一個(gè)Task （注冊(cè)、登陸、認(rèn)證、查找等） Wizard 設(shè)置面板,INFORMATION ARTCHITECTURE,6,InteractionDesign,By Caius Zhao,搜索瀏覽和特點(diǎn)內(nèi)容展示,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,設(shè)置面板,INFORMATION ARTCHITECTURE,12,InteractionDesign,By Caius Zhao,多視圖,INFORMATION ARTCHITECTURE,13,InteractionDesign,By Caius Zhao,多窗口,新手幫助 內(nèi)容提示 輸入提示 幫助文檔 工具提示 在線幫助,多級(jí)幫助,INFORMATION ARTCHITECTURE,14,InteractionDesign,By Caius Zhao,推薦書籍： INFORMATION ARTCHITECTURE（翻譯版本W(wǎng)eb信息架構(gòu)） Tagging: Peop

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

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

9、,多級(jí)模式,步驟模式,NAVIGATION, SIGNPOST & WAYFINDING,20,InteractionDesign,By Caius Zhao,導(dǎo)航的設(shè)計(jì)模式,金字塔模式,移動(dòng)與縮放,NAVIGATION, SIGNPOST & WAYFINDING,21,InteractionDesign,By Caius Zhao,導(dǎo)航的設(shè)計(jì)模式,模式彈出層,明確的入口,NAVIGATION, SIGNPOST & WAYFINDING,22,InteractionDesign,By Caius Zhao,導(dǎo)航的設(shè)計(jì)模式,逃生出口,PAGE LAYOUT,23,InteractionDes

10、ign,By Caius Zhao,頁面布局,操縱使用者的注意力、傳達(dá)含義、順序、交互 兩個(gè)關(guān)鍵詞： 視覺層級(jí) 視覺流,PAGE LAYOUT,24,InteractionDesign,By Caius Zhao,視覺層級(jí),突出重要的，弱化次要的 根據(jù)頁面任務(wù)，按重要等級(jí)排序頁面的元素 搞清楚元素之間的關(guān)系,PAGE LAYOUT,25,InteractionDesign,By Caius Zhao,視覺層級(jí),突出重要的，弱化次要的方法： 密度：密度大的信息區(qū)域看起來要比其他區(qū)域要突出 背景色： 給總要內(nèi)容加上高對(duì)比度的背景色也能使之突出 位置和大?。悍旁谄聊恢行牡拿娣e比較大的信息區(qū)域會(huì)顯得更

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

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

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