07第三章1網(wǎng)頁(yè)交互原型工具Axure初識(shí)

web產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)制作網(wǎng)頁(yè)交互原型工具Axure初識(shí)演講人：電子信息職業(yè)技術(shù)學(xué)院0102知識(shí)要點(diǎn)為何要進(jìn)行原型設(shè)計(jì)什么是交互設(shè)計(jì)0304Axure原型設(shè)計(jì)應(yīng)用如何制定AxureRP設(shè)計(jì)體系第一部分為何要進(jìn)行原型設(shè)計(jì)溝通中存在的問(wèn)題人們?cè)跍贤ㄟ^(guò)程中，一個(gè)人通常只能說(shuō)出心中所想的80%，但對(duì)方聽(tīng)到的最多只能是60%，聽(tīng)懂的卻只有40%，結(jié)果執(zhí)行時(shí)，只有20%了。心中的想法也許很完美，但執(zhí)行起來(lái)卻差之千里，這是由“溝通的漏斗”造成的，因此必須采取適當(dāng)?shù)姆椒?，去克服這一“漏斗”現(xiàn)象，也即所謂的溝通的成本，如何使溝通的成本降低，是很多產(chǎn)品人員一直追求的。為何要進(jìn)行原型設(shè)計(jì)01溝通的時(shí)間成本溝通的成本（1）產(chǎn)品經(jīng)理（2）研發(fā)經(jīng)理（3）產(chǎn)品設(shè)計(jì)師（10）運(yùn)維工程師（4）架構(gòu)師（5）交互設(shè)計(jì)師（6）視覺(jué)設(shè)計(jì)師（7）Web前端工程師（8）APP開(kāi)發(fā)工程師（9）測(cè)試工程師一個(gè)產(chǎn)品開(kāi)發(fā)制作團(tuán)隊(duì)大致有以下人員分工溝通的成本溝通的有效性02借助輔助介質(zhì)的溝通會(huì)比單純的對(duì)話來(lái)的更有效果。比如需要向用戶說(shuō)明設(shè)計(jì)方案的時(shí)候，單純的口頭溝通，肯定沒(méi)有有實(shí)質(zhì)交付物的溝通來(lái)的順暢，這里的實(shí)質(zhì)交付物可以是文檔、草圖、原型，而原型則比前兩者要好。開(kāi)發(fā)迭代跟進(jìn)實(shí)現(xiàn)體驗(yàn)優(yōu)化用戶測(cè)試...項(xiàng)目啟動(dòng)需求分析功能分析市場(chǎng)調(diào)研用戶訪談...概念設(shè)計(jì)數(shù)據(jù)挖掘信息架構(gòu)文案策劃頭腦風(fēng)暴...交互設(shè)計(jì)任務(wù)分析情景分析功能設(shè)計(jì)導(dǎo)航設(shè)計(jì)...視覺(jué)設(shè)計(jì)品牌設(shè)計(jì)風(fēng)格設(shè)計(jì)界面設(shè)計(jì)...原型設(shè)計(jì)原型工具在溝通中的好處原型的制作成本和演示成本都比較低，有原型的演示的話，一目了然，用戶可以根據(jù)自身的判斷，再結(jié)合演示者的描述，理解起來(lái)就不那么費(fèi)勁了。能吸引到演示對(duì)象的注意力，一般的溝通會(huì)如果沒(méi)有依托任何介質(zhì)的講話，效果往往不好，下面的人各干各的，但如果有PPT或者原型在上面演示，必然能引起大家的注意力?？梢蕴岣邷贤ǖ男Ч?。01原型設(shè)計(jì)的價(jià)值及目的原型的價(jià)值就是可以被不斷的修改、推翻、打磨、錘煉，直至達(dá)成最終的結(jié)果，產(chǎn)品可以利用原型來(lái)確定最終是否投入開(kāi)發(fā)等人力物力來(lái)實(shí)現(xiàn)，也即原型的價(jià)值就是產(chǎn)品的替身。02原型設(shè)計(jì)的最終目的是為了準(zhǔn)確、方便、快捷的表達(dá)產(chǎn)品設(shè)計(jì)人員的產(chǎn)品設(shè)計(jì)意圖，并可以達(dá)成與溝通對(duì)象的溝通輔助。我們一般都從目的看做某件事的價(jià)值，原型設(shè)計(jì)的目的表明在通常的軟件或者系統(tǒng)研發(fā)過(guò)程當(dāng)中，原型設(shè)計(jì)是比較重要的，因?yàn)楫a(chǎn)品設(shè)計(jì)思想決定產(chǎn)品的后續(xù)成敗。第二部分什么是交互設(shè)計(jì)一、什么是交互交互，及溝通交流，發(fā)生互動(dòng)關(guān)系1、人和人之間的交互2、人和機(jī)器之間的交互

