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

阿里巴巴公司內(nèi)部資料：交互設(shè)計全檔案 網(wǎng)址：http://作為交互設(shè)計并不適合? 答: HTML是垃圾!許多HTML的限制能通過好的設(shè)計來彌補(bǔ)，但是很少有程序員能聽從設(shè)計師的意見。越過HTML的限制也需要大量復(fù)雜的代碼!問: WEB將走向哪里？既然HTML是垃圾

答: 更聰明的瀏覽器!它應(yīng)當(dāng)能記住信息，將相關(guān)資料寫到磁盤上，和服務(wù)器交互通信。它應(yīng)當(dāng)有更好的交流方式，比如象拖拉、卷動、刷新

問: “往磁盤上寫信息”安全嗎? “聰明的瀏覽器記錄資料”與隱私權(quán)相沖突吧? 答: 對!那是需要解決的問題。但是解決起來并不困難

問: 如果交互設(shè)計師做錯了一些事情呢？他們在項目中的地位是如此重要，所以很容易毀了所有的事情 答: 如果程序員做錯了一些事情呢？ 問: 解雇他? 答: 對，專業(yè)人員不能犯錯誤!問: 對于一個項目中有限的時間及好的交互設(shè)計之間的沖突你是怎樣看的? 答: 為什么有時間限制? 誰將時間定得這么短? 為什么定得這么短? 他縮短時間是為了什么? 問: 時間就是金錢 答: 浪費(fèi)了的時間是金錢

問: 老板關(guān)心他的錢，我們關(guān)心項目

答: 管理者將時間期限定得短是因為他們不知道程序員在做什么。交互設(shè)計師能告訴管理者程序員在做什么。交互設(shè)計師能給程序員爭取更多的時間

問: 我認(rèn)為交互設(shè)計關(guān)注的焦點(diǎn)是用戶的需求而不是設(shè)計

答: 對！!就象我在前面所說的，交互設(shè)計和用戶界面設(shè)計不是一回事!問: 那么誰負(fù)責(zé)確定軟件將要做什么? 交互設(shè)計師嗎? 答: 交互設(shè)計師就是具有能非常好地解答上述問題，以便別人順利完成任務(wù)的人 問: 誰控制過程? 交互設(shè)計師嗎? 答: 過程應(yīng)該由管理者來控制 問: 交互設(shè)計師的工作職責(zé)是什么? 答: 程序的外觀和行為應(yīng)該由交互設(shè)計師控制!技術(shù)和編碼應(yīng)當(dāng)由程序員控制!問: 那么請告訴我，交互設(shè)計師在一個項目中負(fù)責(zé)做什么? 他擔(dān)負(fù)什么樣的職責(zé)? 答: 交互設(shè)計師應(yīng)當(dāng)負(fù)責(zé)程序做什么和怎樣表達(dá), 我們設(shè)計項目的第一部分是針對問題域詳細(xì)研究項目 問: 交互設(shè)計師和項目管理者可以是同一個人嗎? 答: 為什么? 為什么讓一個領(lǐng)域的專家工作于另一個領(lǐng)域?

下圖是CDC招聘交互設(shè)計師的工作描述，我將選擇其中三點(diǎn)分析。

1、參與產(chǎn)品規(guī)劃構(gòu)思

剛開始的時候，我認(rèn)為交互設(shè)計師的任務(wù)就是按照產(chǎn)品同事提交的需求繪制原型稿件，其間，我們?nèi)ズ彤a(chǎn)品同事討論布局的合理性，操作的易用性，流程的通暢性。

其實不然。一個成功的產(chǎn)品需要團(tuán)隊里的產(chǎn)品經(jīng)理，設(shè)計師，以及開發(fā)同事對產(chǎn)品的潛在特性和市場能力有統(tǒng)一的認(rèn)識并一起維護(hù)這種認(rèn)識。由于對需求了解的不夠透徹，也會經(jīng)常和產(chǎn)品同事在溝通的過程中產(chǎn)生很多不必要的爭執(zhí)。所以，當(dāng)一個交互設(shè)計師連產(chǎn)品最基本的規(guī)劃方向以及后期的運(yùn)營目標(biāo)都不夠了解的時候，他又怎么能做到和項目組同事齊心合力的創(chuàng)造雙贏的局面呢？

