第一篇：交互原型設計軟件 Axure RP Pro 5 中文教程

交互原型設計軟件 Axure RP Pro 5 中文教程(1)

交互原型設計軟件 Axure RP Pro 5 中文教程 [By Hawking] October 9, 2008 at 11:11 am · Filed under WEB Design

來源：http://演示文件、word說明文檔，以及對生成規則進行自行編輯、定義。

功能區2：工具欄，基本和office風格一模一樣，功能也很容易上手。

功能區3：工作區，這就是我們平常操作工具，創建prototype的舞臺，將自己的構思在這里釋放，將自己的想法在這里展現。

工作區的上部顯示打開的文件名，可同時打開多文檔，進行操作。

功能區4：站點地圖，Axsure RP創建的文件是模擬真實網站頁面關系的，sitemap就是通過樹形目錄關系，管理所有的站點頁面文件與流程圖文件?？茖W的文件關系結構，對有效的演示文檔與生成易讀的說明文檔相當重要。

我的操作習慣是先畫流程圖，然后根據流程圖構建頁面文件框架，最后才開始頁面的具體設置。期間可以將文件分為LOFI（低保真）與HIFI（高保真）兩個部分進行分別展示，有利于不同的需求者使用。

功能區5：器具箱，囤積了所有用來畫wireframe與流程圖的對象。我們可以通過拖拽的方式將小圖形放入工作區，進行操作。對于這里面的對象，我們有必要一一詳細了解。

功能區6：復用模塊區，這里創建的頁面文件和sitemap的頁面相似，唯一不同的是，master的每個文件，可以當作一個整體，被

sitemap反復調用。這個功能就相當于程序開發中的程序復用，用好這個功能，可以減少我們很大一部的工作量。也更容易理解網頁文件的關系，了解網頁設 計師、程序員是怎么構建網站的頁面的。

功能區7：頁面筆記，用來對當前創作頁面進行注釋與說明。同時可以在這里對頁面里的關鍵字段和特殊問題進行詳細的描述。

功能區8：頁面載入時的交互功能。通過在這里設置，不同條件下，頁面初次打開時的狀況。

功能區9：注釋與交互區。這個注釋和交互和7、8不同，7、8針對的是頁面，而9針對的是頁面中的元素，也就是一個個widgets。

功能區的上面部分設置交互條件。通過鼠標點擊、滑入、滑出，設置觸發的事件，與對應widgets相應的變化。這一部分對沒有程序基礎的人可能會有一點難度，我稍后會做詳細解釋。

功能區的下面部分是注釋部分，用戶可以對選定的對象進行詳細的注釋。Axure已經設置了幾個默認的注釋字段，但是其實這些默認的注釋字段，大家完全可以不使用，因為它可能和你要說明的東西風馬牛不相及。

那么該怎么辦呢？Axure提供了自主設置字段，只要你自己設置好自己常用的字段，然后按照自己的習慣編寫就可以了。比如說你要說明對象的功能、優先

級、參數，那么你在設置中加入這三個字段就好了。Axure最大的優勢就是你設置的這些注釋，在生成說明文檔時，Axure自動幫你生成PRD規格的表格

文檔，你可以省去相當大的編號工作，與文檔工作。這些我在之后也會做說明。

這些就是Axure的主要功能區，但是其實還有兩個小的角落大家可能會忽略，那就是6、7、8區下面的一行系統信息，這里顯示的信息很重要，但

是一般人卻經常會忽視。我只所以說重要，因為我們在給ui設計師wireframe的時候他們總會問，這里多少像素，那里多少像素，可是我們在畫

wireframe的時候卻無法度量。Axure創建的wireframe，完全可以生成html，因此我們可以在畫的時候就度量好每個像素距離。但是我

們要怎么做呢？這就需要利用到下面這行小信息欄了。

信息欄左邊顯示的是文檔保存情況。而右邊呢，當你將一個widgets放入工作區，并選擇這個widget時，這里就有用了，它顯示的是你所選

擇widget的高寬，以及距離頁面頂部和左邊的px距離。通過使用上下左右鍵，結合這個信息欄，你可以一步一步將它移動到你想去的地方。有意思吧？

Part III :文檔管理(Document)

開章要說的是文檔管理。文檔管理看似簡單，但是這是從操作功能上來說的，而我在說功能上的時候，想把我對文檔管理的理解也一并說一下。

文檔管理的目的，其實是為了有一個清晰的產品思路。剛開始工作的時候，我發現很多剛從學校出來的朋友對文檔的命名與放置都是隨心所欲的，我也不

例外。沒有好的整理習慣，這直接導致每次尋找先前的文檔都要花費相當長的時間，甚至不小心誤刪，如果恰好有事請假，別的同事也無法接手工作。

所以，做一個prototype需要首先構建一個清晰的文檔關系，這樣一方面能夠讓自己清楚文件關系與位置，更主要的是讓開發者與接受者能清晰理解你的思路，生成更合理的產品說明word文檔。

Axure RP的sitemap，與windows的樹形目錄相似，是以父子關系構建頁面關系的，每個頁面既可以是一個頁面page，也可以是一個流程圖flow。

一、工具功能條

1、增加一個子頁面：為所選擇的頁面創建一個子頁面。

2、頁面上移：同等級的頁面中，將所選頁面的上下排列次序，上移一個位置。

3、頁面下移：同等級的頁面中，將所選頁面的上下排列次序，下移一個位置。

4、頁面降序：將所選頁面等級降序，作為原等級中，排列在所選頁面上方之頁面的子頁面。

5、頁面升序：將所選頁面等級升序，將所選頁面的頁面等級，升序為父頁面的同等級頁面。

6、刪除頁面：將所選頁面刪除，同時刪除其子頁面。

7、編輯頁面：在工作區打開所選擇頁面，進行編輯。

二、右鍵—增加為鼠標右擊文件所顯示命令，下同。

1、增加一個子頁面：同 一，1。（表示和第一大點，第1小點功能相同，以下同此）

2、在所選頁面之上增加一個同等級頁面。

3、在所選頁面之下增加一個同等級頁面。

三、右鍵—移動

1、頁面上移：同一，2。

2、頁面下移：同一，3。

