第一篇：用戶交互設(shè)計學(xué)習(xí)心得

學(xué)習(xí)心得

老師整體講得挺好，從中學(xué)習(xí)到了交互設(shè)計的精髓，即是“不要讓用戶思考”，可用性是交互設(shè)計的基本目標。從中也了解了Web用戶的行為特點，了解了一般Web可用性的基本要素以及比較專業(yè)的設(shè)計迭代和設(shè)計驗證過程?；剡^頭來對比之前做的項目，參照著也發(fā)現(xiàn)了不少問題和缺點，尤其是在設(shè)計流程上，也有時間因素沒法花兩三個禮拜要做設(shè)計迭代和驗證。我們的原型和設(shè)計缺乏對最終用戶群的設(shè)計考慮，出發(fā)點尚處在以自我觀點為決策的階段，沒有為最終用戶設(shè)計，這點是我們亟需改進的。除此之外，也講到了web交互設(shè)計的一般法則，對我們以后開發(fā)也很有裨益。

用戶體驗的提高需要各方的努力，不是光靠UE設(shè)計師一個人就能達到。一個項目的用戶體驗好與壞，需要受眾用戶、產(chǎn)品經(jīng)理、業(yè)務(wù)分析師、視覺設(shè)計師、開發(fā)人員一起協(xié)同努力才能在一個有限的時間內(nèi)達成。更多得可能還是需要在研發(fā)流程和規(guī)范上下藥，提高用戶體驗設(shè)計的重視度，才能貫徹相同的理念互相協(xié)同起來，達到高用戶體驗的目標。

第二篇：基于用戶體驗的手機產(chǎn)品交互設(shè)計原則

基于用戶體驗的手機產(chǎn)品交互設(shè)計原則

一、用戶體驗信息收集

在討論手機的交互設(shè)計方法之前，需要先對手機的用戶使用習(xí)慣有一些基本的了解，需要對手機的用戶體驗信息做一些收集整理。收集用戶體驗信息首先需要確定兩個問題：一是確定目標用戶群體；二是確定信息收集的方法和途徑。

在確定目標用戶群體的時候，很顯然的是，已有產(chǎn)品有過使用和交互經(jīng)驗，具備該產(chǎn)品或系統(tǒng)的交互體驗的用戶，相比較于那些沒有體驗的用戶，可以為設(shè)計提供更多更有效的信息。因此在收集用戶體驗信息時，應(yīng)該首先考慮所需設(shè)計的產(chǎn)品的用戶或是有過類似產(chǎn)品使用經(jīng)驗的用戶。在理想的情況下，當(dāng)用戶體驗產(chǎn)品的交互時，設(shè)計師可以通過某種技術(shù)或是研究方法獲得用戶的全部感官印象，掌握他們的情感體驗。然而這些主觀的體驗信息很難用實驗室的方法收集或是客觀的科學(xué)描述表達出來。因此我們只能尋求貼近實際的近距離接觸用戶體驗的方法，就是深入訪談和現(xiàn)場觀察。

我們需要調(diào)研的信息有： 1.硬件部分： ? ? ? ? 手機的持機模式（右手操作、左手操作、雙手操作）；

手機的操作模式（手指觸控、筆觸、按鍵、滾輪、長按）；

兩種操作模式下的輸入方式（全鍵盤、九鍵、觸屏鍵盤、手寫）；

信息反饋形式（屏幕信息輸出、聲音、振動、燈光）對用戶的影響；

2.軟件部分： ? ? ? ? 用戶對屏幕信息結(jié)構(gòu)的認識（空間位置、信息排列順序、信息的分類）

用戶對信息導(dǎo)航的使用（菜單、文件夾管理、搜尋特定文件）

用戶對信息傳達的理解（圖形信息、文字信息）

用戶對交互反饋的獲知（每個操作是否有明確的反饋）

3.積極的用戶體驗： ? ? ? ? ? ? ? 特殊交互模式帶來的新奇感受——有趣

簡潔的操作步驟和有效的信息提醒方式——信任感

軟件運行速度，信息處理過程——操縱感和成就感

允許誤操作，有效引導(dǎo)——安全感