因而說應(yīng)該更多的參與到產(chǎn)品規(guī)劃中去，做一個提需求并且做需求的設(shè)計師。

2、分析業(yè)務(wù)需求，并加以分解歸納出產(chǎn)品人機(jī)交互界面需求

產(chǎn)品同事很多時候會提出說，這里的數(shù)據(jù)量沒有達(dá)到預(yù)期，我們要優(yōu)化它。這個時候，我們首先應(yīng)該去分析產(chǎn)生問題的原因，比如是用戶不懂用？還是不想用？還是別的什么原因？這個時候，我們可能就會介入用戶測試的環(huán)節(jié)了，多跟用研同事學(xué)習(xí)用戶測試的方法、注意事項以及分析方法也是很重要的一個方面。充分了解用戶需求和產(chǎn)生問題的根源之后，我們才能提出更好的優(yōu)化方案。

而在尋找問題根源以及解決辦法的時候，我們也可以運(yùn)用5-whys的方法。5-whys是對一個問題點(diǎn)連續(xù)以5個“為什么”來自問，以追究其真正原因。這個方法是豐田公司首先提出的：發(fā)現(xiàn)問題的時候，是從表象往根源來推導(dǎo)，而解決問題的對策則是從根源往回推。詳見下圖示例：

3、參與公司前瞻性產(chǎn)品的創(chuàng)意設(shè)計

創(chuàng)意、創(chuàng)新最基本的來說，是源自于生活。《創(chuàng)造突破性產(chǎn)品》中提到“人們不但希望通過使用某種產(chǎn)品來完成或改善某項工作，他們還希望產(chǎn)品能夠豐富、增進(jìn)其生活體驗，并且把這種體驗聯(lián)系到個人的某種夢想?！北热鏠Qmusic的桌面歌詞，把KTV的體驗搬到了顯示器上，它很好的滿足了當(dāng)下家庭音響設(shè)備趨于完備，大家喜歡沒事吼吼的生活方式。再比如DivX player onMac提供了一種在非全屏播放的模式下，將播放器以外的部分整體變暗的體驗，與真實的影院無異。

創(chuàng)新源自于生活的一大優(yōu)勢在于，由于用戶在生活中已經(jīng)習(xí)慣了的一些體驗，當(dāng)我們把這些體驗搬到互聯(lián)網(wǎng)上的時候，就極大的減少了用戶的學(xué)習(xí)成本，他們可以很快速的學(xué)會并使用產(chǎn)品。

創(chuàng)意、創(chuàng)新的另一種方式是類似于蘋果產(chǎn)品的流程上“一切從簡”，我一直記得第一次使用Ipodnano，卻不知道如何關(guān)機(jī)的經(jīng)歷。在使用傳統(tǒng)的MP3時，我們習(xí)慣了有一個on/off操作，每次關(guān)閉音頻播放之后，會提醒自己把鍵盤鎖上。誰都不會喜 歡MP3在某個不小心的時刻被開啟，一直播放導(dǎo)致關(guān)鍵時候沒電的經(jīng)歷，這就和直板手機(jī)放在褲兜里卻不小心打出了一通不該打出，更不該被聽到的電話一樣不爽。而nano很巧妙的回避了關(guān)閉電源卻忘記鎖鍵盤的尷尬。其實關(guān)閉電源的之后用戶立刻需要的不正是鎖鍵盤么？既然用戶在進(jìn)行一項操作的最終目的是另一項 操作，那么是不是可以合二為一呢。nano告訴我們，是的！

一切從簡的創(chuàng)新在WEB2.0的時代層出不窮，比如以twitter為首的微博客，比如百度發(fā)起的“框計算”概念，這些產(chǎn)品都在試圖簡化所有的用戶行為以及思維，一切都讓后臺來完成吧，你們只需要在那一點(diǎn)點(diǎn)空間做你們想做的那一點(diǎn)點(diǎn)的事情。

創(chuàng)意、創(chuàng)新的第三種方式是體驗上“全方位”。正如星巴克提供全方位的喝咖啡服務(wù)一樣，Google在Searchology大會上提出了“Richsnippets”（富文本）的概念，通過展示一小段網(wǎng)頁摘要的方式來幫助用戶找到所需要的網(wǎng)頁，而摘要的內(nèi)容可能包括對產(chǎn)品的評價和打分。參見下面幾個圖示：

