正文

交互原型設(shè)計(jì)（交互體驗(yàn)設(shè)計(jì)）

發(fā)布時(shí)間：2023-04-28 13:13:17 稿源：創(chuàng)意嶺閱讀： 828

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于交互原型設(shè)計(jì)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計(jì)相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、網(wǎng)站交互設(shè)計(jì)：線框圖，原型和視覺稿的區(qū)別
2、如何用Axure快速制作APP交互原型
3、關(guān)于交互設(shè)計(jì)的反思
4、什么是交互設(shè)計(jì)？

交互原型設(shè)計(jì)（交互體驗(yàn)設(shè)計(jì)）

一、網(wǎng)站交互設(shè)計(jì)：線框圖，原型和視覺稿的區(qū)別

首先，他們都是網(wǎng)站的界面和交互方面的模型，但完成度各不相同。

線框圖 —— 更多側(cè)重呈現(xiàn)網(wǎng)頁界面的主體結(jié)構(gòu)，極易只要的頁面跳轉(zhuǎn)和邏輯關(guān)系。一目了然的了解網(wǎng)頁設(shè)計(jì)的大致情況。

原型圖 —— 原型添加更多的界面細(xì)節(jié)以及交互，已然是相當(dāng)真實(shí)的網(wǎng)頁設(shè)計(jì)模型，能夠進(jìn)行初略的產(chǎn)品演示和測試。

視覺圖 —— 更進(jìn)一步豐富視覺、細(xì)節(jié)以及交互，與最終產(chǎn)品十分接近，方便演示和迭代。

當(dāng)然，設(shè)計(jì)師設(shè)計(jì)過程中，使用的工具也會(huì)有所不同。例如，線框圖和原型圖，一般原型設(shè)計(jì)工具，例如摹客Mockplus, 幾分鐘就能快速完成。它新出的在線全新升級(jí)版本，提供更多模板、組件、交互以及狀態(tài)設(shè)計(jì)選擇，高還原度原型設(shè)計(jì)，輕松打造。

二、如何用Axure快速制作APP交互原型

創(chuàng)建屬于自己的元件庫

原型制作工具的核心功能無非就是通過元件的堆砌組合，來展示產(chǎn)品的目標(biāo)形態(tài)和效果。Axure自帶的只是一些最基本的元件，而網(wǎng)上的元件庫龐雜混

亂，很難找到滿足需求并且稱心的元件，并且大部分都是位圖格式，根本無法修改顏色寬度等數(shù)值，制作出來的交互又怎么能達(dá)到精美的水準(zhǔn)要求呢？

還好Axure提供了「創(chuàng)建部件庫」的功能，能夠支持我們制作一份屬于自己的元件庫。我們可以通過軟件自帶的基本元件搭配組合出我們常用的圖標(biāo)、控件，制作完成后，每次應(yīng)用的時(shí)候還能根據(jù)實(shí)際情況調(diào)整顏色、大小、線寬的數(shù)值，從而才能實(shí)現(xiàn)交互稿統(tǒng)一完美的風(fēng)格。

比如，APP中經(jīng)常會(huì)用到一些主頁、分享、搜索、消息....各種圖標(biāo)，或者我們每次遇到喜歡的圖標(biāo)，都可以用Axure畫出來，以備不時(shí)之需。下邊以圖標(biāo)為例講一下制作元件庫的具體步驟。

一、創(chuàng)建元件庫“綠色文件”

打開Axure，在元件庫面板「三條橫線」按鈕下拉選項(xiàng)中找到「創(chuàng)建部件庫」功能，點(diǎn)擊會(huì)彈出一個(gè)另存為對話框，這里需要選擇元件庫文件的存儲(chǔ)位置，并需要輸入元件庫的名稱。

此時(shí)，我們可以看到，文件的后綴名為 .rplib，這個(gè)就是元件庫的格式，而不同于創(chuàng)作交互原型時(shí)正常Axure文件的.rp格式。

