第一篇：淺析手機Web App的交互設計

澤思網絡 – 上海APP開發商

www.tmdps.cn 淺析手機Web App的交互設計

HTML5為提高手機網頁的體驗提供了諸多的可能性，交互效果越來越接近原生App，故而成為Web App，有望將APP功能引向瀏覽器，讓移動平臺的競爭由系統平臺轉向了瀏覽器之間。

Web App比起原生App和wap有著自身的優缺點，先簡單了解下其特點，掌握設計趨勢，也便于以后在設計中應用。離線存儲離線存儲的意思是第一次訪問是下載網頁，以后在無網絡的情況下也可以使用。一個離線應用程序就是一個URL列表–HTML，CSS，JavaScript，圖片，或者其他類型的資源。訪問時探測到服務器列表的緩存名單時，會觸發下載事件，根據名單下載指定的文件存儲到本地。

在下載的同時，瀏覽器將會周期性的觸發進度事件，此事件包含了諸如多少文件已被下載，多少文件仍然處于下載隊列等信息。當緩存名單中所有列出的資源被成功下載后，瀏覽器觸發下載完成事件。當再次訪問時，瀏覽器會再次檢查網站的緩存名單，通過對比名單和本地的資源，得知是否需要加載新資源。新版本加載完成之后不會立即被使用。后臺可以下載新網頁，也不會強制用戶打斷當前操作流程，重新刷新頁面。如果此過程中的任何一點出現可怕的錯誤，你的瀏覽器將會觸發一個錯誤事件，并立即終止。類似于安裝應用程序，中途不可以出錯。

Web App可以利用存儲的特性將重要和重復的數據保存在本地，避免頁面的重復刷新，減少重要信息在傳輸過程中被泄露，增量傳輸修改內容。而離線存儲但也不是Web App特有的問題，瀏覽和閱讀類App也有離線的使用需求，用來應對隨時可能出現的網絡問題。

如離線模式是利用網絡閑暇時間下載內容，當用戶打開App時立即開始閱讀。或者是網絡不佳情況下保存用戶的操作記錄和加載相對重要的文字內容，之后再依次上傳澤思網絡 – 上海APP開發商

www.tmdps.cn 已更新的數據，如微博的發送隊列機制。交互操作手機網頁的操作發送只有點擊，點擊鏈接和控件，交互方式非常單一，而Web App 的操作將越來越接近應用程序。

1.Web App的建立離不開網絡速度的提升，加載更多的內容，圖形元素更為豐富。同時更多的JS交互，便于用戶操作和形成扁平化的信息架構。

2.識別更多的手勢操作，如下拉刷新和右滑存檔等平移手勢。操作不必全部呈現在界面中，和平臺操作保證一致。

3.調用系統硬件，如重力感應等傳感器，不過在手機端還鮮有應用案例，離大規模應用還有一定的距離。

第二篇：基于用戶體驗的手機產品交互設計原則

基于用戶體驗的手機產品交互設計原則

一、用戶體驗信息收集

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

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

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

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

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

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

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

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

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

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

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

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

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

允許誤操作，有效引導——安全感

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

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

品牌元素在交互上的延續性——熟悉感和優越感

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

交互步驟的繁復難記——挫敗感

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

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

二、用戶分類

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

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

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

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

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

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

三、交互設計原則

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

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

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

同樣需要考慮環境因素對用戶的影響，利用機械結構多樣化設計實現單手操作模式和雙手操作模式的切換，需要設計切換的便捷方式、屏幕方向的變化和鍵盤的轉換等等硬件交互要素的變化。

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

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

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

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

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

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

3.軟件交互設計 ? ? ? ? ? 導航功能。隨時轉移功能，很容易從一個功能跳到另外一個功能；

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

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

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

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

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

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

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

4.體驗交互設計 ? ? ? ? ? 讓用戶控制交互過程。“下一步”、“完成”，面對不同層次提供多種選擇，給不同層次的用戶提供多種可能性；

