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

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

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

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

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