畢業(yè)論文范文-交互設計技術的分析

1隨著互聯(lián)網(wǎng)不斷地發(fā)展，對人們的生產(chǎn)生活都產(chǎn)生了深遠的影響。特別是移動互聯(lián)網(wǎng)的快速發(fā)展，人們越來越依賴移動手機端對生活帶來的便捷。人們越來越習慣于用手機購物，查詢路線，尋找美食等。其中影響范圍最廣的就是社交類軟件。這類軟件的“用戶粘度”最高，用戶忠誠度最強。良好的交互設計必將帶來更高的用戶粘性。因此，交互設計在軟件中的重要性不言而喻，各類軟件應更加注重交互設計。缺乏交互性的產(chǎn)品是沒有生命力的。讓軟件除了美觀更具可用性，讓用戶有更好的體驗，是用戶更滿意，從而提高軟件的商業(yè)價值，是交互設計的目標?，F(xiàn)在大街小巷幾乎人手一部觸屏手機，而觸屏手機本身就是交互性產(chǎn)品，交互的本質(zhì)就是“響應”,當用戶使用產(chǎn)品的時候往往希望可以第一時間得到反饋。而市面上很多設計精美的產(chǎn)品卻缺少好的交互體驗，這類產(chǎn)品往往會很快被用戶淘汰。還有不少軟件重技術忽略交互的，這類軟件通常有強大的功能能滿足用戶多方面的需求，但是沒有好的交互體驗，其實這同樣是留不住用戶的。論文通過對交互設計技術的分析，結合實際需求，對軟件進行原型設計，建模等方式改進軟件的界面的交互性。此過程中結合了對幾個社區(qū)類APP的體驗，去糙取精、最后整合優(yōu)秀的交互方式到自己設計中。論文的成果著重提出產(chǎn)品不應只注重界面精美，更重要的是交互行為。而這一行為始終要以用戶為中心，要對用戶有深入的理解，及時了解用戶需求。 WiththedevelopmentoftheInternetconstantly,bothproductionanpeopleproducedprofoundinfluence.Especiallytherapiddevelopmeshopping,queryroute,lookingforfood,etc.Theinfluencescopeisshouldpaymoreattentiontointeractiondesiphoneitselfisproductofinteractivity,thenatureoftheinteractionisa"responskindofproductwilloftenqumeetthevariousneedsofusers,buttowndesign.Resultsofth浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)摘要 I Ⅱ Ⅲ 1 11.2研究內(nèi)容及擬解決問題 1第2章工具軟件與交互設計發(fā)展 52.1開發(fā)環(huán)境和工具 52.2交互設計概念與發(fā)展 52.2.1交互設計的概念 52.2.2交互設計的發(fā)展 6 83.1同類競爭產(chǎn)品分析 83.2交互設計流程 3.2.1確定場景 3.2.2定義功能 3.3.3交互界面設計時應注意的點 3.3手繪草圖 3.4軟件流程圖 3.5低保真 第4章交互設計相關技術 4.1軟件相關界面 4.2涉及到的部分交互設計技術 4.2.1搜索框 4.2.2圖片輪換 4.2.3滑動列表 28 第5章課題總結 致謝 浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)參考文獻…………… 隨著移動互聯(lián)網(wǎng)時代的到來，這場數(shù)字化革命給人類社會帶來了很多變化。從當年蘋果公司推出Iphone,又在次年推出ipad,這兩種可以算革命性的移動數(shù)碼產(chǎn)品在很大程度上改變了人們過去與互聯(lián)網(wǎng)溝通方式，真正實現(xiàn)了隨時隨地現(xiàn)在，人們對于智能手機的功能要求越來越高，已經(jīng)演變的無法滿足以前單單通話、查找、上網(wǎng)、社交的這些基本功能，人們越來越想可以在這些移動設備上可以做更多的事。近幾年來，由于移動互聯(lián)網(wǎng)服務的發(fā)展，以及消費者對手機產(chǎn)品的體驗越來越追求完美，使得手機軟件界面交互設計顯得更加重要。各大企業(yè)在推出一個新的APP的時候也越來越多的把交互作為軟件是否會受歡迎的一個重要考量。但是很多國內(nèi)的企業(yè)才剛剛明白到人機交互體驗的重要性，而很多由于不看重而導致的用戶體驗問題已經(jīng)接二連三的出現(xiàn)了，例如交互界面布局混亂繁雜，用戶無從下手操作：界面圖形與色彩的搭配及其不當，造成用戶眼花繚亂找不到需要的目標信息等，隨著手機界面交互方面的需求和設計的飛速發(fā)展，我們研究怎么樣將交互設計的理念應用于手機產(chǎn)品設計中，分析各項交互元素，研究手機產(chǎn)品的界面交互設計方法，就顯得尤為重要和迫切。從用戶角度來說，交互設計是一種可以讓產(chǎn)品好用并且有效的技術，它的目標是為了理解用戶的愿望，了解用戶在使用產(chǎn)品交互時對方的行為，了解使用者本身的心理和行為，同時，還包括掌握各種有效的交互方式，并對它們進行加強和擴大。交互設計還包含到很多學科，以及和各領域各背景人員的溝通交流。交互設計的目的包括，有用性，易用性和吸引性的設計和改善。交互設計就是要提供豐富，全面，自然的信號，這是針對目前新型交互界面?zhèn)鬟f重要緊急的信息。通過對產(chǎn)品的界面和各種行為的交互設計，在產(chǎn)品和它的使用者之間建立一種良好的關系，從而有效達到使用者的目的。2本課題研究的基本內(nèi)容是社交類app交互設計。該App采用photoshop和axture作為開發(fā)工具。在研究過程中著重與界面的視覺的效果，與用戶體驗。交互設計以用戶為中心的理念會貫穿整個產(chǎn)品。該APP的功能是希望生活在社區(qū)中的居民在這個APP上進行社交活動，從而可以結識到本社區(qū)的居民。因為生活在同個小區(qū)，生活環(huán)境相同，自然可以衍生出很多共同語言，進而及時是在網(wǎng)上認識，但在線下見面時也不會尷尬反而更加親近。在設計師設計界面的時候，更多的考慮用戶的心理使用習慣，是設計師的設計符合用戶的期望。所以交互設計不同于以往的傳統(tǒng)設計，設計師既要考慮現(xiàn)在的設計流行趨勢又要滿足用戶的需求。所以我們的設計模式應該更加多元化。正因為交互設計更多考慮用戶，所以我們在設計產(chǎn)品的時候，首先要調(diào)查用戶對產(chǎn)品交互的需求，盡可能的對一些潛在用戶做充足的調(diào)查，以此來增加產(chǎn)品的易用性和可用性。二任務分析，從產(chǎn)品和用戶這兩方面入手，進行系統(tǒng)交互任務分析，之后進行各部分的功能分析，詳細繪制數(shù)據(jù)流程圖，并勾畫出任務流程圖和任務列表。三使用環(huán)境分析，判斷用戶在什么環(huán)境下會使用你的軟件，設計出最合適那種環(huán)境的交互方式，預計交互的復雜程度。四繪制草圖，根據(jù)以上判斷設計初步草圖，在繪制草圖的時候，考慮屏幕布局與顯示設計，在設計界面顯示元素的時候應該按照一下不走：1、按系統(tǒng)分析的結果，確定信息輸入和輸出的要求和內(nèi)容等。2、進行屏幕和窗口的層級結構設計。3、根據(jù)用戶的特征，確定界面上各交互元素顯示的位置和層次。4、充分考慮提示，出錯和幫助等信息。5、進行多次測試，如果發(fā)現(xiàn)什么不合適之處或者出錯的地方，進行重新設計和修改。五完成草圖后進行原型設計，原型設計是交互設計中最重要的一步，在設計的過程中運用原型被稱為原型設計。在整個前期的交互設計流程圖之后，就是原型的開發(fā)設計階段，簡單來說就是將頁面元素、布局模塊、人機交互的模式， 3利用簡單的線框語言，將產(chǎn)品在脫離實際生活的狀態(tài)下可以用一種更加具體跟生動的方式進行表達。產(chǎn)品的原型概括起來可以說是整個產(chǎn)品在面市之前的一個框架設計。原型設計能夠幫助設計師更加深入的理解用戶需求，并通過設計交互設計中的不足從而可以進一步改正。我們可以從以下方面來評估交互設計2、產(chǎn)品流程的清晰度，表現(xiàn)層級簡單，明確，無不必要的分流，其流程;用戶可以隨時取消正在進行的操作；對用戶的所有操作要有明確的消息反饋;用戶可以快速返回上一級；要有好的交互引導和幫助。3、正確的使用控件，產(chǎn)品會涉及到很多控件，比如一級標簽欄，二級標簽欄，對話框，按鈕，提示框，警告框等等，這些控件是否使用到位，對于控件使用是否精準有以下這些評估標準：使用控件的精準性(比如混淆了復選框和單選框)控件的重復使用(比如兩個列表框都用到了table,就不用設計兩個)控件的狀態(tài)(比如是否可點，可選狀態(tài)是否有顯示)4、準確的信息轉(zhuǎn)達，信息的轉(zhuǎn)達包括文字提醒設計等。提示文字需要內(nèi)容精準，信息傳要達的有效，這些都是衡量交互當人們在初次瀏覽到社交APP時，可以感受到APP界面想要傳達給用戶的所有豐富情感，進而引起用戶的共鳴。在使用過程中同樣會產(chǎn)生如好玩，實用，創(chuàng)新的使用感受。在APP界面的整體情境氛圍中，它情感的延伸可以維系到現(xiàn)在，不再僅僅停留在是功能上的完善，已經(jīng)逐漸擺脫一些陳舊的設計理念，力求從整體上帶給用戶更加輕松的社交氛圍以及更1、這個APP面向的用戶群是怎樣的，這些用戶的共同點是什么。這個APP 4主要是滿足怎樣的需求的。2、用戶在什么情況下下載了這個APP,在使用之前的預期是怎樣的，我希望通過它得到什么。3、第一次使用，用戶會對這個APP的印象是什么,為什么覺得它好。并且可以梳理一下用例、界面設計規(guī)范、體驗設計規(guī)范等等。5第2章工具軟件與交互設計發(fā)展2.1開發(fā)環(huán)境和工具MicrosoftVisio2010:是一款便于IT人士和商務專業(yè)人員就復雜信息、系統(tǒng)和流程進行可視化處理、分析和交流的軟件。BalsamiqMockups是一種軟件工程中快速原型的建立軟件，可以做為與用戶交互的一個界面草圖。BalsamiqMockups是美國加利福利亞的Balsamiq工作室(2008年3月創(chuàng)建)推出的原型圖繪制軟件。于2008年6月發(fā)行了第一個版本。它的使命是幫助人們更好、更容易的設計軟件產(chǎn)品。AxureRP是一個專業(yè)的快速設計原型工具。讓負責定義需求和規(guī)格、設計功能和界面的專家能夠快速創(chuàng)建應用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設計工具，它能快速、高效的創(chuàng)建原型，同時支持多人協(xié)作設計和版本控制管理2.2交互設計概念與發(fā)展對于交互設計AlanCooper有個經(jīng)典定義：簡單來說，交互設計就是人工作品、環(huán)境和系統(tǒng)的一種互動行為，以及傳達這種行為的外觀因素的設計和定義。其實所謂的交互設計，指的是設計師對產(chǎn)品和產(chǎn)品的使用者之間的互動機制進行的預測、描述、規(guī)劃、定義、分析和探索的一個過程。其實就是說，設計和定義使用者如何使用同一產(chǎn)品達到他們各自的目標，完成某一項任務的過程。交互設計是指設計人和產(chǎn)品以及服務互動的一種機制，它是以用戶體驗為基礎而進行的人機交互設計，要具體衡量使用者的背景、使用經(jīng)驗以及在操作的過程中的各種感受，這樣才可以設計出符合用戶的最終產(chǎn)品，使得最終用戶在使用產(chǎn)品時能感受到愉悅、符合自己的邏輯、并且對他們而言是高效的產(chǎn)品。交互設計的目的是使產(chǎn)品讓用戶能簡單使用。 6它是一種以目標為導向的設計，所有的工作內(nèi)容都是在圍繞著用戶行為去設計的。交互設計師通過設計用戶的行為，讓用戶更方便更有效率的去完成自JenniferPreece,HelenSharp,YvonneRogers在他們的《交互設計一超越人機交互》這本書中將交互設計定義為：設計是支持人們正常工作與生活的交互式產(chǎn)產(chǎn)品。Winograd把交互設計描述為“是人類交流和交互空間的設計”。交互設計作為一門關注交互體驗項目的新學科產(chǎn)生于二十世紀八十年代，它由IDEO的一位創(chuàng)始人比爾·摩格理吉(BillMoggridge)在1984年一次設計會議上提出，他一開始把它命名為“軟面(SoftFace)”,由于這個名字容易讓人想起和當時流行的玩具“椰菜娃娃(CabbagePatchdoll)”的名字，后來把它更名為“InteractionDesign”,即交互設計。初創(chuàng)期(1929年-1970年),提出基礎理念與定義。奠基期(1970年-1979年)從1970年到1973年出版了四本與計算機相關的人機工程學專著。1970年成立了兩個HCI研究中心：一個是英國的Lough另一個是美國公司的研究中心。1996年之后交互設計進入了提高期，人機交互的研究重點放到了智能化交互，多模態(tài)(多通道)-多媒體交互上面，人機協(xié)同交互以及虛擬交互等方面，而近十年來國內(nèi)許多公司在進行產(chǎn)品設計時也開始越來越注重界面交互設計，像中國移動公司，投入了兩年多時間創(chuàng)建了一支包括交互設計、圖形設計、可用性測試等30多人的隊伍。那個時候用戶體驗這件事還沒有興起，很多公司甚至都還沒有交互設計師這樣的一個崗位，交互設計師的事情基本上是由產(chǎn)品經(jīng)理或者視覺設計師在做，但是也就從那個時候開始，交互設計師開始漸漸走上了舞臺。本來按這個趨勢發(fā)展在08年~09年就應該進入爆發(fā)階段，但是由于受到了一些外界因素的影響，導致它真正地爆發(fā)是在2010年，那個時候用戶體驗這個概念已經(jīng)吹有點被言過其實了，但是當然這個是一個新興行業(yè)發(fā)展的必然階段。這個時期一直持續(xù)到了2011年，甚至到2012年的上半年這個形勢仍然是比較7浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)8第3章產(chǎn)品設計過程二、微信吸引客戶的一個最大的特點應該就是它是免費的。微信完全免費，QQ已存在的通訊錄網(wǎng)絡，可以免去自己在培養(yǎng)用戶的同時，再去發(fā)展一張用戶的智能手機普及率已達35%。所以，微信前景廣闊。浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)9迫使發(fā)布者需要以非常精煉的方式表達自己的觀點，這在信息泛濫、工作繁忙、注他，注意他的觀點。讓自己的觀點擁有忠實的聽眾，會使用戶心情非常愉悅。心理?聯(lián)網(wǎng)上出現(xiàn)了越來越多風格、內(nèi)容、營銷手段等都十分相似的微博網(wǎng)站。而且，(移動運營商付費，而不是向微博網(wǎng)站),使得大部分商家仍在觀望。浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)明回到家覺得很無聊，就打開軟件看看小區(qū)其他居民今天在干什么,正在看著發(fā)去吃，又不知道吃什么,吃完飯想去做美容理發(fā)，然后去運動健身，于是打開軟浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)主頁發(fā)帖周邊商束2用戶需要查看大圖片，所以默認展示縮略圖，點擊縮略圖可以查看大圖t寫元極y四加是建體例通取k圖3-2草圖1首頁的草圖，四個基本功能模塊的界面。浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)和和邊L第碎而u網(wǎng)生的w8-*議能確我的社區(qū)，以及設置頁面的草圖設計。在正式設計時需要一個規(guī)范的流程需求分析任務分析視覺改進浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)低保真原型是在設計初期幫助我們驗證想法的粗略表述不同于高保真原型，低保真原型的目的是要讓用戶清楚明白我們的i型昂發(fā)。這種方法在于幫助浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)圖△△圖△△D名學國評論容評論容夏長四A夏>0Ω圖3-6低保真簡單設計圖浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)第4章交互設計相關技術周邊商家搜索二手市場發(fā)帖的副本辦事流程4問題咨詢免打擾關于黑名單分享發(fā)帖社區(qū)資訊我的社區(qū)我的發(fā)布我的回復消息中心通知登錄我的社區(qū)未登錄浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)圖4-2便民服務頁面這個界面包含了周邊商家、檢查維修、社區(qū)號碼、問題咨詢、辦事流程、二手市場六個功能模塊。底部導航欄的四個板塊便民服務、社區(qū)論壇、社區(qū)資訊以及我的社區(qū)可以看出這個App的大致功能。浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)地址2000米支學院東門小米餐廳如圖4-3這個界面主要展示小區(qū)附近一些商家的信息，方便小區(qū)居民生活。居民可以通過這個頁面通過距離選擇來選擇自己喜歡的商家，減少很多不必要的搜素豪大大雞排搜索頁面用戶可以搜索自己想要的信息。檢查維修物業(yè)電話填寫維修信息聯(lián)系方式檢查維修頁面是居民和物業(yè)聯(lián)系的重要功能，用戶可以在這里寫下自己的維浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)小區(qū)名圖4-6二手市場浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)西亮社區(qū)有自乙的手加APP了第”等你加入!5個幼兒急救知識回這個頁面主要展示一些發(fā)生在社區(qū)的實時新聞，可以讓居民及時了解社區(qū)發(fā)生的事。圖4-8我的社區(qū)浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)十十圖4-9社區(qū)論壇4.2涉及到的部分交互設計技術浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)置。Case:設置文字值的值為空值，并顯示search-tip。If:search-box的文字值不為空值。添加失去焦點事件：Case:隱藏search-tip,并設置文字值的值為[請輸入關鍵詞]。2、輸入超過7個字符時隱藏列表。3、對列表中的關鍵詞添加鼠標移入背景高亮的效果，同時用高亮效果的關鍵詞用一個動態(tài)面板來做一個輸入聯(lián)想的列表，命名為search-list,設為隱藏，并在其中添加10個文字面板并依次命名為list-1～list-10。Case:顯示search-list,將焦點上的文字的值賦值給變量searchbar,并逐個設置將list-1～list-10的文字部件替換為該變量，格式改為類[[searchbar]]小米×,浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)號設置文字于list-7=“[lsearchbar]小米5”號設置文字于list-9=Tlsearchbar]小米7”設置文字于list-10=“[[searchIf:search-box的指長度值>7Case:隱藏search-liIf:search-box的文字部件為空值。Case:隱藏search-list。添加失去焦點事件：If:search-box的文字部件為空值。Case:隱藏search-list。浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)recover_tp號障微search-lst下方添加10個動態(tài)面板來做為高亮的背景，狀態(tài)設置為對list-1～list-10添加鼠標輸入事件：Case:隱藏listbg-1～listbg-10。用Rectangle控件長寬設置與search-box一致，邊框改為綠色，背景色調(diào)為透明，放置在一個動態(tài)面板中,命名為search-none,設為隱藏，并將位置微調(diào)至與search-box重合。閃爍效果可以利用展示面板事件的Animate屬性來If:search-box的文字部件為空值or為請輸Case:顯示search-none,隱藏search-none,再顯示search-none,再隱藏search-none,并將每一次的動畫屬性淡入淡出時間設為500ms。浙江科技學院信息與電子工程學院本科畢業(yè)設計(論文)1在組件庫中拖出Image組件，右鍵轉(zhuǎn)換為動態(tài)面板，然后添加輪播的三個狀態(tài)在這三個狀態(tài)中添加輪播需要的圖片。3為ImagesFrame添加OnPanelSateChange的事件用例，然后添