交互設計

設計流程

1、分析階段

需求分析、用戶場景模拟、競品分析(聆聽用戶心聲)。

需求分析:對于一個産品來說，必然有對用戶需求的分析内容，更多的是從MRD與PRD獲得，或者從産品需求評審會議上得到需求分析的内容，當然可以直接與産品經理交流獲得相關産品需求。如果說設計原則是所有設計的出發點的話，那麼用戶需求就是本次設計的出發點。

用戶場景模拟:好的設計建立在對用戶深刻了解之上。因此用戶使用場景分析就很重要，了解産品的現有交互以及用戶使用産品習慣等，但是設計人員在分析的時候一定要站在用戶角度思考:如果我是用戶，這裡我會需要什麼。

競品分析(聆聽用戶心聲):競争産品能夠上市并且被UI設計者知道，必然有其長處。這就是所謂三人行必有我師的意思。每個設計者的思維都有局限性，看到别人的設計會有觸類旁通的好處。當市場上存在競品時，去聽聽用戶的評論，哪怕是罵聲都好，别沉迷于自己的設計中，讓真正的用戶說話。

輸入物:MRD、PRD、市場調查報告、競品分析文檔(或其一或全部)

輸出物:設計初稿(或許隻是幾個簡單的界面)

2、設計階段

設計方法采用面向場景、面向事件驅動和面向對象的設計方法。面向場景是針對該産品使用場所等模拟，模拟用戶在多種情況下産品使用的模拟。面向事件驅動則是對産品響應與觸發事件的設計，一個提示框，一個提交按鈕……這類都是對事件驅動的設計。面向對象，産品面向的用戶不同對于産品的設計要求不同，不同年齡層的用戶對于産品的要求不同，産品的用戶定位将對UI設計師影響因素。

輸入物:交互文檔(高保真原型)

輸出物:設計終稿(所有的設計稿)

3、配合

UI設計師交出産品設計圖時，更多的配合開發人員、測試人員進行截圖配合。配合開發人員對于PSD格式的圖片切圖操作，對于不同的開發人員的要求，切圖方式也有不同，UI設計師需配合相關的開發人員進行最适合的切圖配合。

輸入物:設計終稿

輸出物:設計修改稿(設計稿切片)

4、驗證

産品出來後，UI設計師需對産品的效果進行驗證，與當初設計産品時的想法是否一緻，是否可用，用戶是否接受，以及與需求是否一緻。都需要UI設計師驗證，UI設計師是将産品需求用圖片展現給用戶最直接的經手人，對于産品的理解會更加深刻。

輸入物:産品

輸出物:産品(面向用戶最終版本)

産品UI設計中夾雜着許多設計原則要求，統一公司UI設計流程，使UI設計師參與到産品設計整個環節中來，對産品的易用性進行全流程負責，使UI設計的流程規範化，保證UI設計流程的可操作性。UI設計師應該分析公司産品的特點，制定符合産品生命周期的UI設計流程。每個産品的生命周期中，UI設計師應該嚴格按照流程，完成每個環節的職責，确保流程準确有效的得到執行，從而提高産品的可用性，提升産品質量。

主要内容

交互設計是一門特别關注以下内容的學科：

1、定義與産品的行為和使用密切相關的産品形式。

2、預測産品的使用如何影響産品與用戶的關系，以及用戶對産品的理解。

3、探索産品、人和物質、文化、曆史之間的對話。

交互設計從“目标導向”的角度解決産品設計：

1、要形成對人們希望的産品使用方式，以及人們為什麼想用這種産品等問題的見解。

2、尊重用戶及其目标。

3、對于産品特征與使用屬性，要有一個完全的形态，而不能太簡單。

4、展望未來，要看到産品可能的樣子，它們并不必然就像當前這樣。

為什麼要進行交互設計？

在使用網站，軟件，消費産品，各種服務的時候（實際上是在同它們交互），使用過程中的感覺就是一種交互體驗。随着網絡和新技術的發