交互過程中的完美感官體驗（視覺、聽覺）

類似于電腦操作過程的交互（有電腦使用經(jīng)驗的用戶）——熟悉感和成就感

品牌元素在交互上的延續(xù)性——熟悉感和優(yōu)越感

4.消極的用戶體驗： ? 系統(tǒng)出錯、沒有提示信息——壓力、緊張和茫然 ? ? ? ? 缺少誤操作的補救機制——挫敗感、壓力

交互步驟的繁復(fù)難記——挫敗感

提示信息的不明確（不符合用戶模型）——茫然

過程處理時間過長——焦慮

二、用戶分類

1.依據(jù)用戶的需求可將智能手機的用戶分為兩類： 1.1 過程為主的用戶(processoriented end user)過程為主的用戶的典型例子是電玩族，他們追求的終級目標就是視覺聽覺的沖擊和享受，最終游戲的結(jié)果反而變得不是那么重要了。此類設(shè)計對視覺和創(chuàng)意的要求是極為挑剔的，絕大多數(shù)設(shè)計師都有深厚的美術(shù)功底。

1.2 結(jié)果為主的用戶(result oriented end user)然而，與結(jié)果為主的用戶設(shè)計相比，過程為主的用戶的市場和受眾都要小的多。結(jié)果為主的用戶不在乎用什么樣的方式完成任務(wù)，但是任務(wù)必須以最短的時間，以最簡潔的方式，最精確的運算結(jié)果來完成。對于此類用戶的交互設(shè)計人員來講，更重要的是設(shè)計更合理的任務(wù)邏輯流程(logical task flow),以期最大幅度的符合人腦的思考方式和認知過程(cognitive process)。2.依據(jù)用戶的使用經(jīng)驗可將用戶可以分類為： 2.1 新手用戶

指剛剛開始接觸和使用智能手機的用戶，對智能手機的操作系統(tǒng)沒有過使用經(jīng)驗，對計算機及應(yīng)用程序的一般用法也沒有太多的了解，但有一定的手機使用經(jīng)驗。2.2 中級用戶

使用智能手機有一定的時間，換過至少一個智能手機。對智能手機的部分操作相對熟悉，但經(jīng)常使用的軟件數(shù)量較少，并不完全熟悉智能手機系統(tǒng)的所有功能，對界面交互所必需的語法信息了解較少。2.3 專家用戶

有過相當(dāng)長時間的智能手機使用歷史，更換過幾次智能手機，對手機的交互和電腦的操作都非常了解，經(jīng)常主動尋找更簡潔和快速的交互方式。

一般來說，中級用戶和專家用戶在長期使用某部分交互時遇到的問題更具有代表性，而新手用戶提出的問題則更有利于設(shè)計人員認清用戶與智能手機交互時的認知過程。

三、交互設(shè)計原則

對應(yīng)用戶體驗信息的收集和用戶分類，我們可以總結(jié)出來智能手機上交互設(shè)計的方法和要點。1.硬件交互設(shè)計 ? ? ? ? 根據(jù)人機工程學(xué)原理設(shè)計按鍵大小等硬件交互要素；

盡可能提供多種輸入方式，包括鍵盤輸入和手寫輸入，鍵盤包括數(shù)字鍵盤和全鍵盤。合理設(shè)計鍵盤使其符合用戶的使用習(xí)慣；

考慮環(huán)境對用戶操作的影響。例如嘈雜的環(huán)境下提供震動的提示方式，黑暗又需要保持安靜的環(huán)境下選擇指示燈閃爍發(fā)光的方式提示用戶。

同樣需要考慮環(huán)境因素對用戶的影響，利用機械結(jié)構(gòu)多樣化設(shè)計實現(xiàn)單手操作模式和雙手操作模式的切換，需要設(shè)計切換的便捷方式、屏幕方向的變化和鍵盤的轉(zhuǎn)換等等硬件交互要素的變化。

? 設(shè)計新奇的交互模式，將大大提升用戶體驗，例如sony的滾輪導(dǎo)航模式，和蘋果的觸點導(dǎo)航鍵（旋轉(zhuǎn)和點擊），都獲得了巨大的商業(yè)成功。