那么對于搜索引擎而言，用戶可以通過搜索結(jié)果中的信息來快速確認(rèn)某一條結(jié)果是不是符合他的搜索期望，從而可以立即跳轉(zhuǎn)到該頁面，這不正是搜索產(chǎn)品的目的么？快速而準(zhǔn)確的跳轉(zhuǎn)。

創(chuàng)新的思維對于體驗設(shè)計的重要性是眾所周知的，分享給大家一本近期在看的書籍《思維導(dǎo)圖》，這本書提供了一系列刺激練習(xí)和大量頗具啟發(fā)性的圖片集和演示這種技巧的原創(chuàng)性思維導(dǎo)圖。大家共學(xué)習(xí)共勉之。

什么是交互設(shè)計

從用戶角度來說，交互設(shè)計是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人 ”本身的心理和行為特點(diǎn)，同時，還包括了解各種有效的交互方式，并對它們進(jìn)行增強(qiáng)和擴(kuò)充。交互設(shè)計還涉及到多個學(xué)科，以及和多領(lǐng)域多背景人員的溝通。

通過對產(chǎn)品的界面和行為進(jìn)行交互設(shè)計，讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到使用者的目標(biāo)，這就是交互設(shè)計的目的 交互設(shè)計的定義：

簡單的說，交互設(shè)計是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外形元素的設(shè)計與定義。不像傳統(tǒng)的設(shè)計學(xué)科主要關(guān)注形式，最近則是關(guān)注內(nèi)容和內(nèi)涵，而交互設(shè)計首先旨在規(guī)劃和描述事物的行為方式，然后描述傳達(dá)這種行為的最有效形式。

交互設(shè)計借鑒了傳統(tǒng)設(shè)計、可用性及工程學(xué)科的理論和技術(shù)。它是一個具有獨(dú)特方法和實踐的綜合體，而不只是部分的疊加。它也是一門工程學(xué)科，具有不同于其它科學(xué)和工程學(xué)科的方法。

交互設(shè)計是一門特別關(guān)注以下內(nèi)容的學(xué)科：

1、定義與產(chǎn)品的行為和使用密切相關(guān)的產(chǎn)品形式。

2、預(yù)測產(chǎn)品的使用如何影響產(chǎn)品與用戶的關(guān)系，以及用戶對產(chǎn)品的理解。

3、探索產(chǎn)品、人和物質(zhì)、文化、歷史之間的對話。

交互設(shè)計從“目標(biāo)導(dǎo)向”的角度解決產(chǎn)品設(shè)計：

1、要形成對人們希望的產(chǎn)品使用方式，以及人們?yōu)槭裁聪胗媚莻€這種產(chǎn)品等問題的見解。

2、尊重用戶及其目標(biāo)。

3、對于產(chǎn)品特征與使用屬性，要有一個完全的形態(tài)，而不能太簡單。

4、展望未來，要看到產(chǎn)品可能的樣子，它們并不必然就像當(dāng)前這樣。

總結(jié)：交互設(shè)計是什么（What is Interaction Design？）

說了那么多“不是”、“不僅是”，現(xiàn)在來總結(jié)一下關(guān)于交互設(shè)計的定義。先來看Alan Cooper對交互設(shè)計的經(jīng)典定義： 簡單地說，交互設(shè)計是人工制品、環(huán)境和系統(tǒng)的行為，以及傳達(dá)這種行為的外觀元素的設(shè)計和定義。交互設(shè)計首先規(guī)劃和描述事物的行為的方式，然后描述傳達(dá)這種行為的最有效形式。交互設(shè)計是一門特別關(guān)注以下內(nèi)容的學(xué)科： ■定義與產(chǎn)品的行為和使用密切相關(guān)的產(chǎn)品形式

■預(yù)測產(chǎn)品的使用如何影響產(chǎn)品與用戶的關(guān)系，以及用戶對產(chǎn)品的理解

■探索產(chǎn)品、人和上下文（物質(zhì)、文化和歷史）之間的對話（Riemann和Forlizzi）

再來看《Interaction Design——Beyond Human-Computer Interaction》一書中作者對交互設(shè)計的定義：