展，各種新産品和交互方式越來越多，人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候，可能為當初的使用者本身就是該行業的專家，沒有人去關注使用者的感覺；相反，一切都圍繞機器的需要來組織，程序員通過打孔卡片來輸入機器語言，輸出結果也是機器語言，那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大衆組成的時候，對交互體驗的關注也越來越迫切了。

因此交互設計（InteractionDesign）作為一門關注交互體驗的新學科在二十世紀八十年代産生了，它由IDEO的一位創始人比爾?莫格裡奇在1984年一次設計會議上提出，他一開始給它命名為“軟面（SoftFace）”，由于這個名字容易讓人想起和當時流行的玩具“椰菜娃娃（CabbagePatchdoll）”，他後來把它更名為“InteractionDesign”――交互設計。

從用戶角度來說，交互設計是一種如何讓産品易用，有效而讓人愉悅的技術，它緻力于了解目标用戶和他們的期望，了解用戶在同産品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。交互設計還涉及到多個學科，以及和多領域多背景人員的溝通。

通過對産品的界面和行為進行交互設計，讓産品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目标，這就是交互設計的目的。

界面設計

從廣義上來說，也可以認為界面設計包含交互設計，在這樣的情況下，它同時還包含另外的部分例如外觀設計或平面設計，這些都是可以單獨進行研究的更細的分支。

設計原則

可視性：功能可視性越好，越方便用戶發現和了解使用方法

反饋：反饋與活動相關的信息，以便用戶能夠繼續下一步操作

限制：在特定時刻顯示用戶操作，以防誤操作

映射：準确表達控制及其效果之間的關系

一緻性：保證同一系統的同一功能的表現及操作一緻

啟發性：充分準确的操作提示

交互設計準則

1.倫理的（能體諒人，有幫助）不傷害、改善人的狀況

2.有意圖的，能幫助用戶實現他們的目标和渴望

3.注重實效，幫助委托的組織實現它們的目标

4.優雅的:最簡單的完整方案、擁有内部的一緻性、合适的容納和情感

混亂因素

1.最常見的情況是公司無交互設計師，産品信息未經過梳理就傳達給視覺效果設計師了，

最後産出了一個可用性比較差的産品。

PM把設計訴求提供給GUI，GUI也按部就班的完全執行，可出來的東西就是感覺有問題，但也說不出到底為什麼，于是一版接一版不停的改，最後……這個沉重的負擔壓得UI直不起腰來，這不公平。

此時GUI設計師或産品經理要大膽的站出來：“我們需要交互設計師來幫我們梳理信息！”

當然，交互設計師也要積極主動回應一下。

2.還有一種情況：由于視覺設計本身是一種比較主觀的創作性工作，那些已經被制定好的視覺結構常常因設計師的“審美需要”而被剝離、切割。GUI設計師也常常為滿足個人表現欲，加入許多不必要的線條和修飾……諸如此類，很多産品上線後的可用性可想而知。

這種情況下，交互設計師（或産品經理）的個人魅力和溝通能力尤為重要，既不能打擊GUI設計師的積極性，又要确保GUI設計師利用其專業知識在視覺結構内進行充分發揮，這是一種藝術。

行業發展

初創期（1929年-1970年）

1959年，美國學者B.Shackel提供了人機界面的第一篇文獻《關于計算機控制台設計的人機工程學》。

1960年，LikliderJCK首次提出“人際緊密共栖的概念，被視為人機界面的啟蒙觀點。

1969年，召開了第一次人機系統國際大會，同年第一份專業雜志“國際人際研究（UMMS）”創刊。

奠基期（1970年-1979年）

從1970年到1973年出版了四本與計算機相關的人機工程學專着。

1970年成立了兩個HCI研究中心：一個是英國的Loughboough大學的HUSAT研究中心，另一個是美國Xerox公司的PaloAlto研究中心。

發展期（1980年-1995年）

理論方面，從人機工程學獨立出來，更加強調認知心理學以及行為學和社會學等學科的理論指導。

實踐範疇方面，從人際界面拓延開來，強調計算機對于人的反饋交互作用。“人機界面”一詞被“人機交互”所取代。HCI中的“I”，也由“Interface（界面/接口）”變成了“Interaction（交互）”。

提高期（1996年-）