3、頁面降序：同一，4。

4、頁面升序：同一，5。

四、右鍵—復制

1、復制頁面：復制所選頁面，作為同級頁面顯示在所選頁面下方。不包含所選頁面子頁面。

2、復制分支：復制所選頁面以及子頁面，作為同級分支顯示在所選頁面分支下方。

五、右鍵—頁面類型

1、wireframe：頁面類型定為線框圖，文件圖標顯示頁面圖標。

2、flow：頁面類型定位流程圖，文件圖標顯示流程圖標。

六、右鍵—其他

1、刪除頁面：同

一、6。

2、重命名頁面：為所選頁面重命名。

3、編輯頁面：同

一、7。

4、生成流程表：將所選頁面以及其子頁面關系，生成流程圖。生產圖有兩種頁面布局方式可選。標準模式，頁面按照父子關系從上自下排列；階梯模式，頁面按照父子關系從左上至右下，以階梯方式進行排列。

5、復制頁面鏈接到剪切板。

以上就是sitemap所有命令，其實這些命令都很簡單，也很容易理解，關鍵在于怎么去使用。

由于頁面有兩種類型，wireframe與flow，所以要善于用這兩種標記頁面，從而讓人理解你的意圖。我總結大致這兩種標記可以如下利用。

flow圖為父頁面，wireframe圖為子頁面：先畫流程圖，然后根據流程圖構建頁面關系。這樣在流程圖的指引下結構頁面關系，可以更清晰的理解頁面框架。

wireframe為父頁面，flow為子頁面：為頁面線框圖中的特殊部分做流程解釋。可以對頁面的細節部分進行詳盡的解釋。

當然，這兩種結構方式要活學活用，在復雜的產品頁面結構中，他們完全是你中有我，我中有你的。

Part IV : 模板復用(Templates)

masters和sitemap面板很相似，文檔操作也一樣，它們的本質區別是，sitemap里的文件是最終展示頁面，masters里的文件卻只是一個模塊，是頁面的一個部分。

masters的英文直譯是主人或雇主，但是我認為這里可以叫做模板，或者復用模塊。masters的文件，是頁面中重復的模塊，由于在不同頁面中這些模塊是一樣的，所以拿出來作為一個模塊編輯，然后在不同頁面中進行調用。

這個功能類似于網頁程序開發中的程序復用，不同頁面中調用同一段程序，一般把這段程序單獨做成一段頁面程序，然后用include命令進行調 用。master的文件就相當于這段被調用的頁面程序。dreamweaver也有類似的功能，就是template，可以參照理解。

一、功能條

master的功能條功能基本和sitemap一模一樣，功能也基本一樣。唯一不同的是master可以創建文件夾，可以通過文件夾收納不同的文件，因此唯一不同的就是第一個功能按鈕，功能作用是增加一個文件夾。

二、右鍵單擊文檔——增加

增加功能的功能模塊功能除了增加文件夾其他和sitemap相同，大家可以參考教程三中的二大條。

而masters的文檔組織結構主要依靠文件夾完成，頁面文件之間不存在父子關系。這是文檔操作與組織中與sitemap的最大不同。

三、右鍵單擊文檔——移動

文件移動功能基本上也和sitemap完全相同，但是父子關系的文檔移動是文件相對于文件夾完成，而不是相對于文件進行。

功能，基本上也可以參考教程三的第三點。

四、右鍵單擊文件——文件身份“行為”

behavior是行為的意思，這個功能是axure升級到4版本后加入的，是針對master的不同使用情況而添加的一個功能，也是要重點介紹的功能。

1、normal：普通文件。就是一般的復用文件。是默認創建的復用文件。

2、place in background：定位的復用模板，這類模板的特點是定位于頁面的底層，并且鎖定模板中的widgets在他原來創建的位置。這類復用模塊主要用于創建head、foot、側邊欄等明確定位的復用模塊。

3、custom widgets behavior：自定義模塊。這類模塊就類似于自創了一個widgets。

這類模塊與其他類型的復用模塊的不同在于，其他模塊與復用到頁面的模塊是完全相同的，模塊的功能設置是什么，功能說明是什么，頁面中的模塊設置和功能說明就是什么。

而自定義模塊與頁面中被復用的模塊是母子關系。自定義模塊只決定了模塊的功能和位置，但是進入到特定的頁面中，模塊中的各自部分的說明和功能可以重新定義。

充分理解三種不同類型的復用模塊的區別，根據不同環境有效的選擇，也是非常重要的。

五、右鍵單擊文件——其他 1、2、3功能都是文檔文檔操作功能，和sitemap一樣，分別是刪除、重命名和編輯master。4、5功能是對應的。前者是將所選模板文件批量運用于頁面，后者是將所選模板文件，批量從頁面中去除。通過選擇此功能，會彈出sitemap文件的樹形目錄，你可以通過選擇需要添加模板的頁面，從而完成模板使用或移除。

check all：選擇所有頁面

uncheck all：所有頁面都不選擇

check all children：選擇所選頁面以及其所有子頁面

uncheck all children：不選擇所選頁面以及其所有字頁面

在4中有特殊的position設置和options命令，position中有兩個命令

place in blackground：將文件至于頁面背景

specify location：是特殊定位，可以通過設置距離左側和上邊的距離，來將模板文件放入特定的位置。

options里的多選框的意思是“只有頁面中沒有此模板時才置入”，默認是選擇的。如果不選擇而置入頁面，就會出現如果頁面中已經有模板，模板被再次置入的情況。當然如果有特殊需要的模塊，就可以這么使用了。

6、usage report：使用報告，點擊后彈出面板，顯示所有使用了此復用模板的列表，顯示的是文件名稱，通過雙擊文件名，可以在工作區打開，直接編輯。

PartV:Widget工具

Axure RP的widgets工具欄，就是我們用來畫線框圖wireframe、流程圖flow的工具，也可以說是組成我們最終輸出圖表的零件。好比我們小時候玩 的組裝積木，這些工具就是組裝積木里的一個個小部件，組成什么？組合得怎樣？完全依靠個人的經驗和智慧。因此，熟悉每一個工具的用法和用途，才能隨心所欲 的畫出腦海中的圖形。