交互設(shè)計指的是：設(shè)計支持人們?nèi)粘９ぷ髋c生活的交互式產(chǎn)品。具體地說，交互設(shè)計就是關(guān)于創(chuàng)建新的用戶體驗的問題，其目的是增強(qiáng)和擴(kuò)充人們工作、通信及交互的方式。Winnogard（1997）把交互設(shè)計描述為“人類交流和交互空間的設(shè)計”

下面是我對“交互設(shè)計”的理解/定義：

所謂交互設(shè)計，是指設(shè)計師對產(chǎn)品與它的使用者之間的互動機(jī)制進(jìn)行分析、預(yù)測、定義、規(guī)劃、描述和探索的過程，簡單說，即設(shè)計和定義使用者如何使用一產(chǎn)品達(dá)到其目標(biāo)，完成某一任務(wù)的過程。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖1.2

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

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

這里，我先簡單交代一下即將涉及到的流程節(jié)點(diǎn)、對應(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è)計師可能需要負(fù)責(zé)的輸出物，具體細(xì)節(jié)我將在下面逐一介紹。1）需求獲取階段：

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

歷史數(shù)據(jù)的關(guān)注和分析階段，基于項目本身，要針對競爭對手、行業(yè)現(xiàn)狀等做詳盡的收集和分析，其中的關(guān)鍵考核點(diǎ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)而做的準(zhǔn)備。如今，我們有理有據(jù)，應(yīng)該主動出擊，和需求方討論研究需求的合理性、可行性，明確最終的修正目標(biāo)，并對達(dá)成目標(biāo)所涉及的重點(diǎn)突破點(diǎn)有理性的分析判斷，篩選出各設(shè)計點(diǎn)的優(yōu)先級。5）設(shè)計草稿階段

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

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

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

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

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

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

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

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

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è)計師的標(biāo)準(zhǔn)來看，我們的專業(yè)度能通過以下的關(guān)鍵輸出物衡量：FRD目標(biāo)確認(rèn)文檔、競爭分析報告、頭腦風(fēng)暴產(chǎn)出物、項目初期用戶調(diào)研報告、核心設(shè)計點(diǎn)調(diào)研及分析報告、專家評審報告和評估報告、原型測試報告、交互流程圖及詳細(xì)說明文檔、頁面線框圖、核心設(shè)計點(diǎn)說明文檔和最后的跟蹤分析報告。

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

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

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

作者信息：本文http://

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

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

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

這篇文章是我?guī)啄陙碓诿绹鴱氖陆换ピO(shè)計工作的一個經(jīng)驗總結(jié)。當(dāng)時我們遵循以用戶為中心（User-Centered-Design, 簡稱UCD）的設(shè)計原則，每一個項目都是不折不扣的按所有UCD的步驟進(jìn)行。下面總結(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ǔ)上進(jìn)行原型設(shè)計，可以是低保真和高保真的原型圖。最后編寫設(shè)計說明。下面以設(shè)計一款動感相冊界面為例，逐步講解各個環(huán)節(jié)。1.任務(wù)分析

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

任務(wù)分析最常見的是任務(wù)列表，另外有任務(wù)流程和任務(wù)場景等。下面以任務(wù)列表為例。列出所有主要任務(wù)，以及每個主要任務(wù)的子任務(wù)。再把子任務(wù)細(xì)分到各個步驟。形成下面這個列表。主要任務(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ù)列表包括所有功能點(diǎn)，并對每一個功能點(diǎn)的邏輯關(guān)系進(jìn)行整合。必要時會對各任務(wù)的使用頻率和其它影響設(shè)計的重要因素進(jìn)行分析，這里不做解釋了。2.頁面流程

任務(wù)分析完成后，進(jìn)入設(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è)計的開始，在上一步知道有哪些頁面需要進(jìn)行設(shè)計后，這里對頁面進(jìn)行劃分，對內(nèi)容進(jìn)行組織。最重要的一點(diǎn)是確定頁面分區(qū)。以動感相冊為例，頁面布局如下： 總布局，即通用布局，適合所有頁面。

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

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

5.設(shè)計說明

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

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

第四篇：數(shù)字交互設(shè)計

《數(shù)字交互設(shè)計》教學(xué)大綱