人機交互的研究重點放到了智能化交互，多模态（多通道）-多媒體交互，虛拟交互以及人機協同交互等方面，也就是“以人為中心”的人機交互技術方面。

人機交互

人類工程學、心理學、認知科學、信息學、工程學、計算機科學、軟件工程、社會學、人類學、語言學、美學……

圖形設計、産品設計、商業美術、電影産業、服務業……

交互的三個要素

機器/系統、人、界面

基礎的交互方式

交互過程是一個輸入和輸出的過程，人們通過人機界面向計算機輸入指令，計算機經過處理後把輸出結果呈現給用戶。人和計算機之間的輸入和輸出的形式是多種多樣的，因此交互的形式也是多樣化的。

設計規範

當産品規模大了之後就需要多個産品設計師協作完成整個産品，由于不同産品設計師之間的設計理念、設計方法、設

計習慣的不同，協作完成的産品往往會導緻産品一緻性差，質量參差不齊。

這個時候會需要一份交互設計規範來規範和指導産品設計，從而保證産品設計的一緻性，提升整體産品質量。

頁面規範

頁面信息規範主要指頁面的靜态信息應該遵循的規則，包括：

1.标題規範

用于規定整個産品中所有不同層級不同功能的頁面應該使用的标題的規則。

2.新窗口鍊接規範

用于規定頁面鍊接是采用新窗口打開還是本窗口打開的規則。

3.圖片規範

用于規定圖片信息是否帶有alttitle值，這些值又取自那裡。

信息規範

交互提示規範主要用于規定在交互過程中交互的方式及其信息提示，包括：

1.預先信息提示

所有交互進行前需要提供充分給用戶的預先應該知道的提示信息。

a.表單提交類

表單提交的步驟，每個表單項的要求需要給出提示信息。（如密碼要多少多少位。搜索框鼓勵輸入什麼内容。）

b.謹慎類操作

一個操作對用戶來說需要慎重操作的。如扣除金币等。需要預先提示。（如：扣除金币的操作需要預先提示扣除金币數目，以及當前金币是否足夠等等。）

c.差異化規則

當一個功能的規則與用戶習慣的規則具有一定的差異或比較複雜時，需要給出提示。或者給出幫助鍊接。

2、操作信息提示

所有交互進行中需要提供操作相關的提示。

a.操作确認提示

一個操作涉及數據删除，等需要謹慎操作的操作需要給出删除确認提示框。

b.操作錯誤提示

當用戶的操作不符合操作的規則，需要給出操作提示。（如評論字數為0或超過限制字數，搜索框未輸入内容時提交）

3、結果信息提示

交互進行後給出結果反饋是應該給出适當的提示。

a.查詢類結果

任何信息列表、查詢結果，當對應信息無結果的時候需要給出有無結果狀态提示。

b.保存類結果

一個表單是用戶提交保存數據的。如設置個人資料。提交保存後需要給出提示。成功綠色、失敗紅色、普通灰色。

c.附加類結果

一個表單是對其他數據進行附加的，如評論等。提交成功後應直接跳轉到操作産生的結果展示部分。（如提交評論後應該直接展示給用戶他提交的評論）

控件規範

當有一些功能會被多個模塊複用的時候（如标準評論框、标準好友選擇器等），需要把這些功能提煉出來設計成通。

用控件被多個模塊共用。

有了頁面信息規範、交互信息規範、通用控件規範就能保證頁面信息的一緻、交互方式及提示的一緻、通用功能模塊一緻。從而保證産品的一緻性，并提高産品質量。

學術機構

北京大學計算機系人機交互與多媒體研究室

清華大學工業工程系人因工程實驗室

中國科學院軟件研究所人機交互技術與智能信息處理實驗室

歐盟可用性中國中心

微軟亞洲研究院—交互設計中心

UPA中國

業界公司信息

IBM：500人，25個可用性實驗室

微軟：200人，30個可用性實驗室

Philips：100多人

西門子：100人

Oracle：約70人

韓國三星：100多人

Adobe：21人

eBay：20人

Tencent：30

HP、Yahoo、Nokia、AOL、Intel、GE、TI、CISCO、……