Widgets工具欄，下分兩類工具：

wireframe線框圖工具：基本上對應著web頁面中的各種圖形。針對頁面中交互行為的表達，Axure RP專門增加了image map region 圖像映射區、dynamic panel動態面版、menu（vertical/horizontal）水平/垂直菜單等幾個特殊的工具。

Flow工具：流程圖所需的基本圖形框架。

我們先談wireframe線框圖工具。學習這部分工具，如果事先有html基礎，或者對web頁面元素有比較充分的理解，就很容易入手。以下我根據圖片中的編碼，依次講解。

1、image圖片：給wireframe中插入一個圖片站位，也可以直接置入真實的圖片。

2、text panel文本：插入文本。相當于插入了一個< text >標簽。是不帶鏈接的文本。但是其實也可以帶鏈接，在interactions中我們會提到。

3、hyperlink超鏈接：插入帶鏈接的文本。相當于插入了一段帶< a >標簽的文字。但其實在Axure中它與普通文本除了外型不同，沒有本質區別。之所以將兩類文字區分開來，目的還是為了在視覺表達中讓人直觀的理解鏈接文本和普通文本，而這對于設計人員理解也非常重要，因此建議畫圖時盡量標準的區分鏈接文本和普通文本。

4、rectangle矩形：插入一個矩形。可以對其進行圖形樣式編輯。此圖形通暢被用來表達板塊的邊界。

5、placeholder占位符：插入一個占位符。占位符通常用來表達在頁面中某些特殊區域，比如情況復雜，或者在系統升級中不需要修改，又或者無關緊要的區域等等。作者需要結合說明文字，進行對應的詳細表達。

6、button按鈕：插入一個按鈕，相當于< button >標簽。按鈕一般結合表單使用，當然也可以作為強化的提示鏈接使用。

7、teble表格：插入一個表格。Axure的表格使用起來不是很方便，增加行、列，修改行、列寬度都不方便，算是一個敗筆。期待在下一個版

本的時候能夠有更好的進步。與標準化制作網頁一樣，表格的使用在畫wireframe的時候就應該明確其作用，是用來作為數據列表展示使用，而不是作為網 頁布局的控件。

8、text field文本輸入框：結合表單使用。一般用作表單中提交數據。比如搜索框、用戶登錄框、注冊信息填寫框等。用作字段提交或單行數據提交。

9、text area文本區：結合表單使用。一般用作大段文字編輯、提交。比如文章編輯、留言等板塊。

10、droplist下拉列表框：結合表單使用。一般用作下拉菜單或者下拉列表選項，比如在搜索中，可以通過下拉列表框來定位搜索分類的范圍。也有人用它來做友情鏈接，可以通過下拉選擇直接進行頁面跳轉。

11、listbox列表選擇框：結合表單使用。通過文本框列表選項，通常使用在多項列表選擇，比如在填寫簡歷表的時候，選擇你所感興趣的行業，會提供列表選擇框。不過列表選擇框都會結合按鈕使用。

12、checkbox多項選擇：多項選擇通常使用在表單中，以提供多項選擇。比如在有些有些注冊要求用戶選擇興趣愛好，會提供十多個選項，因為選項可以并列進行，因此使用的是多項選擇。

13、raido button單項選擇：在一組選擇中選擇適合選項，選項關系非此即彼。比如在填寫性別的時候提供男女選擇，用戶非男即女，只取一項。當然，不排除再多提供一個雙性選擇，這樣就是三選一，但是同樣是非此即彼的單一選擇。14、15、horizontal line水平線、vertical line垂直線：用以分割頁面中的不同板塊區域。由于web頁面中只能存在垂直與水平線，為了系統生成用于演示的html文件，特將兩種線條分開使用。

16、button shape形狀按鈕：相當于圖形按鈕，多用于導航，或者多幀切換的版面切換按鈕?？蛇M行邊角編輯。

17、image map region圖像映射區：它用于在web頁面中制造一片不可見的區域，一般是圖片的部分區域，相當于圖片的熱區，從而添加說明與互動。在現實的網頁中經常 會有一張大圖中有某個區域是觸發按鈕，而圖像映射區就可以用來說明這個區域的的功能和互動內容。

18、inline frame框架：類似于html中的< iframe >對象。用于在頁面中制造頁面框架，每個框架中嵌入不同的頁面。我們經?？吹胶笈_系統分左右兩欄，一般都是使用了框架，左側載入的是導航頁面，右側是載入的管理頁面。

Axure的缺點是，暫時不支持百分比，因此iframe都是按像素度量的，和實際頁面效果還是有差距。

19、dynamic panel動態面版：是Axure為了表現多幀區域內容而制造的一個工具。它的圖標很形象的說明了它的結構。它是不同的state疊加的一個動態區域，默

認顯示其中一個state，當用戶觸發按鈕、圖片或者下拉列表等時，可以設置相應動態面版切換到不同的state。不同state的關系，類似于

photoshop的層，也類似于html中的css屬性layer。

我們可以通過右擊dynamic panel進行state編輯，然后通過打開對應state進行編輯，編輯方式和編輯頁面相同。20、21、menu（vertical/horizontal）水平/垂直菜單：用于制作水平或者垂直的菜單，可以添加漂浮的的子菜單，添加方法很簡單，就是選擇所要添加的菜單項，添加submenu。

Axure RP pro 的widgets工具欄，另一個重要的工具組就是flow，流程工具。

對于畫流程圖，是我們經常會遇到的問題。我們和程序工程師溝通，用再多的口水，也無法挑明的事情，畫一張簡明的流程圖，就能很直白的說明關鍵問題。

有時候你可能會懊惱，因為程序員的思維猶如計算機，你告訴他為什么沒有用，你就告訴他該怎么做，是左是

右，是0是1就好了。這個時候，產品經理需要的是理性思維，清晰的思路，如果你不清晰，工程師大多數會跟著你的思路亂做一團。所以多畫幾個流程，多根據頁 面需求畫清晰的流程，就能解決實際的問題。

話不多說，本章主要介紹flow里面的工具，因為圖形其實很好介紹，簡單的英文翻譯就好了，所以也順帶說說這些圖形在流程里的作用。方式還和以前一樣，編號，對號入座，咱們來一個蘿卜，一個坑：