課程名稱：數(shù)字交互設(shè)計 課程類型：專業(yè)方向課 課程編號：134081

學(xué)時數(shù)及學(xué)分：總32學(xué)時，2學(xué)分，其中講課8學(xué)時，上機(jī)24學(xué)時。

教材名稱及作者、出版社、出版時間：《Adobe Flash CS4 ActionScript 3.0中文版經(jīng)典教程》 美國Adobe公司著，井中月譯，人民郵電出版社，2009年8月 本大綱主筆人：劉云安

本大綱審定人：數(shù)字媒體學(xué)院學(xué)術(shù)委員會

一、課程的目的、要求和任務(wù)

1．通過本課程的學(xué)習(xí)，讓學(xué)生認(rèn)識到新媒體的數(shù)字化、集成化和交互性特點(diǎn)。2．讓學(xué)生了解人機(jī)交互的歷史、發(fā)展現(xiàn)狀及趨勢。了解交互界面和交互設(shè)備。

3．了解人機(jī)界面的定義、起源、發(fā)展、研究內(nèi)容及發(fā)展趨勢。熟悉相關(guān)學(xué)科及知識，掌握人機(jī)界面設(shè)計中認(rèn)知心理學(xué)、人機(jī)工程學(xué)、人機(jī)界面的藝術(shù)設(shè)計、色彩設(shè)計等。

4．結(jié)合移動互聯(lián)技術(shù)、物聯(lián)網(wǎng)技術(shù)以及多點(diǎn)觸摸、體感等人機(jī)交互技術(shù)，讓學(xué)生的設(shè)計作品在跨媒體平臺上與用戶交互。通過創(chuàng)新的交互模式，促進(jìn)人與數(shù)字媒體內(nèi)容交互的過程中達(dá)成良好的用戶體驗。

為達(dá)到上述目的和要求，在教學(xué)內(nèi)容和課程設(shè)置上，應(yīng)注意以下有關(guān)問題：

1．該課程按照從簡到繁、循序漸進(jìn)、整體系統(tǒng)的原則進(jìn)行教學(xué)，將課堂講授、案例分析和實踐作業(yè)三者相結(jié)合，既注重理論基礎(chǔ)又注重技術(shù)操作。

2．堂上授課、集中討論、分組實踐的方式進(jìn)行教學(xué)。

3．課程高度重視藝術(shù)和技術(shù)的融合，面向行業(yè)應(yīng)用，緊隨技術(shù)的發(fā)展。4．平時作業(yè)不少于4次，期末作品1次。

二、課程主要內(nèi)容及學(xué)時分配

第一講

緒論（2學(xué)時）

一、交互設(shè)計概述

二、課程內(nèi)容介紹

第二講

新媒體及其交互性（4學(xué)時）

一、新媒體的發(fā)展與數(shù)字內(nèi)容的涌現(xiàn)

二、新媒體的可交互性

三、人機(jī)界面

四、Web界面設(shè)計實驗

第三講

人機(jī)交互技術(shù)概述（4學(xué)時）

一、人機(jī)交互的概念、發(fā)展歷史及趨勢

二、人機(jī)交互與其他學(xué)科的關(guān)系（認(rèn)知心理學(xué) 計算機(jī)圖形技術(shù) 多媒體技術(shù) 虛擬現(xiàn)實技術(shù)）

三、交互設(shè)備與交互界面

四、鼠標(biāo)與鍵盤交互試驗。鼠標(biāo)跟隨效果實驗 第四講

交互設(shè)計的方法與設(shè)計評價（6學(xué)時）

一、可交互的數(shù)字內(nèi)容

二、事件與響應(yīng)

三、交互設(shè)計的流程和方法

四、交互設(shè)計的評價。人機(jī)界面設(shè)計的測試和評價的意義、設(shè)計準(zhǔn)則、人機(jī)界面的測試、界面設(shè)計評價、硬件人機(jī)界面設(shè)計評價、軟件人機(jī)界面設(shè)計評價與可用性測試

五、互動小游戲設(shè)計實驗。碰撞檢測與定時器實驗 第五講

人機(jī)界面設(shè)計（5學(xué)時）