當(dāng)人（或機(jī)器）和事物（無(wú)論是人、機(jī)器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）發(fā)生雙向的信息交流和互動(dòng)，就是一種交互行為。智能時(shí)代的交互環(huán)境人系統(tǒng)服務(wù)產(chǎn)品機(jī)器人環(huán)境人系統(tǒng)服務(wù)產(chǎn)品機(jī)器機(jī)器互聯(lián)網(wǎng)時(shí)代智能時(shí)代

設(shè)計(jì)，它源于社會(huì)。設(shè)計(jì)的實(shí)質(zhì)在于發(fā)現(xiàn)一個(gè)很多人都遇到的問(wèn)題，然后試著去解決的過(guò)程。設(shè)計(jì)主要表現(xiàn)在“發(fā)現(xiàn)問(wèn)題–解決問(wèn)題”。而交互設(shè)計(jì)就是發(fā)現(xiàn)和解決人（或機(jī)器）和事物（包括人、機(jī)器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）之間的互動(dòng)關(guān)系問(wèn)題。二、什么是設(shè)計(jì)用戶體驗(yàn)設(shè)計(jì)信息架構(gòu)視覺(jué)設(shè)計(jì)內(nèi)容創(chuàng)作交互設(shè)計(jì)人機(jī)交互建筑設(shè)計(jì)工業(yè)設(shè)計(jì)機(jī)械工程電子工程交互設(shè)計(jì)和各個(gè)領(lǐng)域之間的關(guān)系用戶體驗(yàn)要素分五個(gè)層級(jí)：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層三、交互設(shè)計(jì)的工作內(nèi)容思維框架設(shè)計(jì)依據(jù)方法體系交付物戰(zhàn)略層行業(yè)分析市場(chǎng)研究競(jìng)品分析用戶研究產(chǎn)品定位/目標(biāo)用戶現(xiàn)狀機(jī)會(huì)特征痛點(diǎn)范圍層達(dá)成目標(biāo)所需的支持訴求信息功能需求挖掘焦點(diǎn)小組用戶訪談?dòng)脩粲^察需求列表結(jié)構(gòu)層決策模型要素結(jié)構(gòu)路徑信息架構(gòu)站點(diǎn)地圖流程圖卡片分類信息架構(gòu)/流程圖框架層信息設(shè)別模型權(quán)重關(guān)系次序?qū)Ш皆O(shè)計(jì)排版布局紙面原型A/B測(cè)試導(dǎo)航架構(gòu)/頁(yè)面布局表現(xiàn)層視覺(jué)信號(hào)認(rèn)知模型比例色彩感知元素識(shí)別文本識(shí)別強(qiáng)弱空間交互稿高保真原型UI設(shè)計(jì)設(shè)計(jì)原則交互稿/視覺(jué)稿交互設(shè)計(jì)師高級(jí)交互體驗(yàn)顧問(wèn)第三部分應(yīng)用Axure做原型設(shè)計(jì)什么是原型呢？