1、rectangle：矩形

作用：一般用作要執行的處理（process），在程序流程圖中做執行框。

在axure中如果是畫頁面框架圖，那么也可以指代一個頁面。有時候我會把頁面和執行命令放在同一個流程中做說明，這個時候將兩類不同的矩形做色彩區別，然后做說明就好了。

2、rounded rectangle：圓角矩形或者扁圓

作用：表示程序的開始或者結束，在程序流程圖中用作為起始框或者結束框。

3、beveled rectangle：斜角矩形

作用：斜角矩形我幾乎不使用，可以視情況自行定義?；蛘咴谄渌牧鞒虉D中，有特殊含義，暫不知曉，也希望有識之士指點一二。

4、diamond：菱形

作用：表示決策或判斷（例如：If…Then…Else）,在程序流程圖中，用作判別框。

5、file：文件

作用：表達為一個文件，可以是生成的文件，或者是調用的文件。如何定義，需要自己根據實際情況做解釋。

6、bracket：括弧

作用：注釋或者說明，也可以做條件敘述。一般流程到一個位置，做一段執行說明，或者特殊行為時，我會用到它。

7、semicircle：半圓形

作用：半圓在使用中常作為流程頁面跳轉、流程跳轉的標記。

8、triangle：三角形

作用：控制傳遞，一般和線條結合使用，畫數據傳遞。

9、trapezoid：梯形

作用：一般用作手動操作。

10、ellipse：橢圓形或圓形

作用：如果畫小圓，一般是用來表示按順序數據的流程。

如果是畫橢圓形，很多人用作流程的結束。如果是在use case用例圖中，橢圓就是一個用例了。

11、hexagon：六邊形

作用：表示準備之意，大多數人用作流程的起始，類似起始框。

12、parallelogram：平行四邊形

作用：一般表示數據，或確定的數據處理?；蛘弑硎举Y料輸入（Input）。

13、actor：角色

作用：來自于use case 用例，模擬流程中執行操作的角色是誰。需要注意的時，角色并非一定是人，有時候是機器自動執行，有時候也可是是模擬一個系統管理。

14、database：數據

作用：就是指保存我們網站數據的數據庫。

15、image：圖片

作用：表示一張圖片，或者置入一個已經畫好的圖片、流程或者一個環境。

基本上，axure講基本流程圖、頁面框架圖、use case 用例圖涉及到的一些關鍵圖形都囊括在flow流程工具中，模糊了流程圖的區別，而盡量貼近交互設計時的工作內容。

流程圖無疑只是一個表達的工具，我們在使用的時候應該根據自己的實際情況使用，而不應該死鉆牛角尖，非要知道某個圖形的通用標準。理解和溝通是第一位的。而對于某些具有標準性含義的圖形，大家人所共知，則我們應該遵循共同的準則，這樣就能達到表達的目的。

其實axure里面由于不涉及到具體的程序流程，所以有些標準的圖形并沒有提供，如不規則圖形、側面雙

矩形等，大家可以自己google一下或者baidu一下很容易就知道。大多數情況下，還是自己自定義一下自己的符號標準，就跟prd文檔加上名詞解釋一 樣，才是解決方法。

來自: http://hi.baidu.com/liuquan1021/blog/item/91ff4f365ef84c45241f1484.html

第二篇：軟件交互系的自薦信（范文）

軟件交互系的自薦信范文,關鍵詞是自薦信,軟件交互系,

尊敬的領導：

您好!衷心的感謝您在百忙之中翻閱我的這份材料，并祝愿貴單位事業欣欣向榮，蒸蒸日上!

我是x大學xx學院軟件交互屆畢業生，自從今日大學之后，高考后的輕松、獲知被錄取的喜悅隨風而逝，因為我的從新開始，繼續努力奮斗，迎接新的挑戰。時光飛梭，我講到這童年的夢想、青年的理想離開學校，走上工作崗位。大學四年是我思想、知識結構及心理、生長成熟的四年。惠于理工大學的濃厚學習、創新氛圍，熔融其中四年使我成為一名復合型人才。

在校期間，我勤奮學習專業知識，努力把理論知識運用到實踐中去，曾參加全國大學生電子設計競賽，并取得佳績。此外我很喜歡電腦，不僅熟練掌握基本應用軟件的使用，而且順利通過國家社會和勞動保障部高新技術信息職業資格中級考試和微軟ATC認證考試。在英語方面，通過國家英語四級，并且參加英語口語培訓。

此外，我積極投身學生會和廣播站等學生組織為同學服務，表現出色，貢獻卓越，曾先后榮獲校級“優秀三好學生兼優秀團員”、“優秀學生干部”、“校廣播站系統”杰出工作者“等稱號。

“長風破浪會有時，直掛云帆濟滄?！保艺嬲\地希望加盟貴公司，我定會以飽滿的熱情和堅韌的性格勤奮工作，與同事精誠合作，為貴單位的發展盡自己的綿薄之力。下頁附履歷敬請勘酌，懇請接納，回函是盼，我恭候您的佳音!

此致

敬禮!

第三篇：基于軟件交互設計綜合實踐教學研究

基于軟件交互設計綜合實踐教學研究

摘 要：針對專業交叉團隊合作模式的培養體系，提出綜合實踐方式，以廣東東軟學院為例，根據專業方向進行崗位設置，配備具有雙師素質的教師、企業工程師進行全程交叉指導，分階段、分崗位進行考核，將軟件交互設計工作貫穿于綜合實踐開發過程的各個階段，使實踐成果達到軟件交互設計的期望目標，同時也引導學生以用戶為中心并以人性化的軟件交互設計理念，培養軟件交互原型設計能力，加強對可用性設計的評估能力。

關鍵詞：綜合實踐；交互技術；原型設計；軟件評估概述及背景