2.信息交互設(shè)計 ? ? 信息項目的排布密度合理，字體排列、圖標排列的方式具有可調(diào)性，設(shè)計合適的方式來突出重點信息；

使用用戶的語言來傳達信息，而非技術(shù)的語言。有效地使用“隱喻”。例如windows里面的“記事本”就是一個很好的隱喻例子，因為它和人們熟悉的日常概念聯(lián)系在一起，所以用戶可以很容易的理解這是一個什么工具。好的隱喻可以起到快捷的說明作用；

? ? ? 字體大小、顏色、圖標設(shè)計等，都決定可讀性的好與壞；

需要保持一致性的不光有每個功能軟件或是服務(wù)的圖標外觀，更包括開機動畫、細節(jié)元素和無形框架的一致，都需要貼合用戶行為習(xí)慣進行設(shè)計；

盡量避免同一個元素包含太多的信息，例如，顏色的使用不要包含太多信息暗示，因為用戶不一定會注意到或是理解某種顏色所包含的暗示。

3.軟件交互設(shè)計 ? ? ? ? ? 導(dǎo)航功能。隨時轉(zhuǎn)移功能，很容易從一個功能跳到另外一個功能；

允許工作中斷。例如當(dāng)用戶編輯短信的時候，收到短信或電話，完成后回來仍能夠找到剛才正寫的短信息；

方便退出。例如，提供兩種退出方式，按一個鍵完全退出，或是一層一層的退出。

讓用戶知道自己當(dāng)前的位置，使其做出下一步行動的決定；

提供快速反饋，減少不必要的潛在等待時間。在任務(wù)交予系統(tǒng)處理或計算的時候，會有一段潛在的用戶等待時間，一般我們會通過合適的等待提示讓用戶知道現(xiàn)在正處于系統(tǒng)潛在工作狀態(tài)，而不至于讓用戶頻繁地重復(fù)操作，使系統(tǒng)更慢；或者合理通過多任務(wù)切換處理避免這樣的等待間隔。通過這些方法可以讓用戶回避這種的無效時間，從而提高交互效率。

? ? ? 良好的防錯機制。誤操作后，系統(tǒng)提供有針對性的清晰提示。即使發(fā)生錯誤操作，也能幫助用戶保存好之前的操作記錄，避免用戶重新再來；

提供了解用戶操作行為的途徑，可以更好的幫助改善系統(tǒng)的操作；

通過縮短操作距離和增加目標尺寸來加速目標交互操作。

4.體驗交互設(shè)計 ? ? ? ? ? 讓用戶控制交互過程?！跋乱徊健?、“完成”，面對不同層次提供多種選擇，給不同層次的用戶提供多種可能性；

預(yù)設(shè)置的默認狀態(tài)應(yīng)該具有一定共通性和智能性，并對用戶操作起到協(xié)助或提示的作用；此外，還應(yīng)留給用戶修改和設(shè)置默認狀態(tài)的權(quán)限；

圖標、多媒體設(shè)計、細節(jié)設(shè)計和附加功能設(shè)計為體驗增值，有效提升體驗度；

視覺設(shè)計，例如開關(guān)機動畫、界面顯示效果等；

多方面考慮用戶信息的私密性，提供有效的保護機制，例如指紋識別密碼模式。

四、總結(jié)

體驗是一個比較虛的概念，很難量化很難評估，所以也導(dǎo)致很多小的無線產(chǎn)品開發(fā)團隊干脆放棄了對產(chǎn)品用戶體驗的把握，甚至不需要設(shè)置一個專門的呃交互設(shè)計師職位來改善產(chǎn)品的交互體驗，這對于成長型的公司是可以容忍的，但是對于要想做出精品，長期處于市場不敗之地的公司就顯得不夠嚴謹了。手機互聯(lián)網(wǎng)是未來的發(fā)展趨勢，手機產(chǎn)品也對交互設(shè)計提出了更多的要求，簡單探析了一下從用戶體驗出發(fā)來進行手機產(chǎn)品交互設(shè)計的方法原則，之后還是需要一個比較成型的交互體驗評估體系的。

第三篇：實驗二 語音交互設(shè)計TTS-基于圖形用戶界面