輸入文件名稱和存儲(chǔ)位置之后，點(diǎn)擊保存，Axure將重新打開一個(gè)新頁面進(jìn)行元件的編輯。并且我們可以看到，新頁面跟我們平時(shí)創(chuàng)造.rp正常文件的

頁面一模一樣，但不要混淆，此時(shí)頁面編輯的是我們在正常.rp文件中需要用的基本元件。并且我們回到元件庫存儲(chǔ)的位置可以看到，元件庫.rplib文件圖

標(biāo)為”綠色“，不同于.rp文件的藍(lán)色。

創(chuàng)建好元件庫得”綠色文件“后，基本準(zhǔn)備工作已經(jīng)做完，下邊就進(jìn)入到制作過程。

二、元件庫分組

通過觀察Axure默認(rèn)的元件庫，我們可以看到其元件庫是可以按照類別進(jìn)行分組的。比如默認(rèn)的分成了：common、forms、flow等等，這樣能更方便我們找到目標(biāo)元件的位置。

同樣，我們在制作元件庫的時(shí)候，也可以進(jìn)行分組，規(guī)則為：在頁面導(dǎo)航面板上，所有的文件夾都是一個(gè)分組，所有沒有在文件夾下的頁面包括其所有子頁面，都隸屬與以元件庫為名的分組下。

分組的規(guī)則弄明白之后，我們可以先按照自己對元件庫的規(guī)劃進(jìn)行一個(gè)合理的分組，比如要做APP的元件庫，那么我們可以分成：圖標(biāo)、控件、框架 3個(gè)常用分組，接下來就進(jìn)入到具體元件的制作過程。

三、編輯并制作元件

我們以制作一個(gè)”我的“頭像圖標(biāo)為例，首先在圖標(biāo)分組下，添加一個(gè)頁面并命名為”我的“，雙擊進(jìn)入到元件編輯頁面，編輯操作就跟我們平時(shí)制作正常

的.rp文件一模一樣。我們我們可以參考一些app中常常采用的”我的“圖標(biāo)樣式，然后用Axure默認(rèn)的基本形狀元件，比如矩形、橫線、圓形等，組合拼

湊成最終比較理想的樣子。

首先我們要明確，Axure中沒有類似PS中的布爾運(yùn)算（能夠自由的對多個(gè)形狀進(jìn)行編輯，比如合并、相交、減去頂層等），所以會(huì)給我們制作元件，尤

其是圖標(biāo)帶來一定局限性，但好在交互原型并不要求苛刻的細(xì)節(jié)實(shí)現(xiàn)，只要我們能夠很清楚的表示出產(chǎn)品形態(tài)，有比較整體的風(fēng)格就可以了。并且我們用Axure

基本形狀自己勾畫出來的圖標(biāo)，能很方便的調(diào)整顏色大小等，可以適用不同的交互文件，這就是從網(wǎng)上找現(xiàn)成的位圖圖標(biāo)很難達(dá)到的便利性。

回到“我的”圖標(biāo)制作，如圖所示，我一共用到了三個(gè)基本形狀來進(jìn)行拼湊，最終組合成了我們經(jīng)常能看到的一個(gè)圖標(biāo)樣式，并且一眼就能明白它的含義。雖然沒有更多的細(xì)節(jié)實(shí)現(xiàn)，但對于交互原型稿來說已經(jīng)完全夠用，關(guān)鍵是顏色大小等可以很靈活的進(jìn)行修改。

按照這個(gè)思路，我們可以制作更多的圖標(biāo)出來，當(dāng)然還可以制作一些常用控件比如按鈕、appbar、搜索欄、圖標(biāo)占位符等等。如下圖，是我在畫「讀讀日報(bào)」原型圖時(shí)制作的一個(gè)元件庫：

元件庫制作完成之后，然后就進(jìn)入到最后一個(gè)步驟。

四、載入自制元件庫并使用

元件庫制作完成保存在自己常用的資源文件夾中。打開一個(gè)正常的.rp文件，同樣是在元件庫面板「三條橫線」按鈕下拉選項(xiàng)中找到「載入部件庫」功能，然后找到制作完成的元件庫文件“綠色圖標(biāo)”載入。