隨著人機交互技術的快速發展，軟件數量日漸暴增，最新版本的軟件工程知識體系 SWEBOK V3.0將人機交互列為一個獨立的知識域[1]，交互設計也成為軟件產品競爭與創新的關鍵，但是軟件質量卻參差不齊，特別是體現在用戶可用性與易用性等方面；同時，在實際項目開發過程中，用戶需求不明確、不完整、變更頻繁等因素導致系統設計困難，實現的系統與需求不一致，項目風險提升，致使項目延期或者成本超支。開發者要提升軟件核心競爭力，需要關注用戶在使用過程中的體驗與感受，掌握軟件開發過程中的工程方法、核心技術及開發工具，運用綜合知識，開發出滿足用戶需求的優質軟件。實踐學期組織

2.1 基本思路

軟件綜合實踐安排在大二暑假學期進行，以“研究用戶需求、強化實踐技能、突出能力培養”為實踐思想，采用以用戶為中心的創新實踐教學體系，以能力培養為重點，以就業為導向，培養學生具備崗位所需的職業能力。

開發周期為4周，以項目團隊為組織形式，采用基于項目案例的綜合實踐教學體系以及分階段、分崗位的考核形式。實踐的組織模式更貼近實際工作需要，即根據專業（包括專業方向）的就業崗位進行項目團隊的崗位設置，項目團隊以1：2：1：1：1：1：1的比例設有項目經理（兼）、軟件開發、數據庫開發、Web前端開發、軟件測試、系統實施與維護、基礎網絡設施搭建等崗位，以經過裁剪、修改或補充的真實項目需求作為團隊的目標進行實踐，配備具有雙師素質的教師、企業工程師進行全程交叉指導。

隨著人機交互在軟件設計與開發中的地位變得越來越重要，有些引領企業如蘋果公司已經派生出交互設計師、界面設計師、可用性工程師、用戶體驗設計師等職業，而更多的企業則由軟件工程師兼顧交互設計方面的工作[2]（如圖1所示）。根據圖1可知，Web前端開發由網站規劃與開發專業的學生承擔，而交互設計是Web前端開發中的核心內容。

2.2 交互設計

交互設計（interaction design，IXD）是一種系統的設計，產生于20世紀80年代，以實現產品的“可用性”和“用戶體驗”為目標，把握設計、行為設計和形式設計3者的相互關系，由人（people）、行為（activity）、產品使用時的場景（context）和支持交互行為的技術（technology）組成，簡稱 PACT [3]。

交互設計原型和可用性評估是交互設計的核心，科學地建立符合用戶需求的交互原型是交互設計追求的目標[4]。其中，原型設計能夠快速發掘并明確用戶的需求，是交互設計師、用戶和軟件工程師收集需求、確認需求最好的溝通工具；可用性評估是基于真實用戶，找出軟件可用性方面的問題，也是提高產品可用性的有效途徑。實踐開發過程

整個實踐學期，從實踐項目啟動到項目總結結束，軟件交互設計崗位的工作貫穿軟件工程開發過程，采用迭代、循序漸進的方法進行軟件開發，如圖2所示。

從軟件項目實施過程來看，由于存在學生缺乏軟件開發經驗、需求變更過多、缺乏軟件測評手段、進度計劃不合理等項目風險，因此用戶會對軟件質量和開發周期提出更高的要求。為了降低軟件危機，確保項目順利交付，項目的需求分析階段可采用場景劇本、角色法、訪談法、親和圖法等方式進行用戶調研，形成信息架構；概要設計和詳細設計階段輸出交互原型，使用原型技術和可用性評估對需求及設計進行驗證；編碼階段由網站開發專業學生負責軟件Web前端開發，使用html、css、javacsript、Bootstrap框架等技術完成前端頁面開發；測試階段由網站開發專業學生對軟件進行交互設計評估、交互需求驗證、軟件可用性確認并輸出評估報告，評估報告會反饋給軟件開發崗位學生，軟件崗位的學生會根據技術約束、資金、開發時間等因素，與交互設計人員溝通，形成最終的修改方案，整個過程會迭代進行，直至項目完成。實踐內容與成果

軟件綜合開發實踐中，網站開發專業的學生承擔Web前端開發，具體工作內容包括需求分析、軟件原型、軟件界面設計、Web前端開發、軟件評估等。網站開發專業學生工作中的重點不僅僅是使界面美觀，還要實現軟件的可用性、易用性、有效性等指標。

軟件開發流程中交互設計崗位主要工作分成4個階段：需求調研分析、原型設計、軟件界面開發和軟件評估。針對4個階段的主要工作，對其使用的工具、技術和方法以及輸出成果進行闡述，具體內容見表1。實踐考核方式

根據各專業的畢業標準，課程?M教師制定了一套全方位、科學有效的考核體系。答辯委員會分別由指導老師、學校督導和企業工程師組成。

學生實踐學期的總體考核方案分為3部分：IT職業素養能力（30%）、團隊實踐成果（30%）和崗位專業技能（40%）。其中，IT職業素養能力和團隊實踐成果考核是各專業通用，崗位專業技能考核根據各專業單獨設置考核點。我們以網站開發技術專業為例進行介紹，見表2。實踐意義

網站開發技術專業學生于大二已經學習了Java程序設計、網頁設計與制作、Web開發基礎、Javascript頁面特效設計、Javascript服務器技術、網站界面設計藝術等課程，掌握了Dreamweaver、Photoshop和Flash軟件的操作以及HTML、CSS、Javascript、Ajax等技術，具備了網站前端開發基本技能，但是缺乏開發經驗，針對項目的需求分析，不能合理安排和組織內容以及設計軟件界面，難以開發出有吸引力、易尋、易用、用戶友好的網站。

通過學期項目實踐，培養學生對用戶界面設計的審美能力，增強其對可用性設計的評估能力[5]，幫助學生積累項目經驗和提高開發效率；在團隊合作過程中培養學生的團隊合作能力，樹立以用戶為中心的交互設計開發理念。基于軟件交互設計的綜合實踐過程，應最大限度地明確需求，減少方案設計時的隨意性和迭代次數，提高開發效率，降低項目開發的風險，保證軟件產品滿足用戶需求。

綜合實踐學期結束，學校舉行院級小學期競賽，其中，人力資源管理系統、Neusoft好課堂、MyHouseRent房屋租賃平臺管理系統、SOVO?C合管理系統、奧運獎牌記錄管理系統、“程序猿”學院等作品獲獎。