預設置的默認狀態應該具有一定共通性和智能性，并對用戶操作起到協助或提示的作用；此外，還應留給用戶修改和設置默認狀態的權限；

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

視覺設計，例如開關機動畫、界面顯示效果等；

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

四、總結

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

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

交互設計心得整理

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

這篇文章是我幾年來在美國從事交互設計工作的一個經驗總結。當時我們遵循以用戶為中心（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）聽：做一個交互設計師，最重要的一點就是要懂得傾聽（這里蘊藏了一個隱晦的性格屬性：謙虛！）。通常情況下，我們不是用戶，所以很難 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://

第五篇：數字交互設計

《數字交互設計》教學大綱

課程名稱：數字交互設計 課程類型：專業方向課 課程編號：134081

學時數及學分：總32學時，2學分，其中講課8學時，上機24學時。

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

本大綱審定人：數字媒體學院學術委員會

一、課程的目的、要求和任務

1．通過本課程的學習，讓學生認識到新媒體的數字化、集成化和交互性特點。2．讓學生了解人機交互的歷史、發展現狀及趨勢。了解交互界面和交互設備。

3．了解人機界面的定義、起源、發展、研究內容及發展趨勢。熟悉相關學科及知識，掌握人機界面設計中認知心理學、人機工程學、人機界面的藝術設計、色彩設計等。

4．結合移動互聯技術、物聯網技術以及多點觸摸、體感等人機交互技術，讓學生的設計作品在跨媒體平臺上與用戶交互。通過創新的交互模式，促進人與數字媒體內容交互的過程中達成良好的用戶體驗。

為達到上述目的和要求，在教學內容和課程設置上，應注意以下有關問題：

1．該課程按照從簡到繁、循序漸進、整體系統的原則進行教學，將課堂講授、案例分析和實踐作業三者相結合，既注重理論基礎又注重技術操作。

2．堂上授課、集中討論、分組實踐的方式進行教學。

3．課程高度重視藝術和技術的融合，面向行業應用，緊隨技術的發展。4．平時作業不少于4次，期末作品1次。

二、課程主要內容及學時分配

第一講

緒論（2學時）

一、交互設計概述

二、課程內容介紹

第二講

新媒體及其交互性（4學時）

一、新媒體的發展與數字內容的涌現

二、新媒體的可交互性

三、人機界面

四、Web界面設計實驗

第三講

人機交互技術概述（4學時）

一、人機交互的概念、發展歷史及趨勢

二、人機交互與其他學科的關系（認知心理學 計算機圖形技術 多媒體技術 虛擬現實技術）

三、交互設備與交互界面

四、鼠標與鍵盤交互試驗。鼠標跟隨效果實驗 第四講

交互設計的方法與設計評價（6學時）

一、可交互的數字內容

二、事件與響應

三、交互設計的流程和方法

四、交互設計的評價。人機界面設計的測試和評價的意義、設計準則、人機界面的測試、界面設計評價、硬件人機界面設計評價、軟件人機界面設計評價與可用性測試

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

人機界面設計（5學時）

一、人機界面概述。人機界面的定義、起源、發展；人機界面學的研究內容；人機界面的設計的發展趨勢；20世紀最偉大的10種人機界面裝置。

二、軟件人機界面概述、軟件人機界面的形式與標準、軟件人機界面設計、web界面設計、圖標設計。

三、Flash跳轉函數--控制播放器實驗 第六講

驅動數字內容（4學時）

一、鼠標與鍵盤

二、體感交互

三、多點觸摸交互模式設計實驗 第七講

flash互動媒體設計（5學時）

一、flash多媒體資源整合設計

二、flash創意網站設計

三、進度條、聲音和背景音樂的控制與Flash跳轉函數——控制播放器實驗 第八講

html5 web交互創意表現（2學時）

一、html5畫布

二、html5移動媒體創意設計

三、與其他課程的關系

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

四、考核方式

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

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

五、參考書目

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

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

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

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

六、課程所需設備

多媒體教學系統、數據手套、android平板電腦。