COM：即組件對象模型，Component Object Model。

1、在COM構(gòu)架下，人們可以開發(fā)出各種各樣的功能專一的組件，組件實際上是一些小的二進制可執(zhí)行程序，它們可以給應(yīng)用程序、操作系統(tǒng)以及其他組件提供服務(wù)，然后將它們按照需要組合起來，構(gòu)成復(fù)雜的應(yīng)用系統(tǒng)（如dll）。優(yōu)點：可用新組件替換原有組件，系統(tǒng)升級和定制更加簡便；可在多個應(yīng)用系統(tǒng)中重復(fù)利用同一個組件；可以方便的將應(yīng)用系統(tǒng)擴展到網(wǎng)絡(luò)環(huán)境下；COM與語言、平臺無關(guān)，程序員可充分發(fā)揮自己的才智與專長編寫組件模塊等。

2、使用和處理COM對象。COM獨立于語言，COM為自己提供對象管理例程。COM中創(chuàng)建對象，實際是調(diào)用COM庫中的API函數(shù)CoCreatInstance().調(diào)用該函數(shù)時，在注冊表中查找COM服務(wù)器位置，將服務(wù)器加載到內(nèi)存，并創(chuàng)建所請求的實例。

3、一般使用COM對象的步驟是： ? 初始化COM庫(Initialize)；

? 創(chuàng)建一個COM對象，獲得相應(yīng)接口；

? 如果對象創(chuàng)建成功，則調(diào)用COM對象的某個方法； ? 釋放接口；

? 收回COM庫(Uninitialize)

二、TTS—基于圖形界面

基于圖形用戶界面創(chuàng)建一個TTS應(yīng)用程序，通過對菜單命令的選擇執(zhí)行文本-語音的轉(zhuǎn)換。

一、建立項目

1、創(chuàng)建一個實現(xiàn)典型“Hello world”應(yīng)用的windows 32平臺應(yīng)用程序項目。

二、設(shè)置sapi路徑：與SAPI相關(guān)的文件路徑必須在項目中聲明。（sapi.h和sapi.lib）

1、選擇“Tools”→ “Options”→“Directories”選項卡；

2、選擇“Include Files”下拉式選單，增加“sapi.h”的文件路徑；

3、選擇“Library Files”下拉式選單，增加“sapi.lib”的文件路徑；

三、創(chuàng)建“Speak”菜單命令

1、修改自動生成的菜單項。打開“資源管理器”→“File”菜單→增加“Speak”命令項→資源ID設(shè)置為“IDM_SPEAK”。

四、實現(xiàn)speak功能 第1步：初始化COM 第2步：創(chuàng)建語音對象設(shè)置聲音 第3步：調(diào)用speak函數(shù) 第4步：設(shè)置感興趣的事件 第5步：確定事件類型 第6步：響應(yīng)事件

1、初始化COM if(FAILED(CoInitialize(NULL)))

{

return FALSE;

}

2、創(chuàng)建語音對象設(shè)置聲音

一旦com運行后，下一步就是要創(chuàng)建語音對象。這里需要用到CoCreatInstance().為簡潔和方便起見，這個例子使用了特別的處理方式。首先，它使用initinstance（）來初始化聲音。這是最簡單的初始化過程。第二，這個語音對象是全局性的。第三，語音對象建立之后，對象本省和用到的內(nèi)存立即被釋放。最后，如果初始化失敗，應(yīng)用程序應(yīng)該有更強有力的檢查錯誤機，更廣泛的報告和更詳細的資料。

程序清單2：