教師可以競賽的方式激發學生的潛能，培養學生對軟件開發的興趣，同時為學生校外競賽打好堅實的基礎。例如，2016年攀登計劃省級立項并獲得撥款，包括基于Face++的人臉識別考勤系統（2萬元）、基于Android系統的金標試紙定量檢測儀的研制（1.5萬元）；2016年大學生創新創業省級立項并獲得撥款，包括基于Android的老人緊急報警APP（1萬元）、“打醬油”移動社區App（1萬元）；第四屆“多迪杯”全國大學生網站開發大賽中，作品“ECHO商城”獲得國家特等獎，獎金5 000元。結 語

我院實踐了具有特色的實踐教學模式，即兩個理論教學學期后，安排一個綜合實踐學期，更好地把理論知識轉換為能力，突出實踐能力的培養。軟件綜合實踐教學體系以優質創新教學建設為目的，以達到教學質量為最高目標，為培養學生實踐能力和創新精神打下了堅實的基礎。未來的計算機軟件應用中，人機交互必然會發揮越來越重要的作用，我們將繼續緊跟時代步伐，積極創新，不斷積累教學經驗，探索合適的教學體系，不斷提高學生的創新能力以適應社會需求。

參考文獻：

[1] Bourque P，Fairley R E.Guide to the software engineering body of knowledge，Version 3.0[EB/OL].（2015-08-19）[2017-04-23].http：//www.researchgate.net/publication/224302077_Guide_to_the_Software_ Engineering_Body_of_Knowledge_2004_Version.[2] 梁爽.用戶交互技術課程的實踐教學方法探索[J].計算機教育，2015（23）： 48-52.[3] 郭璐，李雅箏.基于PACT-P模式的社交網站交互設計策略研究： 以“人人網”為例[J].今傳媒，2014（1）： 15-17.[4] 陳波，劉彥秀.基于公理設計的交互原型構建研究[J].人類工效學，2016，22（1）： 68-72.[5] 林連南，劉嘉偉，許南鴻.人機交互課程體系設計的研究[J].計算機教育，2015（1）： 78-82.（編輯：宋文婷）

第四篇：交互設計心得整理

交互設計心得整理

長期以來我就有對幾年來交互設計的心得進行總結整理的想法?；氐街袊鴣碛H身體會到不少同行，主要是交互設計師和視覺設計師對于交互設計的困惑，以及其他行業對于交互設計的誤解和濫用。后來我在小范圍內開設了一個關于交互設計的講座；現在把它整理成文，希望與同行切磋，共同進步。

這篇文章是我幾年來在美國從事交互設計工作的一個經驗總結。當時我們遵循以用戶為中心（User-Centered-Design, 簡稱UCD）的設計原則，每一個項目都是不折不扣的按所有UCD的步驟進行。下面總結的交互設計的方法，是從UCD的過程中提煉出來，也就是說，同樣適用于任何非UCD的設計過程。交互設計的流程

如果一提到交互設計，你就想到畫線框圖或原型圖，那你只對了五分之一。交互設計是一個過程，從開始到結束有一套系統的流程。原型圖只是其中的一個環節。

當接到一個設計項目，怎么開始？都應該做哪些工作？怎樣盡可能的保證交付物滿足既定的功能以及用戶體驗層面的易用性？

第一步，是任務分析，列出界面所要完成的所有任務。第二步按各任務確定頁面流程，建立信息架構。接下來是創建統一的頁面布局包括分區等。然后在頁面布局的基礎上進行原型設計，可以是低保真和高保真的原型圖。最后編寫設計說明。下面以設計一款動感相冊界面為例，逐步講解各個環節。1.任務分析

第一步任務分析。這里要做的是對于將要設計的這個新界面的所有任務的分析，也就是用戶在界面上能進行的所有操作。這個分析在功能需求的基礎上進行，需求方一般提供一個功能點的列表。

任務分析最常見的是任務列表，另外有任務流程和任務場景等。下面以任務列表為例。列出所有主要任務，以及每個主要任務的子任務。再把子任務細分到各個步驟。形成下面這個列表。主要任務1 子任務1 步驟1 步驟2 子任務2 步驟1 步驟2 主要任務2 …

以動感相冊為例，任務分析列表如下：

1.瀏覽相冊 1)瀏覽相冊列表 2)選擇相冊 3)瀏覽照片 2.創建新相冊 1)添加照片 a)選擇已有相冊 b)選擇照片 c)排列順序 d)添加字幕文字 e)選擇動畫效果 2)添加模板 a)瀏覽模板 b)選擇模板 3)添加音樂 a)瀏覽音樂列表 I.試聽音樂 II.選擇音樂 b)增加新音樂 I.打開本地文件 II.選擇音樂 4)預覽（略）… 5)命名（略）… 6)保存（略）… 3.修改相冊（略）…

任務列表包括所有功能點，并對每一個功能點的邏輯關系進行整合。必要時會對各任務的使用頻率和其它影響設計的重要因素進行分析，這里不做解釋了。2.頁面流程

任務分析完成后，進入設計的第一步，即設計頁面流程。頁面流程是設計的開始，也是重要的一環。它決定整個界面的信息架構和操作邏輯。頁面流程是上一步任務分析的自然轉化。一般來說，一個主要任務就是一個頁面，其它子任務也可以轉化為頁面。

以動感相冊為例，頁面流程如下：

頁面幾乎是把任務分析照搬過來了。所以上一步做好了，這一步很輕松，而且越往后越輕松。注意這個流程圖應該包括所有將要設計的新頁面，一個不少，一個不多。它不僅確定頁面內容，頁面數量，還確定各頁面之間的關系。如果在后來設計具體頁面原型時，發現這個流程圖多了或少了頁面，或者頁面關系發生了變化，說明你的功夫不到家（這個比較難，我一般不苛求我們的設計師）。根據原型圖來創建或者修改頁面流程圖，不是在做設計，而是在寫設計說明。3.頁面布局

第三步頁面布局是具體頁面設計的開始，在上一步知道有哪些頁面需要進行設計后，這里對頁面進行劃分，對內容進行組織。最重要的一點是確定頁面分區。以動感相冊為例，頁面布局如下： 總布局，即通用布局，適合所有頁面。