載入之后，我們就可以在「選擇元件庫」下拉選項(xiàng)中，找到剛剛載入的元件庫并選中，然后我們就可以像使用軟件自帶的元件一樣使用我們自制的元件庫了。

怎么樣，看到這里你應(yīng)該學(xué)會(huì)了如何自制一個(gè)元件庫了吧，希望你會(huì)花時(shí)間動(dòng)手做一個(gè)。當(dāng)然除了創(chuàng)建部件庫，Axure有很多技巧都需要掌握，比如母版的功能。

學(xué)會(huì)善用母版

在產(chǎn)品的設(shè)計(jì)過程中，主導(dǎo)航往往出現(xiàn)在多個(gè)頁面，比如APP的底部tab欄。當(dāng)然不僅僅是導(dǎo)航，當(dāng)我們頻繁使用任何一組控件的時(shí)候，希望你不是一直都在復(fù)制和粘貼，永遠(yuǎn)記住，創(chuàng)建一個(gè)母版可能是更好的選擇。

使用母版的便利性不單單體現(xiàn)在能夠快速的使用一組控件，尤其是在設(shè)計(jì)后期，當(dāng)我們需要修改某些基本控件的時(shí)候，母版帶來的修改效率一定會(huì)讓你深深的愛上這個(gè)功能，欲罷不能。

除了學(xué)會(huì)使用母版，更要學(xué)會(huì)善用母版。同樣有一點(diǎn)希望能記住，不要把太大的組合對象變成母版。因?yàn)樵绞谴蟮慕M合對象，越是有可能需要在母版的很多地

方做出修改。此時(shí)把一些母版和另外一個(gè)母版合并起來一般會(huì)是更好的辦法，這樣對母版的修改會(huì)更加的靈活，比如下圖，將產(chǎn)品基本信息和可能購買狀態(tài)分開成兩

個(gè)母版，組合在一起成為產(chǎn)品的完整頁面

制定一套自己的交互風(fēng)格

學(xué)會(huì)了創(chuàng)建自己的元件庫，也懂得了善用母版，當(dāng)然還有其他很多Axure軟件的使用技巧。應(yīng)該就可以很快速的完成一份交互原型稿了吧，可是又該如何保證交付稿有統(tǒng)一的風(fēng)格，達(dá)到較高的目標(biāo)水準(zhǔn)呢？

首先，我們要熟悉APP的設(shè)計(jì)規(guī)范，符合Android或者iOS的設(shè)計(jì)理念，對于一些常規(guī)的控件設(shè)計(jì)規(guī)則有一定的了解。這樣設(shè)計(jì)出來的產(chǎn)品才能符

合這個(gè)平臺(tái)的特性，并且基于大家對相關(guān)平臺(tái)的一些固有認(rèn)知，很容易能夠達(dá)成共識(shí)。這也是交互原型作為一個(gè)溝通交付物應(yīng)該達(dá)成的目標(biāo)。

基于對APP設(shè)計(jì)規(guī)范的熟悉，同時(shí)在制作過程中，要根據(jù)使用場景以及自己的習(xí)慣來制定一套自己的交互風(fēng)格。比如可以定義好APP原型中，正文字體采

用微軟雅黑顏色#333333 13字號(hào)、提示文字為微軟雅黑顏色#999999

10字號(hào)、固定的appbar行高為40px，內(nèi)容據(jù)左側(cè)屏幕邊緣10px距離......

當(dāng)然某些規(guī)范，比如字體也可以當(dāng)成一個(gè)字體元件，放到我們自制的元件庫中，總之要根據(jù)自己的情況靈活的運(yùn)用。有了一套風(fēng)格之后，加上創(chuàng)建的元件庫隨意修改顏色大小等，我相信制作出來的交互原型肯定是協(xié)調(diào)統(tǒng)一的整體。

讀讀日報(bào)原型制作