ISpVoice *pVoice;//SAPI voice(初始化模塊)……

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow){。。。

// Instead of using IDC_TEST, use the identifier of menu resource of the current application.SetMenu(hWnd, LoadMenu(hInstance, MAKEINTRESOURCE(IDC_TEST)));ShowWindow(hWnd, nCmdShow);UpdateWindow(hWnd);//Initialize SAPI

HRESULT hr = CoCreateInstance(CLSID_SpVoice, NULL, CLSCTX_ALL, IID_ISpVoice,(void **)&pVoice);

if(SUCCEEDED(hr))

{

pVoice->SetInterest(SPFEI(SPEI_WORD_BOUNDARY),SPFEI(SPEI_WORD_BOUNDARY));

pVoice->SetNotifyWindowMessage(hWnd, WM_USER, 0, 0);

}

else

return FALSE;

3、調(diào)用Speak函數(shù)實現(xiàn)“講話”的功能

要讓計算機講話只需一句簡單的調(diào)用命令，要講話的內(nèi)容用一個參數(shù)傳給語音對象，常是從一個對話框或一個文件獲取字符串的。另外，字符串也可以從一個流中獲取，但就要使用另外一個調(diào)用 ispvoice：： speakstream。Speak函數(shù)的調(diào)用代碼是放在windows的消息處理函數(shù)wndproc()相應(yīng)的消息處理中的。從文件菜單選擇Speak命令,計算機將開始講： “我很高興發(fā)言?！? 程序代碼3: // FUNCTION: WndProc(HWND, unsigned, WORD, LONG)。。。

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam){

。。。WCHAR tempString[30]。。。

switch(wmId){。。。case IDM_SPEAK:

wcscpy(theString, L“I am glad to speak.”);

pVoice->Speak(theString, SPF_ASYNC, NULL);

pVoice->Speak(L“I am glad to speak”, SPF_ASYNC, NULL);

break;

default：

return DefWindowProc(hWnd, message, wParam, lParam);}

4、設(shè)置事件

像其它大部分windows應(yīng)用程序一樣，在COM組件中有很多交互動作,這些交互信息將以信息形式出現(xiàn)。sapi是也一樣。信息是在TTS或SR引擎中產(chǎn)生的,某個特定的事件也是在那里開始和結(jié)束的.很多時候, sapi或sapi的引擎產(chǎn)生的事件是對應(yīng)用程序有用的。舉例來說，當(dāng)一個識別過程開始的時候，應(yīng)用程序會得到相應(yīng)的通知或消息,最終的用戶也可以得到相應(yīng)的通知。

(1)首先，需要接收一個來自sapi的或sapi的引擎的消息。這個消息是程序自定義的.但是，所有的活動sapi都使用相同的消息通知應(yīng)用程序；

(2)得到通知后,應(yīng)用程序要檢查一個事件結(jié)構(gòu),這個事件結(jié)構(gòu)是由SAPI完成的.利用這個結(jié)構(gòu)來確定具體是發(fā)生了什么事件（見第五步驟）.(3)設(shè)定感興趣的事件。程序可以用setinterest 來設(shè)置感興趣的事件。默認情況下，TTS不向程序發(fā)出任何事件通知。也就是說，如果程序忽略了setinterest的調(diào)用，TTS應(yīng)用程序是得不到任何事件通知的。

(4)設(shè)定消息。不論以何種事件，應(yīng)用程序都應(yīng)該將一個消息與sapi聯(lián)系起來。程序通過調(diào)用setnotifywindowmessage來完成這個任務(wù)，本例使用WM_USER消息。

程序清單4：

//Initialize SAPI HRESULT hr = CoCreateInstance(CLSID_SpVoice, NULL, CLSCTX_ALL, IID_ISpVoice,(void **)&pVoice);if(SUCCEEDED(hr)){

pVoice->SetInterest(SPFEI(SPEI_WORD_BOUNDARY),SPFEI(SPEI_WORD_BOUNDARY));

pVoice->SetNotifyWindowMessage(hWnd, WM_USER, 0, 0);

} else return FALSE;

5、確定事件。使用事件來工作需要2個步驟。

(1)首先是使用一個簡單和標準的做法設(shè)置和使用Windows消息。消息是被發(fā)送到程序的消息環(huán)中的。在這個例子里，wndproc（）接收wm_user訊息。一旦訊息是捕獲，其余事情由sapi函數(shù)來完成。

(2)第二個步驟是確定哪些消息發(fā)生了。Sapi使用 spevent和getevents方法來確定具體的事件和消息。通過這兩個函數(shù)可以獲取指定的事件信息和事件類型。在SPEVENT的成員eeventid恰恰是setinterest所設(shè)定的值。該spevent結(jié)構(gòu)必須在首次使用時被初始化。而且重新使用之前也要被清除?？梢允褂胹pclearevent來完成清除工作。