具體頁面布局，在不與總布局沖突的情況下，有更細節的布局。

頁面布局賦予零碎的內容以邏輯性，以分區的形式把頁面各區域所對應的功能區確定下來，減少具體設計時的隨意性。這是設計嚴謹與否的表現所在。把類似的操作放在一起，對于用戶來說是可以預見的，用戶能夠判斷哪個操作在哪個區域，減少盲目尋找帶來的困難和疑惑。4.原型設計 這一步是大家熟知的，即具體頁面的設計。這一步設計把所有的界面元素表現出來。可以有低保真和高保真原型圖。低保真即是線框圖，高保真多是接近最終效果圖。下面是動感相冊的低保真原型圖。

5.設計說明

最后一步需要做的是對所有頁面進行詳細的描述，包括對頁面上所有元素進行說明，比如默認狀態，跳轉頁面，字號字體，尺寸等。這里就不解釋了。這是交給開發人員的文檔，以及測試人員進行測試的依據。小結

交互設計是一個過程，它不僅僅是畫線框圖。交互設計最關鍵的兩個環節是頁面流程和頁面布局，前者建立清晰的架構和嚴密的邏輯，后者整合零散的信息并確定分明的主次關系。這一切都是為了我們的終極目標——讓我們的界面符合用戶的預期，不帶給他們任何的意外。一切都在用戶的意料之中。

第五篇：交互設計檔案

交互設計師的基本素質

首先，談談我個人對交互設計師基本素質的看法。從我個人的理解來看，可以簡單歸納為九字訣：“聽、看、想、說、磨、做、驗、寫、講”（如圖1.1）。

圖1.1 1）聽：做一個交互設計師，最重要的一點就是要懂得傾聽（這里蘊藏了一個隱晦的性格屬性：謙虛?。ＭǔＧ闆r下，我們不是用戶，所以很難 100%代表用戶，更左右不了老板，所以我們首先要有聽的本事，把來自用戶的、老板的、PD的、視覺的、前端的、開發的、測試的、市場的、業界的等各方面的聲音都聽過來，聽進去。

2）看：99%的情況下，交互不是一蹴而就的創造工作，它是站在前人肩膀上不斷迭代更新的行為過程。我這里指的“看”是要求設計師能博覽、能泛獵，看到好的，見過差的，什么都略懂，交互才能變得很美??

3）想：交互是思考的輸出產物和表現形式。當設計師將之前聽到的和看到的內容在頭腦中加以整理、分析，經過發散的創造性碰撞和嚴謹的邏輯論證后，逐漸得到了相對靠譜的交互產物。這個思索分析的過程貫穿于交互設計工作流程的每個環節。

4）說：一個能說會道的人不一定是一個優秀的交互設計師，但一個優秀的交互設計師必然是一個善于準確表達自己想法和觀點的人。在這一點上，我堅持交互是一門分享的學科，需要的是開放的性格和良好的溝通技巧。

5）磨：耐心、技巧、熱情的綜合表現。在一個項目的進程中，不可避免的會面臨很多的挑戰，優秀的交互設計師善于發揮“磨”的精神，他們懷揣對交互專業的無比熱情，以無所不用其極的技巧，耐心的纏死一個又一個質疑方，最終讓大家認同并幫助推動設計的實現。通常來說，一個優秀的交互設計師會是一個優秀的Idea推銷員。

6）做：交互設計師專業度的核心表現。俗語說得好，是騾子是馬，牽出來遛遛。對于交互設計師來說，之前的環節做得再好、再完美，也只是停留在設計師自己的腦子里，游蕩于聽眾們的耳膜間。如果理論落實不到實際，那所有的想法都只是空中樓閣，你之前所有的努力都只是在佐證你的空泛和不切實際。所以我們不僅要能 “做”，更要“做”得漂亮，“做”得完美！我一直都是這樣認為：“做”決定了一個交互設計師是不是靠譜，決定了一個交互設計師的高度，是一個交互設計師最根本的專業素質。

7）驗：用戶體驗設計，最終是要落實到用戶的身上的。客觀中立的驗證、分析、評估能力是一個優秀交互設計師的重要素質。無論個人還是團隊，設計的成果都需要通過精準的測試才能算得上合乎標準，此時，一顆平常心和一雙敏銳的眼睛是設計師最需要的。

8）寫：分析、歸納和總結能力的綜合表現。一個項目，無論成功還是失敗，總是有很多地方值得設計師本人或后來人借鑒。交互設計之路不是一座苛求零失誤的獨木橋，但絕對是一條要求零“重復”失誤的單行線。評價一個設計師的專業度，很重要的一環就是看他能不能多犯前人從來沒有犯過的錯誤，并能有效總結給后來人。于是，他就成了大家，路就這樣被趟了出來??

9）講：演講能力。這里所指的是在項目后期進行的交流分享。一個專業的交互設計師會站在宏觀的高度上，以平和的心態同他人溝通，驗證自己先前設計的合理性、全面性和科學性，更好的提高自己的專業能力，為今后的交互設計做好準備。

·交互專業度的具象化表現

剛才講了很多，但總體來說還是偏理論，還是讓人摸不著頭腦，虛幻的概念最大的優勢在于它的顛簸不破和四平八穩，誰也揪不住它的小辮子。但這不是我的風格，更不是我寫這篇文章的初衷，我希望的是拋磚引玉，給大家帶來一些真正意義上能直接使用的東西。所以，接下來，我們來些“干貨”，玩點簡單粗暴的??

圖1.2

根據阿里巴巴目前的產品開發流程（如圖1.2），交互設計是大環節中的一個小點，拋開雜亂的干擾信息，單純考量交互設計師在過程中的參與度，我們就能得到一個理想化的交互設計行為流（如圖1.3）：

圖1.3 流程沒什么好講的，更沒什么好爭辯的，無非也就是增加一個、減少一個、偷換概念、細分歸納之類的忽悠。我這里想和大家分享的是流程中每個環節的專業輸出物，我有一個激進的想法：如果某人能精準的完成某些公認的標準化輸出物，那他99%可以被稱為是一個“專業”的75分交互設計師了，剩下的 1%，也許是拼RP??