理論方法掌握了，需要實(shí)踐的鍛煉才能更好的吸收領(lǐng)悟。我參照「讀讀日報(bào)」iOS版，對主要的一些頁面畫了一些交互原型。基本過程和思路就是按照本文所提到的這些內(nèi)容。

為了更有形象感，從網(wǎng)上找來一個(gè)iPhone手機(jī)的邊框，并且創(chuàng)建自己的部件庫，繪制了一些常用的圖標(biāo)和控件。然后設(shè)定了整體的風(fēng)格，制作過程中也用到了幾個(gè)母版提高效率，同時(shí)可以使用輔助線幫助自己保證部件的對齊、平均分布等，進(jìn)而提高布局的美感。

總結(jié)

末尾再次拋出我開篇提到的，如何用Axure快速制作APP交互原型的方法論：制作屬于自己的元件庫并要學(xué)會(huì)善用母版，熟悉APP設(shè)計(jì)規(guī)范并要有自己一套交互風(fēng)格樣式。

三、關(guān)于交互設(shè)計(jì)的反思

自從進(jìn)網(wǎng)宿科技的大半年中，對于當(dāng)前從事的交互設(shè)計(jì)一崗有很深的體會(huì)和反思；這顛覆了我之前在外包公司為客戶定制產(chǎn)品工作經(jīng)驗(yàn)的思維和習(xí)慣；然而對于如何成為一名合格交互設(shè)計(jì)師呢？在這條路上，我一直在反思著...

（以下反思的幾點(diǎn)，是這段時(shí)間自己學(xué)習(xí)和總結(jié)）

1、項(xiàng)目接入的時(shí)候，不要著急去畫原型

很多項(xiàng)目，在需求方提出需要UED的設(shè)計(jì)師支持原型設(shè)計(jì)的時(shí)候，可能都還沒有想的很清楚具體的細(xì)節(jié)。作為UE的我們需要的是幫上游梳理需求時(shí)候：要明確的知道產(chǎn)品的需求背景？需要實(shí)現(xiàn)怎樣的功能？這樣的功能是服務(wù)于哪些用戶的？用戶的行為習(xí)慣是怎樣的？在需求評審會(huì)的時(shí)候，經(jīng)?？吹饺缦碌牡那闆r

這個(gè)時(shí)候，作為交互設(shè)計(jì)師的我們就要仔細(xì)挖掘深入的需求，設(shè)計(jì)出實(shí)際符合產(chǎn)品的設(shè)計(jì)；

這個(gè)階段最好也有一個(gè)產(chǎn)出物：信息架構(gòu)（通過xmind or justmind or visio等工具，把需求理清楚，把自己想做的事情理清楚）

2、挖透需求，接下來是要搭建設(shè)計(jì)架構(gòu)

好的設(shè)計(jì)架構(gòu)，是至關(guān)重要的；優(yōu)秀的設(shè)計(jì)架構(gòu)能幫助解決用戶實(shí)際的問題，使用戶盡快完成自己的目標(biāo)，定位到自己想要的位置；就如同憤怒的小鳥游戲一樣，一定要有軌跡才能砸中目標(biāo)；越優(yōu)秀的設(shè)計(jì)架構(gòu)讓減少用戶的思考，畫好軌跡，打中目標(biāo)

3、進(jìn)行原型詳細(xì)交互設(shè)計(jì)

原型詳情交互設(shè)計(jì)，對于同一個(gè)東西可能有不同展示形式不同的方案。也許當(dāng)頁面做出來的時(shí)候，很多人看著界面，可能心里在想這樣的界面就是擺放位置，這樣點(diǎn)擊交互如此簡單。而對于讓大家擁有這樣的感覺，ue設(shè)計(jì)師在設(shè)計(jì)的時(shí)候；時(shí)刻要先想著有米有不同方案，不同設(shè)計(jì)交互方案是不是最符合用戶；是否可以在此設(shè)計(jì)上減少用戶的操作點(diǎn)擊次數(shù)，減少用戶的思考；話說好的設(shè)計(jì)，應(yīng)該是無思維負(fù)荷；如圖同樣的需求，卻有不一樣的展示交互方式；當(dāng)然每種交互方式適用不同的場景