一、人機(jī)界面概述。人機(jī)界面的定義、起源、發(fā)展；人機(jī)界面學(xué)的研究內(nèi)容；人機(jī)界面的設(shè)計的發(fā)展趨勢；20世紀(jì)最偉大的10種人機(jī)界面裝置。

二、軟件人機(jī)界面概述、軟件人機(jī)界面的形式與標(biāo)準(zhǔn)、軟件人機(jī)界面設(shè)計、web界面設(shè)計、圖標(biāo)設(shè)計。

三、Flash跳轉(zhuǎn)函數(shù)--控制播放器實驗 第六講

驅(qū)動數(shù)字內(nèi)容（4學(xué)時）

一、鼠標(biāo)與鍵盤

二、體感交互

三、多點(diǎn)觸摸交互模式設(shè)計實驗 第七講

flash互動媒體設(shè)計（5學(xué)時）

一、flash多媒體資源整合設(shè)計

二、flash創(chuàng)意網(wǎng)站設(shè)計

三、進(jìn)度條、聲音和背景音樂的控制與Flash跳轉(zhuǎn)函數(shù)——控制播放器實驗 第八講

html5 web交互創(chuàng)意表現(xiàn)（2學(xué)時）

一、html5畫布

二、html5移動媒體創(chuàng)意設(shè)計

三、與其他課程的關(guān)系

本課程與《flash動畫設(shè)計》、《人機(jī)交互技術(shù)》、《web編程》等課程具有密切的學(xué)術(shù)關(guān)聯(lián)。這些課程之間既有理論上的相互聯(lián)系，也在實際操作上具有千絲萬縷的關(guān)系。學(xué)生可以在這些課程之間進(jìn)行知識與技術(shù)的相互遷移與會通，這將對數(shù)字媒體藝術(shù)創(chuàng)作素養(yǎng)的培養(yǎng)能夠起到積極的作用。

四、考核方式

1、期末作品考查，占總成績的60%；

2、平時成績（出勤、課堂作業(yè)等）占總成績的40%。

五、參考書目

[1]《HTML&XHTML權(quán)威指南（第六版）》（美）穆西亞諾，（美）肯尼迪著，張洪濤，邢璐譯 清華大學(xué)出版社，2007年版。

[2]《javascript高效圖形編程》（美），Raffaele Cecco 著 徐鵬飛 譯，人民郵電出版社，2012年版。

[3]《Adobe Flash CS4 ActionScript 3.0中文版經(jīng)典教程》 美國Adobe公司著，井中月譯，人民郵電出版社，2009年版。

[4]《人機(jī)界面設(shè)計》，周蘇、左伍衡、王文、徐新愛 等編著，科學(xué)出版社, 2007年版。[5]《Human-Computer Interaction Second Edition》，迪克斯（英），電子工業(yè)出版社，2003年版。

六、課程所需設(shè)備

多媒體教學(xué)系統(tǒng)、數(shù)據(jù)手套、android平板電腦。

第五篇：交互設(shè)計實習(xí)報告

實習(xí)報告：

一、實習(xí)說明

(1)實習(xí)時間：2010年10月20日至2011年1月5日

(2)實習(xí)內(nèi)容：關(guān)于手機(jī)微波客戶端的交互分析

(3)實習(xí)性質(zhì)：畢業(yè)實習(xí)

二、實習(xí)內(nèi)容介紹

微博，即微博客（MicroBlog）的簡稱，是一個基于用戶關(guān)系的信息分享、傳播以及獲取平臺，用戶可以通過WEB、WAP以及各種客戶端組件個人社區(qū)，以140字左右的文字更新信息，并實現(xiàn)即時分享。最早也是最著名的微博是美國的twitter，根據(jù)相關(guān)公開數(shù)據(jù)，截至2010年1月份，該產(chǎn)品在全球已經(jīng)擁有7500萬注冊用戶。2009年8月份中國最大的門戶網(wǎng)站新浪網(wǎng)推出“新浪微博”內(nèi)測版，成為門戶網(wǎng)站中第一家提供微博服務(wù)的網(wǎng)站，微博正式進(jìn)入中文上網(wǎng)主流人群視野。