原型是產(chǎn)品的最初形態(tài)，確認(rèn)用戶對(duì)產(chǎn)品界面和操作功能可用性的需求，高保真的原型接近于產(chǎn)品的最終形態(tài)，但仍只是原型。產(chǎn)品原型簡(jiǎn)單的說(shuō)就是產(chǎn)品設(shè)計(jì)成形之前的一個(gè)大體框架，對(duì)網(wǎng)站來(lái)講，就是將頁(yè)面模塊、元素進(jìn)行粗放式的排版和布局，深入一些，還會(huì)加入一些交互性的元素，使其更加具體、形象和生動(dòng)。應(yīng)用Axure做原型設(shè)計(jì)Axure原型設(shè)計(jì)Axure初始1.有強(qiáng)大的編輯功能,使得制作素材庫(kù)會(huì)更便捷一點(diǎn)。2.更快的復(fù)制粘貼，素材庫(kù)和原型庫(kù)會(huì)多一些。3.可以項(xiàng)目共享，使得同事間可以同步工作，并保留所有工作歷史，并可以隨時(shí)導(dǎo)出歷史版本的項(xiàng)目文檔Axure與其他原型工具對(duì)比優(yōu)點(diǎn)常用的原型工具包括：Axure、墨刀、Mockplus。Axure工具界面1菜單欄和工具欄3頁(yè)面欄4概要欄5元件庫(kù)6母版7樣式窗格8交互9注釋說(shuō)明2工作區(qū)完整的交互設(shè)計(jì)流程定性研究：針對(duì)可能使用你的產(chǎn)品的人，可以是問(wèn)卷、訪談等。確定人物角色：即產(chǎn)品的典型用戶，可以有一種或幾種。寫(xiě)問(wèn)題腳本：羅列人物角色在使用產(chǎn)品時(shí)可能遇到的問(wèn)題，可以整理成一個(gè)故事便于別人理解。寫(xiě)動(dòng)作腳本：像寫(xiě)故事一樣，寫(xiě)人物角色在使用你設(shè)計(jì)好的產(chǎn)品時(shí)，發(fā)生的細(xì)節(jié)。注意，這個(gè)時(shí)候你的交互方案的概念模型已經(jīng)基本成型了，這個(gè)概念模型是通過(guò)解決問(wèn)題腳本里的問(wèn)題而得出的。畫(huà)線框圖：這個(gè)線框圖是通過(guò)把動(dòng)作腳本里的概念模型轉(zhuǎn)化成視覺(jué)模型得到的。制作原型：做出來(lái)好像可以用的東西，有很多原型工具可以利用。專家評(píng)測(cè)：至少兩名設(shè)計(jì)師或?qū)换ピO(shè)計(jì)比較了解的人通過(guò)反復(fù)測(cè)試原型。找到問(wèn)題后修改線框圖并更新原型。用戶評(píng)測(cè)：讓用戶使用原型，可以給他們一些任務(wù)去完成。根據(jù)用戶在使用過(guò)程中的問(wèn)題和建議進(jìn)行進(jìn)一步修改。12345678第四部分如何制定Axure設(shè)計(jì)體系制定Axure原型設(shè)計(jì)體系確定信息架構(gòu)1制定Axure原型設(shè)計(jì)體系確定信息架構(gòu)1制定Axure原型設(shè)計(jì)體系確定信息架構(gòu)1制定Axure原型設(shè)計(jì)體系確定頁(yè)面布局2在用Axure做布局設(shè)計(jì)的時(shí)候，可以用默認(rèn)組件庫(kù)里面的占位符組件來(lái)設(shè)計(jì)（關(guān)于占位符組件的使用，參照這里），先將需要設(shè)計(jì)的區(qū)塊用占位符布局，然后標(biāo)上文字標(biāo)示，以此來(lái)表示這里將來(lái)需要設(shè)計(jì)放置的內(nèi)容。這個(gè)步驟基本決定了一個(gè)頁(yè)面的布局。制定Axure原型設(shè)計(jì)體系內(nèi)容完善31.定UI風(fēng)格，對(duì)常用的組件進(jìn)行視覺(jué)封裝2.定交互規(guī)則，基本操作的走向和反饋等內(nèi)容完善時(shí)需要制定Axure設(shè)計(jì)體系制定Axure原型設(shè)計(jì)體系內(nèi)容完善34.制定設(shè)計(jì)規(guī)則3.布局和排版規(guī)則