回覆列表
  • 1 # 主案設計師李志鑫

    互動設計起源於網站設計和圖形設計,但現在已經成長為一個獨立的領域。現在的互動設計師遠非僅僅負責文字和圖片,而是負責建立在螢幕上的所有元素,所有使用者可能會觸控,點按或者輸入的東西:簡而言之,產品體驗中的所有互動。

    一、什麼是互動設計?

    互動設計(IxD)定義了互動系統的結構和行為。互動設計師努力在使用者和使用者使用的產品或者服務間建立有意義的關聯,不管是從電腦到移動裝置,家用電器或者其他。我們的實踐會與世界一同不斷髮展。”——互動設計協會(IxDA)

    從第一臺用來容納靜態副本以外的資訊的螢幕被設計出來的那天開始,互動設計就開始了。從按鈕,連結到表單的一切都是互動設計的一部分。在過去的幾十年裡,有許多相關的書已經出版了,這些書解釋了互動設計的方方面面,並探索了互動設計與體驗設計間交叉和重疊的多種方式.

    互動設計的發展幫助和促進了人和他們所在的環境之間的相互作用。不像使用者體驗設計那樣佔據所有面向用戶的系統,互動設計師只關心使用者和螢幕之間的特定相互作用。當然,在實際中從來不會如此清楚地劃分開來。

    二、常見的互動設計方法

    儘管互動設計跨越了無數型別的Web和移動應用程式和網站,有一些固定的方法是所有設計師都可以依賴的。我們將探討一些比較常見的方法:目標驅動設計,可用性,五個維度理論,認知心理學和人機介面指南。

    1. 目標驅動的設計

    目標驅動的設計是由艾倫·庫珀在他的著作《囚犯正在逃出庇護:為什麼高科技產品讓我們瘋狂,如何恢復理智》(出版於1999年)中推廣的。艾倫定義了目標驅動的設計是指把解決問題作為最高優先順序的設計過程。換句話說,目標驅動設計首先關注滿足終端使用者的具體需求和慾望,而不同於舊的設計方法只是專注於技術側上的能力。

    今天來看,艾倫提出的一些觀點是顯而易見的,因為設計師很少會選擇設計完全受制於技術發展約束的互動。然而,其核心的方法是滿足終端使用者的需要並想要的,也就是說就這一點對現在和曾經都是一樣必要的。

    根據艾倫所說的,目標驅動的設計過程,需要作為互動設計師的我們進行五個思維方式的轉變。

    1)先設計,再程式設計。換句話說,目標驅動的設計首先要考慮使用者如何與產品互動,而不是以技術因素開始。

    2)獨立開設計和程式設計的負責。這其中的必要性是,這樣可以使互動設計師可以儘量擁護使用者,而不去擔心技術限制。一個設計師應該信任他或她的開發人員來處理技術方面的問題,事實上艾倫建議如此,否則會把設計師放在利益衝突的位置。

    3)設計師要對產品質量和使用者滿意度負責。雖然利益相關者或客戶會有各自的目標,互動設計師出也對任何在螢幕的另一邊的人有責任。

    4)為你的產品定義某個特定的使用者。這個想法已經發展成為現在使用者研究最通常的東西:角色模型。然而艾倫依舊不斷提醒我們要把角色模型關聯回產品,不斷問自己:這個使用者會在哪裡使用這個產品?他或她是誰?他或她想要完成什麼目標?

    5)結對工作。最後一點是,互動設計師不應該獨自完成工作,而應該與他人協作,艾倫稱其為關鍵的“設計溝通者”。雖然作為設計溝通者的艾倫,在1999年時的設想不過是一個典型的旨在提供營銷產品副本的廣告文字撰稿人,但到今天已經設計溝通者擴充套件到了包括專案經理、內容策略師、資訊架構師等在內的許多其他人。

    2. 可用性

    可用性感覺起來可能是一個模糊的概念,但其核心只是設計師的一個簡單問題——“是不是誰都可以輕鬆使用這個產品呢?“。這個概念在無數的書籍和網路文章上解釋過,我們將回顧一些不同的定義來發現一些共同的主題和細微的差別:

    在艾倫迪克斯,珍妮特芬利,拉塞爾比爾,格里高利阿柏德幾個全著的書《人機互動》中,可用性被劃分成三個原則:

    易學性:新使用者學會在系統中導航的容易程度如何?靈活性:有多少種方法可以實現使用者和系統的互動?魯棒性:我們對使用者面對他們的操作錯誤時的支援做得怎麼樣?

    與此同時,由尼爾森和施耐德曼所解釋的可用性是由五項原則構成的:

    易學性:新使用者學會在系統中導航的容易程度如何?有效性:使用者執行任務的速度如何?記憶性:如果一個使用者一段時間沒有訪問系統,他們對介面的記憶程度如何?錯誤度:使用者一共犯了多少錯誤,從錯誤中恢復的速度如何?滿意度:使用者是否喜歡他們所使用的介面,以及他們是否對結果滿意?

    最後,國際標準(ISO 9241)也把可用性這個詞也分解成五項原則:

    易學性:新使用者學會在系統中導航的容易程度如何?可理解性:使用者對他們所看到的介面的理解程度如何?可操作性:使用者對介面的控制程度如何?吸引度:介面在視覺上的吸引程度如何?易用性的依從性:介面是否遵循了標準?

    顯然,在這些解釋中,我們能看出構成可用的介面是有一些共同的主題的,無論一個設計師依據的是哪條原則,在設計任何介面的時候可用性都是一個重要的考慮方面。

    3. 五維度理論

    在比爾莫格里奇的訪談書籍《設計互動》中,吉莉安史密斯,一位互動設計學者,介紹了關於“互動設計語言“的四維空間的概念,。換句話說,這些維度能夠構成互動本身,因此它們最後形成了使用者和螢幕之間的溝通。原來的四個維度是這樣的:話語,視覺表徵,物體或空間,以及時間。最近,凱文西爾韋,一位IDEXX實驗室的資深互動設計師,增加了第五個維度,行為。

    一維:話語應該儘量易於使用者理解,用這樣一種方式表達使資訊能夠輕鬆傳達給終端使用者。二維:視覺表徵一般都是圖形或影象,基本上就是指一切非文字的東西。他們應該適量地被使用,而不是壓倒。三維:物理物件或空間指的是物理硬體,無論是滑鼠和鍵盤,或者任何使用者能與之互動的移動裝置。四維:時間是指使用者與前三個維度互動所花費的時間長度。它也包括使用者可能的用來衡量進展的方式,包括聲音和動畫。五維:凱文西爾韋在他的文章《互動設計中的設計》中增加了行為這個維度。這是指使用者與系統互動時產生的情緒和反應。

    透過使用這五個維度,互動設計師可以非常專注於使用者與系統通訊和連線時的體驗。

    4. 認知心理學

    認知心理學是關於大腦如何工作,以其發生的心理過程的研究。根據美國心理協會的定義,這些過程包括了“注意力、語言的使用、記憶、感知、解決問題,創造力和思考”。

    雖然心理學是一個非常廣泛的領域,認知心理學尤為重視其中的某些關鍵的元素,實際上,這可能幫助了互動設計領域的形成。唐諾曼在他的書《日常生活的設計》中提到了其中的很多概念。以下只是那些概念中的一部分:

    1)心理模型是指的在使用者心中的一幅景像,使他們產生了對特定的互動或系統的期望。透過學習使用者的心智模型,互動設計師可以創建出使使用者有直觀感覺的系統。

    2)介面隱喻是指利用已知的行為來引導使用者產生新的行動。例如,大多數計算機上的垃圾桶圖示都類似於現實中的垃圾桶,這是為了提醒使用者做出預期的行動。

    5. 人機介面指南

    這部分內容其實有點不恰當,實際上是沒有一整套完整的人機介面指南的。然而,建立人機介面指南背後的理念本身就是一種方法論。準則是由主要的技術設計企業,包括蘋果和安卓、Java和微軟等構建的。他們的目標都是一樣的:用這些建議和推薦來提醒未來的設計師和開發者,這將幫助他們建立普遍意義上直觀的介面和程式。

    三、日常任務和可交付成果

    在整個開發過程中互動設計師是一名關鍵的球員。他或她從事的一系列的活動都是專案團隊的關鍵。這些活動通常包括形成設計策略、將關鍵互動做成線框圖,以及將所有互動建立為產品原型。

    1. 設計策略

    雖然這個將會物的界限比較模糊,但有一點是肯定的:一個互動設計師需要知道自己在為誰設計,以及使用者的目標是什麼。通常情況下,這些資訊會使用者研究員提供。然後,互動設計師在獨立或者受到團隊中其他設計師的幫助的情況下,將會評估目標並形成設計策略。好的設計策略將幫助團隊成員對在哪些需要的地方應該發生什麼樣的互動有一個共同的理解,以方便使用者目標。

    2. 關鍵互動的線框圖

    互動設計師在用於激勵其設計的設計策略上有了好主意之後,就可以開始畫草圖,畫出那些可以促進必要互動的介面。互動的妙門藏在細節中:在這個過程中,有一些專家會直接在紙板上素描,而有些則使用線上應用程式來幫助他們,而有的則會使用兩者的組合。有一些專家會協同工作來建立這些介面,而有的則獨自建立。這一切都取決於互動設計師自己的特定工作流。

    3. 原型

    根據專案的需要,互動設計師的下一個合乎邏輯的步驟可能涉及到建立原型。團隊製作互動原型有許多不同的方法,比如html/css原型,或紙上原型,在這裡,我們不會覆蓋廣泛的細節。

    4. 保持流行性

    對一個現實中的互動設計師來說,最難的部分是適應工業發展變化的速度。每一天,新的設計師都可能要在不同的方向上看待媒介。結果便是,使用者也會預期這些新型別的互動會出現在你的網站上。謹慎的互動設計師會響應這種演變,不斷探索線上互動以及利用新技術,但是我們總是要記住正確的互動或技術是最好地滿足角色使用者的需要的那些,而不只是最新穎或最令人興奮的那些。互動設計師還透過在推特上跟隨互動設計的思想領袖(比如下列的著名設計師)並主動推動媒介本身的發展,以保持流行性。

    四、著名的設計師

    從左到右,從上到下分別是:

    ALAN COOPER,BILL SCOTT,BRAD FROST,BRENDA LAUREL,BRENDA SANDERSON,

    DAN SAFFER,DON NORMAN,KAREN MCGRANE,KIM GOODWIN,MAT MARQUIS,

    MIKE MONTEIRO,THERESA NEIL,WHITNEY HESS

    譯者注:此處篇幅過長,因而對設計師作了聚合,可在原文中檢視詳細個人說明。

    五、工具

    互動設計師使用許多不同的工具來完成他們的工作。無論是在一張餐巾紙上畫互動草圖,還是向客戶展示原型,他們的目標都是一樣的:透過對話來溝通。互動設計師最需要的就是溝通。下面的列表裡是一系列用於促進對話的工具。記住,最終建立的Web介面,通常與面向使用者的(前端)技術完成的,比如CSS / HTML。

    1. Balsamiq Mockups

    Balsamiq的介面簡單,使用手繪風格元素和comic sans字型,使得製作互動線框圖的過程變得簡單,可以認為它是一個線上版的紙上原型!

    2. Invision

    InVision是一個免費的網站和移動App的原型工具。InVision旨在透過結合Photoshop,Sketch等其他應用促進溝通。設計師可以上傳線框圖,並透過熱區來連線它們。客戶、利益相關者和他的同事設計可以直接新增評論,並有實時演示工具LiveShare。

    3. Omnigroup

    Omnigraffle是OSX上的互動設計師可以利用的圖表軟體,用單調的審美創造的圖表軟體Omnigraffle更關注背後的互動設計而不是設計本身,同時其也具備許多優秀的模擬功能。

    4. Patternry

    沒有人願意浪費時間重新發明輪子。良好的互動設計或程式碼聚合在一起更能節省時間和精力,並確保設計的一致性。Patternry是一種允許團隊互動設計師分享並將其設計和程式碼資產儲存在一箇中央位置的工具。

    5. Sketch

    Sketch是一種設計工具(Mac),最好用於圖示的中高階保真度模型,是一個Adobe Photoshop的一個輕量級替代。

    6. Axure

    Axure RP可以說是市場上最好的互動設計工具。比Balsamiq擁有更強大的功能,內建的協作和共享功能,並且能夠輕鬆地實現線框原型。缺點是,它可能提供了太多,這意味著它有一個緩慢的學習曲線。

    7. Uxpin

    UXPin是一個協同設計平臺,支援低保真的線框圖和高保真的動畫原型。設計師使用Photoshop或Sketch製作的分層原型可以直接匯入,然後從利益相關者處得到反饋。該工具還包括可用性測試和現場演示功能。

    六、協會和組織

    不管互動設計師是否屬於任何特定的組織,其仍然是一個互動設計者。不過,找到其他設計師的網路是向他人學習的好方法。這些協會在美國都有,有一些則是國際性組織。

    1)IXDA-Interaction Design Association

    2)AGIA-American Institute of Graphic Arts

    美國平面藝術學院,組織中的平面設計師更經常地為新媒體設計作品,互動設計在其中扮演了重要組成部分。

    七、書籍

    其實相關的互動設計書籍列表可以佔掉好多頁。在這裡,我們縮小成幾本標誌性的圖書的列表。如果你真的渴望擴大你的圖書收藏,可以看看我們網站搜尋使用者體驗的推薦書集:http://hao.uisdc.com/book/

    從左到右依次是

    《互動設計:建立創新應用和裝置(第二版)》《設計數字時代:如何建立以人為本的產品和服務》《設計介面》《互動設計:超越人機互動》《日常生活的設計》

    此外還推薦《點石成金》。

  • 2 # 藍湖產品設計協作

    優秀的使用者體驗方案需要多個鏈路的協同工作才能達到目的。

    首先考量其業務邏輯是否清晰,其次產品功能要滿足“尼爾森的十大互動可用性原則”,最重要的,還是需要經過使用者的檢驗。

  • 中秋節和大豐收的關聯?
  • 小時候常打的“屁股針”,起效快又便宜,為什麼現在少見了?