程序清單5：

switch(message)

{

case WM_COMMAND:

wmId

= LOWORD(wParam);

wmEvent = HIWORD(wParam);

。。。

case WM_USER: //處理speak命令的窗口

SPEVENT eventItem;

memset(&eventItem, 0,sizeof(SPEVENT));

while(pVoice->GetEvents(1, &eventItem, NULL)== S_OK)

{

switch(eventItem.eEventId)

{

case SPEI_WORD_BOUNDARY :

SPVOICESTATUS eventStatus;

pVoice->GetStatus(&eventStatus, NULL);

ULONG start, end;

start = eventStatus.ulInputWordPos;

end = eventStatus.ulInputWordLen;

wcsncpy(tempString, theString + start , end);

tempString[ end ] = '/0';

//MessageBoxW(hWnd, tempString, L“GUIApp”, MB_OK|MB_ICONWARNING);

MessageBoxW(hWnd, tempString, L“SayApp”, MB_OK|MB_ICONWARNING);

break;

default:

break;

}

SpClearEvent(&eventItem);

}

break。。。case WM_DESTROY:

if(pVoice)

{

pVoice->Release();

pVoice = NULL;

}

PostQuitMessage(0);

break;

default:

return DefWindowProc(hWnd, message, wParam, lParam);

}

6、響應(yīng)事件。在這個例子中，應(yīng)用程序使用spei_word_boundary消息來取定每一個單詞?？梢杂胓etstatus函數(shù)和spvoicestatus結(jié)構(gòu)來獲取更詳細的信息。一個獨立的單詞，可以用事件發(fā)生時的第一個字母和最后一個字母的位置來確定。在這個例子中，使用MessageBoxW來顯示所講的單詞。在說話過程中，屏幕是實時更新的，并顯示實際發(fā)言的文字。這個特點是由spf_async標志控制的。如果在Speak函數(shù)中使用NULL參數(shù)，而不是SPF_ASYNC參數(shù)，那樣就要等整句話說完之后，才顯示消息框。pVoice->Speak(theString, SPF_ASYNC, NULL)；

//釋放語音對象

程序代碼6：

case SPEI_WORD_BOUNDARY : SPVOICESTATUS eventStatus;

pVoice->GetStatus(&eventStatus, NULL);

ULONG start, end;

start = eventStatus.ulInputWordPos;

end = eventStatus.ulInputWordLen;

wcsncpy(tempString, theString + start , end);

tempString[ end ] = '/0';MessageBoxW(hWnd, tempString, L“GUIApp”, MB_OK|MB_ICONWARNING);break;總結(jié)：

最后，總結(jié)一下這個例子的主要知識點： 1，初始化COM： CoInitialize和CoUninitialize 2，建立語音對象實例：CoCreateInstance 3，講話：Speak 4，設(shè)置感興趣的事件：SetInterest

設(shè)定SAPI返回的消息 ：setnotifywindowmessage 5，消息來時，確定事件類型：GetEvents 清除事件結(jié)構(gòu)：SpClearEvent 6，響應(yīng)事件時，用GetStatus確定當(dāng)前SAPI的狀態(tài)

第四篇：交互設(shè)計心得整理

交互設(shè)計心得整理

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

這篇文章是我?guī)啄陙碓诿绹鴱氖陆换ピO(shè)計工作的一個經(jīng)驗總結(jié)。當(dāng)時我們遵循以用戶為中心（User-Centered-Design, 簡稱UCD）的設(shè)計原則，每一個項目都是不折不扣的按所有UCD的步驟進行。下面總結(jié)的交互設(shè)計的方法，是從UCD的過程中提煉出來，也就是說，同樣適用于任何非UCD的設(shè)計過程。交互設(shè)計的流程

如果一提到交互設(shè)計，你就想到畫線框圖或原型圖，那你只對了五分之一。交互設(shè)計是一個過程，從開始到結(jié)束有一套系統(tǒng)的流程。原型圖只是其中的一個環(huán)節(jié)。

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