在微博是一種互動及傳播性極快的工具，傳播速度甚至比媒體還要快。微博所謂“微型博客（micro-bloging）”是一種非正式的迷你型博客，它是最近新興起的一個web2.0表現(xiàn)，是一種可以即時發(fā)布消息的類似博客的系統(tǒng)。它最大的特點(diǎn)就是集成化和開放化，你可以通過你的手機(jī)、IM軟件（gtalk、MSN、QQ、skype）和外部API接口等途徑向你的微博客發(fā)布消息。微博客的另一個特點(diǎn)還在于這個“微”字，一般發(fā)布的消息只能是只言片語，像Twitter這樣的微博客平臺，每次只能發(fā)送140個字符。相對于強(qiáng)調(diào)版面布置的博客來說，微博的內(nèi)容組成只是由簡單的只言片語組成，從這個角度來說，對用戶的技術(shù)要求門檻很低，而且在語言的編排組織上，沒有博客那么高，只需要反映自己的心情，不需要長篇大論,更新起來也方便，和博客比起來，字?jǐn)?shù)也有所限制 ；微博開通的多種API使得大量的用戶可以通過手機(jī)、網(wǎng)絡(luò)等方式來即時更新自己的個人信息。言兩語，現(xiàn)場記錄，發(fā)發(fā)感慨，曬曬心情，Twitter網(wǎng)站打通了移動通信網(wǎng)與互聯(lián)網(wǎng)的界限。相比傳統(tǒng)博客中的長篇大論，微博的字?jǐn)?shù)限制恰恰使用戶更易

于成為一個多產(chǎn)的博客發(fā)布者，著名流量統(tǒng)計網(wǎng)站ALEXA的數(shù)據(jù)顯示，Twitter日均訪問量已近2000萬人次，在美國、英國、加拿大等地的網(wǎng)站排名中均列前15位。

微博開通的多種API使得大量的用戶可以通過手機(jī)、網(wǎng)絡(luò)等方式來即時更新自己的個人信息。

三、實習(xí)環(huán)境

通過網(wǎng)絡(luò)以及觀察等，在學(xué)校和學(xué)校外的環(huán)境進(jìn)行多方位的考察，對人們使用微博的情況進(jìn)行了具體深入的了解，每周一次的外出考察和網(wǎng)上問卷調(diào)研是我這次實習(xí)的主要環(huán)境，環(huán)境比較良好。

四、實習(xí)過程

(1)了解過程

起初，自己親自使用了微博一個星期，保持每天看微博一個小時并要求每天發(fā)至少五張圖片五條留言，保持到現(xiàn)在。了解到同學(xué)朋友使用微博的情況，并與他們交流使用心得，了解名人使用微博情況并通過微博與他們進(jìn)行了少量的溝通。

(2)摸索過程

微博的廣泛流傳與手機(jī)分不開的，新浪微博也推出了手機(jī)客戶端，在這個過程，我把手機(jī)客戶端的每一個界面都分析，并得出流程圖，進(jìn)行探索。畢竟微博客戶端流行時間不長，其中的不足之處很多，通過這段時間的摸索清楚的了解到微博客戶端的作用，對以后的設(shè)計有了深層次的認(rèn)識。

(3)實際應(yīng)用

實習(xí)的后半時期，我用Flash軟件做了一個自己設(shè)計的微博的高保真模型，并讓同學(xué)朋友使用。我把微博的廣泛作用和手機(jī)通訊簿聯(lián)系到一起，讓信息交流更直接更方便。

由于微博推出時間短，在微博客戶端的設(shè)計上有很多出路，微博現(xiàn)在雖說已經(jīng)較為廣泛的應(yīng)用，但還有很多的發(fā)展空間。

五、實習(xí)期工作總結(jié)和收獲

進(jìn)入wab2.0時代已經(jīng)以來，人與人的交流的方式逐漸的更新變化，這幾個月實習(xí)以來，我也親自深入的體驗了微博的魅力，成為了一個十足的微博迷。

收獲頗多，在一個嶄新的領(lǐng)域有了自己的設(shè)計空間。為以后的畢業(yè)設(shè)計做下了堅實的基礎(chǔ)，對交互設(shè)計有了新的認(rèn)識，開拓了大學(xué)學(xué)業(yè)一片新的空間嗎，為以后的就業(yè)做了鋪墊。

實習(xí)報告

工業(yè)設(shè)計工科07-1 指導(dǎo)老師 喬楠 邵聰 200805070122