4、反復(fù)調(diào)試，修改細(xì)節(jié)，編寫交互說明

也許很多人都會(huì)說，交互設(shè)計(jì)簡單表達(dá)交互方式就好，但是真正高手的交互設(shè)計(jì)師的原型，會(huì)讓你錯(cuò)覺是不是系統(tǒng)已經(jīng)實(shí)現(xiàn)。原型在我們手上需要經(jīng)過不斷的調(diào)試、不斷修改細(xì)節(jié)，保質(zhì)保量。而編寫交互說明，會(huì)讓你慢慢的發(fā)現(xiàn)一些你沒有看到想到的問題。人無完人，再縝密的思維可能也會(huì)考慮不周全的時(shí)候；在編寫交互說明的時(shí)候，可能會(huì)有發(fā)現(xiàn)一些更好的思路，更加能符合用戶的使用習(xí)慣；設(shè)計(jì)出符合用戶的習(xí)慣

5、done

后面工作中，其實(shí)我發(fā)現(xiàn)很多時(shí)候，你不單單要考慮用戶，而且要考慮公司戰(zhàn)略。設(shè)計(jì)的產(chǎn)品也要平衡產(chǎn)品、設(shè)計(jì)、開發(fā)的一些實(shí)際問題；找到平衡點(diǎn)，去做產(chǎn)品，去尋找最佳路徑

四、什么是交互設(shè)計(jì)？

什么是交互設(shè)計(jì)？交互設(shè)計(jì) 其實(shí)是設(shè)計(jì)可交互產(chǎn)品，來幫助人們在日常工作生活中的溝通和互動(dòng)方式。在本文中，我們將解釋交互設(shè)計(jì)是什么，介紹一些有用的交互設(shè)計(jì)模型，并簡要描述交互設(shè)計(jì)師通常做什么。

對交互設(shè)計(jì)的理解

交互設(shè)計(jì)可以用簡單的術(shù)語來理解：它是用戶和產(chǎn)品之間交互的設(shè)計(jì)。大多數(shù)情況下，當(dāng)人們談?wù)摻换ピO(shè)計(jì)時(shí)，他們討論的產(chǎn)品往往是應(yīng)用程序或網(wǎng)站等產(chǎn)品。交互設(shè)計(jì)的目的是提供給用戶具有可用性的產(chǎn)品，以幫助用戶實(shí)現(xiàn)其目標(biāo)。

這個(gè)定義聽起來很廣泛，那是因?yàn)榻换ピO(shè)計(jì)囊括了相當(dāng)多的內(nèi)容。交互設(shè)計(jì)通常涉及美學(xué)設(shè)計(jì)，動(dòng)態(tài)設(shè)計(jì)，聲音設(shè)計(jì)，空間設(shè)計(jì)等內(nèi)容。當(dāng)然，這些領(lǐng)域會(huì)交疊融合，因此我們可以說交互設(shè)計(jì)是一個(gè)跨學(xué)科領(lǐng)域的融合。

什么是用戶體驗(yàn)設(shè)計(jì)（UX）？

大家可能經(jīng)常聽到用戶體驗(yàn)設(shè)計(jì)這個(gè)名詞，用戶體驗(yàn)設(shè)計(jì)（UX，UXD，UED或XD）是通過提高與產(chǎn)品交互中提供的可用性，實(shí)用性和趣味性來提高用戶對產(chǎn)品滿意度的過程。

如果我們說交互設(shè)計(jì)依賴于設(shè)計(jì)師的設(shè)計(jì)思想和創(chuàng)造力，那么UX就更客觀，而且它總是要求設(shè)計(jì)師將用戶牢記在心。

交互設(shè)計(jì)師可以更像藝術(shù)家，他們可以創(chuàng)建新穎和開拓性的交互方法，而無需過多關(guān)注用戶體驗(yàn)。雖然UX設(shè)計(jì)師應(yīng)該更像科學(xué)家，但他們應(yīng)該盡可能客觀，尊重?cái)?shù)據(jù)并從用戶的角度考慮。