這里，我先簡單交代一下即將涉及到的流程節點、對應輸出物的圖形色塊的代表含義。

1）流程環節說明（如圖1.4）：

圖1.4 2）流程環節各輸出物說明（如圖1.5）：

圖1.5 在我看來，一個專業的交互設計師，在一個理想化產品設計的過程中，有一些是屬于必須的輸出物，有一些屬于最好有（推薦）的輸出物，還有一些屬于可有可無的輸出物。同時，根據項目的實際情況和參與角色的分工情況，存在一些交互設計師可能需要負責的輸出物，具體細節我將在下面逐一介紹。1）需求獲取階段：

此階段通常來說會由PD等外部資源發起，輸出物主要是FRD文檔和時間計劃文檔，用以描述問題、提出初步目標，假想可能的解決方案、預估資源并梳理時間計劃等。當然，對于從UED內部發起的項目，這兩部分的輸出也可以由交互設計師完成，屬于可能責任輸出物； 2）需求分析階段：

歷史數據的關注和分析階段，基于項目本身，要針對競爭對手、行業現狀等做詳盡的收集和分析，其中的關鍵考核點是要做必要的頭腦風暴，獲取發散而全面的信息集合。在此階段，競爭分析報告和頭腦風暴輸出物是交互設計師專業度的重要表現。

3）用戶訪談階段：

對于一些條件允許的項目，我們建議能在項目初期尋求一些用戶的信息，定義一些用戶的屬性，這些對于之后的交互設計都會是堅實的基礎。一個高專業度的交互設計師甚至會主動介入訪談問卷的設定工作，客觀的參與調研報告輸出的全過程。

4）需求修正階段：

專業的交互設計師通常不甘于淪為一個純粹的資源，抗拒被動的接受命令。我們之前經歷的需求分析和用戶訪談都是為掌控主動權而做的準備。如今，我們有理有據，應該主動出擊，和需求方討論研究需求的合理性、可行性，明確最終的修正目標，并對達成目標所涉及的重點突破點有理性的分析判斷，篩選出各設計點的優先級。5）設計草稿階段

項目目標和設計方向確定下來后，我們將進入核心的設計環節。作為交互設計師的“殺手锏”，交互流程和線框草圖當然一個都不能少，但此時我更想強調一項輔助性質的調研分析工作。從交互的角度來看，在大流程大框架敲定的情況下，交互設計師通常會投入更多的精力在一些核心的設計點，也就是我們在需求修正階段確認的設計重點。此時，專業的設計師絕對不會拍腦袋設計，更不會想當然出方案，而是會針對這些核心點做業界調研和分析，為自己即將進行的設計尋求一個足夠寬廣厚實的肩膀。6）設計細化階段

第一階段的設計工作將在此階段性輸出。我們回顧一下，截止此時的設計產物有：用戶調研報告、FRD確認文檔、交互流程、線框草圖、核心設計調研分析、核心設計詳細說明、交互流程整體說明等?；旧?，一個交互設計師的專業度，已經可以根據此時的輸出物數量、質量看出個大概齊了 7）專家評審階段

一個專業的交互設計師，要謙虛。此刻，我們進入小范圍專家評審的階段了，三個臭皮匠還頂一個諸葛亮呢，更何況是參與評審的專家呢。此時設計師的專業度就體現在 “聽”、“說”和“想”這三訣上，耐心的做好評審記錄，有理有據的同專家們進行專業溝通，并確認最終的結論和方向。8）設計優化階段

經歷了專家團的考驗，又該抖擻精神重新上路了，沒什么好說的，把過程做好了，你的專業度也就到位了。設計優化階段的投入度和產出將直接影響到后續Demo及測試的效果，和最終設計也息息相關，各位交互設計師們，千萬別打瞌睡了！

9）仿真Demo開發階段

終于到了仿真Demo的模型化階段啦，這時盡管并沒有直接的交互輸出物，但還是需要交互設計師用百分百的挑刺精神，協助視覺和前端精準的達成我們之前的設計，嚴格保證最佳的輸出效果。10）測試驗證階段

仿真Demo出來之后，將進入最后的測試驗證階段，根據項目的實際情況，可能是QA測試，也可能是用戶測試，總之，這個環節能幫助設計師最后把關設計的合理性，專業如你，一定要親自跟進測試并給出最終的評估報告，哪些點是前期沒有考慮周全的？那些點是成功的？哪些點是必須立即改進的？哪些點能以后再說？哪些?? 11）完成設計階段

最后的設計階段，根據之前的測試驗證評估報告，交互設計師要對所有之前的輸出做一次嚴格的檢查和修正，完成最后的輸出。

12）開發上線階段

盯緊視覺設計師和前端工程師吧，最關鍵的時候終于到了，經歷了那么多紛繁復雜的環節，我們等的就是上線的這一瞬間。當然，千萬別忘了后續的跟蹤和分析，這能為你的專業度加分不少哦 ·總結和展望

綜上所述，我們已經整理出來了體現交互設計師專業度的過程輸出物了，總結一下：以75分交互設計師的標準來看，我們的專業度能通過以下的關鍵輸出物衡量：FRD目標確認文檔、競爭分析報告、頭腦風暴產出物、項目初期用戶調研報告、核心設計點調研及分析報告、專家評審報告和評估報告、原型測試報告、交互流程圖及詳細說明文檔、頁面線框圖、核心設計點說明文檔和最后的跟蹤分析報告。

基本上，所有的輸出物都是反復易稿的結果，都是細碎過程的迭代輸出，都飽含了設計師辛勤的工作投入。所有有夢想的交互設計師們，請正確的審視這些輸出物，珍惜自己的付出，它們不光是單板的形式教條，它們更是證明自己專業度最有利的武器！

被很多同學都質疑過：那么多的輸出物，平時做需求怎么可能全部做出來？每當此時，我的回答都是一樣的：“是的，找借口總是很容易的。大家的確都很忙碌，按季度來說，基本上每個人都會經手大大小小幾十個需求，但我們真的忙碌到輸出一個高質量設計的精力都沒有了嗎？還是我們打心里就本著做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互設計這個職業最可悲之處??

作者信息：本文http://