第一步，是任務(wù)分析，列出界面所要完成的所有任務(wù)。第二步按各任務(wù)確定頁面流程，建立信息架構(gòu)。接下來是創(chuàng)建統(tǒng)一的頁面布局包括分區(qū)等。然后在頁面布局的基礎(chǔ)上進行原型設(shè)計，可以是低保真和高保真的原型圖。最后編寫設(shè)計說明。下面以設(shè)計一款動感相冊界面為例，逐步講解各個環(huán)節(jié)。1.任務(wù)分析

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

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

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

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

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

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

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

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

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

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

頁面布局賦予零碎的內(nèi)容以邏輯性，以分區(qū)的形式把頁面各區(qū)域所對應(yīng)的功能區(qū)確定下來，減少具體設(shè)計時的隨意性。這是設(shè)計嚴謹與否的表現(xiàn)所在。把類似的操作放在一起，對于用戶來說是可以預(yù)見的，用戶能夠判斷哪個操作在哪個區(qū)域，減少盲目尋找?guī)淼睦щy和疑惑。4.原型設(shè)計 這一步是大家熟知的，即具體頁面的設(shè)計。這一步設(shè)計把所有的界面元素表現(xiàn)出來?？梢杂械捅Ｕ婧透弑Ｕ嬖蛨D。低保真即是線框圖，高保真多是接近最終效果圖。下面是動感相冊的低保真原型圖。

5.設(shè)計說明

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

交互設(shè)計是一個過程，它不僅僅是畫線框圖。交互設(shè)計最關(guān)鍵的兩個環(huán)節(jié)是頁面流程和頁面布局，前者建立清晰的架構(gòu)和嚴密的邏輯，后者整合零散的信息并確定分明的主次關(guān)系。這一切都是為了我們的終極目標——讓我們的界面符合用戶的預(yù)期，不帶給他們?nèi)魏蔚囊馔?。一切都在用戶的意料之中?/p>

第五篇：交互設(shè)計檔案

交互設(shè)計師的基本素質(zhì)

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

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

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

3）想：交互是思考的輸出產(chǎn)物和表現(xiàn)形式。當(dāng)設(shè)計師將之前聽到的和看到的內(nèi)容在頭腦中加以整理、分析，經(jīng)過發(fā)散的創(chuàng)造性碰撞和嚴謹?shù)倪壿嬚撟C后，逐漸得到了相對靠譜的交互產(chǎn)物。這個思索分析的過程貫穿于交互設(shè)計工作流程的每個環(huán)節(jié)。

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

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

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

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

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

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

·交互專業(yè)度的具象化表現(xiàn)

剛才講了很多，但總體來說還是偏理論，還是讓人摸不著頭腦，虛幻的概念最大的優(yōu)勢在于它的顛簸不破和四平八穩(wěn)，誰也揪不住它的小辮子。但這不是我的風(fēng)格，更不是我寫這篇文章的初衷，我希望的是拋磚引玉，給大家?guī)硪恍┱嬲饬x上能直接使用的東西。所以，接下來，我們來些“干貨”，玩點簡單粗暴的??

圖1.2

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

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

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

1）流程環(huán)節(jié)說明（如圖1.4）：

圖1.4 2）流程環(huán)節(jié)各輸出物說明（如圖1.5）：

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

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

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

3）用戶訪談階段：

對于一些條件允許的項目，我們建議能在項目初期尋求一些用戶的信息，定義一些用戶的屬性，這些對于之后的交互設(shè)計都會是堅實的基礎(chǔ)。一個高專業(yè)度的交互設(shè)計師甚至?xí)鲃咏槿朐L談問卷的設(shè)定工作，客觀的參與調(diào)研報告輸出的全過程。

4）需求修正階段：

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

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

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

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

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

9）仿真Demo開發(fā)階段

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

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

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

12）開發(fā)上線階段

盯緊視覺設(shè)計師和前端工程師吧，最關(guān)鍵的時候終于到了，經(jīng)歷了那么多紛繁復(fù)雜的環(huán)節(jié)，我們等的就是上線的這一瞬間。當(dāng)然，千萬別忘了后續(xù)的跟蹤和分析，這能為你的專業(yè)度加分不少哦 ·總結(jié)和展望

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

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

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

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

作者信息：本文http://