你可能已經(jīng)意識(shí)到，交互設(shè)計(jì)和UX設(shè)計(jì)之間存在巨大的重疊。畢竟，UX設(shè)計(jì)是關(guān)于塑造使用產(chǎn)品的體驗(yàn)，并且該體驗(yàn)的大部分涉及用戶和產(chǎn)品之間的一些交互。但是UX設(shè)計(jì)不僅僅是交互設(shè)計(jì)：它還涉及用戶研究（找出產(chǎn)品潛在的目標(biāo)用戶），建立用戶畫像（例如了解用戶因?yàn)槭裁丛?，在什么條件下，他們會(huì)使用該產(chǎn)品產(chǎn)品），并在設(shè)計(jì)過程中執(zhí)行用戶測試和可用性測試等。

什么是人機(jī)交互（HCI）？

HCI是一門專注于人類使用的交互式計(jì)算系統(tǒng)的設(shè)計(jì)。它研究的主要內(nèi)容是如何綜合使用計(jì)算機(jī)及設(shè)計(jì)基礎(chǔ)，來更好地滿足用戶對于計(jì)算機(jī)交互界面易用性和實(shí)用性的需求。它涉及到多個(gè)學(xué)科基礎(chǔ)與理論，其中包括：機(jī)器方面（計(jì)算機(jī)圖形，操作系統(tǒng)，程序設(shè)計(jì)語言）和人因方面（工業(yè)設(shè)計(jì)，社會(huì)科學(xué)，認(rèn)知心理學(xué)等）。

對于人機(jī)交互領(lǐng)域來說，它的核心有三個(gè)：人，計(jì)算機(jī)和交互。

總而言之，交互設(shè)計(jì)是一個(gè)廣泛的領(lǐng)域，涉及到多個(gè)學(xué)科，不同的實(shí)踐方法和理論。

下面這張圖片較詳細(xì)地描述了交互設(shè)計(jì)及其交叉學(xué)科之間錯(cuò)綜復(fù)雜的關(guān)系。

Image from Human Computer Interaction — briefintro

交互設(shè)計(jì)師在公司里的職責(zé)是什么？

其實(shí)，不同公司對于交互設(shè)計(jì)師的崗位和職責(zé)劃分是不同的。例如，如果公司足夠大并且擁有巨大的資源，那么它可能為UX設(shè)計(jì)人員和交互設(shè)計(jì)人員分別提供工作。例如，在大型設(shè)計(jì)團(tuán)隊(duì)中，可能會(huì)有UX研究員，信息架構(gòu)師，交互設(shè)計(jì)師和視覺設(shè)計(jì)師。但對于規(guī)模較小的公司和團(tuán)隊(duì)，大多數(shù)UX設(shè)計(jì)工作可能由1-2人完成。

交互設(shè)計(jì)師的工作內(nèi)容包括哪些？

以下是交互設(shè)計(jì)人員在日常工作中處理的一些任務(wù)：

設(shè)計(jì)策略

交互設(shè)計(jì)師需要關(guān)注產(chǎn)品的設(shè)計(jì)策略，包括了解用戶使用這款產(chǎn)品的目標(biāo)是什么，以及用戶在使用產(chǎn)品過程中所需完成的交互行為。在制定產(chǎn)品的設(shè)計(jì)策略之前，交互設(shè)計(jì)人員必須進(jìn)行用戶研究，以便在正式的設(shè)計(jì)工作開始之前了解用戶的目標(biāo)和需求。

線框和原型

大多數(shù)交互設(shè)計(jì)師的工作內(nèi)容包括繪制產(chǎn)品線框圖，和設(shè)計(jì)產(chǎn)品界面中的交互。其中包含低保真和高保真原型，以及可交互原型。

以上就是我們今天分享的有關(guān)“什么是交互設(shè)計(jì)”的相關(guān)內(nèi)容，下期再見：）

以上就是關(guān)于交互原型設(shè)計(jì)相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。